V posledních 6 dílech jsme se naučili základní pojmy, jak na samotnou tvorbu grafiky pro Android, ukázali jsme si, jak dělat skicy a modely, zkreslili jsme v grafickém programu aplikaci Vánočníček. Takže nám zbývají dvě poslední oblasti. A to jak grafiku rozřezat a strukturvat pro programátora a poslední díl se bude zabývat podpůrnými materiály jako jsou ikonky, bannery a widgety.
Nejprve rychlá teorie. Pokud máme hotový grafický design, máme rozkreslené všechny screeny, včetně všech stavů jednotlivých komponent. Jsme s designem spokojeni, přišel ten pravý čas na rozřez jednotlivé grafiky. Již před kreslením Vánočníčku jsme si rozvrhli, že naše nejvyšší podporovaná densita je HDPI, kreslili jsme tedy v rozlišení 480x800px, takže i v tomto rozlišení si ukážeme, jak design nařezat. Pokud bychom chtěli, jednotlivé komponenty si můžeme nazmenšovat a nařezat i MDPI a LDPI, ale to nebude obsahem tohoto článku.
Znám dvě varianty řezání. První je o tom, že pro každou komponenentu si udělám nové plátno o rozměrech té komponenty a uložím obraz jako PNG. Tahle technika se dá praktikovat u menších projektů max do cca 15-20 resourců. Pak je proces ukládání únavný, s různými stavy dochází k chybám vlivem naší nepřesnosti a chybí zpětná editovatelnost. Například, pokud změníme design jednoho prvku a chceme ho rozkopírovat na prvky stejného typu (typicky ikonky, tlačítka..), tak musíme všechny řezy dělat odznova. Téhle variantě se dnes vyhneme a ukážeme si efektivnější postup.
Jdeme na to. Otevřte si design jednotlivých screenů Vánočníčku a vytvořte si ještě jedno plátno, pro naše účely bude stačit 1600x1000px. Toto nové plátno nám bude sloužit jako rozřezové PSD. Do něho budeme postupně přetahávat jednotlivé komponenty, rovnat je a připravovat řezy. Než tak, ale začnete dělat, je potřeba se zamyslet, které komponenty budou řešené programově a které jako obrázek -> PNG. Takže: obsahové texty – psané nativním fontem se řezat nebudou, ani plochy, které jsou vyplněné solid barvou není potřeba řezat. Programátor má totiž několik nástrojů, díky kterým zvládne jednoduché vybarvení a nakreslení tvaru (kruh, čtverec, obdelník, elipsa). Aby to zvládl, potřebuje znát jen hex opis barvy (např.: #000000), velikost fontu, řádkování, barva a směr stínu. Vše ostatní je potřeba připravit jako PNG. Naše aplikace Vánočníček neobsahuje „složité“ komponenty, takže tvorbu 9patch taky necháme do jiného článku.
Začínám vždy od prvního screenu. Což je pro náš příklad Splash screen. Ten bychom chtěli udělat tak, že po tapnutí na jakékoliv místo ve screenu se zobrazí Home screen. To znamená, že na jednotlivých komponentách, které obsahuje nám nezáleží a také víme, že komponenty, které se na něm vyskytují, se už v celé aplikaci (v této velikosti) neobjeví. Takže nejjednodušší ho bude vyříznout celý. Přetáhněte ho na nové plátno a zarovnejte na mřížku (ta musí být stejná jako v designu screenů, pro náš příklad tedy 8x8px.).
Vezmeme si nástroj pro řezání (C) a obtáhneme celou vrstvu splash screenu, poté klikneme pravým tlačítkem a dáme upravit volby řezu, kde si přejmenuje řez na „bg_screen“. Na jménu nezáleží, důležité je mít jasno v terminologii s programátorem. Já jsem zvyklý dávat prefixy: bg = pozadí, btn = tlačítko, ic = ikona. Ale není to dogma. Možná Vás napadlo, že pokud řízneme takhle celý splash screen, tak si zavíráme cestu k lokalizaci do jiných jazyků. Řešením by bylo nařezat splash screeny v různých jazycích (náročnost na velikost resources) nebo splash screen rozdělit na více komponent a ty lokalizovat, což zase bude více práce pro programátora. Je to vždycky na zvážení.
Asi Vám je jasné, jak celý proces bude dále pokračovat. Ano, nyní další screen je Home, ze kterého si přetáhneme pozadí action baru. Dále zvlášť logo. Důvod proč zvlášť je ten, že bychom ho chtěli udělat s možností na tapnutí => akce návrat na home screen (akce skrz celou aplikaci). Dále je potřeba si přenést a připravit k řezu všechny ikonky a to včetně všech stavů.
Na komponenty, které mají více stavů si dejte obzvláště pozor, musí být správně zarovnané, tak aby třeba po tapnutí na ikonku její pressed stav neuskočil o 3px apod. Je také potřeba si dát pozor na stíny, tak aby nám vytvořený řez neodřízl kousek grafiky. Proto třeba prvky, které není potřeba na px přesně k něčemu pasovat, ořezáváme s dostatečným prostorem. Druhý dúvod je ten, že programátor pak nastaví tapnutí na celou plochu (aby se uživatel nemusel napřesno trefovat třeba na ikonku apod.). Co se týče terminologie, tak je opět zvykem pojmenovávat jednotlivé stavy jednoho prvku jako třeba: ic_home_normal, ic_home_pressed, ic_home_focused atd.
Tahle nějak by mohlo tedy vypadat rozřezové PSD pro Vánočníček. Ve kterém neuvažujeme lokalizaci a jinou densitu než HDPI. PSD dávám ke stažení.
Zbyvá nám tedy jednotlivé řezy uložit. Tuto funkci v PS najdeme: „Soubor => Uložit pro web a zařízení“. Kde se nám zobrazí rozřezové okno. V tomto dialogu můžeme jednotlivé řezy označovat, zvolit cílový formát a pracovat s náhledem. My chceme řezat do PNG-24 a chceme mít zaplou průhlednost. Dáme uložit a vybereme možnost „všechny uživatelské řezy“. Poté uložíme. A je to, máme 13 PNG souborů.
Aby bylo programátorovi hned jasné, že jsme mu připravili resources pro hdpi, vytvoříme mu adresářovou strukturu, kterou bude moc dobře znát „res\drawable-hdpi“.
To je dnes vše. Jak je vidno, při řezání je už nutná komunikace s programátorem a mít na pixel dobře připravený designy jednotlivých screenů. Čím je práce přesnější, tím si ušetříme čas při tvorbě řezů. Díky rozřezovému PSD má člověk možnost vidět třeba ikonky jednoho typu vedle sebe a ještě doupravit jejich barvu nebo styl, což se pak odrazí v jednotnosti designu a kompaktnosti celé aplikace.
