Create et sett med Apple Watch Ikoner i Adobe Illustrator
Hva du skal lage
I thistutorial vil vi lage et sett med flat iconsfor Apple Watch som kan bli funnet på opprinnelige Apple Watch Hjem-skjerm menyen bydefault. Vi kommer til å bruke grunnleggende former og Warp effekter samt noen morecomplicated metoder for å lage en trendy brukergrensesnitt design. La oss komme i gang!
1. Apple Watch Ikon Retningslinjer
Apple Watchicons er utformet på en trendy flat stil veldig lik den iOS ikoner, whichcan funnet i de nyeste iOS på iPhone, iPad eller andre Apple-enheter. Yetthere er en merkbar bestemt funksjon: ikonene er runde. I denne tutorialwe'll være å bruke en rund rutenett for å lage en enkelt base for hvert ikon. Du kan laste ned en veldig fin ikonet mal vektor for å gjøre det lettere å arbeide med.
Hvis du areinterested i mer dyptgående teori på ikonet skapelsen for Apple Watch, jeg wouldstrongly anbefaler at du kjører gjennom den offisielle Apple Watch Menneskelig InterfaceGuidelines og spesifikasjoner.
Sjekk også disse meget usefuland beskrivende artikler "Opprette Ikoner for Apple Watch" og "Ikoner for Apple Watch - The Definitive Guide"., hvor folk deler sine freetemplates og kunnskap om å lage tilpassede ikoner
Nå itstime å gå videre og skape Apple Watch ikoner! Hvis du vil at ikonene tobe mer pixel-perfekt og naturtro, som de originale Apple Watch ikoner, youcan finne et eksempelbilde av Apple Watch Hjem-skjerm i Google Images. Fil > Plasser
det på din Artboard og bruke det som en mal, tegning dine ikoner på toppen ofit, bevare de ønskede størrelser og proporsjoner. Ellers bare følg thistutorial være til inspirasjon, ikke som en streng instruks om å lage nøyaktige kopier av de originale ikonene.
2. Createthe Time, Mail og Musikk app ikoner
Trinn 1
Start byopening en av ikonmaler (for denne opplæringen vi skal bruke 80 x 80 px
ikonet mal for 38 mm
ur). Gå til View > Skjule Grid
å gjøre gridinvisible hvis det distraherer deg, men sørg for at du har Smart Guides andSnapping aktivert (du finner dem i den samme menyen) for å gjøre det enklere å workwith.
Trinn 2
La oss begynne å lage vår første ikonet for Time app ved å plassere en 4 x 4 px
selv sirkelen i midten av malen. Dobbeltklikk på Ellipse Tool (L)
å ringe pop-upoptions vinduet, og deretter hodet til Align
panel for å justere sirkelen horisontalt og vertikalt på Artboard. Fyll thecircle med orange (# FF9506).
Trinn 3
Bruk rektangel Tool (M)
å lage en 2 x 40px
second hand ofour klokke, fylt med den samme oransje farge, og plassere den langs centralGuide linje, som vist i skjermbildet.
Du kan sluttar
thehand til Key Object
, ved clickingthe sirkel mens du holder nede Alt
tasten.
Trinn 4
La oss copythe andre hånden, gjør det kortere og roter det til -. 60 grader
, plassere den langs Guide, som vist nedenfor
Nå skal vi danne kroppen av minuttet hand.Make en svart 4 x 30 px
rektangel og bruke Levende Corners
funksjon som skal gjøre bothends avrundet ved å trekke de små markører sirkel med Direct Selection Tool (A)
til sitt maksimum ( 2 px
hjrneradius i vårt tilfelle).
Trinn 5
Plasser hånden på riktig sted langs guiden linjen (du canmake det litt mindre, slik at den passer den indre sirkelen av ikonet base).
Trinn 6
Lag en firkant av 4 x 20 px Anmeldelser størrelse for timeviseren. Gjør det avrundet, rotateto 60 grader Hotell og plassere den på theopposite side fra minuttviseren.
Trinn 7
Til slutt opprette en 80 x 80 px
hvit ellipse med Ellipse Tool (L) for ikonet basen og legg den under allother stedene. Flott! Vår første ikonet er klar; la oss gå videre til neste.
Trinn 8
Nå skal vi skape post-ikonet. Startforming konvolutten ved å lage en 50 x 33px
rektangel av alle farger.
Legg atriangle med 2 pt Stroke
eitherusing en Polygon Tool
med 3 sider fra Value eller med Pen Tool (P). Objekt > Utvid
thetriangle å slå den inn i kurvene.
Trinn 9
Legg til en trekant på oversiden ofthe konvolutt base, gjøre sin nedre hjørne avrundet, og utvide formen. Du kan slette topand nedre del av rektanglene med Eraser Tool (Shift-E)
, som vi ikke trenger dem.
Slett thetop del av den nedre trekanten med EraserTool (Shift-E) Hotell og Unite
bothparts av trekantene i Pathfinder.
slutt, lage en kopi av den grunnleggende konvolutt formen (Ctrl-C > Kontroll-F), etter velge både rektangel og topp form, og bruke theIntersect funksjon av Pathfinder å avskjære deler utenfor konvolutten.
Trinn 10
Velg rektangel og stripene againand bruke Minus Front
functionof Pathfinder
å kutte ut lines.Switch den Fargen på konvolutten til hvit og legge en sirkel base for vår ikon, fylle den med lineær gradient fra mørkere blå (# 2066F0) på toppen for å lighterblue (# 1DD4FD) i bunnen.
Trinn 11 Anmeldelser
Vår neste ikonet er for musikkprogrammet, whichconsists av den eneste element: en musikk notat tegn. Begynn forming notatet med en 27 x 11 px
rektangel. Velg ankerpunktene på venstre side ofthe form med Direct Selection Tool (A) Hotell og dra dem ned for å gjøre formen skjev.
Step 12
Bruk rektangel Tool (M) for å skape twomore former og starte danner "leg" av notatet.
Step 13
Velg tre ankerfester i lowersquare med Direct Selection Tool (A) Hotell og gjøre dem avrundet. Så Unite
figurene i Pathfinder Hotell og makethe hjørnet mellom figurene avrundet også, ved hjelp av funksjonen Levende Corners.
Trinn 14
Legg til Andre del av noten og makethe generelle formen mer glatt og avrundet. Fullfør opp med ikonet ved makingthe base, fylt med lineær gradient fra orange (# FA5D3B) til rosa (# FF2968).
3. Gjengi verdensur, stoppeklokke, Timerand Alarm Ikoner
Trinn 1
Nå skal vi flytte til et sett av ikoner knyttet til tid, og alle skapt i en enkel stil. Start med å danne en 48 x 48 px
selv sirkel, og en smallercircle inne. Bruk Minus Front
funksjon av Pathfinder
å skape aring.
Trinn 2
Opprett en mindre, elliptisk ring insidethe første form og legg to kryssede linjer, justert til sentrum.
Legg til en horisontal linje i den øvre delen ofthe form og bøy den med hjelp av Effect > Warp > Arc
. Sett HorizontalBend Anmeldelser verdi til -. 35%
Trinn 3
Legg anotherbent linje i den nederste delen av vår verden og ender opp med denne icon byexpanding kloden form og danner en gradient base med mørk-oransje bunn (# ff7632) og lys-oransje topp (# ff9408). Legg en mindre krets av darkerorange farge (# e45221) og skjule den bak kloden form, gir det mer kontrast.
Trinn 4
For ournext icon-stoppeklokke-vi vil bruke base verdensuret ikonet thatwe've opprettet tidligere. Danner sentrum av stoppeklokken ved å lage en 8 x 8 px
ellipse, på linje med en 2 x 25 px
rektangel for klokken nest hånd.
Trinn 5
Bruk rektangel Tool (M)
å legge mindre detailsto toppen av vår stoppeklokke. Gjør knappen for stoppeklokken mer avrundet, ved hjelp av Levende Corners og sette hjørnet radius til 1,4 px.
Trinn 6
La oss moveon til Timer ikon det har samme base som stoppeklokkeikonet. Form en 2,5 x 13 px
stripe i midten øverst partof ringen med rektangel Tool (M).
Så ta tak i Polygon Tool
, sette Sider
kvantitet til 3
, eller bruke Pen Tool (P)
å danne en trekant. Plasser den som show på en screenshotbelow, som om det er en bit av en pai.
Trinn 7
Velg boththe enkel hvit ring og trekanten form og bruke Minus Front
funksjon for å kutte ut den venstre delen av ringen. Legg asmall 6 x 6 px
sirkelen i midten ofour ikonet.
Trinn 8
Til slutt, rotere sirkelen slik at den øvre forankringspunkt er om 45 grader
til venstre. Dra ankerpunktet med Direct Selection Tool (A)
, extendingthe form. Konverter valgte anker pointto hjørne
enten ved hjelp av Konverter
knappen øverst i kontrollpanelet eller ved å klikke på den med Anchor Point Tool (Shift-C)
, thusturning vår form i hendene på en klokke.
Trinn 9
Vår lasticon i dette settet er Alarm. Den har samme base med hvit ring asprevious oransje ikoner. Hendene på klokken er dannet med to narrowstripes laget med rektangel Tool (M).
Trinn 10
La oss formthe øvre del av vekkerklokken ved å gjøre en selv sirkel med Ellipse Tool (L) Hotell og dele det intotwo like deler ved å klikke sideankerpunktene med Saks Tool (C).
Plasser halvdeler ontop av alarmen, og legge til to små "ben" i bunnen til slutt opp på ikonet.
4. Createthe Maps, Vær og kamera app ikoner
Trinn 1
Mapsicon er ganske enkel og inneholder ikke så mange elementer. Start med å danne itscenter med en 40 x 40 px
sirkel av aBlue (# 087eff) farge. Danne et kompass pil fra en 17 x 25 px
trekant, på vei opp.
Trinn 2
Legg til en beige (# e5decb) ikonet basen. Gå til Objekt > Sti > Legg ankerpunkt Hotell og
selectthe forankringspunkt i midten på undersiden og dra den opp litt, formingthe pilspiss.
Trinn 3
Plasser en widevertical stripe, laget med en 26 x 83,5 px
rektangel, over ikonet, og forene den med en annen bred stripe, plassere itperpendicular. Skjule krysset formen bak den blå sirkelen med arrow.Select både bunnen av ikonet og de kryssede striper og bruke Del
funksjon av Pathfinder
å splitte formen inn i tre deler.
Trinn 4
Fyll theparts av ikonet basen med grønn (# 78c73d) og lyserosa (# fbc7d2) farger.
Trinn 5
La oss moveTo Vær-ikonet. Fyll den grunnleggende sky form med lineær gradient fra darkerblue (# 2066f0) på toppen for å blå lighter (# 1dd4fd) i bunnen. Legg en gul (lineær gradient fra # ffc505 til # fee403) sirkel for solen i venstre partof ikonet. Begynn forming skyene med to sirkler: a 25.5 x 25.5 px
sirkelen i midten av malen og en 21 x 21 px
sirkel nærmere rightpart av ikonet.
Trinn 6
Lag en 43 x 16 px
rektangel og gjøre sin avrundede kanter med 8 px
hjørne radius.Align rektangelet med sirkler og Unite
alle tre former i Pathfinder
toform en glatt, avrundet sky.
Trinn 7
Fyll thecloud med hvit farge og gjøre det semi-transparent senke Opacity
til 90%.
Trinn 8
La oss moveon til kameraikonet. Lag en grå basic sirkel, fylt med lineær gradientfrom mørk grå (# 8e9196) i bunnen til lysere grå (#dadcdd) på toppen, andstart forming kameraet silhuetten fra en mørk-grå (# 3c3c3c) roundedrectangle.
Legg til et mindre 30 x 17 px
rektangel på toppen og gjøre sin øvre venstre hjørne avrundet med 7 px
hjørne radius. Unite
figurene og gjøre cornerbetween formene rundet også.
Trinn 9
Legg anarrow stripe i den øvre delen av kameraet og bruke Minus Front
funksjon for å kutte det ut.
Form theshutter ikon fra en 9 x 4 px
rektangel, og legg den i sentrum av vår mal. Bruk Pen Tool (P)
å legge en pil som peker ned på lukkeren. Sett Stroke Vekt
til 4 pt Hotell og gjør hetter og hjørne av linjen avrundet i Stroke
panel.
Trinn 10
Legg thefinal detaljer til vår kameraet: danner en lys-gul (# fac81b) indikator på en 6 x 6 px
størrelse. Videre lage en stor sirkel med 4 pt Stroke Vekt
. Plasser sirkelen nederst i høyre hjørne av thecamera, som vist i skjermbildet
Trinn 11
Objekt >.; Utvid
den store sirkelen, snu den til den ring.Select både ringen og kameraet og bruke Minus Front
å kutte ut ringen, danner objektglass. Thenselect alle mørkegrå deler av våre kamera og gjøre dem om til en singlecompound form ved å trykke på Ctrl-8
.
Til slutt bruker du Shape Builder Tool (Shift-M)
eller Snitt
funksjon av Pathfinder
å avskjære unneededparts av kameraet utenfor basen vår ikon.
5. Gjør thephone, Meldinger og Remote app ikoner
Trinn 1
La oss makea håndsett for telefonikonet. Opprett en 8 x 40px
rektangel og bruke en Arc Warp Effect
med 27%
Vertikal Bend
verdi å bøye rektangelet på venstre side . Legg two17 x 20 px rektangler i topp- og bunn deler av telefonen og gjøre theircorners avrundet, noe som gjør figurene glatt. Unite
alle deler av telefonen i Pathfinder.
Trinn 2
Jevn til venstre side av telefonen ved å slette theunneeded ankerpunkt med Slett AnchorPoint Tool (-) og rundt de indre hjørnene med live Corners feature.Finally, rotere telefonen til 45 grader og legg den over ikonet base, fylt med lineær gradient fra lysere grønt (# 86fb71) til mørkere grønn (# 0fd51c) .
Trinn 3
La oss formthe Message ikonet på samme grønn base som vi har brukt tidligere. Lag en 40 x 40 px
hvit sirkel og utvide den tothe sidene litt, slik at formen knust til 48 x 40 px.
Legg en liten trekant i bunnen av den hvite formen, og danner en tale boble. Gjør det nedre hjørnet av trekanten slightlyrounded. Bruk Arc Warp Effect
med -36% Vertical Bend
verdi tomake trekanten svakt buet.
Her er howthe fullført ikonet ser ut.
Trinn 4
Vår nexticon er Remote app ikonet, som også er svært enkel og består av asingle element. For det første danner en gradient base (fra mørk blå # 2066f0 inthe bunnen for å lysere blå # 1dd4fd) på toppen. Legg hvit strek med 5,3 pt Stroke Vekt Hotell og Align
det til Inside.
Plasser en 30 x 30 px
hvit trekant i sentrum av vår ikon.
Trinn 5
Til slutt, gjør hjørnene i trekanten avrundet med en < b> 2,5
Corner Radius. Flott! Ikonet er klar, så la oss gå videre.
6. Createthe Workout, Innstillinger og bilder appikoner
Trinn 1
Workouticon viser en stilisert silhuetten av en løpende mann. Lag en lys ikon base, fylt med lineær gradient fra gulgrønt (# c2ec38) på toppen til grønn inthe bunnen (# a3fc3f).
Ta Pen Tool (P) Hotell og lage egen linesfor de bøyde armer, ben og overkropp med 3pt Stroke Vekt Hotell og avrundet caps og hjørner .
Increasethe tykkelsen på Stroke Vekt
av torso linjen til 6 pt Hotell og legge en 9 x 9 px
sirkel for hodet.
Trinn 2
Objekt > Utvid
linjene og fyll formene med blackcolor.
Trinn 3
Innstillinger-ikonet består av en brikke. Danner cog base a 48 x 48 px
sirkel med en cut-out center, gjør en ring. Legg tre lineswith 3 pt Stroke Vekt
, connectedin midten av ikonet mal.
Trinn 4
Nå needto vi legge krusninger til vår cog. Form en 5 x 9px
rektangel og gjøre sin øvre del litt smalere. Gjøre sin øvre avrundede kanter med 1,6
Corner Radius.Place krusninger på toppen og bunnen deler av cog basen.
La oss bruke Rotate Tool (R)
å legge til flere elementer. Selectboth krusninger, dobbeltklikker du på RotateTool (R)
å ringe pop-up alternativer vindu, og sette Roter
verdien til 360/18.
Denne måten Adobe Illustrator vil automatisk beregne riktig verdi for18 former. Trykk på Kopier
knappen.
Trinn 5
Trykk på Ctrl-D
multipletimes å gjenta vår siste handling, legge til flere elementer. Til slutt opp med thisicon, velger alle krusninger, slå fyllfargen til hvit og Roter
dem alle sammen av -. 10 grader
Trinn 6
< p> Vår nexticon er en stilisert blomst for Bilder-programmet. Start med å forme bladet fra en 20 x 30 px
rektangel og gjøre itscorners avrundet med 10 px
CornerRadius. Duplisere bladet og plassere sin kopi i den nederste delen av icontemplate, som vist i skjermbildet nedenfor. Velg begge petals og bruke Rotate Tool (R)
å lage åtte flere kopier av kronbladene, byapplying 360/8 Angle
verdi andpressing Kopier
knappen.
Trinn 7
Trykk på Ctrl-D
flere ganger for å danne åtte kronblad blomst. Slå kronbladene til MultiplyBlending Mode Hotell og senk Opacity
til 80%.
La oss bruke theappropriate farge til hvert kronblad, med start fra toppen mellomste og movingclock-messig: orange (# fa9700), gul (# f0e22c), grønn (# b5d558), turkis (# 6ec19d), blå (# 71b5e1 ), fiolett (# 8f60c3), rosa (# d782a4) og rød (# ff2c2c).
Sett theflower på den hvite ikonet basen.
7. Renderthe Aksjer, aktivitet, Passbook og Kalender Ikoner
Trinn 1
Stocksicon består av en minimalistisk diagram. Begynn forming diagrammet ved å gjøre abright-blå (# 02a6f5) vertikal linje med 3pt
størrelse med Linje Tool (\\).
Plasser den i midten av vår mal, på en mørk (# 3f3f3f) ikonet basen.
Legg asmall blå sirkel over midten av malen og bruke en mørk-grå (# 3f3f3f) 1 pt
Stroke
til det for å skille det visuelt fra køen. Legg fire linjer på begge sider av ikonet, med en lysere grå (# 555555) 3 pt Stroke.
Objekt > Utvid
thelines og kutte unødvendige deler utenfor ikonet base, enten med Shape Builder Tool (Shift-M)
eller withthe hjelp av Pathfinder.
< h3> Trinn 2
Avslutt upwith ikonet ved å legge en sikksakk linje med 1,5 pt Stroke
for grafikk ved hjelp av Pen Tool (P).
Utvid linjen og at den passer på ikonet basen.
Trinn 3
TheActivity ikonet er mer komplisert og interessant å gjøre. Det consistsof tre fargerike gradient sirkler. For å danne en slik sirkel, først av alt vi trenger tomake en Blend Group.
Gjør twoequal 6 x 7 px
rektangler av rosa (# ff2b91) og røde (# f1281e) farger. Velg rektangler og gå til Objekt > Blend > Gjør
Du kan redigere innstillingene i Objekt >.; Blend > Blend Valg
, bruke Smooth Color
å lage en niceseamless blanding. Dra opprettet blanding gruppen til Børster
panel og opprette en ny ArtBrush
med standardinnstillinger.
Trinn 4
Opprett adark-grå (# 393839) sirkel base for vår ikonet og plassere en ny sirkel på toppen ofit, søker vår børste som en Stroke.
Juster størrelsen på sirkelen, slik at det passer ytterkanten av icontemplate. Sett Stroke Vekt
til 1pt Hotell og Objekt > Utvid Utseende
å slå penselstrøk i en
shape.Rotate eller snu formen med ReflectTool (O)
horisontalt, om nødvendig, slik at vi har den rosa siden av thecircle til venstre og de røde til høyre.
Lag en liten rosa (# ff2b91) sirkel og legg den i toppen sentrale området av den fargede ringen, slik at itfits høyden på formen, skjule forbindelsen mellom de to fargene.
Trinn 5
Nå needto vi legge dimensjon til ringen ved å danne en subtil skygge. Som du kanskje legge merke til, thering ble delt inn i flere deler etter at vi utvidet det. Dette er exactlywhat vi trenger! Velg den øverste røde stykke av ringen, kopiere
det og Lim inn i Front (Ctrl-C > Kontroll-F).
Fyll kopien med lineær gradient fromdark rød (# a11b17) til hvitt, og bytte til Multiply Blending Mode
, og dermed gjøre den hvite tuppen av gradientinvisible.
Trinn 6
Bruk thesame teknikk for å lage to mer fargerike ringene inne i den første formen. Createthe kunst børster fra en gul (# d8ff06) og grønn (# 86e402) blander gruppe andfrom en turkis (# 06ffaa) og blå (# 06e3f9) Blend. Fullfør opp med ikonet byadding sirkler og bruke milde skygger
Trinn 7
Den neste er den Passbook-ikonet, som består av fire små piktogrammer. Acredit kort, et fly, et filmkamera og en kaffekopp. Disse piktogrammer areminimalistic og laget av grunnleggende former ved hjelp av Pathfinder og LiveCorners funksjonen. Nedenfor kan du se en trinn-for-trinn skjermbilde, som viser hvordan tocombine formene for hvert piktogram.
Trinn 8
Basen ofthe ikonet består av fire striper i forskjellige farger: rød (# ff4e46), blå (# 439eca), grønn (# 3dca36) og orange (# ffa02b), hver av 20px
høyde. Opprette en standard 80 x 80 px
sirkel base for vår ikonet og slette unødvendige biter av stripene med thehelp av Shape Builder Tool (Shift-M)
ved å velge alle objekter og klikke uønskede deler mens du holder nede Alt
tasten.
Trinn 9
Form aneven 3,5 x 3,5 px
sirkel, krysset thetop siden av oransje stripe, og kopiere den til høyre ved å holde både Alt andShift og dra form. Trykk på Ctrl-D
flere ganger for å lage flere kopier av sirkelen. Deretter velger du alle kopier andturn dem inn i en Compound Sti
bypressing Ctrl-8.
Velg
sirkler og oransje stripe andapply Minus Front
funksjonen til cutout hullene, noe som gjør stripe perforert.
Til slutt placethe piktogrammer at vi opprettet tidligere, og justere dem til sentrum av ouricon.
Trinn 10
Den siste ikon av vår settet er på Kalender-ikonet. Den består av tekst, laget med Helvetica Neue skrift og en enkel hvit ikon basen.
Great Job! Apple Watch Hjem skjermen Ikoner Ferdig!
Dette var en lang, men spennende oppdrag! Vi har laget totalt 20 Hjem-skjerm app ikoner, ved hjelp av grunnleggende former, warp effekter og noen triks og effekter. Jeg håper du har hatt glede av å følge denne guiden og fant noen nyttige teknikker. Lykke til med ditt design! Anmeldelser