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
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
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:
- Grandeco: Ĉi tiu kolumno agordas la eliga grandeco de la bildo. La interesa aspekto de ĉi tiu areo estas, ke ĝi pligrandigos la bildon, sed la bildo ne aspektos kiel "malklara" en la aparato pro la granda nombro de pikseloj sur la ekrano de la aparato.
- 1X: Alklaku ĉi tion kaj vi prezentos multajn grandecojn. La kategorioj 1x, 2x kaj 3x tradicie asocias kun Hi Dpi-aparatoj de Apple kaj ili kune kun kelkaj aliaj preparos bildojn por Android-aparatoj.
- Sufikso: Ĉi tiu elekto montros vian grandecon, sed ĝi estos montrata kiel @ 2x aŭ la grandeco estas elektita. Ĉi tiu sufikso aldoniĝos al la nomo de la bildo.
- La + signo: Alklaku ĉi por aldoni diversajn grandecojn por eligo. En ĉi tiu kazo, klaku ĝin dufoje kaj elektis 2x kaj 3x el la popo sube. Ĉi tio kovros preskaŭ ajnan iOS-aparaton.
- The Trash Can: Klaki ĉi tion kaj la elekto estas forigita de la alineo.
- Dosieraj agordoj: Elektu la formaton - jpg, png, gif or svg - plej taŭga por la bildo. Se la grandeco de dosiero estas maltrankvilo, vi ankaŭ povas redukti la kvalitajn agordojn.
- Bildo Grandeco: vi povas ŝanĝi la fizikajn dimensiojn de la bildo.
- Grandeco de Kanvaso: Vi povas ŝanĝi la fizikajn dimensiojn de la bildo tolo.
- Metadatumoj: Vi povas aldoni kopirajton kaj vian kontaktan informon al la metadatumoj de la bildo.
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
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
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
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.