Guru 2.0 › 3.0
Der Blog für alle die Spass am Web und Design haben…

Wie erstelle ich ein typisches “Web 2.0 Logo” – eine schrittweise Anleitung für Photoshop.

1. Schritt
Dem Befehl “Neu” im Menü “Datei” auswählen. Die Einstellungen wie auf dem Bild gezeigt vornehmen.

2. Schritt
Das “horizontale Text-Werkzeug” auswählen. Um ein echtes Web 2.0 Feeling zu kriegen nimmt man eine Schrift wie “Arial Rounded”, “Trebuchet MS” oder “Helvetica Rounded” und als Farbe eine kräftige Grundfarbe wie #0033FF. Als Schriftgröße verwendet man 160pt und zentriert den Text.

3. Schritt (a)
Jetzt wird eine neue Ebene angelegt. In dieser Zeichen wir ein typisches Web 2.0 Symbol. Dazu wählen wird das “Formen-Werkzeug” und das Symbol “Fleck 1″ wie im Bild gezeigt. Diese zeichnen wir vor dem Schriftzug und achten darauf, dass es gut zur Größe paßt.

Nun können wird die Form mit dem “Zauberstab”-Werkzeug auswählen. Für einen guten Erfolg sollte die Toleranz auf 0, Glätten aktiviert und Benachabrt ebenfalls aktiviert sein. Nun kann man im den Befehl Menü > Auswahl verändern > Erweitern… anklicken. Im Fenster gibt man 8 Pixel an. Jetzt legen wir eine neue Ebene an und füllen die Auswahl mit dem “Füllwerkzeug” mit einer brillianten Farbe (hier #AEFF00).

3. Schritt (b)
Mit [Strg]+[D] können wir die Auswahl jetzt aufheben und auch gleich die Ebene mit der alten, blauen Form löschen. Die Ebene mit dem prächtigen grünen Fleck benennen wir als “Logo”.

4. Schritt (a)
Nun ordnen wir die beiden Elemente wie im Bild gezeigt an:

Nun kommt der “Glas-Effekt”. Zuerst wird die Text-Ebene ausgewählt. Nun kann man mit Auswahl > Auswahl laden… eine Markierung des Textes erstellen. Nun legen wir oberhalb der Textebene eine neue Ebene an und nennen sie “Textverlauf”.

4. Schritt (b)
Nun kommt das “Verlaufswerkzeug” zum Einsatz. Wir wählen – wie im Bild gezeigt – den Verlauf “Vordergrund zu Transparent”. Sollte die Vordergrundfarbe nicht “Weiß” sein, diese zuerst einstellen.

Nun aktivieren wir den liniearen Verlauf (wie im vorherigen Bild gezeigt) und füllen die neue Textebene wie im nachfolgenden Bild dargestellt. Wenn alles paßt, wird die Markierung wieder mit [Strg]+[D] aufgehoben.

5. Schritt (a)
Nun legen wir wieder eine neue Ebene an und geben ihr den Namen “obererTextVerlauf”. Mit dem “Auswahl-Ellipse-Werkzeug” erstellen wir eine Auswahl wie im Bild gezeigt.

5. Schritt (b)
Nun kommt wieder das Verlaufswerkzeug zum Einsatz. Diesmal wird der Verlauf jedoch von oben angesetzt, bis wie im folgenden Bild gezeigt aussieht. Danach kann die Auswahl wieder aufgehoben werden.

6. Schritt
Nun wird die Textebene mit unserem Schriftzug aktiviert. Hier wird die Auswahl, mit Auswahl > Auswahl laden…, aufgerufen. Mit der Tastenkombination [Gross]+[Strg]+[I] wird diese auswahl invertiert. In der Folge wird die Ebene “Textverlauf” aktiviert und die Auswahl mit der [Rückschritt]-Taste gelöscht. Nun aktivieren wir die Ebene “obererTextVerlauf” und löschen die Auswahl ebenfalls. Nun könne wir die Auswahl wieder mit [Strg]+[D] aufheben.

7. Schritt
Die Schritte 4 bis 6 für das Logo wiederholen. Nun sollte alles wie unten gezeigt aussehen.

Und die Ebenenpalette sieht jetztso aus:

8. Schritt
Nun wählen wir die Textebene aus und aktivieren mit einem Rechtsklick auf die Ebenenpalette die “Fülloptionen”. dor aktivieren wir den Schlagschatten und stellen ihn wie im Bild gezeigt ein:
In den Fülloptionen aktivieren wir auch die “Kontur” und stellen sie wie im Bild gezeigt ein (die Farbe ist wieder die Basistextfarbe #0033FF:

9. Schritt (a)
Mit einem Rechtsklick auf die Textebene können wir jetzt den Ebenenstil kopieren und auf die Ebene “Logo” einfügen.

9. Schritt (b)
Mit einem Doppelklick auf die Fülloption “Kontur”, der Ebene “Logo” können wir die Konturfarbe von blau auf das Grün des Logos #AEFF00 ändern. Nun sollte das Logo wie unten gezeigt aussehen.

10. Schritt
Nun fügen wir alle Ebenen (außer der “Hintergrund”) zusammen. Dazu wählen wir die oberste Ebene aus und klicken auf danach auf die Textebene, während wir die [Gross]-Taste halten. Jetzt sind alle Ebenen blau hinterlegt und wir können sie mit [Strg]+[E] zu einer Ebene zusammenfügen.

11. Schritt
Mit einem Rechtsklick auf die Ebenen und “Ebene duplizieren…” erzeugen wir eine Kopie der Ebene. Mit Auswahl > Auswahl laden… erstellen wir wieder eine Auswahl in der Originalebene. Nun legen wir eine neue Ebene an und benennen sie mit “Schatten”. Diese Ebene füllen wir mit dem “Füllwerkzeug” mit der Farbe “Schwarz”. Nun aktivieren wir das Verschieben-Werkzeug. Mit [Strg]+[T] aktivieren wir das Transformieren-Werkzeug. Mit dem oberen, mittleren Anfasser schieben wir die Schatten-Ebene so zusammen, dass es wie im folgenden Bild aussieht.

Mit einem erneuten klick auf das Verschieben-Werkzeug wird die Transformation übernommen.

12. Schritt
Nun reduzieren wir die Deckkraft der Schatten-Ebene auf 15%.

13. Schritt
Nun wird die Kopie der Originalebene ausgewählt. Mit [Strg]+[T] aktivieren wir wieder das Transformieren-Werkzeug. Mit einem Rechtsklick auf das Objekt können wir den Befehl “Vertikal spiegeln” auswählen. Nun benötigen wir wieder dasVerschieben-Werkzeug. Mit diesem verschieben wir die eben transformierte ebene unter das Originallogo, wie im Bild gezeigt.

14. Schritt
Wie wir sehen paßt der Schatten noch nicht. Im Ebenenfenster verschieben wir den “Schatten” direkt über den Hintergrund. Nun aktivieren wir den gespiegelten Layer und setzen die Deckkraft auf 25%. Nun müßte das Ebenenfenster wie folgt aussehen.

15. Schritt
So jetzt noch einen Verlauf für die Spiegelebene einfügen und den typischen Beta-Text hinzufügen und fertig ist das Web 2.0 Logo.