Det blir stadig mer vanlig for grafikkprofiler, for ikke bare at deres arbeid vises i utskrift, men også på nettet og enheter som iPhones, iPads, Android-enheter og Android-tabletter. På overflaten kan dette sees som en "god ting" som media vårt arbeid vises på, utvides til digitale skjermer. Ulempen er det rene antallet skjermer og det forvirrende antall skjermoppløsninger. Det er ikke uvanlig å høre erfarne proffene lurer på hva som skjedde med dagene da et 300 dpi oppløsning TIFF-bilde i CMYK-formatet var normen. Åh for de gode gamle dager!
De dagene er over. Vi må nå kjempe med det faktum at et 200 til 200 bilde kan virke fint på en enhet, og likevel vises kvartstørrelse på en annen og tre fjerdedel på en annen. Alt kommer virkelig ned til "Resolution Arms Race" som blir utført av enhetsprodusentene som de prøver å jamme flere piksler til en skjerm enn sine konkurrenter.
Dette bringer oss til det vi kaller "Rise Of The Suffixes". Suksessene er de tingene - @ 2x, @ 3x - festet til navnet på et bilde. De for eksempel, for eksempel, sette riktig bilde på rett sted på den rette enheten. Så blir det enda bedre.
Mye av vårt arbeid innebærer å jobbe med ikoner, og med opprøret av flatdesignbevegelsen blir disse tingene skapt i slike vektor tegneapplikasjoner som Illustrator og Sketch. Problemet er at enheter ganske enkelt ikke kan gjengi .ai eller .eps filer. De må konverteres til skalerbar vektorgrafik, og det kan ikke engang være et SVG-alternativ, avhengig av hvilket program som brukes til å lage ikonene.
Så blir det enda bedre.
Det er en ny klasse programvare - Prototyping-applikasjoner - som blir monteringspunktet før bildene og ikonene dine blir fjernet til enheter, og de har også sine særegenheter.
Denne opplæringen beveger seg mellom Photoshop og Sketch for grafikken og ved hjelp av Adobe Experience Design for å demonstrere noen av smertepunktene mellom ideen og eventuell distribusjon. La oss komme i gang.
01 av 05Slik lager du bilder for mobile enheter i Adobe Photoshop
Det første trinnet i denne prosessen er å vite målenheten eller enhetene dine. I dette tilfellet vil du målrette mot iPhone 6 som har et skjermområde på 375 piksler bredt med 667 piksler høyt. Designet krever at bildet skal være bredden på skjermen.
Bildet som ble brukt ble skutt inne i Bern Minster-katedralen i Bern, Sveits. Når bildet åpnes i Photoshop, velg Bilde> Bildestørrelse for å kontrollere dimensjonene på bildet og dets oppløsning. Åpenbart vil et bilde som er 3156 x 2592 med en oppløsning på 300 ppi og en filstørrelse på 23,4 Mb, bare ikke fungere.
I dialogboksen Bildestørrelse, Reduser oppløsningen til 100 ppi. Gjør dette først fordi bildedimensjonene også vil endre seg. Med oppløsningen sett, endrer du bredden til 375 piksler. Hvis du kontrollerer bildestørrelsesdataene, vil du se at bildet har krympet fra 23,4 Mb til en mer mobilvennlig 338k. Klikk på OK for å godta endringen og lukk dialogboksen Bildestørrelse.
Fortsett å lese nedenfor
02 av 05Slik bruker du dialogboksen "Eksporter som …" i Adobe Photoshop
Når bildet er klart for eksport, velg "Eksporter> Eksporter som …" for å åpne dialogboksen Eksporter som.
Denne dialogboksen er et nylig tillegg til Photoshop og erstatter dialogboksen "Lagre for web" de brukte i mange år. Hvis du fortsatt trenger det, kan du finne det i Eksport-pop-ned. Det er av åpenbare grunner, nå kjent som "Export For Web (Legacy)". Hvis dette er ditt første besøk til denne dialogboksen, er det en kort tur:
- Størrelse: Denne kolonnen angir størrelsen på bildet. Det interessante aspektet av dette området er at det vil forstørre bildet, men bildet vil ikke vises som "fuzzy" på enheten på grunn av det store antallet piksler på enhetens skjerm.
- 1X: Klikk på hold dette og du vil bli presentert med en rekke størrelser. Kategoriene 1x, 2x og 3x er tradisjonelt forbundet med Hi Dpi-enheter fra Apple, og de sammen med noen andre vil forberede bilder for Android-enheter.
- Suffiks: Dette valget vil vise din størrelse, men det vil bli vist som @ 2x eller størrelsen er valgt. Dette suffikset vil bli lagt til bildenavnet.
- + -Tegnet: Klikk på dette for å legge til forskjellige størrelser for utdata. I dette tilfellet, klikk det to ganger og velg 2x og 3x fra pop ned. Dette vil dekke nesten alle iOS-enheter.
- Papirkurven kan: Klikk dette og valget er fjernet fra oppstillingen.
- Filinnstillinger: Velg formatet - jpg, png, gif eller svg - best egnet til bildet. Hvis filstørrelsen er et problem, kan du også redusere kvalitetsinnstillingene.
- Bildestørrelse: Du kan endre bildens fysiske dimensjoner.
- Lærretstørrelse: Du kan endre de fysiske dimensjonene til bildetes lerret.
- metadata: Du kan legge til opphavsrett og kontaktinformasjon til bildens metadata.
Når du er ferdig, klikker du på Eksporter alle-knappen. Du blir spurt hvor du vil plassere bildene. En god vane å utvikle er å klikke på Ny mappe-knappen og opprette en mappe for å holde de eksporterte bildene. Når du klikker på Eksporter, blir du vist bildene i mappen.
Fortsett å lese nedenfor
03 av 05Hvordan lage bilder for mobile enheter i skisse 3 fra bøhmisk koding
Sketch 3, et Macintosh-eneste program fra Bohemian Coding, blir raskt fremtredende blant UX og UI-designere på grunn av sitt intense fokus på web- og appdesign.Faktisk er Photoshop på mange måter i en merkelig posisjon å måtte "fange opp" med Sketch.
For å forberede et bilde for mobil i Sketch, velg bildet på tavla og Klikk på knappen Gjør eksporterbar nederst på Egenskaper-panelet. Dette åpner dialogboksen Eksporter. Klikk på + -tegnet for å legge til 2x- og 3x-versjonene, og legg til også suffiksene. Formatene som er tilgjengelige er PNG, JPG, TIF, PDF, EPS og SVG. I så fall velger du JPG. Klikk på Eksporter-knappen og mål eller lag en mappe for å holde de forskjellige bildene eksportert.
04 av 05Hvorfor må du opprette tre (eller flere) versjoner av bildet
I mange henseender er mobilmarkedet "Wild West" av resolusjoner, og en størrelse passer definitivt ikke til alle. I eksemplet ovenfor fra Adobe Experience Design, er bildet plassert på 2 iPhone 6-kunstbrett og en Android-enhetens artboard. Legg merke til hvordan 1x-versjonen til venstre ser ut til å være halv størrelse. Dette er akkurat hvordan bildet vil vises på en iPhone 6 med sin netthinnen skjerm. 2x-versjonen passer perfekt og Android-versjonen går av skjermen. Ditt valg er å enten skalere bildet eller eksportere bildet ut av Photoshop i en annen størrelse.
Fortsett å lese nedenfor
05 av 05Test tidlig, prøv ofte, ikke stole på noe, stol på ingen og spesielt deg selv
Det du trenger å forstå er dette er bare starten på prosessen. Å se arbeidet ditt på så mange enheter som mulig, må betraktes som en viktig del av arbeidsflyten. Du må også være oppmerksom på at dette bare er det første skrittet i prosessen med å skape grafiske ressurser for en app- eller mobilnettprosjekter.
Bruke prototyping applikasjoner er en fin måte å avdekke smerte poeng, men disse samme eiendelene må utgis for bruk av utvikleren. I mange tilfeller vil de fysiske dimensjonene av eiendelene, inkludert ikoner, være fysisk stor og ikke i svg men png format. Ved første øyekast kan dette virke litt over toppen, men husk den gylne regelen om å skalere bilder: det er bedre å skalere enn å oppskalere.
Bunnlinjen er å jobbe tett med utvikleren din og bruke prototypingsprogramvare som en måte å vise designens hensikt på. Til slutt vil de samme eiendelene imidlertid være klare for det endelige produktet, og utvikleren har et bedre håndtak på hva han eller hun trenger enn deg.
