Ustvarjanje ikon izdelkov ni tako težko, kot se morda zdi na prvi pogled. Izvedite več o oblikovanju svoje prve ikone aplikacije za Android iz nič!
Ne glede na to, prek katere tržnice ali storitve se aplikacija distribuira, je njena ikona aplikacije prva stvar, ki jo morebitni uporabnik opazi. Prvi vtis je izrednega pomena pri pridobivanju novih uporabnikov, kar pomeni, da so ikone ključni sestavni deli vsake aplikacije. In ne glede na namen aplikacije bi moralo biti ustvarjanje čudovite ikone aplikacije pomemben del razvojne faze vsake aplikacije. Čeprav mnogi razvijalci tehničnih aplikacij prepuščajo grafiko namenskim oblikovalcem, razumevanje osnove oblikovanja in njihova uporaba je nekaj, kar lahko naredi vsak, če ima smisel za eksperimentiranje in analizo. Ikone aplikacij niso izjema!
Ta vodnik obravnava ustvarjanje prilagodljive ikone za vzorčno aplikacijo za Android z uporabo odprtokodne programske opreme. Čeprav končni rezultat morda ni v obliki, ki bi jo morda potrebovali, bo veliko oblikovalskih nasvetov, o katerih govorimo tukaj, veljalo za več platform.
Po izdaji »prilagodljivih ikon« s sistemom Android Oreo je lahko ikona aplikacije sestavljena iz treh temeljnih plasti: neprozoren sloj ozadja, plast v ospredju z podpora preglednostiin a maska ki določa obliko ikone. Vsi ti sloji so veliki 108 x 108 dp, čeprav je lahko uporabniku viden le notranji 72 x 72 dp; druga regija, odrezana z masko na vrhu, se uporablja za posebne učinke v uporabniškem vmesniku, da je ikona videti dinamična. Za nepoznavalce, dp oz piksel, neodvisen od zaslona je merska enota za ves Androidov vmesnik in je opredeljena kot enaka velikosti en piksel na zaslonu s 160 pikami na palec.)
Nick Butcher iz Googla govori o krogu 66 dp v središču ikone, ki je ne more odstraniti nobena maska, imenovano »varno območje«. Tu bodo kasneje, ko se lotimo dejanskega oblikovanja, glavni elementi naše zasnove ikon. Vse, kar presega polmer 33 dp, morda ne bo vidno na ikoni, medtem ko ima masko oblike.
Ker je za ikone bolje, da so vektorske slike zaradi skaliranja uporabniškega vmesnika, bomo za izdelavo naše ikone potrebovali urejevalnik vektorske grafike. Inkscape je odprtokodna in odlična alternativa dražji programski opremi, zato jo bomo izbrali za namene te vadnice. Oblikoval sem tudi projektno datoteko na voljo tukaj ki ima označeno varno območje in Googlovo lastno oblikovalsko tipko ter čudovito masko sloja, ki nam omogoča predogled oblike ikone.
Z odprto projektno datoteko v Inkscapeu in datoteko Polnjenje in poteza (Shift+Ctrl+F), Izvozi sliko PNG (Shift+Ctrl+E) in Plasti (Shift+Ctrl+L) plošče so odprte, pripravljeni smo za začetek. Plošča Sloji je bistvo projekta, z Ospredje in Ozadje plasti, ki naj bi hranile njihove naslovne komponente, in Smernice in Maska ki jih je mogoče vklopiti in izklopiti (s klikom na ikono očesca poleg njih) za referenco.
Ikona je izraz identitete aplikacije. Kot taka mora vključevati značaj osebnosti aplikacije in smernice oblikovanja, specifične za platformo, kot so smernice za Android Jezik materialnega oblikovanja ponuja. Za namene predstavitve predpostavimo, da delamo na vremenski aplikaciji, ki uporablja materialne elemente. Uporabili bi lahko klasičen motiv sonca in oblakov, da bi uporabnika obvestili o namenu aplikacije, in nekoliko zavrtite to osnovno zasnovo z uporabo padajočih senc in geometrije, da se dobro zlije z okoljem Android.
Ozadje
Začnimo z nastavitvijo ozadja, ki bo sestavljeno iz modrega neba in rumenega sonca v sredini. Obračanje Maska nevidno, izberem in naredim vidno Plast ozadja, napolnite celotno platno z Ustvarite pravokotnike in kvadrate (F4) in nastavite barvo polnila pravokotnika Polnjenje in poteza do 64B5F6FF (svetlo modra) v skladu z Barvna paleta materiala. Nato izberem Ustvarite kroge, elipse in loke (F5) in držite tipki Shift in Ctrl, narišite krog od središča ključne črte do drugega največjega kroga in nastavite njegovo barvo na FFEE58FF, kar nam daje malo toplo sonce. Pri kakršnem koli načrtovanju se je vedno dobro držati osnovne geometrije, jezik oblikovanja Androida pa spodbuja preprostost. Da bi bil skladen s smernicami za materiale, dam soncu tudi subtilno senco Filtri → Sence in sijaji → Drop Shadow.
Ospredje
Prihajam ospredje, Narišem skupino oblakov okoli sonca tako, da narišem kroge iz obodov drugih krogov in jim dam barvo polnila EEEEEEFF. Nato kroge ustrezno združim tako, da z desno miškino tipko kliknem več predmetov in izberem skupina, in zaženem generator padajoče sence na dveh končnih oblikah, ki ju na koncu dobim. Obračanje Smernice neviden in preklopen Ospredje in Ozadje lahko pa si ogledate sestavne plasti ikone naše vremenske aplikacije. Če ikono aplikacije kdaj povlečete po domačem zaslonu, bodo oblaki padali proti mirujočemu soncu!
Rezultat
Maska zdaj lahko postane vidna in z njo prilagajate Uredite poti po vozliščih (F2), da poskusite simulirati maske različnih oblik. Obe plasti je mogoče izvoziti ločeno z uporabo Izvozi sliko PNG ploščo za uporabo v Android Studiu, in skupaj za a Ikona Google Play.
Pri ustvarjanju ikone izdelka je vedno dobra praksa, da poskusite vzeti namen aplikacije, jo destilirati do njene najbolj abstraktne vizualne oblike in jo predstaviti z uporabo preproste geometrije. Bolj ko je katera koli komponenta v oblikovanju preprosta, bolje in zanesljiveje običajno deluje, kar velja tudi za grafično oblikovanje. Za večino namenov je oblika predmeta v ospredju in polna barva ali vzorec v ozadju (oz obratno) deluje povsem v redu, toda kot v našem primeru je mogoče uporabiti drugo plast predmetov, če jih čutite potrebno; preveč zlaganja ali uporaba padajočih senc bo samo zapletlo zasnovo ikone.
Več o oblikovanju ikon lahko preberete v materialnih vmesnikih na uradnem Spletna stran materialain zgrabite brezplačne sistemske ikone za uporabo pri oblikovanju ikon isto spletno stran.