Nid yw delweddu ar gyfer symudol bob amser yn ymddangos
Mae'n dod yn fwyfwy cyffredin am brosiectau graffeg nid yn unig y mae eu gwaith yn ymddangos mewn print ond hefyd ar y we a dyfeisiau megis iPhones, iPads, dyfeisiau Android a tabledi Android. Ar yr wyneb, gellid gweld hyn yn "beth da" fel y cyfryngau mae ein gwaith yn ymddangos ar ehangu i sgriniau digidol. Yr anfantais yw'r nifer helaeth o sgriniau a'r nifer ddryslyd o benderfyniadau sgrin. Nid yw'n anghyffredin clywed am fanteision dawnsiedig sy'n meddwl beth bynnag ddigwyddodd i'r dyddiau pan oedd delwedd 300 dpi TIFF datrysiad yn y fformat CMYK yn norm. O am yr hen ddyddiau da!
Mae'r dyddiau hynny drosodd. Erbyn hyn mae'n rhaid i ni ddadlau gyda'r ffaith y gallai delwedd 200 o 200 ymddangos yn iawn ar un ddyfais ac eto mae'n ymddangos bod maint chwarter ar faint arall a thri chwarter ar un arall. Daw'r cyfan i lawr i "Race Resolution Arms" gan weithgynhyrchwyr y ddyfais wrth iddynt geisio jami mwy o bicseli i mewn i sgrin na'u cystadleuwyr.
Mae hyn yn dod â ni at yr hyn y byddwn ni'n ei alw'n "The Rise Of The Suffixes". Y pethau sy'n dod i'r amlwg yw'r pethau hynny - @ 2x, @ 3x - mynd i'r afael â enw delwedd. Yn ei hanfod, er enghraifft, rhowch y ddelwedd gywir yn y lle iawn ar y ddyfais gywir. Yna mae'n mynd yn well fyth.
Mae llawer o'n gwaith yn golygu gweithio gydag eiconau a, gyda chynnydd y mudiad dylunio Fflat, mae'r pethau hyn yn cael eu creu mewn cymhwysiadau darlunio fector fel Illustrator a Braslun. Y broblem yw nad yw dyfeisiau yn gallu gwneud ffeiliau .ai neu .eps yn syml. Mae angen eu trosi i Graffeg Vector Scalable ac, yn dibynnu ar y cais a ddefnyddir i greu'r eiconau, efallai na fydd hyd yn oed yn opsiwn SVG.
Yna mae'n mynd yn well fyth.
Mae yna ddosbarth newydd o geisiadau meddalwedd Prototeipio - sy'n dod yn fan cynulliad cyn i'ch delweddau ac eiconau gael eu cludo i ddyfeisiau ac mae ganddynt eu nodweddion arbennig hefyd.
Mae'r tiwtorial hwn yn symud rhwng Photoshop a Braslun ar gyfer y graffeg a defnyddio Adobe Experience Design i ddangos ychydig o'r pwyntiau poen rhwng eich syniad a'ch defnyddio yn y pen draw. Gadewch i ni ddechrau.
01 o 05
Sut i Baratoi Delweddau ar gyfer Dyfeisiau Symudol yn Adobe Photoshop
Y cam cyntaf yn y broses hon yw gwybod eich dyfais neu ddyfeisiau targed. Yn yr achos hwn, byddwch chi'n targedu'r iPhone 6 sydd â maes sgrin o 375 picsel o led gan 667 picsel yn uchel. Mae'r cynllun yn galw am i'r ddelwedd fod yn lled y sgrin.
Cafodd y ddelwedd i'w ddefnyddio ei saethu y tu mewn i Eglwys Gadeiriol Bern Minster yn Bern, y Swistir. Unwaith y bydd y ddelwedd yn agor yn Photoshop, dewiswch Image> Size Image i wirio dimensiynau'r ddelwedd a'i ddatrysiad. Yn amlwg, ni fydd delwedd sy'n 3156 x 2592 gyda Penderfyniad o 300 ppi a maint ffeil o 23.4 Mb yn gweithio.
Y tu mewn i'r blwch deialu Maint Delwedd, lleihau'r Penderfyniad i 100 ppi . Gwnewch hyn yn gyntaf oherwydd bydd dimensiynau delwedd hefyd yn newid. Gyda'r set Datrys, newid y lled i 375 Pixel. Os ydych chi'n gwirio'r data Maint Image, byddwch yn sylwi bod y ddelwedd wedi llwyddo o 23.4 Mb i 338k yn fwy cyfeillgar i ffonau symudol. Cliciwch OK i dderbyn y newid a chau'r blwch deialu Maint Delwedd.
02 o 05
Sut i ddefnyddio'r Blwch Deialog "Allforio Fel ..." yn Adobe Photoshop
Unwaith y bydd y ddelwedd yn barod i'w allforio, dewiswch "Allforio> Allforio Fel ..." i agor y blwch deialog Allforio Fel.
Mae'r Blwch Dialog hwn yn ychwanegu diweddar at Photoshop ac mae'n disodli'r blwch deialog "Save For Web" a ddefnyddiwyd ers blynyddoedd. Os ydych chi ei angen o hyd, gallwch ddod o hyd iddi yn y Allforio pop i lawr. Y rheswm am resymau amlwg yw "Export For Web (Etifeddiaeth)". Os mai dyma'ch ymweliad cyntaf â'r blwch deialog hwn, dyma chi daith fer:
- Maint: Mae'r golofn hon yn gosod maint allbwn y allbwn. Agwedd ddiddorol yr ardal hon yw y bydd yn ehangu'r ddelwedd ond ni fydd y ddelwedd yn ymddangos fel "ffug" ar y ddyfais oherwydd y nifer enfawr o bicseli ar sgrin y ddyfais.
- 1X: Cliciwch ar ddal hwn a byddwch yn cael nifer o feintiau. Mae'r categorïau 1x, 2x a 3x yn gysylltiedig yn draddodiadol â dyfeisiau Hi Dpi o Apple ac maen nhw ynghyd â rhai eraill yn paratoi delweddau ar gyfer dyfeisiau Android.
- Suffix: Bydd y dewis hwn yn dangos eich maint ond fe'i dangosir fel @ 2x neu os dewisir y maint. Ychwanegir yr atodiad hwn i'r enw delwedd.
- Yr arwydd +: Cliciwch yma i ychwanegu gwahanol feintiau ar gyfer allbwn. Yn yr achos hwn, cliciwch arno ddwywaith a dewis 2x a 3x o'r pop i lawr. Bydd hyn yn cwmpasu yn ymarferol unrhyw ddyfais iOS.
- Y Sbwriel All: Cliciwch yma a symudir y dewis o'r llinell.
- Gosodiadau Ffeil: Dewiswch y fformat - jpg, png, gif or svg - sy'n addas i'r ddelwedd. Os yw maint y ffeil yn bryder, gallwch hefyd leihau'r lleoliadau Ansawdd.
- Maint Delwedd: gallwch chi newid dimensiynau ffisegol y ddelwedd.
- Maint Cynfas: Gallwch newid dimensiynau ffisegol y gynfas delwedd.
- Metadata: Gallwch ychwanegu hawlfraint a'ch gwybodaeth gyswllt i metadata'r ddelwedd.
Wedi gorffen, cliciwch ar y botwm All All. Gofynnir i chi ble rydych chi am osod y delweddau. Mae arfer da i'w ddatblygu yw clicio'r botwm Ffolder Newydd a chreu ffolder i ddal y delweddau allforio. Pan fyddwch yn clicio Allforio, fe ddangosir y delweddau yn y ffolder.
03 o 05
Sut i Baratoi Delweddau ar gyfer Dyfeisiau Symudol yn Fraslun 3 O Codio Bohemiaidd
Mae Braslun 3, cais Macintosh yn unig gan Bohemian Coding, yn ennyn amlygrwydd yn gyflym ymysg dylunwyr UX ac UI oherwydd ei ffocws dwys ar ddylunio gwe a app. Yn wir, mae Photoshop, mewn sawl ffordd, mewn sefyllfa anghyffredin o orfod chwarae "dal i fyny" gyda Braslun.
I baratoi delwedd ar gyfer symudol yn Braslun, dewiswch y ddelwedd ar y artboard a chliciwch ar y botwm Gwneud Allforio ar waelod y panel Eiddo . Bydd hyn yn agor y blwch deialu Allforio. Cliciwch ar yr arwydd + i ychwanegu'r fersiynau 2x a 3x a hefyd ychwanegu'r rhagddodiad. Y fformatau sydd ar gael yw PNG, JPG, TIF, PDF, EPS, a SVG. Yn yr achos hwn, dewiswch JPG. Cliciwch ar y botwm Allforio a thargedwch neu greu ffolder i ddal yr amrywiol ddelweddau allforio.
04 o 05
Pam mae angen i chi greu tair (neu ragor) o Fersiynau'r Delwedd
Mewn sawl ffordd, y farchnad Symudol yw'r "Gorllewin Gwyllt" o benderfyniadau ac nid yw un maint yn sicr yn addas i bawb. Yn yr enghraifft uchod o Adobe Experience Design, mae'r ddelwedd yn cael ei gosod ar 2 artboards iPhone 6 a celffwrdd dyfais Android. Hysbyswch sut mae'r fersiwn 1x ar y chwith yn ymddangos yn hanner maint. Dyma sut y byddai'r ddelwedd yn ymddangos ar iPhone 6 gyda'i sgrin retina. Mae'r fersiwn 2x yn cyd-fynd yn berffaith ac mae'r fersiwn Android yn rhedeg oddi ar y sgrin. Eich dewis chi yw graddio'r ddelwedd naill ai neu allforiwch y ddelwedd allan o Photoshop ar wahanol faint.
05 o 05
Prawf Cynnar, Prawf Yn aml, Dim Ymddiriedolaeth, Ymddiriedolaeth Dim Un ac Yn Arbennig Eich Hun
Yr hyn sydd angen i chi ei ddeall yw dyma ddechrau'r broses yn unig. Edrych ar eich gwaith ar gymaint o ddyfeisiadau ag y gallwch chi gael eu hystyried yn ddarn hanfodol o'r llif gwaith. Mae angen i chi hefyd fod yn ymwybodol mai dyma'r cam cyntaf yn y broses o greu asedau graffeg ar gyfer app neu brosiectau gwe symudol.
Mae defnyddio prototeipio ceisiadau yn ffordd wych o ddatgelu pwyntiau poen ond bydd angen i'r un asedau hyn fod yn allbwn i'w defnyddio gan y datblygwr. Mewn llawer o achosion, bydd dimensiynau ffisegol yr asedau, gan gynnwys eiconau, yn gorfforol enfawr ac nid yn y svg ond ar ffurf png. Ar yr olwg gyntaf, mae'n ymddangos bod hyn ychydig yn uwch na'r brig ond cofiwch y rheol euraidd o ddelweddau graddio: mae'n well graddio i lawr na graddfa i fyny.
Y llinell waelod yw gweithio'n agos gyda'ch datblygwr a defnyddio meddalwedd prototeipio fel ffordd o ddangos eich bwriad dylunio. Yn y pen draw, fodd bynnag, bydd angen i'r un asedau fod yn barod ar gyfer y cynnyrch terfynol ac mae gan eich datblygwr drin yn well ar yr hyn sydd ei angen arnoch chi na chi.