Mobiililaitteiden kuvaaminen ei ole aina sitä mitä näyttää
Graafisten ammattilaisten on yleistynyt paitsi, että heidän työnsä näkyvät myös painettuna, mutta myös webissä ja laitteissa, kuten iPhonessa, iPadissa, Android-laitteissa ja Android-tablet-laitteissa. Pinnalla tämä voidaan nähdä "hyvänä", kun mediamme työmme näkyy laajentuu digitaalisiin näytöksiin. Haittapuoli on selkeä näyttökertojen määrä ja sekoitusresoluutiota sekava määrä. Ei ole harvinaista kuulla kokeneita ammattilaisia pohtimaan mitä tapahtui päivinä, jolloin 300 dpi: n tarkkuus TIFF-kuva CMYK- muodossa oli normi. Voi hyvä vanhoja päiviä!
Nämä päivät ovat ohitse. Meidän on nyt vastustettava sitä tosiasiaa, että 200-200 kuvaa voi näyttää hyvältä yhdellä laitteella ja silti näyttää neljänneksen koko toisen ja kolmen neljänneksen koon vielä toisella. Kaikki todella tulee alas laitevalmistajien käymään "Resolution Arms Race" -kohtaan, koska he yrittävät hilata pikseleitä näytöksi kuin heidän kilpailijoistaan.
Tämä tuo meidät siihen, mitä kutsumme "Rise Of The Suffixes". Liiteet ovat ne asiat - @ 2x, @ 3x - kiinnittyneet kuvan nimeen. Ne laittaa esimerkiksi oikean kuvan oikeaan paikkaan oikealla laitteella. Sitten se saa vieläkin paremman.
Paljon työmme liittyy kuvakkeiden käsittelyyn ja Flat-muotoilun liikkeellepanon myötä nämä asiat luodaan sellaisissa vektoripohjaisissa sovelluksissa kuin Illustrator ja Sketch. Ongelma on, että laitteet eivät yksinkertaisesti pysty muodostamaan .ai- tai .eps-tiedostoja. Ne täytyy muuntaa Scalable Vector Graphicsiksi ja kuvakkeiden luomiseen käytetystä sovelluksesta riippuen ei ehkä ole SVG-vaihtoehtoa.
Sitten se saa vieläkin paremman.
Uusia ohjelmistoluokkia - Prototyyppausohjelmia - jotka tulevat kokoonpanokohdaksi, ennenkuin kuvat ja kuvakkeet siirretään laitteille ja niillä on myös omat erityispiirteensä.
Tämä opetusohjelma liikkuu Photoshopin ja Sketchin välillä grafiikan ja Adobe Experience Designin avulla osoittamaan muutamia tuskipisteitä ajatuksen ja mahdollisen käyttöönoton välillä. Aloitetaan.
01/05
Kuvien valmistelu mobiililaitteille Adobe Photoshopissa
Ensimmäinen vaihe tässä prosessissa on tietää kohdelaitteen tai laitteesi. Tässä tapauksessa kohdistat iPhone 6: n, jonka näyttöalue on 375 pikseliä leveä ja 667 pikseliä korkea. Suunnittelu vaatii kuvan olevan näytön leveys.
Käytettävä kuva laukaistiin Berniin Minsterin katedraalin sisällä Bernissä, Sveitsissä. Kun kuva avautuu Photoshopissa, valitse Kuva> Kuvan koko tarkistaaksesi kuvan mitat ja sen tarkkuudet. On selvää, että kuva, joka on 3156 x 2592 300 dpi: n resoluutiolla ja 23,4 Mb: n tiedostokoko ei yksinkertaisesti toimi.
Pienennä tarkkuutta 100 ppi: n tarkkuudella Kuvan koko -valintaikkunan sisällä. Tee tämä ensin, koska myös kuvan mitat muuttuvat. Kun resoluutio on asetettu, muuta leveys 375 pikseliksi. Jos tarkistat kuvakootiedot, huomaat, että kuva on kutistunut 23,4 Mb: sta mobiililaitteille sopivimpaan 338k. Hyväksy muutos ja sulje Kuvan koko -valintaikkuna valitsemalla OK .
02/05
Kuinka käyttää "Export As ..." dialogia Adobe Photoshopissa
Kun kuva on valmis vientiin, valitse "Vie> Vie nimellä ..." avataksesi Vie nimellä -valintaikkunan.
Tämä valintaikkuna on viimeinen lisä Photoshopiin ja korvaa vuosien ajan käyttämät "Save For Web" -valintaikkunan. Jos tarvitset sitä edelleen, voit löytää sen viedä ponnahdusikkunassa. Se on ilmeisistä syistä nyt tunnettu nimellä "Export For Web (Legacy)". Jos tämä on ensimmäinen vierailusi tähän valintaikkunaan, tässä on lyhyt kiertue:
- Koko: Tämä sarake määrittää kuvan ulostulon koon. Mielenkiintoinen osa tätä aluetta on se, että kuvaa suurennetaan, mutta kuva ei näy laitteessa "sumea", koska valokuvien suuret määrät ovat laitteen näytössä.
- 1X: Napsauta pidä tätä ja saat esiin useita kokoja. 1x, 2x ja 3x-luokat ovat perinteisesti yhteydessä Apple Hi Dpi -laitteisiin ja ne yhdessä muiden kanssa valmistavat kuvia Android-laitteille.
- Suffix: Tämä valinta näyttää koon, mutta se näkyy muodossa @ 2x tai koko valitaan. Tämä loppu lisätään kuvatietoon.
- + -merkki: Napsauttamalla tätä voit lisätä eri kokoisia tulosteita varten. Tässä tapauksessa napsauta sitä kahdesti ja valitse 2x ja 3x ponnahdusvalikosta. Tämä kattaa lähes kaikki iOS-laitteet.
- Roskakori: Napsauta tätä ja valinta poistetaan kokoonpanosta.
- Tiedostosi asetukset: Valitse muoto - jpg, png, gif tai svg - parhaiten sopiva kuvaan. Jos tiedostokoko on huolta, voit myös vähentää Laatuasetuksia.
- Kuvan koko: voit muuttaa kuvan fyysisiä mittoja.
- Canvas Size: Voit muuttaa kuvakankaan fyysisiä mittoja.
- Metatiedot: Voit lisätä tekijänoikeuksia ja yhteystietojasi kuvan metatietoihin.
Kun olet valmis, napsauta Vie kaikki -painiketta. Sinulta kysytään, mihin haluat sijoittaa kuvat. Hyvä tapa kehittää on napsauttaa Uusi kansio -painiketta ja luoda kansio, jolla pidät vietyjä kuvia. Kun valitset Vienti, näytetään kansion kuvat.
03/05
Kuvien esikatseleminen mobiililaitteille luonnoksessa 3 Bohemian koodauksesta
Sketch 3, Bohemian Codingin ainoa Macintosh-sovellus, on nopeasti nousemassa UX- ja UI-suunnittelijoiden keskuudessa, koska se keskittyy voimakkaasti web- ja sovellussuunnitteluun. Itse asiassa Photoshop on monella tapaa omituinen asema siitä, että Sketchillä on oltava "kiinni".
Voit luoda kuvan mobiililaitteelle Sketchissä valitsemalla kuvan taulussa ja napsauttamalla Ominaisuudet-paneelin alaosassa olevaa Suorita vienti-painiketta . Tämä avaa Export-valintaikkunan. Napsauta + -merkkiä lisätäksesi 2x ja 3x versiot ja lisää myös jälkipäät. Käytettävissä olevat muodot ovat PNG, JPG, TIF, PDF, EPS ja SVG. Valitse tässä tapauksessa JPG. Napsauta Export-painiketta ja kohdista tai luo kansio, jolla pidät eri kuvat vietyinä.
04/05
Miksi sinun täytyy luoda kolme (tai enemmän) versiota kuvasta
Monissa suhteissa mobiilimarkkinat ovat päätöslauselmien "Wild West" ja yksi koko ei todellakaan sovi kaikkiin. Edellä olevassa esimerkissä Adobe Experience Design -ohjelmasta kuva on sijoitettu 2 iPhone 6 -työpöydälle ja Android-laitteen taulu-albumille. Huomaa, miten vasemmalla oleva 1x-versio näyttää olevan puolikokoinen. Tämä on täsmälleen se, miten kuva näkyy iPhonella 6 sen verkkokalvonäytöllä. 2x-versio sopii täydellisesti ja Android-versio kestää näytön. Valintasi on joko skaalata kuvaa tai viedä kuva Photoshopista eri kokoisina.
05/05
Testaa varhain, testaa usein, luota minuun, luottaa kukaan ja etenkin itsesi
Mitä sinun tarvitsee ymmärtää, tämä on vasta prosessin alku. Työn tarkastelemista mahdollisimman monella laitteella on pidettävä olennaisena osana työnkulkua. Sinun on myös oltava tietoinen siitä, että tämä on vasta ensimmäinen vaihe prosessin luomisessa sovellus- tai mobiiliverkkoprojekteille.
Prototyyppisovellusten käyttäminen on loistava tapa paljastaa kipupisteet, mutta nämä samat varat on tuotava kehittäjän käyttöön. Monissa tapauksissa varojen fyysiset ulottuvuudet, mukaan lukien kuvakkeet, ovat fyysisesti valtavia, eikä svg-mutta png-muodossa. Ensi silmäyksellä tämä voi tuntua olevan hieman ylhäältä, mutta muistaa skaalauskuvan kultaista sääntöä: on parempi laskea alaspäin kuin skaalata.
Lähtökohtana on työskennellä tiiviisti kehittäjän kanssa ja käyttää prototyyppausohjelmistoa keinona näyttää suunnittelutavoitteesi. Lopulta kuitenkin näiden samojen varojen on oltava valmis lopputuotteelle ja kehittäjällä on paremmat käsitykset siitä, mitä hän tarvitsee kuin sinä.