Vytváranie ikon produktov nie je také ťažké, ako by sa na prvý pohľad mohlo zdať. Zistite viac o navrhovaní svojej prvej ikony aplikácie pre Android od začiatku!
Bez ohľadu na to, cez aký trh alebo službu je aplikácia distribuovaná, jej ikona aplikácie je prvá vec, ktorú by si potenciálny používateľ všimnul. Prvý dojem je pri prilákaní nových používateľov mimoriadne dôležitý, čo znamená, že ikony sú kľúčovými komponentmi každej aplikácie. A bez ohľadu na zámer aplikácie by vytvorenie krásnej ikony aplikácie malo byť dôležitou súčasťou fázy vývoja každej aplikácie. Hoci mnohí vývojári technických aplikácií prenechávajú grafiku oddaným dizajnérom, rozumejú tomu základy dizajnu a ich použitie je niečo, čo môže urobiť každý, ak má talent na experimentovanie a analýza. Ikony aplikácií nie sú výnimkou!
Táto príručka prechádza vytvorením adaptívnej ikony pre vzorovú aplikáciu pre Android pomocou softvéru s otvoreným zdrojovým kódom. Aj keď konečný výsledok nemusí byť vo formáte, ktorý by ste mohli požadovať, veľa tu uvedených tipov na dizajn bude platiť na viacerých platformách.
Po vydaní „adaptívnych ikon“ v systéme Android Oreo môže ikona aplikácie pozostávať z troch základných vrstiev: nepriehľadná vrstva pozadia, vrstva popredia s podpora transparentnostia a maska ktorý určuje tvar ikony. Všetky tieto vrstvy majú veľkosť 108 x 108 dp, hoci používateľ môže vidieť iba vnútornú 72 x 72 dp; druhá oblasť, odrezaná maskou navrchu, sa používa na špeciálne efekty v rámci používateľského rozhrania, aby ikona vyzerala dynamicky. Pre nezasvätených, dp alebo pixel nezávislý na displeji predstavuje mernú jednotku pre celé rozhranie Androidu a je definovaná ako rovná veľkosti jeden pixel na displeji s rozlíšením 160 bodov na palec.)
Nick Butcher z Google hovorí o kruhu 66 dp v strede ikony, ktorú nemôže odňať žiadna maska, nazývaná „bezpečná zóna“. Toto je miesto, kde budú hlavné prvky nášho dizajnu ikon sedieť neskôr, keď sa dostaneme k samotnému dizajnu. Čokoľvek za týmto polomerom 33 dp nemusí byť na ikone viditeľné, keď má zapnutú masku tvaru.
Keďže ikony sú lepšie ako vektorové obrázky kvôli škálovaniu používateľského rozhrania, na vytvorenie našej ikony budeme potrebovať editor vektorovej grafiky. Inkscape je open source a je skvelou alternatívou k drahšiemu softvéru, preto bude našou voľbou pre účely tohto návodu. Navrhol som aj súbor projektu k dispozícii tu ktorá má vyznačenú bezpečnú zónu a kľúčovú líniu vlastného dizajnu Google a šikovnú masku vrstvy, ktorá nám umožňuje zobraziť ukážku tvaru ikony.
So súborom projektu otvoreným v Inkscape a Naplniť a ťahať (Shift+Ctrl+F), Exportovať obrázok PNG (Shift+Ctrl+E) a Vrstvy (Shift+Ctrl+L) panely otvorené, sme pripravení začať. Panel Vrstvy je miestom, kde sa nachádza jadro projektu, s Popredie a Pozadie vrstvy určené na umiestnenie ich titulárnych komponentov a Smernice a Maska určené na zapnutie a vypnutie (kliknutím na ikonu oka vedľa nich) ako referenciu.
Ikona je vyjadrením identity aplikácie. Ako taký musí zahŕňať charakter osobnosti aplikácie a pokyny pre dizajn špecifický pre platformu, ako napríklad Jazyk materiálového dizajnu má čo ponúknuť. Na účely demonštrácie predpokladajme, že pracujeme na aplikácii počasia, ktorá využíva prvky Material. Mohli by sme použiť klasický motív slnka a mrakov, aby sme informovali používateľa o účele aplikácie a trochu otočte sa na tento základný dizajn pomocou vrhnutých tieňov a geometrie, aby dobre zapadol do prostredia Androidu.
Pozadie
Začnime nastavením pozadia, ktoré bude pozostávať z modrej oblohy a žltého slnka v strede. Sústruženie Maska neviditeľné, vyberiem a zviditeľním Vrstva pozadia, vyplňte celé plátno Vytvorte obdĺžniky a štvorce (F4) a nastavte farbu výplne obdĺžnika Naplniť a ťahať až 64B5F6FF (svetlo modrá) v súlade s Paleta farieb materiálu. Potom vyberiem Vytvárajte kruhy, elipsy a oblúky (F5) a podržte Shift a Ctrl, nakreslite kruh od stredu kľúčovej čiary k druhému najväčšiemu kruhu a nastavte jeho farbu na FFEE58FF, čo nám dáva teplé malé slnko. Pri akomkoľvek navrhovaní je vždy dobré držať sa základnej geometrie a najmä dizajnový jazyk Androidu podporuje jednoduchosť. Aby som dodržal pokyny týkajúce sa materiálu, dávam slnku aj jemný tieň Filtre → Tiene a žiary → Vržený tieň.
Popredie
Prichádza do popredie, Nakreslím skupinu oblakov okolo Slnka tak, že nakreslím kruhy z obvodov iných kruhov a všetkým dám farbu výplne EEEEEEFF. Potom kruhy vhodne zoskupím kliknutím pravým tlačidlom myši na viacero objektov a výberom Skupinaa spustite generátor tieňov na dvoch konečných tvaroch, ktoré nakoniec získam. Sústruženie Smernice neviditeľné a prepínacie Popredie a Pozadie alternatívne je možné vidieť základné vrstvy ikony našej aplikácie počasia. Ak sa ikona aplikácie niekedy pretiahne cez domovskú obrazovku, oblaky sa budú skákať proti nehybnému slnku!
Výsledok
Maska teraz môže byť viditeľný a vyladený Upravte cesty podľa uzlov (F2) na vyskúšanie a simuláciu masiek rôznych tvarov. Taktiež je možné tieto dve vrstvy exportovať samostatne pomocou Exportovať obrázok PNG panel na použitie v Android Studio, a spolu za a Ikona Google Play.
Pri vytváraní ikony produktu je vždy dobrým zvykom pokúsiť sa vziať účel aplikácie, destilovať ju do jej najabstraktnejšej vizuálnej podoby a znázorniť ju pomocou jednoduchej geometrie. Čím je ktorýkoľvek komponent v dizajne jednoduchší, tým lepšie a spoľahlivejšie zvyčajne funguje, a to platí aj v grafickom dizajne. Pre väčšinu účelov je tvar objektu v popredí a plná farba alebo vzor v pozadí (alebo vice versa) funguje dobre, ale ako v našom príklade je možné použiť ďalšiu vrstvu predmetov, ak je plsť nevyhnutné; príliš veľa stohovania alebo použitie tieňov iba skomplikuje dizajn ikony.
Viac o dizajne ikon si môžete prečítať v materiálových rozhraniach na oficiálnom webe Webová stránka materiálua získajte bezplatné systémové ikony na použitie v dizajne ikon z ten istý web.