Nasveti za delo z Illustratorjem. Za spletne oblikovalce, ki imajo raje Photoshop

Nasveti za delo z Illustratorjem. Tukaj je nora ideja - oblikujte svoj naslednji spletni projekt v Illustratorju. Če ste glavni spletni oblikovalec, obstaja velika verjetnost, da se na ta predlog ne boste najbolje odzvali. Illustrator preprosto ne zmore vsega, kar zmore Photoshop, kajne?

Na ta način zagotovo ne.

Čeprav Photoshop je postal de facto orodje spletnega oblikovanja, je Illustrator več kot sposoben izpolniti vaše potrebe. Zaradi svojih orodij za postavitev je pogosto boljši in primernejši program za spletno oblikovanje.

Ker večina strokovnjakov za spletno oblikovanje ne želi tavati po Illustratorju in iskati dokaze, sem sestavil seznam funkcij, povezanih s spletom, ki jih morate poznati, da začnete eksperimentirati s spletnim oblikovanjem v Illustratorju.

Preizkusite nekaj teh in zagotavljam vam, da boste začeli uporabljati Illustrator kot standardno orodje v delovnem procesu spletnega oblikovanja.

1. Najprej: nastavite vse enote na slikovne pike. Nasveti za delo z Illustratorjem

Illustrator privzeto uporablja metriko enote za velikost predmetov in točk za besedilo. To so odlične nastavitve za večino oblikovalskih situacij, vendar za oblikovanje spletnih strani verjetno boste želeli videti slikovne pike povsod. Preden se torej lotite česar koli drugega, se prepričajte, da so vaše enote pravilno nastavljene.

Če želite nastaviti enote na slikovne pike:

1. Odprite v meniju Urejanje
2. V podmeniju z nastavitvami izberite merske enote.
3. Nastavite vse možnosti na "piksle"

2. Ustvarite dokumente s profilom spletnega dokumenta.

 

Ko želite začeti delati na novem dizajnu, se preprosto pomaknite skozi okno Nov dokument in preskočite nekatere pomembne podrobnosti – na primer povejte Illustratorju, da nameravate delati na spletnem dizajnu, da ne boste uporabljali barv CMYK. in zamegljeni robovi predmeta. Samo ne pozabite izbrati nastavitve internetnega profila v oknu Nov dokument in vse bo v redu.

3. Omogoči poravnavo mreže slikovnih pik za predmete. Nasveti za delo z Illustratorjem

Ta funkcija vam reši življenje, če ste kdaj imeli težave z zamegljenimi robovi oblik v Photoshopu.

Poravnava mreže slikovnih pik bo prilagodila ravne vodoravne in navpične segmente predmeta, da se popolnoma prilegajo mreži pikslov, medtem ko bodo ukrivljeni in poševni segmenti ostali gladki. Rezultat so jasne, kot slikovne pike popolne oblike – nekaj, kar si zagotovo želite pri spletnem oblikovanju.

Zgornji gumb ima omogočeno poravnavo mreže slikovnih pik, kar vedno povzroči ostre robove.

Če želite omogočiti poravnavo mreže slikovnih pik na ravni objekta:

1. Izberite predmet
2. Odprite ploščo Transform (Okno > Transformacija).
3. Označite potrditveno polje »Poravnaj z mrežo slikovnih pik« na dnu plošče (če ga ne vidite, dvokliknite ploščo, da prikažete možnosti)

Opomba. Poravnava mreže slikovnih pik je privzeto omogočena za vse nove predmete, ustvarjene s profilom spletnega dokumenta. Če pa prilepite predmete iz drugih datotek Illustratorja, boste morali ročno prilagoditi poravnavo slikovnih pik zanje. Nasveti za delo z Illustratorjem

4. Vklopite predogled pikslov.

S funkcijo Pixel-Preview se bo Illustrator obnašal tako kot Photoshop, ko bo vašo sliko spreminjal nad 100 % – namesto da bi vsakič dobili popolne vektorje, boste dejansko videli slikovne pike, kot da bi delali z rastrsko sliko.

Če vklopite predogled slikovnih pik, se boste počutili kot v Photoshopu.

Pomislite, kako kul je to - na dosegu roke imate vso moč vektorske grafike in lahko vidite, kako izgleda rezultat na ravni slikovnih pik.

Lepo, kajne?

Omogoči ali onemogoči predogled pikslov

1. Odpri meni pogleda
2. Izberite Pixel View.

5. Uporabite okna Artwork. Nasveti za delo z Illustratorjem

Predstavljajte si, da sta dve video kameri usmerjeni v vaš projekt.

Ena kamera ima običajno stopnjo povečave, ki prikazuje 100 % vašega dela. Druga kamera ima 400-odstotno stopnjo povečave in je usmerjena v eno določeno ikono, na kateri ste delali.

Tako kot kirurg uporabljate kamero za povečavo, da naredite majhne spremembe na ravni slikovnih pik na ikoni, občasno pogledate kamero s 100-odstotno povečavo, da vidite, kako dejansko izgleda v svoji dejanski velikosti.

Zaščitna okna so odlična, ko morate delati z majhnimi elementi, kot so ikone – ni vam treba nenehno povečevati in pomanjševati, da bi preverili, kako vse izgleda.

To so okna Artwork—omogočajo vam, da si hkrati ogledate svoj dizajn z različnimi stopnjami povečave, barvnimi nastavitvami in drugimi različicami. To je zelo uporabno za spletno oblikovanje, zlasti ko delate s podrobnostmi na ravni slikovnih pik.

Za uporabo oken Artwork:

1. Odprite meni Okno in izberite Novo okno. Illustrator bo ustvaril nov zavihek z istim dokumentom v pogledu.
2. Ponovno pojdite v meni Okno, izberite Razporedi > Premakni vse v okno. To vam bo omogočilo spremembo velikost in postavitev oken enega zraven drugega, kot se vam zdi primerno.
3. Eksperimentirajte z različnimi stopnjami povečave v oknih in začnite nekaj spreminjati, da vidite, kako deluje. Nasveti za delo z Illustratorjem

6. Uporabite simbole za hitro ustvarjanje gumbov, ikon in drugega.

Kolikokrat ste ustvarili isti (ali skoraj isti) gumb, ikono ali gradnik v Photoshopu? Če se ukvarjate s spletnim oblikovanjem, to verjetno počnete vsak dan.

Illustrator vam lahko pomaga prihraniti čas in se izogniti temu ponavljajočemu se delu s simboli.

V bistvu so simboli neskončen nabor že pripravljenega elementi oblikovanja, ki ga lahko dodate delu tako, da preprosto povlečete in spustite, nato pa ga po potrebi spremenite. To je idealno za gumbe, ikone in druge standardne predmete, ki jih ni treba ustvariti iz nič.

Toda obstaja še en razlog, zakaj so simboli močni, in imenuje se instanciranje.

Simboli niso le priročni, ampak tudi olajšajo posodabljanje ponavljajočih se elementov oblikovanja.

 

V bistvu se vsakič, ko spremenite izvirni simbol, te spremembe takoj odražajo v vseh primerkih simbola, ki ga najdete v vašem umetniškem delu. Potrebujete večje gumbe na svojem spletnem mestu? Samo spremenite simbol. Ali želite, da so vaša polja obrazca na vsaki strani videti drugače? Samo spremenite simbol. Razumete.

Nasvet: Če ne želite, da se to zgodi določenemu primerku simbola as, z desno miškino tipko kliknite predmet na vaši ilustraciji in izberite Prekini referenco simbola. To ga bo izključilo iz samodejnih posodobitev.

Tukaj je dober videoposnetek, ki pojasnjuje, kako uporabljati in manipulirati s simboli:

Uporaba simbolov v programu Adobe Illustrator z dne Adobe TV .

Če želite uporabiti obstoječi simbol:

1. Odprite ploščo Simboli v meniju Okno.
2. Povlecite izbrani simbol na svoje delo

Ustvari nov simbol:

1. Ustvari sliko simbola
2. Odprite ploščo Simboli v meniju Okno.
3. Povlecite ilustracijo na ploščo
4. Kliknite V redu v pogovornem oknu za potrditev.

Če želite urediti simbol:

1. Odprite ploščo Simboli v meniju Okno.
2. Dvokliknite simbol za vstop v način urejanja.
3. Ko končate, dvokliknite kjer koli zunaj slike simbola, da zapustite način urejanja.

7. Preprosto razširite predmete z 9-segmentnim skaliranjem. Nasveti za delo z Illustratorjem

To je napredna funkcija simbologije, ki vam omogoča, da določite, kateri deli predmeta se med spreminjanjem velikosti raztegnejo in kateri ostanejo nespremenjeni.

Levo: primer raztegnjenega gumba z in brez 9-segmentne nastavitve povečave. Desno: 9-segmentna nastavitev skaliranja vključuje premikanje 4 vodil, ki povedo Illustratorju, kateri deli predmeta so zaščiteni in kateri deli se lahko spreminjajo.

 

Praktičen primer je gumb z zaobljenimi vogali – če ga želite podaljšati, ga ne morete samo vodoravno raztegniti, ker bo to popačilo celoten predmet. Namesto tega boste morali ročno premikati točke oblike. Z 9-segmentnim skaliranjem raztezanje deluje, kot ste nameravali. Nasveti za delo z Illustratorjem

Če želite resnično razumeti, kako deluje, poslušajte to odlično video vadnico Adobe TV, da se hitro naučite:

Uporaba 9-segmentnega skaliranja s simboli z dne Adobe TV .

8. Zaobljeni vogali povsod!

V Photoshopu lahko ustvarite zaobljen pravokotnik, vendar vam Illustrator omogoča uporabo nedestruktivnega učinka zaobljenega vogala na skoraj vsak predmet. Kaj je nedestruktivni učinek? To pomeni, da ga lahko vklopite, izklopite ali spremenite njegove nastavitve, ne da bi to vplivalo na temeljni izvirni predmet.

Učinek zaobljenih vogalov lahko uporabite za skoraj vse vrste predmetov in jih po potrebi prilagodite. Nasveti za delo z Illustratorjem

Če želite uporabiti učinek zaobljenega kota:

1. Ustvarite pravokotnik ali kateri koli drug predmet z ostrimi vogali
2. V meniju Effects izberite Stylize > Rounded Corners.
3. Vnesite polmer kota in kliknite Predogled, da vidite, kako izgleda.
4. Kliknite OK, da uporabite učinek.

Če želite spremeniti učinek zaobljenega kota:

1. Izberite predmet z zaobljenimi vogali
2. Odprite ploščo Videz v meniju Okno.
3. Poiščite učinek Rounded Corners in ga dvokliknite, da spremenite njegove nastavitve, ali kliknite ikono očesa, da ga vklopite ali izklopite.

9. Ustvarjanje hitrega polnila z rastrskim vzorcem. Nasveti za delo z Illustratorjem

Subtilni vzorci ozadja so velika uspešnica v spletnem oblikovanju, vendar mnogi oblikovalci menijo, da jih v Illustratorju ni enostavno uporabiti.

Moram priznati, da ni intuitivno, a rešitev je preprosta.

Če želite ustvariti vzorec bitne slike:

1. Na svoj kos postavite sliko vzorca
2. Kliknite "Vstavi" na zgornjem traku (pomembno - brez tega ne bo delovalo!)
3. Povlecite vzorec na paleto Swatches
4. Uporabite vzorec na poljuben predmet, da ga napolnite z vzorcem

10. Samodejna postavitev besedila okoli slik in predmetov.

Photoshop je znan po zelo osnovnih zmožnostih urejanja besedila. Če želite besedilo oviti okoli slike, morate ustvariti dva ali tri različne besedilne okvirje in simulirati učinek. Nasveti za delo z Illustratorjem

Na srečo vas Illustrator pokriva.

Če želite besedilo obliti okoli slike:

1. Izberite sliko ali predmet, okrog katerega želite obliti besedilo
2. Odprite meni Predmet, izberite Prelomi besedilo > Novo.
3. Če želite nastaviti razdaljo preloma, znova odprite meni Prelom besedila in izberite Možnosti preloma besedila.
4. Premaknite sliko čez besedilo, da vidite učinek ovijanja

11. Ustvarite bogate vizualne učinke z nastavitvami videza predmeta. Nasveti za delo z Illustratorjem

V Illustratorju plošča Videz predmeta deluje podobno kot učinki plasti v Photoshopu – predmetu lahko dodate več polnil in potez, nato pa se igrate z njihovimi načini prenosa, motnostjo in učinki, da dobite zanimive rezultate.

To besedilo je samo en vektorski predmet, oblikovan s ploščo Videz in učinki.

Igrišče je precej veliko - od padajočih senc, zameglitve in sijaja do teksturiranja, popačenja in 3D. Tako lahko poustvarite večino učinkov iz Photoshopa, medtem ko še vedno delate z vektorsko grafiko.

Plošča Videz je močna in zabavna - priporočam vam, da jo takoj preizkusite ali si ogledate spodnjo vadnico, da boste razumeli, kako deluje:

Obvladovanje plošče videza z dne Adobe TV .

Ali ste pripravljeni začeti eksperimentirati z Illustratorjem?

Ustvarjanje spletnih strani in uporabniških vmesnikov s pomočjo Photoshopa je zdaj postalo pravilo in večina oblikovalcev je s to rešitvijo zadovoljna. Nasveti za delo z Illustratorjem

Toda samo zato, ker je Photoshop postal tako razširjen, še ne pomeni, da Illustrator nima ničesar ponuditi – ravno nasprotno. Z orodji, kot so poravnava mreže slikovnih pik, oblivanje besedila in videz predmeta, predstavlja močan primer.

V kombinaciji z močnim orodja za postavitev in vektorsko grafiko, rezanje slik in izvoz, je Illustrator vsekakor očitna izbira za spletne oblikovalce, ki želijo hitro razvijati spletna mesta.