Mit Photoshop lassen sich verschiedene Arten von Animationen herstellen. Eine davon ist die sog. Frame-Animation, in der verschiedene Einzelbilder nacheinander abgespielt werden. In diesem Video-Tutorial zeige ich euch am Beispiel eines Ladebalkens, wie ihr das Grundobjekt gestaltet und anschließend mit Hilfe der Photoshop-Zeitleiste animiert. Das Ergebnis speichern wir als GIF-Animation ab.

Beitrag zu Ende lesen

In Photoshop existieren verschiedene Standards was die Schärfung eines Bildes angeht. Die Klassiker dürften wohl die Filter "unscharf maskieren" oder "selektiv scharfzeichnen" sein. Eine alternative Methode das Motiv nachträglich zu schärfen führt über den Hochpass-Filter und den Blendmodus "weiches-" bzw. "hartes Licht". Bei dieser Methode muss zwar manuell vorgegangen werden, das Ergebnis kann jedoch sehr detailliert eingestellt werden und bietet sich je nach Bild oder Workflow besser an. In diesem Photoshop-Screencast möchte ich euch zeigen wie ihr ein Bild mit dem Hochpass-Filter bearbeiten könnt.

Auch dieser Screencasts ist auf Wunsch eines Lesers dieses Blogs entstanden.

Beitrag zu Ende lesen

Die Performance gehört zu den wichtigsten Faktoren wenn es um die technische Optimierung einer Website geht. User erwarten schnelle Seiten und auch Google rankt Sites mit hoher Performance im Index weiter nach vorne. Es lohnt sich also hier zu optimieren.
Um zu prüfen welche Bereiche eurer Website verbesserungswürdig sind, könnt ihr beispielsweise Google Page Speed oder Yahoo YSlow nutzen. Beide Dienste empfehlen die Nutzung eines sog. CDN (= Content Delivery Network), also die Auslagerung von Medianinhalten auf verschiedene Server dessen Aufgabe ausschließlich die Verwaltung und Verteilung dieser Inhalte ist. Es muss aber kein echter CDN-Dienst sein. Häufig reicht eine eigene Subdomain.

Beitrag zu Ende lesen

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

Moderne Websites realisieren mittlerweile einen Großteil der grafischen Elemente vollständig über CSS3. Hierbei stehen die Möglichkeiten von CSS3 denen von Photoshop in nichts nach, und es lassen sich mitunter sehr beeindruckende Effekte erzielen.
Leider wirken über Code erstellte Grafiken häufig zu glatt und zu einheitlich, was den fotorealistischen Gesamteindruck negativ beeinflusst. Es liegt ja gerade im Trend dezente Strukturen einzusetzen und so dem Design etwas mehr "Griff" zu geben. Was also tun? Die Lösung ist eine Kombination aus Photoshop-Pattern und CSS3.
In diesem Tutorial möchte ich euch zeigen, wie ihr zunächst eine transparente Struktur in Photoshop erstellt, und diese anschließend auf CSS3-generierte Objekte anwenden könnt.

Beitrag zu Ende lesen

Mit realistischen Strukturen lässt sich die grafische Qualität einer Website spürbar verbessern, und auch im App-Design gehören simulierte Materialien wie Leder, Papier, Metall oder Holz heutzutage einfach dazu. Die Photoshop-Profis haben in Folge 58 einen Screencast von mir veröffentlicht, in dem ich erkläre, wie ihr mit Hilfe einiger Photoshop-Filter und etwas Handarbeit, eine realistische Holzstruktur herstellen könnt.

Beitrag zu Ende lesen

Im App- und Web-Design erfreut sich die Kunstfaser-Struktur aktuell allergrößter Beliebtheit. Seit Apple die dezente Struktur im iOS-Betriebssystem verwendet hat, taucht sie auch bei vielen anderen prominenten Websites und Apps auf. So nutzen beispielsweise Twitter oder Reeder die Struktur für das Interface-Design der iPad-App.
Ich möchte euch in diesem Screencast zeigen, wie ihr die Struktur in sehr kurzer Zeit und mit nur einem Filter in Photoshop umsetzt.

Beitrag zu Ende lesen