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

Savjeti za rad sa Illustratorom. Evo jedne lude ideje - dizajnirajte svoj sljedeći web projekat u Illustratoru. Ako ste primarni web dizajner, velike su šanse da nećete dobro odgovoriti 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 profesionalaca za web dizajn ne želi lutati Illustratorom u potrazi za dokazima, sastavio sam listu funkcija povezanih s webom koje trebate znati da biste počeli eksperimentirati s web dizajnom u Illustratoru.

Isprobajte nekoliko od ovih i garantujem vam da ćete početi koristiti Illustrator kao standardni alat u svom radnom toku web dizajna.

1. Prvo prvo: postavite sve jedinice na Piksele. Savjeti za rad sa Illustratorom

Podrazumevano, Illustrator koristi metriku jedinice za veličinu objekata i tačaka za tekst. Ovo su odlične postavke za većinu dizajnerskih situacija, ali za web dizajn verovatno ćete želeti da vidite piksele svuda. Stoga prije nego počnete raditi na bilo čemu drugom, provjerite jesu li vaše jedinice ispravno postavljene.

Da biste postavili jedinice na piksele:

1. Otvorite u meniju Uredi
2. Odaberite mjerne jedinice iz podmenija postavki.
3. Postavite sve opcije na "pikseli"

2. Kreirajte dokumente koristeći profil web dokumenata.

 

Kada želite da počnete da radite na novom dizajnu, lako se pomerajte kroz prozor Novi dokument i preskočite neke važne detalje—kao što je reći Illustratoru da planirate da radite na veb dizajnu kako ne biste koristili CMYK boje. i zamućene ivice objekta. Samo zapamtite da odaberete postavku Internet profila u prozoru Novi dokument i sve će biti u redu.

3. Omogućite poravnanje mreže piksela za objekte. Savjeti za rad sa Illustratorom

Ova funkcija vam spašava život ako ste ikada imali problema sa zamućenim ivicama oblika u Photoshopu.

Poravnanje mreže piksela će prilagoditi ravne horizontalne i vertikalne segmente objekta kako bi se savršeno uklopili u mrežu piksela, dok će zakrivljeni i kosi segmenti biti glatki. Rezultat su oštri, pikselski savršeni oblici—nešto što svakako želite u web dizajnu.

Gornje dugme ima omogućeno poravnanje mreže piksela, što uvek rezultira oštrim ivicama.

Da omogućite poravnanje mreže piksela na nivou objekta:

1. Odaberite objekt
2. Otvorite tablu Transform (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 da biste prikazali opcije)

Bilješka. Poravnanje mreže piksela je podrazumevano omogućeno za sve nove objekte kreirane 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 sa Illustratorom

4. Uključite pregled piksela.

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

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

Zamislite kako je to super - imate svu moć vektorske grafike na dohvat ruke i možete vidjeti kako rezultat izgleda na nivou piksela.

Uredno, zar ne?

Omogućite ili onemogućite pregled piksela

1. Otvorite meni za prikaz
2. Odaberite Pixel View.

5. Koristite prozore Artwork. Savjeti za rad sa Illustratorom

Zamislite da su dvije video kamere usmjerene na vaš projekat.

Jedna kamera ima normalan nivo zumiranja i prikazuje 100% vašeg rada. Druga kamera ima nivo zuma od 400% i usmerena je na jednu specifičnu ikonu na kojoj ste radili.

Poput hirurga, koristite zum kameru da napravite male promene na nivou piksela na ikoni, povremeno bacite pogled na kameru sa 100% zumom da vidite kako ona zapravo izgleda u svojoj stvarnoj veličini.

Poklopni prozori su sjajni kada treba da radite sa malim elementima kao što su ikone – ne morate stalno da zumirate i umanjujete da biste proverili kako sve izgleda.

Ovo su prozori Artwork—oni vam omogućavaju da istovremeno vidite svoj dizajn s različitim nivoima zumiranja, postavkama boja i drugim varijacijama. Ovo je vrlo korisno za web dizajn, posebno kada radite s detaljima na nivou piksela.

Za korištenje prozora Artwork:

1. Otvorite meni Prozor, a zatim izaberite Novi prozor. Illustrator će kreirati novu karticu sa istim dokumentom u prikazu.
2. Idite ponovo na meni Prozor, odaberite Rasporedi > Premesti sve u prozor. Ovo će vam omogućiti da se promijenite veličina i raspored prozora jedan pored drugog kako vam odgovara.
3. Eksperimentirajte s različitim razinama zumiranja u prozorima i počnite unositi neke promjene da vidite kako to funkcionira. Savjeti za rad sa Illustratorom

6. Koristite simbole za brzo kreiranje dugmadi, ikona i još mnogo toga.

Koliko puta ste kreirali isto (ili skoro isto) dugme, ikonu ili vidžet u Photoshopu? Ako se bavite web dizajnom, vjerovatno to radite svaki dan.

Illustrator vam može pomoći da uštedite vrijeme i izbjegnete ovaj ponavljajući rad sa simbolima.

U suštini, simboli su beskonačan skup gotovih proizvoda elementi dizajna, koji se može dodati u rad jednostavnim povlačenjem i ispuštanjem, a zatim modificirati po potrebi. Ovo je idealno za dugmad, ikone i druge standardne objekte koje nije potrebno kreirati od nule.

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

Simboli nisu samo praktični, već i olakšavaju ažuriranje elemenata dizajna koji se ponavljaju.

 

U suštini, kad god unesete promjene u originalni simbol, te promjene se odmah odražavaju u svim instancama simbola koji se nalaze u vašem umjetničkom djelu. Da li su vam potrebna veća dugmad na vašoj web stranici? Samo promijenite simbol. Želite li da vaša polja obrasca izgledaju drugačije na svakoj stranici? Samo promijenite simbol. Shvatili ste ideju.

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

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

Upotreba simbola u Adobe Illustratoru из Adobe TV .

Za korištenje postojećeg simbola:

1. Otvorite tablu Simboli iz menija Prozor.
2. Prevucite odabrani simbol na svoj rad

Kreirajte novi simbol:

1. Kreirajte sliku simbola
2. Otvorite tablu Simboli iz menija Prozor.
3. Prevucite ilustraciju na panel
4. Kliknite OK u dijaloškom okviru za potvrdu.

Da uredite simbol:

1. Otvorite tablu Simboli iz menija Prozor.
2. Dvaput kliknite na simbol da uđete u mod za uređivanje.
3. Kada završite, dvaput kliknite bilo gdje izvan slike simbola da izađete iz moda za uređivanje.

7. Lako proširite objekte pomoću 9-segmentnog skaliranja. Savjeti za rad sa Illustratorom

Ovo je napredna funkcija simbologije koja vam omogućava da definirate koji dijelovi objekta se rastežu tokom skaliranja, a koji ostaju nepromijenjeni.

Lijevo: primjer rastegnutog dugmeta sa i bez postavke zumiranja od 9 segmenata. Desno: 9-segmentna postavka skaliranja uključuje pomicanje 4 vodiča koji govore Illustratoru koji su dijelovi objekta zaštićeni i koji dijelovi se mogu skalirati.

 

Praktičan primjer je dugme sa zaobljenim uglovima – ako želite da ga produžite, ne možete ga samo horizontalno rastegnuti jer će to izobličiti ceo objekat. Umjesto toga, morat ćete ručno pomicati točke oblika. Uz skaliranje od 9 segmenata, rastezanje radi kako ste namjeravali. Savjeti za rad sa Illustratorom

Da biste zaista razumjeli kako to funkcionira, poslušajte ovaj sjajni video vodič sa Adobe TV-a da biste brzo napredovali:

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

8. Zaobljeni uglovi posvuda!

Možete kreirati zaobljeni pravougaonik u Photoshopu, ali Illustrator vam omogućava da primenite nedestruktivni efekat zaobljenog ugla na skoro svaki objekat. Šta je nedestruktivni efekat? To znači da ga možete uključiti, isključiti ili promijeniti njegove postavke bez utjecaja na osnovni originalni objekt.

Efekt zaobljenih uglova možete primijeniti na gotovo bilo koju vrstu objekta i prilagoditi ga po potrebi. Savjeti za rad sa Illustratorom

Da biste primijenili efekat zaobljenog ugla:

1. Napravite pravougaonik ili bilo koji drugi objekat sa oštrim uglovima
2. Iz izbornika Efekti odaberite Stiliziraj > Zaobljeni uglovi.
3. Unesite radijus ugla i kliknite Pregled da vidite kako to izgleda.
4. Kliknite OK da primenite efekat.

Za promjenu efekta zaobljenog ugla:

1. Odaberite objekt sa zaobljenim uglovima
2. Otvorite panel Izgled iz menija Prozor.
3. Pronađite efekat zaobljenih uglova i dvaput kliknite na njega da promijenite njegove postavke ili kliknite na ikonu oka da ga uključite ili isključite.

9. Kreiranje brze ispune sa rasterskim uzorkom. Savjeti za rad sa Illustratorom

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

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

Da kreirate bitmap uzorak:

1. Postavite sliku uzorka na svoj komad
2. Kliknite na "Insert" na gornjoj traci (važno - bez toga neće raditi!)
3. Prevucite uzorak na paletu Swatches
4. Nanesite uzorak na bilo koji objekt da ga ispunite uzorkom

10. Automatsko postavljanje teksta oko slika i objekata.

Photoshop je poznat po svojim vrlo osnovnim mogućnostima za uređivanje teksta. Ako želite premotati tekst oko slike, morate kreirati dva ili tri različita okvira teksta i simulirati efekat. Savjeti za rad sa Illustratorom

Srećom, Illustrator vas je pokrio.

Za premotavanje teksta oko slike:

1. Odaberite sliku ili objekt oko kojeg želite premotati tekst
2. Otvorite meni Objekat, izaberite Prelomi tekst > Novo.
3. Da biste podesili udaljenost prelamanja, ponovo otvorite meni prelamanja teksta i izaberite Opcije prelamanja teksta.
4. Premjestite sliku preko teksta da vidite efekat premotavanja

11. Kreirajte bogate vizuelne efekte sa postavkama izgleda objekata. Savjeti za rad sa Illustratorom

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

Ovaj tekst je samo jedan vektorski objekat, stilizovan pomoću panela Izgled i efekti.

Igralište je prilično veliko - od padajućih senki, zamućenja i sjaja do teksturiranja, distorzije i 3D. Na ovaj način možete ponovo kreirati većinu efekata iz Photoshopa dok i dalje radite sa vektorskom grafikom.

Panel za izgled je moćan i zabavan - preporučujem vam da ga isprobate odmah ili pogledate vodič u nastavku da biste razumjeli kako funkcionira:

Ovladavanje panelom izgleda из Adobe TV .

Jeste li spremni za eksperimentiranje s Illustratorom?

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

Ali samo zato što je Photoshop postao toliko raširen ne znači da Illustrator nema šta da ponudi – upravo suprotno. Uz alate kao što su poravnanje mreže piksela, prelamanje teksta i izgled objekata, to je jak slučaj.

U kombinaciji sa moćnim alati za raspored i vektorsku grafiku, rezanje slika i izvoz, Illustrator je definitivno očigledan izbor za web dizajnere koji žele brzo razviti web stranice.