Vytváření ikon produktů není tak těžké, jak by se mohlo na první pohled zdát. Zjistěte více o návrhu své první ikony aplikace pro Android od začátku!
Bez ohledu na to, jakým tržištěm nebo službou je aplikace distribuována, její ikona aplikace je první věcí, které by si potenciální uživatel všimnul. První dojem je při snaze získat nové uživatele prvořadý význam, což znamená, že ikony jsou klíčovými součástmi jakékoli aplikace. A bez ohledu na záměr aplikace by vytvoření krásné ikony aplikace mělo být důležitou součástí fáze vývoje každé aplikace. Ačkoli mnoho vývojářů technických aplikací nechává grafiku na specializovaných designérech, rozumí tomu základy designu a jejich použití je něco, co může dělat každý, má-li talent experimentovat a analýza. Ikony aplikací nejsou výjimkou!
Tato příručka prochází vytvořením adaptivní ikony pro ukázkovou aplikaci pro Android pomocí softwaru s otevřeným zdrojovým kódem. Ačkoli konečný výsledek nemusí být ve formátu, který byste mohli požadovat, mnoho zde probíraných návrhových tipů bude platit pro různé platformy.
Po vydání „adaptivních ikon“ se systémem Android Oreo se ikona aplikace může skládat ze tří základních vrstev: neprůhledná vrstva pozadí, vrstva popředí s podpora transparentnostia a maska který určuje tvar ikony. Všechny tyto vrstvy mají velikost 108 x 108 dp, i když pro uživatele může být viditelná pouze vnitřní 72 x 72 dp; druhá oblast, odříznutá maskou nahoře, se používá pro speciální efekty v uživatelském rozhraní, aby ikona vypadala dynamicky. Pro nezasvěcené, dp nebo pixel nezávislý na displeji je měrnou jednotkou pro všechna rozhraní Androidu a je definována jako rovna velikosti jeden pixel na displeji s rozlišením 160 bodů na palec.)
Nick Butcher z Google mluví o kruhu 66 dp ve středu ikony, kterou nelze sejmout žádnou maskou, nazývanou „bezpečná zóna“. Zde budou hlavní prvky našeho designu ikon sedět později, až se dostaneme k samotnému navrhování. Cokoli za tímto poloměrem 33 dp nemusí být v ikoně viditelné, pokud má zapnutou masku tvaru.
Vzhledem k tomu, že ikony jsou kvůli škálování uživatelského rozhraní lepší jako vektorové obrázky, budeme k vytvoření naší ikony potřebovat editor vektorové grafiky. Inkscape je open-source a je skvělou alternativou k dražšímu softwaru, takže to bude naše volba pro účely tohoto tutoriálu. Navrhl jsem také soubor projektu k dispozici zde která má vyznačenou bezpečnou zónu a vlastní designovou linii Google a šikovnou masku vrstvy, která nám umožňuje zobrazit náhled tvaru ikony.
Se souborem projektu otevřeným v Inkscape a Plnit a tah (Shift+Ctrl+F), Export obrázku PNG (Shift+Ctrl+E) a Vrstvy (Shift+Ctrl+L) panely otevřené, jsme připraveni začít. Panel Vrstvy je místo, kde sídlí jádro projektu, s Popředí a Pozadí vrstvy určené k umístění jejich titulních součástí a Směrnice a Maska určené k zapínání a vypínání (kliknutím na ikonu malého oka vedle nich) pro referenci.
Ikona je vyjádřením identity aplikace. Jako takový musí zahrnovat jak charakter osobnosti aplikace, tak pokyny pro návrh specifické pro platformu, jako jsou ty pro Android Jazyk materiálového designu má co nabídnout. Pro účely demonstrace předpokládejme, že pracujeme na aplikaci počasí, která používá prvky Material. Mohli bychom použít klasický motiv slunce a mraků, abychom informovali uživatele o účelu aplikace, a trochu otočte se na tento základní design pomocí vržených stínů a geometrie, aby dobře zapadl do prostředí Androidu.
Pozadí
Začněme nastavením pozadí, které se bude skládat z modré oblohy a žlutého slunce uprostřed. Otáčení Maska neviditelný, vyberu a zviditelním Vrstva pozadí, vyplňte celé plátno Vytvořte obdélníky a čtverce (F4) a nastavte barvu výplně obdélníku Plnit a tah až 64B5F6FF (světle modrá) v souladu s Paleta barev materiálu. Poté vyberu Vytvářejte kružnice, elipsy a oblouky (F5) a podržte Shift a Ctrl, nakreslete kruh od středu klíčové linie k druhému největšímu kruhu a nastavte jeho barvu na FFEE58FF, což nám dává teplé malé slunce. Vždy je dobré držet se základní geometrie při jakémkoli typu navrhování a zejména designový jazyk Androidu podporuje jednoduchost. Abych vyhověl směrnicím o materiálu, propouštím slunci také jemný vržený stín Filtry → Stíny a záře → Vržený stín.
Popředí
Přicházím k Popředí, Nakreslím skupinu mraků kolem Slunce tak, že nakreslím kruhy z obvodů jiných kruhů a dám jim barvu výplně EEEEEEFF. Kruhy pak vhodně seskupím kliknutím pravým tlačítkem na více objektů a výběrem Skupinaa spusťte generátor vržených stínů na dvou konečných tvarech, které nakonec získám. Otáčení Směrnice neviditelné a přepínatelné Popředí a Pozadí alternativně lze vidět základní vrstvy ikony naší aplikace počasí. Pokud se ikona aplikace někdy přetáhne přes domovskou obrazovku, mraky se budou kaskádovat proti nehybnému slunci!
Výsledek
Maska lze nyní zviditelnit a vyladit Upravte cesty podle uzlů (F2) pro vyzkoušení a simulaci různých tvarových masek. Tyto dvě vrstvy lze také exportovat samostatně pomocí Export obrázku PNG panel pro použití v Android Studiua společně za a Ikona Google Play.
Při vytváření ikony produktu je vždy dobrým zvykem zkusit vzít účel aplikace, destilovat ji do její nejabstraktnější vizuální podoby a znázornit ji pomocí jednoduché geometrie. Čím jednodušší je jakákoliv komponenta v designu, tím lépe a spolehlivěji obvykle funguje, a to platí i v grafickém designu. Pro většinu účelů tvar objektu v popředí a plná barva nebo vzor v pozadí (nebo naopak) funguje dobře, ale stejně jako v našem příkladu lze použít další vrstvu objektů, pokud je plstí nutné; příliš mnoho vrstvení nebo použití vržených stínů pouze zkomplikuje design ikony.
Více o designu ikon si můžete přečíst v materiálových rozhraních na oficiálních stránkách Materiálový weba stáhněte si bezplatné systémové ikony pro použití v designu ikon stejný web.