Imaging vir selfone is nie altyd wat dit lyk nie
Dit word toenemend algemeen vir grafiese voordele om nie net hul werk in druk te sien nie, maar ook op die web en toestelle soos iPhones, iPads, Android-toestelle en Android-tablette. Op die oppervlak kan dit gesien word as 'n "goeie ding", aangesien die media wat ons werk verskyn op uitbrei na digitale skerms. Die nadeel is die blote aantal skerms en die verwarrende aantal skermresolusies. Dit is nie ongewoon om gekruide voordele te hoor nie, ongeag wat gebeur het met die dae wanneer 'n 300 dpi-resolusie- TIFF-beeld in die CMYK- formaat die norm was. O vir die goeie ou dae!
Daardie dae is verby. Ons moet nou twyfel met die feit dat 'n 200 by 200 beeld op een toestel goed kan lyk en nog steeds kwartaalgrootte op 'n ander en driekwart grootte op 'n ander vertoon. Dit kom alles regtig neer op die "Resolution Arms Race" wat deur die vervaardigers van die toestel gevoer word, aangesien hulle probeer om meer pixels in 'n skerm vas te lê as hul mededingers.
Dit bring ons by wat ons "The Rise Of The Suffixes" sal noem. Die agtervoegsels is daardie dinge - @ 2x, @ 3x - aangegee aan die naam van 'n prent. Hulle het in wese byvoorbeeld die korrekte beeld op die regte plek op die regte toestel geplaas. Dan word dit nog beter.
Baie van ons werk behels die werk met ikone, en met die opkoms van die platontwerpbeweging word hierdie dinge in sulke vektortekentoepassings as Illustrator and Sketch geskep. Die probleem is dat toestelle eenvoudig nie .ai of .eps lêers kan lewer nie. Hulle moet omgeskakel word na Scalable Vector Graphics en, afhangende van die toepassing wat gebruik word om die ikone te skep, is daar dalk nie eens 'n SVG opsie nie.
Dan word dit nog beter.
Daar is 'n nuwe klas sagteware-prototipe toepassings - dit word die samestellingpunt voordat jou beelde en ikone na toestelle uitgeskakel word en hulle het ook hul eienaardighede.
Hierdie handleiding beweeg tussen Photoshop en Sketch vir die grafika en gebruik Adobe Experience Design om 'n paar van die pynpunte tussen jou idee en uiteindelike implementering te demonstreer. Laat ons begin.
01 van 05
Hoe om prente vir mobiele toestelle in Adobe Photoshop te maak
Die eerste stap in hierdie proses is om jou teikenapparaat of -toestelle te ken. In hierdie geval sal jy gerig wees op die iPhone 6 wat 'n skermarea van 375 pixels wyd met 667 pixels hoog het. Die ontwerp vereis dat die beeld die breedte van die skerm is.
Die beeld wat gebruik word, is in die Bern Minster-katedraal in Bern, Switserland, geskiet. Sodra die prent in Photoshop oopmaak, kies Image> Image Size om die dimensies van die prent en die resolusie te kontroleer. Uiteraard sal 'n beeld wat 3156 x 2592 met 'n resolusie van 300 ppi en 'n lêer grootte van 23.4 Mb is, eenvoudig nie werk nie.
Binne die dialoogkassie Beeld Grootte, verminder die resolusie tot 100 ppi . Doen dit eers omdat die beeldafmetings ook sal verander. Met die resolusie stel, verander die breedte na 375 pixels. As jy die beeldgrootte data sien wat jy sal sien, het die prent van 23,4 Mb gekrimp tot 'n meer mobiele vriendelike 338k. Klik OK om die verandering te aanvaar en sluit die dialoog Beeld Grootte.
02 van 05
Hoe om die "Uitvoer as ..." dialoogkassie in Adobe Photoshop te gebruik
Sodra die beeld gereed is vir uitvoer, kies "Uitvoer> Uitvoer as ..." om die dialoogkassie Uitvoer oop te maak.
Hierdie dialoogkas is 'n onlangse byvoeging tot Photoshop en vervang die dialoogkassie Save for Web wat hulle jare lank gebruik het. As jy dit nog nodig het, kan jy dit vind in die Uitvoer-pop-down. Dit is om voor die hand liggende redes, nou bekend as "Uitvoer vir Web (Legacy)". As dit jou eerste besoek aan hierdie dialoog is, is dit 'n kort toer:
- Grootte: Hierdie kolom stel die uitsetgrootte van die prent op. Die interessante aspek van hierdie gebied is dat dit die prentjie sal vergroot, maar die prentjie sal nie as "fuzzy" op die toestel verskyn nie as gevolg van die groot aantal pixels op die skerm van die toestel.
- 1X: Klik op hierdie hou en jy sal met 'n aantal groottes aangebied word. Die kategorieë 1x, 2x en 3x word tradisioneel geassosieer met Hi Dpi-toestelle van Apple en hulle sal saam met 'n paar ander beelde vir Android-toestelle voorberei.
- Suffix: Hierdie keuse sal jou grootte wys, maar dit sal gewys word as @ 2x of die grootte is gekies. Hierdie agtervoegsel sal by die prent naam gevoeg word.
- Die + -teken: Klik hier om verskillende groottes vir uitvoer te voeg. In hierdie geval, klik dit twee keer en kies 2x en 3x van die pop-down. Dit sal feitlik enige iOS-toestel dek.
- Die prullenbak kan: Klik hier en die keuse word verwyder uit die opstelling.
- Lêer instellings: Kies die formaat - jpg, png, gif of svg - die beste geskik vir die prent. As die lêergrootte 'n besorgdheid is, kan u ook die kwaliteitinstellings verminder.
- Beeld Grootte: jy kan die fisiese dimensies van die prent verander.
- Kanaal Grootte: Jy kan die fisiese dimensies van die beeldskildery verander.
- Metadata: Jy kan kopiereg en jou kontakinligting by die beeld se metadata voeg.
As jy klaar is, kliek op die knoppie Alles eksporteer. Jy sal gevra word waar jy die beelde wil plaas. 'N Goeie gewoonte om te ontwikkel, is om die New Folder-knoppie te klik en 'n gids te skep om die uitgevoerde prente te hou. As u op Uitvoer klik, sal u die beelde in die gids vertoon.
03 van 05
Hoe om prente vir mobiele toestelle in skets 3 uit Boheemse kodering voor te berei
Skets 3, 'n Macintosh-enigste toepassing van Boheemse kodering, kry vinnig prominensie onder UX- en UI-ontwerpers weens die intense fokus op web- en appontwerp. Trouens, Photoshop is op baie maniere in die vreemde posisie om Sketch te "inhaal".
Om 'n beeld vir mobiele in Skets voor te berei, kies die prent op die artboard en klik op die knoppie Uitvoer maak onderaan die Eienskappe paneel . Dit sal die dialoog Uitvoer oopmaak. Klik op die + -teken om die 2x- en 3x-weergawes by te voeg en voeg ook die agtervoegsels by. Die beskikbare formate is PNG, JPG, TIF, PDF, EPS en SVG. Kies in hierdie geval JPG. Klik op die knoppie Uitvoer en teiken of maak 'n gids om die verskillende beelde wat uitgevoer word, te hou.
04 van 05
Hoekom moet jy drie (of meer) weergawes van die prent skep
In baie opsigte is die Mobile-mark die "Wilde Weste" van besluite en een grootte is beslis nie geskik vir almal nie. In die bogenoemde voorbeeld van Adobe Experience Design, word die prent op 2 iPhone 6-artboards geplaas en 'n Android-toestelbord. Let op hoe die 1x-weergawe aan die linkerkant blyk te wees halfgrootte. Dit is presies hoe die prentjie op 'n iPhone 6 met sy retina skerm verskyn. Die 2x-weergawe pas perfek en die Android-weergawe loop van die skerm af. U keuse is om die prent te skaal of die beeld uit Photoshop in 'n ander grootte te eksporteer.
05 van 05
Toets vroegtydig, toets dikwels, vertrou niks, vertrou niemand en veral jouself nie
Wat jy moet verstaan is dit is net die begin van die proses. Om jou werk op soveel toestelle te sien as wat jy kan , moet as 'n belangrike deel van die werkstroom beskou word. Jy moet ook daarvan bewus wees dat dit net die eerste stap is om grafiese bates vir 'n program of mobiele webprojekte te skep.
Die gebruik van prototipe toepassings is 'n goeie manier om die pynpunte te ontbloot, maar dieselfde bates moet vir die gebruik van die ontwikkelaar gebruik word. In baie gevalle sal die fisiese dimensies van die bates, insluitende ikone, fisies groot wees en nie in die SVG-, maar PNG-formaat nie. Met die eerste oogopslag lyk dit dalk 'n bietjie bo-aan die bokant, maar onthou die goue reël van skaalprente: dit is beter om af te skaal as op te gradeer.
Die bottom line is om nou saam met jou ontwikkelaar te werk en prototiperingsagteware te gebruik as 'n manier om jou ontwerpvoorneme te wys. Uiteindelik sal daardie selfde bates egter gereed wees vir die finale produk en u ontwikkelaar sal beter hanteer wat hy of sy nodig het as u.