So erstellen Webdesigner Bilder für Retina-Displays

Besonderer Hinweis: Dieser Artikel wurde basierend auf Chris Spooners englischem Artikel „So erstellen Sie Retina-Grafiken für Ihr Webdesign“ übersetzt. Die gesamte Übersetzung enthält unser eigenes Verständnis und unsere eigenen Gedanken. Wenn die Übersetzung nicht gut oder falsch ist, weisen Sie Kollegen und Freunde bitte darauf hin. Apple hat weitere Produkte für Retina-Displays herausgebracht. Bisher wissen wir, dass Apple-Geräte, die die Retina-Bildschirmtechnologie unterstützen, beispielsweise „iPhone“, „iPod“, „iPad“ und „Macbook Pro“ sind. Diese Geräte können Benutzern feinere, flüssigere und qualitativ hochwertigere Bildeffekte bieten und so das visuelle Erlebnis des Benutzers verbessern. Wie erstellen Sie als Webdesigner diese Retina-freundlichen Bilder für Ihre Website? Das werden wir heute lernen.

Anfangs hatte ich nicht damit gerechnet, dass ich größere Bilder verwenden würde, um die riesigen Bilder auf Retina-Bildschirmen unterzubringen, da es sich schließlich um eine brandneue Technologie handelt. Doch dann habe ich einige Zeit damit verbracht, Statistiken zu erstellen und dabei festgestellt, dass die Geräte von Apple einen großen Anteil am mobilen Markt haben. Bei den meisten dieser Geräte handelt es sich um iPhone, iPod und iPad, und diese Geräte unterstützen alle die Retina-Bildschirmtechnologie. Die meisten Benutzer von 13- und 15-Zoll-Retina-Displays surfen im Internet mit Chrome, Firefox, Safari und IE. Wenn Sie Opera unterstützen müssen, bedienen Sie ein Nischenpublikum. (Die Statistiken meiner eigenen Website zeigen diese Situation)

Sie denken vielleicht, dass Retina-Bilder nur mit einer hohen Auflösung (PPI) gespeichert werden müssen, aber das ist nicht der Fall. Sie müssen das Bild lediglich in der doppelten Größe für Retina-Displays speichern. Wenn Sie also ein Bild mit 200 x 200 Pixeln (CSS-Pixeln) speichern, müssen Sie es mit 400 x 400 Pixeln speichern. Diese übergroßen Bilder werden in der gleichen Größe wie das Originalbild angezeigt und sorgen so für eine gleichmäßige und scharfe Darstellung auf Retina-Bildschirmen.

Klingt einfach, aber wie lässt sich die Bildgröße verdoppeln?

Entwerfen Sie Logos und Symbole mit Illustrator

Vektorgrafiken sind die perfekte Lösung zum Erstellen von Retina-Grafiken. Wenn Sie ein Logo oder Symbol als EPS- oder Ai-Datei haben, kann das Vektorbild beim Exportieren oder Kopieren des Bildes nach Photoshop auf jede beliebige Größe skaliert werden. Das eingefügte Element kann als Smart-Objekt verwendet werden, wobei die Vektorpfade erhalten bleiben, sodass es verdoppelt und als spezielles, für Retina geeignetes Bild exportiert werden kann.

Verwenden der Vektorfunktionen von Photoshop

Photoshop ist eine Anwendung für Pixelgrafiken. Das bedeutet jedoch nicht, dass damit keine Vektorgrafiken erstellt werden können. Jedes Grafiktool kann eine Vektorebene erstellen, nicht nur eine Pixelebene. Alle Ebenenstileffekte sind also weiterhin skalierbar. Wenn Sie alles mit 2 multiplizieren, werden fast alle Effekte auf genau die doppelte Größe skaliert.

Vergrößern Sie Ihr Pixelbild

Eine Regel besteht darin, dass wir als Designer ein Bild nicht leichtfertig vergrößern möchten. Wenn Sie jedoch zurückgehen und einer von Ihnen gestalteten Site Retina-Bilder hinzufügen möchten, möchten Sie nicht jedes Bild manuell neu erstellen müssen. Normalerweise führt das Vergrößern eines Bildes zu einem verschwommenen und gezackten Aussehen, es gibt jedoch eine kleine Option für Bilder in Photoshop mit einer Menüoption namens „Nächster Nachbar“, die Ihnen gerade dabei hilft, das verschwommene Aussehen und die vielen gezackten Kanten zu vermeiden, sodass das Bild verwendbar ist. Das Laden erfolgt erst, wenn das Element geladen ist, es sorgt jedoch für einen rechtzeitigen Ersatz.

Mit 200 % entwerfen und dann verkleinern?

Sie fragen sich vielleicht: „Warum kann ich nicht einfach eine Web-Layoutseite in doppelter Größe erstellen, damit ich die Elemente verkleinern und die benötigten Symbole erstellen kann?“ Dies ist in der traditionellen Printdesigntheorie möglich, nicht jedoch im Webdesign. Denn Webdesign arbeitet auf Pixelbasis, um perfekte Formen und Linien zu erzeugen. Selbst wenn wir das Bild in einem bestimmten Verhältnis vergrößern und es dann mit der Photoshop-Software exportieren, wird das exportierte Bild unscharf erscheinen, insbesondere bei kleinen Symbolen.

Nachdem Sie eine Kopie des Standardbilds erstellt haben, die die doppelte Pixelgröße des Standardbilds hat, können Sie sie mithilfe verschiedener Methoden in Ihre Seite laden. So können Sie Dateien schnell benennen. Legen Sie Standardbilder und Retina-Bildschirmbilder in denselben Ordner und benennen Sie die Retina-Bilder, indem Sie am Ende des normalen Bilddateinamens „ @2x “ hinzufügen. Wenn der normale Bilddateiname beispielsweise „snarf.jpg“ lautet, würden wir das Bild auf dem Retina-Bildschirm „[email protected]“ nennen.

Einfache Javascript-Methode

HTML-IMG-Tag

Gebärdensprache des Übersetzers: Dies ist mein erster Blogbeitrag zum Thema Front-End-Technologie. Die gesamte Übersetzung erfolgte gemäß dem Originaltext und ich habe während des Übersetzungsprozesses ein wenig persönliches Verständnis der Technologie hinzugefügt. Sollten in der Übersetzung Fehler enthalten sein, weisen Sie mich bitte darauf hin. Danke!