Pool pikslit, mis on poole millimeetri võrra nihkunud, on ülesanne, mis on tuttav igale front-end arendajale. Kuvatõmmis, suurendamine graafikaredaktoris, tagasi brauserisse ja nii kümneid kordi tunnis. Kui analüüsid kellegi teise koodi või püüad mõista, kuidas brauser konkreetset UI elementi renderdab, venib protsess minutite pikkuseks.

Open Broadcaster Software (OBS) on tasuta avatud lähtekoodiga striimimistööriist. Enamik inimesi tunneb seda kui Twitchi ja YouTube'i tarkvara, kuid OBS-il on üks vähem tuntud režiim: reaalajas digitaalne luup. Suunad püüdmisala ekraani sellele osale, mida vajad, venitad selle akent täitma ja iga piksel on nähtav ilma kuvatõmmiseid salvestamata või programmide vahel ümber lülitumata.

Allpool leiad samm-sammult juhised OBS-i seadistamiseks pikslikontrollijana, alternatiivse meetodi, mis kasutab sisseehitatud Windowsi luupi, ning ausa arutelu selle üle, millal seda tehnikat tõeliselt vaja on ja millal on see liialdus.

💡 Kiirülevaade:

• Paigalda OBS ja lisa allikas „Display Capture"
• Kärbi kaader soovitud alale, kasutades Alt + punaseid pidet
• Venita ala akent täitma ja vali skaleerimiseks „Point"
• Saad reaalajas luubi ilma silumiseta, pikslid on näha sellistena, nagu nad on
• Ühe monitori puhul on olemas sisseehitatud alternatiiv: Windowsi ekraaniluup

1. Samm: OBS Studio paigaldamine

Laadi OBS Studio alla ametlikult veebisaidilt. Programm on tasuta ja saadaval Windowsile, macOS-ile ja Linuxile. Paigaldamine on lihtne: nõustaja juhendab sind paari klõpsuga. Pärast käivitamist näed musta eelvaate akent ning paneeli allikate, stseenide ja helimikseriga.

Stseene ja heli pole meie ülesande jaoks vaja. Kogu tähelepanu on Sources paneelil.

2. Samm: allika „Display Capture" loomine

Sources paneelil klõpsa „+" ja vali Display Capture. Anna allikale suvaline nimi ja klõpsa „OK".

Kui sul on mitu monitori, on see suurepärane: vali see, kus asub suurendamist vajav sihtmärk. Ka üks monitor töötab, sul on lihtsalt vähem vaba ruumi OBS-i paigutamiseks.

3. Samm: kaadri kärpimine sihtmärgini

See on võtmetähtsusega samm. Hoia all Alt ja lohista punaseid pidet, mis ilmuvad eelvaate servadele. Kärbi kaadrit nii, et püütakse ainult huvipakkuv ala: nupp, ikoon, tekstirida, kahe ploki ühenduskoht.

Reegel on lihtne: mida väiksem on püüdmisala, seda suurem on lõplik suurendus. Kui kärpisid liiga palju, kasuta uuesti Alt + pidemeid korrigeerimiseks.

4. Samm: venitamine ja skaleerimine

Nüüd haara eelvaate nurkadest (ühtegi klahvi all hoidmata) ja venita kaader kogu OBS-i akent täitma. Pärast seda tee paremklõps eelvaate alal ja vali Scale Filtering → Point.

See säte lülitab silumisalgoritmid välja. Režiimis „Point" näitab OBS piksleid sellistena, nagu nad on, ruut ruudu haaval, ilma bilineaarse või bikuupilise interpolatsioonita. Sa näed täpselt seda, mida brauser või rakendus renderdab: iga alampiksli värvi, joone paksust, gradiendi üleminekuid.

Kui valid mõne muu skaleerimisrežiimi, saad uduse pildi. Pikslikontrolliks töötab ainult „Point".

5. Samm: luubiga töötamine

Seadistatud stseen töötab reaalajas. Ava brauser oma kujundusega, liiguta akent ja OBS näitab kõiki muudatusi koheselt, ilma viivituseta. See on põhimõtteline erinevus ahelast „kuvatõmmis → redaktor → kontroll": sa ei katkesta ennast ega kaota konteksti.

Sellel seadistusel on üks puudus: sa ohverdad ekraaniruumi. OBS võtab enda alla osa monitorist või terve monitori. Kahe kuvariga lauaarvutil pole see probleem, kuid ühe ekraaniga sülearvutil tundub see märgatavalt kitsas.

Alternatiiv: Windowsi ekraaniluup

Kui OBS tundub ühekordseks pikslikontrolliks liialdusena, on Windowsil sisseehitatud tööriist. Vajuta Win + + (pluss-klahv numbriklahvistikul või Backspace'i kõrval), et käivitada ekraaniluup.

Vaikimisi näitab see suurendatud ala täisekraanirežiimis. Lülitu dokitud akna režiimi, vajutades Ctrl + Alt + D, ja ilmub ujuv paneel, mida saad liigutada ja suurust muuta.

Windowsi luup silub piksleid vaikimisi. Ava luubi seaded (hammasratta ikoon paneelil) ja eemalda linnuke valikult Smooth edges of images and text. Pärast seda muutub pilt ausaks, ilma interpolatsioonita.

Windowsi luubi eelis: pole vaja paigaldada, töötab kohe. Puudus: vähem paindlikkust vaateala suuruses ja puudub režiim „terve aken = terve luup" nagu OBS-is.

Miks uurida piksleid luubi all

Praktikas kasutame seda tehnikat kujundustöö ja disaini ülevaatuse ajal, eriti kui peame kontrollima, kuidas brauser konkreetset elementi renderdab. Ikoon retina-ekraanil näeb välja teistsugune kui tavalisel monitoril. Gradient võib tekitada triibutust. Teksti alampikslite silumine erineb Windowsi ja macOS-i vahel. Ilma reaalajas suurenduseta pole need nüansid nähtavad.

Kõrge eraldusvõimega monitoride ja Windowsi vaikimisi kuvamisskaala levikuga on võitlus teravate joonte pärast liikunud uuele tasemele. See, mis näeb 4K-s täiuslik välja, võib Full HD korral 125% skaleerimisega poole piksli võrra nihkuda.

VFX-tööstuses on termin „kuradi piksel" olukordade jaoks, kui kunstnik kinnistub ühele pikslile üldpildi arvelt. Analoogia on tabav: tähelepanu detailidele ja perfektsionismi vahel on peen piir. Pixar SIGGRAPH-il rääkis aluspinnahajumisest, tehnoloogiast, mis hingab elu animeeritud tegelastesse. Enamik vaatajaid ei märka erinevust. Kuid just see erinevus eraldab „head" „silmapaistvast".

Veebidisain töötab samamoodi: külastaja ei ütle „see piksel renderdus valesti". Kuid üldine kvaliteeditunnetus koosneb just sellistest pisiasjadest. OBS-i luup on kiire viis nende detailide kontrollimiseks.

Kogu protsess alates paigaldamisest kuni skaleerimiseni on selgelt näidatud selles videos:

⁉️🤔 Korduma kippuvad küsimused

OBS hakkab skaleerimise ajal kokutama, mida teha?

Kontrolli väljundi seadeid: Settings → Video. Pikslikontrolliks pole sul 60 FPS-i vaja; sea see 30 või isegi 15 peale. Hoia baaslõuendi eraldusvõime oma monitori eraldusvõimega võrdsena. Kui integreeritud graafikakaardil kokutab, lülita renderdaja Direct3D 12 peale menüüs Settings → Advanced → Video Renderer.

Kas ma saan ilma teise monitorita hakkama?

Jah, kuid ekraaniruum jääb kitsaks. Nipp: minimeeri kõik mittevajalikud aknad, jäta brauser oma kujundusega ja OBS kõrvuti. Full HD ekraaniga sülearvutil saad reaalselt paigutada OBS-i kolmandiku ekraani laiusest, mis on pisteliseks kontrolliks piisav. Kui sellest ei piisa, lülitu Windowsi luubile Win + + abil.

Kas macOS-i jaoks on olemas vaste?

OBS töötab macOS-is täpselt samamoodi, ekraanipüüdmisega läbi Display Capture või Window Capture. „Point" skaleerimist nimetatakse seal Point (sama filter eelvaate kontekstimenüüs). macOS-i sisseehitatud luup on Option + Cmd + 8, kuid see ei paku samasugust kärpimise paindlikkust nagu OBS.

Kuidas kontrollida konkreetset pikslit koodis?

Ava brauseri DevTools, ava elemendi inspektor ja liigu hiirega huvipakkuva sõlme kohale. Brauser tõstab selle lehel esile. Samal ajal vaata OBS-i akent; suurendatud ala näitab iga piirjoone, täidise ja tausta pikslit. OBS + DevTools kombinatsioon katab valdava enamuse pikslitäpse kujunduse ülesannetest.

Teksti servade silumine erineb brauserite lõikes. Kas OBS aitab mul seda näha?

Jah, just selleks see tehnika kasulik ongi. Ava sama kujundus Chrome'is ja Firefoxis, suuna OBS samale tekstiplokile ja erinevus alampikslite renderduses on palja silmaga nähtav. See on eriti märgatav õhukeste fontide (paksus 300) ja heleda teksti puhul tumedal taustal.

Mida piksli-luup praktikas annab

See tehnika pole iga maketi jaoks. Viie plokiga maandumislehe jaoks piisab DevToolsist. Kuid kui ehitad disainisüsteemi, silud mikroanimatsioone või viimistled liidest, mida näevad tuhanded kasutajad, säästab 10 minutit OBS-i luubiga tunde vaidlusi disaineriga teemal „miks see ei näe õige välja".

Alusta väikeselt: ava oma praegune projekt, püüa kinni lõik ikooni ja tekstiga, luba „Point" skaleerimine. Kui oled nähtuga rahul, on suurepärane. Kui mitte, leidsid just midagi, mida saad viie minutiga parandada.

Millist tööriista kasutad sina kujunduse ajal pikslite kontrollimiseks: luupi, kuvatõmmiseid või usaldad brauseri inspektorit? Anna meile kommentaarides teada.