Hallo!
Dieses Tutorial behandelt den Export der Assets einer App. Ich werde darauf eingehen, was bei der Erstellung der Grafiken zu beachten ist, mit Hilfe welcher Tools man diese dann für den sofortigen Gebrauch exportieren kann und auf was man dabei achten sollte.
Damit alle auf dem gleichen Stand sind:
------
Am Anfang des Projektes müsst ihr schon sicher wissen, welche Art von App es wird und dementsprechend die Projektdatei(en) anlegen. Denn es gibt zwei Wege eine App zu designen:
Aber warte.. Was meine ich mit 1x, 2x und 3x ?
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Zusammengefasst:
Moderne Smartphones (mit "Retina"-Display) zeigen ein Bild mit einer bestimmten Auflösung an, rechnen aber intern mit höher aufgelösten Bildern um eine höhere Pixeldichte zu erreichen. Und dies gibt es freilich nicht nur bei iPhones sondern auch Android Geräten!
Diese Informationen sind für unser Projekt in der Hinsicht wichtig, dass wir - wie angesprochen - unser Projekt in 1x oder 3x anlegen. Und wie treffe ich diese Entscheidung?
Wenn die App ohne "Grafikeffekte" wie aufwendige Buttons, Lichteffekte etc. auskommt (da sie "Flat" ist), werden in Photoshop (und Sketch) nur Formebenen benutzt. Diese werden intern in Photoshop als Vektoren berechnet und sind dementsprechend beliebig skalierbar.
Deshalb ist eine Vergrößerung von 1x auf 2x und 3x ohne Probleme möglich.
Sollte allerdings die App viele Effekte bzw. Pixelebenen haben, wäre eine Vergrößerung von 1x auf 3x fatal - denn die Grafiken würden einfach unscharf werden ("verpixelt").
Deshalb muss der Weg hier genau andersherum genommen werden und jeweils verkleinert werden.
Hinweis:
Viele Designer geben die Empfehlung ab immer von 1x auf 3x hochzuskalieren (sprich 1. Variante). Im Designprozess hat dies den Vorteil, dass man immer die wahre Größe sieht (und nicht umdenken muss). Beim Export treten auch keine Fehler mit halben Pixeln auf.
-------
1
Wenn wir eine App der ersten Art erstellen, müssen wir uns über die 1x Größe informieren und das Dokument anlegen. Die Vorlagen in Photoshop nutzen die 2x bzw. 3x Größe:
[Only registered and activated users can see links. Click Here To Register...]
Unsere App kann nun erstellt werden.
[Only registered and activated users can see links. Click Here To Register...]
Alle Ebenen sind Formen und keine Pixelebenen. Diese können wir nun bequem exportieren. Und zwar für alle Größen. Dazu markieren wir eine Ebene, z.B. "Hamburger" und öffnen den Export-Dialog über Rechtsklick -> Exportieren als..
[Only registered and activated users can see links. Click Here To Register...]
Hier können wir nun bequem alle drei Größen anwählen, ein Suffix anhängen und alle drei auf einmal exportieren. Fertig.
2
Nun schauen wir uns die zweite Herangehensweise an, als Beispiel dient ein App-Design, das ich erstellt habe. Alle Grafiken wurden in 3x Größe erstellt.
[Only registered and activated users can see links. Click Here To Register...]
Diese Variante bietet 2 Nachteile: Photoshop unterstützt die Skalierung nicht perfekt, weshalb man auf ein externes Skript zurückgreifen muss; und alle Grafiken müssen jeweils in Höhe und Breite durch drei teilbar sein, sodass beim Verkleinern keine halben Pixel entstehen.
Deshalb habe ich (geordnet nach Kategorien) alle Assets in externe Dateien ausgelagert, dort die Größe perfekt angepasst und diese einzelnen Smart-Objekte dann exportiert.
[Only registered and activated users can see links. Click Here To Register...]
Für den Export habe ich folgendes Skript benutzt:
[Only registered and activated users can see links. Click Here To Register...]
Wählt eine Ebene bzw. Objekt aus und führt das Skript aus:
[Only registered and activated users can see links. Click Here To Register...]
Es liefert euch dann genauso wie der Photoshop-Generator drei Dateien - auch mit @2x und @3x Suffix.
------
Und ein abschließender Hinweis:
Für Flat-Designs etc. sind andere Programme besser geeignet als Photoshop, z.B.
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Vielen Dank fürs Lesen und viel Erfolg beim nächsten App-Projekt,
LeKoArts
Dieses Tutorial behandelt den Export der Assets einer App. Ich werde darauf eingehen, was bei der Erstellung der Grafiken zu beachten ist, mit Hilfe welcher Tools man diese dann für den sofortigen Gebrauch exportieren kann und auf was man dabei achten sollte.
Damit alle auf dem gleichen Stand sind:
Oder anders gesagt: Assets sind alle Grafiken, die ihr exportieren müsst, um sie in der fertigen App zu benutzen.Quote:
A catch-all term referring to all materials needed to successfully complete a project.
------
Am Anfang des Projektes müsst ihr schon sicher wissen, welche Art von App es wird und dementsprechend die Projektdatei(en) anlegen. Denn es gibt zwei Wege eine App zu designen:
- Das komplette Projekt ist in 1x Größe angelegt, d.h. eure Zeichenfläche hat die gleichen Maße wie das physische Display
- Euer Projekt ist in der größten "Retina"-Stufe angelegt (mittlerweile 3x), sprich eure Grafiken sind 3x so groß wie sie später angezeigt werden
Aber warte.. Was meine ich mit 1x, 2x und 3x ?
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Zusammengefasst:
Moderne Smartphones (mit "Retina"-Display) zeigen ein Bild mit einer bestimmten Auflösung an, rechnen aber intern mit höher aufgelösten Bildern um eine höhere Pixeldichte zu erreichen. Und dies gibt es freilich nicht nur bei iPhones sondern auch Android Geräten!
Diese Informationen sind für unser Projekt in der Hinsicht wichtig, dass wir - wie angesprochen - unser Projekt in 1x oder 3x anlegen. Und wie treffe ich diese Entscheidung?
Wenn die App ohne "Grafikeffekte" wie aufwendige Buttons, Lichteffekte etc. auskommt (da sie "Flat" ist), werden in Photoshop (und Sketch) nur Formebenen benutzt. Diese werden intern in Photoshop als Vektoren berechnet und sind dementsprechend beliebig skalierbar.
Deshalb ist eine Vergrößerung von 1x auf 2x und 3x ohne Probleme möglich.
Sollte allerdings die App viele Effekte bzw. Pixelebenen haben, wäre eine Vergrößerung von 1x auf 3x fatal - denn die Grafiken würden einfach unscharf werden ("verpixelt").
Deshalb muss der Weg hier genau andersherum genommen werden und jeweils verkleinert werden.
Hinweis:
Viele Designer geben die Empfehlung ab immer von 1x auf 3x hochzuskalieren (sprich 1. Variante). Im Designprozess hat dies den Vorteil, dass man immer die wahre Größe sieht (und nicht umdenken muss). Beim Export treten auch keine Fehler mit halben Pixeln auf.
-------
1
Wenn wir eine App der ersten Art erstellen, müssen wir uns über die 1x Größe informieren und das Dokument anlegen. Die Vorlagen in Photoshop nutzen die 2x bzw. 3x Größe:
[Only registered and activated users can see links. Click Here To Register...]
Unsere App kann nun erstellt werden.
[Only registered and activated users can see links. Click Here To Register...]
Alle Ebenen sind Formen und keine Pixelebenen. Diese können wir nun bequem exportieren. Und zwar für alle Größen. Dazu markieren wir eine Ebene, z.B. "Hamburger" und öffnen den Export-Dialog über Rechtsklick -> Exportieren als..
[Only registered and activated users can see links. Click Here To Register...]
Hier können wir nun bequem alle drei Größen anwählen, ein Suffix anhängen und alle drei auf einmal exportieren. Fertig.
2
Nun schauen wir uns die zweite Herangehensweise an, als Beispiel dient ein App-Design, das ich erstellt habe. Alle Grafiken wurden in 3x Größe erstellt.
[Only registered and activated users can see links. Click Here To Register...]
Diese Variante bietet 2 Nachteile: Photoshop unterstützt die Skalierung nicht perfekt, weshalb man auf ein externes Skript zurückgreifen muss; und alle Grafiken müssen jeweils in Höhe und Breite durch drei teilbar sein, sodass beim Verkleinern keine halben Pixel entstehen.
Deshalb habe ich (geordnet nach Kategorien) alle Assets in externe Dateien ausgelagert, dort die Größe perfekt angepasst und diese einzelnen Smart-Objekte dann exportiert.
[Only registered and activated users can see links. Click Here To Register...]
Für den Export habe ich folgendes Skript benutzt:
[Only registered and activated users can see links. Click Here To Register...]
Wählt eine Ebene bzw. Objekt aus und führt das Skript aus:
[Only registered and activated users can see links. Click Here To Register...]
Es liefert euch dann genauso wie der Photoshop-Generator drei Dateien - auch mit @2x und @3x Suffix.
------
Und ein abschließender Hinweis:
Für Flat-Designs etc. sind andere Programme besser geeignet als Photoshop, z.B.
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Vielen Dank fürs Lesen und viel Erfolg beim nächsten App-Projekt,
LeKoArts