Share
Hva du skal skapeI dag er det en spesiell, siden vi feirer ti års awesomeness, og hvor bedre å gjøre det enn ved å gi deg en spesiell opplæring hvor du lærer å lage et sett med ti må ha UI-ikoner, ved hjelp av de mest grunnleggende former og verktøy som Illustrator har å tilby.
Hvis du leter etter flere ikoner, i forskjellige stiler, gå over til GraphicRiver.
Når det blir sagt, få en rask slurk av den ferske bakte kaffen, og la oss komme på jobb.
Forutsatt 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:
Siden vi skal lage ikonene ved hjelp av en piksel-perfekt arbeidsflyt, vil vi sette opp et fint lite rutenett slik at vi kan ha full kontroll over våre former.
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 og Snap til Pixel alternativ funnet under Utsikt menyen, som vil forvandle seg til Snap til Pixel hver gang du går inn Pixel Preview modus (hvis du bruker en eldre versjon av programvaren).
Nå, hvis du er ny på hele "piksel-perfekt arbeidsflyt", anbefaler jeg på det sterkeste at du går gjennom hvordan du oppretter Pixel-Perfect Artwork-opplæringen, som vil hjelpe deg med å utvide dine tekniske ferdigheter på kort tid.
Med det nye dokumentet opprettet, ville det være lurt å strukturere prosjektet vårt ved å bruke noen få lag for å skille referansegitterene fra de faktiske ikonene. Hvis du er kjent med mine tidligere opplæringsprogrammer, vil du legge merke til at med denne tar vi en litt annen tilnærming, siden vi bygger prosjektet på artboards i stedet for lag på grunn av høyt ikonstall.
Når det blir sagt, ta opp lag panel, og opprett totalt to lag, som vi vil gi nytt navn på følgende måte:
Dereferansegitter (eller grunnlinjer) 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å nettene størrelsen på de faktiske ikonene, og de bør alltid være den første avgjørelsen du gjør når du starter et nytt prosjekt, siden du alltid vil starte fra den minste mulige størrelsen og bygge videre på det.
Nå, i vårt tilfelle, skal vi lage ikonpakken med bare en størrelse, mer nøyaktig 64 x 64 px, som ligger på middels del av skalaen.
Pass på at du er på riktig lag (det ville være den første), og deretter ta tak i Rektangelverktøy (M) og opprett en 64 x 64 px oransje (# F15A24) firkantet som vi vil sitte i linje med det første Artboard og bruke til å definere den totale størrelsen på ikonene våre.
Legg til en mindre 56 x 56 px en (#FFFFFF) som vi vil plassere på toppen av forrige form, siden det vil fungere som vårt aktive tegneområde, og gir oss dermed en allround 4 px polstring for å jobbe med.
Velg og gruppér de to rutene sammen ved hjelp av Kontroll-G tastaturgenvei, og opprett deretter de gjenværende nettene med 19 kopier (Control-C> Control-F) som vi vil plassere på hver av de tomme kunstbrettene. Ta deg tid, og når du er ferdig, sørg for at du låser gjeldende lag før du går videre til neste del.
Forutsatt at du har klart å opprette de små referanseglassene, går du videre til neste lag (det ville være det andre), og la oss slå av prosjektet ved å lage den første ikongruppen som hjelper oss med å navigere bedre.
Begynn å jobbe på bakikonet ved å lage hovedkroppen ved å bruke en 48 x 48 px sirkel, som vi vil farge ved hjelp av #DCEEFF og sentrere deretter til den første artikkelen.
Gi den formen som vi nettopp har opprettet en oversikt ved hjelp av Stroke metode ved å lage en kopi av det (Kontroll-C), som vi vil lime inn foran (Kontroll-F) og deretter justere ved først å endre fargen til # 629CF9 og deretter bla sin Fylle med dens Stroke (Shift-X). Sett den resulterende disposisjonen Vekt til 8 px, velge og gruppere alle de nåværende delens komponerende figurer sammen etterpå ved å bruke Kontroll-G hurtigtast.
Begynn å jobbe på den lille pilen som vender mot venstre, ved å lage hovedkroppen ved å bruke a 24 px bred 8 px tykk Stroke linje (# 629CF9) med en Round Cap, som vi vil sitte på linje med det større underliggende Artboard.
Fullfør ikonet ved å tegne pilens hode ved hjelp av en 8 px tykk Stroke (# 629CF9) med en Round Cap og Bli med. Ta deg tid, og når du er ferdig, velg og grupper de to sammen (Kontroll-G), gjør det samme for alle ikonets komponerende figurer før du går videre til neste.
Opprett fremoverikonet ved hjelp av en kopi (Kontroll-C) av den som vi nettopp er ferdig med å jobbe med, som vi vil lime inn (Kontroll-F) på andre Artboard og deretter justere ved å vertikalt reflektere den (høyreklikk> Transform> Reflektere> Vertikal).
Opprett rulleikonet ved hjelp av en kopi (Kontroll-C) av det forrige ikonet, som vi vil lime inn (Kontroll-F) på neste Artboard og juster deretter ved å rotere den -90º bruker Rotere verktøyet (Høyreklikk > Transformere> Roter> -90º).
Legg til rullegardinikonet ved hjelp av en kopi (Kontroll-C) av den som vi nettopp har opprettet, som vi vil lime inn (Kontroll-F) på fjerde Artboard og deretter justere ved å horisontalt reflektere den (høyreklikk> Transform> Reflektere> Horisontal).
Begynn å jobbe på oppdateringsikonet ved å opprette hovedkroppen ved hjelp av en 36 x 36 px sirkel med en 8 px tykk Stroke (# 629CF9), som vi vil sitte i linje med det aktive tegneområdeets nederste kant.
Åpne sirkelen ved å fjerne sin øverste venstre del, sørg for å angi den resulterende banen Lokk til Rund fra innsiden av Stroke panel.
Opprett pilhodet ved hjelp av en 18 x 24 px rektangel, som vi vil farge ved hjelp av #DCEEFF, og deretter posisjon som vist i referansebildet.
Vri rektangelet til en pil på venstre side ved å legge til et nytt ankerpunkt til midten av venstre kant ved hjelp av Legg til ankerpunktsverktøy (+), og fjern deretter de ytre-venstre-enhetene ved å klikke på dem ved hjelp av Slett ankerpunktsverktøy (-).
Avslutt pilen, og med det selve ikonet, ved å gi den resulterende formen en 8 px tykk oversikt (# 629CF9) med en Round Join, velge og gruppere (Kontroll-G) de to sammen, og gjør det samme for hele ikonet etterpå.
Forutsatt at du er ferdig med å jobbe med den første ikongruppen, fortsett til neste Artboard og la oss begynne å jobbe med vår neste gruppe.
Opprett søkeikonets linseavsnitt ved å bruke en 40 x 40 px sirkel (#DCEEFF) med en 8 px tykk oversikt (# 629CF9), som vi vil gruppere (Kontroll-G) og deretter justere til det aktive tegneområdet øverst til venstre.
Ta et par øyeblikk og trekk håndtaket med en 8 px tykk Stroke (# 629CF9) med en Round Cap, Bruk referansebildet som hovedveiledning.
Fullfør ikonet ved å forkorte lengden på håndtaket ved å velge toppankerpunktet med Direkte utvalgsverktøy (A) og deretter dra den nedover diagonalt mens du holder nede Skifte nøkkel for å holde en rett linje. Ta deg tid, og når du er ferdig, velg og gruppér (Kontroll-G) alle dens komponerende former før du går videre til neste ikon.
Opprett zoom-ikonet ved hjelp av en kopi (Kontroll-C) av den som vi nettopp er ferdig med å jobbe med, som vi vil lime inn (Kontroll-F) på neste kunstplate, og legg til plustegnet til midten av linseseksjonen med to 16 px lang 8 px tykk Stroke linjer (# 629CF9) med en Round Cap. Ta deg tid, og når du er ferdig, velg og gruppér (Kontroll-G) alle dens komponerende former før du går videre til neste.
Legg til zoom-ikonet ved hjelp av en kopi (Kontroll-C) av den som vi nettopp har opprettet, som vi vil lime inn (Kontroll-F) på neste Artboard og deretter justere ved å dobbeltklikke på plustegnet for å isolere det. Deretter ungroup (høyreklikk> Ungroup) og fjern vertikalt Stroke linje.
Vi er nå nede til vår tredje ikongruppe, så sørg for at du har plassert deg på neste Artboard (det ville være den niende) og la oss komme i gang.
Opprett skiften på synlighetsikonets hovedlegeme ved å bruke en 48 x 32 px ellipse, som vi vil farge ved hjelp av #DCEEFF og sentrere deretter til den underliggende Artboard.
Juster formen som vi nettopp har opprettet ved å klemme sine venstre og høyre ankerpunkter ved hjelp av Ankerpunktsverktøy (Shift-C) for å vende ellipsen i en mer øyeaktig form.
Gi den resulterende formen en 8 px tykk oversikt (# 629CF9) med en Round Join, velge og gruppere de to sammen etterpå ved å bruke Kontroll-G hurtigtast.
Legg til elevens delen ved hjelp av a 16 x 16 px sirkel, som vi vil farge ved hjelp av # 629CF9 og sentrere deretter til de to figurene vi nettopp har gruppert.
Avslutt ikonet ved å legge til litt refleksjon ved hjelp av en 8 x 8 px sirkel, som vi vil farge ved hjelp av #DCEEFF og deretter justere til elevens øverste høyre hjørne, gruppere (Kontroll-G) de to sammen etterpå. Ta deg tid, og når du er ferdig, velg og gruppér (Kontroll-G) alle dens komponerende former før du går videre til neste.
Opprett ikonet for å bytte ut synlighet ved hjelp av en kopi (Kontroll-C) av den som vi nettopp er ferdig med å jobbe med, som vi vil lime inn på det tiende Artboard og deretter justere ved å tegne diagonallinjen ved hjelp av en 8 px tykk Stroke (# 629CF9), velge og gruppere (Kontroll-G) alle sammen etterpå.
La oss være ærlige, ingen sann UI-ikonpakke er komplett uten et sett med fildelingsikoner, så la oss sørge for at vi legger til et sett av våre egne.
Begynn å jobbe på opplastingsikonet ved å lage hovedformene for boksavsnittet med en 48 x 12 px rektangel (#DCEEFF) med en 8 px tykk oversikt (# 629CF9), som vi vil gruppere (Kontroll-G) og deretter midtjustere til det aktive tegneområdets nederste kant.
Legg til de små utvidelsesdelene med to 8 px høy 8 px tykk Stroke linjer (# 629CF9) med en Round Cap, som vi vil plassere på sidene av tidligere opprettede former, velge dem og deretter opprette en større gruppe (Kontroll-G).
Legg pilen oppover med en kopi (Kontroll-C) av den som vi allerede har opprettet for navigasjonsikonene, som vi vil lime inn (Kontroll-F) på det nåværende Artboard og deretter midtjustere til det øverste kanten på det aktive tegneområdet. Når du har pilen på plass, velger du og grupperer alle ikonets komponerende figurer sammen ved hjelp av Kontroll-G hurtigtast.
Opprett nedlastingsikonet ved hjelp av en kopi (Kontroll-C) av den som vi nettopp har ferdig med å jobbe med, som vi vil lime inn på neste Artboard og deretter justere ved å horisontalt reflektere den lille pilen (høyreklikk> Transform> Reflektere> Horisontal).
Hvis du er som meg, er du sannsynligvis en av de menneskene som ikke liker det neste elementet, siden grensesnittene skal være enkle å bruke, men dypt ned vet at det noen ganger er et nødvendig onde.
Opprett ikonets hovedlegeme ved hjelp av en 48 x 48 px sirkel (#DCEEFF) med en 8 px tykk oversikt (# 629CF9), som vi vil gruppere (Kontroll-G) og sentrere deretter til 13. Artboard.
Opprett utropstegnets lille prikk med en 8 x 8 px sirkel, som vi vil farge ved hjelp av # 629CF9 og sentrere deretter til de større figurene, posisjonere den på en avstand av 4 px fra sin disposisjon nederste kant.
Avslutt markeringen, og med det selve ikonet, ved å legge til linjesegmentet med en 12 px høy 8 px tykk Stroke (# 629CF9), som vi vil plassere over prikken, i en avstand av bare 4 px. Velg og gruppe (Kontroll-G) de to formene sammen, gjør det samme for hele ikonet, før du går videre til neste.
Deling er en av de tingene som gjør Internett et flott sted å leve ut din digitale eksistens, så jeg skal dele med deg en enkel tilnærming til hvordan du lager ditt eget delbare ikon.
Opprett ikonets hoved seksjoner ved hjelp av tre 16 x 16 px sirkler (#DCEEFF) med en 8 px tykk oversikt (# 629CF9), som vi vil individuelt gruppere (Kontroll-G) og deretter posisjonen som sett i referansebildet.
Tegn linjesegmentet som forbinder alle tre delene med en 8 px tykk oversikt (# 629CF9) med en Round Cap og Bli med. Ta deg tid, og når du er ferdig, send den resulterende banen under ved høyreklikk> Ordne> Send til Tilbake, velge og gruppere alle ikonets komponerende figurer sammen ved hjelp av Kontroll-G hurtigtast.
Vi elsker å slå ting på og av, så hvorfor ikke tilbringe et par øyeblikk og se hvordan vi kan lage vår egen statlige indikatorskifter.
Begynn å jobbe på ikonet for å slå av ved å lage hovedkroppen ved å bruke en 48 x 32 px avrundet rektangel (#DCEEFF) med en 16 px hjørne radius og en 8 px tykk oversikt (# 629CF9), som vi vil gruppere (Kontroll-G) og deretter senterjustere til neste Artboard.
Legg til tilstandsindikatoren ved hjelp av a 16 x 16 px sirkel, som vi vil farge ved hjelp av # 629CF9, og sentrere deretter til de større figurene, posisjonere den på en avstand av 4 px fra konturens venstre kant. Når du er ferdig, velg og gruppér (Kontroll-G) alle tre former sammen, før du går videre til neste ikon.
Opprett veksle på tilstand ved hjelp av en kopi (Kontroll-C) av den som vi nettopp har ferdig med å jobbe med, som vi vil lime inn på neste Artboard (Kontroll-F), og deretter justere ved å vertikalt reflektere den (høyreklikk> Transform> Reflektere> Vertikal).
Neste ting på vår liste er en av de ikonene som umiddelbart ble en spillveksler en gang den ble brukt og fullt ut forstått, siden den ble umiddelbart vedtatt som et universelt symbol.
Begynn å jobbe på menyens senterdel ved å opprette en 8 x 8 px sirkel, som vi vil farge ved hjelp av # 629CF9 og sentrere deretter til høyre for den aktive tegningens venstre kant.
Legg til linjesegmentet med en 36 px bred 8 px tykk Stroke linje (# 629CF9) med en Round Cap, som vi vil sitte i linje med det aktive tegneområdet på høyre side. Ta deg tid, og når du har banen på plass, velg både den og sirkelen og grupper dem sammen ved hjelp av Kontroll-G hurtigtast.
Fullfør ikonet ved å legge til topp- og bunnseksjonene ved hjelp av to kopier (Control-C> Control-F to ganger) av figurene vi nettopp har gruppert, som vi vil plassere i en avstand av 8 px fra originalen. Når du er ferdig, velg og gruppér (Kontroll-G) alle dens komponerende seksjoner før du går videre til neste ikon.
Uansett om det er tannhjul eller glidebrytere, kan vi alle enige om at innstillingsikonet er et must-have-element i en hvilken som helst UI-pakke, siden justeringer er en av de tingene vi alltid liker å lage, hvis du vet hva jeg mener.
Start med å opprette ikonets glidersegmenter ved hjelp av tre 48 px bred 8 px tykk Stroke linjer (# 629CF9) med en Round Cap, som vi vil vertikalt stable i en avstand av 16 px fra hverandre, sentrere dem til den tomme underliggende Artboard etterpå.
Fullfør ikonet ved å legge til justeringsknappene med tre 12 x 12 px sirkler (#DCEEFF) med en 8 px tykk oversikt (# 629CF9), som vi vil individuelt gruppere (Kontroll-G) og deretter plassere på glidebryterne som vist i referansebildet. Når du er ferdig, ikke glem å velge og gruppere (Kontroll-G) Alle ikonets komponerende figurer før du går videre til neste.
Vi er nå nede i vår siste ikongruppe, og hvor bedre å avslutte pakken enn ved å legge til de små hjertestatusene.
Begynn å jobbe på den øvre delen av den samme knappen ved å opprette en 28 x 28 px sirkel, som vi vil farge ved hjelp av #DCEEFF, og deretter posisjon 8 px fra det aktive tegneområdet øverste kant og 4 px fra sin venstre side.
Lag en annen 28 x 28 px sirkel (#DCEEFF), som vi vil plassere på motsatt side av det aktive tegneområdet, sørg for å opprettholde de samme hullene. Når du har begge former på plass, velger du og forener dem i et enkelt større objekt ved hjelp av Pathfinder's Forene Shape Mode.
Slå på Pixel Preview modus (Alt-Shift-Y), og juster den resulterende formen ved å velge og fjerne den nederste halvdelen og deretter snappe toppsenterets ankerpunkt tilbake til Pixel Grid.
Ta tak i Pennverktøyet (P) og trekk hjertekroppen, sørg for å glatte ut sidens ankerpunkter ved hjelp av Konverter valgte markeringspunkter til jevn. Ta deg tid og juster formen ved å velge og plassere noen av håndtakets sluttpunkter som vist i referansebildet, slå av Pixel Preview modus (Alt-Control-Y) før du går videre til neste trinn når du er ferdig.
Avslutt ikonet ved å gi den resulterende formen en 8 px tykk oversikt (# 629CF9) med en Round Join, sørg for å velge og gruppere (Kontroll-G) de to før de går videre til den neste.
Lag det siste ikonet ved hjelp av en kopi av den som vi nettopp er ferdig med å jobbe med, som vi vil plassere på det siste Artboard og deretter bli til en mislikt knapp ved å legge til diagonal tverrstang ved hjelp av en 8 px tykk Stroke (# 629CF9) med en Round Cap. Når du er ferdig, velg og gruppér (Kontroll-G) alle dens komponerende former før du lagrer prosjektet.
Som alltid håper jeg at du har hatt denne trinnvise opplæringen og viktigst lært noe friskt og nyttig underveis!
Accentsconagua