Met de komst van de iPhone 4(S) en de nieuwe iPad moet je er als designer rekening mee houden dat je alle benodigde afbeeldingen in tweevoud moet creëren. Ondanks dat Apple heeft gekozen voor een exacte verdubbeling van de resoluties kan dit toch nog een aanzienlijke hoeveelheid werk opleveren. Gelukkig is dit proces met een aantal tips best werkzaam te houden.
Start met de standaard afmetingen en gebruik geen bitmaps maar enkel vectoren
Begin met ontwerpen in een photoshop document met de afmetingen voor een niet-retina display (voor een iPhone dus 320 x 480 pixels). Laat de pixels per inch altijd op 72 ppi staan zodat bij het knippen en plakken tussen documenten de afbeeldingen de zelfde grootte houden.
Wanneer je uitsluitend gebruik maakt van vectoren in het ontwerp kan je tijdens het werk altijd wisselen tussen de kleine en retina versie. Simpele shapes kan je in photoshop maken met de shape tool. Gebruik bij voorkeur de “Rectangle Tool” of de “Rounded Rectangle Tool” en zorg ervoor dat snap to pixels aan staat. Zo weet je zeker dat je shapes er strak uit komen te zien en en er niet geblurd uitkomen op je device. De “Elipse Tool” kan niet ‘snappen’ naar pixels maar gelukkig kan je ook de “Rounded Rectangle Tool” met een grote radius gebruiken om cirkels te maken.
Ingewikkeldere vormen kan je eerst in illustrator maken. Om in illustrator pixel precieze paths te maken kan je het best de units van illustrator op pixels zetten (Illustrator > Preferences > Units).
Selecteer een path en knip en plak deze vervolgens in photoshop. Zorg ervoor dat de hoogte en breedte van je paths altijd hele getallen zijn en niet bijvoorbeeld 20,12 bij 34,19 pixels.
Plak de vormen als shape-layers in photoshop en controleer goed of ze goed zijn uitgelijnd. Op de een of andere manier wil photoshop de paths uit illustrator nog wel eens een halve pixel verkeerd uitlijnen. Ook dit leid weer tot onscherpe afbeeldingen. Mocht dit geburen dan kan je het best een beetje heen en weer scrollen en opnieuw plakken. Net zo lang totdat zowel de horizontale als verticale uitlijning goed is.
Gebruik een action om makkelijk te wisselen tussen de 2 versies.
Als je uitsluitend gebruik maakt van shapes kan je je ontwerp nu gewoon schalen naar de retina versie en weer terug zonder dat er kwaliteitsverlies optreed. We hebben hier een action voor aangemaakt, deze kan je hier downloaden.
De action maakt een history snapshot aan voordat er geschaald wordt. Mocht er iets misgaan dan kan je altijd nog een stap terug. Met deze action kan je makkelijk wisselen tussen de 2 versies en zo controleren of het design er in beide versies goed uit ziet.
Werk zoveel mogelijk in de ‘kleine’ versie
Wanneer je layer styles gebruikt om je shapes een mooi grafisch sausje te geven let er dan op dat je in de ‘kleine’ versie werkt. Je kan ook in de retina versie werken maar dan kom je in problemen wanneer je bijvoorbeeld een stroke van 3 pixels gebruikt. Wanneer je vervolgens je ontwerp terug schaalt naar de ‘kleine’ versie kan photoshop de stroke niet op 1,5 pixels zetten wordt het 2 of 4 px. Wanneer je later dan weer naar de retina versie schaalt zal het dus 4 of 6 px worden en niet 3 px zoals in het origineel.
Deze stappen zorgen ervoor dat je altijd strakke afbeeldingen maakt voor zowel de oude als de nieuwe retina displays. Veel plezier ermee!
Loading ...
Laatste reacties