Tipy na prácu s aplikáciou Illustrator. Toto je bláznivý nápad – navrhnite svoj ďalší webový projekt v aplikácii Illustrator. Ak ste primárny webový dizajnér, je pravdepodobné, že na tento návrh nebudete veľmi dobre reagovať. Illustrator jednoducho nedokáže všetko, čo dokáže Photoshop, však?

Týmto spôsobom určite nie.

Hoci Photoshop sa stal de facto nástrojom web design, Illustrator je viac než schopný splniť vaše potreby. Vďaka svojim layoutovým nástrojom je často lepším a vhodnejším programom pre webdizajn.

Keďže väčšina profesionálov v oblasti webového dizajnu sa nechce túlať po Illustratore a hľadať dôkazy, zostavil som zoznam funkcií súvisiacich s webom, ktoré potrebujete vedieť, aby ste mohli začať experimentovať s webovým dizajnom v Illustratore.

Vyskúšajte niekoľko z nich a garantujem vám, že Illustrator začnete používať ako štandardný nástroj vo svojom pracovnom postupe pri tvorbe webu.

1. Najprv: nastavte všetky jednotky na Pixely. Tipy na prácu s aplikáciou Illustrator

Illustrator štandardne používa metriku jednotky pre veľkosť objektov a bodov pre text. Toto sú skvelé nastavenia pre väčšinu dizajnových situácií, ale pre vzhľad stránky pravdepodobne budete chcieť vidieť pixely všade. Takže predtým, ako začnete pracovať na čomkoľvek inom, uistite sa, že sú vaše jednotky správne nastavené.

jednotkami hodnoty sú pixely. Tipy na prácu s aplikáciou Illustrator

Ak chcete nastaviť jednotky na pixely:

  1. Otvoriť v ponuke Upraviť
  2. Vyberte jednotky merania z podponuky nastavení.
  3. Nastaviť všetky možnosti na „pixely“

2. Vytvorte dokumenty pomocou profilu webového dokumentu.

 

Keď chcete začať pracovať na novom dizajne, jednoducho sa posuňte cez okno Nový dokument a preskočte niektoré dôležité detaily – napríklad povedať Illustratoru, že plánujete pracovať na webovom dizajne, aby ste nepoužívali farby CMYK. a rozmazané okraje objektu. Nezabudnite vybrať nastavenie internetového profilu v okne Nový dokument a budete v poriadku.

3. Povoľte zarovnanie mriežky pixelov pre objekty. Tipy na prácu s aplikáciou Illustrator

Táto funkcia je záchranou života, ak ste niekedy mali problémy s rozmazanými okrajmi tvarov vo Photoshope.

Zarovnanie mriežky pixelov upraví priame horizontálne a vertikálne segmenty objektu tak, aby dokonale zodpovedali mriežke pixelov, pričom zakrivené a šikmé segmenty budú hladké. Výsledkom sú ostré, pixelovo dokonalé tvary – niečo, čo vo webdizajne určite chcete.

Tipy na prácu s aplikáciou Illustrator

Horné tlačidlo má povolené zarovnanie mriežky pixelov, čo vždy vedie k ostrým okrajom.

Ak chcete povoliť zarovnanie mriežky pixelov na úrovni objektu:

  1. Vyberte objekt
  2. Otvorte panel Transformácia (Okno > Transformovať).
  3. Začiarknite políčko „Zarovnať na mriežku pixelov“ v spodnej časti panela (ak ho nevidíte, dvakrát kliknite na panel a zobrazte možnosti)

Poznámka. Zarovnanie mriežky pixelov je predvolene povolené pre všetky nové objekty vytvorené pomocou profilu webového dokumentu. Ak však vkladáte objekty z iných súborov aplikácie Illustrator, budete musieť manuálne upraviť zarovnanie pixelov pre ne. Tipy na prácu s aplikáciou Illustrator

4. Zapnite náhľad v pixeloch.

Funkcia Pixel-Preview spôsobí, že Illustrator sa bude správať rovnako ako Photoshop pri zmene veľkosti obrázka nad 100 % – namiesto toho, aby ste zakaždým získali dokonalé vektory, v skutočnosti uvidíte pixely, ako keby ste pracovali s rastrovým obrázkom.

Zapnutím náhľadu v pixeloch sa budete cítiť ako vo Photoshope.

Zamyslite sa nad tým, aké je to skvelé – všetku silu vektorovej grafiky máte na dosah ruky a môžete vidieť, ako výsledok vyzerá na úrovni pixelov.

Pekné, nie?

Povoliť alebo zakázať ukážku pixelov

  1. Otvoriť ponuku zobrazenia
  2. Vyberte možnosť Pixel View.

5. Použite okná Artwork. Tipy na prácu s aplikáciou Illustrator

Predstavte si, že na váš projekt sú nasmerované dve videokamery.

Jedna kamera má normálnu úroveň priblíženia a zobrazuje 100 % vašej práce. Druhá kamera má úroveň priblíženia 400 % a je nasmerovaná na jednu konkrétnu ikonu, na ktorej ste pracovali.

Podobne ako chirurg používate fotoaparát so zoomom na drobné zmeny ikony na úrovni pixelov a občas sa pozriete na fotoaparát so 100% priblížením, aby ste videli, ako v skutočnosti vyzerá v skutočnej veľkosti.

Tipy na prácu s aplikáciou Illustrator 12

Krycie okná sú skvelé, keď potrebujete pracovať s malými prvkami, ako sú ikony – nemusíte ich neustále približovať a odďaľovať, aby ste skontrolovali, ako všetko vyzerá.

Toto sú okná Artwork – umožňujú vám zobraziť váš návrh súčasne s rôznymi úrovňami priblíženia, nastaveniami farieb a inými variáciami. To je veľmi užitočné pre webový dizajn, najmä keď pracujete s detailmi na úrovni pixelov.

Ak chcete použiť okná Artwork:

  1. Otvorte ponuku Okno a potom vyberte položku Nové okno. Illustrator vytvorí novú kartu s rovnakým dokumentom.
  2. Znova prejdite do ponuky Okno, vyberte Usporiadať > Presunúť všetko do okna. To vám umožní zmeniť sa veľkosť a umiestnenie okien vedľa seba, ako uznáte za vhodné.
  3. Experimentujte s rôznymi úrovňami priblíženia v oknách a začnite vykonávať nejaké zmeny, aby ste videli, ako to funguje. Tipy na prácu s aplikáciou Illustrator

6. Použite symboly na rýchle vytváranie tlačidiel, ikon a podobne.

Koľkokrát ste vo Photoshope vytvorili rovnaké (alebo takmer rovnaké) tlačidlo, ikonu alebo widget? Ak sa venujete webdizajnu, pravdepodobne to robíte každý deň.

Illustrator vám môže pomôcť ušetriť čas a vyhnúť sa tejto opakovanej práci so symbolmi.

Symboly sú v podstate nekonečným súborom hotových vecí dizajnové prvky, ktorý je možné pridať do diela jednoduchým pretiahnutím a potom podľa potreby upraviť. To je ideálne pre tlačidlá, ikony a iné štandardné objekty, ktoré nie je potrebné vytvárať od začiatku.

Ale je tu ešte jeden dôvod, prečo sú symboly mocné, a volá sa to inštancia.

Symboly sú nielen pohodlné, ale tiež uľahčujú aktualizáciu opakujúcich sa dizajnových prvkov.

Symboly sú nielen pohodlné, ale tiež uľahčujú aktualizáciu opakujúcich sa dizajnových prvkov.

 

V podstate vždy, keď vykonáte zmeny v pôvodnom symbole, tieto zmeny sa okamžite prejavia vo všetkých inštanciách symbolu nájdeného vo vašej kresbe. Potrebujete na svojom webe väčšie tlačidlá? Stačí zmeniť symbol. Chcete, aby polia formulára vyzerali na každej stránke inak? Stačí zmeniť symbol. Dostanete nápad.

Tip: Ak nechcete, aby sa to stalo konkrétnej inštancii symbolu as, kliknite pravým tlačidlom myši na objekt v kresbe a vyberte možnosť Prerušiť referenciu symbolu. Tým sa vylúči z automatických aktualizácií.

Tu je dobré video, ktoré vysvetľuje, ako používať a manipulovať so symbolmi:

Používanie symbolov v aplikácii Adobe Illustrator z Adobe TV .

Ak chcete použiť existujúci symbol:

  1. Otvorte panel Symboly z ponuky Okno.
  2. Presuňte vybraný symbol na svoju prácu

Vytvorte nový symbol:

  1. Vytvorte obrázok symbolu
  2. Otvorte panel Symboly z ponuky Okno.
  3. Presuňte ilustráciu na panel
  4. Potvrďte kliknutím na tlačidlo OK v dialógovom okne.

Ak chcete upraviť symbol:

  1. Otvorte panel Symboly z ponuky Okno.
  2. Dvojitým kliknutím na symbol vstúpite do režimu úprav.
  3. Po dokončení dvojitým kliknutím kdekoľvek mimo obrázku symbolu ukončíte režim úprav.

7. Jednoducho rozbaľte objekty pomocou 9-segmentovej mierky. Tipy na prácu s aplikáciou Illustrator

Toto je pokročilá funkcia symboliky, ktorá vám umožňuje definovať, ktoré časti objektu sa počas zmeny mierky natiahnu a ktoré zostanú nezmenené.

Vľavo: Príklad roztiahnutého tlačidla s a bez nastavenia 9-segmentového priblíženia. Vpravo: Nastavenie 9-segmentovej mierky zahŕňa posúvanie 4 vodiacich líšt, ktoré Illustratoru povedia, ktoré časti objektu sú chránené a ktoré časti možno zmeniť.

 

Praktickým príkladom je tlačidlo so zaoblenými rohmi – ak ho chcete predĺžiť, nemôžete ho len natiahnuť vodorovne, pretože by došlo k deformácii celého objektu. Namiesto toho budete musieť manuálne presúvať body tvaru. S 9-segmentovým škálovaním funguje roztiahnutie tak, ako ste zamýšľali. Tipy na prácu s aplikáciou Illustrator

Ak chcete skutočne pochopiť, ako to funguje, vypočujte si tento skvelý video tutoriál od Adobe TV, aby ste sa rýchlo dostali do tempa:

Použitie 9-segmentového škálovania so symbolmi z Adobe TV .

8. Všade zaoblené rohy!

Vo Photoshope môžete vytvoriť zaoblený obdĺžnik, ale Illustrator vám umožňuje aplikovať nedeštruktívny efekt zaoblených rohov na takmer akýkoľvek objekt. Čo je to nedeštruktívny účinok? To znamená, že ho môžete zapnúť, vypnúť alebo zmeniť jeho nastavenia bez ovplyvnenia základného pôvodného objektu.

Tipy na prácu s aplikáciou Illustrator 23

Efekt zaoblených rohov môžete použiť na takmer akýkoľvek typ objektu a upraviť ho podľa potreby. Tipy na prácu s aplikáciou Illustrator

Ak chcete použiť efekt zaobleného rohu:

  1. Vytvorte obdĺžnik alebo akýkoľvek iný objekt s ostrými rohmi
  2. V ponuke Efekty vyberte položku Štylizovať > Zaoblené rohy.
  3. Zadajte polomer rohu a kliknite na Ukážka, aby ste videli, ako vyzerá.
  4. Kliknutím na tlačidlo OK efekt použijete.

Ak chcete zmeniť efekt zaobleného rohu:

  1. Vyberte objekt so zaoblenými rohmi
  2. Otvorte panel Vzhľad z ponuky Okno.
  3. Nájdite efekt Zaoblené rohy a dvojitým kliknutím naň zmeňte jeho nastavenia alebo kliknutím na ikonu oka ho zapnite alebo vypnite.

9. Vytvorenie rýchlej výplne rastrovým vzorom. Tipy na prácu s aplikáciou Illustrator

Jemné vzory pozadia sú veľkým hitom vo webdizajne, no mnohí dizajnéri si myslia, že ich použitie v Illustratore nie je jednoduché.

Musím uznať, že to nie je intuitívne, ale riešenie je jednoduché.

Vytvorenie rýchlej výplne pomocou bitmapového vzoru

Ak chcete vytvoriť bitmapový vzor:

  1. Umiestnite obrázok vzoru na svoj kúsok
  2. Kliknite na "Vložiť" na hornej páske (dôležité - bez toho to nebude fungovať!)
  3. Potiahnite vzor do palety Vzorkovníky
  4. Aplikujte vzorkovnicu na ľubovoľný objekt a vyplňte ho vzorom

10. Automatické umiestňovanie textu okolo obrázkov a objektov.

Photoshop je známy svojimi veľmi základnými možnosťami úpravy textu. Ak chcete zalomiť text okolo obrázka, musíte vytvoriť dva alebo tri rôzne textové rámčeky a simulovať efekt. Tipy na prácu s aplikáciou Illustrator

Našťastie, Illustrator vás pokryl.

Ak chcete zalomiť text okolo obrázka:

  1. Vyberte obrázok alebo objekt, okolo ktorého chcete obtekať text
  2. Otvorte ponuku Objekt, vyberte Zalomiť text > Nový.
  3. Ak chcete nastaviť vzdialenosť obtekania, znova otvorte ponuku Obtekanie textu a vyberte Možnosti obtekania textu.
  4. Presuňte obrázok nad text, aby ste videli efekt obtekania

11. Vytvorte bohaté vizuálne efekty pomocou nastavení vzhľadu objektu. Tipy na prácu s aplikáciou Illustrator

V aplikácii Illustrator panel Vzhľad objektu funguje podobne ako efekty vrstiev vo Photoshope – do objektu môžete pridať viacero výplní a ťahov, potom sa pohrať s ich režimami prenosu, nepriehľadnosťou a efektmi, aby ste dosiahli zaujímavé výsledky.

Tento text je len jeden vektorový objekt, ktorý je upravený pomocou panela Vzhľad a efekty.

Ihrisko je pomerne veľké – od vrhnutých tieňov, rozmazania a žiary až po textúrovanie, skreslenie a 3D. Týmto spôsobom môžete znovu vytvoriť väčšinu efektov z Photoshopu a zároveň pracovať s vektorovou grafikou.

Panel Vzhľad je výkonný a zábavný – odporúčam vám ho hneď vyskúšať alebo si pozrieť návod nižšie, aby ste pochopili, ako to funguje:

Ovládanie panela vzhľadu z Adobe TV .

Ste pripravení začať experimentovať s aplikáciou Illustrator?

Vytváranie webových stránok a používateľských rozhraní pomocou Photoshopu sa stalo štandardom a väčšina dizajnérov je s týmto riešením spokojná. Tipy na prácu s aplikáciou Illustrator

To, že sa Photoshop tak rozšíril, však neznamená, že Illustrator nemá čo ponúknuť – práve naopak. S nástrojmi, ako je zarovnanie mriežky pixelov, zalamovanie textu a vzhľad objektu, je to silný argument.

V kombinácii s výkonnými nástroje na rozloženie a vektorovej grafiky, krájania a exportovania obrázkov je Illustrator určite jasnou voľbou pre web dizajnérov, ktorí chcú rýchlo vytvárať webové stránky.