Sfaturi pentru lucrul cu Illustrator. Pentru web designerii care preferă Photoshop

Sfaturi pentru lucrul cu Illustrator. Iată o idee nebună - proiectează-ți următorul proiect web în Illustrator. Dacă sunteți un designer web principal, sunt șanse să nu răspundeți foarte bine la această sugestie. Illustrator pur și simplu nu poate face tot ce poate Photoshop, nu?

Nu cu siguranță în acest fel.

Deși Photoshop a devenit instrumentul de facto web design, Illustrator este mai mult decât capabil să vă satisfacă nevoile. Datorită instrumentelor sale de layout, este adesea un program mai bun și mai potrivit pentru design web.

Deoarece majoritatea profesioniștilor în design web nu doresc să se plimbe prin Illustrator în căutarea dovezilor, am compilat o listă de caracteristici legate de web pe care trebuie să le cunoașteți pentru a începe să experimentați cu designul web în Illustrator.

Încercați câteva dintre acestea și vă garantez că veți începe să utilizați Illustrator ca instrument standard în fluxul dvs. de lucru de proiectare web.

1. Mai întâi: setați toate unitățile la Pixeli. Sfaturi pentru lucrul cu Illustrator

În mod implicit, Illustrator utilizează metrica unități pentru dimensiunile obiectelor și punctelor pentru text. Acestea sunt setări grozave pentru majoritatea situațiilor de proiectare, dar pentru web design probabil că veți dori să vedeți pixeli peste tot. Deci, înainte de a începe să lucrați la orice altceva, asigurați-vă că unitățile sunt configurate corect.

Pentru a seta unitățile la pixeli:

1. Deschideți în meniul Editare
2. Selectați unitățile de măsură din submeniul setări.
3. Setați toate opțiunile la „pixeli”

2. Creați documente utilizând un profil de document web.

 

Când doriți să începeți să lucrați la un design nou, derulați cu ușurință prin fereastra Document nou și omiteți câteva detalii importante, cum ar fi să îi spuneți lui Illustrator că intenționați să lucrați la un design web, astfel încât să nu utilizați culorile CMYK. și marginile neclare ale obiectului. Nu uitați să selectați setarea profilului de Internet în fereastra Document nou și veți fi bine.

3. Activați alinierea grilei de pixeli pentru obiecte. Sfaturi pentru lucrul cu Illustrator

Această caracteristică vă salvează viața dacă ați avut vreodată probleme cu marginile neclare în Photoshop.

Pixel Grid Alignment va ajusta segmentele drepte orizontale și verticale ale unui obiect pentru a se potrivi perfect cu grila de pixeli, păstrând în același timp segmentele curbe și înclinate netede. Rezultatul sunt forme clare, perfecte pentru pixeli - ceva ce vă doriți cu siguranță în design web.

Butonul de sus are activată alinierea grilei de pixeli, ceea ce duce întotdeauna la margini clare.

Pentru a activa alinierea grilei de pixeli la nivel de obiect:

1. Selectați obiectul
2. Deschideți panoul Transformare (Fereastră > Transformare).
3. Bifați caseta de selectare „Aliniere la grila de pixeli” din partea de jos a panoului (dacă nu o vedeți, faceți dublu clic pe panou pentru a afișa opțiunile)

Notă. Alinierea grilei de pixeli este activată în mod implicit pentru toate obiectele noi create folosind profilul documentului web. Cu toate acestea, dacă lipiți obiecte din alte fișiere Illustrator, va trebui să ajustați manual alinierea pixelilor pentru acestea. Sfaturi pentru lucrul cu Illustrator

4. Activați previzualizarea pixelilor.

Caracteristica Pixel-Preview va face Illustrator să se comporte la fel ca Photoshop atunci când scala imaginea dvs. peste 100% - în loc să obțineți vectori perfecți de fiecare dată, veți vedea de fapt pixelii ca și cum ați lucra cu o imagine raster.

Activarea previzualizării pixelilor vă va face să simțiți că sunteți în Photoshop.

Gândiți-vă cât de tare este - aveți toată puterea graficelor vectoriale la îndemână și puteți vedea cum arată rezultatul la nivel de pixeli.

Frumos, nu-i așa?

Activați sau dezactivați previzualizarea pixelilor

1. Deschideți meniul de vizualizare
2. Selectați Pixel View.

5. Utilizați ferestrele Artwork. Sfaturi pentru lucrul cu Illustrator

Imaginează-ți că două camere video sunt îndreptate către proiectul tău.

O cameră are un nivel normal de zoom, care arată 100% din munca dvs. Cealaltă cameră are un nivel de zoom de 400% și vizează o pictogramă specifică la care lucrați.

Ca un chirurg, utilizați camera cu zoom pentru a face mici modificări la nivel de pixeli ale pictogramei, aruncând ocazional o privire la camera cu zoom 100% pentru a vedea cum arată de fapt la dimensiunea sa reală.

Ferestrele de acoperire sunt excelente atunci când trebuie să lucrați cu elemente mici, cum ar fi pictogramele, nu trebuie să măriți și să micșorați în mod constant pentru a verifica cum arată totul.

Acestea sunt ferestre Artwork - vă permit să vă vizualizați designul simultan cu diferite niveluri de zoom, setări de culoare și alte variații. Acest lucru este foarte util pentru web design, mai ales atunci când lucrați cu detalii la nivel de pixeli.

Pentru a utiliza ferestrele Artwork:

1. Deschideți meniul Fereastră, apoi selectați Fereastră nouă. Illustrator va crea o filă nouă cu același document în vedere.
2. Mergeți din nou la meniul Fereastră, alegeți Aranjare > Mutare tot în fereastră. Acest lucru vă va permite să vă schimbați dimensiunea și amplasarea ferestrelor unul lângă altul după cum credeți de cuviință.
3. Experimentați cu diferite niveluri de zoom în Windows și începeți să faceți câteva modificări pentru a vedea cum funcționează. Sfaturi pentru lucrul cu Illustrator

6. Folosiți simboluri pentru a crea rapid butoane, pictograme și multe altele.

De câte ori ați creat același (sau aproape același) buton, pictogramă sau widget în Photoshop? Dacă ești pasionat de web design, probabil că o faci în fiecare zi.

Illustrator vă poate ajuta să economisiți timp și să evitați această muncă repetitivă cu simboluri.

În esență, simbolurile sunt un set nesfârșit de gata făcute elemente de proiectare, care poate fi adăugat la lucrare prin simpla glisare și plasare și apoi modificat după cum este necesar. Acesta este ideal pentru butoane, pictograme și alte obiecte standard care nu trebuie create de la zero.

Dar există un alt motiv pentru care simbolurile sunt puternice și se numește instanțiere.

Simbolurile nu sunt doar convenabile, dar facilitează și actualizarea elementelor de design care se repetă.

 

În esență, ori de câte ori faceți modificări la simbolul original, acele modificări se reflectă imediat în toate cazurile simbolului găsit în opera dvs. de artă. Ai nevoie de butoane mai mari pe site-ul tău? Schimbați doar simbolul. Vrei ca câmpurile tale de formular să arate diferit pe fiecare pagină? Schimbați doar simbolul. Înțelegi ideea.

Sfat: Dacă nu doriți să se întâmple acest lucru cu o anumită instanță a simbolului ca, faceți clic dreapta pe obiectul din ilustrația dvs. și selectați Break Symbol Reference. Acest lucru îl va exclude din actualizările automate.

Iată un videoclip bun care explică cum să folosești și să manipulezi simbolurile:

Utilizarea simbolurilor în Adobe Illustrator de Adobe TV .

Pentru a utiliza un simbol existent:

1. Deschideți panoul Simboluri din meniul Fereastră.
2. Trageți simbolul selectat pe lucrarea dvs

Creați un simbol nou:

1. Creați o imagine simbol
2. Deschideți panoul Simboluri din meniul Fereastră.
3. Trageți o ilustrație pe panou
4. Faceți clic pe OK în caseta de dialog pentru a confirma.

Pentru a edita un simbol:

1. Deschideți panoul Simboluri din meniul Fereastră.
2. Faceți dublu clic pe un simbol pentru a intra în modul de editare.
3. Când ați terminat, faceți dublu clic oriunde în afara imaginii simbol pentru a ieși din modul de editare.

7. Extindeți cu ușurință obiectele cu scalare pe 9 segmente. Sfaturi pentru lucrul cu Illustrator

Aceasta este o caracteristică de simbolologie avansată care vă permite să definiți ce părți ale unui obiect sunt întinse în timpul scalării și care rămân neschimbate.

Stânga: Un exemplu de buton întins cu și fără setarea de zoom pe 9 segmente. Dreapta: setarea de scalare pe 9 segmente implică mutarea a 4 ghidaje care îi spun Illustrator care părți ale obiectului sunt protejate și care părți pot fi scalate.

 

Un exemplu practic este un buton cu colțuri rotunjite - dacă doriți să îl faceți mai lung, nu îl puteți întinde pur și simplu pe orizontală, deoarece asta va distorsiona întregul obiect. În schimb, va trebui să mutați manual punctele de formă. Cu scalarea pe 9 segmente, întinderea funcționează așa cum ați dorit. Sfaturi pentru lucrul cu Illustrator

Pentru a înțelege cu adevărat cum funcționează, ascultați acest tutorial video grozav de la Adobe TV pentru a trece rapid la curent:

Folosind scalarea pe 9 segmente cu simboluri de Adobe TV .

8. Colțuri rotunjite peste tot!

Puteți crea un dreptunghi rotunjit în Photoshop, dar Illustrator vă permite să aplicați un efect de colț rotunjit nedistructiv la aproape orice obiect. Ce este efectul nedistructiv? Aceasta înseamnă că îl puteți porni, dezactiva sau modifica setările fără a afecta obiectul original subiacent.

Puteți aplica efectul colțurilor rotunjite la aproape orice tip de obiect și îl puteți ajusta după cum este necesar. Sfaturi pentru lucrul cu Illustrator

Pentru a aplica efectul de colț rotunjit:

1. Creați un dreptunghi sau orice alt obiect cu colțuri ascuțite
2. Din meniul Efecte, alegeți Stilizare > Colțuri rotunjite.
3. Introduceți o rază de colț și faceți clic pe Previzualizare pentru a vedea cum arată.
4. Faceți clic pe OK pentru a aplica efectul.

Pentru a modifica efectul colțului rotunjit:

1. Selectați un obiect cu colțuri rotunjite
2. Deschideți panoul Aspect din meniul Fereastră.
3. Găsiți efectul Colțuri rotunjite și faceți dublu clic pe el pentru a-i modifica setările sau faceți clic pe pictograma ochiului pentru a-l activa sau dezactiva.

9. Crearea unei umpleri rapide cu un model raster. Sfaturi pentru lucrul cu Illustrator

Modelele de fundal subtile sunt un mare succes în designul web, dar mulți designeri cred că nu sunt ușor de aplicat în Illustrator.

Trebuie să recunosc, nu este intuitiv, dar soluția este simplă.

Pentru a crea un model bitmap:

1. Pune o poză cu modelul pe piesa ta
2. Faceți clic pe „Inserați” în panglica de sus (important - nu va funcționa fără ea!)
3. Trageți un model în paleta Mostre
4. Aplicați un eșantion pe orice obiect pentru a-l umple cu un model

10. Plasarea automată a textului în jurul imaginilor și obiectelor.

Photoshop este cunoscut pentru capabilitățile sale de editare de text foarte elementare. Dacă doriți să înfășurați text în jurul unei imagini, trebuie să creați două sau trei cadre de text diferite și să simulați efectul. Sfaturi pentru lucrul cu Illustrator

Din fericire, Illustrator te-a acoperit.

Pentru a încheia text în jurul unei imagini:

1. Selectați imaginea sau obiectul în care doriți să înfășurați textul
2. Deschideți meniul Obiect, alegeți Wrap Text > New.
3. Pentru a seta distanța de împachetare, deschideți din nou meniul de împachetare text și selectați Opțiuni de împachetare text.
4. Mutați imaginea peste text pentru a vedea efectul de înfășurare

11. Creați efecte vizuale bogate cu setări de aspect al obiectului. Sfaturi pentru lucrul cu Illustrator

În Illustrator, panoul Aspect al unui obiect funcționează la fel ca efectele straturilor din Photoshop - puteți adăuga mai multe umpleri și linii la un obiect, apoi puteți juca cu modurile de transfer, opacitatea și efectele acestora pentru a obține rezultate interesante.

Acest text este doar un singur obiect vectorial, stilizat folosind panoul Aspect și efecte.

Locul de joacă este destul de mare - de la umbre, estompare și strălucire până la texturare, distorsiune și 3D. În acest fel, puteți recrea majoritatea efectelor din Photoshop în timp ce lucrați cu grafică vectorială.

Panoul Aspect este puternic și distractiv - vă încurajez să îl încercați imediat sau să urmăriți tutorialul de mai jos pentru a înțelege cum funcționează:

Stăpânirea panoului de aspect de Adobe TV .

Sunteți gata să începeți să experimentați cu Illustrator?

Crearea de site-uri web și interfețe cu utilizatorul folosind Photoshop a devenit acum norma și majoritatea designerilor sunt mulțumiți de această soluție. Sfaturi pentru lucrul cu Illustrator

Dar doar pentru că Photoshop a devenit atât de răspândit, nu înseamnă că Illustrator nu are nimic de oferit, dimpotrivă. Cu instrumente precum alinierea grilei de pixeli, împachetarea textului și aspectul obiectului, este un caz puternic.

Combinat cu puternic instrumente de layout și grafică vectorială, tăierea și exportul de imagini, Illustrator este cu siguranță o alegere evidentă pentru designerii web care doresc să dezvolte rapid site-uri web.