Savjeti za rad s Illustratorom. Za web dizajnere koji preferiraju Photoshop

Savjeti za rad s Illustratorom. Evo jedne lude ideje - dizajnirajte svoj sljedeći web projekt u Illustratoru. Ako ste primarni web dizajner, velike su šanse da nećete dobro reagirati na ovaj prijedlog. Illustrator jednostavno ne može sve što Photoshop može, zar ne?

Ne sigurno na taj način.

Iako Photoshop je postao de facto alat web dizajn, Illustrator je više nego sposoban zadovoljiti vaše potrebe. Zahvaljujući svojim alatima za izgled, često je bolji i prikladniji program za web dizajn.

Budući da većina stručnjaka za web dizajn ne želi lutati po Illustratoru tražeći dokaze, sastavio sam popis značajki povezanih s webom koje trebate znati da biste počeli eksperimentirati s web dizajnom u Illustratoru.

Isprobajte nekoliko od ovih i jamčim vam da ćete početi koristiti Illustrator kao standardni alat u tijeku rada vašeg web dizajna.

1. Prije svega: postavite sve jedinice na piksele. Savjeti za rad s Illustratorom

Prema zadanim postavkama, Illustrator koristi metriku jedinice za veličinu predmeta i točaka za tekst. Ovo su izvrsne postavke za većinu dizajnerskih situacija, ali za web dizajn vjerojatno ćete htjeti vidjeti piksele posvuda. Prije nego počnete raditi na bilo čemu drugom, provjerite jesu li vaše jedinice ispravno postavljene.

Za postavljanje jedinica na piksele:

1. Otvorite u izborniku Uredi
2. Odaberite mjerne jedinice iz podizbornika postavki.
3. Postavite sve opcije na "piksele"

2. Izradite dokumente pomoću profila web dokumenta.

 

Kada želite početi raditi na novom dizajnu, lako se pomičite kroz prozor New Document i preskočite neke važne pojedinosti—na primjer da kažete Illustratoru da planirate raditi na web dizajnu tako da ne koristite CMYK boje. i zamućeni rubovi predmeta. Samo ne zaboravite odabrati postavku Internet profila u prozoru New Document i bit ćete u redu.

3. Omogućite poravnanje rešetke piksela za objekte. Savjeti za rad s Illustratorom

Ova značajka spašava život ako ste ikada imali problema s zamućenim rubovima oblika u Photoshopu.

Pixel Grid Alignment prilagodit će ravne vodoravne i okomite segmente objekta kako bi se savršeno uklopili u mrežu piksela, dok će zakrivljeni i nagnuti segmenti ostati glatki. Rezultat su oštri, pikselski savršeni oblici - nešto što svakako želite u web dizajnu.

Gornji gumb ima omogućeno poravnanje mreže piksela, što uvijek rezultira jasnim rubovima.

Da biste omogućili poravnanje rešetke piksela na razini objekta:

1. Odaberite objekt
2. Otvorite ploču Transformacija (Prozor > Transformacija).
3. Označite potvrdni okvir "Poravnaj s mrežom piksela" na dnu ploče (ako ga ne vidite, dvaput kliknite na ploču za prikaz opcija)

Bilješka. Poravnanje pikselne mreže omogućeno je prema zadanim postavkama za sve nove objekte stvorene pomoću profila web dokumenta. Međutim, ako lijepite objekte iz drugih Illustrator datoteka, morat ćete ručno prilagoditi poravnanje piksela za njih. Savjeti za rad s Illustratorom

4. Uključite pregled piksela.

Značajka Pixel-Preview učinit će da se Illustrator ponaša kao Photoshop kada skalira vašu sliku iznad 100%—umjesto da svaki put dobijete savršene vektore, zapravo ćete vidjeti piksele kao da radite s rasterskom slikom.

Ako uključite pregled piksela, osjećat ćete se kao da ste u Photoshopu.

Razmislite o tome kako je to cool - imate svu snagu vektorske grafike na dohvat ruke i možete vidjeti kako rezultat izgleda na razini piksela.

Zgodno, zar ne?

Omogućite ili onemogućite pregled piksela

1. Otvorite izbornik prikaza
2. Odaberite Prikaz piksela.

5. Koristite prozore Artwork. Savjeti za rad s Illustratorom

Zamislite da su dvije video kamere uperene u vaš projekt.

Jedna kamera ima normalnu razinu zumiranja, prikazujući 100% vašeg rada. Druga kamera ima razinu zumiranja od 400% i usmjerena je na jednu određenu ikonu na kojoj ste radili.

Poput kirurga, koristite kameru za zumiranje da napravite sitne promjene na razini piksela na ikoni, povremeno bacajući pogled na kameru sa 100% zumiranjem da vidite kako zapravo izgleda u svojoj stvarnoj veličini.

Zaštitni prozori izvrsni su kada trebate raditi s malim elementima poput ikona—ne morate neprestano povećavati i smanjivati ​​da biste provjerili kako sve izgleda.

Ovo su prozori umjetnina—omogućuju vam da istovremeno gledate svoj dizajn s različitim razinama zumiranja, postavkama boja i drugim varijacijama. Ovo je vrlo korisno za web dizajn, posebno kada radite s detaljima na razini piksela.

Za korištenje prozora Artwork:

1. Otvorite izbornik Prozor, zatim odaberite Novi prozor. Illustrator će stvoriti novu karticu s istim dokumentom u prikazu.
2. Ponovno idite na izbornik Prozor, odaberite Rasporedi > Premjesti sve u prozor. To će vam omogućiti promjenu veličina i položaj prozora jedan do drugog kako vama odgovara.
3. Eksperimentirajte s različitim razinama zumiranja u prozorima i počnite unositi neke promjene da vidite kako to funkcionira. Savjeti za rad s Illustratorom

6. Koristite simbole za brzo stvaranje gumba, ikona i više.

Koliko ste puta izradili isti (ili gotovo isti) gumb, ikonu ili widget u Photoshopu? Ako se bavite web dizajnom, vjerojatno to radite svaki dan.

Illustrator vam može pomoći uštedjeti vrijeme i izbjeći ponavljajući rad sa simbolima.

U biti, simboli su beskonačan skup gotovih stvari elementi dizajna, koji se može dodati u rad jednostavnim povlačenjem i ispuštanjem, a zatim po potrebi modificirati. Ovo je idealno za gumbe, ikone i druge standardne objekte koji se ne moraju stvarati od nule.

Ali postoji još jedan razlog zašto su simboli moćni, a zove se instanciranje.

Simboli nisu samo praktični, već također olakšavaju ažuriranje ponavljajućih elemenata dizajna.

 

U biti, kad god promijenite izvorni simbol, te se promjene odmah odražavaju u svim instancama simbola koji se nalaze u vašem umjetničkom djelu. Trebate li veće gumbe na svojoj web stranici? Samo promijenite simbol. Želite li da vaša polja obrasca izgledaju drugačije na svakoj stranici? Samo promijenite simbol. Shvatili ste.

Savjet: Ako ne želite da se to dogodi određenoj instanci as simbola, desnom tipkom miša kliknite objekt na svojoj ilustraciji i odaberite Prekini referencu simbola. To će ga isključiti iz automatskih ažuriranja.

Evo dobrog videa koji objašnjava kako koristiti i manipulirati simbolima:

Korištenje simbola u Adobe Illustratoru od Adobe TV .

Za korištenje postojećeg simbola:

1. Otvorite ploču Symbols iz izbornika Window.
2. Povucite odabrani simbol na svoj rad

Napravite novi simbol:

1. Napravite sliku simbola
2. Otvorite ploču Symbols iz izbornika Window.
3. Povucite ilustraciju na ploču
4. Kliknite OK u dijaloškom okviru za potvrdu.

Za uređivanje simbola:

1. Otvorite ploču Symbols iz izbornika Window.
2. Dvaput pritisnite simbol za ulazak u način uređivanja.
3. Kada završite, dvaput kliknite bilo gdje izvan slike simbola da izađete iz načina uređivanja.

7. Lako proširite objekte skaliranjem od 9 segmenata. Savjeti za rad s Illustratorom

Ovo je napredna značajka simbologije koja vam omogućuje da definirate koji se dijelovi objekta rastežu tijekom skaliranja, a koji ostaju nepromijenjeni.

Lijevo: primjer razvučene tipke sa i bez postavke zumiranja od 9 segmenata. Desno: postavka skaliranja od 9 segmenata uključuje pomicanje 4 vodilice koje govore Illustratoru koji su dijelovi objekta zaštićeni i koji se dijelovi mogu skalirati.

 

Praktičan primjer je gumb sa zaobljenim uglovima - ako ga želite produljiti, ne možete ga samo vodoravno razvući jer ćete tako iskriviti cijeli objekt. Umjesto toga, morat ćete ručno premjestiti točke oblika. Uz 9-segmentno skaliranje, istezanje radi kako ste namjeravali. Savjeti za rad s Illustratorom

Da biste doista razumjeli kako to radi, poslušajte ovaj izvrstan video vodič s Adobe TV-a kako biste brzo naučili:

Korištenje 9-segmentnog skaliranja sa simbolima od Adobe TV .

8. Zaobljeni kutovi posvuda!

U Photoshopu možete stvoriti zaobljeni pravokutnik, ali Illustrator vam omogućuje primjenu nedestruktivnog efekta zaobljenog kuta na gotovo svaki objekt. Što je nedestruktivni učinak? To znači da ga možete uključiti, isključiti ili promijeniti njegove postavke bez utjecaja na osnovni izvorni objekt.

Efekt zaobljenih kutova možete primijeniti na gotovo sve vrste objekata i prilagoditi ih po potrebi. Savjeti za rad s Illustratorom

Za primjenu efekta zaobljenog kuta:

1. Napravite pravokutnik ili bilo koji drugi objekt s oštrim kutovima
2. Na izborniku Efekti odaberite Stylize > Rounded Corners.
3. Unesite radijus kuta i kliknite Pregled da vidite kako izgleda.
4. Kliknite OK za primjenu efekta.

Za promjenu efekta zaobljenog kuta:

1. Odaberite objekt sa zaobljenim kutovima
2. Otvorite ploču Izgled iz izbornika Prozor.
3. Pronađite efekt zaobljenih uglova i dvaput ga kliknite da biste promijenili njegove postavke ili kliknite ikonu oka da biste ga uključili ili isključili.

9. Izrada brze ispune rasterskim uzorkom. Savjeti za rad s Illustratorom

Suptilni uzorci pozadine veliki su hit u web dizajnu, ali mnogi dizajneri misle da ih nije lako primijeniti u Illustratoru.

Moram priznati, nije intuitivno, ali rješenje je jednostavno.

Za izradu bitmap uzorka:

1. Postavite sliku uzorka na svoj komad
2. Kliknite "Umetni" na gornjoj vrpci (važno - bez toga neće raditi!)
3. Povucite uzorak na paletu Swatches
4. Nanesite uzorak na bilo koji predmet da biste ga ispunili uzorkom

10. Automatsko postavljanje teksta oko slika i objekata.

Photoshop je poznat po svojim vrlo osnovnim mogućnostima uređivanja teksta. Ako želite omotati tekst oko slike, trebate stvoriti dva ili tri različita tekstualna okvira i simulirati učinak. Savjeti za rad s Illustratorom

Srećom, Illustrator vas pokriva.

Za omotavanje teksta oko slike:

1. Odaberite sliku ili objekt oko kojeg želite omotati tekst
2. Otvorite izbornik Object, odaberite Wrap Text > New.
3. Da biste postavili udaljenost prijelamanja, ponovo otvorite izbornik Text Wrap i odaberite Text Wrap Options.
4. Pomaknite sliku preko teksta da biste vidjeli učinak omatanja

11. Stvorite bogate vizualne efekte s postavkama izgleda objekta. Savjeti za rad s Illustratorom

U Illustratoru, ploča Izgled objekta radi slično kao efekti slojeva u Photoshopu—možete dodati više ispuna i poteza objektu, a zatim se igrati s njihovim načinima prijenosa, neprozirnošću i efektima kako biste dobili zanimljive rezultate.

Ovaj tekst je samo jedan vektorski objekt, stiliziran pomoću ploče Izgled i efekti.

Igralište je prilično veliko - od padajućih sjena, zamućenja i sjaja do teksturiranja, izobličenja i 3D-a. Na taj način možete rekreirati većinu efekata iz Photoshopa dok i dalje radite s vektorskom grafikom.

Ploča Izgled moćna je i zabavna - potičem vas da je odmah isprobate ili pogledate vodič u nastavku da biste razumjeli kako radi:

Ovladavanje pločom izgleda od Adobe TV .

Jeste li spremni početi eksperimentirati s Illustratorom?

Izrada web stranica i korisničkih sučelja pomoću Photoshopa sada je postala norma i većina dizajnera je zadovoljna ovim rješenjem. Savjeti za rad s Illustratorom

Ali samo zato što je Photoshop postao toliko raširen ne znači da Illustrator nema što ponuditi - upravo suprotno. S alatima kao što su poravnanje pikselske rešetke, prelamanje teksta i izgled objekta, čini jak slučaj.

U kombinaciji s moćnim alati za raspored i vektorske grafike, rezanja i izvoza slika, Illustrator je definitivno očigledan izbor za web dizajnere koji žele brzo razvijati web stranice.