Photoshop-Script für Webdesigner – Automatische Umwandlung von indizierten Bildern + Warnung bei Ebenenkompositionen

photoshop-script

In einem meiner letzten Photoshop-Seminare in Bremen haben wir zwei verschiedene Probleme im Umgang mit Photoshop diskutiert. Einerseits arbeiten Webdesigner immer im RGB-Modus und müssen daher häufig GIFs oder PNGs konvertieren um die Grafik bearbeiten zu können. Andererseits kommt es regelmäßig vor, dass Ebenenkompositionen versehentlich zerstört werden. Der große (und in meinen Augen völlig unterschätzte) Vorteil von Ebenenkompositionen geht dadurch natürlich verloren.
Helge Meinhold, Team Manager Content Production bei der Bremer Web-Agentur hmmh war so nett ein Photoshop-Script zu schreiben, das diese Probleme löst.

Beitrag zu Ende lesen

InDesign-Ebenen in Photoshop-Ebenen konvertieren

indesign-photoshop-ebenen

Auch wenn viele Webdesigner jetzt laut aufschreien werden, InDesign wird für Web-Layouts häufiger eingesetzt als manch einer vielleicht glauben mag. Ich möchte jetzt nicht die Vor- und Nachteile von InDesign im Webdesign diskutieren, ich möchte all jenen, die InDesign im Umfeld Webdesign einsetzen, ein praktisches Hilfsmittel vorstellen. Das folgende Script wandelt InDesign-Dokumente in PSDs um.

Beitrag zu Ende lesen

Photoshop-Dateien verknüpfen und inkludieren

link-photoshop-files

Bei der Programmierung einer Website lagert man identische Seitenelemente, also beispielsweise den Header oder die Hauptnavigation, in separate Dateien aus. Anschließend verknüpft man die verschiedenen Dokumente untereinander. Diese Vorgehensweise hat den Vorteil, dass Änderungen immer nur an einer Stelle vorgenommen werden müssen. Das geht schneller und minimiert gleichzeitig das Risiko einen Bereich beim Update zu übersehen.
Das Plugin „Can Link It“ erweitert Photoshop um die Möglichkeit externe Dokumente zu inkludieren. Eine Funktion die Smartobjekte eigentlich schon bieten sollten. Photoshop hat in Version 14.2 diese Funktion erhalten. Einen ausführlichen Beitrag findet ihr hier.

Beitrag zu Ende lesen

Media Queries in der Admin-Bar anzeigen: WordPress Media Queries Monitor

wordpress-media-queries-plugin-admin-bar

Wenn Ihr für eine WordPress-Website ein „responsive“ Theme entwickelt, werdet ihr in der Coding-Phase wahrscheinlich ähnlich vorgehen wie ich. Zunächst entwickelt ihr die Desktop-Version der Website oder alternativ die mobile Variante – je nachdem welchem Prinzip ihr folgt. Anschließend wird die Seite für die anderen Bildschirmgrößen adaptiert. Ihr fügt nach und nach neue Media Queries hinzu und wechselt permanent zwischen dem Browser und dem Code-Editor. Den Browser zieht ihr dabei manuell groß und klein und testet so die verschiedenen Ansichten. Leider erkennt man in dieser Vorgehensweise nicht ohne weiteres welcher Media Querie gerade aktiv ist und wo Anpassungen am Code vorgenommen werden müssen. Insbesondere wenn ihr mit sehr vielen verschiedenen Breakpoints arbeitet kann das lästig sein.

Beitrag zu Ende lesen

Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

css3-photoshop-plugin-icon-logo

Viele Webdesigner bzw. Frontend-Developer arbeiten immer weniger in Grafikprogrammen wie Photoshop oder Fireworks und wechseln bereits in einer sehr frühen Phase der Website-Erstellung in den Browser. Der Browser ist heute DIE neue Entwicklungsumgebung für Code und Grafik und das Stichwort in diesem Zusammenhang ist „Design in the Browser“. Cloud-Anwendungen und die integrierten Debug-Konsolen der Browser greifen uns dabei mächtig unter die Arme.
Heute möchte ich euch ein neues Photoshop-Plugin vorstellen, dass diese Entwicklung noch weiter beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um. Ein Feature das ich mir bereits vor zwei Jahren auf der PhotoCon in München gewünscht habe ist somit endlich Realität geworden!

Beitrag zu Ende lesen

Responsive Images mit ‹figure› oder ‹picture›-Tag: jQuery Picture

jquery-picture-figure-plugin-responsive

Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide <figure>- oder das experimentelle <picture>-Element.

Beitrag zu Ende lesen

Komfortable Form-Validierung ohne Änderungen am HTML-Code: jQuery Walidate

jQuery Walidation Logo / Icon

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Beitrag zu Ende lesen