Icons

Icons dienen dazu eine Funktion visuell zu verdeutlichen. Neben klassischen pixelbasierten Icons, setzen sich mit SVG-Grafiken und Webfont-Icons auch im Web zunehmend Symbole im Vektorformat durch. Browser und mobile Endgeräte setzen Icons in Form von Favicons und Webclip-Icons ein.

Chrome 11: neues Logo und angepasstes CSS3-Rendering

google-chrome-11-logo

Google Chrome 11 ist erschienen. Neben einigen gefixten Bugs wurde auch die Hardware-Beschleunigung aktiviert. Somit kann der Browser u.a. direkt auf die Grafikkarte zugreifen, was die Performance moderner, komplexer Web-Anwendungen spürbar verbessert. Neben den technischen Änderungen wurde bei Chrome 11 auch das bereits angekündigte, neue Logo eingeführt. Das neue Programm-Icon ist eine reduzierte Version des bisherigen Chrome-Logos, was mir persönlich sehr gut gefällt.

Beitrag zu Ende lesen

Apple Touch Icon (auch ohne Glanz) erstellen

apple-touch-icon-precomposed

Das Apple Touch Icon erscheint immer dann wenn Ihr innerhalb von iOS (also auf dem iPhone, iPod oder iPad) eine Website auf dem Home-Screen abspeichert. In einem früheren Beitrag habe ich bereits erklärt wie Ihr das Apple Touch Icon erstellt und welche Voraussetzungen das Icon erfüllen muss damit es auch auf dem Retina-Display des iPhone 4 hübsch aussieht. Nun möchte ich erneut ein Update nachschieben und erklären wie Ihr den automatisch von iOS hinzugefügten Glanz auf dem Icon verhindern könnt.

Beitrag zu Ende lesen

Friseur-Icons: Schere, Haarspray, Fön, Creme und Kamm

haarspray-icon

Für verschiedene Online-Projekte habe ich Icons und illustrative Elemente rund um das Thema Haare, Wellness, Beauty etc. gezeichnet.
Diese Icons möchte ich Euch nun zum gratis Download zur Verfügung stellen - vielleicht helfen sie euch bei dem ein oder anderen Layout ja weiter. Ich habe alle Icons als PNG und als Photoshop-Datei bereitgestellt. So könnt Ihr selbst noch ein paar Details anpassen, sollte das Icon eurer Vorstellung nicht 100%ig entsprechen.

Beitrag zu Ende lesen

Screencast: Stift-Icon entwerfen mit Photoshop

photoshop-stift-icon

Auf dem hauseigenen Video-Blog "Photoshop-Profis" hat der Galileo-Verlag einen Screencast von mir veröffentlicht. In diesem 13 Minuten langen Video schaut Ihr mir bei der Erstellung eines Buntstift-Icons mit Photoshop CS5 über die Schulter. Ich arbeite in diesem Beispiel mit diversen Verlaufsüberlagerungen und einem Smart-Object.
Galileo Press schreibt folgendes über den Inhalt dieses Screencasts:

Anhand eines Buntstift-Icons zeigt Ihnen Jonas Hellwig in dieser Folge der »Photoshop-Profis«, wie Sie mit Photoshop individuelle Icons und Symbole gestalten können. Im ersten Schritt zeichnen Sie mit Hilfslinien und dem Pfad-Werkzeug die Form und füllen sie anschließend mit Farbe. Zum Schluss setzen Sie Glanzlichter und Schatten ein, um die Plastizität des Objekts zu unterstreichen. Für eine möglichst realistische Ausleuchtung sorgen außerdem gezielte Verlaufsüberlagerungen.

Beitrag zu Ende lesen

Photoshop-Screencast: CD/Blu-Ray-Disc Icon mit Ebenenstilen

cd-icon

In diesem Photoshop CS5-Screencast möchte ich Euch zeigen wie einfach es ist mit simplen Grundformen und ein paar Ebenenstilen ein realistisches CD/Blu-Ray Disc Icon zu erstellen. Der Schwerpunkt liegt in der Erstellung individueller Farbverläufe und Ebenenstile. Das Tutorial ist auch als Text-Tutorial verfügbar.

Beitrag zu Ende lesen

Photoshop-Tutorial: CD/Blu-Ray-Disc Icon mit Ebenenstilen

cd-icon

In diesem Photoshop CS5-Tutorial möchte ich Euch zeigen wie einfach es ist mit simplen Grundformen und ein paar Ebenenstilen ein realistisches CD/Blu-Ray Disc Icon zu erstellen. Der Schwerpunkt liegt in der Erstellung individueller Farbverläufe und Ebenenstile. Das Tutorial ist auch als Screencast verfügbar.

Beitrag zu Ende lesen

Apple Touch Icon für das Retina Display

apple-touch-icon

Neben dem Favicon gehört das WebClip-Icon (auch Apple Touch Icon genannt) mittlerweile zum Must-Have einer guten Website. In einem älteren Artikel habe ich erklärt was genau man machen muss und worum es sich hier überhaupt handelt.

Nun schiebe ich ein wichtiges Update nach: Seit dem iPhone 4 mit seinem brillianten Retina-Display muss das Apple Touch Icon nämlich in höherer Auflösung vorliegen, sonst sieht es so aus wie auf folgendem Screenshot.

Beitrag zu Ende lesen