DAVID-WOEGERBAUER - OKTOBER 2021 - 6 MIN.

Wie Sie Bilder in drei Dimensionen verzerren - eine einfache Schritt-für-Schritt-Anleitung

“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: ...

design

onlineshop

business

tech

Nico und Christoph

“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:

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/iPad_pcode_k4nrfu.png", aspectRatio: "16/9", alt: "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.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-3d-iphone_r95k6d.png", aspectRatio: "16/9", alt: "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.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/image_verzerren_j0jofe.png", aspectRatio: "16/9", alt: "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.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/image_1_edkmtt.png", aspectRatio: "16/9", alt: "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.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/image_2_l7mh3z.png", aspectRatio: "16/9", alt: "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.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/image_3_f0jpfd.png", aspectRatio: "16/9", alt: "Screenshot Gimp - verzerrtes Bild" } } } ]} />

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

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/image_4_xncc0b.png", aspectRatio: "16/9", alt: "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.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/image_5_izps9g.png", aspectRatio: "16/9", alt: "Gimp Export Dialog - Einstellungen müssen nicht verändert" } } } ]} />

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!

pcode - passion for people

Wir entwickeln digitale Produkte. Websites, Onlineshops und Apps für eine maßgeschneiderte User Experience. Projekte von pcode sind sinnstiftend und von Menschen für Menschen gemacht.