Naudokite "Illustrator CC 2015" eksporto funkciją "Ekranai"

Jei yra vienas aspektas dirbant su " Illustrator", kad aš tikrai to nepatinka, tai yra linijos meno konvertavimas į svg atvaizdus mobiliesiems arba žiniatinklyje. Naudodamiesi meniu Eksportuoti> Eksportuoti kaip ir, kad nuoširdžiai sąžiningai, funkcija "Išsaugoti žiniatinklį" - Eksportas> Išsaugoti žiniatinklį - buvo ne taip paprasta naudoti.

Grafikos konvertavimas į .vv formatą atvėrė gana bauginančią dialogo langą, pagal kurį žmonės, nauji į šį darbo srautą, pasiūlė painiavos variantų rinkinį, nekalbant apie tai, kad buvo keletas .svg formatų ir tik vienas iš jų buvo tinkamas formatas. Kai pasivysite į šį darbo eigą, tai nebuvo didelis įvykis, tačiau mokymosi kreivė buvo kieta.

Tai viskas pasikeitė naudojant naują "Eksportuoti ekranus" funkciją - "Eksportuoti"> "Eksportuoti ekranus" ir "Eksporto ekspoziciją", kurie buvo pristatyti " Illustrator CC 2015 " 2016 m. Birželio mėn. Šiame "Kaip tai" aš parodysiu, kaip naudoti abi funkcijos. Pradėkime.

01 iš 04

Kaip pasiekti eksporto ekranus "Adobe Illustrator CC 2015" ekrane

Išvesties menedžeriai naudojant dialogo langą Eksportuoti ekranus.

"Illustrator" naudotojas, "Illustrator 88", manau, galite suprasti mano nenorą apsvarstyti "Illustrator" kaip rimtą interneto ir mobiliųjų sąsajų ir projektų kūrimo įrankį.

Kai 2008 m. CS4 versijoje buvo pristatytos dizaino plokštės, maniau, kad tai buvo įdomus programos priedas. Kai aš pirmą kartą pamačiau "Illustrator" funkciją "Išsaugoti žiniatinklį", kuri anksčiau buvo netinkama, dar kartą man atrodė įdomu, tačiau radau, kad ta pati "Adobe Fireworks" funkcija buvo labiau suderinta su žiniatinklio grafika nei "Illustrator".

Su "Mobile-first" požiūriu į dizainą ir SVG vaizdų vis didėjimu mobiliesiems projektams atsiradimas, "Illustrator" buvo mano "eiti" į SVG įrankis ir tapo svarbiu "UI Design" darbo eigos žingsniu.

Vis dėlto, jei turėčiau eksportuoti mobiliesiems skirtą turtą, 3-iasis "Sketch" ir "Photoshop CC 2015" yra mano pasirinktos priemonės. "Illustrator" įtrauktas į sąrašą 2016 m. Birželio mėn. Su tikrai gražiu meniu Eksportuoti į ekranus.

Ankstesniame pavyzdyje turiu du ekranus, skirtus "iPhone", ir jie yra atskirose "Artboards", pavadinimu "Namai" ir "Vietos". Norėdami juos išeiti, pasirinkau "Failas"> "Eksportuoti"> "Eksportuoti ekranus". Atidaromas dialogo langas Eksportuoti ekranus.

02 iš 04

Kaip naudoti "Export for Screens" dialogo langą

Išvesties moduliai "iOS" ir "Android", atlikdami keletą paprastų pasirinkčių "Išsaugoti ekranams" dialogo lange.

Kai pasirodys dialogo langas, spustelėkite kiekvieną pasirinktą meniu. Tada sportas bus pažymėtas. Taip pat galite dukart spustelėti meniu skydelio pavadinimą, kad jį pasirinktumėte ir pakeistumėte. Tai yra geras dalykas, kurį reikia žinoti, ar jūsų meno blokai vadinami "Artboard 1" ir "Artboard 2", kuris, tiesą sakant, nieko nedaro.

Pasirinkite regioną pasirinkdami tris pasirinkimus:

"Eksportas" srityje galite pasirinkti išvesties paskirties aplanką. Numatytasis aplankas bus dabartinė "Illustrator" dokumento vieta.

Formatai yra "magija". Jūs pastebėsite, kad yra trys piktogramos - "iOS". "Android" ir "Gear". Pirmieji du yra savaime suprantami. "Gear" piktograma atidaro formato nustatymus, leidžiančius jums valdyti, kaip bus optimizuoti kiekvienas sąraše esančių failų formatų. Šie nustatymai yra "konkretaus formato", o kai atlikote pakeitimus, spustelėkite mygtuką "Išsaugoti nustatymus", o tie pakeitimai bus taikomi formatams, kurie bus išvedami.

Pasirinkę "iOS" arba "Android", sąrašas pasikeis, įtraukiant visas tos platformos leidimus. "IOS" sąraše bus rodomas " Retina" ekrano mastelio koeficientas , o "Android" pasirinkimas bus nuo .75x iki 4x, o tai praktiškai atitiks visus "Android" įrenginius.

Jei yra formatas, rodantis, kad norite pašalinti, spustelėkite "x". Jei yra toks, kurį norite pridėti, spustelėkite mygtuką + Pridėti skalę.

Kai baigsite, spustelėkite mygtuką "Eksportuoti meniu", o progreso juosta parodys, kada procesas bus baigtas.

03 iš 04

"Adobe Illustrator CC 2015" ekrano failų naudojimas.

Failai iš "Illustrator" gali būti lengvai pridedami prie bet kokio skaičiaus prototipų programų, tokių kaip "Adobe Experience Design".

Kai patikrinsite "Eksportuoti ekranus" rezultatus, pamatysite, kad "Illustrator" išvedė supaprastintą kiekvieno ekrano versiją. Paviršiuje tai gali atrodyti šiek tiek silpnas, ypač jei tikėjotės, kad "Illustrator" eksportuos visus bitus ir gabalus kaip vaizdus.

Jei grįšite ir pagalvokite apie tai akimirkai, tai iš tikrųjų būtent tai, ko jums reikia, nes jūs galite naudoti šią išvestį prototipų programoje, tokioje kaip " Adobe Experience Design" , "Principleformac", " Atomic.io" , " UXPin" ar kita prototipų programa

Šiame pavyzdyje naudoju "Adobe Experience Design" (XD), kad sukurtumėte paprastą paspaudimą. Pirmasis žingsnis šiame procese buvo pasirinkti "iPhone 6" dydį, kuris atitiko "Illustrator" sąsajos matmenis

Kai atidaroma sąsaja, aš išrinkau "Artboard" įrankį ir vieną kartą spragtelėjo ant kartono, kad pridėčiau kitą modulį. Tada aš juos pavadino "Namai" ir "Vietos", pasirinko kiekvieną meniu ir įvedė png vaizdą iš "Illustrator" į meniu.

Norėdami sukurti "spragtelėjimus" spustelėjimui, aš nuviliau ties keturkampiu per pagrindinį ekraną esantį mygtuką "Naršyti" ir nustato jo užpildymo ir sienos vertes nė vienai, atšaukdamos tas savybes iš Properties skydo. Tą patį padariau mygtuku Atgal "Vietų" puslapyje.

Norėdami pridėti interaktyvumo, aš išrinktas prototipų režimas ir tada spustelėjęs "hotspot". Tada aš viliuosi rodyklę - vadinamą laidu - į "Vietų" puslapį ir nustatydama "Vietų" tikslą "Perėjimas", "Push Left" judesį, palengvėjimą ir perėjimą iki .6 sekundžių.

Aš pakartojo šį veiksmą su "Vietų" puslapyje esančia "viešosios vietos". Vienintelis skirtumas buvo tas, kad perėjimas buvo nustatytas kaip "Push Right". Kai spustelėjau mygtuką "Groti", aš išbandžiau savo prototipą.

04 iš 04

Kaip naudoti Eksporto turto rinkinį "Adobe Illustrator CC 2015"

Pasirinktines piktogramas galima eksportuoti kaip SVG failus naudodamiesi "Asset Export" skydeliu.

Kartu su "Save for screens" meniu "Adobe" taip pat pridėjo naują skydelį - Asset Export - kuris pašalino didžiulį skausmo tašką "UI Design" darbo eigoje.

Skausmo taškas buvo piktogramos. "Illustrator" yra puiki vektoriaus piešimo programa, bet norint išgauti, tarkim, 10 piktogramų, 40 arba 50 puslapių puslapyje reikia, kad kiekvienas iš jų būtų išsaugotas kaip SVG vaizdas. Dėl to, kad buvo sėkmingai vykdomos į SVG plokštę, neišvengiamai reikėjo daugiau laiko nei paprastai. Šis skausmo taškas dabar yra praeities dalykas.

Šią naują skydą rasite "Window> Asset Export". Kai skydas atsidaro, pasirinkite turtą, kurį norite konvertuoti į SVG arba kitą formatą, ir vilkite į skydelį. Atleidus pelę, prie skydo pridedamas miniatiūras. Pavadinkite turtą. Laikykite vilkdami daiktus į skydelį, kol pasibaigsite.

Pasirinkite kiekvieną elementą Srityje Eksportuoti nustatymus arba pažymėkite juos visus laikydami nuspaudę klavišą "Shift" ir spustelėdami kiekvieną iš jų. Pasirinkite formatą - šiame pavyzdyje pasirinkau SVG- ir spustelėkite mygtuką Eksportuoti. Pasirinkti elementai bus išvesti kaip SVG failai toje pačioje vietoje kaip "Illustrator" failas.

Jei šis procesas pasidaro netgi neatidėliotinas, nereikia naudoti "Asset Export" skydo. Jei paspausite ekrano mygtuką "Išsaugoti ekranams" skydelio apačioje, atsidarys dialogo langas.

Priešingai, galite spustelėti skirtuką "Turtai" skydelyje "Išsaugoti ekranams", kad pasiektumėte "Asset Export" skydą. Pvz., Jei esate pasirinktoje piktogramoje ant meniu skydo, dialogo lange "Išsaugoti ekranui" galite atidaryti "Asset Export" skydą ir vilkite šį elementą į "Asset Export" skydelį.