Če obstaja en vidik dela z Illustratorjem, ki ga resnično ne uživam, je pretvorba linijske umetnosti v svg slike za mobilno ali spletno. S pomočjo menija Izvozi> Izvozi kot, in če želite biti surovo pošteni, funkcija Save For Web - Export> Save For Web - ni ravno enostavna za uporabo.
Pretvarjanje risbe v .svg format je odprlo precej zastrašujoče pogovorno okno, ki je za osebe, ki so bile nove v ta delovni tok, ponudile zmedeno množico možnosti, da ne omenjamo dejstva, da je bilo število zapisov .svg in le eden od njih je bil pravilen formatu. Ko ste se navadili na ta delovni tok, ni bilo nič takega, toda učna krivulja je bila strma.
To se je vse spremenilo z novo funkcijo »Izvozi za zaslone« - Export> Export for Screens - in panel za izvoz sredstev, ki so ju junija 2016 predstavili v Illustrator CC 2015. V tem »Kako« bom pokazal, kako uporabljati oba Lastnosti. Začnimo.
01 od 04
Kako dostopati do izvoza za zaslone v Adobe Illustrator CC 2015
Ker sem bil Illustrator uporabnik od Illustrator 88, mislim, da lahko razumete moje nepripravljenost, da razmislim Illustrator kot resno oblikovalsko orodje za spletne in mobilne vmesnike in projekte.
Ko so bili v CS4 različice 2008 uvedeni plakati, sem mislil, da je to zanimiv dodatek k aplikaciji. Ko sem prvič videl trenutno opuščeno funkcijo Shranjevanje za splet v Illustratorju, sem spet našel zanimivo, vendar sem ugotovil, da je bila enaka lastnost v programu Adobe Fireworks bolj usklajena s spletno grafiko kot Illustrator.
S prihodom mobilnega prvega pristopa k oblikovanju in naraščajočim zanašanjem na slike SVG za mobilne projekte je bil Illustrator moj orodje za »go to« za SVG in postal pomemben zaustavitev v delovnem toku UI Design.
Še vedno, če potrebujem za izvoz sredstev za mobilne naprave, so Sketch 3 in Photoshop CC 2015 moja orodja izbire. Ilustrator je junija 2010 vstopil v seznam z resnično elegantnim menijem Export for Screens.
V zgornjem primeru imam dva zaslona, ki so namenjena za iPhone in so na ločenih slogovnih ploščah z imenom »Domov« in »Mesta«. Za izhod, sem izbral File> Export> Export for Screens. Odpre se pogovorno okno Izvozi za zaslone.
02 od 04
Kako uporabljati izvozno okno za pogovorno okno
Ko se prikaže pogovorno okno, kliknite na vsako tablo, ki naj bo izbrano. Potem bo označil kljukico. Dvakrat lahko kliknete ime umetniške table, da jo izberete in spremenite. To je dobro vedeti, če so vaše plošče z imenom "Artboard 1" in "Artboard 2", ki vam, odkrito, nič ne pove.
V območju Izberi imate tri izbire:
- Vse: ta izbira izvozi vsako tablo v dokument kot ločeno datoteko.
- Območje: vnesite paleto grafičnih plošč, ki jih želite izvoziti. To je še posebej uporabno za projekte z nekaj desetimi ploščami.
- Celoten dokument: izberite to in vse tabele bodo sploščene v en dokument.
Območje »Izvozi« vam omogoča, da izberete ciljno mapo za izhod. Privzeta mapa bo trenutna lokacija dokumenta Illustrator.
Oblike so, če se zgodi "magija". Opazili boste, da obstajajo tri ikone - iOS. Android in orodje. Prva dva sta samoumevna. Ikona Gear odpre nastavitve za oblikovanje, ki vam omogočajo, da preverite, kako bodo optimizirani vsi formati datotek na seznamu. Te nastavitve so "specifične za format" in ko ste izvedli svoje spremembe, kliknite gumb Shrani nastavitve in te spremembe bodo uporabljene za izhodne formate.
Ko izberete iOS ali Android, se bo seznam spremenil tako, da bo vključeval vse resolucije, ki so na voljo na tej platformi. V seznamu iOS bodo prikazani merilni faktorji za zaslon Retina, izbira za Android pa bo imela lestvice od .75x do 4x, v kateri je skoraj vsaka naprava Android.
Če obstaja zapis, ki ga želite odstraniti, kliknite »x«. Če ga želite dodati, kliknite gumb + Dodaj velikost.
Ko končate, kliknite gumb Export Artboard in v vrstici za napredovanje se prikaže, kdaj je postopek končan.
03 od 04
Uporaba datoteke za izvoz za zaslone iz programa Adobe Illustrator CC 2015.
Ko preverite rezultate Izvoza za zaslone, boste ugotovili, da je Illustrator izpisal sploščeno različico vsakega zaslona. Na površini se to zdi malo šibko, še posebej, če ste pričakovali, da bo Illustrator izvažal vse bitove in slike kot slike.
Če se za korak za korakom pomislite, je to pravzaprav tisto, kar potrebujete, ker lahko uporabite ta izhod v prototipni aplikaciji, kot so Adobe Experience Design , Principleformac, Atomic.io , UXPin ali druga aplikacija za izdelavo prototipov
V tem primeru uporabljam Adobe Experience Design (XD), da ustvarim enostaven klik. Prvi korak v procesu je bil izbrati velikost iPhone 6, ki ustreza dimenzijam vmesnika Illustrator
Ko je bil vmesnik odprt, sem izbral orodje Artboard in enkrat kliknil na ploščo, da dodam novo tablo. Nato sem jih poimenoval "Dom" in "Mesta", izbrali vsako tablo in uvozili sliko png iz Illustratorja v tablo.
Če želite ustvariti »vroče točke« za klik-nato, sem na začetnem zaslonu narisal pravokotnik nad gumbom »Razišči« in nastavim svoje vrednosti za polnjenje in robove na nobeno, tako da jih ne izbrišete na plošči »Lastnosti«. Isto sem storil z gumbom Nazaj na strani »Mesta«.
Za dodajanje interaktivnosti sem izbral prototipni način in nato kliknil na "vročo točko". Potem sem povlekel puščico, ki se imenuje žica, na stran Mesta in nastavite cilj prehoda na mestih, gibanje pritisnjeno levo, preprosto olajšanje in trajanje prehoda na 6 sekund.
Ta korak sem ponovil z vročo točko na strani Mesta. Edina razlika je bila, da je bila tranzicija nastavljena na Push Right. Ko sem kliknil na gumb za predvajanje, sem testiral moj prototip.
04 od 04
Kako uporabljati ploščo za izvozna sredstva v programu Adobe Illustrator CC 2015
Poleg menija Shrani za zaslon Adobe je dodal tudi novo ploščo - Asset Export -, ki je v delovnem toku UI Design odstranila veliko bolečino.
Bolečina je bila ikona. Illustrator je odlična aplikacija za risanje vektorja, a za izhod, recimo 10 ikon, na strani s 40 ali 50, ki jih zahteva, je vsak shranjen kot SVG slika. To je neizogibno zahtevalo več časa kot običajno, zahvaljujoč zaporednim potovanjem na SVG panel. Ta točka bolečine je zdaj stvar preteklosti.
Ta nova plošča je na voljo v oknu> Izvoz sredstev. Ko se panel odpre, izberite sredstvo, ki ga želite pretvoriti v SVG ali drugo obliko, in povlecite v panel. Ko puščate miško, se plošči doda sličica sredstva. Ime sredstva. Vstavite predmete v ploščo, dokler jih ne končate.
Izbira vsakega elementa V področju Nastavitve izvoza ali jih izberite, tako da držite tipko Shift in jih kliknete. Izberite svojo obliko - v tem primeru sem izbral SVG in kliknite gumb Izvozi. Izbrani elementi bodo prikazani kot datoteke SVG na isti lokaciji kot datoteka Illustrator.
Kjer je celoten proces celo neateren, vam ni treba uporabljati panela za izvoz sredstev. Če kliknete gumb Shrani za zaslone na dnu plošče, se odpre pogovorno okno.
Nasprotno, na plošči Shrani za zaslone lahko kliknete zavihek Sredstva za dostop do plošče za izvoz sredstev. Če na primer imate na ikono po meri ikono po meri, lahko v pogovornem oknu Shrani za zaslon odpre ploščo Asset Export in povlečete ta element v ploščo za izvoz sredstev.