1

Icons fürs Tablet

Heike Koch

DIGICOMP – Publishing Day 2012

Donnerstag, den 15. März 2012

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?

3

Die (schöne) Welt der Icons

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

Launch Image (erforderlich)768 x 1004 (Hochformat) 1024 x 748 (Querformat)

1536 x 2008 (Hochformat) 2048 x 1496 (Querformat)

5

Wie gross denn nun?

Art bis iPad 2 ab iPad 3

Kleines Icon für Spotlight-Suche50 x 50 für Suchergebnisse 29 x 29 für Einstellungen

100 x 100 für Suchergebnisse 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)

6

Guidlines (technische Seite)

Application Icon (erforderlich) https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2

AppStore Icon (erforderlich) https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2

Launch Image (erforderlich) https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2

Kleines Icon für Spotlight-Suche https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW10

Toolbar und Navigation Icon https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW8

Tab Bar Icon https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW8

Newsstand Cover Icon https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW12

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)

8

WebOS & Android besonderheiten

~ ähnlich wie iOS

~ Lichteinfall oben mittig

~ Android und WebOS, Linux, MacOS und Windows 8Bit-Alphakanal

(Hintergrund könnte wegfallen)

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

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

11

Farben

RGB

Graustufen

12

Umsetzung

Ideal: Entwurf des Icons auf Papier

Copyright der Grafiken, Bilder, Schriften abklären

Umsetzung in Illustrator

Verfeinerung in Photoshop

Veröffentlichung

13

Designprozess

~ Brainstorming: Ideen sammeln, Logos anschauen, CI nutzen...

~ viele, einfache Skizzen machen!

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

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

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

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

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

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

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

22

Wie kommt das Icon aufs Tablet?

~ DPS: ViewerBuilder starten

23

24

Inhalt

Icons fürs Tablet 1

Agenda 2

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

Dateiformat 10

Farben 11

Umsetzung 12

Designprozess 13

Designprozess 15

Alle Icons sind quadratisch! 16

Regeln: 17

Regeln: 18

Illustrator oder Photoshop? 19

Plastizität 20

Praxis 21

Wie kommt das Icon aufs Tablet? 22