Det bliver mere og mere almindeligt for grafikproffer, at deres arbejde ikke blot vises i print, men også på internettet og enheder som iPhones, iPads, Android-enheder og Android-tabletter. På overfladen kan dette ses som en "god ting", som medierne, vores arbejde vises på, udvides til digitale skærme. Ulempen er det rene antal skærme og det forvirrende antal skærmopløsninger. Det er ikke ualmindeligt at høre erfarne proffer, der undrer sig over, hvad der skete med de dage, hvor et 300 dpi opløsning TIFF-billede i CMYK-formatet var normen. Åh for de gode gamle dage!
De tider er forbi. Vi må nu stride imod det faktum, at et 200 til 200 billede kan virke fint på en enhed og alligevel vises kvartstørrelse på en anden og tre fjerdedel størrelse på endnu en. Det hele kommer virkelig ned til "Resolution Arms Race", der føres af enhedsproducenterne, da de forsøger at sylle flere pixels til en skærm end deres konkurrenter.
Dette bringer os til, hvad vi kalder "Rise Of The Suffixes". Suffixerne er de ting - @ 2x, @ 3x - slået til navnet på et billede. De for eksempel sætter det rigtige billede på det rigtige sted på den rigtige enhed. Så bliver det endnu bedre.
Meget af vores arbejde indebærer at arbejde med ikoner, og med fremkomsten af den fladesignede bevægelse skabes disse ting i sådanne vektor tegneapplikationer som Illustrator og Sketch. Problemet er enheder, der simpelthen ikke kan gøre .ai eller .eps filer. De skal konverteres til skalerbar vektorgrafik, og der kan ikke engang være en SVG-mulighed, afhængigt af applikationen, der bruges til at oprette ikonerne.
Så bliver det endnu bedre.
Der er en ny klasse software - Prototypeprogrammer - der bliver montagepunktet, før dine billeder og ikoner bliver skubbet ud til enheder, og de har også deres egenskaber.
Denne vejledning flytter mellem Photoshop og Sketch til grafikken og bruger Adobe Experience Design til at demonstrere nogle af smertepunkterne mellem din ide og eventuel implementering. Lad os komme igang.
01 af 05Sådan udarbejder du billeder til mobile enheder i Adobe Photoshop
Det første skridt i denne proces er at kende din målenhed eller enheder. I dette tilfælde vil du målrette mod iPhone 6, som har et skærmområde på 375 pixel bredt med 667 pixel højt. Designet kræver, at billedet er bredden på skærmen.
Billedet der skal bruges blev skudt inde i Bern Minster-katedralen i Bern, Schweiz. Når billedet åbner i Photoshop, Vælg Billede> Billedstørrelse for at kontrollere dimensioner af billedet og dets opløsning. Selvfølgelig vil et billede, der er 3156 x 2592 med en opløsning på 300 ppi og en filstørrelse på 23,4 Mb, helt sikkert ikke fungere.
Inde i dialogboksen Billedstørrelse, Reducer opløsningen til 100 ppi. Gør dette først, fordi billeddimensionerne også vil ændre sig. Med opløsningsindstillingen ændres bredden til 375 pixel. Hvis du tjekker billedstørrelsesdataene, bemærker du, at billedet er krympet fra 23,4 Mb til en mere mobilvenlig 338k. Klik på OK at acceptere ændringen og luk dialogboksen Billedstørrelse.
Fortsæt læsning herunder
02 af 05Sådan bruges dialogboksen "Eksporter som …" i Adobe Photoshop
Når billedet er klar til eksport, vælg "Eksporter> Eksporter som …" for at åbne dialogboksen Eksporter som.
Denne dialogboks er en ny tilføjelse til Photoshop og erstatter dialogen "Gem til web", som de brugte i årevis. Hvis du stadig har brug for det, kan du finde det i Eksport pop op. Det er af åbenbare grunde nu kendt som "Export For Web (Legacy)". Hvis dette er dit første besøg i denne dialogboks, er der en kort rundvisning:
- Størrelse: Denne kolonne angiver billedets udgangsstørrelse. Det interessante aspekt af dette område er, at det vil forstørre billedet, men billedet vises ikke som "fuzzy" på enheden på grund af det enorme antal pixels på enhedens skærm.
- 1X: Klik på hold dette, og du vil blive præsenteret med en række størrelser. Kategori 1x, 2x og 3x er traditionelt forbundet med Hi Dpi-enheder fra Apple, og de sammen med et par andre vil forberede billeder til Android-enheder.
- suffix: Dette valg vil vise din størrelse, men det vil blive vist som @ 2x eller størrelsen er valgt. Dette suffiks vil blive tilføjet til billednavnet.
- + -Tegnet: Klik på dette for at tilføje forskellige størrelser for output. I dette tilfælde skal du klikke på det to gange og vælge 2x og 3x fra pop ned. Dette vil dække næsten enhver iOS-enhed.
- Papirkurven kan: Klik på dette, og valget fjernes fra linjen.
- Filindstillinger: Vælg formatet - jpg, png, gif eller svg - bedst egnet til billedet. Hvis filstørrelsen er et problem, kan du også reducere kvalitetsindstillingerne.
- Billedestørrelse: Du kan ændre de fysiske dimensioner af billedet.
- Lærred størrelse: Du kan ændre billedets lærreds fysiske dimensioner.
- Metadata: Du kan tilføje ophavsret og dine kontaktoplysninger til billedets metadata.
Når du er færdig, skal du klikke på knappen Eksporter alle. Du bliver spurgt, hvor du vil placere billederne. En god vane at udvikle er at klikke på knappen Ny mappe og oprette en mappe for at holde de eksporterede billeder. Når du klikker på Eksporter, vises billederne i mappen.
Fortsæt læsning herunder
03 af 05Sådan udarbejdes billeder til mobilenheder i skitse 3 fra bohemsk kodning
Sketch 3, en Macintosh-eneste applikation fra Bohemian Coding, bliver hurtigt fremtrædende blandt UX og UI-designere på grund af dets intense fokus på web- og appdesign.Faktisk er Photoshop på mange måder i stand til at spille "indhente" med Sketch.
For at forberede et billede til mobil i Sketch, skal du vælge billedet på tegnebrættet og Klik på knappen Lav eksportér i bunden af panelet Egenskaber. Dette åbner dialogboksen Eksporter. Klik på + -tegnet for at tilføje 2x- og 3x-versionerne, og tilføj også suffikserne. De tilgængelige formater er PNG, JPG, TIF, PDF, EPS og SVG. I dette tilfælde skal du vælge JPG. Klik på knappen Eksporter og mål eller opret en mappe for at holde de forskellige billeder eksporteret.
04 af 05Hvorfor skal du oprette tre (eller flere) versioner af billedet
I mange henseender er mobilmarkedet det "Veste Vesten" af beslutninger, og en størrelse passer absolut ikke til alle. I ovenstående eksempel fra Adobe Experience Design er billedet placeret på 2 iPhone 6-kunstplader og en Android-enhedens kunstplade. Bemærk, hvordan 1x-versionen til venstre ser ud til at være halv størrelse. Dette er præcis, hvordan billedet vises på en iPhone 6 med sin nethinden skærm. 2x-versionen passer perfekt, og Android-versionen løber tør for skærmen. Dit valg er at enten skalere billedet eller eksportere billedet ud af Photoshop i en anden størrelse.
Fortsæt læsning herunder
05 af 05Test tidligt, test ofte, stol ikke på noget, stol ikke på nogen og især dig selv
Hvad du skal forstå er, at dette kun er starten på processen. At se dit arbejde på så mange enheder som du kan, skal betragtes som et vigtigt stykke arbejde. Du skal også være opmærksom på, at dette kun er det første skridt i processen med at skabe grafiske aktiver til en app eller mobil web-projekter.
Brug af prototypeprogrammer er en fantastisk måde at afdække smertepunkterne på, men disse samme aktiver skal udleveres til brug for udvikleren. I mange tilfælde vil de fysiske dimensioner af aktiverne, herunder ikoner, være fysisk store og ikke i svg men png format. Ved første øjekast ser det ud til at være lidt over toppen, men husk den gyldne regel om skalering af billeder: det er bedre at skalere ned end opskalere.
Hovedlinjen er at arbejde tæt sammen med din udvikler og at bruge prototypesoftware som en måde at vise dit design på. Til sidst skal disse samme aktiver være klar til det endelige produkt, og din udvikler har et bedre håndtag på, hvad han eller hun har brug for end dig.
