Undirbúningur fyrir farsíma fyrir farsíma

Hugsanlegur fyrir farsíma er ekki alltaf það sem það virðist

Það er að verða sífellt algengara að grafíkfræðingar séu ekki aðeins að vinna verk sín á prenti heldur einnig á vefnum og tækjum eins og iPhone, iPads, Android tæki og Android töflur. Á yfirborðinu má líta á þetta sem "gott" þar sem fjölmiðlar verkið okkar birtast á víddum til stafrænna skjáa. The hæðir eru hreinn fjöldi skjár og ruglingslegt fjöldi skjáupplausna. Það er ekki óalgengt að heyra vanur kostir furða hvað gerðist við dagana þegar 300 dpi upplausn TIFF mynd í CMYK sniði var norm. Ó fyrir góða gömlu dagana!

Þessir dagar eru liðnir. Við verðum nú að berjast við þá staðreynd að 200 með 200 mynd gæti virst fínt á einu tæki og ennþá virðist fjórðungsstærð á annarri og þremur fjórðungsstærð á öðru. Allt kemur í raun niður á "upplausnarvopnarsamkeppnina" sem tækjafyrirtæki framleiða sem þeir reyna að sultu fleiri punkta í skjá en keppinautar þeirra.

Þetta leiðir okkur til þess sem við munum kalla "The Rise Of The Suffixes". Viðskeyti eru þessi atriði - @ 2x, @ 3x - fest á nafn myndarinnar. Þeir setja í raun til dæmis rétt mynd á réttum stað á hægri tækinu. Þá verður það enn betra.

Mikið af starfi okkar felst í því að vinna með tákn og með hækkun hönnunar hreyfingarinnar eru þessi hlutir búnar til í slíkum vektorritunarforritum sem Illustrator og Sketch. Vandamálið er tæki sem einfaldlega geta ekki gert .ai eða .eps skrár. Þeir þurfa að breyta í Scalable Vector Graphics og, eftir því hvaða forriti er notað til að búa til táknin, gæti það ekki einu sinni verið SVG valkostur.

Þá verður það enn betra.

Það er nýr flokkur hugbúnaðar - Prototyping forrit - sem eru að verða samsetningarpunktur áður en myndirnar þínar og táknin eru rekin út í tæki og þau hafa einnig sérkenni þeirra.

Þessi einkatími færist á milli Photoshop og Sketch fyrir grafíkina og með því að nota Adobe Experience Design til að sýna fram á nokkrar af verkjaliðum milli hugmyndarinnar og hugsanlega dreifingar. Byrjum.

01 af 05

Hvernig á að undirbúa myndir fyrir farsíma í Adobe Photoshop

Breyttu upplausninni áður en þú breytir málunum þegar þú notar valmyndina Myndastærð. Courtesy Tom Green

Fyrsta skrefið í þessu ferli er að vita markmiðið þitt eða tæki. Í þessu tilfelli verður þú að miða á iPhone 6 sem hefur skjáborðsvæði sem er 375 punktar á breidd með 667 punktum á hæð. Hönnunin kallar á að myndin sé breidd skjásins.

Myndin sem notuð var var skotin inn í Bern Minster Cathedral í Bern, Sviss. Þegar myndin opnast í Photoshop skaltu velja Mynd> Myndastærð til að kanna mál myndarinnar og upplausn þess. Augljóslega, mynd sem er 3156 x 2592 með upplausn 300 ppi og skráarstærð 23,4 Mb einfaldlega virkar ekki.

Inni í Stærð gluggans skaltu minnka ályktunina að 100 ppi . Gerðu þetta fyrst vegna þess að myndastærðin mun einnig breytast. Með upplausninni, breyttu breiddinni að 375 punkta. Ef þú velur myndastærðargögnin sem þú munt taka eftir að myndin hefur minnkað úr 23,4 Mb í 338k farsímahanda. Smelltu á Í lagi til að samþykkja breytinguna og lokaðu gluggann Stærð myndar.

02 af 05

Hvernig á að nota "Export As ..." Dialogue Box í Adobe Photoshop

Nýja Export As valmyndin kemur í stað Vista fyrir vefinn í Photoshop. Courtesy Tom Green

Þegar myndin er tilbúin til útflutnings skaltu velja "Flytja út> Flytja út sem ..." til að opna útflutningsskjáinn.

Þessi samtalareitur er nýleg viðbót við Photoshop og kemur í stað "Save For Web" umræðurnar sem þeir notuðu í mörg ár. Ef þú þarft það ennþá, geturðu fundið það í útflutningsskjóta niður. Það er af augljósum ástæðum, nú þekkt sem "Export For Web (Legacy)". Ef þetta er fyrsta heimsókn þín í þessum glugga, þá er stutt skoðun:

Þegar þú hefur lokið skaltu smella á Export All-hnappinn. Þú verður spurð hvar þú vilt setja myndirnar. Góð venja að þróa er að smella á New Folder hnappinn og búa til möppu til að halda útfluttum myndum. Þegar þú smellir á Export, verður þú að sjá myndirnar í möppunni.

03 af 05

Hvernig á að undirbúa myndir fyrir farsíma í skissu 3 frá Bohemian erfðaskrá

Photoshop er í skrýtinni stöðu að spila & # 34; ná í & # 34; með skissu þegar kemur að því að hanna fyrir farsíma. Courtesy Tom Green

Skýring 3, Macintosh-eini forritið frá Bohemian Coding, er ört vaxandi áberandi meðal UX og UI hönnuða vegna mikils áherslu á vef- og apphönnun. Í raun er Photoshop á margan hátt í skrýtinni stöðu að þurfa að spila "ná í" með Sketch.

Til að búa til mynd fyrir farsíma í skissu skaltu velja myndina á myndplötunni og smelltu á hnappinn Gerðu útflutnings neðst á Eiginleikaskjánum . Þetta mun opna útflutningsskjáinn. Smelltu á + táknið til að bæta við 2x og 3x útgáfum og einnig bæta við viðskeyti. Sniðin eru PNG, JPG, TIF, PDF, EPS og SVG. Í þessu tilfelli skaltu velja JPG. Smelltu á Export hnappinn og miðaðu á eða búðu til möppu til að halda hinum ýmsu myndum sem eru fluttar út.

04 af 05

Afhverju þarftu að búa til þrjár (eða fleiri) útgáfur af myndinni

Þegar allt annað mistekst, notaðu útgáfuna af myndinni með & xx; 2x viðskeyti þegar þú notar frumstillingarhugbúnað. Courtesy Tom Green

Að mörgu leyti er farsímamarkaðurinn "Wild West" í ályktunum og ein stærð passar alls ekki öllum. Í ofangreindum dæmi frá Adobe Experience Design er myndin sett á 2 iPhone 6 listatöflum og Android tækjabúnaði. Takið eftir því hvernig 1x útgáfa til vinstri virðist vera hálfstærð. Þetta er nákvæmlega hvernig myndin myndi birtast á iPhone 6 með sjónhimnu skjánum. 2x útgáfan passar fullkomlega og Android útgáfan rennur út af skjánum. Val þitt er að annaðhvort mæla myndina eða flytja myndina út úr Photoshop í mismunandi stærð.

05 af 05

Prófaðu snemma, prófaðu oft, treystu ekkert, treystu enginn og sérstaklega sjálfur

Það er enginn stærð sem passar við alla lausnina og þú þarft að prófa eins mörg tæki og þú getur. Courtesy Tom Green

Það sem þú þarft að skilja er þetta er bara upphaf ferlisins. Skoða vinnu þína á eins mörgum tækjum og þú getur þurft að líta á sem mikilvægt verkflæði. Þú þarft einnig að vera meðvitaðir um þetta er bara fyrsta skrefið í því ferli að búa til grafík eignir fyrir forrit eða farsíma vefur verkefnum.

Notkun einkaleyfisumsókna er frábær leið til að afhjúpa sársauka stig en þessi sömu eignir verða að vera framleiðsla til notkunar hjá framkvæmdaraðila. Í mörgum tilfellum verða líkamleg stærð eigna, þar á meðal tákn, líkamlega stór og ekki í svg en png sniði. Við fyrstu sýn kann þetta að virðast vera svolítið yfir efstu en muna gullna reglan um myndavélarmyndir: það er betra að skala niður en mæla upp.

The botn lína er að vinna náið með framkvæmdaraðila og nota prototyping hugbúnað sem leið til að sýna hönnun ásetning þinn. Að lokum þurfa þessar sömu eignir að vera tilbúnir fyrir lokaafurðina og verktaki þinn hefur betur að takast á við það sem hann eða hún þarfnast en þú.