Ein wichtiger Bestandteil einer responsive Website ist das flüssige Gestaltungsraster auf Basis von Prozent- oder em-Werten. Doch wie wandelt man ein auf Pixelwerten basierendes, evtl. bereits programmiertes Layout in ein flüssiges Raster um? Anhand eines leicht verständlichen Beispiel-Projekts möchte ich euch die grundlegende Vorgehensweise erklären.

Beitrag zu Ende lesen

Auch wenn der moderne Workflow nicht mehr so linear verläuft wie noch vor ein paar Jahren (Design → Coding), wird Photoshop für Webdesigner immer interessanter. Zwar werden mittlerweile viele Grafiken über CSS3 realisiert, doch gestalten lässt es sich in Photoshop einfach besser. Und seit dem neuesten Update exportiert Photoshop auch CSS-Code. Ich habe die neue Funktion den zwei bekannten Plugins CSS3PS und CSS Hat gegenübergestellt.

Beitrag zu Ende lesen

Ribbons sind im Web ein sehr beliebtes Gestaltungselement und die Umsetzung mit CSS hat einige Vorteile. Einerseits eignet sich die CSS-Grafik für den Einsatz auf hochauflösenden Displays (HiDPI, Retina), andererseits kann dem Ribbon eine flexible Breite in Prozent zugewiesen werden. Das Zielelement kann somit im Responsive Webdesign verwendet werden und passt sich flexibel der Displaybreite an.

Beitrag zu Ende lesen

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

In Photoshop lässt sich ein Text unkompliziert mit Hilfe einer Verlaufsüberlagerung optisch aufwerten. Doch wie sieht es in CSS aus? Verläufe lassen sich grundsätzlich in CSS3 herstellen, nur auf Texten funktioniert es leider nicht so einfach. Hier kann kein Verlauf als Farbe angegeben werden, es sind daher nur einfarbige Texte möglich. Mit folgendem Trick könnt ihr zumindest in Webkit-Browsern (Chrome, Safari, Safari mobile, Android Browser) einen Verlauf als Textfarbe festlegen. In inkompatiblen Browsern wird der Text einfarbig dargestellt.

Beitrag zu Ende lesen

Zugegeben – wenn man Photoshop nicht gerade zu Trainingszwecken einsetzt, muss man die Voreinstellungen wahrscheinlich eher selten zurücksetzen. Doch wenn es einmal soweit ist, beispielsweise weil das Programm unerwartet reagiert, ist es gut zu wissen wie es geht. Darüber hinaus könnt ihr mit der hier vorgestellten Methode die Voreinstellungen auch zwischen verschiedenen Rechnern austauschen. Die schnelle Variante funktioniert mit einem Tastaturkürzel.

Beitrag zu Ende lesen

Aufgrund vieler Nachfragen habe ich ein Video zum Thema Absatz- und Zeichenformate von PS CS6 erstellt. In diesem Screencast zeige ich euch wie ihr die Formate einsetzen könnt, und wie ihr häufige Probleme im Umgang mit diesen Werkzeugen vermeidet. Da insbesondere die Export-Funktion häufig angefragt wurde, gehe in diesem Zusammenhang auch auf den Export/Import von Absatzformaten ein. Ich hoffe das Video hilft euch weiter, dieses wirklich hilfreiche Werkzeug endlich auch produktiv zu nutzen

Beitrag zu Ende lesen