kulturbanause blog

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.

Diesen 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. [...]

Diesen 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.

Diesen 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.

Diesen 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.

Diesen Beitrag zu Ende lesen

Wassertropfen können im Webdesign, wie auch in der Werbung, ein mächtiges Gestaltungselement sein. Verwenden wir Wassertropfen z.B. in Kombination mit der Abbildung von Lebensmitteln oder Getränken, so wirkte das Produkt frisch, kühl und vital. Was wäre die berühmte Coca-Cola-Flasche ohne Wassertropfen? In diesem Screencast möchte ich euch zeigen wie einfach es ist in Photoshop Wassertropfen zu zeichnen.

Diesen Beitrag zu Ende lesen

Auf Photoshop-Profis wurde mit Folge 52 erneut ein Video von mir veröffentlicht. In dieser Folge zeige ich wie ihr mit Hilfe des 3D-Dialogs "Repoussé" von Photoshop CS5 Extended, sehr schnell einen ansehnlichen 3D-Text erstellen könnt. In etwa neun Minuten Spielzeit gehe ich auf die Basics des Dialogs ein und erkläre wie Ihr aus einer Textebene ein 3D-Objekt erstellt, texturiert und beleuchtet.

Die Photoshop-Profis beschrieben den Inhalt des Videos so:

Photoshop Extended bietet Ihnen auch die Möglichkeit, 3D-​Texte zu erzeugen. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Jonas Hellwig, wie Sie ein 3D-​Objekt erstellen, ausleuchten, texturieren und rendern. Als Ergebnis erhalten Sie einen Schriftzug mit modernen 3D-​Effekten, den Sie zur Gestaltung Ihrer Webseite verwenden können.

Diesen Beitrag zu Ende lesen