Es wird immer häufiger für Grafikprofis, dass ihre Arbeit nicht nur im Druck erscheint, sondern auch im Internet und auf Geräten wie iPhones, iPads, Android-Geräten und Android-Tablets. Oberflächlich betrachtet könnte dies als "gute Sache" betrachtet werden, da die Medien, in denen unsere Arbeit erscheint, sich auf digitale Bildschirme ausweiten. Der Nachteil ist die schiere Anzahl von Bildschirmen und die verwirrende Anzahl von Bildschirmauflösungen. Es ist nicht ungewöhnlich, dass erfahrene Profis sich fragen, was in den Tagen passiert ist, als ein TIFF-Bild mit einer Auflösung von 300 dpi die Norm war. Oh für die guten alten Zeiten!
Diese Tage sind vorbei. Wir müssen uns nun damit abfinden, dass ein 200 x 200-Bild auf einem Gerät gut und auf einem anderen zwar mit Viertelgröße und auf einem anderen mit Dreiviertelgröße angezeigt wird. Es hängt alles von der "Resolution Arms Race" ab, die von den Geräteherstellern ausgetragen wird, da sie versuchen, mehr Pixel in einen Bildschirm zu stecken als ihre Konkurrenten.
Dies bringt uns zu dem, was wir "Aufstieg der Suffixe" nennen. Die Suffixe sind die Dinge - @ 2x, @ 3x -, die an den Namen eines Bildes geklebt werden. Sie legen beispielsweise im Wesentlichen das richtige Bild auf dem richtigen Gerät an die richtige Stelle. Dann wird es noch besser.
Ein großer Teil unserer Arbeit besteht in der Arbeit mit Symbolen. Mit dem Aufkommen der Flat-Design-Bewegung werden diese Dinge in Vektoranwendungen wie Illustrator und Sketch erstellt. Das Problem ist, dass Geräte einfach keine .ai- oder .eps-Dateien darstellen können. Sie müssen in skalierbare Vektorgrafiken konvertiert werden, und je nach der zum Erstellen der Symbole verwendeten Anwendung gibt es möglicherweise nicht einmal eine SVG-Option.
Dann wird es noch besser.
Es gibt eine neue Klasse von Software - Prototyping-Anwendungen -, die zum Sammelpunkt werden, bevor Ihre Bilder und Symbole auf Geräte verteilt werden und auch ihre Besonderheiten haben.
In diesem Lernprogramm wird zwischen Photoshop und Sketch für die Grafik und die Verwendung von Adobe Experience Design zum Anzeigen einiger schmerzlicher Punkte zwischen Ihrer Idee und der möglichen Bereitstellung gewechselt. Lass uns anfangen.
01 von 05So bereiten Sie Bilder für mobile Geräte in Adobe Photoshop vor
Der erste Schritt in diesem Prozess besteht darin, das Zielgerät oder die Zielgeräte zu kennen. In diesem Fall zielen Sie auf das iPhone 6, das eine Bildschirmfläche von 375 Pixel Breite und 667 Pixel Höhe hat. Das Design verlangt, dass das Bild die Breite des Bildschirms ist.
Das zu verwendende Bild wurde im Berner Münster in Bern (Schweiz) aufgenommen. Sobald das Bild in Photoshop geöffnet wird, Wählen Sie Image> Image Size um die Abmessungen des Bildes und seine Auflösung zu überprüfen. Natürlich funktioniert ein Bild mit einer Auflösung von 3156 x 2592 mit einer Auflösung von 300 ppi und einer Dateigröße von 23,4 MB einfach nicht.
Im Dialogfeld Bildgröße Reduzieren Sie die Auflösung auf 100 ppi. Tun Sie dies zuerst, da sich auch die Bildmaße ändern. Ändern Sie bei eingestellter Auflösung die Breite auf 375 Pixel. Wenn Sie die Bildgröße-Daten überprüfen, werden Sie feststellen, dass das Bild von 23,4 MB auf einen mobilefreundlichen 338k geschrumpft ist. OK klicken , um die Änderung zu akzeptieren und das Dialogfeld Bildgröße zu schließen.
Lesen Sie weiter unten
02 von 05So verwenden Sie das Dialogfeld "Exportieren als …" in Adobe Photoshop
Sobald das Bild für den Export bereit ist, Wählen Sie "Exportieren> Exportieren als …". um das Dialogfeld Exportieren zu öffnen.
Dieses Dialogfeld ist eine kürzlich hinzugefügte Ergänzung zu Photoshop und ersetzt das seit Jahren verwendete Dialogfeld "Für Web speichern". Wenn Sie es noch brauchen, finden Sie es im Export-Pop-Down. Aus offensichtlichen Gründen ist es jetzt als "Export for Web (Legacy)" bekannt. Wenn Sie dieses Dialogfeld zum ersten Mal besuchen, finden Sie hier eine kurze Tour:
- Größe: Diese Spalte legt die Ausgabegröße des Bildes fest. Der interessante Aspekt dieses Bereichs besteht darin, dass das Bild vergrößert wird, aber das Bild erscheint auf dem Gerät aufgrund der großen Anzahl von Pixeln auf dem Bildschirm des Geräts nicht als „unscharf“.
- 1X: Klicken Sie auf Halten, um eine Reihe von Größen anzuzeigen. Die Kategorien 1x, 2x und 3x werden traditionell mit Hi Dpi-Geräten von Apple in Verbindung gebracht und zusammen mit ein paar anderen werden Bilder für Android-Geräte vorbereitet.
- Suffix: Diese Auswahl zeigt Ihre Größe, wird jedoch als @ 2x angezeigt oder die Größe wird ausgewählt. Dieses Suffix wird dem Bildnamen hinzugefügt.
- Das + Zeichen: Klicken Sie hier, um verschiedene Formate für die Ausgabe hinzuzufügen. Klicken Sie in diesem Fall zweimal darauf und wählen Sie 2x und 3x aus dem Pop-Down-Fenster. Dies gilt praktisch für jedes iOS-Gerät.
- Der Mülleimer: Klicken Sie darauf und die Auswahl wird aus der Aufstellung entfernt.
- Dateieinstellungen: Wählen Sie das Format - JPG, PNG, GIF oder SVG - am besten für das Bild geeignet. Wenn die Dateigröße ein Problem ist, können Sie auch die Qualitätseinstellungen reduzieren.
- Bildgröße: Sie können die physischen Abmessungen des Bildes ändern.
- Leinwandgröße: Sie können die physischen Abmessungen der Bildleinwand ändern.
- Metadaten: Sie können den Metadaten des Bildes Copyright und Ihre Kontaktinformationen hinzufügen.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Alle exportieren. Sie werden gefragt, wo Sie die Bilder platzieren möchten. Eine gute Angewohnheit bei der Entwicklung besteht darin, auf die Schaltfläche Neuer Ordner zu klicken und einen Ordner für die exportierten Bilder zu erstellen. Wenn Sie auf Exportieren klicken, werden Ihnen die Bilder im Ordner angezeigt.
Lesen Sie weiter unten
03 von 05Vorbereiten von Bildern für mobile Geräte in Skizze 3 aus böhmischer Codierung
Sketch 3, eine Anwendung nur für Macintosh von Bohemian Coding, erfreut sich unter den Designern von UX und UI aufgrund des intensiven Fokus auf Web- und App-Design immer größerer Beliebtheit.Tatsächlich ist Photoshop in vielerlei Hinsicht in der ungewöhnlichen Position, Sketch nachholen zu müssen.
Um ein Bild für das Handy in Sketch vorzubereiten, wählen Sie das Bild auf der Zeichenfläche und aus Klicken Sie unten im Eigenschaftenfenster auf die Schaltfläche „Exportierbar machen“. Das Dialogfeld Export wird geöffnet. Klicken Sie auf das Pluszeichen, um die 2x- und 3x-Versionen hinzuzufügen und die Suffixe hinzuzufügen. Die verfügbaren Formate sind PNG, JPG, TIF, PDF, EPS und SVG. In diesem Fall wählen Sie JPG. Klicken Sie auf die Schaltfläche Exportieren und zielen oder erstellen Sie einen Ordner für die verschiedenen exportierten Bilder.
04 von 05Warum Sie drei (oder mehr) Versionen des Bildes erstellen müssen
In vielerlei Hinsicht ist der Mobile-Markt der "wilde Westen" der Auflösungen und eine Größe passt definitiv nicht allen. Im obigen Beispiel von Adobe Experience Design wird das Bild auf 2 iPhone 6-Zeichenflächen und einer Android-Geräte-Zeichenfläche platziert. Beachten Sie, dass die 1x-Version auf der linken Seite halb so groß erscheint. Genau so würde das Bild mit seinem Retina-Bildschirm auf einem iPhone 6 erscheinen. Die 2x-Version passt perfekt und die Android-Version läuft vom Bildschirm ab. Sie können entweder das Bild skalieren oder das Bild in einer anderen Größe aus Photoshop exportieren.
Lesen Sie weiter unten
05 von 05Testen Sie früh, testen Sie oft, vertrauen Sie nichts, vertrauen Sie niemandem und vor allem sich selbst
Sie müssen verstehen, dass dies nur der Anfang des Prozesses ist. Das Anzeigen Ihrer Arbeit auf so vielen Geräten wie möglich muss als wesentlicher Bestandteil des Workflows betrachtet werden. Sie müssen auch wissen, dass dies nur der erste Schritt beim Erstellen von Grafikressourcen für eine App oder für mobile Webprojekte ist.
Die Verwendung von Prototyping-Anwendungen ist eine großartige Möglichkeit, die Schwachstellen aufzudecken, aber diese Ressourcen müssen zur Verwendung durch den Entwickler ausgegeben werden. In vielen Fällen sind die physischen Dimensionen der Assets, einschließlich der Symbole, physisch sehr groß und nicht im SVG-Format, sondern im PNG-Format. Auf den ersten Blick scheint dies ein wenig übertrieben zu sein, erinnern Sie sich jedoch an die goldene Regel der Skalierung von Bildern: Es ist besser, das Bild zu verkleinern als es zu vergrößern.
Die Quintessenz ist, eng mit Ihrem Entwickler zusammenzuarbeiten und Prototyping-Software zu verwenden, um Ihre Konstruktionsabsicht zu zeigen. Letztendlich müssen jedoch dieselben Ressourcen für das Endprodukt bereit sein, und Ihr Entwickler hat einen besseren Überblick über das, was er benötigt, als Sie.
