Tipy pro práci s Illustratorem. Pro webové designéry, kteří preferují Photoshop

Tipy pro práci s Illustratorem. Zde je bláznivý nápad – navrhněte svůj další webový projekt v Illustratoru. Pokud jste hlavním webdesignérem, je pravděpodobné, že na tento návrh nebudete příliš dobře reagovat. Illustrator prostě neumí všechno, co Photoshop, že?

Tímto způsobem určitě ne.

Ačkoli Photoshop se stal de facto nástrojem web design, Illustrator je více než schopen splnit vaše potřeby. Díky svým layoutovým nástrojům je často lepším a vhodnějším programem pro webdesign.

Protože většina profesionálů v oblasti webdesignu nechce bloudit po Illustratoru a hledat důkazy, sestavil jsem seznam funkcí souvisejících s webem, které potřebujete znát, abyste mohli začít experimentovat s webovým designem v Illustratoru.

Vyzkoušejte několik z nich a garantuji vám, že začnete používat Illustrator jako standardní nástroj ve vašem pracovním postupu při návrhu webu.

1. Nejdříve: nastavte všechny jednotky na Pixely. Tipy pro práci s Illustratorem

Illustrator standardně používá metriku jednotky pro velikosti objektů a bodů pro text. Toto jsou skvělá nastavení pro většinu návrhových situací, ale pro webový design pravděpodobně budete chtít vidět pixely všude. Než tedy začnete pracovat na čemkoli jiném, ujistěte se, že jsou vaše jednotky správně nastaveny.

Chcete-li nastavit jednotky na pixely:

1. Otevřít v nabídce Úpravy
2. Vyberte jednotky měření z podnabídky nastavení.
3. Nastavit všechny možnosti na „pixely“

2. Vytvořte dokumenty pomocí profilu webového dokumentu.

 

Když chcete začít pracovat na novém návrhu, snadno procházejte okno Nový dokument a přeskočte některé důležité detaily – například sdělte Illustratoru, že plánujete pracovat na webovém návrhu, abyste nepoužívali barvy CMYK. a rozmazané okraje objektu. Nezapomeňte vybrat nastavení internetového profilu v okně Nový dokument a budete v pořádku.

3. Povolte zarovnání mřížky pixelů pro objekty. Tipy pro práci s Illustratorem

Tato funkce vám zachrání život, pokud jste někdy měli problémy s rozmazanými okraji tvarů ve Photoshopu.

Zarovnání mřížky pixelů upraví rovné horizontální a vertikální segmenty objektu tak, aby dokonale odpovídaly mřížce pixelů, přičemž zakřivené a šikmé segmenty budou hladké. Výsledkem jsou ostré, pixelově dokonalé tvary – něco, co ve webovém designu rozhodně chcete.

Horní tlačítko má povoleno zarovnání mřížky pixelů, což vždy vede k ostrým okrajům.

Chcete-li povolit zarovnání mřížky pixelů na úrovni objektu:

1. Vyberte objekt
2. Otevřete panel Transformace (Okna > Transformovat).
3. Zaškrtněte políčko „Zarovnat k mřížce pixelů“ v dolní části panelu (pokud jej nevidíte, poklepáním na panel zobrazíte možnosti)

Poznámka. Zarovnání mřížky pixelů je standardně povoleno pro všechny nové objekty vytvořené pomocí profilu webového dokumentu. Pokud však vkládáte objekty z jiných souborů aplikace Illustrator, budete u nich muset ručně upravit zarovnání obrazových bodů. Tipy pro práci s Illustratorem

4. Zapněte náhled pixelů.

Funkce Pixel-Preview způsobí, že se Illustrator bude chovat stejně jako Photoshop, když změníte měřítko obrázku nad 100 % – místo toho, abyste pokaždé získali dokonalé vektory, skutečně uvidíte pixely, jako byste pracovali s rastrovým obrázkem.

Zapnutím náhledu v pixelech se budete cítit jako ve Photoshopu.

Přemýšlejte o tom, jak je to cool - veškerou sílu vektorové grafiky máte na dosah ruky a můžete vidět, jak výsledek vypadá na úrovni pixelů.

Pěkné, že?

Povolit nebo zakázat náhled pixelů

1. Otevřete nabídku zobrazení
2. Vyberte Pixel View.

5. Použijte okna Artwork. Tipy pro práci s Illustratorem

Představte si, že na váš projekt míří dvě videokamery.

Jedna kamera má normální úroveň přiblížení a zobrazuje 100 % vaší práce. Druhá kamera má 400% úroveň přiblížení a je zaměřena na jednu konkrétní ikonu, na které jste pracovali.

Jako chirurg používáte fotoaparát se zoomem k provádění drobných změn ikony na úrovni pixelů a občas se podíváte na fotoaparát se 100% zoomem, abyste viděli, jak ve skutečnosti vypadá ve skutečné velikosti.

Krycí okna jsou skvělá, když potřebujete pracovat s malými prvky, jako jsou ikony – nemusíte je neustále přibližovat a oddalovat, abyste zkontrolovali, jak vše vypadá.

Toto jsou okna Artwork – umožňují zobrazit váš návrh současně s různými úrovněmi přiblížení, nastavením barev a dalšími variacemi. To je velmi užitečné pro webdesign, zvláště když pracujete s detaily na úrovni pixelů.

Chcete-li použít okna Artwork:

1. Otevřete nabídku Okno a poté vyberte Nové okno. Illustrator vytvoří novou kartu se stejným dokumentem v zobrazení.
2. Přejděte znovu do nabídky Okno, zvolte Uspořádat > Přesunout vše do okna. To vám umožní změnu velikost a umístění oken vedle sebe, jak uznáte za vhodné.
3. Experimentujte s různými úrovněmi přiblížení v oknech a začněte provádět nějaké změny, abyste viděli, jak to funguje. Tipy pro práci s Illustratorem

6. Pomocí symbolů rychle vytvořte tlačítka, ikony a další.

Kolikrát jste ve Photoshopu vytvořili stejné (nebo téměř stejné) tlačítko, ikonu nebo widget? Pokud se věnujete webdesignu, pravděpodobně to děláte každý den.

Illustrator vám může pomoci ušetřit čas a vyhnout se této opakované práci se symboly.

Symboly jsou v podstatě nekonečným souborem hotových věcí designové prvky, které lze přidat do díla pouhým přetažením a poté upravit podle potřeby. To je ideální pro tlačítka, ikony a další standardní objekty, které není třeba vytvářet od začátku.

Ale je tu ještě jeden důvod, proč jsou symboly mocné, a říká se tomu instanciace.

Symboly jsou nejen pohodlné, ale také usnadňují aktualizaci opakujících se prvků návrhu.

 

V podstatě, kdykoli provedete změny v původním symbolu, tyto změny se okamžitě projeví ve všech instancích symbolu nalezeného ve vaší kresbě. Potřebujete na svém webu větší tlačítka? Stačí změnit symbol. Chcete, aby pole formuláře vypadala na každé stránce jinak? Stačí změnit symbol. Dostanete nápad.

Tip: Pokud nechcete, aby se to stalo s konkrétní instancí symbolu as, klikněte pravým tlačítkem na objekt ve vaší ilustraci a vyberte Přerušit referenci symbolu. Tím jej vyřadíte z automatických aktualizací.

Zde je dobré video vysvětlující, jak používat a manipulovat se symboly:

Používání symbolů v aplikaci Adobe Illustrator z Adobe TV .

Chcete-li použít existující symbol:

1. Otevřete panel Symboly z nabídky Okno.
2. Přetáhněte vybraný symbol na svou práci

Vytvořte nový symbol:

1. Vytvořte obrázek symbolu
2. Otevřete panel Symboly z nabídky Okno.
3. Přetáhněte obrázek na panel
4. Klepnutím na OK v dialogovém okně potvrďte.

Chcete-li upravit symbol:

1. Otevřete panel Symboly z nabídky Okno.
2. Poklepáním na symbol vstoupíte do režimu úprav.
3. Po dokončení dvojitým kliknutím kamkoli mimo obrázek symbolu ukončete režim úprav.

7. Snadno rozbalte objekty pomocí 9segmentového měřítka. Tipy pro práci s Illustratorem

Jedná se o pokročilou funkci symboliky, která vám umožňuje definovat, které části objektu se během změny měřítka natáhnou a které zůstanou nezměněny.

Vlevo: Příklad roztaženého tlačítka s a bez nastavení 9segmentového zoomu. Vpravo: Nastavení 9segmentového měřítka zahrnuje přesun 4 vodítek, která Illustratoru říkají, které části objektu jsou chráněny a které části lze změnit.

 

Praktickým příkladem je tlačítko se zaoblenými rohy – pokud ho chcete prodloužit, nemůžete ho jen horizontálně roztáhnout, protože by došlo k deformaci celého objektu. Místo toho budete muset body tvaru přesouvat ručně. S 9-segmentovým škálováním funguje roztažení tak, jak jste zamýšleli. Tipy pro práci s Illustratorem

Chcete-li skutečně porozumět tomu, jak to funguje, poslechněte si tento skvělý video tutoriál od Adobe TV, abyste se rychle dostali do tempa:

Použití 9-segmentového měřítka se symboly z Adobe TV .

8. Všude zaoblené rohy!

Ve Photoshopu můžete vytvořit zaoblený obdélník, ale Illustrator vám umožňuje aplikovat nedestruktivní efekt zaoblených rohů na téměř jakýkoli objekt. Co je to nedestruktivní účinek? To znamená, že jej můžete zapnout, vypnout nebo změnit jeho nastavení, aniž byste ovlivnili základní původní objekt.

Efekt zaoblených rohů můžete použít na téměř jakýkoli typ objektu a upravit jej podle potřeby. Tipy pro práci s Illustratorem

Chcete-li použít efekt zaobleného rohu:

1. Vytvořte obdélník nebo jakýkoli jiný objekt s ostrými rohy
2. Z nabídky Efekty zvolte Stylizovat > Zaoblené rohy.
3. Zadejte poloměr rohu a klikněte na Náhled, abyste viděli, jak vypadá.
4. Klepnutím na OK efekt použijete.

Chcete-li změnit efekt zaobleného rohu:

1. Vyberte objekt se zaoblenými rohy
2. Otevřete panel Vzhled z nabídky Okno.
3. Najděte efekt Zaoblené rohy a poklepáním na něj změňte jeho nastavení nebo kliknutím na ikonu oka jej zapněte nebo vypněte.

9. Vytvoření rychlé výplně rastrovým vzorem. Tipy pro práci s Illustratorem

Jemné vzory na pozadí jsou velkým hitem webdesignu, ale mnoho designérů si myslí, že jejich použití v Illustratoru není snadné.

Musím uznat, že to není intuitivní, ale řešení je jednoduché.

Chcete-li vytvořit bitmapový vzor:

1. Umístěte obrázek vzoru na svůj kousek
2. Klikněte na "Vložit" na horním pásu karet (důležité - bez toho to nebude fungovat!)
3. Přetáhněte vzorek do palety Vzorník
4. Aplikujte vzorek na libovolný objekt a vyplňte jej vzorem

10. Automatické umístění textu kolem obrázků a objektů.

Photoshop je známý svými velmi základními možnostmi úpravy textu. Pokud chcete obtékat text kolem obrázku, musíte vytvořit dva nebo tři různé textové rámečky a simulovat efekt. Tipy pro práci s Illustratorem

Naštěstí vás Illustrator pokryl.

Jak obtékat text kolem obrázku:

1. Vyberte obrázek nebo objekt, kolem kterého chcete obtékat text
2. Otevřete nabídku Objekt, zvolte Zalomit text > Nový.
3. Chcete-li nastavit vzdálenost obtékání, otevřete znovu nabídku Obtékání textu a vyberte Možnosti obtékání textu.
4. Přesuňte obrázek přes text, abyste viděli efekt obtékání

11. Vytvářejte bohaté vizuální efekty pomocí nastavení vzhledu objektu. Tipy pro práci s Illustratorem

V Illustratoru panel Vzhled objektu funguje podobně jako efekty vrstev ve Photoshopu – do objektu můžete přidat více výplní a tahů a poté si pohrát s jejich přenosovými režimy, neprůhledností a efekty, abyste získali zajímavé výsledky.

Tento text je pouze jeden vektorový objekt, stylizovaný pomocí panelu Vzhled a efekty.

Hřiště je poměrně velké – od vržených stínů, rozostření a záře až po texturování, zkreslení a 3D. Tímto způsobem můžete znovu vytvořit většinu efektů z Photoshopu a přitom stále pracovat s vektorovou grafikou.

Panel Vzhled je výkonný a zábavný – doporučuji vám jej ihned vyzkoušet nebo se podívat na níže uvedený výukový program, abyste pochopili, jak to funguje:

Zvládnutí panelu vzhledu z Adobe TV .

Jste připraveni začít experimentovat s Illustratorem?

Vytváření webových stránek a uživatelských rozhraní pomocí Photoshopu se nyní stalo normou a většina návrhářů je s tímto řešením spokojena. Tipy pro práci s Illustratorem

Ale to, že se Photoshop tak rozšířil, neznamená, že Illustrator nemá co nabídnout – právě naopak. S nástroji, jako je zarovnání mřížky pixelů, obtékání textu a vzhled objektu, je to silný argument.

V kombinaci s výkonným nástroje pro rozložení a vektorové grafiky, krájení a exportu obrázků je Illustrator rozhodně jasnou volbou pro webové designéry, kteří chtějí rychle vyvíjet webové stránky.