Dacă există un aspect al colaborării cu Illustrator că nu-mi place deloc, convertirea artei de linii în imagini pentru imagini mobile sau pe web. Utilizând meniul Export> Export As și, pentru a fi sincer sincer, funcția Salvare pentru Web - Exportați> Salvați pentru Web - nu a fost exact ușor de utilizat.
Conversia unui desen în formatul .svg a deschis o casetă de dialog destul de intimidantă care, pentru oamenii noi în acest flux de lucru, a oferit o gamă confuză de opțiuni, fără a menționa faptul că există un număr de formate .svg și numai unul dintre ele era bun format. Odată ce v-ați obișnuit cu acest flux de lucru, nu a fost mare lucru, dar curba de învățare a fost abruptă.
Acest lucru sa schimbat odată cu noua caracteristică Export pentru ecrane - Export> Export pentru ecrane - și panoul Export Asset care au fost introduse în Illustrator CC 2015 în iunie 2016. În acest "Cum să" vă voi arăta cum să utilizați ambele caracteristici. Să începem.
01 din 04
Cum să accesați exportul pentru ecrane în Adobe Illustrator CC 2015
Fiind un utilizator de Illustrator de la Illustrator 88, cred că puteți înțelege reticența mea de a considera Illustrator drept un instrument serios de proiectare pentru interfețe și proiecte web și mobile.
Când tablourile de artă au fost introduse în versiunea CS4 2008, am crezut că a fost o adăugare interesantă a aplicației. Când am văzut pentru prima dată funcția Save for Web depreciată acum în Illustrator, din nou, mi sa părut interesantă, dar am descoperit aceeași caracteristică în Adobe Fireworks a fost mai mult aliniată graficului web decât Illustrator.
Odată cu apariția unei abordări mobile pentru prima dată în proiectare și dependența crescândă a imaginilor SVG pentru proiectele mobile, Illustrator a fost instrumentul meu "merge la" pentru SVG și a devenit o oprire importantă în fluxul de lucru UI Design.
Cu toate acestea, dacă aveam nevoie de a exporta active pentru mobil, Sketch 3 și Photoshop CC 2015 sunt instrumentele mele de alegere. Illustratorul a intrat în listă în iunie 2016 cu meniul Export pentru ecrane.
În exemplul de mai sus, am două ecrane destinate unui iPhone și sunt pe plăci Artboards separate numite "Acasă" și "Locuri". Pentru a le trimite, am selectat File> Export> Export for Screens. Se deschide caseta de dialog Export pentru ecrane.
02 din 04
Cum se utilizează caseta de dialog Export pentru ecrane
Când apare fereastra de dialog, faceți clic pe fiecare placă de desen pentru a fi selectată. Acesta va avea apoi un semn de control. De asemenea, puteți face dublu clic pe numele unui tablou de bord pentru al selecta și ao schimba. Este un lucru bun să știți dacă tablourile dvs. de artă sunt numite "Artboard 1" și "Artboard 2" care, sincer, nu vă spun nimic.
Aveți trei opțiuni în zona Select:
- Toate: Această opțiune exportă fiecare tablou de artă în document ca fișier separat.
- Interval: introduceți o gamă de tablouri de arhivă pentru a fi exportate. Acest lucru este util în special pentru proiectele cu cateva zeci de tablouri de arta.
- Document complet: Selectați acest lucru și toate tablourile de artă vor fi aplatizate într-un singur document.
Zona Export către vă permite să alegeți dosarul destinație pentru ieșire. Dosarul implicit va fi locația curentă a documentului Illustrator.
Formate este locul unde se petrece "magia". Veți observa că există trei pictograme - iOS. Android și un Gear. Primele două sunt auto-explicative. Pictograma Gear deschide setările de format care vă permit să controlați modul în care fiecare dintre formatele de fișiere din listă va fi optimizat. Aceste setări sunt "specifice formatului" și odată ce ați făcut modificările, faceți clic pe butonul Salvați setările, iar acele modificări vor fi aplicate formatelor care vor fi trimise.
Odată ce ați ales iOS sau Android, lista se va schimba pentru a include toate rezoluțiile disponibile pe acea platformă. Lista iOS va afișa factorii de scalare pentru afișajul retinei, iar selecția Android va avea scale de la .75x la 4x, care găzduiesc aproape fiecare dispozitiv Android afară.
Dacă există un format care să arate că doriți să îl eliminați, faceți clic pe "x". Dacă există una pe care doriți să o adăugați, faceți clic pe butonul + Adăugare Scală.
Când ați terminat, faceți clic pe butonul Export Artboard și o bară de progres vă va afișa când procesul este terminat.
03 din 04
Utilizarea fișierului Export pentru ecrane din Adobe Illustrator CC 2015.
Când verificați rezultatele Export pentru ecrane, veți descoperi că Illustrator a realizat o versiune aplatizată a fiecărui ecran. Pe suprafață, acest lucru poate părea un pic mai slab, mai ales dacă v-ați aștepta ca Illustrator să fi exportat toate piesele ca imagini.
Dacă vă întoarceți și vă gândiți la ea pentru un moment, acesta este de fapt exact ceea ce aveți nevoie pentru că puteți utiliza această ieșire într-o aplicație prototipantă, cum ar fi Adobe Experience Design , Principleformac, Atomic.io , UXPin sau altă aplicație prototip
În acest exemplu, folosesc Adobe Experience Design (XD) pentru a crea un simplu click-thru. Primul pas în acest proces a fost selectarea dimensiunii iPhone 6 care corespundea dimensiunilor interfeței Illustrator
Când interfața a fost deschisă, am selectat instrumentul Artboard și am apăsat o dată pe carton pentru a adăuga o altă placă grafică. Apoi le-am numit "Acasă" și "Locuri", am selectat fiecare placă de artă și am importat imaginea png din Illustrator în tabloul de bord.
Pentru a crea "hotspot-urile" pentru click-thru, am desenat un dreptunghi peste butonul Explorare de pe ecranul inițial și nu-i așez valorile de umplere și de margine la nici unul, deselectând acele proprietăți din panoul Proprietăți. Am făcut același lucru și cu butonul Înapoi pe pagina Locații.
Pentru a adăuga interactivitatea, am selectat modul Prototype și apoi am făcut clic pe "hotspot". Apoi, am tras săgeata - numit fir - în pagina Locații și am setat ținta de tranziție la Locații, mișcarea pentru Push Stânga, relaxarea pentru a ușura și durata trecerii la 0,6 secunde.
Am repetat acest pas cu hotspot-ul din pagina Locuri. Singura diferență a fost că tranziția a fost pusă pe Push Right. Când am făcut clic pe butonul Play, mi-am testat prototipul.
04 din 04
Cum să utilizați panoul pentru activele de export în Adobe Illustrator CC 2015
Împreună cu meniul Save for Screens, Adobe a adăugat, de asemenea, un nou panou - Export Asset - care a eliminat un punct de durere uriaș în fluxul de lucru UI Design.
Punctul de durere era icoane. Illustrator este o aplicație excelentă de desen vectorial, dar de ieșire, să zicem 10 pictograme, pe o pagină cu 40 sau 50 dintre ele necesare fiecare este salvat ca o imagine SVG. Acest lucru a necesitat în mod inevitabil mai mult timp decât de obicei datorită călătoriilor succesive pe panoul SVG. Acest punct de durere este acum un lucru din trecut.
Acest nou panou poate fi găsit la fereastra> Export de active. Când se deschide panoul, selectați materialul pe care doriți să-l convertiți în SVG sau într-un alt format și trageți în panou. Când eliberați mouse-ul, o miniatură a materialului este adăugată panoului. Denumiți activul. Continuați să trageți obiecte în panou până când nu ați terminat.
Selectați fiecare element din zona Setări export sau selectați-le pe toate ținând apăsată tasta Shift și făcând clic pe fiecare. Selectați formatul dvs. - în acest exemplu, am ales SVG - și faceți clic pe butonul Export. Elementele selectate vor fi trimise ca fișiere SVG în aceeași locație ca fișierul Illustrator.
În cazul în care întregul proces devine și mai curat, nu este necesar să utilizați panoul Export de active. Dacă faceți clic pe butonul Salvați pentru ecrane din partea de jos a panoului, se deschide caseta de dialog.
În schimb, puteți face clic pe fila Activități din panoul Salvare pentru ecrane pentru a accesa panoul Export de active. De exemplu, dacă aveți o pictogramă personalizată pe un tablou de arhitectură, puteți deschide panoul Export de active în caseta de dialog Salvează pentru ecran și trageți acel element în panoul Export de active.