Koristite Illustrator CC 2015 Izvoz za Zaslonske značajke

Ako postoji jedan aspekt rada s Illustratorom da uistinu ne uživam, pretvara liniju na SVG slike za mobitel ili web. Pomoću izbornika Export> Export As i brutalno iskreno, značajka Save For Web - Export> Save For Web - nije bila baš jednostavna za upotrebu.

Pretvaranje crteža u format .svg otvorilo je prilično zastrašujući dijaloški okvir koji je, za ljude koji su novi u ovom procesu rada, ponudio zbunjujući niz mogućnosti da ne spominje činjenicu da je postojao veliki broj .svg formata, a samo je jedan od njih bio pravi format. Kada se naviknete na taj tijek rada, to nije bilo velik posao, ali krivulja učenja bila je strma.

Sve se to promijenilo pomoću nove značajke Izvoz za zaslone - Izvoz> Izvoz za zaslone - i ploča Izvoz izvoza koji su predstavljeni Illustratoru CC 2015 u lipnju 2016. U ovom "Kako" prikazujem vam kako koristiti oba značajke. Započnimo.

01 od 04

Kako pristupiti izvozu za zaslone u programu Adobe Illustrator CC 2015

Izlazne radne plohe pomoću dijaloškog okvira Izvoz za zaslone.

Budući da sam Illustratorov korisnik od ilustratora 88 mislim da možete shvatiti moju nevoljkost da razmislite o Illustratoru kao ozbiljnom dizajnu alata za web i mobilna sučelja i projekte.

Kada su uvedene radne ploče u inačici CS4 verzije 2008, mislio sam da je to zanimljiv dodatak prijavi. Kada sam prvi put u Illustratoru vidio sada obustavljenu značajku Spremi za web, opet sam pronašao zanimljivo, ali pronašao sam istu značajku u programu Adobe Fireworks koji je više usklađen s web-grafikom od Illustratora.

S pojavom mobilnog prvog pristupa dizajnu i sve većem oslanjanju na SVG slike za mobilne projekte, Illustrator je bio moj "idi na" alat za SVG i postao je važan zaustavljanje u tijeku rada UI Design.

Ipak, ako trebam izvesti imovinu za mobilne uređaje, Sketch 3 i Photoshop CC 2015 su moji alati izbora. Ilustrator je ušao u popis u lipnju 2016. s stvarno izvrsnim izbornikom Izvoz za zaslone.

U gornjem primjeru imam dva zaslona namijenjena za iPhone i oni se nalaze na zasebnim Artboards pod nazivom "Dom" i "Mjesta". Da biste ih izlazili, odabrao sam File> Export> Export for Screens. Otvorit će se dijaloški okvir Izvoz za zaslone.

02 od 04

Kako koristiti dijaloški okvir Izvoz za zaslone

Izlazne pločice za iOS i Android tako da napravite nekoliko jednostavnih izbora u dijaloškom okviru Spremi za zaslone.

Kada se prikaže dijaloški okvir, kliknite na svaku ploču za prikaz koji želite odabrati. Zatim će se kladiti. Također možete dvaput kliknuti ime ploče za radionicu da biste ga odabrali i promijenili. Ovo je dobra stvar da znate jesu li vaše radne ploče imenovane "Artboard 1" i "Artboard 2" koje, iskreno govoreći, ništa vam ne govore.

U odabranom području imate tri izbora:

Područje izvoza omogućuje odabir odredišne ​​mape za izlaz. Zadana mapa bit će trenutni položaj dokumenta Illustratora.

Formati su mjesta gdje se "čarolija događa. Primijetit ćete da postoje tri ikone - iOS. Android i Gear. Prva dva su samoobjasna. Ikona Gear otvara postavke formata koje omogućuju nadzor kako će svaki od formata datoteka na popisu biti optimiziran. Te su postavke "specifične za formate" i nakon što napravite promjene, kliknite gumb Spremi postavke te će se te izmjene primijeniti na formate koje želite reproducirati.

Nakon što odaberete iOS ili Android, popis će se promijeniti kako bi uključio sve rezolucije dostupne na toj platformi. Popis iOS-a prikazat će faktore skaliranja za Retina zaslon, a odabir Androida imat će vage u rasponu od .75x do 4x koje ugrađuju gotovo sve Android uređaje vani.

Ako postoji format koji pokazuje da želite ukloniti, kliknite "x". Ako postoji jedan koji želite dodati, kliknite gumb + Dodaj skal.

Kada završite, kliknite gumb Izvezi tablicu, a traka napretka će vam pokazati kada je proces završen.

03 od 04

Korištenje datoteka za izvoz datoteka iz Adobe Illustrator CC 2015.

Datoteke izlazne iz Illustratora lako se mogu dodati bilo kojem broju aplikacija za prototipove kao što je Adobe Experience Design.

Kada provjerite rezultate Izvoz za zaslone, otkrit ćete da je Illustrator izlazila ravnomjernija verzija svakog zaslona. Na površini, čini se da je to malo slaba, ako ste očekivali da Illustrator izveze sve komadiće kao slike.

Ako se na trenutak povučete i razmislite o tome, to je upravo ono što vam je potrebno jer možete upotrijebiti ovaj izlaz u aplikaciji za prototipove kao što su Adobe Design Design , Principleformac, Atomic.io , UXPin ili neki drugi prototipni program

U ovom primjeru upotrebljavam Adobe Experience Design (XD) za stvaranje jednostavnog klika. Prvi korak u tom procesu bio je odabir veličine iPhone 6 koji je odgovarao dimenzijama sučelja Illustrator

Kada se otvorio sučelje, odabrao sam alat Artboard i jednom kliknuo na karticu da biste dodali još jednu ploču. Zatim sam ih nazvao "Dom" i "Mjesta", odabrao pojedine pločice i uvezao PNG sliku iz Illustratora u ploču s instrumentima.

Da biste stvorili "vruće točke" za klikanje, skrenuo sam pravokutnik preko gumba Istraživanje na početnom zaslonu i postavio vrijednost njenog popunjavanja i granične vrijednosti tako da ih izbrišete na ploči Svojstva. Istu stvar učinio sam sa gumbom Natrag na stranici Mjesta.

Da biste dodali Interaktivnost, odabrao sam način rada Prototip, a zatim kliknite na "hotspot". Zatim sam povukao strelicu - zvanu žica - na stranicu Mjesta i postavio cilj Prijelaz na Mjesta, kretanje za Push Left, olakšavanje i trajanje prijelaza na .6 sekundi.

Ponovio sam ovaj korak s hotspotom na stranici Mjesta. Jedina je razlika bila prijelaz na postavku Push Right. Kada sam kliknuo gumb za reprodukciju, testirali smo prototip.

04 od 04

Kako koristiti ploču za izvoz imovine u programu Adobe Illustrator CC 2015

Prilagođene ikone mogu se izvesti kao SVG datoteke pomoću ploče Izvoz sredstava.

Zajedno sa izbornikom Save for Screen (Izbornik Save for Screen), Adobe je dodao i novu ploču - Asset Export (Izvoz sredstava) - koji je uklonio golemu bolnu točku u tijeku rada UI Design.

Točka boli bila je ikona. Ilustrator je izvrsna aplikacija za crtanje vektora, ali za izlazak, recimo 10 ikona, na stranici s 40 ili 50 potrebnih, svaki je spremljen kao SVG slika. To je neizbježno potrebno više vremena nego obično zahvaljujući uzastopnim izletima na ploču SVG. Ova točka boli sada je stvar prošlosti.

Ova nova ploča nalazi se u prozoru> Izvoz sredstava. Kada se ploča otvori, odaberite entitet koji želite pretvoriti u SVG ili neki drugi format i povucite ga u ploču. Kada otpustite miš, minijatura imovine dodana je na ploču. Nazvati imovinu. Držite objekte na ploči dok ne završite.

Odaberite svaku stavku U području Izvoz postavki ili ih sve odaberite tako da držite tipku Shift i kliknete na svaku od njih. Odaberite svoj format - u ovom primjeru odabrao sam SVG i kliknite gumb Izvoz. Odabrane stavke bit će izlazne kao SVG datoteke na istu lokaciju kao i datoteka Illustrator.

Kada cijeli ovaj proces postane još neaterijentniji, ne morate koristiti ploču Izvoz sredstava. Ako kliknete gumb Spremi za zaslone pri dnu ploče, otvorit će se dijaloški okvir.

S druge strane, na kartici Spremi za zaslone možete kliknuti karticu Sredstva za pristup ploči za izvoz sredstava. Na primjer, ako imate prilagođenu ikonu na ploči s instrumentima, možete otvoriti ploču Izvoz sredstava u dijaloškom okviru Save for Screen i povucite tu stavku u ploču Izvoz sredstava.