Share
Ce veți creaÎn acest tutorial vom crea un set de icoane plate pentru Apple Watch, care pot fi găsite în meniul inițial Apple Watch Home Screen în mod implicit. Vom folosi forme de bază și Efecte de Warp, precum și câteva metode mai complicate de a realiza un design trendy al interfeței utilizator. Să începem!
Pictogramele Apple Watch sunt proiectate într-un stil plat, la modă, foarte asemănător cu pictogramele iOS, care pot fi găsite în cele mai recente iOS de pe iPhone, iPad sau alte dispozitive Apple. Cu toate acestea, există o caracteristică notabilă specifică: icoanele sunt rotunde. În acest tutorial vom folosi o rețea rotundă pentru a crea o singură bază pentru fiecare pictogramă. Puteți descărca un șablon de pictograme foarte frumos în vector pentru a face mai ușor de a lucra cu.
Dacă sunteți interesat de o teorie mai aprofundată privind crearea de pictograme pentru Apple Watch, aș recomanda cu insistență să rulați manualul și specificațiile Apple Watch of Human Interface.
Verificați, de asemenea, aceste articole foarte utile și descriptive "Crearea de pictograme pentru ceasul Apple" și "Pictogramele pentru ceasul Apple - ghidul definitiv", unde oamenii împărtășesc șabloanele și cunoștințele lor gratuite cu privire la crearea de pictograme personalizate.
Acum este timpul să mergeți mai departe și să creați pictogramele Apple Watch! Dacă doriți ca icoanele dvs. să fie mai pixel-perfecte și mai reale la viață, cum ar fi pictogramele originale Apple Watch, puteți găsi o mostră de imagine a ecranului Apple Watch Home în Google Images. Fișier> Locul pe placa dvs. Artboard și folosiți-o ca șablon, desenând icoanele deasupra ei, păstrând dimensiunile și proporțiile dorite. Altfel, urmați acest tutorial ca un ghid inspirat, nu ca o instrucțiune strictă în crearea copiilor exacte ale icoanelor originale.
Începeți prin a deschide unul dintre șabloanele de pictograme (pentru acest tutorial vom folosi 80 x 80 px șablon pentru șablonul pentru 38 mm ceas). Mergi la Afișați> Ascundeți grila pentru a face grila invizibilă în cazul în care vă distrage atenția, dar asigurați-vă că aveți Ghiduri inteligente și snapping activată (puteți să le găsiți în același meniu) pentru a vă ajuta să lucrați mai ușor.
Să începem să creăm prima noastră pictogramă pentru aplicația Time, plasând o 4 x 4 px chiar și cercul din centrul șablonului. Faceți dublu clic pe Instrument de elipsă (L) pentru a apela fereastra de opțiuni pop-up și apoi să mergeți la Alinia pentru alinierea cercului pe orizontală și pe verticală pe Artboard. Umpleți cercul cu portocaliu (# FF9506).
Folosește Instrumentul dreptunghiular (M) pentru a crea un 2 x 40 px mâna a doua a ceasului nostru, umplută cu aceeași culoare portocalie și plasați-o de-a lungul liniei de ghidare centrală, așa cum se arată în captura de ecran.
Poti alinia mana la obiectul cheie, dând clic pe cerc în timp ce țineți apăsată tasta Alt cheie.
Să copiem mâna a doua, să o facem mai scurtă și să o rotim -60 de grade, plasându-l de-a lungul Ghidului, după cum se arată mai jos.
Acum vom forma corpul mâinii minute. Faceți un negru 4 x 30 px dreptunghi și utilizați Live Corners caracteristică pentru ca ambele capete să fie rotunjite prin tragerea marcatorilor de cercuri mici cu Instrumentul de selecție directă (A) la maxim (2 px raza de colț în cazul nostru).
Așezați mâna pe locul potrivit de-a lungul liniei de ghidare (puteți face puțin mai mic, astfel încât să se potrivească cu cercul interior al bazei pictogramelor).
Creați un alt dreptunghi din 4 x 20 px dimensiunea pentru mâna oră. Faceți-o rotunjită, rotiți-o 60 de grade și plasați-o pe partea opusă mâinii minuscule.
În cele din urmă, creați un 80 x 80 px elipsă albă cu Instrument de elipsă (L) pentru baza de pictograme și plasați-o sub toate celelalte obiecte. Grozav! Prima noastră icoană este gata; să trecem la următoarea.
Acum vom crea pictograma Mail. Începeți să formați plicul făcând a 50 x 33 px dreptunghi de orice culoare.
Adăugați un triunghi cu 2 pt Stroke fie folosind a Instrumentul pentru poligoane cu 3 părți valoare sau cu Instrument Pen (P). Obiect> Extindeți triunghiul să-l transforme în curbe.
Adăugați un alt triunghi pe partea superioară a bazei plicului, faceți colțul inferior rotunjit și extindeți forma. Puteți șterge părțile superioare și inferioare ale dreptunghiurilor cu Instrumentul de ștergere (Shift-E), deoarece nu le vom avea nevoie.
Ștergeți partea de sus a triunghiului inferior cu Instrumentul de ștergere (Shift-E) și Uni ambele părți ale triunghiurilor din deschizător de drumuri. În cele din urmă, faceți o copie a formei plicului de bază (Control-C> Control-F), selectați atât dreptunghiul cât și forma de sus și utilizați intersecta funcția de deschizător de drumuri pentru a tăia părțile din afara plicului.
Selectați dreptunghiul și dungile din nou și aplicați Minus Front funcția de deschizător de drumuri să taie liniile. Schimbați culoarea plicului în alb și adăugați o bază de cerc pentru pictograma noastră, umplând-o cu un gradient liniar de la albastru mai întunecat (# 2066F0) deasupra albastru deschis (# 1DD4FD) în partea de jos.
Următoarea pictogramă este pentru aplicația Muzică, care constă din singurul element: un semn de muzică. Începeți să formați nota cu a 27 x 11 px dreptunghi. Selectați punctele de ancorare din partea stângă a formei cu Instrumentul de selecție directă (A) și trageți-le în jos pentru a face forma înclinată.
Folosește Instrumentul dreptunghiular (M) pentru a crea alte două forme și a începe formarea "piciorului" notei.
Selectați trei puncte de ancorare ale pătratului inferior cu Instrumentul de selecție directă (A) și le face rotunjite. Atunci Uni formele din deschizător de drumuri și face colțul dintre formele rotunjite, folosind și Live Corners caracteristică.
Adăugați cea de-a doua parte a notei și transformați forma globală într-o formă netedă și rotunjită. Finalizați-vă cu pictograma făcând baza, plină cu gradient liniar din portocaliu (# FA5D3B) la roz (# FF2968).
Acum ne îndreptăm spre un set de icoane legate de timp și toate create într-un singur stil. Începeți prin formarea unui 48 x 48 px chiar cerc, și un cerc mai mic înăuntru. Folosește Minus Front funcția de deschizător de drumuri pentru a crea un inel.
Creați un inel mai mic, eliptic în interiorul primei forme și adăugați două linii încrucișate, aliniate la centru.
Adăugați o linie orizontală în partea superioară a formei și o îndoiți cu ajutorul Efect> Warp> Arc. Seteaza Bend orizontal valoare pentru -35%.
Adăugați o altă linie îndoită în partea de jos a globului nostru și terminați cu această pictogramă prin extinderea formei globului și formarea unei baze de gradient cu fundul închis de culoare portocaliu închis (# ff7632) și culoarea portocaliu deschis (# ff9408). Adăugați un cerc mai mic de culoare portocalie întunecată (# e45221) și ascunde-o în spatele formei globului, oferindu-i mai mult contrast.
Pentru următoarea pictogramă - Cronometrul - vom folosi baza de la pictograma ceasului mondial pe care am creat-o anterior. Formați centrul cronometrului făcând a 8 x 8 px elipsă, aliniată cu a 2 x 25 px dreptunghi pentru mâna a doua a ceasului.
Folosește Instrumentul dreptunghiular (M) pentru a adăuga detalii minore în partea superioară a cronometrului nostru. Faceți butonul cronometrului mai rotunjit, utilizând Cornerele live și setând raza de colț la 1,4 px.
Să trecem la pictograma Timer - are aceeași bază ca și pictograma Cronometru. Formați a 2,5 x 13 px banda în partea centrală de sus a inelului cu Instrumentul dreptunghiular (M). Apoi apucă Instrumentul pentru poligoane, setarea feţe cantitate pentru 3, sau utilizați Instrument Pen (P) pentru a forma un triunghi. Așezați-o ca imagine pe o captură de ecran de mai jos, ca și cum ar fi o felie de plăcintă.
Selectați atât inelul alb de bază, cât și forma triunghiului și utilizați Minus Front pentru a decupa partea stângă a inelului. Adăugați un mic 6 x 6 px cerc în centrul icoanei noastre.
În cele din urmă, rotiți cercul astfel încât punctul său superior de ancorare să fie aproximativ 45 de grade la stanga. Trageți punctul de ancorare cu Instrumentul de selecție directă (A), extinderea formei. Conversia punctului de ancorare selectat în colț fie cu ajutorul Convertit butonul din panoul de control superior sau făcând clic pe el cu Ancora Punct Tool (Shift-C), transformând astfel forma noastră în mâna unui ceas.
Ultima noastră pictogramă din acest set este alarma. Are aceeași bază cu inelul alb ca și pictogramele portocalii anterioare. Mâinile ceasului sunt formate cu două dungi înguste realizate cu Instrumentul dreptunghiular (M).
Să formăm partea superioară a ceasului de alarmă făcând un cerc uniform cu Instrument de elipsă (L) și împărțind-o în două părți egale făcând clic pe punctele de ancorare laterale cu Instrumentul pentru scule (C). Așezați jumătățile deasupra alarmei și adăugați două picioare mici în partea inferioară pentru a termina pictograma.
Pictograma Hărți este destul de simplă și nu conține atât de multe elemente. Începeți prin formarea centrului cu un a 40 x 40 px cerc albastru (# 087eff) culoare. Formați o săgeată de busolă de la a 17 x 25 px triunghi, în sus.
Adăugați un bej (# e5decb) baza de pictograme. Mergi la Obiect> Cale> Adăugați puncte de ancorare șiselectați punctul de ancorare în mijloc pe partea de jos și trageți-l puțin, formând capul săgeții.
Plasați o bandă verticală largă, realizată cu a 26 x 83,5 px dreptunghi, de-a lungul icoanei, și o uniți cu o altă bandă largă, plasând-o perpendiculară. Ascundeți forma încrucișată în spatele cercului albastru cu săgeata. Selectați atât baza pictogramei, cât și dungile încrucișate și utilizați Divide funcția de deschizător de drumuri pentru a împărți forma în trei părți.
Umpleți părțile pictogramei cu verde (# 78c73d) și roz deschis (# fbc7d2) culori.
Să trecem la pictograma Meteo. Umpleți forma de bază a cerului cu un gradient liniar de la albastru mai întunecat (# 2066f0) deasupra albastru deschis (# 1dd4fd) în partea de jos. Adăugați un gradient liniar galben de la # ffc505 la # fee403) pentru soare în partea stângă a pictogramei. Începeți să formați norii cu două cercuri: a 25,5 x 25,5 px cerc în centrul șablonului și a 21 x 21 px cerc mai aproape de partea dreaptă a pictogramei.
Creeaza o 43 x 16 px dreptunghi și face colțurile sale rotunjite 8 px raza de colț. Aliniați dreptunghiul cu cercurile și Uni toate cele trei forme deschizător de drumuri pentru a forma un nor neted, rotunjit.
Umpleți norul cu culoarea albă și faceți-l semi-transparent, coborând Opacitate la 90%.
Să trecem la pictograma Cameră foto. Faceți un cerc de bază gri, umplut cu gradient liniar din gri închis (# 8e9196) în partea inferioară până la gri mai deschis (#dadcdd) în partea de sus și începeți să formați silueta camerei de la o culoare gri închisă (# 3c3c3c) dreptunghi rotunjit.
Adăugați un număr mai mic 30 x 17 px dreptunghi în partea de sus și face colțul din stânga sus rotunjit cu 7 px raza de colț. Uni formează și fac colțul între formele rotunjite.
Adăugați o bandă îngustă în partea superioară a camerei și utilizați Minus Front funcția de tăiere.
Formați pictograma obturator din a 9 x 4 px dreptunghi și plasați-o în centrul șablonului nostru. Folosește Instrument Pen (P) pentru a adăuga o săgeată îndreptată spre obturator. Seteaza Greutatea accidentală la 4 pct și face capacele și colțul liniei rotunjite în Accident vascular cerebral panou.
Adăugați detaliile finale camerei noastre: formați o culoare galben strălucitoare (# fac81b) indicator al a 6 x 6 px mărimea. Mai mult, creați un cerc mare cu 4 pt greutate a cursei. Plasați cercul în colțul din dreapta jos al camerei, așa cum se arată în captura de ecran.
Obiect> Extindeți cercul mare, transformându-l în inel. Selectați atât inelul, cât și camera foto și aplicați Minus Front pentru a tăia inelul, formând obiectul-sticlă. Apoi, selectați toate părțile gri închise ale camerei noastre și transformați-le într-o singură formă combinată apăsând Control-8.
În cele din urmă, utilizați Shape Builder Tool (Shift-M) sau intersecta funcția de deschizător de drumuri pentru a tăia părțile care nu sunt necesare camerei în afara bazei pictogramei noastre.
Să facem un telefon pentru pictograma Telefon. Creaza un 8 x 40 px dreptunghi și utilizați un Arc Effect Warp cu 27% Vertical Bend pentru a îndoi dreptunghiul în partea stângă. Adăugați două 17 x 20 px dreptunghiuri în partea superioară și inferioară a receptorului și pentru a face colțurile lor rotunjite, făcând ca aceste forme să fie netede. Uni toate părțile telefonului în deschizător de drumuri.
Îndepărtați partea stângă a receptorului ștergând punctele de ancorare care nu sunt necesare cu ajutorul Ștergeți instrumentul pentru punctul de ancorare (-) și în jurul colțurilor interioare cu Live Corners caracteristică. În cele din urmă, rotiți telefonul la 45 de grade și plasați-o deasupra bazei pictogramelor, umplută cu un gradient liniar de la verde mai deschis (# 86fb71) până la verde mai închis (# 0fd51c).
Să formăm pictograma Mesaj pe aceeași bază verde pe care am folosit-o anterior. A face o 40 x 40 px cercul alb și extinde-l spre laturi un pic, făcând forma înfundată 48 x 40 px. Adăugați un triunghi mic în partea de jos a formei albe, formând o bule de vorbire. Faceți colțul inferior al triunghiului ușor rotunjit. Folosește Arc Effect Warp cu -36% îndoire verticală valoare pentru a face triunghiul ușor arcuit.
Iată cum arată pictograma completă.
Următoarea pictogramă este pictograma Aplicație la distanță, care este, de asemenea, foarte simplă și constă dintr-un singur element. Mai întâi, formați o bază de gradient (de la albastru închis # 2066f0 în partea de jos a albastru deschis # 1dd4fd) deasupra. Adăugați un accident vascular cerebral alb cu 5,3 pt Greutatea cursei și Alinia aceasta spre interior. Plaseaza o 30 x 30 px triunghi alb în centrul icoanei noastre.
În cele din urmă, faceți colțurile triunghiului rotunjite cu a 2.5 Raza de colț. Grozav! Pictograma este gata, deci hai să mergem mai departe.
Pictograma antrenament descrie o siluetă stilizată a unui om care rulează. Creați o bază pictogramă luminată, umplută cu un gradient liniar de culoare galben-verzui (# c2ec38) pe partea de sus a verde în partea de jos (# a3fc3f).
Luați Instrument Pen (P) și să creați linii separate pentru brațele, picioarele și torsul îndoite cu 3 pt Greutatea cursei și capace și colțuri rotunjite. Măriți grosimea Greutatea accidentală a liniei de trunchi la 6 pt și adăugați a 9 x 9 px cerc pentru cap.
Obiect> Extindeți linii și umpleți formele cu culoarea neagră.
Pictograma Setări constă dintr-o roată. Formați baza de zgomot din a 48 x 48 px cerc cu un centru de decupare, făcând un inel. Adăugați trei linii cu 3 pt Greutatea cursei, conectat în centrul șablonului de pictograme.
Acum trebuie să adăugăm buzunarele în cealaltă. Formați a 5 x 9 px dreptunghi și face partea superioară mai puțin îngustă. Faceți colțurile sale superioare rotunjite cu 1.6 Raza de colț. Așezați buzunarele pe părțile superioare și inferioare ale bazei.
Să folosim Rotiți instrumentul (R) pentru a adăuga mai multe elemente. Selectați ambele valori, faceți dublu clic pe Rotiți instrumentul (R) pentru a apela fereastra de opțiuni pop-up și a seta Roti valoare pentru 360/18. În acest fel, Adobe Illustrator va calcula automat valoarea corectă pentru 18 forme. apasă pe Copie buton.
presa Control-D de mai multe ori pentru a repeta ultima noastră acțiune, adăugând mai multe elemente. Pentru a termina cu această pictogramă, selectați toate valori, schimbați culoarea de umplere în alb și Roti toți împreună -10 grade.
Următoarea imagine este o floare stilizată pentru aplicația Fotografii. Începeți prin formarea petalei de la a 20 x 30 px dreptunghi și face colțurile sale rotunjite 10 px Raza de colț. Duplicați petalul și plasați copia acestuia în partea de jos a șablonului cu pictograme, după cum se arată în imaginea de mai jos. Selectați ambele petale și utilizați Rotiți instrumentul (R) pentru a face opt mai multe copii ale petalelor, prin aplicarea 360/8 Angle valoarea și apăsarea butonului Copie buton.
presa Control-D de mai multe ori pentru a forma floarea de opt petale. Schimbați petalele Înmulțiți modul de amestecare și coborâți Opacitate la 80%. Să aplicăm culoarea potrivită fiecărei petale, pornind de la partea superioară mijlocie și în mișcare cu ceas: portocaliu (# fa9700), galben (# f0e22c), verde (# b5d558), turcoaz (# 6ec19d), albastru (# 71b5e1), violet (# 8f60c3), roz (# d782a4) și roșu (# ff2c2c).
Puneți floarea pe baza de pictograme albe.
Pictograma Stocuri constă într-o diagramă minimalistă. Începeți să formați diagrama făcând un albastru-strălucitor (# 02a6f5) linia verticală de 3 pct dimensiune cu Instrumentul pentru linii (\). Puneți-o în mijlocul șablonului, pe un strat întunecat (# 3f3f3f) baza de pictograme.
Adăugați un cerc albastru mic deasupra mijlocului șablonului și aplicați o culoare gri închisă (# 3f3f3f) 1 pt Accident vascular cerebral pentru ao separa vizual de linie. Adăugați încă patru linii pe ambele părți ale pictogramei, cu o culoare mai deschisă (# 555555) 3 pt Accident vascular cerebral.
Obiect> Extindeți liniile și tăiați părțile care nu sunt necesare în afara bazei pictogramelor, fie cu Shape Builder Tool (Shift-M) sau cu ajutorul deschizător de drumuri.
Finalizați-vă cu pictograma prin adăugarea unei linii zig-zag cu 1,5 pt Stroke pentru grafica folosind Instrument Pen (P). Extindeți linia și faceți-o să se potrivească cu baza pictogramei.
Pictograma Activitate este mai complicată și mai interesantă. Se compune din trei cercuri colorate de gradient. Pentru a forma un astfel de cerc, mai întâi trebuie să facem un grup de amestecuri.
Faceți doi egali 6 x 7 px dreptunghiuri de roz (# ff2b91) și roșu (# f1281e) culori. Selectați dreptunghiurile și accesați Obiect> Blend> Make. Puteți edita setările în Object> Blend> Blend Options, punerea în aplicare Culoare netedă pentru a face un amestec frumos fără sudură. Trageți grupul de amestec creat la Perii și creați un nou Art Brush cu setările implicite.
Creați un gri închis (# 393839) bazați pe cercul pentru pictograma noastră și plasați un alt cerc pe partea de sus a acesteia, aplicând peria noastră ca o Accident vascular cerebral. Reglați mărimea cercului astfel încât să se potrivească marginii exterioare a șablonului cu pictograme. Seteaza Greutatea accidentală la 1 pt și Obiect> Extindeți aspectul pentru a transforma cursa periei în aformă. Rotiți sau răsturnați forma cu Reflect Tool (O) orizontal, dacă este necesar, astfel încât să avem partea roz a cercului din stânga și roșu pe dreapta.
Creați un roz roz (# ff2b91) și plasați-o în zona centrală superioară a inelului colorat, astfel încât să se potrivească înălțimii formei, ascunzând conexiunea celor două culori.
Acum trebuie să adăugăm o dimensiune inelului, formând o umbră subtilă. După cum puteți observa, inelul a devenit împărțit în mai multe părți după ce l-am extins. Acesta este exact ceea ce avem nevoie! Selectați piesa roșie de sus a inelului, copie și Lipiți în față (Control-C> Control-F). Completați copia cu gradient liniar de la roșu închis (# a11b17) la alb și treceți la Înmulțiți modul de amestecare, făcând astfel vârful alb al gradientului invizibil.
Utilizați aceeași tehnică pentru a crea două inele colorate în interiorul primei forme. Creați periile de artă dintr-un galben (# d8ff06) și verde (# 86e402) și de la un turcoaz (# 06ffaa) și albastru (# 06e3f9) amestec. Finalizați-vă cu pictograma adăugând cercuri și aplicând umbre blânde.
Următoarea este pictograma carnetului de trezorerie, care conține patru pictograme minuscule: un card de credit, un avion, o cameră video și o ceașcă de cafea. Aceste pictograme sunt minimaliste și realizate din forme de bază cu ajutorul deschizător de drumuri și Live Corners caracteristică. Mai jos puteți vedea o captură de ecran pas cu pas, care arată cum să combinați formele pentru fiecare pictogramă.
Baza pictogramei este formată din patru benzi de diferite culori: roșu (# ff4e46), albastru (# 439eca), verde (# 3dca36) și portocaliu (# ffa02b), fiecare dintre 20 px înălţime. Creați o valoare implicită 80 x 80 px cerc de bază pentru pictograma noastră și ștergeți piesele care nu sunt necesare de dungi, cu ajutorul Shape Builder Tool (Shift-M) selectând toate obiectele și făcând clic pe elementele nedorite în timp ce țineți apăsată tasta Alt cheie.
Formați un eveniment 3,5 x 3,5 px cerc, traversând partea superioară a benzii portocalii și copiați-o spre dreapta ținând ambele Alt și Schimb și tragerea formei. presa Control-D de mai multe ori pentru a face mai multe copii ale cercului. Apoi selectați toate copiile și transformați-le în a Traseul compusului prin apăsarea Control-8. Selecteazăcercuri și banda portocalie și aplicați Minus Front funcția de a tăia găurile, făcând banda perforată.
În cele din urmă, plasați pictogramele pe care le-am creat mai devreme și le aliniați la centrul pictogramei noastre.
Ultima icoană a setului nostru este pictograma Calendar. Se compune din text, realizat cu font Helvetica Neue și o simplă bază de pictograme albă.
Aceasta a fost o călătorie lungă dar interesantă! Am creat un număr total de 20 de pictograme pentru aplicațiile din ecranul de pornire, folosind forme de bază, efecte de urzeală și câteva trucuri și efecte. Sper că v-ați bucurat de acest ghid și ați găsit câteva tehnici utile. Mult noroc cu desenele tale!
Accentsconagua