Share
Cu acest tutorial vă voi arăta cum să creați o pictogramă a indicatorului hărții iOS, care să fie perfectă pentru a vă importa în design-ul următor al aplicației bazate pe hărți. Vom utiliza o singură formă cu atribute multiple de Aspect pentru a crea un ușor de utilizat și de a edita stilul grafic în Adobe Illustrator.
Să începem prin pregătirea documentului nostru. Deschideți Illustrator și apăsați Command + N pentru a crea un document nou. Introduceți 500 în caseta de lățime și 500 în caseta de înălțime, apoi faceți clic pe butonul Avansat. Selectați RGB, Ecran (72ppi) și asigurați-vă că caseta Align New Objects to Pixel Grid nu este bifată înainte de a da clic pe OK.
Când lucrați cu dispozitive independente de rezoluție, perfecțiunea pixelilor este o necesitate și, pentru a crea forme clare, ar fi mai ușor ca setarea Grid View și Pixel Snapping să fie activate, așa că vom face acest lucru acum. Să activați grila (Vizualizare> Afișare grilă) și apoi Glisați la grilă (Vizualizare> Snap la rețea). După ce acestea sunt activate, veți avea nevoie de o rețea la fiecare 1px. Mergeți la Illustrator> Preferințe> Ghidaje și grilă, introduceți 1 în caseta Gridline în fiecare casetă și 1 în caseta Subdiviziuni. Acum, să setăm unitatea de măsură la pixeli din Illustrator> Preferințe> Unitate> Generalități. După finalizarea documentului dvs. ar trebui să arate imaginile de mai jos.
Acum, când documentul nostru este configurat, să începem prin crearea formei cercului utilizat pentru pictograma indicator. Deoarece creăm pentru afișarea retinei, va trebui să lucrăm la dimensiunea dublă a obiectului pe care dorim să-l creăm. Pe dispozitivul nostru cu retină vom dori ca indicatorul să fie 16px-16px, deci dacă îl înmulțim cu 2 ajungem la 32px. În acest scop, alegeți instrumentul Ellipse (L), apoi faceți clic oriunde pe panza. Când apare fereastra de dialog, tastați 32px atât pentru lățime, cât și pentru înălțime. Aceasta va crea cercul perfect necesar indicatorului nostru.
Bacsis: Apăsați litera "D" de pe tastatură pentru a reseta culoarea dvs. Fill and Stroke la setările implicite.
Cu forma noastră desenată putem ajunge la lucrurile distractive. Deschideți panoul Aspect (dacă nu merge deja la Fereastră> Aspect) și începeți să creați pictograma noastră.
Există o mulțime de atribute Aspect pentru această formă, pentru a face mai ușor de urmat vom lucra de jos în sus în panoul Aspect.
Pentru a începe, în panoul Aspect selectați elementul de fundare de la partea de jos și vom crea un gradient transparent opac până la transparență, așa cum este prezentat în imaginea de mai jos, apoi ajustați opacitatea la 50%. Cu acel element Complet selectat, vom face clic pe butonul Add New Effect (se pare ca și literele "fx") în partea de jos a panoului Appearance, apoi selectați Path> Cale Offset și introduceți atributele prezentate mai jos. Vom avea nevoie, de asemenea, să transformăm elementul Complet, astfel încât să fie selectat din nou butonul Add New Effect și navigați la Distort & Transform> Transformați și introduceți atributele așa cum se vede mai jos. Dacă nu ați ghicit încă, aceasta va fi umbra pentru pictograma indicatoare și ceea ce am făcut este să creați o umbră de picătură complet vector care să ofere un ușor auriu formei noastre principale și este luată în jos suficient de mult pentru a oferi adâncime. Nu pare prea mult acum, dar lucrurile vor începe să se împrăștie în curând.
Acum, să creăm un alt element Fill deasupra elementului nostru de gradient de umplere. În mod implicit, acest lucru va adăuga gradientul nostru negru la transparent, dar va trebui să eliminăm acest gradient în locul unei culori plane. Să mergem mai departe și să alegem o culoare roșie strălucitoare pentru acest strat, așa cum este prezentat mai jos. În acest moment ar putea părea ciudat să folosim un roșu atât de vibrant, dar totul va avea sens într-o clipă. Acest strat de fund va acționa atât în culoarea noastră de bază, cât și în evidența secundară după ce trecem la pasul următor.
Încă o dată, să creăm un alt element de completare. Aceasta va implica culoarea roșie roșie pe care am ales-o mai devreme, dar dorim un gradient radial frumos pentru acest element, astfel că selectați panoul Gradient și introduceți atributele prezentate mai jos. Un combo purpuriu de la purpuriu la alb, setat la Multiply și opacitatea scăzut la 50%, va adăuga o pictogramă în formă de 3D rotundă. Pentru a împinge efectul 3D și mai departe, lăsați Zoom (Z) în pictograma noastră până când vedem patratele individuale de pixeli de pe placa noastră de artă. Cu elementul de gradient care este încă selectat, alegeți instrumentul Gradient (G) din panoul Instrument și acesta va afișa bara de gradient peste pictogramă. Suntem de gând să Faceți clic și trageți acest bara de până la aproximativ 2,5 pixeli folosind arta noastră de bord ca un ghid asigurându-vă că pentru a menține bara cât mai concentrat posibil.
Acum vom începe să creăm sursa principală de lumină. Vă rugăm să rețineți că lucrăm de jos în sus, astfel încât lucrurile să nu aibă sens până când nu terminăm cu următorii câțiva pași.
Ținând cont de faptul că încercăm să creăm o strălucire strălucitoare pe pictograma noastră, este de înțeles că această strălucire va arunca o lumină difuză împotriva obiectului nostru, așa că asta este ceea ce vom crea acum. Din nou, vom crea un nou strat Fill. Să reglezăm acest gradient astfel încât să fie opac la transparență, după cum este prezentat mai jos, cu o opacitate peste 60%. Selectați instrumentul Gradient (G) și folosind bara albă a mânerului cu centrul negru din partea stângă a butonului gradient faceți clic și trageți acel mâner spre centrul cercului, astfel încât să fie aproape jumătate din dimensiunea originală, apoi faceți clic pe bara de centru de gradient și glisați-l în sus și peste la stânga un pic. Urmăriți acest strat, deoarece este posibil să doriți să vă întoarceți mai târziu, pentru ao alinia exact cu stratul principal de alb evidențiat ulterior.
Acum, când avem o difuzie, vom adăuga o strălucire la evidențierea însăși. Creați un alt strat de umplere și umpleți-l cu un gradient alb până la transparent așa cum este prezentat mai jos. Rețineți că poziția de gradient se va potrivi cu stratul de mai jos, astfel încât înainte de a regla acest gradient, faceți clic pe exemplul "None" din panoul Swatches pentru a elimina acea umplutură apoi adăugați apoi adăugați noul opac la un gradient transparent astfel încât poziția sa să fie resetată . Cu gradientul în loc, vom dori să compensăm și să transformăm și acest strat Fill. Faceți clic pe butonul Adăugați un efect nou (seamănă cu literele "fx") din partea inferioară a panoului Aspect, apoi selectați Cale> Cale de decalaj și introduceți atributele prezentate mai jos. Vom avea nevoie, de asemenea, să transformăm elementul Completare, astfel încât să fie selectat din nou butonul Add New Effect și navigați la Distort & Transform> Transformați și introduceți atributele așa cum se vede mai jos.
Cu această strălucire din drum, să adăugăm evidenția noastră reală. Faceți clic din nou pe butonul Adăugați o nouă umplere și completați-l cu o culoare albă albă Apoi selectați butonul Add New Effect (seamănă cu literele "fx") din partea inferioară a panoului Aspect, apoi selectați Path> Path Offset și introduceți atributele prezentate de mai jos. Vom avea nevoie, de asemenea, să transformăm elementul Completare, astfel încât să fie selectat din nou butonul Add New Effect și navigați la Distort & Transform> Transformați și introduceți atributele așa cum se vede mai jos.
În acest moment puteți reveni la stratul de difuzie cu gradient roșu pe care l-am făcut câțiva pași înapoi și ajustați punctul central al gradientului pentru a fi direct sub alb.
Acum să ajustăm granița neagră care stătea acolo și ne privea tot timpul. Vom pune-o în afară cu o greutate a Accidentului de 2 pixeli și cu culoarea prezentată mai jos.
Indicatorul în sine este acum complet, dar să-l facem un pas mai departe și să creăm și inelul de rază GPS. Faceți clic din nou pe butonul Adăugați umplere nouă și umpleți-l cu un gradient roșu până la transparent așa cum este prezentat mai jos și renunțați la opacitate la 25%. Apoi selectați butonul Adăugați un efect nou (seamănă cu literele "fx") din partea inferioară a panoului Aspect, apoi selectați Calea> Calea de decalaj și introduceți atributele prezentate mai jos.
Pentru ultima piesă a pictogramei vom adăuga marginea în jurul inelului de rază GPS. Faceți clic pe butonul Adăugați un curs din partea inferioară a panoului Aspect și alegeți o greutate a cursei de 2 pixeli roșii în interiorul formei. Acum, să compensăm calea făcând clic pe butonul Adăugați un efect nou (seamănă cu literele "fx") din partea inferioară a panoului Aspect, apoi selectați Calea> Calea de compensare și introduceți atributele prezentate mai jos. Și, în final, vom adăuga o strălucire exterioară acestui accident vascular cerebral. Pentru a face acest lucru, faceți clic pe butonul Adăugați un efect nou (seamănă cu literele "fx") în partea de jos a panoului Aspect, apoi selectați Stylize> Outer Glow
În acest moment puteți să selectați Shift + Faceți clic pe cele două elemente ale inelului de rază GPS pentru a le selecta atât în panoul Aspect, apoi glisați-le în partea de jos a acestei liste, astfel încât pictograma indicator real să stea în partea de sus.
Cu indicatorul în afara modului în care vom crea numele pop-up. Selectați instrumentul Rounded Rectangle și faceți clic pe pagină și introduceți informațiile prezentate în imaginea de mai jos. Rețineți că lățimea poate fi orice doriți, atâta timp cât numele pe care îl alegeți mai târziu se potrivește, dar pentru scopurile acestui tutorial vom folosi această lățime set.
De asemenea, trebuie să faceți clic din nou cu instrumentul Rounded Rectangle pentru a crea săgeata din partea de jos. pentru aceasta avem nevoie să fie perfect pătrate și vom scăpa raza, precum și indicațiile de mai jos. Când forma a făcut să o rotească 45 de grade. Pentru a face acest lucru, selectați Instrumentul de selecție (V), apoi poziționați mouse-ul în apropierea oricărui colț al pătratului și în timp ce țineți apăsată tasta Shift de pe tastatură trageți forma în orice direcție până când arată ca un diamant așa cum se vede în imaginea de mai jos.
Acum vom alinia aceste obiecte pentru a fi centrate unul pe altul. Cu instrumentul de selecție (V) în schimbul de mână, faceți clic pe ambele obiecte, astfel încât acestea să fie ambele selectate în același timp. Acum navigăm la panoul Aliniere (Fereastră> Aliniere) și alegeți a doua opțiune sub antetul Aliniere obiecte numit Centrul de aliniere orizontală. Apoi faceți clic pe ultima opțiune din același antet numit Vertical Align Bottom.
Cu ajutorul instrumentului de selecție (V) încă activat, faceți clic pe forma mai mică a diamantului, deci este singurul obiect selectat acum. În timp ce țineți apăsată tasta Shift de pe tastatură, apăsați o dată pe săgeata în jos de pe tastatură. Eliberați trecerea, apoi apăsați de trei ori săgeata în jos de pe tastatură pentru a muta diamantul în poziția perfectă.
Shift faceți clic pe forma rotunjită mai mare, astfel încât ambele obiecte să fie selectate din nou și să navigați la panoul Pathfinder (Window> Pathfinder), apoi să faceți clic pe prima opțiune din antetul Shape Modes denumit Unite. Ambele obiecte ar trebui acum incluse în unul.
Cu pop-ul nostru. forma creată acum, vom lucra la modelarea acesteia. Cu forma selectată, navigați la panoul Aspect (fereastră> Aspect) și selectați Stroke. Vom păstra acest lucru ca un negru de bază, însă să lăsăm să fie în afara formei cu o greutate de 2 x.
Apoi, selectați funcția Umplere și o vom umple cu un gradient semi-transparent de 90 de grade în nuanțe de gri așa cum este prezentat mai jos.
În cele din urmă, vom adăuga un efect de umbră la acest obiect. Faceți clic pe butonul Adăugați un efect nou (seamănă cu literele "fx") din partea inferioară a panoului Aspect, apoi selectați Stylize> Drop Shadow și introduceți opțiunile prezentate în imaginea de mai jos.
Să dăm acestui obiect un punct de atracție în partea de sus. Cu obiectul selectat, vom copia (Command + C), apoi vom lipi în față (Command + F). Să revenim rapid la stilul implicit prin apăsarea "D" de pe tastatură. Acest lucru va elimina efectele pe care le-am adăugat anterior și vom readuce forma la albul de bază cu un accident de culoare neagră. În scopul acestei evidențieri, nu vom avea nevoie de un accident vascular cerebral, așa că navigați la panoul Instrumente și faceți clic pe opțiunea de umplere a cursei din partea de jos pentru ao selecta. Apoi, faceți clic pe pătratul alb cu linia roșie diagonală prin aceasta pentru a elimina complet cursa. Cu accident vascular cerebral plecat sa Copiați-l (Command + C), apoi Lipiți în față (Command + F) din nou, astfel încât acum avem două forme albe simple una deasupra celeilalte. Apoi, în timp ce este selectată cea mai mare formă de vârf și instrumentul de selectare (V) este activat, apăsați de două ori săgeata în jos de pe tastatură pentru a împinge obiectul în jos. După ce ați dat un comentariu, faceți clic pe obiectul simplu din spatele acestuia pentru a selecta simultan. În timp ce sunt selectate ambele obiecte, navigați la panoul Pathfinder (Window> Pathfinder) și selectați a doua opțiune din antetul "Moduri de formă" cu titlul "Minus Front". Ar trebui să rămâi acum cu o mică fâșie de formă originală chiar în partea superioară. Cu această stivă selectată, să reducem opacitatea până la 25% în panoul Aspect (Fereastră> Aspect).
Acum vom crea textul pentru acest pop-up. Selectați Instrumentul de tip (T) din panoul Instrumente și apoi faceți clic pe placa de artă și introduceți numele dorit. În panoul Instrumente faceți clic pe Culoarea de umplere și modificați-o în alb. Acum, navigați la panoul Caracter (Tip> Tip> Caracter) și ajustați dimensiunea și tipul fontului așa cum este prezentat mai jos.
Cu textul selectat navigați în panoul Aspect (fereastră> Aspect) și faceți clic pe butonul Adăugați efect nou (seamănă cu literele "fx") în partea de jos a panoului Aspect, apoi selectați Stylize> Drop Shadow și introduceți opțiunile prezentate în captura de ecran de mai jos. De asemenea, putem utiliza Instrumentul de selecție (V) pentru a trage textul în locația dorită în forma bulei. Deoarece ghidurile Smart și Snap to Grid sunt activate, acest lucru ar trebui să fie ușor de găsit.
Cu textul în afara drumului, să creăm pictograma săgeată. Selectați instrumentul Rounded Rectangle și faceți clic pe placa de artă, apoi conectați aceste opțiuni.
Acum, selectați Instrumentul de selecție (V) și faceți clic pe noul dreptunghi creat. Cu obiectul selectat, vom copia (Command + C), apoi vom lipi în față (Command + F). Acum, să rotam acest nou obiect la 90 de grade. Acum vom alinia aceste obiecte pentru a forma o forma L inapoi. Cu instrumentul de selecție (V) în schimbul de mână, faceți clic pe ambele obiecte, astfel încât acestea să fie ambele selectate în același timp. Acum navigăm la panoul Align (Fereastră> Aliniere) și alegeți a treia opțiune sub antetul Align Objects numit Dreapta Align Right. Apoi faceți clic pe ultima opțiune din același antet numit Vertical Align Bottom.
Dacă ambele obiecte sunt încă selectate, navigați la panoul Pathfinder (Window> Pathfinder), apoi faceți clic pe prima opțiune din antetul Shape Modes, denumit Unite. Ambele obiecte ar trebui acum incluse în unul. Cu ajutorul instrumentului de selectare (V) selectat încă să rotim forma de 45 de grade. Pentru a face acest lucru, selectați instrumentul Selecție (V), apoi poziționați mouse-ul în apropierea oricărui colț al pătratului și în timp ce țineți apăsată tasta Shift de pe tastatură, glisați un colț din partea dreaptă a casetei de delimitare până când arată ca o săgeată îndreptată spre dreapta.
Cu săgeata selectată navigați la panoul Aspect (fereastră> Aspect) și faceți clic pe butonul Adăugați efect nou (seamănă cu literele "fx") din partea de jos a panoului Aspect, apoi selectați Stylize> Drop Shadow și introduceți opțiunile prezentate în captura de ecran de mai jos. De asemenea, putem utiliza instrumentul de selecție (V) pentru a trage forma de săgeată în poziția dorită în forma bulei.
Cu pop-ul. secțiunea finalizată permite activarea instrumentului de selecție (V) și trageți o selecție peste tot pop-ul. obiecte pentru a le selecta simultan. Acum mergeți la Object> Group (Command + G) din panoul de meniu pentru a grupa aceste obiecte împreună. Apoi, putem glisa acest grup deasupra pictogramei indicator și centrul acestuia, astfel încât să pară imaginea de mai jos. Și cu asta, am terminat!
Sper că am reușit să vă arăt cum să utilizați panoul Aspect pentru a crea efecte complexe fără a mai fi necesare straturi suplimentare. Simțiți-vă liber să jucați cu culori diferite, după cum considerați potrivit. Cu atât de multe dispozitive independente de rezoluție care plutesc în jurul valorii de acum a-zi este foarte minunat să puteți utiliza obiecte scalabile infinit care pot fi utilizate și reutilizate în desenele aplicației dvs..
Accentsconagua