Näin sovitat saman kuvan eri somejulkaisuihin

Valitse käyttöpaikka ennen pikselimittoja

Somekuva voi tarkoittaa syötejulkaisua, tarinaa, profiilikuvaa tai videon pikkukuvaa. Yksikin palvelu voi käyttää useita muotoja. Päätä jokaisen version käyttöpaikka ennen esiasetuksen valitsemista.

Tarkista kohdepalvelun nykyiset latausvaatimukset ja esikatselu. Työkalun esiasetus on kätevä lähtökoko, ei takuu jokaiselle käyttöpaikalle tai tilille. Tämä opas keskittyy sommittelun sovittamiseen yleispätevän alustakokotaulukon ylläpitämisen sijaan.

Kirjaa tavoitemuoto, vaaditut mitat ja se, mitä katsojan pitää tunnistaa. Tuotelanseerauksessa se voi olla koko tuote ja sen nimi. Tapahtumassa se voi olla kasvot, päivämäärä ja lyhyt otsikko. Tärkeysjärjestys kertoo, mitä ei saa rajata pois.

Tee erilliset versiot Pixilolla

1. Päätä, mikä osa alkuperäisestä pitää näkyä kussakin julkaisussa.
2. Avaa Somekuvien koot ja valitse alkuperäinen JPG-, PNG- tai WebP-kuva.
3. Valitse tarvittava leveys ja korkeus. Käytä omia mittoja, jos esiasetus ei vastaa käyttökohdetta.
4. Valitse koko kuvan näyttäminen tai ruudun täyttäminen. Säädä rajauksen paikkaa esikatselussa ja tarkista kasvot, tuotteet ja tekstit.
5. Lataa tulos. Nimeä kukin versio erikseen ja tarkista julkaisupalvelun esikatselu.

Kun haluat päättää rajauksen tarkasti, käytä ensin rajaustyökalua. Suhteen 4:5 saat esimerkiksi 1600 pikselin levyisellä ja 2000 pikselin korkuisella rajauksella. Tarkista rajauksen mitat. PNG-välikopio on valinnainen tapa välttää uusi häviöllinen tallennus ennen lopullista versiota.

Työkalu hyväksyy yhden enintään 25 Mt:n JPG-, PNG- tai WebP-kuvan kerrallaan. Valitse neliö-, pysty-, tarina- tai vaakakoko tai syötä molemmat mitat itse. Tarkista kohdepalvelun vaatimukset; esiasetusten nimet eivät määritä sen nykyisiä sääntöjä.

Valitse JPG, PNG tai WebP suoraan työkalussa. JPG käyttää kiinteää laatuasetusta, joten tarkista pienet yksityiskohdat. PNG voi säilyttää läpinäkyvyyden. Jo ladatusta PNG:stä voit tehdä JPG-kopion myös työkalulla PNG–JPG. Tarkista mitat ja tiedostokoko ennen julkaisemista.

Suunnittele neliö-, pysty- ja vaakarajaukset

Jätä tilaa tärkeän sisällön ja reunojen väliin ja tarkista todellinen käyttöpaikka. Käyttöliittymän painikkeet, esikatselut ja pikkukuvat voivat peittää tai rajata eri alueita. Yksi marginaali ei ole turvallinen kaikkialla.

Leveälle kuvalle aseteltu ryhmämuotokuva ei välttämättä sovi kapeaan rajaukseen. Jos yksi sommittelu ei pidä kaikkia näkyvissä, käytä toista valokuvaa tai rakenna suunnitelma uudelleen. Kuvan venyttäminen kaventaa ihmisiä eikä ratkaise asetteluongelmaa.

Ymmärrä rajauksen ja koon muuttamisen ero

Rajaus poistaa osan kuvasta. Suhteellinen koonmuutos muuttaa pikselimittoja säilyttäen muodon. Sovittaminen erimuotoisen kuvapohjan sisään säilyttää koko kohteen mutta jättää ympärille tilaa. Valitse tavoitettasi vastaava toiminto.

Esimerkiksi 4000 × 3000 valokuvan kuvasuhde on 4:3. Neliörajaus voi käyttää 3000 × 3000 aluetta ennen koon muuttamista 1080 × 1080 pikseliin. Jos viet koko 4000 × 3000 kuvan suoraan työkaluun, joka pakottaa sen kokoon 1080 × 1080, mittasuhteet muuttuvat. Kohde voi näyttää alkuperäistä leveämmältä tai kapeammalta.

Verkkosivu tai esikatselu voi myös rajata kuvaa muuttamatta tiedostoa. MDN:n object-fit-ohje kuvaa kuvalaatikon täyttämisen, sisään sovittamisen ja peittämisen eroa. Siksi kannattaa tarkistaa lopullinen käyttöpaikka pelkän ladatun kuvan lisäksi.

Esimerkki: sovita tuotekuva kolmeen sommitteluun

Oletetaan, että 4000 × 3000 valokuvassa on muki lähellä keskikohtaa ja paljon pöytää sen ympärillä. Tarvitset neliökortin, pystytarinan ja vaakapikkukuvan. Seuraavat mitat ovat havainnollistavia vientivalintoja, eivät alustavaatimuksia.

Tee neliöön 3000 × 3000 rajaus, jossa muki ja kahva näkyvät kokonaan, ja vie se kokoon 1080 × 1080. Etsi pystyversioon 9:16 alue, joka säilyttää koko mukin ja riittävästi ympäristöä. Muuta sen koko 1080 × 1920 pikseliin vain, jos rajatussa lähteessä on riittävästi pikseleitä. Kokeile vaakaversioon 4000 × 2250 rajausta ja muuta sen koko 1280 × 720 pikseliin.

Tarkista kahva kaikissa kolmessa versiossa. Jos se katoaa kapeasta rajauksesta, siirrä rajausta tai valitse toinen lähtökuva mukin venyttämisen sijaan. Jos tärkeä otsikko on osa leveää kuvaa, rakenna sen sijoittelu uudelleen suunnittelueditorissa ennen pystyversion vientiä.

Tarkista latauksen esikatselu ja teksti

Katso jokaista versiota puhelimen kokoisena. Lue otsikko zoomaamatta ja tarkista kontrasti kuvaa vasten. Jos kirjaimet ovat liian pieniä, lyhennä tekstiä tai muuta asettelua. Korkeampi vientilaatu ei tee pienestä kappaleesta luettavaa.

Tarkista julkaisun esikatselusta päälle tulevat elementit ja odottamattomat rajaukset. Jos palvelu pakkaa latauksen uudelleen, tarkista myös julkaistu tulos. Vertaa sitä paikalliseen tiedostoon ennen kuin päätät, johtuuko ongelma omasta viennistä vai palvelun käsittelystä.

Pidä pikselimitat ja tavukoko erillään. Jos oikeanmuotoinen tiedosto on liian suuri, käytä Pakkaa tavoitekokoon -työkalua säilyttäen vaaditut mitat. Koon valinnan perusteet ovat oppaassa koon muuttaminen ilman venymistä.

Usein kysytyt kysymykset

Voinko käyttää samaa tiedostoa kaikissa käyttöpaikoissa?

Joskus, mutta tarkista jokainen esikatselu. Neliösommittelu voi sopia useisiin syötteisiin mutta näyttää huonosti rajautuneelta tai jättää ylimääräistä tilaa pystyjulkaisussa.

Rajaako esiasetuksen valinta kuvan puolestani?

Näytä koko kuva säilyttää kaikki reunat, mutta kuvan ympärille voi jäädä tilaa. Täytä ruutu rajaa kuvaa venyttämättä sitä. Säädä rajauksen paikkaa vaaka- tai pystysuunnassa, jotta tärkeät yksityiskohdat jäävät näkyviin.

Entä jos alkuperäinen on rajauksen jälkeen liian pieni?

Käytä suurempaa alkuperäistä, väljemmäksi tehtyä rajausta tai rakenna suunnitelma uudelleen. Pienen rajauksen suurentaminen ei palauta puuttuvia yksityiskohtia.