Puolen millimetrin siirtymän havainnut pikseli on jokaiselle front-end-kehittäjälle tuttu tehtävä. Kuvakaappaus, zoomaus grafiikkaeditorissa, takaisin selaimeen ja sama toistuu kymmeniä kertoja tunnissa. Kun analysoit jonkun toisen taittoa tai selvität, miten selain renderöi tietyn käyttöliittymäelementin, prosessi venyy minuuteiksi.

Open Broadcaster Software (OBS) on ilmainen, avoimen lähdekoodin striimaustyökalu. Useimmat tuntevat sen Twitchin ja YouTuben ohjelmistona, mutta OBS:ssä on vähemmän tunnettu tila: reaaliaikainen digitaalinen suurennuslasi. Kohdistat kaappausalueen siihen ruudun osaan, jota tarvitset, venytät sen täyttämään ikkunan, ja jokainen pikseli on näkyvissä ilman kuvakaappausten tallentamista tai ohjelmasta toiseen hyppimistä.

Alta löydät vaiheittaiset ohjeet OBS:n määrittämiseen pikselitarkastajaksi, vaihtoehtoisen tavan käyttää Windowsin sisäänrakennettua suurennuslasia sekä rehellisen pohdinnan siitä, milloin tätä tekniikkaa todella tarvitaan ja milloin se on liioittelua.

💡 Nopea yleiskatsaus:

• Asenna OBS ja lisää "Näytön kaappaus" -lähde
• Rajaa kuva halutulle alueelle Alt-näppäimellä ja punaisilla kahvoilla
• Venytä alue täyttämään ikkuna ja valitse "Point"-skaalaus
• Saat reaaliaikaisen suurennuslasin ilman pehmennystä, pikselit näkyvät sellaisinaan
• Yhdelle näytölle on sisäänrakennettu vaihtoehto: Windowsin näytön suurennuslasi

Vaihe 1: OBS Studion asentaminen

Lataa OBS Studio viralliselta sivustolta. Ohjelma on ilmainen ja saatavilla Windowsille, macOS:lle ja Linuxille. Asennus on suoraviivainen: ohjattu toiminto opastaa läpi muutamalla klikkauksella. Käynnistyksen jälkeen näet mustan esikatseluikkunan ja paneelin, jossa on lähteet, kohtaukset ja äänimikseri.

Kohtauksia ja ääntä ei tarvita tässä tehtävässä. Huomio keskittyy kokonaan Lähteet-paneeliin.

Vaihe 2: "Näytön kaappaus" -lähteen luominen

Klikkaa Lähteet-paneelissa "+" ja valitse Näytön kaappaus. Anna lähteelle mikä tahansa nimi ja klikkaa "OK".

Jos sinulla on useita näyttöjä, hienoa: valitse se, jolla suurennettava kohteesi sijaitsee. Yksikin näyttö toimii, mutta silloin OBS:n sijoittamiselle jää vähemmän vapaata tilaa.

Vaihe 3: Kuvan rajaaminen kohteeseesi

Tämä on avainvaihe. Pidä Alt pohjassa ja vedä punaisista kahvoista, jotka ilmestyvät esikatselun reunoille. Rajaa kuva niin, että vain kiinnostava alue tallentuu: painike, kuvake, tekstirivi, kahden lohkon liitoskohta.

Sääntö on yksinkertainen: mitä pienempi kaappausalue, sitä suurempi lopullinen suurennos. Jos rajasit liikaa, käytä Alt + kahvaa uudelleen säätääksesi.

Vaihe 4: Venytys ja skaalaus

Tartu nyt esikatselun kulmiin (pitämättä mitään näppäintä pohjassa) ja venytä kuva täyttämään koko OBS-ikkuna. Tämän jälkeen klikkaa esikatselualuetta hiiren kakkospainikkeella ja valitse Skaalauksen suodatus → Point.

Tämä asetus poistaa pehmennysalgoritmit käytöstä. "Point"-tilassa OBS näyttää pikselit sellaisinaan, neliö neliöltä, ilman bilineaarista tai bikubista interpolointia. Näet tarkalleen, mitä selain tai sovellus renderöi: jokaisen alipikselin värin, viivan paksuuden, liukuvärisiirtymät.

Jos valitset minkä tahansa muun skaalaustilan, saat sumean kuvan. Pikselitarkasteluun vain "Point" toimii.

Vaihe 5: Suurennuslasin käyttö

Määritetty kohtaus toimii reaaliajassa. Avaa selain, jossa taittosi on, liikuta ikkunaa, ja OBS näyttää kaikki muutokset välittömästi ilman viivettä. Tämä on perustavanlaatuinen ero ketjuun "kuvakaappaus → editori → tarkistus": et keskeytä itseäsi etkä menetä kontekstia.

Tässä järjestelyssä on yksi haittapuoli: uhraat näyttötilaa. OBS vie osan näytöstä tai kokonaisen näytön. Työpöytäkoneella, jossa on kaksi näyttöä, tämä ei ole ongelma, mutta kannettavalla yhdellä näytöllä tila tuntuu selvästi ahtaalta.

Vaihtoehto: Windowsin näytön suurennuslasi

Jos OBS tuntuu liioittelulta kertaluonteiseen pikselitarkistukseen, Windowsissa on sisäänrakennettu työkalu. Paina Win + + (plus-näppäin numeronäppäimistöllä tai Backspace-näppäimen vieressä) käynnistääksesi näytön suurennuslasin.

Oletuksena se näyttää suurennetun alueen koko näytön tilassa. Vaihda telakoituun ikkunatilaan painamalla Ctrl + Alt + D, jolloin näkyviin tulee kelluva paneeli, jota voit siirtää ja jonka kokoa voit muuttaa.

Windowsin suurennuslasi pehmentää pikselit oletuksena. Avaa suurennuslasin asetukset (rataskuvake paneelissa) ja poista valinta kohdasta Tasoita kuvien ja tekstin reunat. Tämän jälkeen kuva muuttuu rehelliseksi, ilman interpolointia.

Windowsin suurennuslasin etu: ei vaadi asennusta, toimii heti. Haittapuoli: vähemmän joustavuutta katselualueen koossa eikä "koko ikkuna = koko suurennuslasi" -tilaa kuten OBS:ssä.

Miksi pikseleitä tutkitaan suurennuslasilla

Käytännössä käytämme tätä tekniikkaa taittotyön ja designkatselmoinnin aikana, erityisesti silloin, kun haluamme tarkistaa, miten selain renderöi tietyn elementin. Kuvake retinalla näyttää erilaiselta kuin tavallisella näytöllä. Liukuväri voi aiheuttaa raidoitusta. Alipikselien tekstinpehmennys eroaa Windowsin ja macOS:n välillä. Ilman reaaliaikaista suurennusta nämä vivahteet eivät näy.

Korkearesoluutioisten näyttöjen ja Windowsin oletusnäytön skaalauksen yleistyttyä taistelu terävistä viivoista on siirtynyt uudelle tasolle. Se, mikä näyttää täydelliseltä 4K:lla, voi siirtyä puoli pikseliä Full HD:llä 125% skaalauksella.

VFX-alalla on termi "vitun pikseli" tilanteille, joissa artisti pakkomielteisesti hioo yhtä pikseliä kokonaiskuvan kustannuksella. Analogia on osuva: huomion ja perfektionismin välillä on hiuksenhieno raja. Pixar SIGGRAPHissa puhui pinnanalaisesta sironnasta, teknologiasta, joka puhaltaa eloa animoituihin hahmoihin. Useimmat katsojat eivät huomaa eroa. Mutta juuri tuo ero erottaa "hyvän" "erinomaisesta".

Verkkosuunnittelu toimii samalla tavalla: kävijä ei sano "tuo pikseli renderöityi väärin". Mutta yleinen laadun tuntu rakentuu tällaisista pienistä asioista. OBS-suurennuslasi on nopea tapa hallita näitä yksityiskohtia.

Koko prosessi asennuksesta skaalaukseen näytetään selkeästi tällä videolla:

⁉️🤔 Usein kysytyt kysymykset

OBS nykii skaalauksen aikana, mitä teen?

Tarkista ulostuloasetukset: Asetukset → Video. Pikselitarkasteluun et tarvitse 60 FPS:ää; aseta se 30:een tai jopa 15:een. Pidä peruskankaan resoluutio samana kuin näyttösi resoluutio. Jos se nykii integroidulla näytönohjaimella, vaihda renderöijäksi Direct3D 12 kohdassa Asetukset → Lisäasetukset → Videon renderöijä.

Pärjäänkö ilman toista näyttöä?

Kyllä, mutta näyttötila on tiukalla. Vinkki: pienennä kaikki tarpeettomat ikkunat, jätä selain taittosi kanssa ja OBS vierekkäin. Kannettavalla, jossa on Full HD -näyttö, voit realistisesti sijoittaa OBS:n kolmanneksen näytön leveydelle, mikä riittää pistokokeisiin. Jos se ei riitä, vaihda Windowsin suurennuslasiin Win + + -komennolla.

Onko vastaavaa macOS:lle?

OBS toimii macOS:llä täsmälleen samalla tavalla, näytön kaappauksella Display Capture- tai Window Capture -toiminnolla. "Point"-skaalaus on siellä nimeltään Point (sama suodatin esikatselun kontekstivalikossa). macOS:n sisäänrakennettu suurennuslasi on Option + Cmd + 8, mutta se ei tarjoa samaa rajausjoustavuutta kuin OBS.

Miten tarkistan tietyn pikselin koodissa?

Avaa selaimen DevToolsissa elementtitarkastaja ja vie hiiri kiinnostavan noodin päälle. Selain korostaa sen sivulla. Katso samalla OBS-ikkunaa; suurennettu alue näyttää jokaisen reunuksen, täytteen ja taustan pikselin. OBS + DevTools -yhdistelmä kattaa valtaosan pikselintarkasta taittotyöstä.

Tekstin reunojen pehmennys eroaa selainten välillä. Auttaako OBS minua näkemään tämän?

Kyllä, juuri tähän tämä tekniikka on hyödyllinen. Avaa sama taitto Chromessa ja Firefoxissa, kohdista OBS samaan tekstilohkoon, ja ero alipikselien renderöinnissä näkyy paljaalla silmällä. Se on erityisen havaittavaa ohuilla fonteilla (300 paino) ja vaalealla tekstillä tummalla taustalla.

Mitä pikselisuurennuslasi antaa käytännössä

Tämä tekniikka ei ole jokaista vedosta varten. Viiden lohkon laskeutumissivulle DevTools riittää. Mutta jos rakennat designjärjestelmää, debuggat mikroanimaatioita tai viimeistelet käyttöliittymää, jota tuhannet käyttäjät tulevat katsomaan, 10 minuuttia OBS-suurennuslasilla säästää tunteja väittelyä suunnittelijan kanssa siitä, "miksi se ei näytä oikealta".

Aloita pienestä: avaa nykyinen projektisi, kaappaa osio, jossa on kuvake ja tekstiä, ota "Point"-skaalaus käyttöön. Jos olet tyytyväinen näkemääsi, hienoa. Jos et, löysit juuri jotain, minkä voit korjata viidessä minuutissa.

Mitä työkalua sinä käytät pikselien tarkistamiseen taiton aikana: suurennuslasia, kuvakaappauksia vai luotatko selaimen tarkastajaan? Kerro kommenteissa.