kulturbanause Blog

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

Bilder & Grafiken


Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Beitrag zu Ende lesen

Grafiken mit Data URIs (Base 64) erzeugen

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

Beitrag zu Ende lesen

WordPress: Medien verwalten

Bilder, Dateien und andere Medieninhalte verwaltet ihr in WordPress über die Mediathek, die ihr unter dem Menüpunkt »Medien« erreicht. Ihr könnt Bilder entweder zuerst in die Mediathek hochladen und dann in einen Artikel integrieren, oder ihr fügt das Bild über den Artikel-Editor ein.

Beitrag zu Ende lesen

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