Eurokicker
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Fireworks > Brushed Metal

Brushed Metal

Wir alle kennen diesen "Brushed Metal"-Stil, und der ein oder andere könnte ihn auf seiner Website - im Header etwa - auch gebrauchen. Doch wie genau bekommt man ihn hin?

Das wird nun im Folgenden erklärt. Mit nur wenigen FW-Basics sollte es für jeden möglich sein, seinen eigenen "Brushed Metal"-Stil zu erzeugen.

Wir beginnen mit einer neuen Datei. In diesem Tutorial verwende ich dafür eine Größe von 300 x 200. Das kann jedoch von Fall zu Fall variieren. Wichtig ist nur, sich die Breite zu merken - dazu gleich mehr!

PUNKT 1: Erstellen einer neuen Form - ein Rechteck:

Wir erstellen also ein Rechteck mit einer Höhe von 200 px, aber einer Breite von 350px! (Wir erinnern uns daran, dass die Leinwand nur eine Breite von 300 hat!)

Dieses Rechteck richten wir mit X (0) und Y (0) aus. tooltipp

PUNKT 2: Kolorieren des Rechtecks:

Um einen originalgetreuen Stil zu erreichen, empfiehlt sich ein mittlerer Grauton. Doch ist auch jede andere Farbe(nkombination) möglich!

PUNKT 3: Erstellen des Effektes:

Schritt 3.1:

Wir wechseln (bei markiertem Rechteck) auf Filter (das "+") und wählen "Mosaik". tooltipp Hier empfehle ich den Wert 50. tooltipp

Bei einem höheren Wert erhalten wir einen "stärker gebürsteten" Effekt (starke Kontraste etc. ...), bei einem niedrigeren dagegen einen  "sanfteren".

Für den Fall, dass das Feld noch mit Text versehen wird, und davon gehe ich aus, empfiehlt sich der Wert 50.

Hier würde ich allerdings den Haken bei "Farbe" vermeiden. Es sieht ... nicht schön aus :D ... aber jeder, wie er meint ...

- mit OK bestätigen.

Schritt 3.2:

Wir gehen erneut auf 'Filter', wählen aber diesmal unter "Weichzeichnen" den Filter "Bewegungs-Weichzeichnen". tooltipp Hier sollte der Winkel auf 0 Grad gestellt werden. Auf diese Weise erhält man eine "waagerecht" (originalgetreu) gebürsteten Wirkung.

Als Abstand habe ich den Wert 50 gewählt. Ein niedriger Wert führt zu einem unqualitativeren Ergebnis. Ein (zu)hoher Wert lässt zwar die "Kratzer" länger werden. Allerdings kommt von rechts ein unpassender, weißer Schleier. (Daher ist auch das Rechteck um 50px breiter als die Leiwand). Also empfiehlt sich auch hier der Wert 50. - mit OK bestätigen.

Zwischenergebnis:

Man könnte eigentlich schon jetzt der eigenen Kreativität freien Lauf lassen. Für diejenigen allerdings, die nicht kreativ veranlagt sind, geht es noch weiter ... tooltipp

PUNKT 4: Die Liebe zum Detail

Wir erstellen ein Rechteck, das exakt Leinwandgröße (300 x 200 px) besitzt.

Dieses füllen wir mit einem linearen Verlauf. tooltipp Diesen könnte man so einstellen:

Ich habe links und rechts Schwarz mit einer einer Transparenz von 50% gewählt. In der Mitte dann zwei weiße Farbakzente. tooltipp Das Ganze dann etwas schräg gesetzt. tooltipp

Aber hier kommt es echt auf Kreativität an ... und auf den eigenen Geschmack.

Wie könnte ich diesen Stil jetzt verwenden?

Ich empfehle, ein Bild von der Größe 128 x 128 px zu erstellen und es im Fireworks-Ordner unter z.B. "C:/Programme/Macromedia/Fireworks 8/Configuration/Textures" zu speichern. Dann kann man es jederzeit als Textur verwenden.

Allerdings darf man dann diesen Verlauf NICHT für den vorherigen Punkt verwenden, da es sich dann nicht mehr kacheln lässt.

Hiermit sind wir am Ende des "Brushed Metal"-Tutorials angekommen. Ich hoffe, es hat alles funktioniert und wünsche viel Spaß beim Experimentieren.

Das Endergebnis: tooltipp

 

Autor: fiu

Abbildungen

Abbildung 1

Abbildung 1

Abbildung 2

Abbildung 2

Abbildung 3

Abbildung 3

Abbildung 4

Abbildung 4

Abbildung 5 - Zwischenergebnis

Abbildung 5 - Zwischenergebnis

Abbildung 6

Abbildung 6

Abbildung 7

Abbildung 7

Abbildung 8

Abbildung 8

Abbildung 9 - Endergebnis

Abbildung 9 - Endergebnis

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping


Ferienwohnungen
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /