Ihanteellinen kuvasuhde mobiililaitteille

Jos taustakuvasi näyttää rajautuneelta, sumealta tai ei sovi kunnolla, älä huoli: kyse on yleensä kuvasuhteesta ja resoluutiosta . Oikeiden kahden muuttujan valitseminen ratkaisee, näyttääkö taustakuva upealta vai ihan hyvältä. Tässä on kattava opas koon ja kuvasuhteen säätämiseen puhelimeesi vaivattomasti.

Ensimmäinen asia, joka on ymmärrettävä, on se, ettei ole olemassa "universaalia" kokoa kaikille puhelimille. iPhonet ja Android-laitteet käyttävät useita resoluutioita ja kuvasuhteita (16:9, 19.5:9, 20:9, 21:9 jne.), joten ihanteellisessa tilanteessa taustakuvat tulisi suunnitella vastaamaan näytön natiiviresoluutiota tai ainakin säilyttämään sama kuvasuhde ja jättämään riittävästi tilaa loville ja palkeille.

Kuvasuhde, resoluutio, näytön koko ja tiheys: keskeiset käsitteet

Kuvasuhde on leveyden ja korkeuden suhde (esimerkiksi 19.5:9 tai 20:9 ). Se määrittää kankaan muodon; jos sitä ei noudateta, järjestelmän on rajattava tai lisättävä kaistoja, ja siitä alkavat rajausongelmat.

Resoluutio ilmaisee pikselien määrän leveydessä ja korkeudessa (esimerkiksi 1080 × 2400 ). Mitä korkeampi resoluutio, sitä enemmän yksityiskohtia kuvassa näkyy, edellyttäen, että alkuperäinen kuva on riittävän laadukas käsittelemään kyseisen koon ilman pikselöitymistä.

Näytön koko (mitattuna diagonaalisesti tuumina) ei kerro, kuinka monta pikseliä siinä on, vaan ainoastaan ​​kuinka fyysinen "koko" paneeli on. Kahdella 6,5-tuumaisella puhelimella voi olla eri resoluutiot; siksi taustakuvia luotaessa tärkeintä on todellinen pikselimäärä , ei näytön koko.

Pikselitiheys (PPI) tarkoittaa sitä, kuinka monta pikseliä mahtuu yhdelle tuumalle. Se vaikuttaa sisällön terävyyteen, mutta staattisen taustan kohdalla tärkeintä on viedä se oikeilla pikselimitoilla . Tyypillinen 72 dpi:n ja 300 dpi:n välinen keskustelu pätee myös tulostusmaailmaan; näytöillä, jos kuvan koko on 1080 × 2400 pikseliä, se näyttää yhtä terävältä 72 dpi:n kuin 300 dpi:n tarkkuudella.

Tyypilliset koot ja mittasuhteet alustan ja tuotemerkin mukaan

Uudemmissa iPhone-malleissa on terävämmät näytöt, joten on hyvä käyttää näyttöjä täydentäviä korkearesoluutioisia taustakuvia. Uusimpien mallien kuvasuhteet ovat tyypillisesti esimerkiksi 19.5:9 ja resoluutiot esimerkiksi 1170 × 2532 (iPhone 13) tai noin 1179 × 2556 (iPhone 14 Pro).

Android-näytöille ei ole yhtä ainoaa standardia. Se vaihtelee merkin ja mallin mukaan: on olemassa HD-näyttöjä (1280 × 720), Full HD+ (esimerkiksi 1080 × 2400 ), QHD+ (1440p muunnelmina, kuten 3200 × 1440) ja jopa 4K joissakin hyvin tietyissä malleissa. Tärkeintä on kunnioittaa näyttösi käyttämää kuvasuhdetta ja sen todellista resoluutiota.

iPhone

Nykyaikaisissa iPhoneissa yhdistyvät tiheät näytöt ja pitkänomaiset mittasuhteet. Esimerkiksi malleissa, joissa ei ole Koti-painiketta, on viitteitä 1170 × 2532 tai 1179 × 2556. Tämä tarkoittaa pystysuuntaisia ​​näyttöjä, jotka säilyttävät noin 19.5:9-kuvasuhteen ja jättävät tilaa lovelle ja palkeille.

Android (yleiskatsaus)

Yhtä ainoaa kokoa ei ole. Monet nykyiset näytöt käyttävät Full HD+- tai QHD+-versioita, joiden kuvasuhteet ovat 18:9, 19:9, 19.5:9 tai 20:9. Hyvin yleinen näyttökuva on nykyään 1080 × 2400 (20:9) keski- ja huippuluokan näytöillä, vaikka poikkeuksiakin on runsaasti.

Google Pixel

Pixel-tuoteperhe muuttuu sukupolven myötä. Esimerkiksi Pixel 6 käyttää 1080 × 2400 pikselin resoluutiota ja 20:9-kuvasuhdetta. Ihannetapauksessa puhelin tulisi suunnitella kyseisen kuvasuhteen mukaan ja peittää alueet, jotka käyttöliittymä saattaa rajata.

Samsung Galaxy

Galaxy-sarjassa on tyypillisesti eloisat AMOLED-näytöt, joissa on Full HD+- tai QHD+-paneelit. Joissakin malleissa on 1080 × 2400 (20:9) resoluutio, kun taas huippumalleissa on 1440p (esimerkiksi 3200 × 1440). Alkuperäisen kuvasuhteen säilyttäminen estää ärsyttävän rajauksen.

Sony Xperia

Xperia erottuu edukseen "elokuvamaisten" formaattien, kuten 21:9, ansiosta. Joissakin huippumalleissa on resoluutioita, kuten 3840 × 1644 px (4K pystysuuntainen "ultrawide" elokuva- ja multimediasisällölle).

Terävä AQUOS

AQUOS-näytöt priorisoivat tarkasti kalibroituja paneeleja, mutta resoluutiot vaihtelevat mallin mukaan. Tarkista näyttösi ja luo taustakuvia samalla kuvasuhteella täydellisen istuvuuden varmistamiseksi.

Näin saat selville matkapuhelimesi tarkan resoluution

Varmin tapa löytää täydellinen koko taustakuvallesi on tarkistaa laitteellasi otetun kuvakaappauksen pikselimitat. Jos kuvakaappauksen koko on 1080 × 2400 pikseliä, se on ihanteellinen pohja taustakuvallesi.

Android: Tarkistamisen vaiheet

1. Ota kuvakaappaus painamalla virtapainiketta ja äänenvoimakkuuden vähennyspainiketta samanaikaisesti (mallista riippuen se voi vaihdella hieman, mutta idea on sama). Tallenna se galleriaasi.
2. Avaa kuvakaappaus puhelimesi valokuvat/galleria-sovelluksessa ja napauta tietokuvaketta, jota yleensä edustaa "i". Etsi mitat.
3. Näet tietoja, kuten 720 × 1560, 1080 × 2400 jne. Nämä luvut ovat natiivi resoluutio näytön kyseisessä tilassa.
4. Käytä taustan valmisteluun täsmälleen samaa kokoa tai suurempaa kokoa säilyttäen samalla kuvasuhde.

iPhone: Tarkistamisen vaiheet

1. Ota kuvakaappaus (malleissa, joissa on Face ID, paina virta- ja äänenvoimakkuuden lisäyspainikkeita samanaikaisesti). Se tallennetaan Kuviin.
2. Avaa Kuvat-sovellus, etsi kuvakaappaus ja napauta tietopainiketta (i). Tarkista leveys × korkeus.
3. Uudemmissa malleissa näet jotain vastaavaa kuin 1179 × 2556. Suunnittele taustasi tässä koossa tai mittakaavassa säilyttäen samalla suhde supistusten välttämiseksi.

Joten mitä kuvasuhdetta minun pitäisi käyttää taustalleni?

Käytä samaa kuvasuhdetta kuin näytölläsi. Jos puhelimesi kuvasuhde on 20:9, luo 20:9-tausta (esim. 1080 × 2400, 1440 × 3200 jne.). Jos se on 19.5:9, säädä kangas tähän kuvasuhteeseen (esim. 1170 × 2532 tai 1179 × 2556). Tee tilaa loville, kameroille ja tilariveille, jotta pääkohde ei peity.

Hyödyllisiä esimerkkejä: Google Pixel 6:lle suunnittelun tarkkuus on 1080 × 2400 (20:9) . iPhone 14 Prolle hyvä vertailuarvo on 1179 × 2556 (noin 19.5:9). Jos haluat lisätilaa parallaksitehosteille, vie suurempi kuva säilyttäen kuvasuhteen ja keskitä kohde.

Onko olemassa "standardia", joka toimii kaikkeen? Ei. 1080 × 1920 (Full HD 16:9) oli klassikko vuosia, mutta nykyään monet puhelimet käyttävät suurempia kuvasuhteita. Jos et halua tehdä asioista liian monimutkaisia, suunnittele laitteesi näyttö mielessä, niin vältät rajaamisen.

Taustojen luominen ja säätäminen: sovellukset, muokkaaminen ja rajaaminen

Jos haluat yksinkertaisen ratkaisun, laitteellesi sopivilla taustakuvilla varustettu mukautussovellus tekee siitä helppoa. Saatavilla on sovelluksia, jotka tarjoavat laitteen mukaan suodatettuja kirjastoja (jopa yhteensopivilla kuvakkeilla ja widgeteillä, kuten WidgetClub ), joiden avulla taustakuvan voi määrittää muuttamatta näytön kokoa.

Jos pidät suunnittelusta, ohjelmat, kuten Adobe Photoshop tai GIMP, mahdollistavat koon muuttamisen ja rajaamisen tarkasti, ja jos sinun on poistettava elementtejä, käytä opasta valokuvien objektien poistamiseen.

Toinen erittäin käytännöllinen vaihtoehto on käyttää verkkotyökaluja, kuten Canvaa . Voit avata tyhjän mallin ja asettaa mukautetun koon pikseleinä (esimerkiksi 1080 × 2400 20:9-kuvasuhteelle tai 1179 × 2556). Jos se sopii sinulle, käytettävissä on myös malleja (kuten "neon-taustakuva mobiililaitteille" -tyyli), joita voit sitten mukauttaa puhelimesi tarkkoihin mittoihin .

Canvassa tyypillinen työnkulku on seuraava: luo pystysuuntainen suunnittelu, lataa valokuvat, sommittele (lisää tekstiä, kuvakkeita tai useita kerroksia) ja lataa JPG-muodossa. Kun käytät 1080 × 1920 -tarkkuutta mukavuussyistä, muista, että monissa nykyisissä matkapuhelimissa on korkeammat näytöt, joten rajaa tai muuta kankaan kokoa näytön resoluutioon ennen vientiä.

Voit käyttää myös puhelimesi sisäänrakennettua rajaustyökalua. Uutta taustaa luotaessa useimmat järjestelmät antavat sinun säätää rajausta ja kuvasuhdetta täydellisen istuvuuden saavuttamiseksi ilman ulkoisen sovelluksen avaamista.

Suositellut tiedostomuodot

JPG/JPEG : tasapainoisin tiedostomuoto taustoille, joka tarjoaa hyvän laadun ja hallittavan tiedostokoon. Säädä pakkausta välttääksesi liiallisen tiedostokoon tai terävyyden heikkenemisen.

PNG : hyödyllinen, jos tarvitset läpinäkyvyyttä tai haluat välttää pakkausartefakteja erittäin latteissa grafiikoissa, vaikka tiedosto on yleensä suurempi kuin vastaava JPG-tiedosto.

HEIC : tehokas iOS-muoto, jolla on hyvä laatu-koko-suhde. Muista yhteensopivuus, jos aiot käyttää taustaa muissa järjestelmissä, jotka eivät tue HEICiä natiivisti.

72 ppi:n myytti (ja miksi pikselit hallitsevat näyttöä)

Näyttöjen kohdalla 72 dpi:n tai 300 dpi:n merkinnällä ei ole merkitystä. 150 × 200 pikselin kuva näyttää samalta molemmilla dpi-asetuksilla, koska tärkeintä on sen pikselikoko. Työskentele aina pikselimittojen mukaan ja unohda dpi, ellet aio tulostaa.

Joten taustakuvia luodessasi keskity kuvakaappauksesi pikselimittoihin. Jos käytät oikeaa kuvasuhdetta ja riittävää resoluutiota, saat terävän ja selkeän taustan ilman rajausta.

Yleiset kuvasuhteet ja niiden visuaalinen vaikutus

16:9 oli vallitseva kuvasuhde aiemmissa sukupolvissa. Se on edelleen käytössä näytöissä ja televisioissa, mutta nykyisissä mobiililaitteissa on korkeammat näytöt, joten 16:9-tausta jättää usein aukkoja tai se on rajattava nykyaikaisissa laitteissa.

18 :9- ja 19:9 -kuvasuhteet saavuttivat suosiota, koska ne mahdollistavat ohuemmat näytöt tekemättä puhelimesta liian leveää. Ne sopivat erinomaisesti vierittämiseen ja sovelluksiin , mutta on suositeltavaa suunnitella taustakuvat, jotka kunnioittavat tätä ylimääräistä pystysuuntaisuutta.

19.5 :9 -kuvasuhde on hyvin yleinen iPhoneissa ja useissa Android-laitteissa. Tämä suhde sijoittaa tärkeän sisällön pois loven/"saarekkeen" ja alapalkin ulkopuolelle, mikä luo "hengähdystauon".

21:9-kuvasuhde (tyypillinen Xperialle) on loistava elokuville ja TV-ohjelmille. Jos suunnittelet tätä kuvasuhdetta varten, muista, että kanvas on erittäin korkea; aseta pääaihe keskelle, jotta käyttöliittymä ei peitä sitä.

Miksi koolla ja resoluutiolla on niin paljon merkitystä myös sovelluksissa ja peleissä?

Esteettisten seikkojen lisäksi koko ja resoluutio vaikuttavat tekstin selkeyteen, luettavuuteen ja suorituskykyyn. Korkeampi resoluutio tarjoaa enemmän yksityiskohtia, mutta vaatii myös enemmän resursseja. Jokapäiväisessä käytössä terävän ja oikeasuhtaisen taustan valitseminen parantaa yleistä käyttökokemusta .

Kehittäjille useille laitteille suunnittelu edellyttää mukautuvien asettelujen käyttöä, testaamista useilla näytöillä ja skaalautuvien resurssien valmistelua. Jos matalatiheyksiselle näytölle suunniteltu grafiikka näytetään korkeatiheyksisellä näytöllä, se näyttää sumealta, jos suurempaa versiota ei ole saatavilla.

Vektorigrafiikka (SVG) skaalautuu laadun kärsimättä, täydellinen kuvakkeille tai muodoille. Valokuville tai tekstuureille on luotava useita rasteriversioita eri tiheyksille. Tämä varmistaa terävyyden sekä pienillä että korkearesoluutioisilla näytöillä.

Myös suunta on tärkeä. Monet ihmiset käyttävät pystysuuntaista tilaa viestien lähettämiseen ja selaamiseen ja vaakasuuntaista tilaa videoiden katseluun tai pelaamiseen. Hyvin suunniteltu sovellus (ja hyvä tausta) mukautuu saumattomasti ilman hankalia leikkauksia tai vaikeasti saavutettavia elementtejä, kun käännät laitettasi.

Asiaankuuluvat hyvät käytännöt

• Mukautettava asettelu: säilytä mittasuhteet, käytä joustavia asetteluja ja skaalautuvia resursseja.
• Todellisen maailman testitTarkista suunnittelusi eri mobiililaitteilla ja näytön tiheyksillä havaitaksesi ongelmat varhaisessa vaiheessa.
• Optimoi media: vie useita resoluutioita, käyttää tehokkaita formaatteja (SVG/WebP/HEIC sopivuudesta riippuen).
• Tasapaino laadun ja suorituskyvyn välilläSuuri kuva voi olla liian painava; etsi optimaalinen kohta.

Työkalut ja suositeltu työnkulku taustojen suunnitteluun

1) Määritä todellinen resoluutio kuvakaappauksella (kuten kuvassa). 2) Luo kanvas täsmälleen samassa koossa. 3) Sijoita pääkohde pois lovien ja palkkien läheltä. 4) Vie JPG-tiedostona kohtuullisella pakkauskoolla, jotta tiedostokoko ei ole liian suuri ja kuva pysyy terävänä.

Jos käytät Canvaa , aloita mukautetulla pikselipohjaisella suunnittelulla, kokeile malleja (kuten neonvärejä), lataa kuvat, säädä tekstiä ja tehosteita ja lataa ne JPG-muodossa. Jos olet tottunut Photoshopiin/GIMPiin, käytä apuviivoja ja maskeja kohteen keskittämiseen ja jätä "turvamarginaali" järjestelmän rajausta varten.

Niille, jotka haluavat maksimaalista mukautettavuutta, erikoistuneet mukautussovellukset tarjoavat täydellisiä paketteja: taustoja, kuvakkeita ja widgetejä. Jotkut jopa mahdollistavat kaiken muuttamisen yhtenäisten mallien avulla; voit aloittaa omista valokuvistasi tai käyttää valmiita kirjastoja ja rajata kuvia murehtimatta mitoista.

Case-tutkimukset: Pixel 6 ja iPhone 14 Pro

Google Pixel 6: Toimii 1080 × 2400 px:n tarkkuudella (20:9) . Jos luot taustan, jossa on hienoja yksityiskohtia (viivoja, typografiaa), vie se kyseisellä resoluutiolla tai hieman suuremmalla samalla kuvasuhteella ja vältä JPG-tiedoston liiallista pakkaamista.

iPhone 14 Pro: Erinomainen referenssikoko on 1179 × 2556 pikseliä (noin 19.5:9). Jätä dynaamisen saarekkeen ja alapalkin ympärille hieman tilaa. Jos käytät syvyystehostetta, varmista, että etuala on selkeä, jotta järjestelmä voi erottaa sen taustasta.

Taustan lisääminen laitteellesi menettämättä kehystä

Taustaa asetettaessa iOS ja Android yleensä mahdollistavat zoomauksen sisään/ulos ja uudelleen rajaamisen. Varmista, ettet zoomaa liikaa (menetät terävyyden) ja pidä kohde keskellä. Jos järjestelmä tarjoaa "perspektiivi"- tai "parallaksi"-tilan, aktivoi se vain, jos olet jättänyt reunoille ylimääräistä marginaalia.

Androidilla monet käynnistysohjelmat antavat sinun asettaa erilliset taustakuvat aloitus- ja lukitusnäytöille. Tarkista molemmat, koska käyttöliittymät eroavat toisistaan ​​(kello, ilmoitukset, pikavalinnat) ja toinen saattaa kattaa tärkeitä alueita suunnittelussasi.

Vinkkejä tiedostojen laatuun ja kokoon

Älä jää jumiin 4K-tarkkuuteen, ellei näyttösi ole 4K tai tarvitse paljon tilaa rajaukselle ja tehosteille. 85–90 %:n JPG-kuva puhelimesi natiiviresoluutiolla on yleensä enemmän kuin tarpeeksi ja säästää akkua ja tallennustilaa.

Jos tausta on hyvin graafinen (yksiväriset värit, suuri teksti), kokeile PNG-muotoa ja vertaa kokoa/tulosta. IPhonella HEIC voi olla loistava vaihtoehto laadun säilyttämiseksi ilman tiedoston liiallista paisuttamista, kunhan et aio käyttää sitä uudelleen muissa järjestelmissä.

Jos pitäydyt yhdessä keskeisessä ideassa, olkoon se tämä: selvitä puhelimesi todellinen resoluutio kuvakaappauksella, suunnittele tausta kyseisen kokoiseksi (tai säilytä sama kuvasuhde, jos skaalaat), jätä tilaa loville ja palkeille ja vie tiedosto tehokkaassa muodossa (mieluiten JPG). Näiden vaiheiden noudattaminen varmistaa, että taustasi sopii täydellisesti ja näyttää virheettömältä.