Udało mi się w końcu wziąć za napisanie tej notki, wedle zasady lepiej późno niż później. Dobrze bo jeszcze w sprzedaży jest iPad 2 i iPhone 3gs. Jak optymalnie podejść do projektowania aplikacji uwzględniając ekrany o różnym zagęszczeniu pikseli? Poniżej przedstawię wskazówki korzystając z mojego doświadczenia w tym temacie.

Wyświetlacz Retina pojawił się po raz pierwszy w iPhonie 4. Z zagęszczeniem 326 ppi iPhone oferował obraz ostrzejszy niż wszystko co w tamtym czasie miała w rękawie konkurencja. Ilość pikseli na cal zwiększyła się czterokrotnie, rozdzielczość urządzenia podskoczyła z 320×480 do 640×960 pikseli.

Zwiększona ilość pikseli w iPhone 4. Keynote Apple.

Nie trzeba było długo czekać aby retina zawitała do iPada. Początkowa rozdzielczość iPada – 1024×768 wzrosła dwukrotnie do 2048×1536 pikseli. Chcąc udostępniać swoje aplikacje jak najszerszemu gronu użytkowników projektanci musieli zacząć wspierać dwa różne ekrany w przypadku iPhone’a jak i iPada.

Jak więc robić to dobrze?

Dla iPhone’a projektuje zaczynając od ekranu retina, ponieważ więcej szczegółów można otrzymać na tym ekranie. Tutaj bardzo ważna uwaga – projektując dany element – zwróćmy uwagę na jego wymiary.

  • Wymiary danego elementu dla retiny iPhone’a powinny być liczbami parzystymi.

Dlaczego? Ponieważ grafikę dla 3gs’a będziemy skalowali w dół, a więc wszystko zostanie podzielone przez 2. Załóżmy, że mamy przycisk o wymiarach 300x333px więc dzieląc tę wartość przez 2 otrzymamy 150×166,5 piksela, tym samym nasza grafika straci ostrość w pionie. Piksele połówkowe to na pewno nie to co chcemy otrzymać po przeskalowaniu projektu. Nie chcemy poprawiać projektu ręcznie.

Standardowa rozdzielczość iPada jest wystarczająca by pokazać większość graficznych smaczków, więc proponuje od tej rozdzielczości zacząć (1024×768) także ze względu na fakt, że mało który monitor ma większą rozdzielczość w pionie niż iPad z wyświetlaczem retina. Jeśli posiadamy monitor z większą rozdzielczością pionową należy tak dobrać obszar roboczy, by aplikacja w powiększeniu 100% była wyświetlana w całości na obszarze roboczym. Przy skalowaniu grafiki w górę nie musimy zwracać uwagi na wymiary danych elementów.

Projektujemy grafikę używając kształtów i ścieżek (shapes/paths) czyli elementów wektorowych. Należy pamiętać o przyjemnej opcji „snap to pixels” dla shape’ów, która pomoże nam w tym by kształty były zawsze ostre. Bez włączonego snapa rysowane ścieżki nie będą się lepić do siatki pikseli co zaowocuje rozmytymi krawędziami elementów.

Shape / Snap to pixels (grid)

Shape / Snap to pixels (grid)

Warstwy stylujemy z pomocą style warstw (blending options). Przy tworzeniu grafiki na takich podstawach, w czasie skalowania musimy zwracać uwagę jedynie na tekstury rastrowe. Przykładowo używając wzoru (pattern) w stylach warstw (blending options) o wielkości 100% po przeskalowaniu w górę, parametr ów otrzymuję wartość dwukrotnie większą, a nasza grafika ulega pogorszeniu/rozmyciu. Należy o tym pamiętać by wszystkie użyte patterny/tekstury poprawiać ręcznie po przeprowadzonym skalowaniu.

Tyle porad na dzisiaj, w następnej notce podzielę się wskazówkami które będzie można wykorzystać przy cięciu grafiki. Mam nadzieję, że będzie to szybciej niż za pół roku :-).