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

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.

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.

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.

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.

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

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

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.

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!