Web: Responsive Image

Immer mehr Websites sind «responsive» programmiert, damit sie auf allen Endgeräten optimal gelesen werden können. Es gibt auch witzige Ansätze dafür. Zum Beispiel wenn sich Bilder auch inhaltlich der aktuellen Breite anpassen und nicht nur skaliert werden.

Zuerst wollte ich das ganze mal fotografisch durchspielen. Die Bratwurst war schon fast im Einkaufskorb, um diese später Stück für Stück aufzuessen und jeweils ein Foto für die verschiedenen Browser­breiten auf­zu­nehmen. Dann habe ich mich aber um­entschieden, um gleich zwei Fliegen mit einer Klappe zu schlagen.


Bilderstellung

In Photoshop gibt es ja schon länger die Möglichkeit 3D-Grafiken zu erstellen. Die Werkzeuge dafür sind nicht gerade selbst­erklärend. Koordinaten in der x- und y-Achse sind ja tägliches Geschäft, aber die verflixte z-Achse leider nicht. Nun, etwas Übung kann deshalb sicher nicht schaden. Also habe ich mir gleich ein paar Buchstaben zusammen­gebastelt, die ich fleissig im 3D-Raum umher­geschoben habe, bis 9 Bilder entstanden sind.

Ja, nicht gerade ein witziges Beispiel für einen responsiven Bildwechsel. Dafür ist jetzt das 3D-Panel von Photoshop für die nächsten Tage wieder im Blut.

Mein Test

www.responsive.sabu.ch

Eines der 9 Testbilder, welches mit Photoshop-3D hergestellt wurde.
Eines der 9 Testbilder, welches mit Photoshop-3D hergestellt wurde.
Responsive, Bildwechsel, MediaQueries