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.

Windows 8 Tile Icon zur Website hinzufügen

windows-8-tile-icon

Das Interface von Windows 8 zeichnet sich u.a. durch bunte Kacheln mit einfarbigen weißen Icons im Startmenü aus. Neben Programmicons können hier auch Websites „angeheftet“ werden um vom Startmenü aus einen Schnellzugriff auf die Seite zu ermöglichen. Mit einer kleinen Anpassung im head der Website können Titel, Farbe und Icon dieses „Tile Icons“ festgelegt werden.

Beitrag zu Ende lesen

Tag-Icons mit CSS3 gestalten – Retina- & HiDPI-Ready

css3-tag-icons

Im Zuge der „Retina-Optimierung“ von Websites sollte man sich Gedanken machen, welche technische Lösung sich für welche Art Icon am ehesten anbietet. Neben Webfont-Icons, Vektoren (SVG) und hochauflösenden Pixelgrafiken kommen auch CSS-generierte Grafiken in Frage. Für das in diesem Artikel beschriebene Icon halte ich eine Umsetzung mittels CSS3 für durchaus sinnvoll.

Beitrag zu Ende lesen

Screencast: Moderne Web-Icons entwerfen

goldenes-icon

In Folge 69 der Photoshop-Profis wurde ein Screencast von mir zum Thema Icon-Design veröffentlicht. Das etwa 11 Minuten lange Video behandelt die Grundlagen der Icon-Erstellung und zeigt wie man mit Photoshop-Basics wie den Ebenenstilen und Formebenen sehr schnell zu einem ansehnlichen Ergebnis kommt. Auch die Arbeit mit Lichtern und Verläufen wird ausführlich beschrieben.

Die Photoshop-Profis beschreiben den Inhalt so:

Individuelle Icons verleihen Ihrer Webseite einen unverwechselbaren Look. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Webdesigner Jonas Hellwig, wie Sie mit wenigen Mitteln ein Web-Icon erstellen. Dabei erfahren Sie, wie Sie das Icon mit Gold überziehen und ein Symbol einstanzen. [...]

Beitrag zu Ende lesen

Kochtopf-Icon als gratis Photoshop/PNG-Download

icon-kochtopf

Für ein vor kurzem abgeschlossenes Projekt habe ich einen Kochtopf illustriert. In Form eines Icons sollte der Kochtopf die Termine einer Kochschule anteasern. Letztendlich wurde das Icon durch ein Foto ersetzt und kam somit nicht zum Einsatz. Aus diesem Grund stelle ich die Photoshop-Datei sowie das Icon im PNG-Format hier als Download zur Verfügung. Vielleicht könnt ihr es ja in einem zukünftigen Projekt einsetzen.

Beitrag zu Ende lesen

Social Media Icons als Webfont und Vector

webfont-social-icons

Ich bin kein großer Fan von Artikeln, in denen Unmengen von Social Media Icons zum Download angeboten werden. Selbst wenn ein Icon-Set noch so schön gestaltet ist, so passt es in meinen Augen selten hundertprozentig ins Layout und muss häufig noch angepasst werden. Viel brauchbarer ist eine solide Ausgangsbasis, die sich schnell und einfach individualisieren lässt.
Mit JustVector Social Icons hat Alex Peattie nun genau diese Basis geschaffen und stellt 150 monochrome Social Icons als Vector und als Webfont (!) zur Verfügung.

Beitrag zu Ende lesen

Martini-Kelch mit Olive (Cocktail-Glas)

martini-icon-illustration

Vor einigen Jahren habe ich ein Martini-Glas gezeichnet, dass ich euch nun als Download zur Verfügung stellen möchte. Die Illustration zeigt einen typische Martini-Kelch, stilecht garniert mit einer Olive. Also wenn mich nicht alles täuscht, ein klassischer Vodka-Martini. Die Gesamthöhe der Grafik beträgt ca. 280 Pixel (ohne Spiegelung). Damit ihr das Glas auch überall einsetzen könnt ist der Hintergrund natürlich transparent.

Beitrag zu Ende lesen

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