Imaging foar mobyl is net altyd wat it liket
It wurdt hieltyd minder foar graphicspros, om net allinich har wurk yn print te meitsjen, mar ek op it web en apparaten lykas iPhones, iPads, Android-apparaten en Android tablets. Op it oerflak koe dit sjoen wurde as in "goede ding" as de media ús wurken ferskine op útwreidingen nei digitale skermen. De ûndergong is it skerpte oantal skermen en it ferrassende oantal skermresolúsjes. It is net ûngewoane om seizend prosessen te freegjen hokker wat barde by de dagen as in 300 dpi resolúsje TIFF-ôfbylding yn it CMYK- formaat wie de norm. Och foar de goede âlde dagen!
Dy dagen binne oer. Wy moatte no oanmeitsje mei it feit dat in 200 by 200 ôfbylding goed fine op ien apparaat en doch de fjirde grutte op in oare en trije-fjirde grutte op ien fan 'e oare ferskine. It allegear echt op 'e "Resolution Arms Race" wurdt troch de apparaatfabrikanten holden as se besykje om mear piksels yn in skerm te bringen as harren konkurrinten.
Dit bringt ús oan wat wy "Rise Of The Suffixes" neame. De suffixes binne dy dingen - @ 2x, @ 3x - oanpast oan de namme fan in byld. Sy hawwe essinsjeel bygelyks it goede byld op it goeie plak op it goede apparaat set. Dan wurdt it noch better.
In soad fan ús wurk betsjuttet it wurkjen mei byldkaikes en, mei de opkomst fan 'e Flat-ûntwerpbeweging, wurde dizze dingen makke yn sokke fektor tekenapplikaasjes as Illustrator en Sketch. It probleem is apparaten net ienfâldich te meitsjen .ai of .eps files. Se moatte konvertearje nei skalierbere fektorgrafiken en, nei ôfhinklik fan 'e applikaasje, dy' t brûkt om it te meitsjen fan 'e byldkaikes, kin it sels gjin SVG-opsje wêze.
Dan wurdt it noch better.
Der is in nije klasse fan software- Prototyping-applikaasjes - dat wurde it gearstallingspunt wurden foardat jo ôfbyldings binne en ikon's wurde útsteld nei apparaten en se hawwe har eigen eigensinnigens.
Dit praktyk ferpleatst tusken Photoshop en Sketch foar de graphics en it brûken fan Adobe Experience Design om in pear fan 'e pinepunten te learen tusken jo idee en eventueel deployaasje. Litte wy begjinne.
01 of 05
Hoe kinne foto's makke wurde foar mobile apparaten yn Adobe Photoshop
De earste stap yn dit proses is it witten fan jo doelgerjocht of apparaat. Yn dit gefal silst it iPhone 6 brûke dy't in skermgebiet fan 375 pixels breed hat mei 667 pixels heech. It ûntwerp ropt foar it byld om de breedte fan it skerm te wêzen.
It byld wurde brûkt yn 'e Berner Minster Cathedral yn Bern, Switserlân. Ienris itôfbylding iepenet yn Photoshop, selektearje Ofbylding> Ofbyldinggrutte om de dimensjes fan it byld en har resolúsje te kontrolearjen. Fansels is in ôfbylding dy't 3156 x 2592 mei in Resolution fan 300 ppi en in triemgrutte fan 23,4 Mb gewoan net wurket.
Binnen it dialoochôfbylding fan 'e ôfbyldingsgrutte fergrutsje de Resolúsje op 100 ppi . Doch dizze earst om't de ôfbyldingsmjittingen ek feroarje. Mei de opsetting set, feroarje de breedte nei 375 piksels. As jo de gegevens fan 'e ôfbyldingsgrutte kontrolearje sille jo bepale dat it ôfbylding fan 23,4 Mb ôfnommen is nei in mobylfreonlike 338k. Klikje OK om de wiziging te akseptearjen en it dialoochfinsterôfbylding te sluten.
02 of 05
Hoe brûke de "Eksportearje as ..." dialoochkaar yn Adobe Photoshop
Skean as it byld is foar it eksportearjen, selektearje "Eksportearje> eksportearje as ..." om it dialoochfinster eksportearje te iepenjen.
Dit Dialogue Box is in resinte oanfolling mei Photoshop en ferfangt it dialooch foar "Web foar bewarje" te ferfangen. As jo it noch nedich binne, kinne jo it fine yn 'e eksportearje pop op. It is, foar fansels reden, no bekend as "Eksport foar Web (Legacy)". As dit jo earste besite oan dizze dialoochfinster is, is hjir in koarte tocht:
- Grutte: Dizze kolom pleatst de útfiergrutte fan 'e ôfbylding. De ynteressante aspekt fan dit gebiet is it fergrutsjen fan it byld mar it ôfbyld sil net as "fuzzy" op it apparaat ferskine, om't it geweldige oantal piksels op it skerm fan 'e apparaat binne.
- 1X: Klik op dizze hantlieding en jo wurde presintearre mei in oantal groepen. De kategoryen 1x, 2x en 3x binne tradisjoneel ferbûn oan Hi-Dip-apparaten fan Apple en se wurde mei in pear oaren foarbylden makke foar Android-apparaten.
- Suffix: Dizze kar sjogge jo grutte, mar it sil werjûn wurde as @ 2x of de grutte wurdt keazen. Dit suffix wurdt tafoege oan de ôfbyldnamme.
- It + teken: Klikje dit om ferskillende dimensjes te foegjen foar útfier. Yn dit gefal klikje it twa kear en keas de 2x en 3x út 'e pop-Down. Dit sil praktysk elke iOS-apparaat dekke.
- De Jiskefet: Klikje dit en de kar is wiske út 'e lineup.
- Triemynstellings: Kies it formaat - jpg, png, gif of svg - best suksesfolle foar it byld. As de triemgrutte in soarch is, kinne jo ek de kwaliteit ynstellingen beheine.
- Ofbyldinggrutte: jo kinne de fysike dimensjes fan it byld feroarje.
- Kaasgrutte: Jo kinne de fysike dimensjes fan it byldkaartsje feroarje.
- Metadata: Jo kinne copyright en jo kontaktynformaasje tafoegje oan de metadata's ôfbylding.
As jo foltôge, klik dan op de knop Eksportearje. Jo sil frege wurde wêr't jo de ôfbyldings pleatse wolle. In goede gewoante om te ûntwikkeljen is te klikken op 'e knop New Folder en in map te meitsjen om de eksportearre ôfbyldings te hâlden. As jo op Eksportearje klikke, sille jo deôfbyldings yn de map werjaan.
03 of 05
Hoe kinne foto's foar mobile apparaten yn skets 3 te meitsjen fanút Bohemenskodearring
Sketch 3, in Macintosh-allinnich applikaasje út Bohemenskodearring, wurdt rapper foarkommen by UX- en UI-ûntwerpers troch syn yntinsive fokus op web- en app-ûntwerp. Yn 't feit is Photoshop op ferskate wizen yn' e ûngedekkelike posysje fan 'spieljen' te meitsjen mei "Sketch".
Om inôfbylding foar mobyl yn Sketch te meitsjen, selektearje it ôfbylding op it artboard en klik op 'e knoppen Oanbiede knop oan' e boaiem fan 'e Eigenskippenpaniel . Dit sil it dialooch Eksportearje iepenje. Klik op it + teken om de 2x en 3x ferzjes te foegjen en ek de suffixes taheakje. De beskikbere formaten binne PNG, JPG, TIF, PDF, EPS, en SVG. Yn dit gefal kieze JPG. Klikje op de knop Eksportearje en it doel of in map meitsje om de ferskate ôfbyldings te eksportearjen.
04 of 05
Wêrom moatte jo trije (of mear) ferzjes fan 'e ôfbylding oanmeitsje
Yn in protte respekt is de Mobilmarkt de "Wild West" fan resolúsjes en ien grutte oplossing is hielendal net fit. Yn it boppeneamde foarbyld fan Adobe Experience Design wurdt it byld op 2 iPhone 6 artboards pleatst en in artyboard artboard Android. Tink derom as de 1x ferzje op 'e linkers de helte heul is. Dit is krekt hoe't de ôfbylding op in iPhone 6 ferskynt mei har retina-skerm. De 2x ferzje past perfekt en de Android ferzje giet út fan it skerm. Jo keuze is om de ôfbylding te fertsjinjen of it ôfbyld te eksportearjen fan Photoshop op in oare grutte.
05 of 05
Testje froast, teste oeral, fertrouwe neat, fertroude Niemand en benammen josels
Wat jo nedich binne te begripen is dat it gewoan de start fan it proses. Wurkje jo wurk op safolle apparaten as jo kinne beskôge wurde as in wichtich stikje fan 'e workflow. Jo moatte ek bewust wêze dat dit allinich de earste stap is yn it proses fan it meitsjen fan grafyske aktives foar in app of mobile web-projekten.
It brûken fan prototypingapplikaasjes is in geweldige manier om de pinepunten te ûntdekken, mar dit deselde ferantwurdlikens sil útfierd wurde foar gebrûk troch de ûntwikkelders. Yn in soad gefallen is de fysike dimensjes fan it aktyf, ynklusyf byldkaikes, fysikalysk en net yn it svg mar png-formaat. Op 'e eagen, dit kin miskien wol wat boppe it top wêze, mar tink oan de gouden regel fan skalearjende bylden: it is better om skaal del te lizzen as skalel op.
De ûnderste line is om nau mei jo ûntwikkelders te wurkjen en prototyping software te brûken as in manier om jo ûntwerpynstelling sjen te litten. Uteinlik, lykwols, wurde deselde fertsjinwurdigers klear foar it lêste produkt en jo ûntwikkelder hat in bettere hantje op wat hy of sy hat nedich as jo.