[Photoshop] Animation: Equalizer

westside · 25. Februar 2007

Animation: Equalizer

Jeder kennt ihn, den Equalizer. Sieht ganz schick aus, also hier ein kleiner Denkanstoß, wie man so einen ganz leicht mit Photoshop+Imageready erstellen kann:

{img-src: //img178.imageshack.us/img178/5762/equalizer2uj3.gif}

Schritt 1:
Wir erstellen ein neues Dokument. Da kleine Equalizer besser aussehen als große, nehme ich mal 100*80 Pixel.
Da die Animation später zu großer Datengröße führen kann, arbeiten wir nur mit Schwarz, weiß und Graustufen. Schließlich wollen wir es ja auch in Foren benutzten können und nicht an der 20KB Grenze scheitern!
Mit dem Farbverlaufstool färben wir unsere Hintergrundebene z.B. so ein:

{img-src: //img373.imageshack.us/img373/4476/equalizerzv3.png}

Schritt 2:
Jetzt wählen wir einen 1pixel Pinsel aus und erstellen die Grundlinie der einzelnen Balken (Breite: 3Pixel) in einem hellen Grau. Einen Pixel darunter und mit einem Sietenabstand von jeweils 2 Pixel erstellen wir nun einen Rahmen, in einem minimal dunklerem Grau. An den Seiten fügen wir einzelne Level hinzu.
Das sollte dann so aussehen:

{img-src: //img364.imageshack.us/img364/2862/equalizer2ol7.png}

Es ist empfehlenswert den Equalizer nicht zu hoch zu machen, dass sieht nämlich ziemlich blöd aus und bringt einem mehr Arbeit im nächsten Schritt ein:

Schritt3:
Nun beginnen wir mit den Säulen. Imo siehts am besten aus, zwischen jedem Level-Balken einen Pixel Platz zu lassen. Man kann es auch mit durchgehenden Balken machen, aber ich beschrenke mich auf Variante 1.
In bester Equalizer Manier fertigen wir nun die Balken an. Hierbei sollte man die spätere Animation beachten. Die eine Säule muss also auf die andere aufbauen und darf nicht willkürlich erstellt werden. Für ein optimales Ergebnis bietet es sich an, immer wieder einmal zu Imageready zu wechseln und die Animation zu testen.
Mein Ergebnis waren folgende 4 Einzelbilder:

{img-src: //img501.imageshack.us/img501/8210/55418940nv0.png}

{img-src: //img501.imageshack.us/img501/8026/19874945zr0.png}
Bild

Je genauer man hier vorgeht, desto besser sieht das Ergebnis aus.

Schritt 4:
Wir wechseln zu Imageready (unten an der Werkzeugleiste ist der entsprechende Button zu finden) und aktivieren Bild 1. Bild duplizieren und das Bild 2 aktivieren (Bild 1 deaktivieren). Das halt für jedes Bild einmal.
Spielen wir die Animation jetzt ab, erkennt man aber einen Ruckler, also duplizieren wir das 3. Bild und ziehen es per Drag and Drop an letzte Stelle. Jetzt noch einmal das Bild Nummer 2 duplizieren und hinter das duplizierte dritte Bild an die letzte Stelle ziehen.
Jetzt sollte man 6 einzelne Bilder in der ANimationsleiste haben. SOnst hat irgendwas falsch gemacht^^
Animationsleiste:
Bild

Spielt man das jetzt ab hat man einen reibungslosen Ablauf.

"Optimiert speichern unter" und das Werk ist vollbracht!

Anzeige

Nützliche Suchen

[Photoshop] Animation: Equalizer

Videos zum Themenbereich