As daar een aspek van die werk met Illustrator is dat ek dit regtig nie geniet nie, is dit om lynkuns te omskep vir SVG-beelde vir mobiele of die web. Met die Uitvoer> Uitvoer As-spyskaart en, om brutaal eerlik te wees, was die funksie Stoor vir web - Uitvoer> Stoor vir web - nie presies maklik om te gebruik nie.
Die omskakeling van 'n tekening na die .svg-formaat het 'n taamlik intimiderende dialoog oopgemaak wat vir mense wat nuut was op hierdie werkstroom, 'n verwarrende verskeidenheid opsies aangebied het om nie te praat van die feit dat daar 'n aantal .svg-formate was nie en net een van hulle was die regte formaat. Sodra jy gewoond geraak het aan hierdie werkstroom, was dit nie 'n groot probleem nie, maar die leerkurwe was steil.
Dit is alles verander met die nuwe Uitvoer vir skerm-funksie - Uitvoer> Uitvoer vir skerms - en die paneel Uitvoerpaneel wat in Junie 2016 aan Illustrator CC 2015 bekendgestel is. In hierdie "Hoe om" Ek gaan jou wys hoe om albei te gebruik. kenmerke. Laat ons begin.
01 van 04
Hoe om uit te voer vir skerms In Adobe Illustrator CC 2015
Ek was 'n Illustrator-gebruiker sedert Illustrator 88. Ek dink jy kan my onwilligheid verstaan om Illustrator te beskou as 'n ernstige ontwerpinstrument vir web- en mobiele koppelvlakke en projekte.
Toe kentekens in die CS4 weergawe 2008 bekendgestel is, het ek gedink dit was 'n interessante toevoeging tot die aansoek. Toe ek die nuutgevraagde Save For Web-funksie in Illustrator eers gesien het, het ek dit weer interessant gevind, maar ek het dieselfde funksie in Adobe Fireworks gevind. Dit was meer in lyn met webgrafika as Illustrator.
Met die koms van 'n mobiele eerste benadering tot ontwerp en die toenemende afhanklikheid van SVG-beelde vir mobiele projekte, was Illustrator my "gaan na" -instrument vir SVG en het 'n belangrike stop in die UI-ontwerp-werkstroom geword.
Tog, as ek bates vir selfone moes uitvoer, is Sketch 3 en Photoshop CC 2015 my gereedskap van keuse. Illustrator het in Junie 2016 die lys ingevoer met die regtig Nifty Uitvoer vir Skerms-spyskaart.
In die bostaande voorbeeld het ek twee skerms bestem vir 'n iPhone en hulle is op afsonderlike Artboards genaamd "Home" en "Places". Om hulle uit te voer, het ek Lêer> Uitvoer> Uitvoer vir Skerms gekies. Die dialoog Uitvoer vir skerms word oop.
02 van 04
Hoe om die Uitvoer vir Skerms Dialoogkassie te gebruik
Wanneer die dialoogkassie verskyn, klik op elke kunsbord wat gekies moet word. Dit sal dan 'n keurmerk uitoefen. U kan ook dubbelklik op die naam van die artboard om dit te kies en dit te verander. Dit is 'n goeie ding om te weet of jou kunsborde 'Artboard 1' en 'Artboard 2' genoem word, wat u eerlik niks vertel nie.
Jy het drie keuses in die kies-area:
- Almal: Hierdie keuse eksporteer elke kunsbord in die dokument as 'n aparte lêer.
- Reeks: Gee 'n verskeidenheid artikels wat uitgevoer moet word. Dit is veral nuttig vir projekte met 'n paar dosyn kentekens.
- Volledige dokument: Kies hierdie en al die kentekens sal in 'n enkele dokument afgeplat word.
Met die Uitvoer na-gebied kan jy die bestemmingsmap vir die uitvoer kies. Die standaardmap is die huidige ligging van die Illustrator-dokument.
Formate is waar die magie gebeur. Jy sal sien daar is drie ikone-iOS. Android en 'n versnelling. Die eerste twee is selfverduidelikend. Die Gear-ikoon maak die formate instellings oop waarmee u kan beheer hoe elk van die lêerformate in die lys geoptimaliseer sal word. Hierdie instellings is "formaat spesifieke" en sodra u veranderinge aangebring is, klik die Stoor Stellings knoppie en die veranderinge sal toegepas word op die formate wat u wil uitvoer.
Sodra jy iOS of Android kies, sal die lys verander om al die besluite wat op die platform beskikbaar is, in te sluit. Die iOS-lys sal die skaalfaktore vir die Retina-skerm wys, en die Android-seleksie sal skale hê wat wissel van .75x tot 4x, wat feitlik elke Android-toestel daar buite akkommodeer.
As daar 'n formaat is wat wys dat jy wil verwyder, klik die "x". As daar een is wat jy wil byvoeg, klik die + Voeg skaal knoppie.
As jy klaar is, klik die Artboard-knoppie Uitvoer en 'n vorderingsbalk sal jou wys wanneer die proses afgehandel is.
03 van 04
Die uitvoer vir skerms gebruik van Adobe Illustrator CC 2015.
As u die resultate van Uitvoer vir skerms nagaan, sal u ontdek dat Illustrator 'n afgeplatte weergawe van elke skerm het. Op die oppervlak lyk dit dalk 'n bietjie swak, veral as jy verwag het dat Illustrator al die stukkies as beelde uitgevoer het.
As jy 'n oomblik terugstap en daaraan dink, is dit eintlik presies wat jy nodig het, want jy kan hierdie uitset gebruik in 'n prototipe-toepassing soos Adobe Experience Design , Principleformac, Atomic.io , UXPin of ander prototipe-aansoek
In hierdie voorbeeld gebruik ek Adobe Experience Design (XD) om 'n eenvoudige kliek-deur te skep. Die eerste stap in die proses was om die iPhone 6-grootte te kies wat ooreenstem met die afmetings van die Illustrator-koppelvlak
Toe die koppelvlak oopgemaak het, het ek die Artboard-instrument gekies en een keer op die plakkaat geklik om nog 'n kunsbord by te voeg. Ek het hulle dan "Home" en "Places" genoem, elke artboard gekies en die png-prent van Illustrator ingevoer na die artboard.
Om die "hotspots" vir die click-thru te skep, het ek 'n reghoek oor die verkenningsknoppie op die tuisskerm geteken en sy vul- en grenswaardes aan niemand gestel deur die eienskappe in die Eienskappe-paneel te deelekteer nie. Ek het dieselfde ding gedoen met die Terug-knoppie op die Plek-bladsy.
Om die Interaktiwiteit te voeg, het ek Prototipe af gekies en dan op die "hotspot" geklik. Ek het dan die pyltjie gesleep - 'n draad genoem - na die Plek-bladsy en stel die Oorgang-teiken op die plekke, die beweging om links te druk, die verligting om te verlig en die duur van die oorgang na .6 sekondes.
Ek het hierdie stap herhaal met die hotspot op die Places-bladsy. Die enigste verskil was dat die oorgang na regs druk was. Toe ek op die Play knoppie gekliek het, het ek my prototipe getoets.
04 van 04
Hoe om die Uitvoerpaneel in Adobe Illustrator CC 2015 te gebruik
Saam met die Save for Screens-menu het Adobe ook 'n nuwe paneel - Asset Export - bygevoeg - wat 'n groot pynpunt in die UI-ontwerp-werkstroom verwyder het.
Die pynpunt was ikone. Illustrator is 'n groot vektor tekening aansoek, maar om uit te voer, sê ons 10 ikone, op 'n bladsy met 40 of 50 van hulle vereis dat elkeen as 'n SVG-beeld gestoor word. Dit het noodwendig meer tyd nodig as gewoonlik, danksy opeenvolgende reise na die SVG paneel. Hierdie pynpunt is nou 'n ding van die verlede.
Hierdie nuwe paneel kan gevind word by Venster> Bate Uitvoer. Wanneer die paneel oopmaak, kies die bate wat u wil omskep na SVG of ander formaat en sleep in die paneel. Wanneer u die muis los, word 'n duimnaelskets van die bate by die paneel gevoeg. Noem die bate. Hou die voorwerpe in die paneel gesleep totdat jy klaar is.
Kies elke item in die Uitvoer instellings area, of kies almal deur die Shift-sleutel in te hou en op elkeen te klik. Kies jou formaat - in hierdie voorbeeld het ek SVG gekies en klik op die knoppie Uitvoer. Die geselekteerde items sal as SVG-lêers op dieselfde plek as die Illustrator-lêer uitgereik word.
Waar hierdie hele proses net nog netjies word, hoef jy nie die paneel bate uit te voer nie. As u op die knoppie Stoor vir skerms onderaan die paneel klik, word die dialoogkassie oop.
Omgekeerd kan u op die tab Bates in die paneel Stoor vir skerms klik om toegang tot die paneel Bate uit te voer. As u byvoorbeeld 'n persoonlike ikoon op 'n kunsbord het, kan u die paneel Bate Uitvoer oopmaak in die dialoogkassie Stoor vir skerm en sleep die item in die paneel Bate Uitvoer.