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.

Generierter CSS-Content mit :before und :after

CSS-Content mit :before und :after

Mit Hilfe der CSS-Selektoren :before und :after habt ihr die Möglichkeit vor- bzw. nach einem HTML-Element ein sog. Pseudoelement zu erzeugen. Das Pseudoelement kann wie ein ganz normales HTML-Element mit CSS gestaltet werden, taucht allerdings im HTML-Markup nicht auf. Aus diesem Grund heißt es auch Pseudoelement.
Damit das Pseudoelement entstehen kann, benötigt es zumindest formal einen Inhalt, der über die CSS-Eigenschaft content definiert wird. Die Eigenschaft muss vorhanden sein, sie kann jedoch leer bleiben. Das macht u.a. dann Sinn, wenn das Pseudoelement für Zierelemente eingesetzt wird.

Beitrag zu Ende lesen

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