Slike za mobilne uređaje nisu uvijek ono što se čini
Sve je više uobičajeno za grafičke profesionalce ne samo da se njihovi radovi pojavljuju u tisku već i na webu i uređajima kao što su iPhone, iPads, Android uređaji i Android tablete. Na površini se to može smatrati "dobrom" kao što se mediji pojavljuju na našem radu na digitalnim zaslonima. Nedostatak je običan broj zaslona i zbunjujući broj razlučivosti zaslona. Nije neuobičajeno čuti iskusne profesionalce koji se pitaju što se dogodilo danima kada je TIFF slika razlučivosti 300 dpi u CMYK formatu bila norma. Oh, za dobre stare dane!
Ti dani su gotovi. Sada se moramo boriti s činjenicom da se 200 do 200 slika može prikazati na jednom uređaju, a ipak se pojavljuje kvartalna veličina na drugoj i tri četvrtine. Sve se stvarno svodi na "Resolutu ruku utrke" koje vode proizvođači uređaja jer pokušavaju zastoj više piksela na zaslonu od svojih konkurenata.
To nas dovodi do onoga što ćemo nazvati "Uspon sufiksa". Sufikoti su one - @ 2x, 3x - pričvršćene na ime slike. Oni u suštini, primjerice, postavljaju ispravnu sliku na pravo mjesto na desnoj strani uređaja. Onda dobiva još bolje.
Puno našeg rada uključuje rad s ikonom i, uz uspon dizajna ravnog dizajna, te se stvari stvaraju u takvim aplikacijama za crtanje vektora kao Illustrator i Sketch. Problem je što uređaji jednostavno ne mogu pružiti .ai ili .eps datoteke. Moraju se pretvoriti u Skalabilnu Vector Graphics i, ovisno o aplikaciji koja se koristi za stvaranje ikona, možda čak i ne postoji SVG opcija.
Onda dobiva još bolje.
Postoji nova klasa softvera - aplikacije za prototipove - koje postaju sastavni dio mjesta prije nego što se slike i ikone pokažu na uređaje i imaju svoje osobitosti.
Ovaj se vodič kreće između Photoshop i Sketch za grafiku i upotrebljava Adobe Experience Design da pokaže nekoliko boli između vaše ideje i eventualne implementacije. Započnimo.
01 od 05
Kako pripremiti slike za mobilne uređaje u Adobe Photoshopu
Prvi korak u ovom postupku je poznavanje vašeg ciljanog uređaja ili uređaja. U tom ćete slučaju ciljati iPhone 6 koji ima površinu zaslona od 375 piksela širine za 667 piksela. Dizajn poziva sliku da bude širina zaslona.
Slika koja će se upotrijebiti snimljena je unutar katedrale Bernske ministre u Bernu, Švicarska. Kada se slika otvori u Photoshopu, odaberite Image> Image Size da biste provjerili dimenzije slike i njegovu razlučivost. Očito, slika koja je 3156 x 2592 s razlučivosti od 300 ppi i veličina datoteke od 23,4 MB jednostavno neće funkcionirati.
U dijaloškom okviru Veličina slike smanjite Rezoluciju na 100 ppi . Učinite to prvo jer će i dimenzije slike promijeniti. S postavkom Rezolucija, promijenite širinu na 375 piksela. Ako provjerite podatke veličine slike primijetit ćete da je slika smanjena s 23,4 Mb na 338k više mobilnih uređaja. Kliknite U redu za prihvaćanje promjene i zatvaranje dijaloškog okvira Veličina slike.
02 od 05
Kako koristiti okvir za dijalog "Izvoz kao ..." u Adobe Photoshopu
Kad je slika spremna za izvoz, odaberite "Export> Export As ..." kako biste otvorili dijaloški okvir Export As.
Ovaj okvir za dijalog nedavno je dodan Photoshopu i zamjenjuje dijaloški okvir "Spremi za web" koji su godinama upotrebljavali. Ako vam je još uvijek potrebna, možete je pronaći na padajućem popisu Izvoz. To je, iz očitih razloga, sada poznat kao "Izvoz za web (legacy)". Ako je ovo vaš prvi posjet ovom dijaloškom okviru, evo kratke turneje:
- Veličina: Ovaj stupac određuje veličinu slike. Zanimljiv aspekt ovog područja je da će povećati sliku, ali slika neće biti "nejasna" na uređaju zbog velikog broja piksela na zaslonu uređaja.
- 1X: Kliknite na držite ovu tipku, a vi ćete biti predstavljeni u brojnim veličinama. Kategorije 1x, 2x i 3x tradicionalno su povezane s uređajima Hi Dpi uređaja iz Applea, a zajedno s još nekolicinom drugih će pripremiti slike za Android uređaje.
- Sufiks: ovaj izbor će pokazati vašu veličinu, ali će biti prikazan kao @ 2x ili je odabrana veličina. Ovaj sufiks bit će dodan u ime slike.
- Oznaka +: kliknite za dodavanje raznih veličina za izlaz. U tom slučaju kliknite dvaput i odaberite 2x i 3x od skočnog prozora. To će pokriti gotovo bilo koji iOS uređaj.
- Otpadna košara: kliknite ovu opciju i izbor se uklanja s postave.
- Postavke datoteke: odaberite format - jpg, png, gif ili svg - najbolje prilagođenu slici. Ako je veličina datoteke briga, također možete smanjiti postavke kvalitete.
- Veličina slike: možete promijeniti fizičke dimenzije slike.
- Veličina platna: Možete promijeniti fizičke dimenzije platna.
- Metapodaci: možete dodati autorska prava i svoje podatke za kontakt u metapodatke slike.
Kada završite, kliknite gumb Izvoziti sve. Od vas će se pitati gdje želite postaviti slike. Dobra navika za razvoj jest kliknuti gumb Nova mapa i stvoriti mapu za držanje izvezenih slika. Kada kliknete Export (Izvoz), bit će prikazane slike u mapi.
03 od 05
Kako pripremiti slike za mobilne uređaje u crtežu 3 od boemskog kodiranja
Sketch 3, aplikacija samo za Macintosh iz boemskog kodiranja, ubrzano stječe značajno mjesto među dizajnerima UX i UI jer se intenzivno usredotočuje na dizajn weba i aplikacija. Naime, Photoshop je, na mnoge načine, u neobičnom položaju da mora igrati "nadoknaditi" s Sketchom.
Da biste pripremili sliku za mobilni uređaj u Skici, odaberite sliku na ploči s pločom i kliknite gumb Izvrši prijave na dnu ploče Svojstva . Otvorit će se dijaloški okvir Izvoz. Kliknite znak + da biste dodali verzije 2x i 3x te dodali sufikse. Dostupni formati su PNG, JPG, TIF, PDF, EPS i SVG. U tom slučaju odaberite JPG. Kliknite gumb Izvoz i ciljajte ili izradite mapu za držanje različitih izvoznih slika.
04 od 05
Zašto trebate stvoriti tri (ili više) verzija slike
U mnogim aspektima, mobilno tržište je "Divlji zapad" rezolucija, a jedna veličina definitivno ne odgovara svima. U gore navedenom primjeru iz programa Adobe Experience Design slika se stavlja na 2 ploče s pločicama za iPhone 6 i ploču s instrumentima Android uređaja. Primijetite kako izgleda da lijeva verzija s lijeve strane ima pola veličine. To je točno kako bi se slika pojavila na iPhoneu 6 s retinom. 2x verzija savršeno se uklapa i verzija Androide pokreće se sa zaslona. Vaš je izbor da ili izmjerite sliku ili izvezete sliku iz Photoshopa u drugoj veličini.
05 od 05
Test rano, Test često, Povjerenje ništa, povjerenje nitko, a osobito sebi
Ono što trebate shvatiti je da je ovo samo početak procesa. Gledanje vašeg rada na onoliko uređaja koliko možete može se smatrati vitalnim dijelom tijeka rada. Morate biti svjesni da je to samo prvi korak u procesu stvaranja grafičkih elemenata za aplikacije ili mobilne web projekte.
Korištenje aplikacija za prototipove izvrstan je način otkrića točaka boli, ali ove iste imovine trebaju biti izlazne za upotrebu od strane razvojnog programera. U mnogim slučajevima, fizičke dimenzije imovine, uključujući ikone, bit će fizički ogromne, a ne u svg, ali png formatu. Na prvi pogled, čini se da je to malo iznad vrha, no zapamtite zlatno pravilo o skaliranju slika: bolje je smanjiti se nego povećati.
Dno crta je usko surađivati s vašim razvojnim programerom i koristiti prototyping softver kao način prikazivanja vaše namjere dizajna. Na kraju, međutim, te iste imovine moraju biti spremne za konačni proizvod, a vaš razvojni programer ima bolju podršku za ono što on ili ona treba od vas.