Näpunäiteid Illustratoriga töötamiseks. Siin on hull idee – kujundage oma järgmine veebiprojekt Illustratoris. Kui olete peamine veebidisainer, on tõenäoline, et te ei reageeri sellele soovitusele kuigi hästi. Illustrator lihtsalt ei saa teha kõike, mida Photoshop suudab, eks?

Kindlasti mitte sel viisil.

kuigi Photoshopist on saanud de facto tööriist veebidisain, on Illustrator enam kui võimeline teie vajadusi rahuldama. Tänu oma küljendustööriistadele on see sageli veebidisaini jaoks parem ja sobivam programm.

Kuna enamik veebidisaini spetsialiste ei taha Illustratoris tõendeid otsides ringi rännata, olen koostanud nimekirja veebiga seotud funktsioonidest, mida peate teadma, et Illustratoris veebidisainiga eksperimenteerida.

Proovige mõnda neist ja garanteerin, et hakkate kasutama Illustratorit oma veebidisaini töövoo standardtööriistana.

1. Esiteks: määrake kõik ühikud pikslitele. Näpunäiteid Illustratoriga töötamiseks

Vaikimisi kasutab Illustrator mõõdikut objektide ja punktide suuruse ühikud teksti jaoks. Need on suurepärased seaded enamiku disainiolukordade jaoks, kuid veebidisain tõenäoliselt soovite piksleid kõikjal näha. Nii et enne kui hakkate millegi muu kallal töötama, veenduge, et teie seadmed on õigesti seadistatud.

väärtusühikud on pikslid. Näpunäiteid Illustratoriga töötamiseks

Ühikute määramiseks piksliteks:

  1. Ava menüüs Redigeerimine
  2. Valige seadete alammenüüst mõõtühikud.
  3. Määra kõik suvandid väärtusele "pikslid"

2. Looge dokumente veebidokumendi profiili abil.

 

Kui soovite alustada tööd uue kujundusega, kerige hõlpsalt läbi uue dokumendi akna ja jätke vahele mõned olulised üksikasjad, näiteks andke Illustratorile teada, et kavatsete töötada veebidisaini kallal, et te ei kasutaks CMYK-värve. ja objekti udused servad. Pidage meeles, et valige aknas Uus dokument Interneti-profiili säte ja kõik on korras.

3. Lubage objektide pikslivõrgu joondamine. Näpunäiteid Illustratoriga töötamiseks

See funktsioon on elupäästja, kui teil on Photoshopis kunagi olnud probleeme hägusate kujunditega.

Pixel Grid Alignment reguleerib objekti sirgeid horisontaalseid ja vertikaalseid segmente, et need sobiksid ideaalselt pikslivõrguga, hoides samal ajal kumerad ja kaldus segmendid siledana. Tulemuseks on teravad, pikslite täiuslikud kujundid – midagi, mida te kindlasti veebidisainis soovite.

Näpunäiteid Illustratoriga töötamiseks

Ülemisel nupul on lubatud pikslite ruudustiku joondamine, mille tulemuseks on alati teravad servad.

Objekti tasemel pikslite ruudustiku joondamise lubamiseks tehke järgmist.

  1. Valige objekt
  2. Avage teisenduspaneel (Aken > Teisendus).
  3. Märkige paneeli allosas märkeruut "Joonda pikslivõrguga" (kui te seda ei näe, topeltklõpsake valikute kuvamiseks paneelil)

Märge. Pikslite ruudustiku joondamine on vaikimisi lubatud kõigi veebidokumendi profiili abil loodud uute objektide jaoks. Kui aga kleepite objekte teistest Illustratori failidest, peate nende pikslite joondust käsitsi reguleerima. Näpunäiteid Illustratoriga töötamiseks

4. Lülitage sisse pikslite eelvaade.

Pikslite eelvaate funktsioon paneb Illustratori pildi üle 100% skaleerimisel käituma täpselt nagu Photoshop – selle asemel, et saada iga kord täiuslikke vektoreid, näete piksleid nii, nagu töötaksite rasterpildiga.

Pikslite eelvaate sisselülitamine tekitab tunde, nagu oleksite Photoshopis.

Mõelge, kui lahe see on – teil on kogu vektorgraafika võimsus teie käeulatuses ja näete, milline tulemus pikslite tasemel välja näeb.

Puhas, kas pole?

Pikslite eelvaate lubamine või keelamine

  1. Ava vaatemenüü
  2. Valige Pixel View.

5. Kasutage kunstiteoste aknaid. Näpunäiteid Illustratoriga töötamiseks

Kujutage ette, et teie projektile on suunatud kaks videokaamerat.

Ühel kaameral on tavaline suumitase, mis näitab 100% teie tööd. Teisel kaameral on 400% suumitase ja see on suunatud ühele konkreetsele ikoonile, mille kallal töötasite.

Nagu kirurg, kasutate suumkaamerat ikooni pisikeste pikslitaseme muudatuste tegemiseks, heites aeg-ajalt pilgu 100% suumiga kaamerale, et näha, milline see tegelikult oma tegelikus suuruses välja näeb.

Näpunäiteid Illustrator 12 töötamiseks

Katteaknad on suurepärased, kui peate töötama väikeste elementidega, nagu ikoonid – te ei pea pidevalt sisse ja välja suumima, et vaadata, kuidas kõik välja näeb.

Need on Artwork aknad – need võimaldavad vaadata oma kujundust üheaegselt erinevate suumitasemete, värviseadete ja muude variatsioonidega. See on veebidisaini jaoks väga kasulik, eriti kui töötate pikslitaseme detailidega.

Kunstiteoste akende kasutamiseks tehke järgmist.

  1. Avage menüü Aken ja seejärel valige Uus aken. Illustrator loob uue vahekaardi sama dokumendiga.
  2. Minge uuesti menüüsse Aken, valige Korralda > Teisalda kõik aknasse. See võimaldab teil muuta akende suurus ja paigutus kõrvuti oma äranägemise järgi.
  3. Katsetage akendes erinevaid suumitasemeid ja alustage muudatuste tegemist, et näha, kuidas see toimib. Näpunäiteid Illustratoriga töötamiseks

6. Kasutage sümboleid nuppude, ikoonide ja muu kiireks loomiseks.

Mitu korda olete Photoshopis sama (või peaaegu sama) nupu, ikooni või vidina loonud? Kui tegelete veebidisainiga, teete seda tõenäoliselt iga päev.

Illustrator aitab säästa aega ja vältida seda korduvat tööd sümbolitega.

Sisuliselt on sümbolid lõputu valmiskomplekt kujunduselemendid, mida saab lihtsalt lohistades tööle lisada ja seejärel vastavalt vajadusele muuta. See sobib ideaalselt nuppude, ikoonide ja muude standardsete objektide jaoks, mida ei ole vaja nullist luua.

Kuid on veel üks põhjus, miks sümbolid on võimsad, ja seda nimetatakse instantseerimiseks.

Sümbolid pole mitte ainult mugavad, vaid muudavad ka korduvate kujunduselementide värskendamise lihtsaks.

Sümbolid pole mitte ainult mugavad, vaid muudavad ka korduvate kujunduselementide värskendamise lihtsaks.

 

Põhimõtteliselt kajastuvad need muudatused kohe kõigis teie kunstiteoses leiduvates sümbolites alati, kui teete muudatusi algses sümbolis. Kas vajate oma veebisaidil suuremaid nuppe? Muuda lihtsalt sümbolit. Kas soovite, et teie vormiväljad näeksid igal lehel välja erinevad? Muuda lihtsalt sümbolit. Saate ideest aru.

Näpunäide.: Kui te ei soovi, et see juhtuks sümboli as konkreetse eksemplariga, paremklõpsake illustratsioonil oleval objektil ja valige Katkesta sümboli viide. See välistab selle automaatsetest värskendustest.

Siin on hea video, mis selgitab sümbolite kasutamist ja nendega manipuleerimist:

Sümbolite kasutamine Adobe Illustratoris kohta Adobe TV .

Olemasoleva sümboli kasutamiseks toimige järgmiselt.

  1. Avage menüüst Aken paneel Sümbolid.
  2. Lohistage valitud sümbol oma tööle

Looge uus sümbol:

  1. Looge sümbolkujutis
  2. Avage menüüst Aken paneel Sümbolid.
  3. Lohistage illustratsioon paneelile
  4. Kinnitamiseks klõpsake dialoogiboksis OK.

Sümboli muutmiseks toimige järgmiselt.

  1. Avage menüüst Aken paneel Sümbolid.
  2. Redigeerimisrežiimi sisenemiseks topeltklõpsake sümbolil.
  3. Kui olete lõpetanud, topeltklõpsake redigeerimisrežiimist väljumiseks kõikjal väljaspool sümbolipilti.

7. Laiendage objekte hõlpsalt 9-segmendilise skaleerimisega. Näpunäiteid Illustratoriga töötamiseks

See on täiustatud sümboolikafunktsioon, mis võimaldab teil määrata, millised objekti osad on skaleerimise ajal venitatud ja millised jäävad muutumatuks.

Vasakul: näide venitatud nupust 9-segmendilise suumi seadistusega ja ilma. Paremal: 9-segmendiline skaleerimisseade hõlmab 4 juhiku liigutamist, mis annavad Illustratorile teada, millised objekti osad on kaitstud ja milliseid osi saab skaleerida.

 

Praktiline näide on ümarate nurkadega nupp – kui soovite seda pikemaks muuta, ei saa te seda lihtsalt horisontaalselt venitada, sest see moonutab kogu objekti. Selle asemel peate kujupunkte käsitsi teisaldama. 9-segmendilise skaleerimisega töötab venitus nii, nagu kavatsesite. Näpunäiteid Illustratoriga töötamiseks

Selle toimimise tõeliseks mõistmiseks kuulake seda suurepärast videoõpetust Adobe TV-st, et kiiresti asjaga kursis olla:

9-segmendilise skaleerimise kasutamine sümbolitega kohta Adobe TV .

8. Igal pool ümarad nurgad!

Photoshopis saate luua ümardatud ristküliku, kuid Illustrator võimaldab teil peaaegu igale objektile rakendada mittepurustavat ümardatud nurga efekti. Mis on mittepurustav mõju? See tähendab, et saate selle sisse, välja lülitada või selle sätteid muuta, ilma et see mõjutaks selle aluseks olevat algset objekti.

Näpunäiteid Illustrator 23 töötamiseks

Saate rakendada ümarate nurkade efekti peaaegu igat tüüpi objektidele ja kohandada seda vastavalt vajadusele. Näpunäiteid Illustratoriga töötamiseks

Ümarnurga efekti rakendamiseks tehke järgmist.

  1. Looge ristkülik või mõni muu teravate nurkadega objekt
  2. Menüüst Efektid valige Stiliseeri > Ümardatud nurgad.
  3. Sisestage nurga raadius ja klõpsake nuppu Eelvaade, et näha, kuidas see välja näeb.
  4. Efekti rakendamiseks klõpsake nuppu OK.

Ümarnurga efekti muutmiseks tehke järgmist.

  1. Valige ümarate nurkadega objekt
  2. Avage menüüst Aken paneel Välimus.
  3. Otsige üles ümarate nurkade efekt ja tehke sellel seadete muutmiseks topeltklõps või klõpsake selle sisse- või väljalülitamiseks silmaikooni.

9. Rastermustriga kiirtäite loomine. Näpunäiteid Illustratoriga töötamiseks

Peened taustamustrid on veebidisainis suur hitt, kuid paljud disainerid arvavad, et neid pole Illustratoris lihtne rakendada.

Pean tunnistama, et see pole intuitiivne, kuid lahendus on lihtne.

Kiire täitmise loomine bitmap-mustriga

Et luua bitmap muster:

  1. Asetage oma tükile mustri pilt
  2. Klõpsake ülemisel lindil nuppu "Sisesta" (tähtis - ilma selleta see ei tööta!)
  3. Lohistage muster Swatches paletile
  4. Kandke mis tahes objektile näidis, et täita see mustriga

10. Teksti automaatne paigutamine piltide ja objektide ümber.

Photoshop on tuntud oma põhiliste tekstitöötlusvõimaluste poolest. Kui soovite teksti ümber pildi mähkida, peate looma kaks või kolm erinevat tekstiraami ja simuleerima efekti. Näpunäiteid Illustratoriga töötamiseks

Õnneks on Illustrator teid kaitsnud.

Teksti ümber pildi mähkimiseks tehke järgmist.

  1. Valige pilt või objekt, mille ümber soovite teksti ümbritseda
  2. Avage menüü Objekt, valige Murda tekst > Uus.
  3. Murdmiskauguse määramiseks avage uuesti menüü Teksti murramine ja valige Teksti murdmise valikud.
  4. Mähkimisefekti nägemiseks liigutage pilt teksti kohal

11. Looge objekti välimuse sätetega rikkalikke visuaalseid efekte. Näpunäiteid Illustratoriga töötamiseks

Illustratoris töötab objekti Välimuse paneel sarnaselt Photoshopi kihiefektidega – saate lisada objektile mitu täitmist ja tõmmet ning seejärel mängida nende edastusrežiimide, läbipaistmatuse ja efektidega, et saada huvitavaid tulemusi.

See tekst on vaid üks vektorobjekt, mis on kujundatud paneeli Välimus ja efektid abil.

Mänguväljak on üsna suur – varjudest, hägususest ja särast kuni tekstureerimise, moonutuste ja 3D-ni. Nii saate enamiku Photoshopi efektidest uuesti luua, töötades samal ajal vektorgraafikaga.

Välimuse paneel on võimas ja lõbus – soovitan teil seda kohe proovida või vaadata allolevat õpetust, et mõista, kuidas see toimib.

Välimuse paneeli valdamine kohta Adobe TV .

Kas olete valmis Illustratoriga katsetama?

Veebisaitide ja kasutajaliideste loomine Photoshopi abil on nüüdseks muutunud normiks ja enamik disainereid on selle lahendusega rahul. Näpunäiteid Illustratoriga töötamiseks

Kuid see, et Photoshop on nii laialt levinud, ei tähenda, et Illustratoril poleks midagi pakkuda – pigem vastupidi. Tööriistadega, nagu pikslite ruudustiku joondamine, teksti murramine ja objekti välimus, on see tugev külg.

Kombineeritud võimsaga paigutustööriistad ja vektorgraafika, piltide lõikamine ja eksportimine, Illustrator on kindlasti ilmselge valik veebidisaineritele, kes soovivad veebisaite kiiresti arendada.