kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Icons


Social Media Icons als Webfont und Vector

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)

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

Apple Touch Icon (auch ohne Glanz) erstellen

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

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

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

Apple Touch Icon für das Retina Display

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