Mobiilseadmete kuvamine ei ole alati see, mis tundub
Graafikaasjatundjate jaoks muutub üha tavalisemaks, et nende töö ilmub mitte ainult trükis, vaid ka veebis ja seadmetes, nagu iPhones, iPads, Android-seadmetes ja Android-tahvelarvutes. Pinnal võib seda vaadelda kui "headat", kuna meediumid, mida meie töö näib, laieneb digitaalsetele ekraanidele. Negatiivne külg on ekraanide arv ja ekraanide resolutsioonide segane arv. Ei ole haruldane kuulda maitsestatud plusse, et mõelda, mis juhtus nende päevadega, mil normiks oli 300 dpi TIFF- vormingus pilt CMYK- vormingus. Oh vanu häid päevi!
Need päevad on läbi. Nüüd peame võitlema asjaoluga, et 200 200-le pildil võib ühe seadme puhul olla hea, aga teise kvartali suurus on teise ja kolmekvartalise suurusega. See kõik tõepoolest seisneb selles, et seadmete tootjad viivad läbi "resolutsioonimarme rassi", kuna nad üritavad rohkem ekraanile rohkem hambaid kui konkurendid.
See toob meile selle, mida me nimetame "tõusudeks". Selle järelliited on need asjad - @ 2x, @ 3x - pildi nimega. Need sisuliselt annavad näiteks õige pildi õiges seadmes õiges kohas. Siis saab see veel paremaks.
Suur osa meie töö hõlmab ikoonidega töötamist ning Flat Designi liikumise tõusuga luuakse need asjad sellistes vektorgraafika rakendustes nagu Illustrator ja Sketch. Probleem on see, et seadmed lihtsalt ei saa muuta .ai või .eps faile. Neid tuleb muuta skaleeritavaks vektorgraafiks ja sõltuvalt ikoonide loomiseks kasutatavast rakendusest ei pruugi SVG-valik isegi olla.
Siis saab see veel paremaks.
Seal on uus tarkvaraprogramm - Prototyping-rakendused - need muutuvad kogunemispunktiks, enne kui teie pildid ja ikoonid seadmetele lastakse ja neil on ka oma eripära.
See juhendaja liigub graafika jaoks Photoshopi ja Sketchi vahel ning kasutab Adobe Experience Designi, et näidata mõningaid valimispunkte teie idee ja võimaliku kasutuse vahel. Alustame.
01, 05
Kuidas valmistada pilte mobiilseadmetesse Adobe Photoshopis
Selle protsessi esimene samm on teie sihtseadme või seadmete tundmine. Sellisel juhul suunate teid iPhone 6-le, mille ekraani pindala on 375 pikslit ja 667 pikslit. Disain nõuab, et pilt oleks ekraani laius.
Kasutatavat pilti tehti Berni Minsteri katedraalis Bernis, Šveitsis. Kui pilt avaneb Photoshopis, valige Image> Image Size, et vaadata pildi mõõtmeid ja selle eraldusvõimet. Ilmselt ei toimi pilt, mille pikkus on 3156 x 2592, resolutsiooniga 300 ppi ja faili suurus 23,4 Mb.
Dialoogiboksis Kujutise suurus sisestage lahutusvõime 100 ppi . Tehke seda esmalt, kuna ka pildimõõdud muutuvad. Lahenduse seadistusega muutke laius 375 pikslit. Kui kontrollite pildimõõdu andmeid, märkate, et pilt on vähenenud 23,4 MB-lt rohkem mobiilisõbralikule 338 kleebile. Klõpsake muudatuse heakskiitmiseks nuppu OK ja sulgege dialoogiboksi Kujutise suurus.
02 of 05
Kuidas kasutada Adobe Photoshopis dialoogiboksi "Eksport kui ..."
Kui pilt on ekspordiks valmis, valige dialoogiboksi Export As eksportimiseks avamiseks "Export> Export As ..." .
See dialoogikast on värske Photoshopi lisand ning asendab dialoogiboksi "Salvesta veebist", mida nad aastaid kasutasid. Kui teil seda ikkagi vajab, saate selle eksportida pop-alla. Ilmsel põhjusel on nüüd tuntud kui "Export for Web (Legacy)". Kui see on teie esimene külastus sellele dialoogile, on siin lühike ülevaade:
- Suurus: see veerg määrab pildi väljundsuuruse. Selle valdkonna huvitav aspekt on see, et see suurendab kujutist, kuid seadme ekraanil pole suurt arvu pikslit, sest see pilt ei ilmu seadmesse "fuzzy".
- 1X: klikkige sellel kinni ja teile esitatakse mitmes suuruses. 1x, 2x ja 3x kategooriad on traditsiooniliselt ühendatud Apple Hi Dpi seadmetega ja need koos mõne teisega valmistavad Androidi seadmetele pilte.
- Suffix: see valik näitab teie suurust, kuid see kuvatakse kui @ 2x või suuruse valimine. See järelliit lisatakse pildi nimele.
- + Märk: klõpsake seda, et lisada väljundiks erinevaid suurusi. Sellisel juhul klõpsake sellel kaks korda ja valite hüpikaknast 2x ja 3x. See hõlmab peaaegu kõiki iOS-i seadmeid.
- Prügikast: klõpsake seda ja valik eemaldatakse joonest.
- Faili sätted: valige vorming - jpg, png, gif või svg - kõige paremini pildile. Kui faili suurus on probleem, saate ka kvaliteedi seadeid vähendada.
- Pildi suurus: saate muuta pildi füüsilisi mõõtmeid.
- Lõuendi suurus: saate muuta pildi lõuendi füüsilisi mõõtmeid.
- Metaandmed: autoriõigusi ja kontaktandmeid saate lisada pildi metaandmetele.
Kui olete valmis, klõpsake nuppu Ekspordi kõik. Teilt küsitakse, kuhu soovite pilte paigutada. Hea harjumuse arendamine on klõpsata nupul Uus kaust ja luua eksporditud piltide hoidmiseks kaust. Kui klõpsate käsul Ekspordi, kuvatakse kaustas olevad pildid.
03 of 05
Kuidas valmistada pilte mobiilseadmetesse joonisel 3, Böömi kodeeringutest
Sketch 3, mis on ainult Macintoshi jaoks mõeldud rakendus Böömi kodeeringust, on UX ja UI disainerite hulgas üha enam esile tõstetud selle intensiivse keskendumise tõttu veebi- ja rakenduste kujundusele. Tegelikult on Photoshop paljudel juhtudel veider seisukohas, et ta peab Sketchiga "järele jõudma".
Pildi ettevalmistamiseks mobiilseadme jaoks sketchis valige joonis pilt ja klikkige Properties paneeli alaosas oleval nupul Make Eksportable . See avab ekspordi dialoogi. Klõpsake 2x ja 3x versiooni lisamiseks + märk, samuti lisage sufiksid. Saadaval on PNG, JPG, TIF, PDF, EPS ja SVG. Sel juhul vali JPG. Klõpsake nuppu Ekspordi ja sihi või looge kausta erinevate eksporditud kujutiste hoidmiseks.
04 05
Miks peate looma kolm (või rohkem) pildi versiooni
Paljudes aspektides on mobiilside turg resolutsioonide "Wild West" ja üks suurus kindlasti ei sobi kõigile. Adobe Experience Designi ülaltoodud näites on pilt paigutatud 2 iPhone 6 tööplokki ja Android-seadme töölauale. Pange tähele, et vasakpoolne 1x versioon näib olevat poole suurus. See on täpselt see, kuidas kujutis ilmub iPhone 6 võrgusilma ekraanile. 2x versioon sobib suurepäraselt ja Android-versioon jookseb ekraanilt välja. Teie valik on kas kujutise skaala suurendamine või foto väljaandmine erinevast suurusest Photoshopist.
05 05
Varasem test, tihti proovige, ärge usaldage midagi, ärge usaldage ühtki ja ennekõike ennast
Mida peate mõistma, see on lihtsalt protsessi algus. Töötamise vaatamine võimalikult paljude seadmetega peab olema töövoo oluline osa. Samuti peate teadma, et see on vaid esimene samm rakenduse või mobiili veebiprojektide graafika varade loomise protsessis.
Prototüüpide rakenduste kasutamine on suurepärane võimalus valu punktide avastamiseks, kuid need varad peavad väljastama arendaja kasutamiseks. Paljudel juhtudel on varade füüsilised mõõtmed, sealhulgas ikoonid, füüsiliselt suured, mitte vormingus svg, vaid png. Esmapilgul võib see tunduda olevat natuke ülemise peal, kuid mäletan kuldset reeglit piltide skaleerimisel: parem on langus kui suurendamine.
Alumine rida on teie arendajaga tihedas koostöös ja prototüüpide tarkvara kasutamine disaini kavatsuse näitamiseks. Lõppkokkuvõttes peavad need samad varad lõpptoote jaoks valmis olema ja teie arendaja saab paremini käsitseda selle, mida ta vajab kui teie.