Die Webdesign Homepage

Tag / Schlagwort: homepage logo

Das Logo mit der Spiegel-Optik

von am Jun.05, 2008, unter Homepage erstellen

Auf sehr vielen Websites findet man die Saubermann – Optik mit dem spiegelnden Effekt. Im Gegensatz zum Grunge Design ist der Look mit dem Lichteffekt schon kalter Kaffee, sieht aber immer noch nett aus, denke ich. Solange es nicht übertrieben wird, ist es doch ein netter Effekt.

So habe ich eben das „alte“ Logo mit diesem Effekt versehen. Wie das geht, ist recht einfach und benötigt wenige Arbeitsschritte im Adobe Photoshop CS3.

  1. In meinem Fall habe ich das Logo im Illustrator erzeugt. Da der Effekt besser und einfacher im Photoshop funktioniert, habe ich die Grafik als 72dpi – Bild in das Photoshop-Format *.psd exportiert.
  2. Im Photoshop geöffnet, sollte man darauf achten, das sich der Schriftzug und der Hintergrund auf eigenen Ebenen befinden. Ferner muss der Schriftzug frei gestellt ist.
  3. Sollte der Text noch als Textebene vorliegen, so muss dieser gerastet werden.
  4. Nun dupliziert man die Ebene mit dem Schriftzug und spiegelt über das Menü Bearbeiten -> Transformieren -> „vertikal spiegeln“ diese Ebene.
  5. Nun schiebt man diese Ebene soweit nach unten, das sie sich unmittelbar unter der ersten Ebene befindet.
  6. Auf der Ebene mit dem gespiegelten Text erzeugt man eine Ebenenmaske.
  7. Über das Verlaufswerkzeug erzeugt man im Maskierungsmodus einen Verlauf mit der Farb- Standardeinstellung schwarz / weiß. Der Verlauf sollte von oben nach unten gehen, wobei er im Bereich der „echten“ Schrift anfangen und im Bereich der „Spiegelschrift“ enden sollte.
  8. Nach dem Umschalten zurück in den Standardmodus kann man eine Auswahl sehen, diese löscht man und schon ist der Spiegeleffekt schon recht realistisch.
  9. Um es etwas besser wirken zu lassen, kann man die Deckkraft der „Spiegel-Ebene“ auf einen Wert zwischen 30% und 60% setzen. Das ist nun – wie so oft bei grafischen Arbeiten Geschmackssache.
  10. Nun kann man noch mit der Füllmethode spielen, bei meinem Logo brachte dies aber nichts, da die Schriftart aus zwei unterschiedlichen Farben besteht.

Natürlich muss das Logo dann noch als *.gif (oder *.jpg) datei gesichert werden und auf den Server hoch gespielt werden. Im WordPress muss es dann in der header.php eingebunden werden und ggf. die CSS Datei angepasst werden.

So sieht dann der spiegelnde Effekt aus:

So kann es aussehen, wenn der Spiegeleffekt verwendet wurde

So kann es aussehen, wenn der Spiegeleffekt verwendet wurde

Kommentar schreiben :, , , weiter lesen...

Suchen Sie etwas?

Tragen Sie den Begriff ein, den Sie suchen: