Screencast: Futuristische Navigation mit Oberflächenglanz

navigationsleiste-glanz

Die Photoshop-Profis haben in Folge 48 erneut einen Screencast zum Thema Webdesign von mir veröffentlicht.
In diesem 14-minütigen Video-Tutorial beschreibe ich wie Ihr mit Grundformen und Verläufen eine futuristische anmutende "Web 2.0"-Navigationsleiste entwerfen könnt.
Die Online-Redakteure von Photoshop-Profis beschreiben den Inhalt des Videos wie folgt:

Sie können mit Photoshop auch eigene Navigationselemente für Webseiten entwerfen. Jonas Hellwig erklärt Ihnen in dieser Folge der »Photoshop-Profis«, wie Sie eine Navigationsleiste mit Glanz- und Glüh-Effekten sowie abgerundeten Ecken komplett in Photoshop gestalten. Dabei zeigt er Ihnen gleich zwei verschiedene Wege, um einen Oberflächenglanz in Photoshop zu simulieren.

Video anschauen

Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren

media-queries-kulturbanause

Das Web ist längst mobil geworden und moderne Websites müssen nicht nur auf dem Monitor, sondern auch auf unzähligen Ausgabemedien eine Top-Figur machen. Zwar rufen die meisten User Websites noch über einen Computer auf, aber die Zugriffe über mobile Endgeräte wie iPad, Smartphones und portable Spielekonsolen steigt stetig an. Wie soll man da eine Website für all diese Geräte optimieren können? Mit CSS Media Queries ist das gar nicht so schwierig.
In diesem Beitrag möchte ich Euch die Vor- und Nachteile dieser Technik erklären und an einem praktischen Beispiel zeigen wie schnell Ihr auch Eure Website für Smartphones und Tablet PCs optimieren könnt.

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: Wasserspiegelungen mit Verschiebungsmatrix

wasserspiegelung-photoshop

Spiegelungen sind ein wichtiges Gestaltungsmittel. Insbesondere im Webdesign wird der sogenannte Wet-Floor-Effekt gerne verwendet um einen hochwertigen und sauberen Eindruck zu erzeugen. Allerdings sollte der Effekt dezent eingesetzt werden denn der Glossy-Trend ist vorbei und stark glänzende Objekte und Flächen wirken schnell billig statt hochwertig. Und nicht nur im Webdesign werden Spiegelungen gerne verwendet. Insbesondere in Illustrationen oder naturalistischeren Abbildungen sind sie unverzichtbar um ein realistisches Gesamtbild zu simulieren.
In diesem Screencast möchte ich Euch zeigen wie einfach es ist mit Hilfe einer Verschiebungsmatrix eine wellige Wasseroberfläche zu simulieren. Die generellen Basics im Bezug auf Spiegelungen habe ich bereits in einem früheren Beitrag erklärt.

Beitrag zu Ende lesen

Photoshop-Profis-Screencast: Eigene Bedienfelder erstellen

photoshop-profis-folge40

Auf Photoshop-Profis.de - der Screencast-Website von Galileo Press - wurde heute ein Video von mir veröffentlicht. In ca. zehn Minuten Spielzeit zeige ich Euch wie einfach Ihr eigene Bedienfelder für Photoshop CS5 herstellen könnt. Die Vorgehensweise demonstriere ich an einem Beispiel aus dem Webdesign: Ich fasse alle für mich relevanten Arbeitsschritte beim Button-Design in einem Bedienfeld zusammen und teste es anschließend in Photoshop.
Darüber hinaus gehe ich am Beispiel von Twitter auch auf die Integration von Websites in Photoshop ein.

Beitrag zu Ende lesen

Facebook: Fanpage mit iFrame-Tabs erweitern

facebook-developer

Mit der Einführung der neuen Fanpages hat Facebook auch die schon lange angekündigten iFrame Tabs veröffentlicht. Mit Einführung dieser Tabs werden die bisher gebräuchlichen FBML-Tabs überflüssig und in Kürze nichtmehr unterstützt. Insbesondere wenn Ihr neue Seiten hinzufügen wollt müsst Ihr zukünftig iFrame-Tabs verwenden.
Ich möchte Euch kurz erklären was Ihr benötigt um die iFrame-Tabs nutzen zu können, wie Ihr einen neuen Tab erstellt, und wo die Vor- und Nachteile der neuen Tabs liegen.

Beitrag zu Ende lesen