Imaging za mobilne uređaje nije uvek ono što izgleda
Sve je to uobičajeno za grafičke profesionalce da ne samo da se njihov rad pojavljuje u štampi već i na webu i uređajima kao što su iPhones, iPads, Android uređaji i Android tablete. Na površini, ovo se može smatrati "dobra stvar", jer se mediji naš rad pojavljuje na proširenju na digitalne ekrane. Nedostatak je veliki broj ekrana i zbunjujući broj rezolucija ekrana. Nije neuobičajeno čuti začinjenog profesionalca koji se pitaju šta se desilo sa danima kada je TIFF rezolucija u rezoluciji 300 dpi u formatu CMYK bila norma. Za dobar dan!
Ti dani su gotovi. Sada moramo da se sukobimo sa činjenicom da se na jednom uređaju može prikazati slika od 200 do 200, a još se pojavljuje veličina četvrtine na drugoj i tri četvrtine veličine na još jednom. Sve se zapravo svodi na "Race Race Race" koju vode proizvođači uređaja jer pokušavaju da zaglave više piksela na ekran od svojih konkurenata.
Ovo nas dovodi do onoga što ćemo nazvati "Uspon Sušaka". Sufikse su one stvari - @ 2x, @ 3x - podignute na ime slike. U suštini, na primer, stavite pravu sliku na pravo mesto na pravom uređaju. Onda postaje još bolji.
Veliki deo našeg rada podrazumeva rad sa ikonama, a uz porast pokreta Dizajn ravnog stakla, ove stvari se stvaraju u takvim aplikacijama za vektore kao što su Illustrator i Sketch. Problem je što uređaji jednostavno ne mogu da rade .ai ili .eps datoteke. Oni moraju biti konvertovani u Scalable Vector Graphics i, u zavisnosti od aplikacije koja se koristi za kreiranje ikona, možda čak i nije SVG opcija.
Onda postaje još bolji.
Postoji nova klasa aplikacija za prototipovanje - koja postaje skupna tačka pre nego što se vaše slike i ikone pokrenu na uređaje i imaju svoje specifičnosti.
Ovaj tutorial se kreće između Photoshopa i Sketch-a za grafiku i korišćenjem Adobe Experience Design-a da demonstrira nekoliko točaka bolova između vaše ideje i eventualnog primene. Hajde da počnemo.
01 od 05
Kako pripremiti slike za mobilne uređaje u Adobe Photoshopu
Prvi korak u ovom procesu je poznavanje vašeg ciljnog uređaja ili uređaja. U ovom slučaju, ciljali ćete na iPhone 6 koji ima površinu zaslona od 375 piksela i visinu od 667 piksela. Dizajn poziva da slika bude širina ekrana.
Slika koja se koristi je snimljena u Bernskoj katedrali u Bernu, Švajcarska. Kada se slika otvori u Photoshop-u, izaberite Image> Image Size (Veličina slike) da biste proverili dimenzije slike i njenu rezoluciju. Očigledno je da slika koja je 3156 x 2592 sa Rezolucijom od 300 ppi i veličinom datoteke od 23.4 Mb jednostavno neće raditi.
U dijalogu Image Size, smanjite rezoluciju na 100 ppi . Uradite to prvo jer se dimenzije slike takođe menjaju. Sa postavljenom rezolucijom, promenite širinu na 375 piksela. Ako proverite podatke o Image Size-u, primetićete da se slika smanjila sa 23.4 Mb na mobilniju 338k. Kliknite OK da biste prihvatili promenu i zatvorite dijalog za veličinu slike.
02 od 05
Kako koristiti "Dijalog u izvozu ..." u Adobe Photoshopu
Kada je slika spremna za izvoz, izaberite "Izvoz> Izvozi kao ..." da biste otvorili dijalog Izvoz kao.
Ovaj dijalog box je nedavni dodatak Photoshopu i zamenjuje dijalog "Sačuvaj za veb" koji su koristili godinama. Ako vam je i dalje potreban, možete ga naći u padajućem izvozu. Iz očiglednih razloga, sada poznat kao "Izvoz za Web (Legacy)". Ako je ovo vaša prva poseta ovoj dijalog box-u, evo kratke turneje:
- Veličina: Ova kolona postavlja veličinu izlaza slike. Zanimljiv aspekt ovog područja je da će proširiti sliku, ali slika neće biti "fuzzy" na uređaju zbog ogromnog broja piksela na ekranu uređaja.
- 1X: kliknite na držite ovo i bićete prikazani sa velikim brojem veličina. Kategorije 1x, 2x i 3x tradicionalno su povezane sa uređajima Hi Dpi iz Apple-a i zajedno sa nekoliko drugih će pripremiti slike za Android uređaje.
- Suffix: Ovaj izbor će vam pokazati veličinu, ali će se prikazati kao @ 2x ili će se izabrati veličina. Ovaj sufiks će biti dodan u ime slike.
- Znak +: Kliknite na ovo da biste dodali različite veličine za izlaz. U tom slučaju dvaput kliknite na njega i izaberite opciju 2x i 3x. Ovo će praktično pokriti bilo koji iOS uređaj.
- Kanta za otpatke: kliknite na ovo i izbor se uklanja iz linije.
- Podešavanja datoteke: Izaberite format - jpg, png, gif ili svg - najbolje prilagođen za sliku. Ako je veličina datoteke zabrinjavajuća, takođe možete smanjiti postavke kvaliteta.
- Veličina slike: možete promeniti fizičke dimenzije slike.
- Canvas Size: Možete promeniti fizičke dimenzije platna slike.
- Metapodaci: Možete dodati autorsko pravo i svoje podatke za kontakt metapodatama slike.
Kada završite, kliknite na dugme Izvezi sve. Biće vam upitano gde želite da postavite slike. Dobra navika za razvoj je da kliknete na dugme Nova mapa i kreirate fasciklu za držanje izvezenih slika. Kada kliknete na Izvoz, biće vam prikazane slike u fascikli.
03 od 05
Kako pripremiti slike za mobilne uređaje u skici 3 iz Bohemijskog kodiranja
Sketch 3, aplikacija samo iz Macintosh-a iz Bohemian Coding, brzo se povećava među UX i UI dizajnerima zbog intenzivnog fokusiranja na web i dizajn aplikacija. U stvari, Photoshop je na mnogo načina u čudnom položaju da mora igrati "dohvatiti" sa Sketch-om.
Da biste pripremili sliku za mobilne uređaje u Sketch-u, izaberite sliku na artboardu i kliknite na dugme Make Exportable na dnu panela Properties . Ovo će otvoriti dijalog za izvoz. Kliknite znak + da biste dodali verzije 2x i 3x, a takođe dodajte sufikse. Dostupni formati su PNG, JPG, TIF, PDF, EPS i SVG. U tom slučaju izaberite JPG. Kliknite na dugme Izvezi i ciljajte ili kreirajte fasciklu da biste držali različite slike izvezene.
04 od 05
Zašto morate kreirati tri (ili više) verzija slike
U mnogim aspektima, tržište mobilnih uređaja je "divlji zapad" rezolucija i jedna dimenzija definitivno ne odgovara svima. U prethodnom primeru iz Adobe Experience Design-a, slika se postavlja na 2 iPhone 6 ploče i Android artboardboard. Obratite pažnju na to da je 1x verzija na levoj strani pola veličine. Ovo je upravo kako će se slika pojaviti na iPhone-u 6 sa svojim mrežnim ekranom. Verzija 2x se savršeno uklapa i Android verzija se isključuje na ekranu. Vaš izbor je da ili skalirate sliku ili da izvezete sliku iz Photoshopa u drugoj veličini.
05 od 05
Test rano, testiranje često, poverenje ništa, poverenje niko i posebno sebi
Ono što treba da razumete je da je ovo samo početak procesa. Pregled radova na što većem broju uređaja mora se smatrati vitalnim delom toka posla. Takođe morate biti svjesni da je ovo samo prvi korak u procesu kreiranja grafičkih sredstava za aplikaciju ili mobilne web projekte.
Korišćenje aplikacija za prototipovanje je odličan način otkrivanja bolnih bodova, ali ova iste imovine će morati da izađu za korišćenje od strane programera. U mnogim slučajevima, fizičke dimenzije sredstava, uključujući ikone, biti će fizički ogromne, a ne u svg ali png formatu. Na prvi pogled, ovo može izgledati malo iznad vrha, ali zapamtite zlatno pravilo za skaliranje slika: bolje je skalirati nego što je skala.
Donja linija je da blisko sarađujete sa svojim programerima i da koristite prototipski softver kao način prikazivanja namjere za dizajn. Ipak, na kraju, ta iste imovine moraju biti spremne za konačni proizvod i vaš razvitnik ima bolju rukovanje s onim što mu je potrebno od vas.