parallax background

Icon de setări în Illustrator

Efect de blur intens în Photoshop
July 6, 2012
Efect dramatic în Photoshop
July 16, 2012
 

Vom invata in acest tutorial sa realizam un icon de setari similar celui din iOS, folosind Illustrator. Scopul tutorialului nu este doar realizarea acestui icon, ci insusirea tehnicilor si a metodelor folosite in vederea realizarii altor elemente grafice asemanatoare.

Tutorial publicat și pe YouTube și pe E-learn.ro

Incepem prin a crea un document nou cu dimensiunea de 500x500 px. In realizarea iconului, elementul esential va fi roata dintata. Desenam patru cercuri concentrice pe care le centram relativ fata de scena. Diametrele acestora vor fi: 350px, 290px, 150px si 75px. Le selectam si le alegem un gri deschis ca si culoare de umplere.

Selectam primele doua cercuri (cele mai mari) si din panoul Pathfinder alegem Minus Front pentru a substrage cercul mai mic din cercul mai mare.

Acelasi lucru il facem si cu cele doua cercuri ramase.

Desenam un dreptunghi, pe care il centram vertical pe scena, si il plasam astfel incat sa atinga cele doua cercuri rezultate.

Din meniul View selectam Snap to Grid si Show Grid, apoi Rulers -> Show Rulers si ne marcam centrul cercurilor.

Selectam dreptunghiul, apoi folosind Rotate Tool din panoul de unelte, tinem apasat pe Alt si facem click in centrul cercurilor. In fereastra ce apare alegem un unghi de 60ᵒ si apasam pe Copy.

Folosind combinatia de taste Ctrl + D repetam transformarea pana cand vom avea dreptunghiuri la egala distanta unul de celalalt.

Selectam toate formele si din panoul Pathfinder alegem Unite pentru a concatena formele intr-una singura si Ii dam din nou o culoare (un gri #D6D6D6) de umplere si una de contur (negru #000000).

Selectam forma si o rotim cu 30ᵒ folosind Object -> Transform ->Rotate.

In acest moment avem forma de baza a rotii dintate, insa ne lipseste un amanunt foarte important – dintele. Asadar desenam un dreptunghi mic ca in imagine.

Il selectam si din meniul Effect -> Warp -> Arc setam -6% la Bend si lasam Horizontal si Vertical Distorsion la 0%.

Apoi din meniul Effect -> Stylize -> Rounded Corners setam 6px la Radius.

Centram dintele vertical si il pozitionam astfel incat curbura din partea de jos a dintelui sa se suprapuna cu roata.

Il selectam si alegem Expand Appearance din meniul Object. Folosind aceeasi metoda de mai sus, il vom roti si copia pe intreaga roata. Il selectam, si cu Rotate Tool din panoul de unelte facem Alt + click in centru rotii. La Angle vom pune valoarea 20ᵒ si vom apasa pe Copy.

Vom duplica (Ctrl + D) aceasta actiune de inca 16 ori pentru un total de 18 dinti.

Acum selectam toate formele si apasam pe Unite din panoul Pathfinder pentru a le concatena intr-o singura forma.

Ii dam din nou o culoare (un gri #D6D6D6) de umplere insa nu ii mai pune contur.

Incepe partea interesanta. Copiem forma si o plasam in spatele originalului (Ctrl + C apoi Ctrl + B) si o umplem cu un gri mai inchis (#515151), apoi o mutam cativa pixeli in jos.

Repetam procesul insa umplem forma cu alb si o mutam in sus cativa pixeli.

Ne copiem prima forma, cea cu gri deschis, si o tragem undeva in afara scenei, pentru ca o vom folosi mai incolo. Acum grupam cele trei forme (gri, gri inchis si alb).

Desenam un cerc putin mai mare (am folosit un diametru de 65px) decat deschizatura interioara a rotii, si ii dam un contur suficient de gros (18px) pentru a acoperi ambele muchii ale deschizaturii.

Din meniul Object -> Path alegem Outline Stroke pentru a obtine conturul.

Umplem forma cu un gradient de gri de la un gri inchis la unul deschis (de sus in jos).

Dupa care selectam forma si o trimitem in spatele celorlaltor forme (Ctrl + [ sau click dreapta si Arrange -> Send to Back).

Similar cu pasii de mai sus, cream un cerc cu care sa acoperim a doua cea mai mare deschizatura a rotii, ii setam o grosime mai mare (diametru de 270px cu grosime de 30px). Apoi umplem forma cu un gradient radial de la gri deschis la gri inchis, dinspre exterior spre interior.

Acum selectam forma, o copiem si o trimitem direct in fata celorlaltor (Ctrl + C apoi Ctrl + F) si ii schimbam tipul gradientului in linear.

Schimbam Blending Mode in panoul Transparency la Overlay si scadem opacitatea la 50%.

Acum, trecem la una din partile mele preferate din acest tutorial. Cu totii am vazut efectul acela metalic pe care il au toate iconitele in stilul iOS. Folosind Pen Tool desenam cateva triunghiuri de marimi si structuri diferite, unite intr-un punct, pe care le vom umple cu diferite noante de gri.

Le selectam, le grupam si din meniul Effect -> Blur alegem Radial Blur.

Acum, ne intoarcem la copia rotii pe care am facut-o undeva la inceput. O plasam peste aceasta textura metalica si o centram.

Selectam atat textura cat si roata si din meniul Object -> Clipping Mask alegem Make.

Aliniem forma rezultata cu restul formelor pe scena si le grupam impreuna. Am terminat roata dintata :).

In continuare vom crea contextul in care vom plasa roata (totodata formand marginile iconului nostru). Cream un patrat care sa acopere intreaga roata (latura de 480px), si il umplem cu un gradient de gri.

Cu el selectat mergem in meniul Effect -> Stylize -> Round Corners si introducem 20px la Radius.

Apoi din meniul Object -> Expand Appearance pentru a converti forma intr-un path.

Continuam prin desenarea a inca unui patrat mai mic decat primul (cu latura de 400px), care va reprezenta „fereastra” prin care vom vedea roata.

Selectam ambele patrate si din panoul Pathfinder selectam Minus Front pentru a substrage patratul mai mic din cel mai mare.

Vom folosi aceeasi tehnica pe care am folosit-o si mai sus, pentru a crea o margine interioara. Cream un alt patrat putin mai mare (cu latura de 415px) decat fereastra pe tocmai am realizat-o, si si ii dam o grosime la contur de 20px. Transformam conturul in forma folosind Object -> Path -> Outline Stroke, umplem cu un gradient de la alb la negru (de sus in jos) si trimitem forma in spate (Ctrl + [).

Repetam procesul si pentru exteriorul ramei noastre. Cream un patrat tot de 480px, ii setam Stroke la 8px, rotunjim colturile cu Effect -> Stylize -> Round Corners cu 15px, Object -> Path -> Outline Stroke si umplem cu un gradient invers fata de mai devreme (de la gri la alb, de jos in sus) apoi trimitem forma in spate.

Vom continua prin adaugarea unui fundal ce va imita o placuta de metal perforat. Desenam un patrat putin mai mare decat fereastra. Il umplem cu un gri inchis (#333333).

Ca sa realizam gaurile perforate, desenam doua cercuri mici, unul mai mic decat celalalt (13px respectiv 22px), si le umplem dupa cum urmeaza: cel mare cu un gradient de la gri inchis la gri deschis, de sus in jos, iar pe cel mai mic cu negru. Le grupam si le pozitionam in coltul din stanga sus al patratului.

Din meniul Object -> Transform alegem Move, si introducem 40px pentru Horizontal si 0px pentru Vertical, apoi apasam pe Copy.

Repetam apoi pana completam sirul pe toata latimea patratului (Ctrl + D) si le grupam impreuna.

Cu randul selectat, mergem in Object -> Transform -> Move si introducem 0px la Horizontal si 40px la Vertical, apoi Copy. De asemenea, repetam (Ctrl + D) pana umplem pe verticala toata suprafata si grupam toate randurile.

Acum mergem o ultima data in Object -> Transform -> Move si introducem 20px la Horizontal si -20px la Vertical si apasam Copy. Grupam toate gaurile rezultate si le centram fata de dreptunghiul de fundal, dupa care le grupam impreuna.

Tot ansamblul il pozitionam in spatele obiectelor create pana acum.

Selectam bordura interioara pe care am dat-o ramei si ii aplicam o umbra: Effect -> Stylize –Drop Shadow cu un offset pe X de 0px, offset pe Y de 2px si un Blur de 5px.

Acum avem tot ce ne trebuie, sa asamblam totul intr-un produs final. Facem doua copii ale rotii si le aranjam ca in imagine Puteti bineinteles sa le aranjati cum doriti.

Adaugam umbra fiecarei roti dupa care le grupam. Acum desenam peste roti un patra la fel de mare ca deschizatura ferestrei noastre (sau putin mai mare) . Il pozitionam astfel incat prin acesta sa se vada ce dorim din tot ansamblul, selectam apoi atat patratul cat si rotile si din meniul Object -> Clipping Mask alegem Make.

Acum pozitionam rotile peste fundalul creat de noi, dar sub rama.

O ultima adaugare, vom incerca sa simulam un geam de sticla peste roti pentru un efect complet ansamblului. Desenam un dreptunghi cat deschizatura ferestrei de lat, si pe jumatate de inalt. Il pozitionam in partea de sus. Peste acesta desenam o elipsa ca in imagine.

Apoi, cu ambele forme selectate, din panoul Pathfinder selectam Intersect.

Adaugam un gradient transparent, de la opac la transparent, de sus in jos. Setam transparenta culorii de sus la 100%, pentru cea de jos 50%, apoi setam transparenta globala a formei la 50%.

Ne pozitionam acest „geam” transparent peste roti, dar sub rama si am terminat iconul :). Voila!

Comments are closed.