wie sie bilder in drei dimensionen verzerren - eine einfache schritt-für-schritt-anleitung

Nico und Christoph - teamwork at it's best.Nico und Christoph - teamwork at it's best.

“Zeit für etwas neues”, dachten sich unsere Entwickler*innen und so entstand die Idee, unserer Website einen neuen Anstrich zu verleihen. Natürlich möchten wir dabei auch unsere verschiedenen Web-Projekte optisch ganz besonders darstellen. Dafür sollte mit folgender Grafik ein kleiner Auszug der jeweiligen Website vorgestellt werden:

Vorschau Ipad Grafik

Um dieses Design mit CSS umzusetzen, wollten wir die CSS Property transform benutzen. Mit Hilfe von CSS können so leicht Elemente im drei-dimensionalen Raum verschoben und ordentlich positioniert werden. Zunächst klappt das auch sehr gut, allerdings muss der/die aufmerksame NutzerIn doch recht schnell feststellen, das mittels dieser Technik das Bild ziemlich unscharf und sogar leicht verschwommen dargestellt werden kann.

Grafische Fehler bei CSS transform

Nach einer kurzen Recherche stellten wir fest, dass wir bei weitem nicht alleine mit dem Problem der einwandfreien Browser-Darstellung von 3D-Transformationen sind. Besonders bei webkit-Browsern kommt es immer wieder zu einer verzogenen und unscharfen Darstellung.

Für uns war die Rätsels Lösung schließlich die kostenlose Software GIMP, die Sie hier herunterladen können.

Im folgenden zeigen wir Ihnen, wie Sie mittels einer Schritt-für-Schritt-Anleitung ganz einfach Ihre Grafiken in einer 3D-Optik garantiert unverpixelt und scharf darstellen können.

Schritt 1: Zunächst installieren und starten Sie das Programm. Ihr Programm-Hintergrund sollte so aussehen.

Gimp Startbildschirm

Ihr Programm-Hintergrund sollte so aussehen.

Schritt 2: Ziehen Sie nun das gewünschte Hintergrundbild in das Programm oder öffnen Sie das Bild mittels dem Pfad Datei → Öffnen.

Vorschau Tablet Rahmen in Gimp

Schritt 3: In der Mitte sollte Ihnen nun die Grafik angezeigt werden; in unserem Fall ist das der Rahmen des Tablets.

Schritt 4: Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie Werkzeuge → Transformationen → Perspektiven aus.

Screenshot Gimp Menüführung

Schritt 5: Ziehen Sie nun Ihr Bild mittels Klick auf die Bildecken in die von Ihnen gewünschte Position und Größe.

Screenshot Gimp - verzerrtes Bild

Schritt 6: Fertig! Sie können Ihr Bild nun unter Datei → Exportieren nach… speichern.

Screenshot Gimp - Exportieren nach

Schritt 7: Nachdem Sie zunächst einen Speicherort ausgewählt haben, klicken Sie auf Exportieren. Im Anschluss erscheint folgendes Fenster: Achtung: Es ist nicht nötig, dass Sie die Einstellungen verändert.

Gimp Export Dialog - Einstellungen müssen nicht verändert werden

Achtung: Es ist nicht nötig, dass Sie die Einstellungen verändert.

Wir wünschen Ihnen viel Freude beim Ausprobieren! Klingt zu kompliziert? Dann lassen Sie sich bei Ihrem nächsten Web-Projekt von unseren Expert*innen unterstützen und melden Sie sich via office@pcode.at

Wir freuen uns auf Sie!

Lisi und Melissa

tauchen sie ein in unsere arbeitswelt – 10 fragen an elisabeth weber und melissa spyra

Die Zwei Power-Frauen über den Einstieg bei pcode und ihr Privatleben.

Link Pfeil
Nico und Vanessa

mit mentorin durchstarten – 10 fragen an vanessa karaban und nico peham

Über Mentoring bei pcode und welche Rolle dabei die pcode Academy spielt.

Link Pfeil