Imagingul pentru mobil nu este întotdeauna ceea ce pare
Devine din ce în ce mai frecvent ca profesioniștii grafici să nu aibă doar munca lor să apară în imprimare, ci și pe web și pe dispozitive precum iPhones, iPads, dispozitive Android și tablete Android. La suprafață, acest lucru ar putea fi văzut ca un "lucru bun", pe măsură ce media pe care lucrarea noastră apare se extinde pe ecrane digitale. Dezavantajul este numărul mare de ecrane și numărul confuz de rezoluții ale ecranului. Nu este neobișnuit să auzi profesioniști experimentați care se întreabă ce sa întâmplat cu zilele în care o imagine TIFF de rezoluție de 300 dpi în formatul CMYK era normă. Oh, pentru zilele bune!
Acele zile s-au terminat. Acum trebuie sa ne confruntam cu faptul ca o imagine de 200 pana la 200 poate aparea bine pe un singur dispozitiv si inca apare dimensiunea trimestrului pe alta si marimea de trei sferturi pe alta. Totul vine cu adevărat la "Rezoluția Armei Race", fiind condusă de producătorii de dispozitive, în timp ce încearcă să blocheze mai mulți pixeli într-un ecran decât concurenții lor.
Acest lucru ne aduce la ceea ce vom numi "Rise of Suffixes". Sufixele sunt acele lucruri - @ 2x, @ 3x - legate de numele unei imagini. Ei, în mod esențial, de exemplu, au pus imaginea corectă în locul potrivit pe dispozitivul din dreapta. Apoi devine și mai bine.
Multe dintre lucrările noastre implică lucrul cu icoane și, odată cu apariția mișcării planului Flat, aceste lucruri sunt create în aplicații de desen vectorial, cum ar fi Illustrator și Schiță. Problema este că dispozitivele nu pot face fișiere .ai sau .eps. Acestea trebuie să fie convertite în Scalable Vector Graphics și, în funcție de aplicația folosită pentru a crea pictogramele, s-ar putea să nu fie chiar o opțiune SVG.
Apoi devine și mai bine.
Există o nouă clasă de aplicații software - Prototyping - care devin punctul de adunare înainte ca imaginile și icoanele dvs. să fie împinse pe dispozitive și au și ele particularitățile lor.
Acest tutorial se mută între Photoshop și Sketch pentru grafică și folosind Adobe Experience Design pentru a demonstra câteva puncte de durere între ideea dvs. și eventuala desfășurare. Să începem.
01 din 05
Cum să pregătiți imagini pentru dispozitive mobile în Adobe Photoshop
Primul pas în acest proces este cunoașterea dispozitivului sau a dispozitivelor țintă. În acest caz, veți viza iPhone 6 care are o suprafață de ecran de 375 pixeli lățime de 667 de pixeli înălțime. Designul solicită ca imaginea să fie lățimea ecranului.
Imaginea care a fost folosită a fost împușcată în interiorul Catedralei din Bern Bern din Bern, Elveția. Odată ce imaginea se deschide în Photoshop, selectați Imagine> Dimensiune imagine pentru a verifica dimensiunile imaginii și rezoluția acesteia. Evident, o imagine care este de 3156 x 2592 cu o rezoluție de 300 ppi și o dimensiune a fișierului de 23,4 Mb pur și simplu nu va funcționa.
În caseta de dialog Dimensiune imagine, reduceți Rezoluția la 100 ppi . Faceți acest lucru mai întâi deoarece dimensiunile imaginii se vor schimba și ele. Cu setarea Rezoluție, schimbați lățimea la 375 de pixeli. Dacă verificați datele Dimensiune imagine, veți observa că imaginea sa diminuat de la 23,4 Mb la un 338k mai prietenos pentru dispozitive mobile. Faceți clic pe OK pentru a accepta modificarea și a închide caseta de dialog Dimensiune imagine.
02 din 05
Cum se utilizează caseta de dialog "Export ca ..." în Adobe Photoshop
Odată ce imaginea este gata pentru export, selectați "Export> Export As ..." pentru a deschide caseta de dialog Export As.
Această casetă de dialog este o adăugare recentă pentru Photoshop și înlocuiește caseta de dialog "Salvați pentru Web" pe care o folosesc de ani de zile. Dacă aveți nevoie de ea în continuare, o puteți găsi în Export pop down. Acesta este, din motive evidente, cunoscut acum sub numele de "Export pentru Web (Legacy)". Dacă aceasta este prima dvs. vizită în această casetă de dialog, iată un scurt tur:
- Dimensiune: Această coloană stabilește dimensiunea de ieșire a imaginii. Aspectul interesant al acestei zone este că va mări imaginea, dar imaginea nu va apărea ca fiind "fuzzy" pe dispozitiv datorită numărului mare de pixeli de pe ecranul dispozitivului.
- 1X: Faceți clic pe țineți apăsat acest lucru și veți fi prezentat cu un număr de dimensiuni. Categoriile 1x, 2x și 3x sunt asociate în mod tradițional cu dispozitivele Hi Dpi de la Apple și împreună cu alte câteva vor pregăti imagini pentru dispozitive Android.
- Suffix: Această opțiune va afișa dimensiunea dvs., dar va fi afișată ca @ 2x sau dimensiunea este aleasă. Acest sufix va fi adăugat la numele imaginii.
- Semnul +: Faceți clic pe aceasta pentru a adăuga diferite dimensiuni pentru ieșire. În acest caz, faceți clic pe acesta de două ori și alegeți de 2 ori și de 3 ori de la pop. Aceasta va acoperi practic orice dispozitiv iOS.
- Coșul de gunoi: faceți clic pe acesta și alegerea este eliminată din gama.
- Setări fișier: Alegeți formatul - jpg, png, gif sau svg - cel mai potrivit pentru imagine. Dacă dimensiunea fișierului este o preocupare, puteți reduce și setările de calitate.
- Dimensiune imagine: puteți modifica dimensiunile fizice ale imaginii.
- Canvas Size: Puteți modifica dimensiunile fizice ale panoului de imagine.
- Metadate: puteți adăuga drepturile de autor și informațiile dvs. de contact la metadatele imaginii.
Când ați terminat, faceți clic pe butonul Exportă toate. Veți fi întrebat unde doriți să plasați imaginile. Un obicei bun pentru a dezvolta este să faceți clic pe butonul Folder nou și să creați un folder pentru a ține imaginile exportate. Când faceți clic pe Export, veți fi afișați imaginile din dosar.
03 din 05
Cum se pregătește imaginile pentru dispozitivele mobile în schița 3 de la codificarea boemă
Sketch 3, o aplicație numai de la Macintosh de la Boemian Coding, câștigă rapid proeminența printre designerii UX și UI datorită concentrării sale intense asupra designului de web și aplicații. De fapt, Photoshop, în multe privințe, se află în situația ciudată de a juca "prinde" cu Sketch.
Pentru a pregăti o imagine pentru mobil în Sketch, selectați imaginea de pe tabloul de bord și faceți clic pe butonul Efectuați exportabil în partea de jos a panoului Proprietăți . Aceasta va deschide caseta de dialog Export. Faceți clic pe semnul + pentru a adăuga versiunile 2x și 3x și, de asemenea, adăugați sufixele. Formatele disponibile sunt PNG, JPG, TIF, PDF, EPS și SVG. În acest caz, alegeți JPG. Faceți clic pe butonul Export și vizați sau creați un dosar pentru a ține diferitele imagini exportate.
04 din 05
De ce trebuie să creați trei (sau mai multe) versiuni ale imaginii
În multe privințe, piața mobilă este "vestul sălbatic" al rezoluțiilor și o dimensiune cu siguranță nu se potrivește tuturor. În exemplul de mai sus de la Adobe Experience Design, imaginea este plasată pe 2 placă de lucru iPhone 6 și pe o placă grafică pentru dispozitive Android. Observați că versiunea 1x din partea stângă pare a fi jumătate. Acesta este exact modul în care imaginea ar apărea pe un iPhone 6 cu ecranul retinei. Versiunea 2x se potrivește perfect și versiunea Android rulează pe ecran. Alegerea dvs. este fie să scalați imaginea, fie să exportați imaginea din Photoshop la o altă dimensiune.
05 din 05
Testați-vă devreme, testați-vă de multe ori, nu vă încredeți în nimic, nu vă încredeți pe nimeni și mai ales pe dvs. înșivă
Ceea ce trebuie să înțelegeți este că acesta este doar începutul procesului. Vizionarea lucrărilor pe cât mai multe dispozitive pe care le puteți face trebuie să fie privită ca o piesă vitală a fluxului de lucru. De asemenea, trebuie să știți că acest lucru este doar primul pas în procesul de creare a elementelor grafice pentru o aplicație web sau pentru proiecte web mobile.
Utilizarea aplicațiilor prototip este o modalitate excelentă de a descoperi punctele de durere, dar aceleași active vor trebui să fie livrate pentru utilizare de către dezvoltator. În multe cazuri, dimensiunile fizice ale bunurilor, inclusiv icoanele, vor fi uriașe din punct de vedere fizic și nu în formatul svg, ci în format png. La prima vedere, acest lucru poate părea un pic peste partea de sus, dar amintiți-vă de regula de aur a scalării imaginilor: este mai bine să scadă în jos decât să crească.
Linia de fund este să lucrați îndeaproape cu dezvoltatorul dvs. și să utilizați prototipul de software ca o modalitate de a arăta intenția de design. În cele din urmă, însă, aceleași bunuri vor trebui să fie gata pentru produsul final și dezvoltatorul dvs. are o manevră mai bună asupra a ceea ce are nevoie de el decât de tine.