Pokud existuje jeden aspekt práce s Illustratorem, který se opravdu nelíbí, přeměňuje linii umění na obrázky pro mobilní zařízení nebo na web. Použijte nabídku Exportovat> Exportovat jako a abyste byli brutálně upřímní, funkce Uložit pro web - Export> Uložit pro web - nebyla přesně snadná.
Přeměna výkresu na formát .svg otevřela spíše zastrašující dialogové okno, které pro lidi noví k tomuto pracovnímu postupu nabízelo matoucí škálu možností, nemluvě o skutečnosti, že existuje několik formátů .svg a pouze jeden z nich byl správný formát. Jakmile jste si zvykli na tento pracovní postup, nebyl to velký problém, ale křivka učení byla strmá.
To vše se změnilo díky nové funkci Exportovat obrazovky - Export> Export pro obrazovky - a panelu Export Asset, který byl v červnu 2016 představen Illustratoru CC 2015. V tomto "How To" vám ukážeme, jak používat jak funkce. Začněme.
01 ze dne 04
Jak získat přístup k obrazovkám v aplikaci Adobe Illustrator CC 2015
Jelikož jsem byl uživatel Illustratoru od Illustratoru 88, myslím, že můžete pochopit svou neochotu považovat Illustrator za vážný návrhový nástroj pro webové a mobilní rozhraní a projekty.
Když byly ve verzi CS4 verze 2008 uvedeny kreslicí plány, myslela jsem, že to je zajímavý přírůstek aplikace. Když jsem poprvé viděl nyní zastaralou funkci Uložit pro web v aplikaci Illustrator, znovu jsem zjistil, že je zajímavé, ale v Adobe Fireworks jsem nalezl tutéž funkci, která byla více propojena s webovou grafikou než Illustrator.
S příchodem prvního mobilního přístupu k návrhu a rostoucím závislostem na obrázcích SVG pro mobilní projekty byl Illustrator mým nástrojem "go to" pro SVG a stal se důležitou zastávkou v pracovním procesu UI Design.
Přesto, kdybych potřeboval exportovat majetek pro mobilní zařízení, jsou moje volby Sketch 3 a Photoshop CC 2015. Illustrator vstoupil do seznamu v červnu 2016 pomocí skutečně šikovného menu Export pro obrazovky.
Ve výše uvedeném příkladu mám dvě obrazovky určené pro iPhone a jsou na samostatných Artboards s názvem "Domov" a "Místa". Pro jejich výstup jsem zvolil Soubor> Export> Export pro obrazovky. Otevře se dialogové okno Exportovat obrazovky.
02 z 04
Jak používat dialog Exportovat obrazovky
Jakmile se objeví dialogové okno, klikněte na každou kresbu, kterou chcete vybrat. Bude pak sport zaškrtnutí. Můžete také dvakrát kliknout na název umělecké desky, abyste ji vybrali a změnili. To je dobré vědět, jestli jsou vaše umělecké desky nazvané "Artboard 1" a "Artboard 2", které vám upřímně řečeno nic neřekne.
V oblasti výběru máte tři možnosti:
- Vše: Tato volba exportuje každý kreslicí prvek do dokumentu jako samostatný soubor.
- Rozsah: Zadejte rozsah výkresů, které chcete exportovat. To je zvláště užitečné pro projekty s několika desítkami artboardů.
- Úplný dokument: Tuto možnost vyberte a všechny kresby budou zploštěny do jednoho dokumentu.
Oblast Export do umožňuje vybrat cílovou složku pro výstup. Výchozí složka bude aktuální umístění dokumentu Illustrator.
Formáty jsou tam, kde se děje "kouzlo". Všimnete si, že existují tři ikony - iOS. Android a Gear. První dvě jsou samozřejmé. Ikona ozubeného kola otevře nastavení formátu, které vám umožní řídit optimalizaci jednotlivých formátů souborů v seznamu. Tato nastavení jsou "formátově specifická" a po provedení změn klikněte na tlačítko Uložit nastavení a tyto změny budou použity na výstupní formáty.
Jakmile vyberete systém iOS nebo Android, seznam se změní tak, aby zahrnoval všechna rozlišení dostupná na této platformě. V seznamu iOS budou zobrazeny faktory měřítka pro displej Retina a výběr Android bude mít váhy v rozmezí od 75x do 4x, které budou prakticky vyhovovat všem zařízením Android.
Pokud je formát zobrazující, že chcete odstranit, klikněte na tlačítko "x". Pokud existuje jeden, který chcete přidat, klikněte na tlačítko + Přidat měřítko.
Po dokončení klikněte na tlačítko Export Artboard a na panelu postupu se zobrazí, jakmile je proces dokončen.
03 ze dne 04
Použití souboru exportu obrazovek z aplikace Adobe Illustrator CC 2015.
Jakmile zjistíte výsledky exportu pro obrazovky, zjistíte, že aplikace Illustrator zobrazuje zploštělou verzi každé obrazovky. Na povrchu se to může zdát trochu slabé, zvlášť pokud jste očekávali, že Illustrator bude exportovat všechny kusy jako obrázky.
Pokud se vrátíte a přemýšlíte o tom na chvíli, je to přesně to, co potřebujete, protože můžete použít tento výstup v prototypové aplikaci, jako je Adobe Experience Design , Principleformac, Atomic.io , UXPin nebo jiné prototypové aplikace
V tomto příkladu používám Adobe Experience Design (XD) pro vytvoření jednoduchého kliknutí. Prvním krokem v tomto procesu bylo vybrat velikost zařízení iPhone 6, která odpovídala rozměrům rozhraní Illustrator
Když bylo rozhraní otevřeno, jsem vybral nástroj Artboard a jednou jsem na kartonu přidal další kreslicí desku. Poté jsem je pojmenoval "Domov" a "Místa", vybral jsem každou kreslicí desku a importoval obrázek png z Illustratoru do výkresové dokumentace.
Chcete-li vytvořit "hotspoty" pro kliknutí, vykreslil jsem obdélník přes tlačítko Explore (Prozkoumat) na domovské obrazovce a nastavením jeho hodnot vyplnění a hranic na hodnotu none (Vypnutí) na panelu Properties (Vlastnosti). Stejnou věc jsem udělal tlačítkem Zpět na stránce Místa.
Chcete-li přidat interaktivitu, jsem zvolil režim Prototype a poté klikl na "hotspot". Poté jsem přitáhl šipku - nazývaný vodič - na stránku Místa a nastavil cíl pro přechod na místa, pohyb posunout doleva, zmírnění uvolnění a trvání přechodu na .6 sekundy.
Zopakoval jsem tento krok s hotspotem na stránce Místa. Jediný rozdíl byl přechod nastaven na Push Right. Když jsem klepnul na tlačítko Play, vyzkoušel jsem svůj prototyp.
04 ze dne 04
Jak používat panel Exportní aktivita v aplikaci Adobe Illustrator CC 2015
Spolu s nabídkou Uložit pro obrazovky Adobe také přidal nový panel - Export aktiv -, který odstranil obrovský bod bolesti v pracovním postupu UI Design.
Bod bolesti byl ikony. Illustrator je skvělá aplikace pro kreslení vektorů, ale k výstupu, řekněme 10 ikon, na stránce s 40 nebo 50 požadovanými, každá z nich je uložena jako obrázek SVG. To nevyhnutelně vyžadovalo více času než obvykle díky po sobě jdoucím výletům na panel SVG. Tento bod bolesti je nyní věcí minulosti.
Tento nový panel naleznete v okně> Export aktiv. Po otevření panelu vyberte položku, kterou chcete převést do formátu SVG nebo jiného formátu, a přetáhněte panel. Po uvolnění myši se do panelu přidá miniaturka. Název položky. Udržujte přetahování objektů do panelu, dokud nedokončíte.
Vyberte každou položku V oblasti Nastavení exportu nebo vyberte všechny položky podržením klávesy Shift a klepnutím na každou položku. Vyberte formát - v tomto příkladu jsem zvolil SVG - a klikněte na tlačítko Exportovat. Vybrané položky budou vyvedeny jako soubory SVG do stejného umístění jako soubor Illustrator.
Tam, kde se celý tento proces ještě dokonalejší, nemusíte používat panel Export aktiv. Pokud kliknete na tlačítko Uložit pro obrazovky ve spodní části panelu, otevře se dialogové okno.
Naopak, můžete kliknout na kartu Aktiva v panelu Uložit pro obrazovky a otevřít panel Exportovat položku. Například pokud máte vlastní kresbu na kreslicí desce, můžete otevřít panel Exportovat Asset v dialogovém okně Uložit pro obrazovku a přetáhnout tuto položku do panelu Export Asset.