Icons fürs Tablet

Embed Size (px)

Text of Icons fürs Tablet

  • 1Icons frs Tablet

    Heike Koch

    DIGICOMP Publishing Day 2012

    Donnerstag, den 15. Mrz 2012

  • 2Agenda

    Die schne Welt der Icons

    Technischen Voraussetzungen

    Was mssen wir beim Design beachten?

    Unterschiede Plattformen (iOS, WindowsPhone, Android etc)

    Erstellung ein Icon frs iPad oder iPhone

    Welche Programme werden genutzt?

    Und zu guter Letzt: Wie kommt das Icon dann aufs iPad?

  • 3Die (schne) Welt der Icons

  • 4Wie 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)

  • 5Wie gross denn nun?

    Art bis iPad 2 ab iPad 3

    Kleines Icon fr Spotlight-Suche50 x 50 fr Suchergebnisse 29 x 29 fr Einstellungen

    100 x 100 fr Suchergebnisse 58 x 58 fr 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 (lngere Seite) mind. 1024 (lngere Seite)

  • 6Guidlines (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 fr 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

  • 7iOS bernimmt fr uns:

    ~ die abgerundeten Ecken selbststndig

    ~ den halbtransparenten Glanzpunkt (Lichteinfall von oben Mitte)

    ~ leichten Schlagschatten

    ~ tropfenartige Reflexion (das lsst sich abschalten im Projekt)

  • 8WebOS & Android besonderheiten

    ~ hnlich wie iOS

    ~ Lichteinfall oben mittig

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

    (Hintergrund knnte wegfallen)

  • 9WindowsPhone besonderheiten

    ~ Hintergrund kann weiss, schwarz oder eine von 10 vorgegebenen

    Akzentfarben sein

    ~ bei farbigen Hintergrnden darf das Symbol ausschliesslich weiss sein

    ~ nach unten muss noch gengend Platz bleiben fr den namen, den

    Windows selbststndig einfgt

  • 10

    Dateiformat

    ~ alle Icons PNG

    ~ Standard RGB/A 32 Bit

    ~ (8 Bit fr Rot, Grn, Blau + 8 Bit fr Alphakanal)

    ~ Keine Transparenzen fr iOS

  • 11

    Farben

    RGB

    Graustufen

  • 12

    Umsetzung

    Ideal: Entwurf des Icons auf Papier

    Copyright der Grafiken, Bilder, Schriften abklren

    Umsetzung in Illustrator

    Verfeinerung in Photoshop

    Verffentlichung

  • 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, prgnant, themenbezogen

    ~ besondere Dinge als Detail darstellen

    ~ Fotos eignen sich nur bedingt

  • 16

    Alle Icons sind quadratisch!

    Gestaltung in Quadraten:

    ~ Stabilitt, Sicherheit, absolute Geometrie

    ~ Quadrate sind Grundbausteine und ordnungsgebend

    Aber / Und:

    ~ Dynamik lsst sich durch die innenliegenden Formen geben

  • 17

    Regeln:

    ~ Nimm einen Grafiker! Du musst nicht alles allein knnen.

    ~ Das Icon muss schnell erfassbar sein (Testen!)

    ~ Halt es einfach, reduziere soweit wie mglich.

    ~ 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?

    Grundstzlich: was dem Designer lieber ist und besser liegt

    Photoshop Illustrator + berwiegend Pixel Icon + Vektoren

    + verlustfrei skalierbar

    + SmartFilter lassen sich spter anpassen + Effekte lassen sich spter anpassen

    + Fllmethoden + Ebeneneinstellungen+ Zeichenstift, Flchen, Farben + Zeichenstift, Flchen, Farben, Pathfinder

  • 20

    Plastizitt

    ~ durch Schatten

    ~ durch Farbverlufe

    ~ Transparenzen etc.

    ~ Spiegelungen und glasartige Highligts gehen leider etwas unter bei

    iOS durch die iOS-Effektberlagerung

  • 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 gewnschten Gren

  • 22

    Wie kommt das Icon aufs Tablet?

    ~ DPS: ViewerBuilder starten

  • 23

  • 24

    Inhalt

    Icons frs Tablet 1

    Agenda 2

    Die (schne) Welt der Icons 3

    Wie gross denn nun? 4

    Wie gross denn nun? 5

    Guidlines (technische Seite) 6

    iOS bernimmt fr 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

    Plastizitt 20

    Praxis 21

    Wie kommt das Icon aufs Tablet? 22