Homepage | Webdesign

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

Auf der Suche nach dem richtigen Logo für diese Seite bin ich noch nicht so richtig fündig geworden, bzw. der richtige Einfall kam noch nicht, aber im Gegensatz zu offiziellen Projekten kann ich hier einfach mal ein schnell im Illustrator erstelltes “Logo” einbinden. Ob es bei den Farben bleiben wird, weiss ich noch nicht, aber ein wenig Farbe ist schon mal nett, oder?

So sah es bisher aus – ohne Logo

In diesem Fall habe ich ein blaues Rechteck aufgezogen und mit einer Schriftweite von 50% den Text in unterschiedlicher Farbe platziert. Logos haben häufig klare, einfache Formen und glänzen weniger mit grafischen Tricks, sondern sollen in erster Linie nur eines: Für Produkte oder Firmen dienen sie als unverwechselbares Wiedererkennungsmerkmal und Identifikationswerkzeug.

Da es sich hier (noch) um eine Seite handelt, die keine grossen Anforderungen hat, kann das Logo – wenn man es denn so nennen möchte – erstmal so lassen.

Wenn man up to date im Web 2.0 sein will, müsste man leicht plastisch wirkende Schriftzüge mit nach unten spiegelnder Darstellung wählen. Ob der auch als “Aqua-Look” bezeichnete Trend immer das Beste sein muss, sei einmal dahin gestellt. Ich bin halt ein Freund von klaren Kontrasten und weniger grafische Spielereien, obwohl ich da im Laufe der Zeit einiges zeigen werde.

Verbesserungsvorschläge zum Logo?