Stvaranje ikona proizvoda nije tako teško kao što se na prvi pogled čini. Saznajte više o dizajniranju svoje prve ikone Android aplikacije od nule!
Bez obzira kroz koje se tržište ili uslugu aplikacija distribuira, ikona aplikacije je prva stvar koju bi potencijalni korisnik primijetio. Prvi dojam je od najveće važnosti kada pokušavate pridobiti nove korisnike, što znači da su ikone ključne komponente svake aplikacije. I, bez obzira na namjeru aplikacije, stvaranje lijepe ikone aplikacije trebalo bi biti važan dio faze razvoja svake aplikacije. Iako mnogi programeri tehničkih aplikacija prepuštaju grafiku posvećenim dizajnerima, razumijevajući osnove dizajna i njihova primjena nešto je što svatko može učiniti, ima li smisla za eksperimentiranje i analiza. Ikone aplikacija nisu iznimka!
Ovaj vodič prolazi kroz izradu prilagodljive ikone za primjer Android aplikacije pomoću softvera otvorenog koda. Iako krajnji rezultat možda nije u formatu koji bi vam mogao biti potreban, mnogi savjeti o dizajnu o kojima se ovdje raspravlja bit će istiniti na više platformi.
Nakon izdavanja "adaptivnih ikona" s Androidom Oreo, ikona aplikacije može se sastojati od tri temeljna sloja: neprozirni pozadinski sloj, sloj prednjeg plana s podrška transparentnosti, i a maska koji definira oblik ikone. Svi ovi slojevi su veličine 108 x 108 dp, iako samo unutarnji 72 x 72 dp može biti vidljiv korisniku; drugo područje, odrezano maskom na vrhu, koristi se za posebne efekte unutar korisničkog sučelja kako bi ikona izgledala dinamično. Za neupućene, dp ili piksel neovisan o prikazu predstavlja mjernu jedinicu za sva sučelja Androida, a definirana je kao jednaka veličini jedan piksel na zaslonu od 160 točaka po inču.)
Nick Butcher iz Googlea govori o krugu od 66 dp u središtu ikone koju nijedna maska ne može skinuti, naziva se "sigurna zona". Ovo je mjesto gdje će se kasnije nalaziti primarni elementi našeg dizajna ikona, kada dođemo do stvarnog dizajna. Sve izvan polumjera od 33 dp možda neće biti vidljivo na ikoni dok ima uključenu masku oblika.
Budući da je bolje da ikone budu vektorske slike zbog skaliranja korisničkog sučelja, trebat će nam uređivač vektorske grafike da napravimo našu ikonu. Inkscape je open-source i izvrsna alternativa skupljem softveru, pa će to biti naš izbor za potrebe ovog vodiča. Također sam dizajnirao datoteku projekta dostupan ovdje koji ima označenu sigurnu zonu i Googleov vlastiti dizajn, te izvrsnu masku sloja koja nam omogućuje pregled oblika ikone.
S projektnom datotekom otvorenom u Inkscapeu i Ispuna i potez (Shift+Ctrl+F), Izvoz PNG slike (Shift+Ctrl+E) i Slojevi (Shift+Ctrl+L) ploče su otvorene, spremni smo za početak. Ploča Slojevi mjesto je gdje se nalazi srž projekta, s Prednji plan i Pozadina slojevi namijenjeni za smještaj njihovih titularnih komponenti, i Smjernice i Maska namijenjeni za uključivanje i isključivanje (klikom na ikonu malog oka pokraj njih) za referencu.
Ikona je izraz identiteta aplikacije. Kao takva, mora sadržavati i karakter osobnosti aplikacije i smjernice za dizajn specifične za platformu, poput onih za Android Jezik materijalnog dizajna nudi. U svrhu demonstracije, pretpostavimo da radimo na vremenskoj aplikaciji koja koristi materijalne elemente. Mogli bismo upotrijebiti klasični motiv sunca i oblaka da informiramo korisnika o svrsi aplikacije i staviti malo vrtite se na ovom osnovnom dizajnu koristeći sjene i geometriju kako bi se dobro uklopio u svoje Android okruženje.
Pozadina
Počnimo s postavljanjem pozadine, koja će se sastojati od plavog neba i žutog sunca u sredini. Okretanje Maska nevidljiv, odabirem i činim vidljivim Pozadinski sloj, ispunite cijelo platno s Napravite pravokutnike i kvadrate alat (F4) i postavite boju ispune pravokutnika Ispuna i potez do 64B5F6FF (svijetloplava) u skladu s Paleta boja materijala. Zatim odabirem Napravite krugove, elipse i lukove (F5), držeći Shift i Ctrl, nacrtajte krug od središta ključne linije do drugog najvećeg kruga i postavite njegovu boju na FFEE58FF, što nam daje malo toplo sunce. Uvijek je dobro držati se osnovne geometrije u bilo kojoj vrsti projektiranja, a Androidov dizajnerski jezik posebice potiče jednostavnost. Kako bih bio u skladu sa smjernicama za materijale, suncu također dajem suptilnu sjenu Filtri → Sjene i sjaj → Sjena.
Prednji plan
Dolaziti do prvi plan, Crtam grupu oblaka oko sunca crtajući krugove s oboda drugih krugova i svima im dajem boju ispune EEEEEEFF. Zatim grupiram krugove na odgovarajući način desnim klikom na više objekata i odabirom Skupina, i pokrenite generator sjene na dva konačna oblika koja dobijem na kraju. Okretanje Smjernice nevidljiv i promjenjiv Prednji plan i Pozadina alternativno, mogu se vidjeti sastavni slojevi ikone naše vremenske aplikacije. Ako se ikona aplikacije ikada povuče preko početnog zaslona, oblaci će padati prema suncu koje miruje!
Proizlaziti
Maska sada se može učiniti vidljivim i podešavati Uredite staze po čvorovima (F2) kako biste pokušali simulirati različite maske oblika. Također, dva se sloja mogu zasebno izvesti pomoću Izvoz PNG slike ploča za korištenje u Android Studiju, i zajedno za a Ikona Google Play.
Prilikom izrade ikone proizvoda, uvijek je dobra praksa pokušati uzeti svrhu aplikacije, destilirati je do njenog najapstraktnijeg vizualnog oblika i predstaviti to pomoću jednostavne geometrije. Što je neka komponenta u dizajnu jednostavnija, obično radi bolje i pouzdanije, a to vrijedi i za grafički dizajn. Za većinu namjena, oblik objekta u prvom planu i puna boja ili uzorak u pozadini (ili obrnuto) radi sasvim dobro, ali kao u našem primjeru, može se koristiti još jedan sloj objekata ako se osjeti potrebno; previše slaganja ili korištenja padajućih sjena samo će zakomplicirati dizajn ikone.
Više o dizajnu ikona možete pročitati u materijalnim sučeljima na službenoj stranici Web stranica materijalai preuzmite besplatne ikone sustava za korištenje u dizajnu ikona ista web stranica.