Ak existuje jeden aspekt práce s programom Illustrator, ktorý skutočne nemám rád, konvertuje line art na obrázky pre mobil alebo na web. Pomocou ponuky Exportovať> Exportovať ako a, aby ste boli brutálne čestní, funkcia Uložiť pre web - Export> Uložiť pre web - neboli presne jednoduché.
Konverzia výkresu do formátu .svg otvorila skôr zastrašujúce dialógové okno, ktoré pre ľudí nových v tomto pracovnom procese ponúkalo zmätočné pole možností, nehovoriac o tom, že existuje niekoľko formátov .svg a iba jeden z nich bol správny formát. Akonáhle ste si zvykli na tento pracovný tok, nebolo to veľa, ale krivka učenia bola strmá.
To všetko sa zmenilo vďaka novej funkcii Exportovať obrazovky - Export> Export pre obrazovky - a panelu Export Asset, ktoré boli predstavené v Illustrator CC 2015 v júni 2016. V tomto "Ako na to" vám ukážem, ako používať oba Vlastnosti. Začnime.
01 z 04
Ako získať prístup k exportom obrazoviek v aplikácii Adobe Illustrator CC 2015
Po tom, čo ste boli užívateľom Illustratoru od Illustratoru 88, myslím, že môžete pochopiť moju neochotu považovať Illustrator za seriózny návrhový nástroj pre webové a mobilné rozhrania a projekty.
Keď boli v verzii CS4 zavedené učebnice, myslel som si, že to bol zaujímavý príklad k žiadosti. Keď som prvýkrát v nástroji Illustrator opustil funkciu Uložiť pre web, ktorú som teraz odmietol, znova som to našiel za zaujímavý, ale zistil som, že rovnaká funkcia v programe Adobe Fireworks bola viac prispôsobená webovej grafike ako Illustrator.
S príchodom prístupu k dizajnu a zvyšujúceho sa spoliehania sa na obrázky SVG pre mobilné projekty bol Illustrator mojim nástrojom pre SVG a stal sa dôležitou zastávkou v pracovnom procese UI Design.
Napriek tomu, ak potrebujem exportovať aktíva pre mobilné zariadenia, Sketch 3 a Photoshop CC 2015 sú mojím nástrojom. Illustrator vstúpil do zoznamu v júni 2016 s naozaj šikovným menu Exportovať obrazovky.
Vo vyššie uvedenom príklade mám dve obrazovky určené pre iPhone a sú na samostatných Artboardoch s názvom "Domov" a "Miesta". Ak chcete ich vygenerovať, som vybral Súbor> Exportovať> Exportovať obrazovky. Otvorí sa dialógové okno Exportovať obrazovky.
02 z 04
Ako používať dialógové okno Exportovať obrazovky
Keď sa zobrazí dialógové okno, kliknite na každú kresbu, ktorú chcete vybrať. Potom bude šport zaškrtnutá. Môžete tiež dvakrát kliknúť na názov umelej dosky, aby ste ju vybrali a zmenili. To je dobré vedieť, či sú vaše výkresy s názvom "Artboard 1" a "Artboard 2", ktoré vám úprimne povedať nič.
V oblasti Vybrať máte tri možnosti:
- Všetko: Táto voľba exportuje každú kresbu v dokumente ako samostatný súbor.
- Rozsah: Zadajte rozsah výkresov, ktoré chcete exportovať. To je obzvlášť užitočné pre projekty s niekoľkými desiatkami artboardov.
- Úplný dokument: Vyberte túto položku a všetky tabule sa vyrovnávajú do jedného dokumentu.
Do oblasti Exportovať môžete vybrať cieľový priečinok výstupu. Predvolená zložka bude aktuálne umiestnenie dokumentu Illustrator.
Formáty sú tam, kde sa deje "kúzlo. Zistíte, že sú tri ikony - iOS. Android a Gear. Prvé dva sú samozrejmé. Ikona ozubeného prevodu otvorí nastavenia formátu, ktoré vám umožnia nastaviť optimalizáciu jednotlivých formátov súborov v zozname. Tieto nastavenia sú "špecifické pre formát" a po vykonaní zmien kliknite na tlačidlo Uložiť nastavenia a tieto zmeny sa použijú na výstupné formáty.
Po výbere iOS alebo Android sa zoznam zmení tak, aby zahŕňal všetky rozlíšenia dostupné na tejto platforme. V zozname iOS sa zobrazia faktory merania pre zobrazenie Retina a výber Android bude mať váhu v rozmedzí od 75x do 4x, v ktorom sa prakticky nachádza každé zariadenie so systémom Android.
Ak existuje formát, ktorý ukazuje, že chcete odstrániť, kliknite na tlačidlo "x". Ak existuje jeden, ktorý chcete pridať, kliknite na tlačidlo + Pridať mierku.
Po dokončení kliknite na tlačidlo Exportovať tabuľku s obrázkami a na lište priebehu sa zobrazí, keď sa proces ukončil.
03 z 04
Použitie súboru Exportovať obrazy z programu Adobe Illustrator CC 2015.
Keď skontrolujete výsledky exportu obrazoviek, zistíte, že aplikácia Illustrator prináša plochú verziu každej obrazovky. Na povrchu sa to môže zdať trochu slabé, najmä ak ste očakávali, že Illustrator bude exportovať všetky kúsky ako obrázky.
Ak sa na chvíľu vrátite a premýšľate o tom, je to práve to, čo potrebujete, pretože môžete použiť tento výstup v prototypovej aplikácii, ako je Adobe Experience Design , Principleformac, Atomic.io , UXPin alebo iná aplikácia na vytváranie prototypov
V tomto príklade používam Adobe Experience Design (XD) na vytvorenie jednoduchého kliknutia. Prvým krokom v tomto procese bolo vybrať veľkosť zariadenia iPhone 6, ktorá zodpovedala rozmerom rozhrania Illustrator
Po otvorení rozhrania som si vybral nástroj Artboard a raz klikol na lepenku a pridal som inú kresbu. Potom som ich označil ako "Domov" a "Miesta", vybral som si každú kresbu a importoval obrázok png z aplikácie Illustrator do kresby.
Ak chcete vytvoriť "hotspoty" pre kliknutie, nakreslil som obdĺžnik nad tlačidlom Explore (preskúmanie) na domovskej obrazovke a nastavením jeho plných a hraničných hodnôt na hodnotu none zrušte výber týchto vlastností na paneli Properties (Vlastnosti). Túto istú vec som vykonal pomocou tlačidla Späť na stránke Miesta.
Ak chcete pridať Interaktivitu, vybral som režim prototypu a potom klikol na "hotspot". Potom som potiahol šípku nazývaný drôt na stránku Miesta a nastavil cieľ Prechod na miestach, pohyb posunúť doľava, uvoľnenie sa uvoľní a trvanie prechodu na .6 sekúnd.
Opakoval som tento krok s hotspotom na stránke Miesta. Jediný rozdiel bol prechod bol nastavený na Push Right. Po kliknutí na tlačidlo Play som testoval môj prototyp.
04 z 04
Ako používať panel Export Asset v Adobe Illustrator CC 2015
Popri menu Uložiť pre obrazovky Adobe tiež pridala nový panel - Export Asset - ktorý odstránil obrovský bod bolesti v pracovnom procese UI Design.
Bodom bolesti boli ikony. Illustrator je skvelá aplikácia na kreslenie vektorov, ale na výstup, povedzme 10 ikon, na strane s 40 alebo 50 z nich potrebných je každý uložený ako obrázok SVG. To nevyhnutne vyžadovalo viac času ako zvyčajne vďaka postupným výletom na panel SVG. Tento bod bolesti je teraz minulosťou.
Tento nový panel sa nachádza v okne> Export Asset. Po otvorení panelu vyberte položku, ktorú chcete previesť do formátu SVG alebo iného formátu, a presuňte ho do panelu. Po uvoľnení myši sa do panelu pridá miniatúra tohto materiálu. Uveďte názov aktíva. Udržujte vtiahnuté predmety do panelu, kým nedokončíte.
Výber jednotlivých položiek V oblasti Nastavenia exportu alebo ich vyberte všetkými podržaním klávesu Shift a kliknutím na každú položku. Vyberte formát - v tomto príklade som zvolil SVG - a kliknite na tlačidlo Exportovať. Vybrané položky sa budú zobrazovať ako súbory SVG na rovnakom mieste ako súbor Illustrator.
Ak sa celý tento proces dostane ešte čistší, nemusíte používať panel Asset Export. Ak kliknete na tlačidlo Uložiť pre obrazovky v spodnej časti panelu, otvorí sa dialógové okno.
Naopak, môžete kliknúť na kartu Aktívy na paneli Uložiť pre obrazovky a prejsť na panel Exportovať aktíva. Napríklad, ak máte na kreslici vlastnú ikonu, môžete otvoriť panel Exportovať aktíva v dialógovom okne Uložiť pre obrazovku a pretiahnuť túto položku do panela Exportovať aktíva.