Izmantojiet Illustrator CC 2015 Eksporta ekrānu iezīme

Ja ir viens aspekts darbā ar Illustrator, ka man patiešām nepatīk tas ir līniju mākslas pārvēršana svg attēliem mobilajam tālrunim vai tīmeklim. Izmantojot izvēlni Export (Eksportēt)> Export As (Eksportēt kā) un būt brutāli godīgam, funkcija Save To Web - Export> Save To Web - nebija tik vienkārši izmantojama.

Zīmējuma pārvēršana .vv formātā atvēra diezgan biedējošu dialoglodziņu, kas lietotājiem, kas bija jauni šajā darbplūsmā, piedāvāja neskaidras iespējas, nerunājot par to, ka bija vairāki .svg formāti un tikai viens no tiem bija pareizs formātā. Kad esat pieradis pie šī darba plāna, tas nebija liels darījums, taču mācīšanās līkne bija strauja.

Tas viss mainījās, izmantojot jauno eksporta ekrānu funkciju - Eksportēt> Eksportēt ekrāniem - un Asset Eksporta paneli, kuru 2016. gada jūnijā ieviesa Illustrator CC 2015. Šajā "Kā es" es parādīšu, kā izmantot abus Iespējas. Sāksim.

01 no 04

Kā piekļūt eksportēšanai ekrāniem programmā Adobe Illustrator CC 2015

Izvades moduļi, izmantojot dialoglodziņu Eksportēt uz ekrāniem.

Kopš Illustrator 88 esmu bijis Illustrator lietotājs, es domāju, ka jūs varat saprast manu nevēlēšanos izskatīt Illustrator kā nopietnu tīmekļa un mobilo saskarnju un projektu dizaina rīku.

Kad CS4 versijā 2008 tika ieviesti manifestētāji, es domāju, ka tas bija interesants pieteikuma papildinājums. Kad es pirmo reizi redzēju Illustrator aizmirsto funkciju Save To Web, atkal es uzskatu, ka tas ir interesants, bet es atklāju, ka tā pati funkcija Adobe Fireworks ir vairāk saskaņota ar tīmekļa grafiku nekā Illustrator.

Līdz ar mobilās pirmās pieejas izstrādi un arvien lielāku SVG attēlu izmantošanu mobilajiem projektiem, Illustrator bija mans "go-to" instruments SVG un kļuva par nozīmīgu pieturvietu UI dizaina darbplūsmā.

Tomēr, ja man vajadzētu eksportēt aktīvus mobilajām ierīcēm, Sketch 3 un Photoshop CC 2015 ir mani izvēles rīki. Illustrator ieraksta sarakstu 2016. gada jūnijā ar tiešām izveicīgu eksporta ekrānu izvēlni.

Iepriekš minētajā piemērā man ir divi ekrāni, kas paredzēti iPhone, un tie atrodas atsevišķos Artboards ar nosaukumu "Mājas" un "Vietas". Lai tos izvadītu, es izvēlējos File> Export> Eksporta ekrāniem. Atveras dialoglodziņš Eksportēt uz ekrāniem.

02 no 04

Kā izmantot eksporta ekrānu dialoglodziņu

Izejošās platformas iOS un Android ierīcēm, veicot dažas vienkāršas izvēles dialoglodziņā Saglabāt ekrāniem.

Kad tiek parādīts dialoglodziņš, noklikšķiniet uz katras izvēlnes, kas tiks atlasīts. Tad sportu atzīmēs. Varat arī dubultklikšķi uz māklas pavadas nosaukuma, lai to atlasītu un mainītu. Tā ir laba lieta, lai uzzinātu, vai jūsu manifestus sauc par "Artboard 1" un "Artboard 2", kas, atklāti sakot, neko nedara.

Izvēles apgabalā ir trīs iespējas:

Eksportēt uz apgabalu, ļauj izvēlēties izvades galamērķa mapi. Noklusējuma mape būs pašreizējā Illustrator dokumenta atrašanās vieta.

Formāti ir vieta, kur notiek "maģija". Jūs pamanīsit, ka ir trīs ikonas - IOS. Android un Gear. Pirmie divi ir pašsaprotami. Gear ikona atver formāta iestatījumus, kas ļauj jums kontrolēt, kā tiks optimizēts katrs no saraksta faila formātiem. Šie iestatījumi ir "specifiski formāti", un pēc tam, kad esat veicis izmaiņas, noklikšķiniet uz pogas Saglabāt iestatījumus, un šīs izmaiņas tiks pielietotas izvades formātos.

Kad esat izvēlējies iOS vai Android, saraksts mainīsies, iekļaujot visas šajā platformā pieejamās rezolūcijas. IOS sarakstā tiks rādīti Retina displeja mērogošanas faktori , un Android atlasei būs svari no 0,75x līdz 4x, kas praktiski aptver katru Android ierīci.

Ja ir formāts, kas norāda, ka vēlaties noņemt, noklikšķiniet uz "x". Ja ir kāds, kuru vēlaties pievienot, noklikšķiniet uz pogas + Pievienot skalu.

Kad esat pabeidzis, noklikšķiniet uz pogas Eksportēt moduļu kopiju, un progresa josla parādīs, kad process ir pabeigts.

03 no 04

Adobe Illustrator CC 2015 eksporta ekrānu failiem izmantošana.

Illustratora izvadītos failus var viegli pievienot jebkuram skaitam prototipēšanas lietojumprogrammu, piemēram, Adobe Experience Design.

Pārbaudot eksporta ekrānu rezultātus, jūs atklāsiet, ka Illustrator ir izlaida katra ekrāna izliektu versiju. Virspusē tas var šķist mazliet vājš, īpaši, ja jūs sagaidāt, ka Illustrator ir eksportējis visus bitus un gabalus kā attēlus.

Ja jūs uz priekšu atgriežaties un uz mirkli domājat par to, tas ir tieši tas, kas jums nepieciešams, jo jūs varat izmantot šo produkciju prototipa veidošanas programmā, piemēram, Adobe Experience Design , Principleformac, Atomic.io , UXPin vai citā prototipēšanas programmā

Šajā piemērā es izmantoju Adobe Experience Design (XD), lai izveidotu vienkāršu klikšķi. Pirmais solis šajā procesā bija izvēlēties iPhone 6 izmēru, kas atbilst Illustrator interfeisa izmēriem

Kad saskarne ir atvērta, es izvēlējos rīku Artboard un pēc tam uz kartona uzklikšķina, lai pievienotu vēl vienu mākonistu. Pēc tam es tos nosaucu kā "Mājas" un "Vietas", izvēlējos katru mākoņu skatu un importēja png attēlu no Illustrator uz galda.

Lai izveidotu tūkstošus "karstajos punktus", es uz sākuma ekrāna uzzīmēju taisnstūri pogā "Izpētīt" un iestatīt tā aizpildīšanas un robežvērtības nevienam, noņemot šo rekvizītu izvēli Properties panelī. Es to izdarīju ar pogu Atpakaļ lapā Vietas.

Lai pievienotu interaktivitāti, es izvēlējos prototipa režīmu un pēc tam noklikšķināju uz "karstapunkta". Pēc tam es velk bultiņu - sauc par vadu - uz lapu Vietas un iestatot pārejas mērķi uz vietām, kustības pogu pa kreisi, atvieglotu atvieglošanu un pārejas ilgumu uz 0,6 sekundēm.

Es atkārtoju šo soli ar vietni vietņu lapā. Vienīgā atšķirība bija tāda, ka Pāreja tika iestatīta uz Push Right. Kad es noklikšķināju uz pogas Spēlēt, es izmēģināju savu prototipu.

04 no 04

Kā izmantot eksporta līdzekļu kopu programmā Adobe Illustrator CC 2015

Pielāgotās ikonas var eksportēt kā SVG failus, izmantojot paneli Asset Export.

Līdz ar programmu Save for Screens (Saglabāt ekrāniem) Adobe arī pievienoja jaunu paneli - Asset Export - kas noņēma milzīgu sāpju punktu UI dizaina darbplūsmā.

Sāpju punkts bija ikonas. Illustrator ir lielisks vektorgrafikas lietojumprogramma, bet, lai izdotu, teiksim 10 ikonas, lapā, kurā ir 40 vai 50 no tām, katra no tām ir jāuzglabā kā SVG attēls. Tas neizbēgami prasīja vairāk laika nekā parasti, pateicoties secīgiem braucieniem uz SVG paneli. Šis sāpju punkts tagad ir pagātne.

Šo jauno paneli var atrast Window> Asset Export. Kad panelis tiek atvērts, atlasiet to, kuru vēlaties konvertēt uz SVG vai citu formātu, un velciet uz paneli. Pabeidzot peles pogu, panelim tiek pievienots aktīva sīktēls. Nosaukums aktīvu. Turpiniet vilkt priekšmetus, līdz esat pabeidzis.

Atlasiet katru vienumu. Eksportēšanas iestatījumu apgabalā vai atlasiet tos visus, nolaižot Shift taustiņu un noklikšķinot uz katra. Atlasiet formātu - šajā piemērā es izvēlējos SVG- un noklikšķiniet uz pogas Eksportēt. Atlasītie vienumi tiks izvadīti kā SVG faili tādā pašā vietā kā Illustrator fails.

Ja viss process kļūst vēl vājāks, jums nav jāizmanto Asset Export panelis. Ja noklikšķināsit uz pogas Saglabāt ekrāniem paneļa apakšdaļā, tiks atvērts dialoglodziņš.

Un otrādi, varat pogas Saglabāt ekrāniem noklikšķiniet uz cilnes Īpašumi, lai piekļūtu paneli Asset Export. Piemēram, ja jums ir pielāgota ikona montāžas panelī, varat dialoglodziņā Saglabāt ekrānam atvērt paneli Asset Export (Pārveidot eksponātu) un velciet šo elementu uz Asset Export paneļa.