1028766

Fav-Icon mit Photoshop erstellen

14.12.2009 | 07:12 Uhr |

In Photoshop ein eigenes Webseiten-Icon für die Darstellung in der Menüleiste des Browsers gestalten.

Photoshop Tipp Icon
Vergrößern Photoshop Tipp Icon

Viele Websites, vor allem kommerzielle, zeigen beim Aufrufen in der Menüzeile des Browsers ein kleines Symbol, bei Macwelt.de ist es beispielsweise ein weißes "MW" auf rotem Hintergrund. Solche Icons werden Fav-Icon genannt, eine Abkürzung für "favourite icon". Wer seiner eigenen Website ein solches Icon basteln will, sollte nicht versuchen, sein Firmenlogo auf die Größe von 16 auf 16 Pixel zu verkleinern. Das Ergebnis ist meist verzerrt, unleserlich und unprofessionell. Schlauer ist es, ein richtiges Icon zu gestalten, am besten gleich im Format PNG, weil das Vollfarbe und Antialiasing für die runden Icon-Ecken unterstützt. Dazu legt man in Photoshop ein neues Dokument mit den Maßen 512 auf 512 Pixel an, setzt die Auflösung auf bildschirmtaugliche 72 dpi und stellt den Hintergrund auf transparent. Sobald Photoshop das neue Dokument erstellt hat, geht man auf "Photoshop > Voreinstellungen > Hilfslinien, Raster und Slices." Dort stellt man unter "Raster" eine Rasterlinie aller 32 Pixel ein mit einer Unterteilung. Über den Befehl "Ansicht > Einblenden > Raster" stellt man das Raster sichtbar dar. Jedes der eingeblendeten Kästchen entspricht nun einem Pixel des späteren Icons. Nun kann man das Icon gestalten, sollte aber ein paar Grundregeln beachten. Je enger Linien an dem Raster verlaufen, desto klarer und sauberer erscheinen die Konturen des späteren Icons. Außerdem sollte man nicht zu kleinteilig werden. Ist das Icon fertig, sollte man die Datei sicherheitshalber duplizieren und die Kopie auf die Größe von 16 x 16 Pixel verkleinern (Befehl "Bild > Bildgröße", im Pop-up-Befehl ganz unten "Bilinear" auswählen). Nun exportiert man das fertige Icon mit dem Befehl "Datei > Für Web und Geräte speichern", wobei man unter "Vorgabe:" PNG-24 einstellt und der Datei den Namen "favicon.png" gibt. Nun verlässt man Photoshop und ändert im Finder (mit Befehl-I) den Dateinamen in "favicon.ico". Als letzten Schritt lädt man das neue Icon via FTP in das Root-Verzeichnis seiner Website (meist home.html, index.html). Funktioniert der direkte Upload nicht, muss man bei seinem Service-Provider nachfragen, ob serverseitig Sonderregeln zu beachten sind.

0 Kommentare zu diesem Artikel
1028766