Å lage produktikoner er ikke så vanskelig som det kan virke ved første øyekast. Finn ut mer om å designe ditt første Android-appikon fra bunnen av!
Uansett hvilken markedsplass eller tjeneste en app distribueres gjennom, er appikonet det første en potensiell bruker vil legge merke til. Førsteinntrykket er av største betydning når du prøver å hente inn nye brukere, noe som betyr at ikoner er nøkkelkomponenter i enhver applikasjon. Og uavhengig av intensjonen med appen, bør det å lage et vakkert applikasjonsikon være en viktig del av utviklingsfasen til hver app. Selv om mange utviklere av tekniske applikasjoner overlater grafikken til dedikerte designere, forstår de grunnleggende design og anvendelse av dem er noe alle kan gjøre, gitt evne til å eksperimentere og analyse. App-ikoner er intet unntak!
Denne veiledningen går gjennom opprettelsen av et adaptivt ikon for en eksempel Android-app ved bruk av åpen kildekode-programvare. Selv om sluttresultatet kanskje ikke er i formatet du kanskje trenger, vil mange av designtipsene som er diskutert her gjelde på tvers av flere plattformer.
Etter utgivelsen av "adaptive ikoner" med Android Oreo, kan et appikon bestå av tre grunnleggende lag: et ugjennomsiktig bakgrunnslag, et forgrunnslag med støtte for åpenhet, og en maske som definerer formen på ikonet. Alle disse lagene er 108 x 108 dp i størrelse, selv om bare de indre 72 x 72 dp kan være synlige for brukeren; den andre regionen, skåret bort av masken på toppen, brukes til spesialeffekter i brukergrensesnittet for å få ikonet til å virke dynamisk. For de uinnvidde, dp eller skjermuavhengig piksel står som en måleenhet for hele Androids grensesnitt, og er definert til å være lik størrelsen på én piksel på en 160 punkter per tomme skjerm.)
Nick Butcher fra Google snakker om en sirkel på 66 dp i midten av ikonet som ingen maske kan klippe bort, kalt "trygg sone". Det er her hovedelementene i ikondesignet vårt vil sitte senere, når vi kommer til selve utformingen. Alt utover denne 33 dp-radiusen er kanskje ikke synlig i ikonet mens det har en formmaske på.
Siden ikoner er bedre å være vektorbilder på grunn av UI-skalering, trenger vi et vektorgrafikkredigeringsprogram for å lage ikonet vårt. Inkscape er åpen kildekode og et flott alternativ til dyrere programvare, så det vil være vårt valg for formålet med denne opplæringen. Jeg har også laget en prosjektfil tilgjengelig her som har den sikre sonen og Googles egen designnøkkellinje markert, og en kjekk lagmaske som lar oss forhåndsvise formen til ikonet.
Med prosjektfilen åpnet i Inkscape og Fyll og stryk (Shift+Ctrl+F), Eksporter PNG-bilde (Shift+Ctrl+E), og Lag (Shift+Ctrl+L)-paneler åpnes, vi er klare til å komme i gang. Lagpanelet er der kjøttet til prosjektet ligger, med Forgrunn og Bakgrunn lag ment å huse deres titulære komponenter, og Retningslinjer og Maske ment å slås av og på (ved å klikke på det lille øyeikonet ved siden av dem) for referanse.
Et ikon er et uttrykk for en apps identitet. Som sådan må den inkludere både karakteren til appens personlighet og plattformspesifikke designretningslinjer, som Androids Materialdesignspråk har å by på. For demonstrasjonsformål, la oss anta at vi jobber med en vær-app som bruker materielle elementer. Vi kan bruke det klassiske sol-og-sky-motivet for å informere en bruker om formålet med appen, og sette litt spinn videre på denne grunnleggende designen ved å bruke skygger og geometri for å få den til å passe godt inn i Android-miljøet.
Bakgrunn
La oss begynne med å sette opp bakgrunnen, som vil bestå av en blå himmel og en gul sol i midten. Snuing Maske usynlig, velger jeg og synliggjør Bakgrunnslag, fyll hele lerretet med Lag rektangler og firkanter verktøy (F4), og sett inn fyllfargen til rektangelet Fyll og stryk til 64B5F6FF (en lyseblå) i samsvar med Materialfargepalett. Jeg velger så Lag sirkler, ellipser og buer (F5)-verktøyet, og hold nede Shift og Ctrl, tegn en sirkel fra midten av nøkkellinjen til den nest største sirkelen, og sett fargen til FFEE58FF, som gir oss en varm liten sol. Det er alltid lurt å holde seg til grunnleggende geometri i enhver form for design, og spesielt Androids designspråk oppmuntrer til enkelhet. For å overholde materialretningslinjene gir jeg også solen en subtil skygge gjennom Filtre → Skygger og gløder → Drop Shadow.
Forgrunn
Kommer til forgrunn, Jeg tegner en gruppe skyer rundt solen ved å tegne sirkler fra omkretsen til andre sirkler, og gir dem alle en fyllfarge av EEEEEEFF. Jeg grupperer deretter sirklene på riktig måte ved å høyreklikke på flere objekter og velge Gruppe, og kjør drop shadow-generatoren på de to endelige formene jeg får til slutt. Snuing Retningslinjer usynlig og vekslende Forgrunn og Bakgrunn alternativt kan lagene i værappens ikon sees. Hvis appens ikon noen gang blir dratt over en startskjerm, vil skyene fosse mot en stillestående sol!
Resultat
Maske kan nå gjøres synlig og finjusteres med Rediger baner etter noder (F2) for å prøve å simulere forskjellige formmasker. Dessuten kan de to lagene eksporteres separat ved å bruke Eksporter PNG-bilde panel for bruk i Android Studio, og sammen for en Google Play-ikon.
Når du bygger et produktikon, er det alltid god praksis å prøve å ta en applikasjons formål, destillere den til dens mest abstrakte visuelle form, og representere den ved å bruke enkel geometri. Jo enklere en komponent i design er, jo bedre og mer pålitelig fungerer den vanligvis, og dette gjelder også i grafisk design. For de fleste formål, en objektform i forgrunnen og en solid farge eller et mønster i bakgrunnen (eller omvendt) fungerer helt fint, men som i vårt eksempel kan et annet lag med gjenstander brukes hvis du føler nødvendig; for mye stabling eller bruk av skygger vil bare komplisere ikonets design.
Du kan lese mer om ikondesign i Materialgrensesnitt på den offisielle Materialnettsted, og ta tak i gratis systemikoner for bruk i ikondesign fra samme nettside.