Preparu bildojn por moveblaj aparatoj

Imagado por poŝtelefono ne ĉiam aspektas

Ĝi estas ĉiufoje pli ofta por grafikaĵoj, ke ne nur ilia laboro aperos en presado sed ankaŭ en la retejo kaj aparatoj kiel iPhones, iPads, Android-aparatoj kaj Android-tablojdoj. Sur la surfaco, ĉi tio povus esti vidita kiel "bona afero" kiel la amaskomunikilaro nia laboro aperas en vastiĝoj al ciferecaj ekranoj. La malavantaĝo estas la nura nombro da ekranoj kaj la konfuzanta nombro de ekranaj rezolucioj. Ne estas malofte aŭdi spertajn avantaĝojn demandante, kio okazis al la tagoj, kiam 300-dpi rezolucio TIFF-bildo en la formato CMYK estis la normo. Ho por bonaj tagoj!

Tiuj tagoj finiĝis. Ni nun devas kontesti kun la fakto, ke 200 de 200 bildoj aspektas bone en unu aparato kaj ankoraŭ aspektas kvaraj en alia kaj kvara kvara en alia. Ĉio vere venas al la "Rezolucio-Armiloj-Raso", farita de la mekanismaj fabrikistoj, ĉar ili provas meti pli da pikseloj en ekranon ol iliaj konkurantoj.

Ĉi tio al ni alportas al ni kion ni nomos "La Rizo De La Sufiksoj". La sufiksoj estas tiuj aferoj - @ 2x, @ 3x - traktataj al la nomo de bildo. Ili esence, ekzemple, metas la dekstran bildon en la ĝusta loko sur la ĝusta aparato. Tiam ĝi akiras eĉ pli bonan.

Granda parto de nia laboro implikas labori kun ikonoj kaj, kun la kresko de la Plata dezajno movado, ĉi tiuj aferoj estas kreitaj en tiaj vektoroj-desegnaj aplikoj kiel Ilustristo kaj Skizo. La problemo estas aparatoj simple ne povas repagi .ai aŭ .eps dosierojn. Ili devas konvertiĝi al Scalable Vector Graphics kaj, laŭ la aplikaĵo uzita por krei la ikonojn, eble eĉ ne estas SVG-opcio.

Tiam ĝi akiras eĉ pli bonan.

Ekzistas nova klaso de programaro- Prototipoj aplikoj - kiuj fariĝas la muntado antaŭ ol viaj bildoj kaj ikonoj estas forigitaj al aparatoj kaj ankaŭ havas siajn proprajn aferojn.

Ĉi tiu lernilo movas inter Photoshop kaj Skizo por la grafikaĵoj kaj uzas Adobe Experience Design por montri kelkajn dolorajn punktojn inter via ideo kaj eventuale deplojo. Komencu.

01 de 05

Kiel prepari bildojn por mekanismoj móviles en Adobe Photoshop

Ŝanĝu la rezolucion antaŭ ol vi ŝanĝu la dimensiojn, kiam vi uzas la bildan skatolon de bildo. Ĝentila Tom Green

La unua paŝo en ĉi tiu procezo estas scianta vian celan aparaton aŭ aparatojn. En ĉi tiu kazo, vi celos la iPhone 6, kiu havas ekranon de 375 pikseloj larĝe je 667 rastrumeroj. La dezajno petas la bildon esti la larĝa de la ekrano.

La bildo por esti uzita estis pafita en la Bern-Katedralo de Berno en Berno, Svislando. Fojo kiun la bildo malfermiĝas en Photoshop, elektu Bildo> Bildo de bildoj por kontroli la dimensiojn de la bildo kaj ĝia rezolucio. Evidente, bildo, kiu estas 3156 x 2592 kun rezolucio de 300 ppi kaj grandeco de 23.4 Mb de dosiero simple ne funkcios.

En la dialogo-skatolo de Bildo Grandeco, reduktu la Rezolucion al 100 ppi . Faru ĉi tion unue ĉar la bildaj dimensioj ankaŭ ŝanĝos. Kun la Rezolucio, ŝanĝi la larĝon al 375 pikseloj. Se vi kontrolas la bildon de la Grandeco de bildoj, vi rimarkos, ke la bildo malŝparis 23.4 Mb al pli da telefono-amika 338k. Alklaku OK por akcepti la ŝanĝon kaj fermi la bildan skatolon de bildoj.

02 de 05

Kiel Uzi la "Eksporta Kiel ..." Dialogo-Skatolo en Adobe Photoshop

La nova dialogo de Eksportado Kiel anstataŭigas la funkcion Save For Web en Photoshop. Ĝentila Tom Green

Post kiam la bildo estas preta por eksportado, elektu "Eksporti> Eksporti kiel ..." por malfermi la Eksporta Kiel dialogujo.

Ĉi tiu Dialogo-Skatolo estas lastatempa aldonita al Photoshop kaj anstataŭigas la dialogon "Save For Web", kiun ili uzis dum jaroj. Se vi ankoraŭ bezonas ĝin, vi povas trovi ĝin en la Eksporta popo sube. Ĝi estas, pro evidentaj kialoj, nun konata kiel "Eksportado Por Retejo (Legaco)". Se ĉi tio estas via unua vizito al ĉi tiu dialogo, jen mallonga vizito:

Kiam finita, alklaku la butonon Eksporti Ĉion. Oni demandos vin, kie vi volas meti la bildojn. Bona kutimo por disvolvi estas alklaki la butonon de Nova dosierujo kaj krei dosierujon por teni la eksportitajn bildojn. Kiam vi alklakas Eksportadon, vi montros la bildojn en la dosierujo.

03 de 05

Kiel prepari bildojn por mekanismoj móviles en Skizo 3 De Bohemia Kodigo

Photoshop estas en la stranga pozicio de ludado & # 34; kapti & # 34; kun Skizo kiam temas pri desegni por poŝtelefono. Ĝentila Tom Green

Skizo 3, nur aplikaĵo de Macintosh de Bohemia Kodigo, rapide gajnas elstarecon inter UX kaj UI-desegnistoj pro ĝia intensa fokuso en retejo kaj dezajno. Fakte Photoshop, en multaj manieroj, estas en la stranga pozicio de devi ludi "kapti supren" kun Skizo.

Por prepari bildon por poŝtelefono en Skizo, elektu la bildon sur la artranko kaj alklaku la Butonon Eksportebla ĉe la fundo de la Propra panelo . Ĉi tio malfermos la Eksportan dialogon. Alklaku la + signon por aldoni la 2x kaj 3xajn versiojn kaj aldoni la sufiksojn. La disponeblaj formatoj estas PNG, JPG, TIF, PDF, EPS, kaj SVG. En ĉi tiu kazo, elektu JPG. Alklaku la Eksportan butonon kaj celon aŭ kreu dosierujon por teni la diversajn bildojn eksportitajn.

04 de 05

Kial Vi Devas Krei Tri (aŭ Pli) Versioj de la Bildo

Kiam ĉio cetera malsukcesas uzi la version de la bildo kun la sufikso & # 64; 2x kiam uzas prototipojn. Ĝentila Tom Green

En multaj aspektoj, la Poŝtelefono merkato estas la "Sovaĝa Okcidento" de rezolucioj kaj unu grandeco definitive ne taŭgas ĉion. En la supra ekzemplo de Adobe Experience Design, la bildo estas metita sur 2 iPhone 6 artboards kaj Android-aparato. Rimarku kiel la 1x-versio maldekstre ŝajnas esti duoneca. Ĉi tio estas ĝuste kiel la bildo aperos en iPhone 6 kun ĝia retino-ekrano. La versio 2x konvenas perfekte kaj la versio de Android forkuros de la ekrano. Via elekto estas ĉu skalpi la bildon aŭ eksporti la bildon el Photoshop ĉe malsama grandeco.

05 de 05

Provo Komenca, Testo Ofte, Fidu Nenion, Fidu Neniu kaj Precipe Vi mem

Ne estas unu grandeco, kiu havas ĉiujn solvojn kaj vi devas provi tiom da aparatoj kiel vi povas. Ĝentila Tom Green

Kion vi bezonas kompreni, tio estas nur la komenco de la procezo. Vidante vian laboron pri tiom da aparatoj kiel vi povas esti rigardata kiel esenca peco de la fluo de laboro. Vi ankaŭ devas esti konscia, ke tio estas nur la unua paŝo en la procezo de kreado de grafikaj aktivoj por aplikaĵo aŭ poŝtelefonaj projektoj.

Uzanta prototipajn aplikojn estas bonega maniero malkovri la dolorojn, sed ĉi tiuj samaj aktivoj bezonos esti eligo por uzo de la programisto. En multaj kazoj, la fizikaj dimensioj de la aktivaĵoj, inkluzive de ikonoj, estos fizike grandega kaj ne en la svg sed png-formato. Al unua vido, ĉi tio ŝajnas esti iom super la supro, sed memoru la oran regulon de grimpaj bildoj: pli bone estas skalo malpli ol skalo.

La fundo devas labori mallarĝe kun via programisto kaj uzi prototipojn kiel programon por montri vian intencon. Eventuale, tiuj samaj aktivoj bezonos esti pretaj por la fina produkto kaj via programisto havas pli bonan tenilon pri tio, kion li aŭ ŝi bezonas ol vi.