Rajaa kuva ympyräksi ilmaiseksi — Pyöreän profiilikuvan tekijä

Ympyrä vai pyöristetty neliö: kumpaa muotoa käyttää

Muoto ei oikeastaan ole sinun valintasi — alusta lisää oman maskinsa avatarisi päälle näyttöhetkellä, etkä voi ohittaa sitä. Se, mitä todella valitset, on se, vastaako tiedostosi tätä maskia.

Tällä on väliä, koska ympyrä leikkaa pois noin 21 % neliöstä, kokonaan kulmista. Kun rajaat itse ympyräksi, näet tarkalleen, mikä jää jäljelle. Jos lataat täyden neliön ja toivot parasta, alustan ympyrä leikkaa pois sen, mitä kulmiin sattui jäämään: hatun laidan, hartian, puolikkaan logon.

Nyrkkisääntö: kasvot kestävät ympyrän, sanamerkit tarvitsevat pyöristetyn neliön. Kasvot ovat jo valmiiksi suunnilleen pyöreät, joten kulmissa ei koskaan ollut mitään oleellista. Tekstiä sisältävä logo on yleensä leveämpi kuin korkea, ja ympyrä katkaisee sanan päät. Siksi Slack, iOS ja Play-kauppa käyttävät kuvakkeissaan pyöristettyjä neliöitä, kun taas jokainen some-alusta käyttää ihmisille ympyröitä.

Miksi läpinäkyvä PNG on ylimääräisten tavujen arvoinen

JPG-tiedostoon rajattu ympyrä ei ole oikeasti ympyrä. JPG:ssä ei ole alfakanavaa, joten neljän kulman pitää sisältää jotain — yleensä valkoista. Valkoisella sivulla kukaan ei huomaa sitä. Aseta se avatar tummalle teemalle, värilliselle kortille, esitykselle tai videopäällykselle, ja pään ympärille ilmestyy neljä valkoista kolmiota.

PNG:ssä ja WebP:ssä on molemmissa alfakanava, joten kulmat tallentavat ”ei mitään” ja ympyrä sulautuu siististi mihin tahansa taustaan. Siksi PNG on tässä oletuksena. WebP tekee saman noin kolmasosalla tavuista ja jokainen nykyselain osaa lukea sitä — mutta jotkin latauslomakkeet ja vanhemmat työpöytäohjelmat hylkäävät sen tiedostopäätteen yhä, joten PNG on turvallisin valinta, kun luovutat tiedoston toisen järjestelmään.

Ainoa syy valita JPG on tiedostokoon yläraja. Jos lomake vaatii JPG:tä tai rajoittaa koon muutamaan kymmeneen kilotavuun, valitse tässä JPG ja aseta taustaväri samaksi kuin kohdesivulla oikeasti käytetään, jotta kulmat katoavat siihen.

Kasvojen rajaaminen niin, että ne erottuvat vielä 32 pikselin kokoisena

Avatariasi ei juuri koskaan nähdä siinä koossa, jossa sen veit ulos. Kommenttiketjussa se on 32–40 pikseliä leveä. Siinä koossa jäljellä ovat vain pään ääriviiva, kasvojen ja taustan välinen kontrasti sekä suunnilleen silmien sijainti. Kaikki muu on vain sotkua.

Rajaa siis tiukemmin kuin tuntuu luontevalta. Täytä noin 60–70 % ympyrän korkeudesta päällä, aseta silmät hieman keskiviivan yläpuolelle ja jätä ohut rako hiusten yläpuolelle, jotta rajaus ei näytä sattumanvaraiselta. Levoton tausta on selvästi yleisin virhe: se kilpailee harvoista käytettävissä olevista pikseleistä ja muuttaa koko pienoiskuvan kohinaksi. Jos taustasi on sekava, yksivärinen tai sumennettu tausta näyttää ympyrärajauksen takana paremmalta kaikissa kokoluokissa.

Käytännön testi: vie avatar ulos ja katso sitä sitten tiedostoselaimessasi pienimmällä pienoiskuva-asetuksella. Jos et tunnista siitä itseäsi, ei kukaan muukaan tunnista.

iOS:n squircle selitettynä

Applen sovelluskuvakkeet eivät ole pyöristettyjä suorakulmioita. Pyöristetty suorakulmio yhdistää suorat reunansa neljänneskaaren muotoiseen kulmaan, ja kaarevuus muuttuu tässä liitoskohdassa äkillisesti — silmä lukee sen pienenä notkahduksena. Apple käyttää sen sijaan superellipsiä , jossa kaarevuus kasvaa asteittain reunasta alkaen, joten ääriviivassa ei ole lainkaan näkyvää siirtymää. Suunnittelijat kutsuvat lopputulosta squircleksi.

Canvas osaa piirtää vain ympyränkaarikulmia, joten tämän työkalun pyöristetty-neliö-tila on pyöristetyn suorakulmion approksimaatio, ei todellinen superellipsi. Avatarin kokoisena ero on pari pikseliä per kulma, eikä kukaan huomaa sitä. Aseta kulmasäde noin 22 %:iin sivun pituudesta, niin päädyt samaan suhteeseen, jota Apple käyttää sovelluskuvakkeissaan; työkalun oletusarvo on 24 %, mikä vastaa sitä, miten Slack ja useimmat chat-sovellukset maskaavat avatarinsa.

Liukusäädin ulottuu 50 %:iin, mikä on ympyrä — pyöristetyllä neliöllä, jonka kulmasäde ulottuu puoleen sivun pituudesta, ei ole enää yhtään suoraa reunaa jäljellä. Tämän jatkuvuuden ansiosta molemmat muodot jakavat saman koodipolun sen sijaan, että olisivat kaksi erillistä työkalua.

Reunukset, ja miksi ne leikkautuvat

Rengas avatarin ympärillä on hyvä keino erottaa se levottomasta taustasta, ja se on ainoa tyylikeino, joka säilyy alustan oman maskin läpi — kunhan rengas on kuvasi sisäpuolella eikä sen ympärillä.

Tämä kannattaa täsmentää tarkasti. Jos työkalu lisää 320 px:n ympyrän ulkopuolelle 6 px:n reunuksen, tiedostosta tulee 332 px:n kokoinen, ja alusta skaalaa sen sitten uudelleen ja lisää oman pyöreän maskinsa — joka leikkaa renkaasi keskeltä ja jättää sen epätasaiseksi. Tämä työkalu piirtää reunuksen vientikoon sisäpuolelle täsmälleen pyytämääsi kokoon, joten 320 px pysyy 320 px:nä ja rengas osuu juuri siihen reunaan, jota maski odottaa. Reunuksen liukusäädin on rajattu 12 %:iin sivun pituudesta samasta syystä: sen jälkeen kyseessä ei enää ole rengas vaan kehys.

Miksi rajaaminen selaimessa on yksityisempää

Useimmat ”rajaa ympyräksi verkossa” -sivustot lataavat valokuvasi palvelimelle, rajaavat sen siellä ja lähettävät takaisin. Oman kasvokuvan kohdalla tämä on merkittävä ero: jonkun toisen levylle jää kopio, jota koskee mikä tahansa sen kuukauden säilytyskäytäntö, usein myös käyttöehtojen lauseke, joka antaa heille lisenssin siihen.

Resizolla ei ole taustajärjestelmää, joka vastaanottaisi kuvia. Rajaus tapahtuu välilehdelläsi selaimen omalla canvas-rajapinnalla. Kaksi tapaa tarkistaa tämä: avaa selaimesi verkkopaneeli ja katso, ettei mitään lähetetä rajauksen aikana, tai katkaise internetyhteys sivun latautumisen jälkeen ja rajaa silti — se toimii yhä.

Hyödyllinen sivuvaikutus: uudelleenkoodaus poistaa EXIF-metatiedot, joten puhelimesi alkuperäiseen kuvaan kirjoittamat GPS-koordinaatit ja aikaleima eivät kulje mukana julkisesti julkaisemasi avatarin mukana. Jos tarvitset kyseiset metatiedot, säilytä alkuperäinen tiedosto.