Co je nového pro webové designéry v aplikaci Illustrator CC
6. května oznámila Adobe nejnovější aktualizace svého kreativního softwaru. Některé z těchto aktualizací mají velký vliv na to, jak uživatelé pracují s nástroji. V tomto článku bych chtěl přečíst, co se v Adobe Illustratoru změnilo a konkrétně, jak to ovlivňuje web designery.
Samozřejmostí je několik nových funkcí, jako jsou knihovny AutoCADu, bílé přetiskové, výplňové a zásahové proxy swapy pro text, automatické generování rohů, pomocná indikace, balíkové soubory, nespoutané obrázky, více souborů souborů, dotykové nástroje, volné transformační nástroje a obrázky v kartáčích. Pokud jste fanouškem Illustratoru, jsou to všechny užitečné funkce, ale to, na čem se chci zaměřit konkrétně, jsou základní vylepšení, která pomůže komukoli vytvořit umělecké dílo pro zobrazení na obrazovce.
Podpora HiDPI
S výskytem displejů s vysokým rozlišením (jako je displej Macbook Pro s retinou) se aplikace Illustrator CS6 a starší vypadala rozmazaně. Umělecká díla a ikony vypadaly pixelově a text vypadal jako anti-aliased. Samotná povaha aplikace Illustrator je ostrým bohatým uměleckým dílem, takže tato zkušenost byla méně než žádoucí. Naštěstí společnost Adobe vylepšila Illustrator CC, aby využila těchto displejů s vysokým rozlišením. Umělecká díla budou vypadat lépe, text bude vypadat ostrý, prvky UI (ikony, kurzory atd.) Budou vypadat hladší. Oni také vylepšili proces vykreslování. Nyní využívá vícejádrových strojů a používá vykreslování pomocí závitů k vytváření uměleckých děl. Měli byste vidět nějaké zlepšení v úlohách, jako je zvětšování, posouvání, kopírování vložte, přetáhněte myš atd.
Vylepšení vodítek
Průvodci se široce používají při plánování a vytyčování stránek. Vytváření maket v aplikaci Illustrator pomocí průvodců vám umožňuje přesně umístit obsah. V aplikaci Illustrator CC existují čtyři vylepšení průvodce:
- Poklepáním na pravítko vytvoříte vodítko na daném místě na pravítku.
- Když podržíte klávesu Shift a poklepete na určité místo na pravítku, vytvořená vodítka v tomto bodě automaticky přitáhne k nejbližší značce (dělení) na pravítku.
- Pokud skryjete průvodci (Ctrl / Cmd +;) a poté se zobrazí, průvodce se automaticky nezamkne, jako tomu bylo v předchozích verzích.
- Vytvořte horizontální a vertikální vodítka v jedné akci. Zde je návod, jak: v levém horním rohu okna Illustrator klikněte na průsečík pravítka a stiskněte Ctrl (nebo Cmd na počítači Mac) a přetáhněte ukazatel myši na libovolné místo v okně aplikace Illustrator; ukazatel myši se stává křížovými vlasy, což indikuje, kde může být vytvořena vodorovná a svislá vodítko; uvolněte ukazatel myši a vytvořte vodítka.
Vylepšení vyhledávání písem
Typické vyhledávání vpřed hledá pouze první slovo v názvu písma, které obecně nedává okamžitě nejlepší výsledky. Také vyhledávání a prohlížení velkého počtu písem může být obtížné. Byla přidána nová funkce vyhledávací funkce "Hledání celého názvu písma" na panelech ovládacích prvků a znaků. Integrace TypeKit pro písma na ploše byla navíc nedávno oznámena na adrese MAX. To znamená, že můžete snadno navrhnout makety pomocí stejných písem, které hodláte používat na webu.
Vylepšení barevného vyhledávání
Nalezení určité barvy z řady barev může být časově náročné a frustrující. V Illustrator CC byly provedeny změny, které usnadňují hledání a hledání barvy. Dialogové okno Výběr barev (dvakrát klikněte na tlačítko Vyplnit proxy v panelu nástrojů) nyní obsahuje widget pro vyhledávání v okně Color Swatches. Po klepnutí na položku Vzorník barvy se pod předdefinovaným seznamem barev zobrazí panel vyhledávání. Zadejte název barvy nebo hodnotu RGB (nebo CMYK pro tisk). Zadáte-li "modré", zobrazí se všechny barevné vzorky se slovem modrá v jejich jménu. Tlačítkem R = 77 se zobrazí všechny barevné vzorky, které mají červenou barvu s hodnotou 77 ve stupnici RGB. Widget hledání je ve výchozím nastavení zapnutý.
Možnost hledání v panelu Vzorník byla také vylepšena. Pole nevyžaduje automatické dokončení. Zadané znaky již automaticky nebudou nahrazeny nalezenou nejbližší barevnou shodou. Můžete zadat název barvy nebo jednoduše zadejte hodnoty RGB (nebo CMYK pro tisk), chcete-li vyhledat takovou kombinaci barev. Pole hledání není ve výchozím nastavení povoleno a musí být poprvé povoleno z podnabídky panelu.
Za zmínku stojí také to, že Kuler byl upečený do Illustratoru. Pokud používáte tuto službu Adobe k vytváření barevných motivů a skupin, můžete snadno přistupovat k tomuto obsahu přímo uvnitř Illustrator CC.
Panel vlastností CSS
Samozřejmě, největší funkcí webu jsou vylepšení pracovních postupů CSS a SVG. Nyní, pokud jste hardcore uživatel Illustratoru, možná jste použili něco v CS5 nazvaném balíček HTML5, který byl k dispozici od AdobeLabs. Z jakéhokoli důvodu se v CS6 nikdy neobjevil, ale mnohé z těchto funkcí se vrátily s touto aktualizací CC. Tyto funkce připomínají to, co bylo již k dispozici v aplikaci Photoshop CS6 prostřednictvím aktualizací Creative Cloud a funkcí nalezených v aplikaci Fireworks CS6.
Panel Vlastnosti CSS je způsob, jakým můžete extrahovat CSS z dokumentu Illustratoru a nabízí několik způsobů, jak to provést. Klíčovým krokem při provádění všech těchto prací je však pojmenování vrstev v panelu vrstev. Určitě může Illustrator vygenerovat CSS bez toho, aby objekt měl v rámci panelu vrstev nějaký název, ale otevíráte se na neorganizovaný a potenciálně nedbalý způsob generování kódu. To je v podstatě, jak Illustrator pojmenuje pravidla třídy, která pro vás vytvoří. Generovaný server CSS může obsahovat předpony prohlížeče pro Webkit, Firefox, Opera a Internet Explorer. Může zachytit vzhledy podporované CSS, jako jsou přechody a zaoblené rohy.
Můžete řídit, jak je generování CSS zpřístupněno v dialogovém okně Možnosti exportu CSS. Do dialogového okna se dostanete kliknutím na tlačítko Možnosti exportu CSS, které je prvním ze čtyř tlačítek směrem dolů vpravo na panelu. Panel obsahuje několik funkcí pro pracovní postupy CSS:
- Zobrazit CSS pro vybraný objekt
- Kopírovat kód CSS pro vybraný objekt
- Exportovat vybraný objekt do souboru CSS spolu s obrázky používanými v CSS
- Exportovat kód CSS pro všechny objekty v dokumentu do souboru CSS
Navíc můžete exportovat kód CSS pro všechny objekty v dokumentu přejděte do nabídky Soubor a vyberte možnost Exportovat. Otevře se dialogové okno a odtud můžete zvolit CSS z nabídky formátu.
Pokud máte objekt, vyberte ho a ujistěte se, že je správně pojmenován v panelu Vrstvy. Pokud je vybrán, zobrazí se CSS, který je potřebný k vygenerování kresby v prohlížeči v panelu vlastností CSS.
SVG kód
V předchozích verzích aplikace Illustrator byste museli dokument uložit jako SVG. Zde v aktualizaci CC máte možnost zkopírovat něco v dokumentu, pak přejděte do svého oblíbeného editoru HTML a jednoduše proveďte vložení; celý kód SVG bude umístěn v dokumentu. Je to překvapivě příjemný pracovní postup. Pokud to pro vás neřízne, stále je k dispozici tradiční metoda ukládání dokumentu jako SVG.
Navíc společnost Adobe přidala podporu pro export nepoužívaných stylů. Při navrhování budete často vytvářet více grafických stylů při vytváření uměleckých děl. Nesmí používat všechny dostupné styly. Při exportu uměleckých děl ve formátu SVG se nepoužívají nevyužité styly. Také v exportovaném kódu CSS grafické styly nemají jména s nimi spojená a může být obtížné určit správný grafický styl.
Illustrator CC nabízí dvě funkce, které byly přidány pro zlepšení zkušeností se styly ve formátu SVG, které řeší tyto problémy:
- Název grafického stylu. Když se rozhodnete exportovat grafické styly, exportuje se název každého stylu s definicí stylu v nomenklatuře CSS.
- Exportovat nepoužívané styly. Když exportujete kresbu ve formátu SVG, můžete nyní zvolit export nepoužívaných stylů. To umožňuje jinému návrháři nebo vývojáři, který importuje styly, používat nepoužívané grafické styly v jiných dílech.
Jak ho budete používat
To určitě není nástroj pro kódování kompletních webových stránek. Co vidím, je použití nástroje Illustrator k vytváření maket, poté ručně kódovat strukturu v HTML a kód rozložení v CSS. Pokud je potřeba stín, stoupání, vzorek nebo dokonce i logo, použijete tyto nové extrakty CSS a možnosti SVG budou velmi užitečné a budou velkým spořičem času.
Pokud máte zájem dozvědět se více o nových funkcích v aplikaci Illustrator CC, navštivte stránku produktu Illustrator.
Jste fanoušek Illustratoru? Jaké funkce aplikace Illustrator CC jste nejvíce nadšeni? Dejte nám vědět v komentářích.