Icons fürs TabletHeike KochDIGICOMP – Publishing Day 2012Donnerstag, den 15. März 20121
AgendaDie schöne Welt der IconsTechnischen VoraussetzungenWas müssen wir beim Design beachten?Unterschiede Plattformen (iO...
Die (schöne) Welt der Icons3
Wie gross denn nun?Art                               bis iPad 2                ab iPad 3Application Icon (erforderlich)   ...
Wie gross denn nun?Art                             bis iPad 2                  ab iPad 3                                 5...
Guidlines (technische Seite)                                   https://developer.apple.com/library/ios/documentation/UserE...
iOS übernimmt für uns:~~ die abgerundeten Ecken selbstständig~~ den halbtransparenten Glanzpunkt (Lichteinfall von oben Mi...
WebOS & Android besonderheiten~~ ähnlich wie iOS~~ Lichteinfall oben mittig~~ Android und WebOS, Linux, MacOS und Windows ...
WindowsPhone besonderheiten~~ Hintergrund kann weiss, schwarz oder eine von 10 vorgegebenen    Akzentfarben sein~~ bei far...
Dateiformat~~ alle Icons PNG~~ Standard RGB/A 32 Bit~~ (8 Bit für Rot, Grün, Blau + 8 Bit für Alphakanal)~~ Keine Transpar...
FarbenRGBGraustufen11
UmsetzungIdeal: Entwurf des Icons auf PapierCopyright der Grafiken, Bilder, Schriften abklärenUmsetzung in IllustratorVerf...
Designprozess~~ Brainstorming: Ideen sammeln, Logos anschauen, CI nutzen...~~ viele, einfache Skizzen machen!13
Designprozess~~ nicht verbessern, lieber neu zeichnen (mit Gel- oder Kugelschreiber)~~ Wichtig: simpel, prägnant, themenbe...
Alle Icons sind quadratisch!Gestaltung in Quadraten:~~ Stabilität, Sicherheit, absolute Geometrie~~ Quadrate sind Grundbau...
Regeln:~~ Nimm einen Grafiker! Du musst nicht alles allein können.~~ Das Icon muss schnell erfassbar sein (Testen!)~~ Halt...
Regeln:~~ Viel Text geht nicht, achte auf die Verwendung von Typo~~ Versuche ein Foto zu stilisieren~~ Teste die App als S...
Illustrator oder Photoshop?Grundsätzlich: was dem Designer lieber ist und besser liegtPhotoshop                           ...
Plastizität~~ durch Schatten~~ durch Farbverläufe~~ Transparenzen etc.~~ Spiegelungen und glasartige Highligts gehen leide...
Praxis~~ Illustrator & Photoshop~~ Templates nutzen (Illustrator & Photoshop)~~ Shadow und Abrundungen zu Hilfe nehmen~~ T...
Wie kommt das Icon aufs Tablet?~ DPS: ViewerBuilder starten22
23
InhaltIcons fürs Tablet                  1 Praxis21Agenda2 Wie kommt das Icon aufs Tablet?    22Die (schöne)	      Welt de...
Icons fürs Tablet
Nächste SlideShare
Wird geladen in …5
×

Icons fürs Tablet

1.215 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.215
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
391
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Icons fürs Tablet

  1. 1. Icons fürs TabletHeike KochDIGICOMP – Publishing Day 2012Donnerstag, den 15. März 20121
  2. 2. AgendaDie schöne Welt der IconsTechnischen VoraussetzungenWas müssen wir beim Design beachten?Unterschiede Plattformen (iOS, WindowsPhone, Android etc)Erstellung ein Icon fürs iPad oder iPhoneWelche Programme werden genutzt?Und zu guter Letzt: Wie kommt das Icon dann aufs iPad?2
  3. 3. Die (schöne) Welt der Icons3
  4. 4. Wie gross denn nun?Art bis iPad 2 ab iPad 3Application Icon (erforderlich) 72 x 72 144 x 144AppStore 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. 5. Wie gross denn nun?Art bis iPad 2 ab iPad 3 50 x 50 für Suchergebnisse 100 x 100 für SuchergebnisseKleines Icon für Spotlight-Suche 29 x 29 für Einstellungen 58 x 58 für EinstellungenToolbar und Navigation Icon Etwa 20 x 20 Etwa 40 x 40Tab Bar Icon Etwa 30 x 30 Etwa 60 x 60Newsstand Cover Icon mind. 512 (längere Seite) mind. 1024 (längere Seite)5
  6. 6. Guidlines (technische Seite) https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Application Icon (erforderlich) IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/AppStore Icon (erforderlich) IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Launch Image (erforderlich) IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Kleines Icon für Spotlight-Suche IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW10 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Toolbar und Navigation Icon IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW8 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Tab Bar Icon IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW8 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Newsstand Cover Icon IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW126
  7. 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. 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. 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ügt9
  10. 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 iOS10
  11. 11. FarbenRGBGraustufen11
  12. 12. UmsetzungIdeal: Entwurf des Icons auf PapierCopyright der Grafiken, Bilder, Schriften abklärenUmsetzung in IllustratorVerfeinerung in PhotoshopVeröffentlichung12
  13. 13. Designprozess~~ Brainstorming: Ideen sammeln, Logos anschauen, CI nutzen...~~ viele, einfache Skizzen machen!13
  14. 14. Designprozess~~ nicht verbessern, lieber neu zeichnen (mit Gel- oder Kugelschreiber)~~ Wichtig: simpel, prägnant, themenbezogen~~ besondere Dinge als Detail darstellen~~ Fotos eignen sich nur bedingt15
  15. 15. Alle Icons sind quadratisch!Gestaltung in Quadraten:~~ Stabilität, Sicherheit, absolute Geometrie~~ Quadrate sind Grundbausteine und ordnungsgebendAber / Und:~~ Dynamik lässt sich durch die innenliegenden Formen geben16
  16. 16. 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 ein17
  17. 17. 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 macht18
  18. 18. Illustrator oder Photoshop?Grundsätzlich: was dem Designer lieber ist und besser liegtPhotoshop 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, Pathfinder19
  19. 19. Plastizität~~ durch Schatten~~ durch Farbverläufe~~ Transparenzen etc.~~ Spiegelungen und glasartige Highligts gehen leider etwas unter bei iOS durch die iOS-Effektüberlagerung20
  20. 20. 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ößen21
  21. 21. Wie kommt das Icon aufs Tablet?~ DPS: ViewerBuilder starten22
  22. 22. 23
  23. 23. InhaltIcons fürs Tablet 1 Praxis21Agenda2 Wie kommt das Icon aufs Tablet? 22Die (schöne) Welt der Icons 3Wie gross denn nun? 4Wie gross denn nun? 5Guidlines (technische Seite) 6iOS übernimmt für uns: 7WebOS Android besonderheiten 8WindowsPhone besonderheiten 9Dateiformat10Farben11Umsetzung12Designprozess13Designprozess15Alle Icons sind quadratisch! 16Regeln:17Regeln:18Illustrator oder Photoshop? 19Plastizität2024

×