Bildassets erstellen
Für den Export der Bildassets wird zwingend Adobe Photoshop (Ps) benötigt. Die Stilistik der Bilder ergibt sich aus dem Dithering, welches so nur in Ps reproduziert werden kann.
Bei der Auswahl der Bilder gilt es, wie üblich auf die richtigen Lizenzen zur freien Verwendung zu achten und Bildquellen für eine eventuelle Namensnennung zu dokumentieren. Gute lizenzfreie Stockfoto-Portale sind beispielsweise Unsplash oder Pexels. Vor der Bildrecherche ist es sinnvoll, die entsprechenden Anforderungen aus der unten stehenden Komponententabelle im Blick zu behalten.
- Bild in Ps öffnen.
- Per Klick auf das Schloss in der Ebenenübersicht alle Bearbeitungsfunktionen aktivieren.
Nur, wenn der Hintergrund transparent sein soll, siehe Komponententabelle.
Video-Tutorial: https://www.youtube.com/watch?v=B83PAzD1Yv0
- Crop-Tool auswählen (Shortcut: C)
- In der oberen Leiste "B x H x Auflösung" einstellen und daneben die passenden Pixelwerte eingeben (s. Komponententabelle). Wichtig: Die Einheit "px" muss zwingend mit angegeben werden, sonst interpretiert Ps die Werte als Verhältnis und nicht als eine konkrete Pixelanzahl. Falls es keinen Eintrag in der Komponententabelle gibt (z. B. für neu gelayoutete Elemente) können die Pixelwerte verwendet werden, mit denen das Bild in Adobe Xd für Desktop gelayoutet wurde.
- Das Zuschnittsfenster größer/kleiner ziehen und verschieben, bis der passende Bildausschnitt gegeben ist und mit Enter bestätigen. Danach hat das Bild exakt die angegebene Auflösung.
- Datei > Exportieren > Für Web Speichern (Legacy)
- PNG 8-bit einstellen. Transparenz anwählen, aber nur wenn das Bild auch wirklich einen transparenten Hintergrund enthält. Die Bildgröße auf 50% stellen. (siehe rote Kästen im Screenshot)
- Jetzt gibt es vier Möglichkeiten, sowohl das Aussehen des Bildes als auch die Dateigröße zu beeinflussen (siehe grüne Kästen im Screenshot): Die Anzahl der Farben hat den größten Einfluss auf die Dateigröße und sollte zwischen 2 und 10 liegen, je weniger desto besser. Nachdem eine Anzahl oben eingestellt wurde, können auch manuell Farben in der Farbtabelle angewählt und gelöscht werden. Die Modi "Perzeptiv", "Selektiv" und "Adaptiv" beschreiben, wie Ps das Bild umwandelt – bei der gleichen Anzahl an Farben erzielt man damit unterschiedliche Ergebnisse. Das Dithering muss vorzugsweise auf "Muster" oder auf "Diffusion" oder "Rauschen" stehen.
- Während des Ausprobierens verschiedener Einstellungen um zu einem visuell zufriedenstellenden Ergebnis zu gelangen sollte die Dateigröße im Auge behalten werden (blauer Kasten unten links im Screenshot). Eine grobe Orientierung für passende Größen bietet die Komponententabelle.
- Am Ende die Datei unter entsprechender Benennung speichern – fertig!
Benennungsschema: ordnername_komponente_name, z. B. kapitel1_stats_eier
Verwendete Komponentennamen:
- intro
- massvisualize (z. B. das mit den Schweinen oder dem Feinstaub)
- stats (Balkendiagramm)
- testimonial (Interviews)
- table (Auswahlmöglichkeit, z. B. "Was isst du?" -> Käse, Fleisch, Eier, Avocado)
Name = Eigener Name für das Bild, z. B. stars_background, stars_foreground oder avocado
Werden Bilder aus vorhergehenden Kapiteln "recycelt", werden diese nicht erneut angelegt, sondern einfach auf das Bild aus dem Kapitel verweisen, in dem es das erste Mal vorkommt. Die Gebäudebilder, die beispielsweise in den allen ersten drei Kapiteln vorkommen, werden nur im Ordner 02-kapitel1 gespeichert.
In Bearbeitung.
| Komponente | Name | Auflösung Crop | Auflösung Export | Transparenz | Dateigröße (ideal) | Dateigröße (max.) | Besonderheiten |
|---|---|---|---|---|---|---|---|
| Auswahlmöglichkeit | table | * | 50% von Crop | ja | 5 KB | 20 KB | Bild kann Schrift enthalten, Schriftart folgt |
| Blogbeitragsbild | none | 1000 x 600 | 500 x 300 | nein | < 10 KB | 15 KB | |
| Interview-Portrait | testimonial | 700 x 600 | 350 x 300 | nein | 15 KB | 30 KB | Portraitfotos von Personen nicht zu stark verfremden, im Zweifelsfall auch bis zu 16-20 Farben verwenden |
| Statistik-Balken | stats | 1020 x 80 | 510 x 40 | nein | < 2 KB | 5 KB | Bild darf nicht zu hell sein, weiße Schrift davor! |
| Vollbild-Hintergrund | * | 1920 x 1080 | 960 x 540 | nein | 40 KB | 120 KB |
* = kann verschiedene Werte annehmen