kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Bilder & Grafiken


CSS-Code aus Photoshop exportieren. Verschiedene Lösungen im Vergleich.

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 Version 13.1 exportiert Photoshop auch CSS-Code. Ich möchte euch in diesem Beitrag verschiedene Lösungen vorstellen, mit denen sich Photoshop-Grafiken in CSS3-Code umwandeln lassen.

Beitrag zu Ende lesen

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

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

CSS-Verläufe aus Bildern generieren: CSS Gradient Finder

Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen lassen.
Per Drag & Drop könnt ihr eine Grafik mit dem entsprechenden Verlauf in das Tool laden, anschließend erhaltet ihr als Ausgabe den entsprechenden CSS-Quellcode inkl. der verschiedenen Vendor-Prefixes für die unterschiedlichen Browser.

Beitrag zu Ende lesen

Spiegelungen im Webdesign – Die Grundlagen als Screencast

Die Photoshop-Profis haben ein Video zum Thema "Spiegelungen" von mir veröffentlicht. In Folge 93 des Podcasts beschreibe ich die Grundlagen der Spiegelung von zweidimensionalen und dreidimensionalen Objekten, und gehe auf häufige Fehlerquellen ein. Am Beispiel des Wet-Floor-Effektes werden darüber hinaus die typischen handwerklichen Techniken beschrieben.

Das Thema Spiegeleffekte habe ich in der Vergangenheit bereits in meinem Artikel "10 Tipps zu Spiegelungen im Webdesign" behandelt. Einen fortgeschrittenen Screencast zum Thema Wasserspiegelung findet ihr hier.

Beitrag zu Ende lesen