Slikanje za mobilne naprave ni vedno tisto, kar se zdi
Za grafične profesionalce postaja vse pogostejše, da ne samo, da se njihovo delo prikaže v tiskani obliki, ampak tudi na spletu ter napravah, kot so iPhones, iPads, naprave Android in tablični računalniki Android. Na površini bi to lahko razumeli kot "dobro", saj se mediji, ki jih naše delo prikaže na razširitvah na digitalne zaslone. Slaba stran je čisto število zaslonov in zmedeno število ločljivosti zaslona. Nič nenavadnega je, če slišimo, da so začinjeni profesionalci spraševali, karkoli se je zgodilo v dneh, ko je bila slika TIFF ločljivosti 300 dpi v obliki CMYK norma. Oh za dobre stare dni!
Ti dnevi so konec. Zdaj se moramo sprijazniti z dejstvom, da se lahko slika 200 do 200 na eni napravi lepo pojavi in se na drugi strani prikažejo velikost četrtine na drugi in tri četrtine velikosti. V resnici gre za "Race Race Race", ki ga vodijo proizvajalci naprav, saj poskušajo v več zaslonih zagnati več pik kot njihovi konkurenti.
To nas pripelje do tega, kar bomo imenovali "Vzpon Suffixov". Pripomočki so tiste stvari - @ 2x, @ 3x - pritrjene na ime slike. V bistvu so na primer postavili pravo sliko na pravo mesto na desni napravi. Potem postane še boljše.
Veliko dela vključuje delo z ikonami in z vzponom gibanja ploskega oblikovanja se te stvari ustvarjajo v takih aplikacijah vektorskih risb kot Illustrator and Sketch. Težava je, da naprave enostavno ne morejo narediti .ai ali .eps datotek. Potrebno jih je pretvoriti v Scalable Vector Graphics in, odvisno od aplikacije, uporabljene za ustvarjanje ikon, morda sploh ne obstaja možnost SVG.
Potem postane še boljše.
Obstaja nov razred aplikacij za izdelavo prototipov - ki postajajo zbirno točko, preden so slike in ikone potisnjene na naprave in imajo tudi svoje posebnosti.
Ta vadnica se premika med Photoshop in Sketch za grafiko in z uporabo programa Adobe Experience Design prikazuje nekaj točk bolečine med vašo idejo in morebitno razporeditvijo. Začnimo.
01 od 05
Kako pripraviti slike za mobilne naprave v programu Adobe Photoshop
Prvi korak v tem procesu je poznavanje vaše ciljne naprave ali naprav. V tem primeru boste ciljali na iPhone 6, ki ima širok obseg zaslona 375 slikovnih pik in 667 slikovnih pik. Oblika zahteva, da je slika širina zaslona.
Podoba, ki jo je treba uporabiti, je bila posneta v Bernski kabineti v Bernu v Švici. Ko se sliko odpre v Photoshopu, izberite Image> Image Size, da preverite dimenzije slike in njegovo ločljivost. Očitno je, da slika, ki je 3156 x 2592 z ločljivostjo 300 ppi in velikostjo datoteke 23,4 Mb preprosto ne bo delovala.
V pogovornem oknu Velikost slike zmanjšajte resolucijo na 100 ppi . Najprej naredite to, ker se bodo spremenile tudi dimenzije slike. Z nastavljeno ločljivostjo spremenite širino na 375 pikslov. Če preverite podatke o velikosti Image, boste opazili, da se je slika zmanjšala s 23,4 Mb na bolj mobilno 338k. Kliknite »V redu«, da sprejmete spremembo in zaprete pogovorno okno Image Size.
02 od 05
Kako uporabljati dialog »Izvozi kot ...« v programu Adobe Photoshop
Ko je slika pripravljena za izvoz, izberite "Izvoz> Izvozi kot ...", da odprete pogovorno okno Export As.
Ta dialog za dialog je nedavno dodan Photoshopu in nadomešča pogovorno okno "Shrani za splet", ki so ga uporabljali že več let. Če jo še vedno potrebujete, jo lahko najdete v padajočem izvozu. Iz očitnih razlogov je zdaj znan kot "Izvoz za splet (zapuščina)". Če je to vaš prvi obisk v to pogovorno okno, tu je kratka turneja:
- Velikost: ta stolpec nastavi velikost izhoda slike. Zanimiv vidik tega področja je, da bo povečal sliko, vendar slika ne bo prikazana kot "nejasna" na napravi zaradi velikega števila pik na zaslonu naprave.
- 1X: Kliknite na držanje in vam bo predstavljen s številnimi velikostmi. Kategorije 1x, 2x in 3x so tradicionalno povezane z napravami Hi Dpi Apple, ki skupaj z nekaterimi drugimi pripravijo slike za naprave Android.
- Suffix: Ta izbira bo prikazala vašo velikost, vendar bo prikazana kot @ 2x ali pa izbrana velikost. Ta pripono bo dodana imenu slike.
- Znak +: kliknite to, da dodate različne velikosti za izhod. V tem primeru dvakrat kliknite in izberejo 2x in 3x iz padajočega navzdol. To bo pokrivalo praktično vsako napravo iOS.
- Smetnjak: Kliknite to in izbira je odstranjena iz postavke.
- File Settings: Izberite format - jpg, png, gif ali svg - najbolj primeren za sliko. Če je velikost datoteke skrb, lahko zmanjšate tudi nastavitve kakovosti.
- Velikost slike: lahko spremenite fizične dimenzije slike.
- Canvas Size: spremenite lahko fizične dimenzije platna slike.
- Metapodatki: metapodatke slike lahko dodate avtorske pravice in podatke za stik.
Ko končate, kliknite gumb Izvozi vse. Vas bo vprašal, kam želite posneti slike. Dobra navada je, da kliknete gumb Nova mapa in ustvarite mapo za shranjevanje izvoženih slik. Ko kliknete Izvoz, vam bodo prikazane slike v mapi.
03 od 05
Kako pripraviti slike za mobilne naprave v skici 3 iz Bohemian Coding
Skica 3, aplikacija samo za Macintosh iz Bohemian Coding, se hitro povečuje med UX in UI oblikovalci zaradi intenzivnega osredotočanja na splet in oblikovanje aplikacij. Pravzaprav je Photoshop v mnogih pogledih v čudnem položaju, da je moral igrati "dohit" s Sketchom.
Če želite v Sketchu pripraviti sliko za mobilno, izberite sliko na tabli in kliknite gumb Izvozi na dnu strani Lastnosti . To bo odprlo pogovorno okno Izvoz. Kliknite znak +, če želite dodati različice 2x in 3x ter dodati tudi pripone. Na voljo so PNG, JPG, TIF, PDF, EPS in SVG. V tem primeru izberite JPG. Kliknite gumb Izvozi in ciljajte ali ustvarite mapo za shranjevanje različnih izvoženih slik.
04 od 05
Zakaj morate ustvariti tri (ali več) različic slike
V mnogih pogledih je mobilni trg "Wild West" resolucij in ena velikost vsekakor ne ustreza vsem. V zgornjem primeru iz programa Adobe Experience Design se slika namesti na dve plošči za iPhone 6 in napravo za Android naprave. Upoštevajte, da je verzija 1x na levi polovico. To je točno, kako se bo slika pojavila na iPhone 6 z mrežnim zaslonom. Različica za 2x se popolnoma prilega in različica za Android teče na zaslonu. Vaša izbira je, da bodisi merite sliko ali izvozite sliko iz Photoshopa v drugačni velikosti.
05 od 05
Test Early, Test Često, Trust Nič, Trust Nobeden in še posebej sami
Kaj morate razumeti je to samo začetek procesa. Ogledovanje vašega dela na čim več napravah je treba šteti kot bistven del delovnega toka. Prav tako se morate zavedati, da je to le prvi korak pri ustvarjanju grafičnih sredstev za aplikacijo ali mobilne spletne projekte.
Uporaba aplikacij za izdelavo prototipov je odličen način odkrivanja točk za bolečino, vendar bo treba ta ista sredstva izdati za uporabo razvijalca. V mnogih primerih bodo fizične razsežnosti sredstev, vključno z ikonami, fizično velike in ne v obliki svg, ampak png. Na prvi pogled se zdi, da je to malo na vrhu, vendar si zapomni zlato pravilo za skaliranje slik: bolje je, da se zmanjša od obsega.
Bottom linijo je tesno sodelovati z razvijalcem in uporabljati prototipno programsko opremo kot način prikaza vašega načrta. Čeprav bo sčasoma ta ista sredstva morala biti pripravljena za končni izdelek in vaš razvijalec bolje upravlja s tem, kar potrebuje od vas.