2. Agenda
Die schöne Welt der Icons
Technischen Voraussetzungen
Was müssen wir beim Design beachten?
Unterschiede Plattformen (iOS, WindowsPhone, Android etc)
Erstellung ein Icon fürs iPad oder iPhone
Welche Programme werden genutzt?
Und zu guter Letzt: Wie kommt das Icon dann aufs iPad?
2
4. Wie gross denn nun?
Art bis iPad 2 ab iPad 3
Application Icon (erforderlich) 72 x 72 144 x 144
AppStore Icon (erforderlich) 512 x 512 1024 x 1024
768 x 1004 (Hochformat) 1536 x 2008 (Hochformat)
Launch Image (erforderlich)
1024 x 748 (Querformat) 2048 x 1496 (Querformat)
4
5. Wie gross denn nun?
Art bis iPad 2 ab iPad 3
50 x 50 für Suchergebnisse 100 x 100 für Suchergebnisse
Kleines Icon für Spotlight-Suche
29 x 29 für Einstellungen 58 x 58 für Einstellungen
Toolbar und Navigation Icon Etwa 20 x 20 Etwa 40 x 40
Tab Bar Icon Etwa 30 x 30 Etwa 60 x 60
Newsstand Cover Icon mind. 512 (längere Seite) mind. 1024 (längere Seite)
5
7. iOS übernimmt für uns:
~~ die abgerundeten Ecken selbstständig
~~ den halbtransparenten Glanzpunkt (Lichteinfall von oben Mitte)
~~ leichten Schlagschatten
~~ tropfenartige Reflexion (das lässt sich abschalten im Projekt)
7
8. WebOS & Android besonderheiten
~~ ähnlich wie iOS
~~ Lichteinfall oben mittig
~~ Android und WebOS, Linux, MacOS und Windows 8Bit-Alphakanal
(Hintergrund könnte wegfallen)
8
9. WindowsPhone besonderheiten
~~ Hintergrund kann weiss, schwarz oder eine von 10 vorgegebenen
Akzentfarben sein
~~ bei farbigen Hintergründen darf das Symbol ausschliesslich weiss sein
~~ nach unten muss noch genügend Platz bleiben für den namen, den
Windows selbstständig einfügt
9
10. Dateiformat
~~ alle Icons PNG
~~ Standard RGB/A 32 Bit
~~ (8 Bit für Rot, Grün, Blau + 8 Bit für Alphakanal)
~~ Keine Transparenzen für iOS
10
12. Umsetzung
Ideal: Entwurf des Icons auf Papier
Copyright der Grafiken, Bilder, Schriften abklären
Umsetzung in Illustrator
Verfeinerung in Photoshop
Veröffentlichung
12
15. Designprozess
~~ nicht verbessern, lieber neu zeichnen (mit Gel- oder Kugelschreiber)
~~ Wichtig: simpel, prägnant, themenbezogen
~~ besondere Dinge als Detail darstellen
~~ Fotos eignen sich nur bedingt
15
16. Alle Icons sind quadratisch!
Gestaltung in Quadraten:
~~ Stabilität, Sicherheit, absolute Geometrie
~~ Quadrate sind Grundbausteine und ordnungsgebend
Aber / Und:
~~ Dynamik lässt sich durch die innenliegenden Formen geben
16
17. Regeln:
~~ Nimm einen Grafiker! Du musst nicht alles allein können.
~~ Das Icon muss schnell erfassbar sein (Testen!)
~~ Halt es einfach, reduziere soweit wie möglich.
~~ Setze Farben inhaltlich sinnvoll ein
17
18. Regeln:
~~ Viel Text geht nicht, achte auf die Verwendung von Typo
~~ Versuche ein Foto zu stilisieren
~~ Teste die App als Screenshot im Icon
~~ Nutze Transparenzen nur, wenn es Sinn macht
18
19. Illustrator oder Photoshop?
Grundsätzlich: was dem Designer lieber ist und besser liegt
Photoshop Illustrator
+ überwiegend Pixel Icon + Vektoren
+ verlustfrei skalierbar
+ SmartFilter lassen sich später anpassen + Effekte lassen sich später anpassen
+ Füllmethoden + Ebeneneinstellungen
+ Zeichenstift, Flächen, Farben + Zeichenstift, Flächen, Farben, Pathfinder
19
20. Plastizität
~~ durch Schatten
~~ durch Farbverläufe
~~ Transparenzen etc.
~~ Spiegelungen und glasartige Highligts gehen leider etwas unter bei
iOS durch die iOS-Effektüberlagerung
20
21. Praxis
~~ Illustrator & Photoshop
~~ Templates nutzen (Illustrator & Photoshop)
~~ Shadow und Abrundungen zu Hilfe nehmen
~~ Testen mit eingeblendeten Rundungen & Shadows
~~ Export(e) ohne Hilfsebenen als PNG in den gewünschten Größen
21
22. Wie kommt das Icon aufs Tablet?
~ DPS: ViewerBuilder starten
22
24. Inhalt
Icons fürs Tablet 1 Praxis21
Agenda2 Wie kommt das Icon aufs Tablet? 22
Die (schöne) Welt der Icons 3
Wie gross denn nun? 4
Wie gross denn nun? 5
Guidlines (technische Seite) 6
iOS übernimmt für uns: 7
WebOS Android besonderheiten 8
WindowsPhone besonderheiten 9
Dateiformat10
Farben11
Umsetzung12
Designprozess13
Designprozess15
Alle Icons sind quadratisch! 16
Regeln:17
Regeln:18
Illustrator oder Photoshop? 19
Plastizität20
24
