skabe et sæt af æble - ikoner i adobe illustrator,,,,,, hvad du vil skabe,,, i denne forelæsning vil vi skabe en række faste ikoner for æble - ur, der kan findes på den oprindelige æble se hjemme skærm menu ved misligholdelse.vi vil bruge grundlæggende former og warp virkninger samt nogle mere komplicerede metoder i en trendy brugergrænseflade design.lad os komme i gang!,,, 1.æble - ikon retningslinjer, æble - ikoner er udformet i en trendy flade stil meget lig den programmerbare ikoner, som findes i den seneste programmerbare på iphone, ipad eller andre æble anordninger.men alligevel er der en bemærkelsesværdig særlige kendetegn: ikonerne er runde.i denne forelæsning, vi vil bruge en runde net for at skabe et fælles grundlag for alle ikon.du kan downloade en meget fin ikon skabelon i vektor for at gøre det lettere at arbejde med.,, hvis du er interesseret i mere uddybende teori om ikon oprettelse for æble - ur, jeg vil stærkt anbefale, at du løber gennem den officielle æble se menneskelige grænseflade retningslinjer og specifikationer., også kontrollere disse meget nyttige og beskrivende artikel "at skabe ikoner for æble ur" og "ikoner for æble - se – den definitive vejledning", hvor man deler deres frie skabeloner og viden om at skabe skik ikoner.,, nu er det tid til at komme videre og skabe æble - ikoner.hvis du vil have din ikoner for at være mere pixel perfekt og virkelighedstro, ligesom den oprindelige æble se billeder, du kan finde en stikprøve billede af æble - se hjemme skærm i google billeder., fil > sted, det på din artboard og bruge det som en skabelon, at jeres ikoner på toppen af det, bevarelse af den ønskede størrelse og omfang.ellers, bare følg denne forelæsning som et inspirerende vejledning, ikke som en streng instruks om oprettelse af nøjagtige kopier af de originale ikoner., 2.skabe, post og musik app ikoner, trin 1, start ved at åbne en af ikon - modeller (for denne forelæsning, vi vil bruge den, 80 x 80 px, ikon skabelon for, 38 mm, se).gå til betragtning > skjule net, til at gøre det usynlige, hvis det irriterer dig, men vær sikker på, at du har det, kloge vejledninger og mig, gjorde det muligt for (du kan finde dem i samme menu) for at gøre det lettere at arbejde med.,,,,, trin 2, lad os begynde at skabe vores første ikon for tiden app ved at placere, 4 x 4 px, selv cirkel i centrum af modellen.double click, ellipse værktøj (l), at kalde sig muligheder vindue, og derefter tager til, tilpasse, panel til at tilpasse den cirkel, horisontalt og vertikalt på artboard.fyld den cirkel med orange, (# ff9506).,,,,, trin 3, anvendelse, rektangel værktøj (m), at skabe et, 2 x 40 varer, den anden side af vores ur, fyldt med samme orange farve, og det med de centrale retningslinjer, som vist på skærmbillede.,,,,, du kan tilpasse den hånd, de vigtigste formål, ved at klikke den cirkel, samtidig med den, alat, nøgle.,,,,, trin 4, lad os kopiere den anden side gøre det kortere, og drej den til - 60 grader,, at det langs den vejledning, som vist nedenfor.,,,,, nu skal vi være organ i det øjeblik.en sort, 4 x 30 px, rektangel og bruge levende hjørner, træk at gøre begge ender afrundet ved at trække små cirkel markører med direkte valg værktøj, litra a), til deres maksimale (, 2 px, hjørne radius i vores tilfælde).,,,,, trin 5, lægge hånd på plads i retningslinjerne (du kan gøre det en smule mindre, så det passer til den indre cirkel af ikon base).,,,,, trin 6, skaber et rektangel, 4 x 20 px, størrelse til time side.gøre det afrundede drejes til 60 grader, og på den anden side, lige fra hånden.,,,,, trin 7, endelig skabe et 80 x 80 px, hvide elipse med, ellipse værktøj (l), til ikon base, og det under alle andre genstande.godt!vores første ikon er klar, lad os komme til den næste.,,,,, trin 8, nu skal vi skabe den mail ikon.start, der danner ramme med en 50 x 33 px, rektangel af enhver farve.,,,,, tilføje en trekant med 2 pt slagtilfælde, enten ved hjælp af en polygon, værktøj, med 3 sider, værdi eller med pen værktøj (p).objekt > udvide trekanten med at omsætte det til kurver.,,,,, trin 9, tilføjer endnu en trekant på oversiden af finansieringsrammen, base, gøre sin lavere hjørne afrundet og udvide form.du kan slette den øverste og nederste del af kvadratisk eller rektangulær form med, også værktøj (shift-e), som vi ikke har brug for dem.,,,,,,,, slette den øverste del af den lavere trekant med, også værktøj (shift-e) og forene begge dele af trekanter, stifinder.endelig, en kopi af den grundlæggende ramme form (control-c > control-f), udvælger både rektangel og top form, og brug, krydser funktion, stifinder, at skære de dele uden kuverten.,,,,, trin 10, udvælge rektangel og striber igen og anvendelse den minus foran, funktion, stifinder, at skære de linjer.skifte farve af finansieringsrammen for hvidt og tilføje en cirkel grundlag for vores ikon, fylde den med lineær gradient fra mørke blå (,ࠒf0,) på toppen, lettere blå (,
dd4fd,) i bunden.,,,,, trin 11, vores næste ikon for musik - app, der består af kun element: en musik - note tegn.start, der noterer med a, 27% 11 px, rektangel.vælg anker punkt på den venstre side i form af direkte valg værktøj (a), og trække dem ned for at få form skævt.,,,,, trin 12, anvendes den, rektangel værktøj (m), til at skabe to former og begynde at danne "ben" af noten.,,,,, trin 13, udvælge tre ophæng af lavere square med direkte valg værktøj (a), og gøre dem herfra.så, forene, profiler, stifinder, og få hjørnet mellem former, afrundet, som ved hjælp af levende hjørner, træk.,,,,, trin 14, tilføjer den anden del af noten og gøre den generelle udformning, mere smidig og afrundet.færdig med ikonet af basen, fyldt med lineær gradient fra orange (,&#fa5d3b) til pink (,&#ff2968,).,,,,, 3.gør verden ur, stopur, timer og alarm ikoner, trin 1, nu går vi til en række ikoner i forbindelse med tiden, og alle, der er skabt i samme stil.start ved at danne en 48 - x - 48 px, cirkel, og en mindre cirkel indeni.brug den, minus foran, funktion, stifinder, at skabe en ring.,,,,, trin 2, skabe en mindre, elliptiske ring i den første udformning og tilføje to krydsede linjer, justeret for centret.,,,,, tilføje en vandret linje i den øvre del af form og få den ved hjælp af virkning > warp > arc.sæt den horisontale kurve, værdi og - 35%.,,,,,, trin 3, tilføjer endnu en bøjet linje i den nederste del af vores klode og afslutte dette ikon, ved at udvide verden form og udgør en gradient base med mørk orange bund (,&#ff7632,) og lys orange top (,&#ff9408,).tilføje en mindre cirkel af mørk orange farve (,&#e45221,) og gemme dem bag verden form, give det større modsætning.,,,,,, trin 4,,, til vores næste ikon stopuret, vi bruger basen fra verdens ur ikon, vi har skabt hidtil.formular center for stopuret, ved at foretage en, 8 x 8 px, ellipse, justeret med en, 2 x 25 px, rektangel for øje er brugt.,,,,, trin 5, anvendes den, rektangel værktøj (m), at tilføje mindre detaljer til toppen af vores stopur.den knap, stopuret mere afrundet med levende hjørner og om hjørnet radius til 1,4 forsyning.,,,,,, trin 6, lad os gå videre til timeren ikon har det samme grundlag som stopur ikon.formular a, 2, 5 x - 13 px, stribe i midten, øverste del af ringen med, rektangel værktøj (m).så tag den, polygon værktøj, fastsættelse af, sider, mængde, 3, eller bruger de pen værktøj (p), at danne en trekant.det viser et skærmbillede nedenfor, som om det er et stykke tærte.,,,,, trin 7, udvælge, både de grundlæggende hvid ring og trekanten form og anvendelse, minus foran, funktion at afskære den venstre del af ringen.tilføje en lille, 6 x 6 px, cirkel, i centrum for vores ikon.,,,,, trin 8, endelig drejes cirkel, således at dets øverste anker punkt er 45 grader til venstre.drag anker punkt med direkte valg værktøj a), forlængelse af form.omdanne udvalgte anker punkt til hjørne, enten ved hjælp af omdanne, knap i panelet eller ved at klikke med anker punkt værktøj (shift-c), således at vores form i hænderne på et ur.,,,,, trin 9, vores sidste ikon i dette sæt er alarmen.det har samme base, med hvid ring som tidligere orange ikoner.hænderne på uret dannes med to smalle striber med, rektangel værktøj (m).,,,,,, trin 10, lad os danne den øvre del af uret ved at gøre en cirkel med, ellipse værktøj (l), og at det i to lige store dele ved at klikke siden ophæng med den saks værktøj (c)., den halve på toppen af alarmen, og tilføje to små "ben" i bund for at afslutte den ikon.,,,,, 4.skabe de kort, vejr og kamera app ikoner, trin 1, kortene ikon er ret enkle og ikke indeholder så mange elementer.start ved at danne centrum med 40 x 40 px - kredsen af en blå (,Weff) farve.form et kompas, pil af, 17 x 25 px, trekant, pos.,,,,, trin 2, tilføje en beige (,&#e5decb) ikon base.gå til objekt > vej > der tilsættes ophæng, og udvælge de anker midt på bunden og trække den lidt op, udgør den pilespids.,,,,, trin 3, en bred vertikale stribe, med et, 26 x 83,5 px, rektangel, på tværs af ikon - og forene det med en lang stribe, sætte det på.gem den krydsede form bag den blå cirkel med pilen.vælg både bunden af ikon og krydsede striber og anvende, dele, funktion, stifinder, at opdele den form i tre dele.,,,,, trin 4, udfylde de dele af ikon base med grønne (,Nc73d,) og lyserød (,&#fbc7d2) farver.,,,,, trin 5, lad os gå til vejret ikon.fyld den grundlæggende sky form med lineær gradient fra mørke blå (,ࠒf0,) på toppen, lettere blå (,
dd4fd,) i bunden.tilføje en gul (lineær gradient fra&#ffc505, til&#fee403) rundt i solen i den venstre del af ikon.start, der danner skyer med to cirkler: en, 25 x 25,5 px - kredsen i midten af modellen og 21 x 21 px - kredsen tættere til højre del af ikon.,,,,, trin 6, skabe, 43% 16 px, rektangel og gøre sin afrundede kanter med 8 px, hjørne radius.tilpasse rektangel med kredse, og samle alle tre former for pathfinder, at danne en gnidningsløs afrundet sky.,,,,, trin 7, fylde sky med hvid farve og gøre det delvist gennemskuelige, at sænke, uklarhed, til 90%.,,,,,, trin 8, lad os gå over til kamera ikon.en grå grundlæggende cirkel, fyldt med lineær gradient fra mørkegrå (,e9196,) i bunden til lettere grå (,&#dadcdd, på toppen og begynde at danne kameraet silhouette fra en mørkegrå (,c3c3c) afrundet rektangel.,, tilføje en mindre, 30 x 17 px, rektangel på toppen og gøre dets øverste venstre hjørne, afrundet, 7 px, hjørne radius., forene, former og få hjørnet mellem former rundet så godt.,,,,, trin 9, tilsættes en smal stribe i den øvre del af kamera og bruge minus foran, funktion for at skære det ud.,,,,, form lukkeren ikon fra en 9 x 4 px, rektangel, og det det centrale i vores model.bruge pen værktøj (p), at tilføje en pil peger på knappen.sæt, slagtilfælde, vægt, 4 pkt., og gøre hætter og hjørne af den linje, afrundes i den, slagtilfælde, panel.,,,,, trin 10, tilføje de sidste detaljer til vores kamera: form i en gul (,&#fac81b) indikator for en 6 x 6 px, størrelse.yderligere, skabe en stor cirkel med 4 pt slagtilfælde vægt.den cirkel i nederste højre hjørne af kameraet, som vist på skærmbillede.,,,,, trin 11, objekt > udvide, den store cirkel, idet det i ringen.vælg den ring og kameraet og anvendelse, minus foran, til skåret ud af ringen, der er genstand glas.så vælg alle mørkegrå dele af vores kamera og gøre dem til en enkelt sammensat form ved presning, control-8,.,,,,, endelig brug, form bygmester værktøj (shift-m), eller de, krydser funktion, stifinder, at fjerne unødvendige dele af kameraet uden for basen af vores,,,,, ikon. 5.få telefonen, meddelelser og fjerntliggende app ikoner, trin 1, lad os lave en håndsæt til telefonen ikon.skabe et, 8 x 40 varer, rektangel og anvende en er warp virkning, med 27%, vertikal kurve, værdi og bøj rektangel til venstre side.tilføje to, 17 x 20 varer, undtagen i de øverste og nederste del af en mobiltelefon og gøre deres afrundede kanter, at formerne glat., forene alle dele af håndsæt, stifinder.,,,,,, trin 2, lette den venstre side af håndsæt ved bortfald af unødvendig ophæng med, slette anker punkt redskab (-), og om den indvendige hjørner med levende hjørner, træk.endelig tager telefonen, 45 grader, og det er over ikon base, fyldt med lineær gradient fra lettere green (,Vfb71) til mørke grønne (,�fd51c,).,,,,, trin 3, lad os danne besked ikon for samme grønne base, som vi har brugt tidligere.en 40 x 40 varer, hvide cirkel og udvide det til side, en smule, at formen mast til 48 x 40 forsyning.tilføje en lille trekant i bunden af den hvide form, der udgør en tale boble.den lavere hjørne af trekanten let afrundede.brug den, er warp virkning, med - 36% vertikale bøje, værdi, at trekanten let buede.,,,,, her er, hvordan den udfyldte ikon ser ud.,,,,, trin 4, vores næste ikon er fjernbetjeningen app ikon, som også er meget enkel og består af et enkelt element.for det første udgør en gradient base (mørkeblå,ࠒf0 i bunden til lettere blå,
dd4fd,) på toppen.tilføj hvide slagtilfælde, 5.3 pt slagtilfælde vægt, og tilpasse det til indenfor.og en 30 x 30 px, hvide trekant i centrum for vores ikon.,,,,, trin 5, endelig gøre hjørner af trekanten afrundet med en radius på 2,5, hjørne.godt!ikonet er klar, lad os komme videre.,,,,, 6.skabe lidt motion, miljøer og billeder app ikoner, trin 1, workouten ikon viser et stiliseret omridset af en løbende mand.skabe et stærkt symbol base, fyldt med lineær gradient fra gullig grøn (,&#c2ec38,) på toppen, grøn i bunden (,&#a3fc3f,).,, tag pen værktøj (p) og oprette separate budgetposter for bent arme, ben og krop med 3 pt slagtilfælde vægt, afrundet hætter og hjørner., øge tykkelsen af det, slagtilfælde vægt af torsolinjen, 6 pkt., og tilføje en, 9 x 9 varer, rundt i hovedet.,,,,, trin 2, objekt > udvide de linjer og udfylde de former med sort farve.,,,,, trin 3, indstillingerne ikon består af en del.danne cog base fra 48 x - 48 px, en cirkel med et cut - out center, en ring.tilføj tre linjer med 3 pt slagtilfælde vægt, der i midten af ikon - model.,,,,, trin 4, skal vi nu til at tilføje det til vores del.formular a, 5 x 9 varer, rektangel og gøre det øverste del lidt smallere.dets øvre hjørner afrundes med, 1.6, hjørne radius.det blev på den øverste og nederste del af cog base.,, lad os bruge, skifte værktøj (r), at tilføje flere elementer.vælg to bølger, double-click, skifte værktøj (r), at kalde sig muligheder vindue, og der drejes, værdi, 360 /18. denne vej, adobe illustrator automatisk vil beregne den korrekte værdi for, 18, former.tryk, kopi, button.,,,,, trin 5, presse, control-d, flere gange at gentage vores sidste handling, at tilføje flere elementer.for at afslutte dette ikon, vælge alle bølger, skifte fylde farve hvid og roterer, dem alle sammen af -, 10 grader.,,,,, trin 6, vores næste symbol er et stiliseret blomst til billederne app.start ved at danne de penge fra, 20 x 30 px, rektangel og gøre sin afrundede kanter med 10 px, hjørne radius.at kopiere petal og sin kopi i den nederste del af ikon - model, som er angivet i den skærmbillede nedenfor.vælg to blade og bruge drej værktøj (r) for at få yderligere otte eksemplarer af kronblade, ved at anvende den, 360 /8 vinkel, værdi og presning, kopi, button.,,,,, trin 7, presse, control-d, flere gange til de otte petal blomst.- blade, formere sig blanding tilstand og lavere, uklarhed, til 80%.lad os anvende passende farve til hver enkelt kronblad, fra den øverste midterste og flytte ur klogt: orange (,&#fa9700,), gul (,&#f0e22c,), grøn (,&#b5d558,), turkis (,ec19d,), blå (,Gb5e1,), violet (,f60c3,), pink (,&#d782a4,) og rød (,&#ff2c2c,).,, læg den blomst på den hvide ikon base.,,,,, 7.bevirker, at de lagre, aktivitet, passbook og kalender ikoner, trin 1, lagrene ikon består af en minimalistisk diagram.start af diagrammet, ved at foretage en lyseblå (,a6f5) lodret linje af 3 pkt., størrelse med, linje værktøj (l). og det midt i vores model, på en mørk (,f3f3f) ikon base.,, tilføje en lille blå ring over midten af modellen og anvende en mørkegrå (,f3f3f,), 1 pkt., slagtilfælde, at det med henblik på at adskille det visuelt fra linjen.tilføje fire linjer på begge sider af ikon, med en mindre grå (,򇨣,), 3, pt slagtilfælde.,,,, objekt > udvide de linjer og skærer unødvendige dele uden for ikon base, enten med den form, bygmester værktøj (shift-m) eller ved hjælp af, stifinder.,,,,,, trin 2, og slutte af med ikonet ved at tilføje en zigzagged overensstemmelse med 1, 5 pt slagtilfælde, for det grafiske ved hjælp af pen værktøj (p)., udvide den linje, og få den til at passe ikon - basen.,,,,, trin 3, aktiviteten ikon er mere kompliceret og interessant at gøre.den består af tre farverige gradient kredse.for at danne en cirkel, vi er nødt til at gøre en blanding - gruppen.,, to lige, 6 x 7, forsyning, kvadratisk eller rektangulær form af pink (,&#ff2b91,) og rød (,&#f1281e) farver.udvælgelse af kvadratisk eller rektangulær form og gå imod > blanding > gøre. kan du klippe de indstillinger, objekt > blanding > blanding af muligheder, en farve, for at lave en god homogen blanding.få skabt blanding gruppe til børster, panel og skabe en ny art børste med standardindstilling.,,,,, trin 4, skabe en mørkegrå (,񠉯) cirkel grundlag for vores symbol og en cirkel på toppen af det, anvendelsen af vores møde som et slagtilfælde, tilpasse størrelsen. en cirkel, så det passer til den ydre kant af ikon - model.sæt, slagtilfælde, vægt, 1 pkt., og imod > udvide udseende, til at vende den børste, slagtilfælde i form.roter eller flip form med, afspejler værktøj (o), horisontalt, hvis der er behov for det, så har vi den lyserøde side af cirkel på venstrefløjen og den røde til højre., skabe en små pink (,&#ff2b91) cirkel, og det er i den øverste centrale område af den sorte ring, så den passer til højden af den form, der skjuler den forbindelse af de to farver.,,,,, trin 5, skal vi nu tilføje dimension til ringen, ved at danne en diskret skygge.som du kan se, ringen blev opdelt i flere dele, når vi har udvidet det.det er præcis, hvad vi behøver.vælg den øverste røde stykke af ringen, kopi, og pasta i front (control-c > control-f).fyld den kopi med lineær gradient fra mørkerød (,&#a11b17,) for hvidt, og gå over til at multiplicere blanding tilstand, således at det hvid spids af gradient usynlig.,,,,, trin 6, anvendes den samme teknik til at skabe to mere farverige ringe i den første form.skabe kunst børster fra en gul (,&#d8ff06,) og green (,Ve402) blanding af gruppe og fra en turkis (,ffaa,) og blå (,e3f9) blanding.færdig med ikonet ved at tilføje kredse og anvende blid skygger.,,,,, trin 7, den næste er passene ikon, der består af fire små piktogrammer: et kreditkort, et fly, et filmkamera og en kop.disse piktogrammer er minimalistisk, fremstillet af grundlæggende former ved hjælp af stifinder, og leve hjørner, træk.nedenfor kan du se en trinvis skærmbillede, som viser, hvordan at kombinere de former for hver piktogram.,,,,, trin 8, bunden af ikon består af fire striber af forskellige farver: rød (,&#ff4e46,), blå (,Ʒeca,), grøn (,dca36,) og orange (,&#ffa02b,), der hver 20 px, højde.skabe en misligholdelse, 80 x 80 px - kredsen grundlag for vores ikon og fjerne unødvendige stykker af striber ved hjælp af form bygmester værktøj (shift-m), ved at vælge alle genstande, og at de uønskede dele samtidig med den, alat, nøgle.,,,,, trin 9, udgør en endnu, 3,5% 3.5 px - kredsen, på toppen af den orange stribe, med kopi til højre ved at holde begge, alat, og skift, og trække formen.presse, control-d, flere gange til at lave flere kopier af cirklen.så vælg alle kopier og gøre dem til en, sammensatte kurs ved presning, control-8., udvælge, cirkler og orange stribe og anvende, minus foran, funktion at klippe huller, at den stribe perforeret.og endelig de piktogrammer, at vi skabte tidligere og tilpasse dem til centrum for vores ikon.,,,,, trin 10, sidste ikon af vores er kalenderen ikon.det består af en tekst, der med helvetica neue skrifttype og en simpel hvide ikon base.,,,,,, godt arbejde!æblet se hjemme skærm ikoner er færdig!,,, det var en lang, men spændende mission!vi har skabt i alt 20 hjem skærm app ikoner med grundlæggende former, warp virkninger og nogle tricks og virkninger.jeg håber du har nydt efter denne vejledning og fandt nogle nyttige metoder.held og lykke med dit design.,,,,