Post on 14-Jul-2015
transcript
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