Advertisement
  1. Design & Illustration
  2. Vector

Creați un set de pictograme pentru dispozitivele Apple Watch, în Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:

Romanian (Română) translation by Rodica Ecaterina Barbulescu (you can also view the original English article)

Final product image
What You'll Be Creating

În acest tutorial, vom crea un set de pictograme plate pentru dispozitivele Apple Watch, care pot fi găsite în meniul ecranului principal Apple Watch, implicit. Vom utiliza forme de bază și efecte de deformare de tip Warp, ca și câteva metode mai complicate, pentru a realiza un design modern de interfață cu utilizatorul. Haideți să începem!

1. Ghidul pictogramelor Apple Watch

Pictogramele Apple Watch au un design cu un stil plat, la modă, foarte asemănător pictogramelor iOS, care pot fi găsite la ultimele dispozitive iPhone, iPad sau altele de tip Apple, de pe piață. Și există o caracteristică specifică acestora, remarcată imediat: pictogramele sunt rotunde. În acest tutorial, vom utiliza un caroiaj rotund, pentru a crea o singură bază pentru fiecare pictogramă. Puteți descărca o machetă de pictograme vectoriale foarte drăguțe, pentru a fi mai ușor de lucrat cu ele.

Dacă sunteți interesat de o teorie mai în detaliu, legată de crearea pictogramelor pentru Apple Watch, vă recomand să parcurgeți ghidul și specificațiile oficiale denumite Apple Watch Human Interface Guidelines and Specifications.

De asemenea, verificați și aceste articole utile și care conțin multe descrieri: "Crearea de pictograme pentru Apple Watch" și "Pictogramele pentru Apple Watch - Ghidul complet", unde oamenii își partajează machetele lor gratuite, precum și cunoștințele deținute, legate de crearea pictogramelor personalizate.

Acum este timpul să continuăm și să creăm pictogramele Apple Watch! Dacă vreți ca pictogramele dumneavoastră să fie perfecte din punct de vedere al pixelilor și aduse cu adevărat la viață, ca pictogramele originale Apple Watch, puteți găsi o imagine de model a ecranului principal Apple Watch, în imaginile Google. Cu File > Place, plasați-o pe Artboard și utilizați-o ca machetă, desenând pictogramele deasupra ei, păstrând dimensiunile și proporțiile dorite. Altfel, urmăriți acest tutorial, ca ghid inspirațional, nu ca instrucțiuni precise în vederea creării de copii identice ale pictogramelor originale.

2. Crearea pictogramelor aplicațiilor Time, Mail și Music

Pasul 1

Începeți prin a deschide una dintre machetele de pictograme (pentru acest tutorial, vom folosi o machetă de pictograme, de 80 x 80 px, pentru ceasul de 38 mm). Mergeți la View > Hide Grid, pentru a face caroiajul invizibil, dacă vă deranjează, dar asigurați-vă că aveți activate Smart Guides și Snapping (le puteți găsi în același meniu), ca să puteți lucra mai ușor.

open the 38 mm 80 px icon template

Pasul 2

Haideți să începem să creăm prima noastră pictogramă pentru aplicația Time, plasând un cerc perfect de 4 x 4 px, în centrul machetei. Executați dublu-clic pe instrumentul Ellipse Tool (L), pentru a afișa fereastra cu opțiuni pop-up, apoi mergeți la panoul Align, pentru a alinia cercul pe orizontală și verticală, pe planșa de lucru. Umpleți cercul cu culoarea portocalie (#FF9506).

place a 4x4 px even circle in the centre of the template

Pasul 3

Utilizați instrumentul Rectangle Tool (M), pentru a crea o limbă (secundarul) de 2 x 40 px a ceasului nostru, cu aceeași culoare de umplere, și plasați-o de-a lungul liniei centrale de ghidare, așa cum se vede în captura de ecran.

add a second hand with the rectangle tool

Puteți alinia limba la obiectul-cheie (Key Object), executând clic pe cerc, în timp ce țineți apăsată tasta Alt.

align to the key object

Pasul 4

Haideți să copiem secundarul, să îl facem mai scurt și să îl rotim cu -60 de grade, plasându-l de-a lungul liniei de ghidare, după cum se vede mai jos.

add the base for the minute hand

Acum vom forma corpul minutarului. Faceți un dreptunghi de 4 x 30 px și utilizați caracteristica Live Corners pentru a face ambele capete rotunjite, trăgând de marcajele mici circulare, cu instrumentul Direct Selection Tool (A), până la maximul lor posibil (o rază de rotunjire a colțurilor de 2 px, în cazul nostru).

Pasul 5

Plasați limba în locul corespunzător, de-a lungul liniei de ghidare (o puteți face un pic mai mică, astfel încât să se potrivească cu cercul interior al bazei pictogramei).

place the hand along the guide line

Pasul 6

Creați un alt dreptunghi de 4 x 20 px, pentru limba orelor. Faceți-o rotunjită, rotiți-o cu 60 de grade și plasați-o în partea opusă minutarului.

create the hour hand

Pasul 7

În final, creați o elipsă albă de 80 x 80 px, cu instrumentul Ellipse Tool (L), pentru baza pictogramei, și plasați-o sub toate celelalte obiecte. Grozav! Prima noastră pictogramă este gata; să trecem la următoarea!

create the circle icon base

Pasul 8

Acum vom crea pictograma pentru mesagerie (Mail). Începeți prin a crea plicul, făcând un dreptunghi de 50 x 33 px, de orice culoare.

make the rectangle envelope base

Adăugați un triunghi cu o linie de contur de 2 pt (2 pt Stroke) sau folosind instrumentul Polygon Tool cu valoarea 3 Sides (3 Laturi), sau cu ajutorul instrumentului Pen Tool (P). Utilizați Object > Expand pentru triunghi, ca să-l convertiți în curbe.

add a triangle and expand it

Pasul 9

Adăugați un alt triunghi în partea superioară a plicului, faceți-i colțul inferior rotunjit și extindeți forma. Puteți șterge partea de sus și cea de jos a dreptunghiurilor, cu instrumentul Eraser Tool (Shift-E), deoarece nu vom avea nevoie de ele.

add another triangle at the top

Ștergeți partea de sus a triunghiului inferior, cu instrumentul Eraser Tool (Shift-E), și folosiți comanda Unite, pentru ambele părți ale triunghiurilor, din Pathfinder. În final, faceți o copie a formei de bază a plicului (Control-C > Control-F), selectați atât dreptunghiul, cât și forma de sus, și utilizați funcția Intersect din Pathfinder, pentru a tăia și îndepărta părțile din afara plicului.

cut off the unneeded shapes with intersect

Pasul 10

Selectați, din nou, dreptunghiul și dungile și aplicați funcția Minus Front din Pathfinder, pentru a tăia liniile. Modificați culoarea plicului, în culoarea albă, și adăugați o bază circulară pentru pictogramă, umplând-o cu un gradient liniar, pornind de la albastru mai închis (#2066F0) în partea de sus, la albastru mai deschis (#1DD4FD) în partea de jos.

finish the mail icon

Pasul 11

Următoarea noastră pictogramă este pentru aplicația Music, care constă dintr-un singur element: o notă muzicală. Începeți prin a forma nota, cu un dreptunghi de 27 x 11 px. Selectați punctele-ancoră din partea stângă a formei, cu instrumentul Direct Selection Tool (A), și trageți-le în jos, pentru a face forma deformată.

form the rectangle top of the note

Pasul 12

Utilizați instrumentul Rectangle Tool (M), pentru a crea încă două forme și a începe să formați "piciorul" notei.

Add details to the note with the rectangles

Pasul 13

Selectați cele trei puncte-ancoră ale pătratului de jos, cu instrumentul Direct Selection Tool (A), și faceți-le cu colțurile rotunjite. Apoi uniți-le cu Unite din panoul Pathfinder și faceți și colțul dintre forme, rotunjit și el, folosind caracteristica Live Corners.

unite the shapes and make the corners rounded

Pasul 14

Adăugați a doua parte a notei și faceți forma în ansamblu, cu linii mai line și mai rotunjită. Terminați pictograma făcându-i baza, umplută cu gradient liniar, de la portocaliu (#FA5D3B), la roz (#FF2968).

make the overall shape more smooth and add the icon base

3. Randați pictogramele aplicațiilor World Clock, Stopwatch, Timer și Alarm

Pasul 1

Acum trecem la un set de pictograme legate de oră și toate create cu un stil unic. Începeți prin a crea un cerc perfect de 48 x 48 px și un cerc mai mic în interiorul său. Utilizați funcția Minus Front a panoului Pathfinder, pentru a crea un inel.

form the base with Minus Front function

Pasul 2

Creați un inel eliptic, mai mic, în interiorul primei forme, și adăugați două linii întretăiate, aliniate la centru.

create a ring inside the base of the globe

Adăugați o linie orizontală în partea superioară a formei și îndoiți-o cu ajutorul comenzii Effect > Warp > Arc. Setați Horizontal Bend la valoarea -35%.

use Arc Warp Effect to bend the line

Pasul 3

Adăugați o altă linie îndoită, în partea inferioară a globului nostru, și încheiați cu această pictogramă extinzând forma globului și formând o baza cu gradient, cu culorile portocaliu-închis în partea de jos (#ff7632) și portocaliu-deschis în partea de sus (#ff9408). Adăugați un cerc mai mic, de culoare portocaliu mai închis (#e45221) și ascundeți-l în spatele formei globului, dându-i mai mult contrast.

make the orange base for the globe icon

Pasul 4

Pentru următoarea noastră pictogramă - Stopwatch - vom folosi baza de la pictograma World Clock, pe care am creat-o anterior. Creați centrul cronometrului ("Stopwatch"), realizând o elipsă de 8 x 8 px, aliniată cu un dreptunghi de 2 x 25 px, pentru secundarul ceasului.

form the second hand of the stopwatch

Pasul 5

Utilizați instrumentul Rectangle Tool (M), pentru a adăuga detalii minore în partea superioară a cronometrului. Faceți butonul cronometrului, mai rotunjit, utilizând Live Corners și setând pentru raza de rotunjire a colțurilor, valoarea 1.4 px.

add minor details and make the button rounded

Pasul 6

Haideți să trecem la pictograma Timer - are aceeași bază ca și pictograma Stopwatch. Creați o dungă de 2.5 x 13 px în centrul părții de sus a inelului, cu instrumentul Rectangle Tool (M). Apoi, luați instrumentul Polygon Tool, setați pentru Sides valoarea 3, sau folosiți instrumentul Pen Tool (P), pentru a realiza un triunghi. Plasați-l așa cum se vede în captura de ecran de mai jos, ca și cum ar fi o felie dintr-o plăcintă.

add a triangle on top of the timer icon base

Pasul 7

Selectați atât inelul alb de bază, cât și forma triunghiulară și apoi folosiți funcția Minus Front pentru a decupa partea stângă a inelului. Adăugați un cerc mic de 6 x 6 px, în centrul pictogramei noastre.

cut out the unneeded part of the timer icon

Pasul 8

În final, rotiți cercul, astfel încât punctul-ancoră superior al lui să fie la aproximativ 45 de grade către stânga. Trageți punctul-ancoră cu instrumentul Direct Selection Tool (A), extinzând forma. Convertiți, într-un colț, punctul-ancoră selectat, făcând aceasta sau utilizând butonul Convert aflat în panoul de control superior, sau executând clic pe el cu instrumentul Anchor Point Tool (Shift-C), așadar transformând forma noastră într-o limbă de ceas.

form the second hand of the timer icon

Pasul 9

Ultima noastră pictogramă din acest set este Alarm. Are aceeași bază cu inelul alb, ca și pictogramele portocalii anterioare. Limbile ceasului sunt realizate din două dungi înguste, create cu instrumentul Rectangle Tool (M).

form the hands of the clock

Pasul 10

Haideți să realizăm partea superioară a ceasului cu alarmă, făcând un cerc perfect, cu instrumentul Ellipse Tool (L) și divizându-l în două părți egale, executând clic pe punctele lui ancoră din lateral, cu instrumentul Scissors Tool (C). Poziționați aceste jumătăți în partea superioară a ceasului cu alarmă și adăugați două "picioare" mici, în partea de jos a lui, pentru a termina pictograma.

add details to the top of the alarm

4. Creați pictogramele aplicațiilor Maps, Weather și Camera

Pasul 1

Pictograma Maps este destul de simplă și nu conține multe elemente. Începeți prin a-i crea centrul, cu un cerc de 40 x 40 px și culoare albastră (#087eff). Realizați o săgeată de busolă, dintr-un triunghi de 17 x 25 px, îndreptată în sus.

form the center of the Maps icon

Pasul 2

Adăugați o bază bej (#e5decb) pentru pictogramă. Mergeți la Object > Path > Add Anchor Points și selectați punctul-ancoră aflat la mijlocul laturii sale inferioare și trageți de el puțin în sus, creând un vârf de săgeată.

move the anchor point of the arrow to make its bottom pointed

Pasul 3

Plasați o bandă verticală lată, făcută cu un dreptunghi de 26 x 83.5 px, de-a lungul pictogramei, și uniți-o cu o altă bandă lată, plasată perpendicular. Ascundeți forma în cruce, în spatele cercului albastru cu săgeata. Selectați atât baza pictogramei, cât și benzile în formă de cruce, și utilizați funcția Divide a panoului Pathfinder, pentru a împărți forma în trei părți.

add stripes to the icon base

Pasul 4

Umpleți părțile bazei pictogramei, cu culorile verde (#78c73d) și roz-deschis (#fbc7d2).

color the parts of the icon

Pasul 5

Haideți să trecem la pictograma Weather. Umpleți forma de bază pentru cer, cu un gradient liniar pornind de la albastru mai închis (#2066f0) în partea de sus, până la albastru mai deschis (#1dd4fd) în partea de jos. Adăugați un cerc galben (gradient liniar de la #ffc505 la #fee403), pentru soare, în partea stângă a pictogramei. Începeți prin a realiza norii din două cercuri: un cerc de 25.5 x 25.5 px în centrul machetei și un cerc de 21 x 21 px, mai aproape de partea dreaptă a pictogramei.

make a sun and start forming the cloud for the weather icon

Pasul 6

Creați un dreptunghi de 43 x 16 px și faceți-i colțurile rotunjite, având o rază de rotunjire de 8 px. Aliniați dreptunghiul și cercurile și utilizați funcția Unite pentru cele trei forme, funcție din panoul Pathfinder, pentru a obține un nor rotund și cu forme line.

add the bottom part of the cloud with the rectangle tool

Pasul 7

Umpleți norul cu culoarea albă și faceți-l semitransparent, micșorând opacitatea sa (Opacity) la 90%.

make the cloud white and semi-transparent

Pasul 8

Haideți să trecem la pictograma Camera. Faceți un cerc de bază gri, umplut cu gradient liniar, de la gri închis (#8e9196) în partea de jos, la gri mai deschis (#dadcdd) în partea de sus, și începeți să creați silueta aparatului foto, pornind de la un dreptunghi de culoare gri-închis (#3c3c3c), cu colțurile rotunjite.

Adăugați un dreptunghi mai mic, de 30 x 17 px, deasupra, și faceți-i colțul din stânga-sus rotunjit, acesta având o rază de rotunjire de 7 px. Uniți formele, cu funcția Unite, și rotunjiți și colțul dintre formele respective.

form the camera base from the rounded rectangle

Pasul 9

Adăugați o bandă îngustă în partea superioară a aparatului foto și utilizați funcția Minus Front, pentru a o decupa.

use Minus Front to make a dividing stripe

Formați pictograma pentru obiectiv, dintr-un dreptunghi de 9 x 4 px și poziționați-o în centrul machetei noastre. Utilizați instrumentul Pen Tool (P) pentru a adăuga o săgeată, îndreptată în jos către obiectiv. Alegeți pentru Stroke Weight valoarea 4 pt și faceți capetele și colțul liniei rotunjite, în panoul Stroke.

Form the shutter icon

Pasul 10

Adăugați detaliile finale ale aparatului nostru foto: creați un indicator galben-aprins (#fac81b), de dimensiunea 6 x 6 px. Mai mult, creați un cerc mare, cu o grosime a liniei de contur (Stroke Weight) de 4 pt. Plasați cercul în colțul din dreapta-jos al aparatului foto, așa cum se observă în captura de ecran.

Add the final details to our camera

Pasul 11

Folosiți Object > Expand pentru cercul mare, transformându-l într-un inel. Selectați atât inelul, cât și aparatul, și aplicați funcția Minus Front, pentru a decupa inelul, creând obiectivul de sticlă. Apoi, selectați toate părțile de culoare gri-închis ale aparatului nostru foto și transformați-le într-o singură formă compusă, apăsând combinația de taste Control-8.

cut out the object-glass in the camera

În final, utilizați instrumentul Shape Builder Tool (Shift-M) sau funcția Intersect a panoului Pathfinder, pentru a decupa părțile aparatului care nu ne sunt necesare, părți aflate în exteriorul bazei pictogramei.

cut off the unneeded parts to finish up with the icon

5. Creați pictogramele aplicațiilor Phone, Messages și Remote

Pasul 1

Haideți să facem un receptor pentru pictograma Phone. Creați un dreptunghi de 8 x 40 px și utilizați efectul Arc Warp cu valoarea 27% Vertical Bend, pentru a îndoi dreptunghiul din partea stângă în dreapta. Adăugați două dreptunghiuri de 17 x 20 px în partea de sus și cea de jos a receptorului și rotunjiți-le colțurile, făcând formele respective cu contururi line. Uniți (cu Unite din panoul Pathfinder) toate părțile receptorului.

form the handset base

Pasul 2

Faceți și mai lină partea stângă a receptorului, ștergând punctele-ancoră care nu sunt necesare, utilizând instrumentul Delete Anchor Point Tool (-), și rotunjiți colțurile interioare, cu caracteristica Live Corners. În final, rotiți receptorul cu 45 de grade și poziționați-l peste baza pictogramei, umplută cu un gradient liniar de la verde-deschis (#86fb71), la verde mai închis (#0fd51c).

edit the handset outlines

Pasul 3

Haideți să realizăm acum pictograma Message, pe aceeași bază verde pe care am folosit-o anterior. Creați un cerc alb, de 40 x 40 px, apoi extindeți-l puțin în lateral, făcând forma turtită, până la 48 x 40 px. Adăugați un triunghi micuț, în partea de jos a formei albe, realizând o formă ce indică vorbitul (numită în limba engleză "speech bubble"). Faceți colțul inferior al triunghiului, un pic rotunjit. Utilizați efectul Arc Warp, cu o valoare de -36% Vertical Bend, pentru a face triunghiul un pic arcuit.

form a speech bubble from the ellipse and triangle

Iată cum arată pictograma terminată.

message icon

Pasul 4

Următoarea pictogramă a noastră este cea pentru aplicația Remote, care este și ea foarte simplă și constă dintr-un singur element. Mai întâi, creați o bază cu un gradient (de la albastru-deschis #2066f0 în partea de jos, până la albastru mai deschis #1dd4fd în partea de sus). Adăugați linie de contur albă, cu 5.3 pt Stroke Weight, și aliniați-o (Align) la interior (Inside). Plasați un triunghi alb de 30 x 30 px, în centrul pictogramei noastre.

form the base and triangle shape

Pasul 5

În final, rotunjiți colțurile triunghiului, cu această rază de rotunjire: 2.5 Corner Radius. Grozav! Pictograma este gata, așa că să trecem mai departe!

make the corners of the triangle rounded

6. Creați pictogramele pentru aplicațiile Workout, Settings și Photos

Pasul 1

Pictograma Workout reprezintă o siluetă stilizată a unui alergător. Creați o bază deschisă la culoare a pictogramei, umplută cu gradient liniar de la galben-verzui (#c2ec38) în partea de sus, până la verde #a3fc3f) în partea de jos.

Luați instrumentul Pen Tool (P) și creați linii separate pentru brațele îndoite, picioarele și trunchiul persoanei, cu o grosime a liniei de 3 pt Stroke Weight și capete și colțuri rotunjite. Creșteți grosimea linei pentru trunchi, alegând pentru Stroke Weight valoarea 6 pt și adăugați un cerc de 9 x 9 px pentru capul persoanei.

create separate lines with the pen tool

Pasul 2

Alegeți Object > Expand pentru linii și umpleți formele cu culoarea neagră.

fill the shapes with black color

Pasul 3

Pictograma Settings constă dintr-o roată dințată. Creați baza roții dintr-un cerc de 48 x 48 px cu partea centrală decupată, obținând un inel. Adăugați trei linii cu 3 pt Stroke Weight, conectate în centrul machetei pictogramei.

form the cog base

Pasul 4

Acum avem nevoie să adăugăm dinții roții dințate. Creați un dreptunghi de 5 x 9 px și faceți-i partea superioară puțin mai îngustă. Utilizați o rază de rotunjire de 1.6 Corner Radius pentru colțurile sale superioare. Poziționați dinții în partea de sus și de jos a bazei roții dințate.

Să folosim instrumentul Rotate Tool (R), pentru a adăuga mai multe elemente. Selectați ambii dinți, executați dublu-clic pe instrumentul Rotate Tool (R), pentru a afișa fereastra de acțiuni pop-up, și alegeți pentru Rotate valoarea 360/18. În acest fel, Adobe Illustrator va calcula automat valoarea corespunzătoare pentru cele 18 forme. Apăsați apoi butonul Copy.

add the ripples to our cog

Pasul 5

Apăsați Control-D de mai multe ori, pentru a repeta ultima acțiune, adăugând, astfel, mai multe elemente. Pentru a termina cu această pictogramă, selectați toți dinții roții, alegeți albul pentru culoarea de umplere și rotiți-i (cu Rotate) pe toți cu -10 grade (-10 degrees).

rotate the objects and fill them with white

Pasul 6

Următoarea noastră pictogramă este o floare stilizată, pentru aplicația Photos. Începeți prin a crea petala dintr-un dreptunghi de 20 x 30 px și faceți-i colțurile rotunjite, cu o rază de rotunjire de 10 px Corner Radius. Creați un duplicat al petalei și plasați copia în partea inferioară a machetei pictogramei, așa cum se vede în captura de ecran de mai jos. Selectați ambele petale și utilizați instrumentul Rotate Tool (R), pentru a face încă opt copii ale petalelor, aplicând valoarea 360/8 Angle și apoi apăsând butonul Copy.

forming the petal from a rectangle

Pasul 7

Apăsați Control-D de cîteva ori, pentru a crea floarea cu opt petale. Alegeți pentru petale modul Multiply Blending Mode și micșorați opacitatea acestora (Opacity) la 80%. Să aplicăm culoarea potrivită fiecărei petale, începând cu cea din mijloc, din partea de sus, și mișcându-ne în sensul acelor de ceasornic: portocaliu (#fa9700), galben (#f0e22c), verde (#b5d558), turcoaz (#6ec19d), albastru (#71b5e1), violet (#8f60c3), roz (#d782a4) și roșu (#ff2c2c).

Plasați floarea pe baza albă a pictogramei.

from the 8 petal flower and color it

7. Randați pictogramele Stocks, Activity, Passbook și Calendar

Pasul 1

Pictograma Stocks constă dintr-o diagramă minimalistă. Începeți să o creați, făcând o linie verticală de culoarea albastru-aprins (#02a6f5), având grosimea de 3 pt, cu instrumentul Line Tool (\). Poziționați-o în mijlocul machetei noastre, pe o bază închisă la culoare (#3f3f3f) a pictogramei.

Adăugați un cerc mic albastru deasupra mijlocului machetei și aplicați-i o linie de contur de culoarea gri-închis (#3f3f3f) și grosimea de 1 pt (Stroke), pentru a-l separa vizual, de linie. Adăugați încă patru linii pe ambele părți ale pictogramei, având culoarea gri mai deschis (#555555) și grosimea de 3 pt (Stroke).

Alegeți Object > Expand pentru linii și decupați părțile care nu ne sunt necesare și care se află în afara bazei pictogramei, sau utilizând Shape Builder Tool (Shift-M), sau cu ajutorul panoului Pathfinder.

form the lines of the diagram

Pasul 2

Terminați pictograma, adăugând o linie în zig-zag, având 1.5 pt Stroke, pentru grafic, folosind instrumentul Pen Tool (P). Extindeți linia și faceți-o să se potrivească cu baza pictogramei.

add a zigzagged line for the graphic

Pasul 3

Pictograma Activity este mai complicată și interesant de făcut. Constă din trei cercuri colorate in degrade. Pentru a obține un astfel de cerc, mai întâi este nevoie să facem un așa-numit Blend Group.

Desenați două dreptunghiuri egale, de 6 x 7 px, având culorile roz (#ff2b91) și roșu (#f1281e). Selectați dreptunghiurile și mergeți la  Object > Blend > Make. Puteți edita setările de la Object > Blend > Blend Options, aplicând Smooth Color pentru a obține un blend potrivit. Trageți grupul de blend creat, în panoul Brushes și creați o nouă pensulă de tip Art Brush, cu setările predefinite.

create the art brush from the blend group

Pasul 4

Creați o bază circulară de culoarea gri-închis (#393839) pentru pictograma noastră și plasați un alt cerc deasupra ei, aplicând pensula ca linie de tip Stroke. Modificați mărimea cercului, astfel încât să se potrivească cu marginea exterioară a machetei pictogramei. Alegeți Stroke Weight de 1 pt și apoi mergeți la Object > Expand Appearance, pentru a transforma dâra liniară a pensulei, într-o formă. Rotiți sau răsturnați forma, cu ajutorul instrumentului Reflect Tool (O), pe orizontală, dacă este nevoie, astfel încât să avem partea roz a cercului în partea stângă și pe cea roșie în partea dreaptă.

Creați un cerc mic roz (#ff2b91) și plasați-l în zona centrală de sus a inelului colorat, astfel încât să se potrivească cu înălțimea formei, ascunzând conexiunea dintre cele două culori.

apply the brush and expand the shape

Pasul 5

Acum avem nevoie să adăugăm dimensiune inelului, formând o umbră subtilă. Așa cum poate ați remarcat deja, inelul a devenit divizat în mai multe părți, după ce l-am extins. Acest lucru era tocmai ceea ce aveam noi nevoie! Selectați partea roșie de sus a inelului, copiați-o (Copy) și lipiți-o în față: Paste in Front (Control-C > Control-F). Umpleți copia cu gradient liniar de la roșu-închis (#a11b17), la alb, apoi alegeți Multiply Blending Mode, așadar făcând invizibil vârful alb al gradientului.

add shadow to the ring

Pasul 6

Utilizați aceeași tehnică pentru a crea încă două inele colorate, înăuntrul primei forme. Creați pensulele de tip "art brushes" dintr-un grup de blending de la galben (#d8ff06) și verde (#86e402), la un blend turcoaz (#06ffaa) și albastru (#06e3f9). Terminați pictograma, adăugând cercuri și aplicând niște umbre delicate.

create more art brushes from blends

Pasul 7

Următoarea este pictograma pentru Passbook, care constă din patru pictograme micuțe: un card de credit, un avion, o cameră de filmat și o ceașcă de cafea. Aceste pictograme sunt minimaliste și făcute din forme de bază, cu ajutorul panoului Pathfinder și caracteristicii Live Corners. Mai jos, puteți vedea o captură de ecran, care vă arată, pas cu pas, cum să combinați formele, pentru fiecare pictogramă în parte.

create pictograms from basic shapes

Pasul 8

Baza pictogramei constă din patru dungi de culori diferite: roșu (#ff4e46), albastru (#439eca), verde (#3dca36) și portocaliu (#ffa02b), fiecare având o înălțime de 20 px. Creați o bază circulară implicită, de 80 x 80 px, pentru pictograma noastră, și ștergeți părțile nedorite din dungile respective, cu ajutorul instrumentului Shape Builder Tool (Shift-M), selectând toate acele obiecte și executînd clic pe părțile nedorite, ținând apăsată tasta Alt.

create a striped icon base

Pasul 9

Desenați un cerc perfect de 3.5 x 3.5 px, suprapunându-se pe partea superioară a dungii portocalii, și copiați-l în partea dreaptă, ținând apăsate ambele taste Alt și Shift și trăgând forma. Apăsați Control-D, de câteva ori, pentru a face mai multe copii ale cercului. Apoi, selectați toate copiile și transformați-le într-un traseu de tip Compound Path, apăsând Control-8. Selectați cercurile și dunga portocalie și aplicați funcția Minus Front pentru a decupa găurile, făcând forma perforată.

În final, plasați pictogramele pe care le-am creat mai devreme și aliniați-le față de centrul pictogramei noastre.

add perforation to the orange stripe and place the pictograms

Pasul 10

Ultima pictogramă a setului nostru este pictograma Calendar. Constă din text, făcut cu fontul Helvetica Neue, și o bază albă, simplă, a pictogramei.

calendar icon with font

Ați făcut o treabă extraordinară! Pictogramele ecranului principal de la Apple Watch sunt terminate!

A fost o misiune lungă, dar plină de entuziasm! Am creat un număr de 20 de pictograme pentru aplicația Home Screen, utilizând forme de bază, efecte de deformare de tip warp și câteva șmecherii și efecte. Sper că v-a făcut plăcere să parcurgeți acest ghid și că ați găsit câteva tehnici utile. Succes la activitățile dumneavoastră de design viitoare!

Final result
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.