Share
Hva du skal skapeI dagens veiledning skal vi gjøre noen små endringer i vårt vanlige program, og takle et emne som jeg har ønsket å gjøre lenge. Hvis du ikke har funnet det ut av tittelen, vel, skal vi lage fem enkle ikoner som du kan slå til Android-launcher-ikoner for fremtidige apps som du kan opprette eller være involvert i å lage.
Når det gjelder prosessen, bruker vi ditt grunnleggende utvalg av geometriske former kombinert med Juster-panelet og noen andre verktøy som du sannsynligvis allerede jobber med hver dag.
Når det blir sagt, ta en fersk del kaffe og la oss komme i gang.
Å, og ikke glem at du alltid kan utvide prosjektet ved å gå over til GraphicRiver, hvor du finner mange fantastiske Android-designet ikonpakker, bare venter på å bli klikket på.
Vil du foretrekke å lære via videoformat? Se videoopplæringen over på Envato Tuts + YouTube-kanalen:
Siden jeg gjetter at du allerede har Illustrator oppe i bakgrunnen, ta den opp og la oss sette opp en Nytt dokument (Fil> Ny eller Kontroll-N) ved hjelp av følgende innstillinger:
Og fra Avansert tab:
Raskt tips: Noen av dere har kanskje lagt merke til at Juster nye objekter til pikselruten alternativet mangler, noe som skyldes at jeg kjører den nye CC 2017-versjonen av programvaren, hvor det er gjort store endringer på måten Illustratorhåndterer måtene som snaps til det underliggende Pixel Grid.
Siden vi skal lage ikonene ved hjelp av en piksel-perfekt arbeidsflyt, vil vi sette opp en fin liten Nett slik at vi kan ha full kontroll over våre former - det vil si hvis vi kjører den eldre versjonen av programvaren.
Gå til Rediger> Innstillinger> Guider og rutenett undermenyen, og juster følgende innstillinger:
Raskt tips: Du kan lære mer om grids ved å lese dette grundige stykket om hvordan Illustrators Grid System fungerer.
Når vi har satt opp vårt egendefinerte rutenett, må alt vi trenger for å sikre at våre figurer ser skarpe ut, gjør det mulig Snap to Grid alternativ funnet under Utsikt menyen, som vil forvandle seg til Snap til Pixel hver gang du går inn Pixel Preview modus.
Nå, hvis du er ny på hele "piksel-perfekt arbeidsflyt", anbefaler jeg på det sterkeste at du går gjennom hvordan jeg lager en piksel-perfekt kunstoppgave, som vil hjelpe deg med å utvide dine tekniske ferdigheter på kort tid.
Med det nye dokumentet opprettet, vil det være en god ide å strukturere prosjektet vårt ved hjelp av et par lag, da denne måten vi kan opprettholde en jevn arbeidsflyt ved å fokusere på ett ikon om gangen.
Når det blir sagt, ta opp lag panel, og opprett totalt seks lag, som vi vil endre navn på som følger:
De Referansegitter (eller Base Grids) er et sett med nøyaktig avgrensede referanseflater, som tillater oss å bygge våre ikoner ved å fokusere på størrelse og konsistens.
Vanligvis bestemmer størrelsen på gridene størrelsen på de faktiske ikonene, og de bør alltid være den første avgjørelsen du tar på deg, og start et nytt prosjekt, siden du alltid vil starte fra den minste mulige størrelsen og bygge videre på det.
Nå, siden vi skal lage ikonene med det formål å ha dem brukt i selve Android OS, må vi følge deres anbefalte størrelse og format retningslinje og sette opp et tilpasset rutenett av 96 x 96 px med en all-around 4 px padding.
Begynn med å låse alt annet enn referansegitterlaget, og ta deretter tak i Rektangelverktøy (M) og opprett en 96 x 96 px oransje (# F15A24), som vil bidra til å definere den totale størrelsen på ikonene våre.
Legg til en annen mindre 88 x 88 px en (#FFFFFF) som vil fungere som vårt aktive tegneområde, og gir oss det hele 4 px padding.
Grupper de to rutene som komponerer referansegitteret ved hjelp av Kontroll-G tastaturgenvei, og opprett deretter tre kopier på en avstand av 24 px fra hverandre, sørg for å justere dem til sentrum av artboard.
Når du er ferdig, låser du det nåværende laget og går videre til neste, hvor vi begynner å jobbe med vårt første ikon.
Vi skal starte prosjektet ved å lage batteriikonet, som kan brukes til en strømbesparende app, eller til og med en statusindikator en siden det er ganske grunnleggende.
Når det er sagt, sørg for at du er på riktig lag (det ville være det andre) og så zoom inn på det første referansegitteret slik at vi kan komme i gang.
Begynn med å lage ikonets bakgrunn ved hjelp av en 88 x 88 px sirkel, som vi vil farge ved hjelp av # 00C853, sentrum tilpasse det til det underliggende aktive tegneområdet etterpå.
Raskt tips: siden Google var hyggelig nok til å sette ut en Material Design retningslinje for farger, har jeg endte opp med å blande og matche et par verdier som jeg har brukt til bakgrunnene.
Opprett batteriets hoveddel med en 24 x 40 px rektangel, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter sentrere seg til den større sirkelen, i en avstand på 20 px fra den nederste kanten.
Vri formen som vi nettopp har opprettet til en disposisjon, ved å bla den Fylle med dens Stroke (Shift-X), og deretter sette sin Vekt til 4 px og dets Hjørne til Round Join, alt fra innsiden av Stroke panel.
Opprett den første tilstandsindikatorlinjen ved å bruke enten a 12 x 4 px rektangel (#FFFFFF) eller a 12 px bredt slag (#FFFFFF) med en 4 vekt Vekt, som vi senterer justere til batteriets kropp, forlater a 4 px gapet rundt det.
Legg til to flere indikatorfelter, som vi stabler vertikalt i en avstand på 4 px fra hverandre, gruppere dem sammen (Kontroll-G) etterpå.
Avslutt ikonet ved å legge til toppdekselet, som vi vil opprette ved hjelp av en mindre 8 x 4 px rektangel (#FFFFFF) at vi vil sitte på linje med batteriets kropp, i en avstand av 6 px (4 px for polstring + 2 px for den øverste halvdelen av hjerneslaget).
Når du er ferdig, ikke glem å velge og gruppere (Kontroll-G) Alle batteriets komponerende figurer, gjør det samme for alle ikonets komponerende seksjoner også.
Forutsatt at du har klart å fullføre det første ikonet, låser du laget og går videre til neste (det ville være det tredje) og la oss begynne å jobbe med innstillingene en.
Som vi gjorde med det forrige ikonet, begynner du med å lage bakgrunnen ved hjelp av en 88 x 88 px sirkel, som vi vil farge ved hjelp av # 2196F3, sentrum tilpasse det til det underliggende aktive tegneområdet etterpå.
Begynn å jobbe på senterskyderen ved å lage en 4 x 32 px rektangel eller a 32 px høyt slag med a 4 px tykk Vekt, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter sentrere seg til den større sirkelen, i en avstand på 18 px fra toppkanten.
Opprett skyvekontrollens tilstandsindikator ved hjelp av a 12 x 4 px rektangel (#FFFFFF) som vi vil sentre justere til den tidligere opprettede formen, i en avstand av 4 px fra den nederste kanten.
Legg til nederste del av glidebryteren ved hjelp av 4 x 12 px rektangel (#FFFFFF) som vi vil plassere like under statusindikatorlinjen, velge og gruppere (Kontroll-G) alle tre former sammen etterpå.
Opprett toppseksjonen for venstre glidebryter ved hjelp av en mindre 4 x 12 px rektangel (#FFFFFF), som vi vil justere til toppkanten av senterskyderen, plassere den i en avstand på 12 px fra det.
Legg skyvekontrollens tilstandsindikator ved å opprette en 12 x 4 px rektangel (#FFFFFF) som vi vertikalt stabler til den tidligere opprettede formen, i en avstand av 4 px fra den nederste kanten.
Avslutt den venstre glidebryteren ved å legge til den nederste delen som vi vil opprette ved hjelp av en 4 x 32 px rektangel (#FFFFFF) som vi vil plassere under indikatoren.
Når du er ferdig, velg alle tre figurene og grupper dem sammen (Kontroll-G) som vi gjorde med senterskyderen.
Fullfør ikonet ved å lage en kopi (Control-C> Control-F) på venstre glidebryter, som vi vil plassere på høyre side av sirkelen, i en avstand av 4 px fra senterskyderen.
Når du er ferdig, ikke glem å velge og gruppere (Kontroll-G) alle sine komponerende seksjoner slik at de ikke blir skilt ved en tilfeldighet.
Forutsatt at du allerede har flyttet opp til neste lag (det ville være den fjerde), zoom inn på det tredje referansegitteret og la oss komme i gang.
Lag ikonets bakgrunn ved hjelp av en 88 x 88 px sirkel, som vi vil farge ved hjelp av # 7C4DFF og sentrere deretter til det underliggende aktive tegneområdet.
Opprett hovedformen for den venstre meldingsboksen ved hjelp av a 32 x 24 px rektangel, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter posisjonen i en avstand på 20 px fra det aktive tegneområdet er både venstre og øvre kant.
Begynn å justere formen som vi nettopp har opprettet, ved først å slå på Pixel Preview modus (Alt-Control-Y) og deretter legge til et nytt ankerpunkttil bunnkanten, i en avstand av 10 px fra venstre til venstre ved å klikke på venstre ved hjelp av Legg til Anchor Point Tool.
Når du er ferdig, ikke glem å avslutte Pixel Preview modus ved å bruke Alt-Control-Y hurtigtast.
Fortsett å justere rektangelet ved å velge sitt nedre venstre ankerpunktmed Direkte utvalgsverktøy (A), og deretter skyve den til bunnen av 8 px med hjelp av Bevege seg verktøy(høyreklikk> Transform> Flytt> Vertikal> 8 px).
Vri den resulterende formen til et omriss ved å bla den Fylle med dens Stroke (Shift-X) og deretter sette sin Vekt til 4 px og dets Hjørne til Round Join.
Legg til mindre tekstlinje ved å opprette en 10 x 4 px rektangel, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter plassere innsiden av den lille meldingsboksen, tilpasse den mot sitt øverste venstre hjørne, sørg for å forlate a 4 px gapet rundt det.
Legg til den bredere tekstlinjen ved hjelp av en 20 x 4 px rektangel (#FFFFFF) som vi vil legge igjen til den tidligere opprettede, på en avstand av 4 px fra den nederste kanten.
Når du er ferdig, ikke glem å velge og gruppere alle tekstboksens former sammen ved hjelp av Kontroll-G hurtigtast.
Lag en kopi (Control-C> Control-F) i den lille tekstboksen, og deretter reflektere (høyreklikk> Transform> Reflektere> Vertikal) og plasser den på høyre side av sirkelen, i en avstand av 18 px fra det aktive tegneområdet er både høyre og nederste kant.
Avslutt ikonet ved å fjerne tekstboksens overlappende seksjon (uthevet med rødt) slik at du ender med en 4 px gapet mellom det og den venstre sin oversikt. For å gjøre dette, må du bare legge til et nytt ankerpunkttil topp og venstre kant, og fjern deretter alle de andre.
Når du er ferdig, velg alle ikonets komponerende seksjoner og grupper dem sammen ved hjelp av Kontroll-G hurtigtast.
Siden nå vet du sannsynligvis allerede boret, låser laget og går videre opp neste lag (det ville være den femte) og la oss begynne å jobbe på alarmikonet vårt.
Lag en 88 x 88 px sirkel, som vi deretter farger med # FFC107, senter tilpasse det til det underliggende aktive tegneområdet.
Lag vekkerklokke hovedkroppen ved hjelp av a 40 x 40 px sirkel, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter sentrere til det aktive tegneområdet, med en avstand på 20 px fra den nederste kanten.
Vri formen som vi nettopp har opprettet til en disposisjon, ved å bla den Fylle med dens Stroke, og deretter sette sin Vekt til 4 px fra innsiden av Stroke panel.
Velg Pennverktøyet (P) og trekk i klokkenes hender med a 4 px tykk Stroke med fargen satt til hvit (#FFFFFF) og Hjørne til Round Join, sørg for å forlate en 4 px gap mellom sluttankerog den større sirkelen.
Flytt noen piksler mot toppen, og opprett en 8 x 6 px rektangel (#FFFFFF) som vi vil sentre justere til den øvre delen av den større sirkelen, posisjonere den slik at den ender overlappende Strokes øverste halvdel.
Legg til en 16 x 4 px rektangel (#FFFFFF) på toppen av den som vi nettopp har opprettet, velger og grupperer (Kontroll-G) dem sammen etterpå.
Fullfør ikonet ved å tegne de to små diagonale linjesegmentene med en 4 px Stroke med fargen satt til hvit (#FFFFFF). Når du er ferdig, velg og gruppér (Kontroll-G) alle vekkerklokkeens komponerende figurer sammen, gjør det samme for hele ikonet etterpå.
Gjør deg til det sjette og siste laget, og la oss fullføre prosjektet ved å lage fotografikonet.
Bruke en 88 x 88 px sirkel (# FF6F00) lager ikonets bakgrunn som vi vil sentrere til det underliggende aktive tegneområdet.
Lag bildens hovedlegeme ved hjelp av en 36 x 36 px rektangel, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter sentrere til det underliggende aktive tegneområdet, med en avstand på 20 px fra toppkanten.
Vri formen som vi nettopp har opprettet til en disposisjon, ved å bla den Fylle med dens Stroke (Shift-X), og deretter sette sin Vekt til 4 px og dets Hjørne til Round Join fra innsiden av Stroke panel.
Bruker Pennverktøyet (P) Tegn på den horisontale delelinjelinjen ved hjelp av a 4 px tykk Stroke (#FFFFFF) som vi vil plassere innsiden av den tidligere opprettede formen, på en avstand av 4 px fra den nederste kanten.
Bruke det samme 4 px tykk Stroke (#FFFFFF) med en Round Join, begynn å tegne det første fjellet ved å plassere ditt første ankerpunktpå venstre kant av bildet, i en avstand av 10 px fra den horisontale skillelinjen som vi nettopp har opprettet.
Legg til det andre ankeretpå en avstand av 10 px både horisontal og vertikal fra den første. Avslutt fjellet ved å legge til det tredje og siste ankeretpå den horisontale skillelinjen, mens du holder nede Skifte nøkkelen til å tegne i en perfekt diagonal linje.
Tegn i det andre mindre fjellet, bruk det samme 4 px tykk Stroke (#FFFFFF), og når du er ferdig, velg og grupper alle bildens kompositte figurer sammen ved hjelp av Kontroll-G hurtigtast.
Opprett ikonets nederste del med en 28 x 6 px rektangel, som vi vil farge ved hjelp av hvitt (#FFFFFF) og deretter midtjustere til den nedre delen av bildet, med en avstand på 4 px.
Avslutt ikonet ved å skru på formen som vi nettopp har opprettet til a 4 px tykk oversikt (#FFFFFF) med en Round Join, og deretter justere det ved å legge til et nytt ankerpunkttil midten av toppkanten, som vi deretter fjerner for å åpne banen (markert med rødt).
Velg den resulterende formen og resten av bildetes komponerende elementer og gruppere dem (Kontroll-G) gjør det samme for ikonets komponerende seksjoner etterpå.
Jeg håper at du har klart å holde tritt med hvert trinn, og viktigst lært noe nytt og nyttig under prosessen. Når det blir sagt, ser jeg deg i den neste!
Accentsconagua