Ha az Illustratornak egy olyan aspektusa van, hogy valóban nem élvezem, akkor a line artot svg képekké alakítom át mobilra vagy az internetre. Az Exportálás> Exportálás menü használatával, és a brutálisan becsületes, a Save For Web funkcióval - Export> Mentés a webre - nem volt egyszerűen használható.
A rajz konvertálása .svg formátumba meglehetősen megfélemlítő párbeszédablakot nyitott meg, amely az új munkafolyamatokhoz tartozó felhasználók számára kínzó lehetőségeket kínált, nem is beszélve arról, hogy több .svg formátum létezett, és csak egy volt a megfelelő formátum. Miután megszokta ezt a munkafolyamatot, nem volt nagy dolog, de a tanulási görbe meredek volt.
Ez minden megváltozott az új Exportálók képernyők funkcióval - Exportálás> Képernyők exportálása - és az Asset Export panel, amelyet 2016. júniusban vezettek be az Illustrator CC 2015- ban. Ebben a "How To" című részben megmutatom, hogyan kell használni mindkettőt jellemzők. Lássunk neki.
01/04
Hogyan lehet elérni az exportálást a képernyőkhöz Az Adobe Illustrator CC 2015-ban
Miután Illustrator-ként az Illustrator-használók óta dolgozom, úgy gondolom, hogy megértettem a vonakodásomat, hogy az Illustrator-t komoly tervezőeszközként kezeljük a webes és a mobil felületekhez és projektekhez.
Amikor a rajzlapokat bemutatták a CS4 verzióban 2008-ban, úgy gondoltam, hogy ez egy érdekes kiegészítő volt az alkalmazáshoz. Amikor először láttam az Illustratorben az elavult Save For Web funkciót, újra érdekesnek találtam, de ugyanazt a funkciót találtam az Adobe Fireworks-ban, mint az Illustrator.
A mobil-első megközelítés kialakításával és az SVG-képek mobil projektekhez való egyre növekvő fontosságával az Illustrator az én "menni" eszközöm volt az SVG-hez, és fontos ütközés volt az UI Design munkafolyamatban.
Mégis, ha mobileszközöket kellett exportálnom, akkor a Sketch 3 és a Photoshop CC 2015 a választott eszközök. Az Illustrator 2016 júniusában lépett be a listára a valóban kivételes Export a képernyők menühöz.
A fenti példában két, az iPhone-ra szánt képernyő van, és különálló Artboards-on van, amelyek "Home" és "Places" néven szerepelnek. A kinyomtatáshoz a Fájl> Exportálás> Exportálás a képernyőre lehetőséget választottam. Megnyílik az Export a képernyők párbeszédpanel.
02. 04. sz
Az Export a képernyők párbeszédpanel használata
Amikor megjelenik a párbeszédpanel, kattintson a kijelölendő rajztáblára. Ezután sportolni fog egy pipa. A munkaterület nevét is duplán kattintva kiválaszthatja és módosíthatja. Ez jó dolog tudni, hogy a rajztábláit "Artboard 1" és "Artboard 2" -nek nevezik-e, amely őszintén mondja semmit.
Három választási lehetőség van a Kiválasztás területen:
- Mindez: Ez a választás a dokumentumban található összes rajztáblát külön fájlként exportálja.
- Tartomány: Adja meg az exportálandó rajztáblák tartományát. Ez különösen hasznos néhány tucat rajztáblával rendelkező projekteknél.
- Teljes dokumentum: Válassza ki ezt, és az összes rajztáblát egy dokumentumba kell bedobni.
Az Exportálás területen lehetővé teszi a kimenet célmappájának kiválasztását. Az alapértelmezett mappa lesz az Illustrator dokumentum aktuális helye.
Formátumok ahol a "mágia történik. Észre fogod venni, hogy három ikon van - iOS. Android és egy Gear. Az első kettő önmagyarázó. A fogaskerék ikon megnyitja a Formátumbeállítások lehetőséget, amelyek segítségével szabályozhatja, hogy a listában szereplő összes fájlformátum hogyan kerüljön optimalizálásra. Ezek a beállítások "formátum-specifikusak", és miután végrehajtotta a módosításokat, kattintson a Beállítások mentése gombra, és ezek a változások kerülnek alkalmazásra a kimeneti formátumokra.
Miután kiválasztotta az iOS vagy az Android alkalmazást, a lista megváltoztatja az összes platformon elérhető felbontást. Az iOS-listán megmutatják a Retina kijelző skálázási tényezőit , és az Android kiválasztása a .75x-ről 4-re változik, és gyakorlatilag minden Android-eszközt befogad.
Ha van olyan formátum, amely azt mutatja, hogy eltávolítani kívánja, kattintson az "x" gombra. Ha van olyan, amelyet hozzá akarsz adni, kattints a + Add Scale gombra.
Ha elkészült, kattintson az Artboard exportálás gombra, és egy folyamatjelző sáv jelenik meg a folyamat befejezésekor.
03. 04. sz
Az Adobe Illustrator CC 2015-ban az Export for Screens fájlok használata.
Amikor megnézed az Export for képernyők eredményeit, akkor rájössz, hogy az Illustrator az egyes képernyők lapított verzióját adja ki. A felszínen ez kissé gyenge lehet, különösen akkor, ha arra számítasz, hogy az Illustrator az összes bitet darabként exportálta.
Ha visszalépsz és gondolkodsz egy pillanatig, ez valójában pontosan az, amire szükséged van, mert használhatod ezt a kimenetet egy olyan prototípus-alkalmazásban, mint például az Adobe Experience Design , az Principleformac, az Atomic.io , az UXPin vagy más prototípus-alkalmazás
Ebben a példában az Adobe Experience Design (XD) használatával egyszerű kattintással hozhatom létre. A folyamat első lépése az iPhone 6 méretének kiválasztása volt, amely megfelel az Illustrator Interface dimenzióinak
Amikor megnyílt a kezelőfelület, kiválasztottam az Artboard eszközt, és rákattintottam egyszer a kartonra egy másik rajztáblához. Ezután neveztem el őket "Otthon" és "Helyek" -nek, kiválasztották az egyes rajztáblákat és importálták a png képet az Illustrator-ból a rajztáblába.
A kattintáson keresztül létrehozott "hotspotok" létrehozásához egy téglalapot rajzoltam ki a kezdőképernyőn található Explore (Fedezd fel) gombra, és a kitöltési és határértékek egyikére sem állítottam ki a Tulajdonságok panel tulajdonságainak törlésével. Ugyanezt tettem a Helyek oldal Vissza gombjával.
Az Interaktivitás hozzáadásához kiválasztottam a Prototípus módot, majd a "hotspot" -t. Ezután húztam a nyílra - amit egy vezetéknek hívtam - a Helyek oldalra, és állítsam át az Átmeneti célpontot a Helyekre, a Push Left mozgására, a könnyítésre, és az átmenet időtartamára .6 másodpercre.
Megismételtem ezt a lépést a Hotspot a Helyek oldalon. Az egyetlen különbség az volt, hogy az Átmenet Push Rightre van állítva. Amikor rákattintottam a Lejátszás gombra, teszteltem a prototípusomat.
04/04
Az Export Eszköz panel használata Az Adobe Illustrator CC 2015-ban
A Mentés a képernyőkhöz menü mellett az Adobe új panelet is felvetett - az Asset Export - amely hatalmas fájdalompontot szült az UI Design munkafolyamatban.
A fájdalompont ikonok voltak. Az Illustrator egy nagy vektoros rajzoló alkalmazás, de a kimenetre, mondjuk 10 ikonra, egy 40 vagy 50-es oldalon, amelyek mindegyikét SVG-képként mentették. Ez elkerülhetetlenül több időt igényel a megszokottnál, köszönhetően az egymást követő utaknak az SVG panelhez. Ez a fájdalompont a múlté.
Ez az új panel megtalálható a Window> Asset Export menüpontban. Amikor megnyílik a panel, válassza ki azt az eszközt, amelyet át szeretné konvertálni SVG vagy más formátumra, majd húzza át a panelt. Amikor kiadja az egeret, az eszköz bélyegképe kerül a panelhez. Nevezze el az eszközt. A művelet befejezéséig húzza az objektumokat a panelbe.
Válassza ki az egyes elemeket Az Export beállítások területen, vagy jelölje ki őket a Shift billentyű lenyomásával és mindegyikre kattintva. Válassza ki a formátumot - ebben a példában választottam az SVG-t és kattints az Export gombra. A kiválasztott elemek SVG fájlokként kerülnek ki az Illustrator fájlhoz hasonló helyre.
Ha ez az egész folyamat még neateresebb lesz, nem kell az Asset Export panelt használni. Ha a panel alján található Mentés a képernyőre gombra kattint, megjelenik a párbeszédpanel.
Ezzel szemben a Mentés a képernyők panelhez tartozó Eszközök fülre kattintva megnyithatja az Eszköz exportálása panelt. Például, ha egy egyedi ikon található a rajztáblán, megnyithatja az Eszköz exportálása panelt a Mentés a képernyő párbeszédpanelen, és húzza azt az Eszköz export panelbe.