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 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 05Kako 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.
Unutar dijaloškog okvira Veličina slike, smanjiti 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 da biste prihvatili promjenu i zatvorili dijaloški okvir Veličina slike.
Nastavite čitati ispod
02 od 05Kako koristiti okvir za dijalog "Izvoz kao …" u Adobe Photoshopu
Kada je slika spremna za izvoz, odaberite "Export> Export As …" za otvaranje dijaloškog okvira Izvoz kao.
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 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.
- Znak +: Kliknite ovo da biste dodali različite veličine 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.
- Otpad može: Kliknite ovu opciju i izbor se uklanja s postave.
- Postavke datoteke: Odaberite format - jpg, png, gif ili svg - koji najbolje odgovara 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 slike platnu.
- Metapodaci: Možete dodati autorska prava i podatke o kontaktima 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.
Nastavite čitati ispod
03 od 05Kako 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 prijavu 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 05Zaš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.
Nastavite čitati ispod
05 od 05Test 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.
