Icons fürs Tablet

24
1 Icons fürs Tablet Heike Koch DIGICOMP – Publishing Day 2012 Donnerstag, den 15. März 2012

Transcript of Icons fürs Tablet

Page 1: Icons fürs Tablet

1

Icons fürs Tablet

Heike Koch

DIGICOMP – Publishing Day 2012

Donnerstag, den 15. März 2012

Page 2: Icons fürs Tablet

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?

Page 3: Icons fürs Tablet

3

Die (schöne) Welt der Icons

Page 4: Icons fürs Tablet

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)

Page 5: Icons fürs Tablet

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)

Page 6: Icons fürs Tablet

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

Page 7: Icons fürs Tablet

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)

Page 8: Icons fürs Tablet

8

WebOS & Android besonderheiten

~ ähnlich wie iOS

~ Lichteinfall oben mittig

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

(Hintergrund könnte wegfallen)

Page 9: Icons fürs Tablet

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

Page 10: Icons fürs Tablet

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

Page 11: Icons fürs Tablet

11

Farben

RGB

Graustufen

Page 12: Icons fürs Tablet

12

Umsetzung

Ideal: Entwurf des Icons auf Papier

Copyright der Grafiken, Bilder, Schriften abklären

Umsetzung in Illustrator

Verfeinerung in Photoshop

Veröffentlichung

Page 13: Icons fürs Tablet

13

Designprozess

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

~ viele, einfache Skizzen machen!

Page 14: Icons fürs Tablet
Page 15: Icons fürs Tablet

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

Page 16: Icons fürs Tablet

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

Page 17: Icons fürs Tablet

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

Page 18: Icons fürs Tablet

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

Page 19: Icons fürs Tablet

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

Page 20: Icons fürs Tablet

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

Page 21: Icons fürs Tablet

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

Page 22: Icons fürs Tablet

22

Wie kommt das Icon aufs Tablet?

~ DPS: ViewerBuilder starten

Page 23: Icons fürs Tablet

23

Page 24: Icons fürs Tablet

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