Koristite Illustrator CC 2015 Export za funkcije ekrana

Ako postoji jedan aspekt rada sa Illustrator-om da zaista ne uživam, pretvaranje umetničke linije u svg slike za mobilni ili web. Pomoću menija Izvoz> Izvoz kao i, da biste bili brutalno iskreni, funkcija Save For Web - Export> Save For Web - nije baš jednostavna za korišćenje.

Pretvaranje crteža u .svg format otvorilo je prilično zastrašujuće dijaloško okruženje koje je, za ljude koji su novi u ovom radnom toku, ponudili zbunjujuću niz opcija da ne pominjemo činjenicu da je bilo više .svg formata i samo je jedan od njih bio ispravan formatu. Jednom kada ste se navikli na ovaj tok posla, to nije bila velika stvar, ali kriva za učenje bila je strma.

Sve se promijenilo sa novom funkcijom Izvoz za ekrane - Izvoz> Izvoz za ekrane - i panel za izvoz imovine koji su predstavljeni Illustrator CC 2015 u junu 2016. godine. U ovom "Kako" ću vam pokazati kako da koristite oba karakteristike. Hajde da počnemo.

01 od 04

Kako pristupiti izvozu ekrana u Adobe Illustrator CC 2015

Izlazne tabele koristeći dijalog Export for Screens.

Pošto sam bio korisnik Illustrator-a od Illustrator-a 88, mislim da možete razumeti moju nespremnost da Ilustrator uzmete u obzir kao ozbiljan alat za dizajn web i mobilnih interfejsa i projekata.

Kada su umetničke table predstavljene u CS4 verziji 2008, mislio sam da je to zanimljiv dodatak aplikaciji. Kada sam prvi put video zaštićenu funkciju Save For Web u Illustrator-u, ponovo sam se našao zanimljivim, ali sam našao da je ista karakteristika u Adobe Fireworksu bila više usklađena sa web grafikom od Illustrator-a.

Uz pojavu mobilnog prvog pristupa dizajniranju i sve većem oslanjanju na SVG slike za mobilne projekte, Illustrator je bio moj alat za "otići u" za SVG i postao važan zaustavak u UI dizajnu.

Ipak, ako mi trebam izvoziti sredstva za mobilne uređaje, Sketch 3 i Photoshop CC 2015 su moja alata za izbor. Ilustrator je ušao na listu u junu 2016. godine sa stvarno izuzetnim Izvozom za ekrane.

U prethodnom primeru, imam dva ekrana predviđena za iPhone i nalaze se na odvojenim tablama pod nazivom "Home" i "Places". Da ih izađem, izabrao sam File> Export> Export za ekrane. Otvara se okvir za izvoz za ekrane.

02 od 04

Kako koristiti dijalog za ekrane za ekrane

Izlazne ploče za iOS i Android tako što ćete napraviti nekoliko jednostavnih izbora u dijalogu Spremi za ekrane.

Kada se pojavi dijalog, kliknite na svaku tablu koja će biti izabrana. Zatim će igrati znak za čekanje. Takođe možete dvaput kliknuti na ime artboard-a da je odaberete i promenite. Ovo je dobra stvar da znate da li su vaši pločice nazvani "Artboard 1" i "Artboard 2" koji, iskreno, ne govore ništa.

Imate tri izbora u oblasti Select:

Oblast Export to vam omogućava da odaberete odredišnu fasciklu za izlaz. Podrazumevani folder će biti trenutna lokacija Illustrator dokumenta.

Formati su tamo gde se "magija dešava. Primetili ste da postoje tri ikone - iOS. Android i Gear. Prva dva su samoobjašnjiva. Ikona Gear otvara postavke formata koje vam omogućavaju da kontrolišete kako će se svaki od formata datoteka na listi optimizovati. Ova podešavanja su "specifična za format" i nakon što izvršite izmjene, kliknite na dugme Sačuvaj postavke i te promjene će se primijeniti na formate koje će se izvoditi.

Kada izaberete iOS ili Android, lista će se promeniti tako da uključi sve rezolucije dostupne na toj platformi. Na listi iOS-a će se prikazati faktori skaliranja za Retina displej, a Android selekcija će imati vaga od .75x do 4x koja praktično prilagođava svakom Android uređaju.

Ako postoji oblik koji pokazuje da želite ukloniti, kliknite na "x". Ako postoji jedan koji želite dodati, kliknite na dugme + Dodaj veličinu.

Kada završite, kliknite na dugme Export Artboard i traka napredovanja će vam pokazati kada je proces završen.

03 od 04

Korišćenje datoteke za izvoz ekrana za ekrane Adobe Illustrator CC 2015.

Datoteke koje izlaze iz Illustratora mogu se lako dodati bilo kojem broju prototipnih aplikacija kao što je Adobe Experience Design.

Kada proverite rezultate Izvoza za ekrane, otkrićete da je Ilustrator izleteo sa svećom verzijom svakog ekrana. Na površini, ovo može izgledati malo pomalo posebno ako ste očekivali da Illustrator izvodi sve delove kao slike.

Ako se vratite i razmislite na trenutak, to je upravo ono što vam je potrebno jer možete koristiti ovaj izlaz u aplikaciji za prototipovanje kao što su Adobe Experience Design , Principleformac, Atomic.io , UXPin ili druga aplikacija za prototipovanje

U ovom primjeru koristim Adobe Experience Design (XD) da kreiram jednostavan klik-kroz. Prvi korak u procesu bio je odabir veličine iPhone 6 koji odgovara dimenzijama Illustrator interfejsa

Kada se interfejs otvorio, odabrao sam alatku Artboard i kliknuli jednom na kartonu da dodam još jednu tablu. Zatim sam ih nazvao "Home" i "Places", izabrao je svaku tablu i uvezao png sliku iz Illustratora u artboard.

Da biste kreirali "vruće tačke" za klik-thru, nacrtao sam pravougaonik preko dugmeta Istražiti na početnom ekranu i postavio svoje vrijednosti popunjavanja i granice na nijedan tako što sam ih odvojio na Properties panelu. Isto sam uradio sa dugmetom "Nazad" na stranici "Mesta".

Da bih dodao Interaktivnost, izabrao sam Prototype mod, a zatim kliknula na "hotspot". Zatim sam povukao strelicu - nazvana žica - na stranicu "Mesta" i postavila cilj tranzicije na Mesta, pokret u potisku levo, opuštanje da se olakša i trajanje prelaska na 6 sekundi.

Ponovio sam ovaj korak sa hotspotom na stranici "Mesta". Jedina razlika je bila da je tranzicija bila podešena na Push Right. Kada sam kliknuo dugme Play, testirao sam svoj prototip.

04 od 04

Kako koristiti panel za izvozna sredstva u Adobe Illustrator CC 2015

Ikone prilagođavanja mogu se izvoziti kao SVG datoteke koristeći panel Asset Export.

Pored menija Save for Screens, Adobe je dodao i novu tablu - Asset Export - koja je uklonila ogromnu tačku bolja u toku rada UI dizajna.

Tačka bolova bila su ikone. Ilustrator je odlična aplikacija za crtanje vektora, ali za izlaz, recimo 10 ikona, na stranici sa 40 ili 50 zahtjeva svaka od njih je sačuvana kao SVG slika. To je neizbežno zahtijevalo više vremena od uobičajenog zahvaljujući sljedećim putovanjima do SVG panela. Ova bolna tačka je sada stvar prošlosti.

Ovaj novi panel može se naći na prozoru> Izvoz sredstava. Kada se panel otvori, izaberite sredstvo koje želite pretvoriti u SVG ili drugi format i povucite u panel. Kada oslobodite miša, panelu se doda thumbnail slika. Nazovite imovinu. Držite vuče predmete u panel dok ne završite.

Izaberi svaku stavku U oblasti Postavke izvoza, ili ih sve izaberete držeći taster Shift i klikom na svaki od njih. Izaberite svoj format - u ovom primeru sam izabrao SVG i kliknite na dugme Izvoz. Izabrani stavki će se izvoditi kao SVG datoteke na istu lokaciju kao i datoteka Illustrator.

Tamo gde ceo ovaj proces postaje još neatniji, ne morate koristiti panel Asset Export. Ako kliknete na dugme Sačuvaj za ekrane na dnu panela otvara se dijalog.

Nasuprot tome, možete kliknuti na karticu Sredstva na panelu Spremi za ekrane da biste pristupili panelu za izvoz sredstava. Na primjer, ako imate ikonu prilagođenu na tabli, možete otvoriti panel panela Asset u dijalogu Sačuvaj za ekran i prevući tu stavku u panel Asset Export.