Blinkies erstellen - Teil 1: Vorbereitung
Jaja, wer liebt sie nicht? Diese kleinen, in allen Farben wild blinkenden Mini-Schriftzüge, teils mit zusätzlicher Dekoration, teils ohne - aber immer mit einem mehr oder weniger kurzen Wort oder Ausdruck: Unsere Blinkies! ^0^
Spaß beiseite: Blinkies eignen sich sehr gut, um eine Seite etwas aufzupeppen oder um Besucher auf neue Menüpunkte hinzuweisen; wohlgemerkt sollten sie allerdings eher sparsam eingesetzt werden, da der Besucher doch allzu leicht in einen ungewollten Blink- und Farbrausch gerät.
Als erstes öffnet ihr eine neue Datei mit "Strg+N" im Photoshop. Sie sollte die Maße 10x11 Pixel haben (Breite x Höhe) und mit einer Farbe eurer Wahl gefüllt werden. (Nehmt dazu am besten das Füllwerkzeug). Bereits jetzt solltet ihr das Bild schon auf 1200% vergrößern, denn anders ist genaues Arbeiten kaum möglich.
Für unsere Version des "Pixelblocks" runden wir die Kanten nun noch ab und löschen dafür mit dem Radiergummi jeweils die vier Ecken. Dafür müsst ihr das Radiergummi auf "Buntstift" mit der Größe 1 und Deckkraft 100% stellen.
-Bild fehlt -
Nun können wir die Ecken löschen und erhalten dieses noch recht unspektakuläre Exemplar:
-Bild fehlt -
Damit beginnt jetzt auch die Arbeit, Schatten und Lichter einzufügen. Überlegt euch, von welchen Seiten ihr Schatten auf eurem Block haben möchtet und welche Seiten belichtet sein sollen. Beginnt aber zuerst, eine dunklere Kontur auf die Kanten eures Blocks zu legen - danach folgen Licht und Schatten.
-Bild fehlt -
In normaler Größe wird der 3D-Effekt schon um einiges deutlicher ^^ Süß oder?!
-Bild fehlt -
Je nachdem, wie viele Buchstaben euer Wort haben wird, entsprechend viele Blöcke braucht ihr dann natürlich. Ich möchte gerne den Begriff "MA-S" in einen blinken verwandeln und brauche also 4 Blöcke (Zeichen werden natürlich auch einzeln gewertet.) Nun müssen wir also unsere Arbeitsfläche mit 4 multiplizieren - aber halt! Nur die Länge! ^_~ Da wir vorhin die Maße 10x11 gewählt haben muss unser Bild im Endeffekt die Maße 40x11 haben. Das könnt ihr nun folgendermaßen einstellen: "Bild -> Arbeitsfläche...".
Markiert nun die Ebene, auf welcher der Block ist, im Ebenenfenster mit der Mouse (, sodass sie blau unterlegt ist) und drückt zusammen "Strg+J", damit verdoppelt ihr die Ebene. Das müssen wir nun dreimal machen, damit wir vier Ebenen erhalten. Schiebt die Ebenen dann alle nebeneinander.
-Bild fehlt -
Eine zweite Variante wäre, die Kanten der Blöcke übereinander zu schieben, damit werden die Zwischenräume kleiner, aber das ist kein absolutes Muss ^_^ Eurer Fantasie sind schon bei den Blöcken keine Grenzen gesetzt! Wenn ihr die Kanten übereinander schiebt, wird euer Bild natürlich kleiner, das müsst ihr entweder vorher berechnen oder hinterher noch einmal mit dem Freistellungswerkzeug korrigieren.
-Bild fehlt -
Nun können wir schon mit der Beschriftung anfangen. Nehmt euch das Textwerkzeug vor und wählt eine sogenannte "Pixelschrift" aus. Pixelschriften sind Schriften, die relativ klein sind (zwischen 6 und 8 px) und sich besonders für kleine Grafiken oder unauffällige Schriftzüge eignen. Mein unübertroffener Favorit ist nach wie vor "04b_03b" ^_^. Selstverständlich könnt ihr eure Buchstaben auch selber pixeln, aber das ist natürlich mehr Aufwand. Ein kleiner Tipp noch am Rande: Da wir alle Buchstaben auf einer einzelnen Ebene brauchen, brauchen wir auch etwas Platz. Das ist bei der kleinen Grafik, die derzeit die Blöcke beinhaltet, manchmal gar nicht so einfach. Öffnet also einfach ein neues Dokument in der Größe 222x200 px und schreibt dort hinein. die Buchstaben lassen sich dann ganz einfach von einem Dokument zum anderen ziehen.
Wenn wir nun also all unsere Buchstaben und Zeichen in einer Farbe unserer Wahl erstellt haben, müssen wir sie noch in der Mitte unserer Blöcke platzieren. Wenn nicht alle Buchstaben 100%ig in der Mitte sind, ist das nicht schlimm, das fällt später in der Miniatur-Version fast nicht mehr auf^^
-Bild fehlt -
Mit "Strg+J" müssen wir nun alle Buchstaben-Ebenen duplizieren, denn wir wollen ja später eine Animation erstellen! Noch sieht das langweilig aus, weil sich nichts am Bild geändert hat, aber dafür sorgen wir jetzt:
Klickt bei jeder gerade eben verdoppelten Buchstaben-Ebene auf das "f im Kreis" (= Ebenenstile), das sich ganz unten im Ebenenfenster befindet und fügt eine Kontur um jede Ebene (wie genau das funktioniert könnt ihr im Tutorial "Kontur erstellen" nachlesen!). Die Kontur sollte folgende Werte haben:
Größe: 1
Position: außen
Füllmethode: normal
Deckkraft: 100%
Alles andere ist euch überlassen, allerdings sollte die Kontur schon auffällig sein ^.~
Schaltet nun vorübergehend die duplizierten Buchstaben auf unsichtbar. Dazu müsst ihr die Augen vor den Ebenen deaktivieren.
-Bild fehlt -
Wechselt jetzt unten im Werkzeugmanager zu ImageReady.
-Bild fehlt -
Weiter geht's im zweiten Teil ^.~
Wenn ihr eine Version mit Bildern wollt, besucht einfach meine Site:
http://www.MA-Shrine.de
Für Fragen stehe ich natürlich gerne zur Verfügung^^
LG,
BlackAngel-