Padomi darbam ar Illustrator. Tīmekļa dizaineriem, kuri dod priekšroku Photoshop

Padomi darbam ar Illustrator. Šeit ir traka ideja — izstrādājiet savu nākamo tīmekļa projektu programmā Illustrator. Ja esat galvenais tīmekļa dizainers, iespējams, ka uz šo ieteikumu neatbildēsit īpaši labi. Illustrator vienkārši nevar darīt visu, ko var darīt Photoshop, vai ne?

Noteikti ne tādā veidā.

Kaut gan Photoshop ir kļuvis par de facto rīku tīmekļa dizains, Illustrator vairāk nekā spēj apmierināt jūsu vajadzības. Pateicoties izkārtojuma rīkiem, tā bieži vien ir labāka un piemērotāka programma tīmekļa dizainam.

Tā kā lielākā daļa tīmekļa dizaina profesionāļu nevēlas klīst pa programmu Illustrator, meklējot pierādījumus, esmu izveidojis sarakstu ar ar tīmekli saistītajām funkcijām, kas jums jāzina, lai sāktu eksperimentēt ar tīmekļa dizainu programmā Illustrator.

Izmēģiniet dažus no tiem, un es garantēju, ka sāksit lietot Illustrator kā standarta rīku savā tīmekļa dizaina darbplūsmā.

1. Vispirms: iestatiet visas vienības uz pikseļiem. Padomi darbam ar Illustrator

Pēc noklusējuma Illustrator izmanto metriku objektu un punktu izmēru vienības tekstam. Šie ir lieliski iestatījumi lielākajai daļai dizaina situāciju, taču web dizains jūs, iespējams, vēlēsities redzēt pikseļus visur. Tāpēc, pirms sākat strādāt pie kaut kā cita, pārliecinieties, vai jūsu vienības ir iestatītas pareizi.

Lai iestatītu pikseļu vienības:

1. Atvērt izvēlnē Rediģēt
2. Iestatījumu apakšizvēlnē atlasiet mērvienības.
3. Iestatiet visas opcijas uz "pikseļi"

2. Izveidojiet dokumentus, izmantojot tīmekļa dokumentu profilu.

 

Ja vēlaties sākt strādāt pie jauna dizaina, viegli ritiniet pa logu Jauns dokuments un izlaidiet dažas svarīgas detaļas, piemēram, pastāstiet programmai Illustrator, ka plānojat strādāt pie tīmekļa dizaina, lai neizmantotu CMYK krāsas. un izplūdušas objekta malas. Vienkārši neaizmirstiet logā Jauns dokuments atlasīt interneta profila iestatījumu, un viss būs kārtībā.

3. Iespējojiet objektu pikseļu režģa izlīdzināšanu. Padomi darbam ar Illustrator

Šī funkcija ir dzīvības glābšana, ja jums kādreiz ir bijušas problēmas ar izplūdušām formas malām programmā Photoshop.

Pikseļu režģa izlīdzināšana pielāgos objekta taisnos horizontālos un vertikālos segmentus, lai tie lieliski atbilstu pikseļu režģim, vienlaikus saglabājot izliektos un slīpos segmentus gludus. Rezultāts ir izteiksmīgas, pikseļiem perfektas formas — tas, ko jūs noteikti vēlaties tīmekļa dizainā.

Augšējā pogai ir iespējota pikseļu režģa izlīdzināšana, kas vienmēr rada skaidras malas.

Lai iespējotu objekta līmeņa pikseļu režģa līdzināšanu:

1. Izvēlieties objektu
2. Atveriet pārveidošanas paneli (Logs > Transformēt).
3. Paneļa apakšdaļā atzīmējiet izvēles rūtiņu "Izlīdzināt pikseļu režģim" (ja to neredzat, veiciet dubultklikšķi uz paneļa, lai parādītu opcijas).

Piezīme. Pikseļu režģa līdzināšana pēc noklusējuma ir iespējota visiem jaunajiem objektiem, kas izveidoti, izmantojot tīmekļa dokumenta profilu. Tomēr, ja ielīmējat objektus no citiem Illustrator failiem, jums būs manuāli jāpielāgo pikseļu līdzinājums tiem. Padomi darbam ar Illustrator

4. Ieslēgt pikseļu priekšskatījumu.

Pikseļu priekšskatījuma funkcija liks Illustrator rīkoties tāpat kā Photoshop, kad attēla mērogojums pārsniedz 100% — tā vietā, lai katru reizi iegūtu perfektus vektorus, jūs redzēsit pikseļus tā, it kā strādātu ar rastra attēlu.

Ieslēdzot pikseļu priekšskatījumu, jūs jutīsities kā programmā Photoshop.

Padomājiet par to, cik tas ir forši — jums ir rokas stiepiena attālumā visas vektorgrafikas iespējas, un jūs varat redzēt, kā rezultāts izskatās pikseļu līmenī.

Kārtīgi, vai ne?

Iespējot vai atspējot pikseļu priekšskatījumu

1. Atvērt skata izvēlni
2. Atlasiet Pixel View.

5. Izmantojiet mākslas darbu logus. Padomi darbam ar Illustrator

Iedomājieties, ka uz jūsu projektu ir vērstas divas videokameras.

Vienai kamerai ir normāls tālummaiņas līmenis, kas parāda 100% jūsu darba. Otrai kamerai ir 400% tālummaiņas līmenis, un tā ir vērsta uz vienu konkrētu ikonu, pie kuras strādājāt.

Tāpat kā ķirurgs, jūs izmantojat tālummaiņas kameru, lai veiktu niecīgas ikonas pikseļu līmeņa izmaiņas, laiku pa laikam uzmetot skatienu 100% tālummaiņas kamerai, lai redzētu, kā tā patiesībā izskatās tās faktiskajā izmērā.

Pārsega logi ir lieliski piemēroti, ja nepieciešams strādāt ar maziem elementiem, piemēram, ikonām — jums nav nepārtraukti jātuvina un jātālina, lai pārbaudītu, kā viss izskatās.

Tie ir mākslas darbu logi — tie ļauj vienlaikus skatīt savu dizainu ar dažādiem tālummaiņas līmeņiem, krāsu iestatījumiem un citām variācijām. Tas ir ļoti noderīgi tīmekļa dizainā, it īpaši, ja strādājat ar pikseļu līmeņa detaļām.

Lai izmantotu mākslas darbu logus:

1. Atveriet izvēlni Logs un pēc tam atlasiet Jauns logs. Illustrator izveidos jaunu cilni ar to pašu dokumentu.
2. Atkal atveriet izvēlni Logs, izvēlieties Sakārtot > Pārvietot visu uz logu. Tas ļaus jums mainīties logu izmēri un izvietojums blakus viens otram pēc saviem ieskatiem.
3. Eksperimentējiet ar dažādiem logu tālummaiņas līmeņiem un sāciet veikt dažas izmaiņas, lai redzētu, kā tas darbojas. Padomi darbam ar Illustrator

6. Izmantojiet simbolus, lai ātri izveidotu pogas, ikonas un daudz ko citu.

Cik reizes esat izveidojis vienu un to pašu (vai gandrīz to pašu) pogu, ikonu vai logrīku programmā Photoshop? Ja jums ir tīmekļa dizains, jūs, iespējams, darāt to katru dienu.

Illustrator var palīdzēt ietaupīt laiku un izvairīties no atkārtota darba ar simboliem.

Būtībā simboli ir bezgalīgs gatavu komplekts dizaina elementi, ko var pievienot darbam, vienkārši velkot un nometot, un pēc tam modificēt pēc vajadzības. Tas ir ideāli piemērots pogām, ikonām un citiem standarta objektiem, kas nav jāizveido no jauna.

Bet ir vēl viens iemesls, kāpēc simboli ir spēcīgi, un to sauc par instantiāciju.

Simboli ir ne tikai ērti, bet arī atvieglo atkārtotu dizaina elementu atjaunināšanu.

 

Būtībā ikreiz, kad veicat izmaiņas oriģinālajā simbolā, šīs izmaiņas nekavējoties tiek atspoguļotas visos simbola gadījumos, kas atrodami jūsu mākslas darbā. Vai jūsu vietnē ir nepieciešamas lielākas pogas? Vienkārši mainiet simbolu. Vai vēlaties, lai jūsu veidlapas lauki katrā lapā izskatītos atšķirīgi? Vienkārši mainiet simbolu. Jūs saprotat ideju.

Padoms.: Ja nevēlaties, lai tas notiktu ar konkrētu simbola as gadījumu, ar peles labo pogu noklikšķiniet uz objekta ilustrācijā un atlasiet Pārtraukt simbola atsauci. Tādējādi tas tiks izslēgts no automātiskajiem atjauninājumiem.

Šeit ir labs video, kurā paskaidrots, kā lietot un manipulēt ar simboliem:

Simbolu izmantošana programmā Adobe Illustrator no Adobe TV .

Lai izmantotu esošu simbolu:

1. Izvēlnē Logs atveriet paneli Simboli.
2. Velciet atlasīto simbolu uz savu darbu

Izveidojiet jaunu simbolu:

1. Izveidojiet simbola attēlu
2. Izvēlnē Logs atveriet paneli Simboli.
3. Velciet ilustrāciju uz paneļa
4. Noklikšķiniet uz Labi dialoglodziņā, lai apstiprinātu.

Lai rediģētu simbolu:

1. Izvēlnē Logs atveriet paneli Simboli.
2. Veiciet dubultklikšķi uz simbola, lai atvērtu rediģēšanas režīmu.
3. Kad esat pabeidzis, veiciet dubultklikšķi jebkurā vietā ārpus simbola attēla, lai izietu no rediģēšanas režīma.

7. Viegli paplašiniet objektus, izmantojot 9 segmentu mērogošanu. Padomi darbam ar Illustrator

Šī ir uzlabota simbololoģijas funkcija, kas ļauj definēt, kuras objekta daļas mērogošanas laikā tiek izstieptas un kuras paliek nemainīgas.

Pa kreisi: izstieptas pogas piemērs ar un bez 9 segmentu tālummaiņas iestatījuma. Pa labi: 9 segmentu mērogošanas iestatījums ietver 4 vadotņu pārvietošanu, kas norāda Illustrator, kuras objekta daļas ir aizsargātas un kuras daļas var mērogot.

 

Praktisks piemērs ir poga ar noapaļotiem stūriem — ja vēlaties to padarīt garāku, nevarat to vienkārši izstiept horizontāli, jo tas izkropļo visu objektu. Tā vietā jums būs manuāli jāpārvieto formas punkti. Izmantojot 9 segmentu mērogošanu, stiepšanās darbojas, kā jūs plānojāt. Padomi darbam ar Illustrator

Lai patiesi saprastu, kā tas darbojas, klausieties šo lielisko video pamācību no Adobe TV, lai ātri sāktu darbu:

Izmantojot 9 segmentu mērogošanu ar simboliem no Adobe TV .

8. Visur noapaļoti stūri!

Programmā Photoshop var izveidot noapaļotu taisnstūri, taču programma Illustrator ļauj gandrīz jebkuram objektam pielietot nesagraujošu noapaļota stūra efektu. Kas ir nesagraujošā iedarbība? Tas nozīmē, ka varat to ieslēgt, izslēgt vai mainīt iestatījumus, neietekmējot pamatā esošo sākotnējo objektu.

Noapaļoto stūru efektu var lietot gandrīz jebkura veida objektiem un pielāgot to pēc vajadzības. Padomi darbam ar Illustrator

Lai izmantotu noapaļotā stūra efektu:

1. Izveidojiet taisnstūri vai jebkuru citu objektu ar asiem stūriem
2. Izvēlnē Efekti izvēlieties Stilizēt > Noapaļoti stūri.
3. Ievadiet stūra rādiusu un noklikšķiniet uz Priekšskatījums, lai redzētu, kā tas izskatās.
4. Noklikšķiniet uz Labi, lai piemērotu efektu.

Lai mainītu noapaļotā stūra efektu:

1. Izvēlieties objektu ar noapaļotiem stūriem
2. Izvēlnē Logs atveriet paneli Izskats.
3. Atrodiet efektu Noapaļotie stūri un veiciet dubultklikšķi uz tā, lai mainītu tā iestatījumus, vai noklikšķiniet uz acs ikonas, lai to ieslēgtu vai izslēgtu.

9. Ātra aizpildījuma izveide ar rastra rakstu. Padomi darbam ar Illustrator

Smalkie fona raksti ir liels panākums tīmekļa dizainā, taču daudzi dizaineri uzskata, ka tos nav viegli lietot programmā Illustrator.

Man jāatzīst, ka tas nav intuitīvs, bet risinājums ir vienkāršs.

Lai izveidotu bitkartes modeli:

1. Novietojiet uz sava gabala modeļa attēlu
2. Augšējā lentē noklikšķiniet uz "Ievietot" (svarīgi - bez tā tas nedarbosies!)
3. Velciet modeli uz paleti Swatches
4. Uzklājiet paraugu jebkuram objektam, lai to aizpildītu ar rakstu

10. Automātiska teksta izvietošana ap attēliem un objektiem.

Photoshop ir pazīstams ar savām pamata teksta rediģēšanas iespējām. Ja vēlaties aptīt tekstu ap attēlu, jums ir jāizveido divi vai trīs dažādi teksta rāmji un jāimitē efekts. Padomi darbam ar Illustrator

Par laimi, programma Illustrator jums ir nodrošināta.

Lai aplauztu tekstu ap attēlu:

1. Atlasiet attēlu vai objektu, ap kuru vēlaties ietīt tekstu
2. Atveriet izvēlni Objekts, izvēlieties Aplauzt tekstu > Jauns.
3. Lai iestatītu aplaušanas attālumu, vēlreiz atveriet izvēlni Teksta aplaušana un atlasiet Teksta aplaušanas opcijas.
4. Pārvietojiet attēlu virs teksta, lai redzētu iesaiņojuma efektu

11. Izveidojiet bagātīgus vizuālos efektus ar objektu izskata iestatījumiem. Padomi darbam ar Illustrator

Programmā Illustrator objekta izskata panelis darbojas līdzīgi kā Photoshop slāņu efekti — objektam varat pievienot vairākus aizpildījumus un triepienus, pēc tam spēlēt ar to pārsūtīšanas režīmiem, necaurredzamību un efektiem, lai iegūtu interesantus rezultātus.

Šis teksts ir tikai viens vektora objekts, kas veidots, izmantojot paneli Izskats un efekti.

Rotaļu laukums ir diezgan liels — no ēnām, izplūšanas un mirdzuma līdz tekstūrai, kropļojumiem un 3D. Tādā veidā jūs varat atjaunot lielāko daļu Photoshop efektu, vienlaikus strādājot ar vektorgrafiku.

Panelis Izskats ir spēcīgs un jautrs — iesaku to izmēģināt uzreiz vai noskatīties tālāk sniegto apmācību, lai saprastu, kā tas darbojas.

Izskata paneļa apgūšana no Adobe TV .

Vai esat gatavs sākt eksperimentēt ar Illustrator?

Vietņu un lietotāja saskarņu izveide, izmantojot Photoshop, tagad ir kļuvusi par normu, un lielākā daļa dizaineru ir apmierināti ar šo risinājumu. Padomi darbam ar Illustrator

Taču tas, ka Photoshop ir kļuvis tik plaši izplatīts, nenozīmē, ka programmai Illustrator nav ko piedāvāt — tieši otrādi. Izmantojot tādus rīkus kā pikseļu režģa līdzināšana, teksta aplaušana un objektu izskats, tas ir pārliecinoši.

Apvienojumā ar spēcīgu izkārtojuma rīki un vektorgrafika, attēlu sagriešana un eksportēšana, Illustrator noteikti ir acīmredzama izvēle tīmekļa dizaineriem, kuri vēlas ātri izstrādāt vietnes.