Złapać piksel, który przesunął się o pół milimetra, to zadanie znane każdemu, kto zajmuje się składaniem layoutów. Zrzut ekranu, zoom w edytorze graficznym, powrót do przeglądarki i tak dziesiątki razy na godzinę. A jeśli analizuje Pan cudzy kod lub sprawdza, jak przeglądarka renderuje konkretny element UI, proces ten rozciąga się do kilku minut.

Open Broadcaster Software (OBS) to darmowe, otwarte narzędzie do streamingu. Większość zna je jako oprogramowanie dla Twitcha i YouTube, ale OBS ma nieoczywisty tryb: cyfrową lupę działającą w czasie rzeczywistym. Kieruje Pan obszar przechwytywania na wybrany fragment ekranu, rozciąga go na całe okno i widzi każdy piksel bez zapisywania zrzutów ekranu i przełączania się między programami.

Poniżej znajduje się konfiguracja OBS krok po kroku do trybu inspektora pikseli, alternatywna metoda z użyciem wbudowanej lupy Windows oraz szczera rozmowa o tym, kiedy ta technika jest naprawdę potrzebna, a kiedy jest zbędna.

💡 Szybki przegląd:

• Instaluje Pan OBS i dodaje źródło „Przechwytywanie ekranu"
• Przycina Pan kadr do żądanego fragmentu za pomocą Alt + czerwonych uchwytów
• Rozciąga Pan obszar na całe okno i wybiera skalowanie „Punkt"
• Otrzymuje Pan żywą lupę bez wygładzania, piksele są widoczne takimi, jakie są
• Dla jednego monitora istnieje wbudowana alternatywa, lupa ekranowa Windows

Krok 1: instalacja OBS Studio

Proszę pobrać OBS Studio z oficjalnej strony, program jest darmowy i dostępny na Windows, macOS i Linux. Instalacja jest standardowa: kreator przeprowadzi Pana przez nią w kilku kliknięciach. Po uruchomieniu zobaczy Pan czarne okno podglądu oraz panel ze źródłami, scenami i mikserem audio.

Sceny i audio nie są potrzebne do naszego zadania. Cała uwaga skupia się na panelu Źródła.

Krok 2: tworzenie źródła „Przechwytywanie ekranu"

W panelu Źródła proszę kliknąć „+" i wybrać Przechwytywanie ekranu (w wersji angielskiej Display Capture). Proszę nadać źródłu dowolną nazwę i kliknąć „OK".

Jeśli ma Pan kilka monitorów, świetnie: proszę wybrać ten, na którym znajduje się cel do powiększenia. Jeden monitor też działa, po prostu będzie mniej wolnego miejsca na umieszczenie OBS.

Krok 3: przycinanie kadru do celu

To kluczowy krok. Proszę przytrzymać Alt i pociągnąć za czerwone uchwyty, które pojawiły się na krawędziach podglądu. Proszę przyciąć kadr tak, aby obejmował tylko żądany fragment ekranu: przycisk, ikonę, wiersz tekstu, styk dwóch bloków.

Zasada jest prosta: im mniejszy obszar przechwytywania, tym silniejsze końcowe powiększenie. Jeśli przyciął Pan za dużo, ponownie Alt + uchwyt do korekty.

Krok 4: rozciąganie i skalowanie

Teraz proszę chwycić za rogi podglądu (bez wciśniętych klawiszy) i rozciągnąć ramkę na całe dostępne okno OBS. Następnie proszę kliknąć prawym przyciskiem myszy na obszarze podglądu, wybrać Skalowanie → Punkt (w wersji angielskiej Scale Filtering → Point).

Właśnie ta opcja wyłącza algorytmy wygładzania. W trybie „Punkt" OBS pokazuje piksele takimi, jakie są, kwadrat po kwadracie, bez interpolacji dwuliniowej czy dwusześciennej. Widzi Pan dokładnie to, co renderuje przeglądarka lub aplikacja: kolor każdego subpiksela, grubość linii, styki gradientów.

Jeśli wybierze Pan jakikolwiek inny tryb skalowania, otrzyma Pan rozmyty obraz. Do inspekcji pikseli tylko „Punkt".

Krok 5: praca z lupą

Skonfigurowana scena działa w czasie rzeczywistym. Proszę otworzyć przeglądarkę z layoutem, przesuwać okno, OBS pokazuje wszystkie zmiany natychmiast, bez opóźnień. To zasadnicza różnica w porównaniu z łańcuchem „zrzut ekranu → edytor → sprawdzenie": nie przerywa Pan pracy i nie traci kontekstu.

To podejście ma jedną wadę: poświęca Pan miejsce na ekranie. OBS zajmuje część monitora lub cały monitor. Na desktopie z dwoma wyświetlaczami nie stanowi to problemu, ale na laptopie z jednym ekranem jest odczuwalnie ciasno.

Alternatywa: lupa ekranowa Windows

Jeśli OBS wydaje się nadmiarowy do jednorazowego sprawdzenia pikseli, Windows ma wbudowane narzędzie. Proszę nacisnąć Win + + (klawisz plus na bloku numerycznym lub obok Backspace), uruchomi się lupa ekranowa.

Domyślnie pokazuje ona powiększony fragment w trybie pełnoekranowym. Proszę przełączyć się na okno zadokowane: Ctrl + Alt + D, pojawi się pływający panel, który można przesuwać i rozciągać.

Lupa Windows domyślnie wygładza piksele. Proszę otworzyć ustawienia lupy (ikona zębatki w panelu) i odznaczyć opcję Wygładzaj krawędzie obrazów i tekstu. Po tym obraz stanie się wierny, bez interpolacji.

Zaleta lupy Windows: nie wymaga instalacji, działa od razu. Wada: mniejsza elastyczność w zakresie rozmiaru obszaru podglądu i brak trybu „całe okno = cała lupa", jak w OBS.

Po co oglądać piksele pod lupą

W praktyce używamy tej techniki podczas składania layoutów i przeglądu projektu, szczególnie gdy trzeba sprawdzić, jak przeglądarka renderuje konkretny element. Ikona na wyświetlaczu retina wygląda inaczej niż na zwykłym monitorze. Gradient może wykazywać banding. Subpikselowe wygładzanie tekstu różni się między Windows a macOS. Bez powiększenia na żywo tych niuansów nie widać.

Wraz z upowszechnieniem monitorów o wysokiej rozdzielczości i domyślnego skalowania ekranu w Windows walka o ostre linie weszła na nowy poziom. To, co na 4K wygląda idealnie, na Full HD przy 125% skalowaniu może przesunąć się o pół piksela.

W branży VFX istnieje termin „fucking pixel", określający sytuacje, gdy artysta zbytnio skupia się na pojedynczym pikselu ze szkodą dla ogólnego obrazu. Analogia jest trafna: między dbałością o szczegóły a perfekcjonizmem jest cienka granica. Autorzy z Pixar na SIGGRAPH opowiadali o subsurface scattering, technologii, która tchnie życie w animowane postacie. Większość widzów nie zauważa różnicy. Ale to właśnie ta różnica oddziela „dobre" od „wybitnego".

Z web designem jest ta sama historia: odwiedzający nie powie „tutaj piksel źle się wyrenderował". Ale ogólne wrażenie jakości składa się z takich drobiazgów. Lupa OBS to szybki sposób, by te drobiazgi kontrolować.

Poglądowo cały proces od instalacji do skalowania pokazano w tym filmie:

⁉️🤔 Często zadawane pytania

OBS zacina się przy skalowaniu, co robić?

Proszę sprawdzić ustawienia wyjścia: Settings → Video. Do inspekcji pikseli nie potrzeba 60 FPS, proszę ustawić 30 lub nawet 15. Rozdzielczość płótna bazowego proszę zachować równą rozdzielczości monitora. Jeśli zacina się na zintegrowanej grafice, proszę przełączyć renderer na Direct3D 12 w Settings → Advanced → Video Renderer.

Czy można obejść się bez drugiego monitora?

Tak, ale miejsca na ekranie będzie mało. Lifehack: proszę zminimalizować wszystkie zbędne okna, zostawić przeglądarkę z layoutem i OBS obok siebie. Na laptopie z ekranem Full HD realistyczne jest umieszczenie OBS na szerokość jednej trzeciej ekranu, do punktowej kontroli to wystarcza. Jeśli to za mało, proszę przełączyć się na lupę Windows przez Win + +.

Czy istnieje odpowiednik dla macOS?

OBS działa na macOS tak samo, przechwytywanie ekranu przez Display Capture lub Window Capture. Skalowanie „Punkt" nazywa się tam Point (ten sam filtr w menu kontekstowym podglądu). Wbudowana lupa macOS to Option + Cmd + 8, ale nie daje ona takiej samej elastyczności przycinania jak OBS.

Jak sprawdzić konkretny piksel w kodzie?

W DevTools przeglądarki proszę otworzyć inspektor elementów, wskazać żądany węzeł, przeglądarka podświetli go na stronie. Jednocześnie proszę patrzeć w okno OBS: powiększony obszar pokaże każdy piksel krawędzi, odstępu i tła. Połączenie OBS + DevTools rozwiązuje zdecydowaną większość zadań związanych z pikselowym składem layoutu.

Wygładzanie krawędzi tekstu różni się między przeglądarkami, czy OBS pomoże to zobaczyć?

Tak, właśnie do tego ta technika jest przydatna. Proszę otworzyć ten sam layout w Chrome i Firefox, skierować OBS na ten sam blok tekstowy, różnica w renderowaniu subpikselowym jest widoczna gołym okiem. Szczególnie zauważalne jest to przy cienkich fontach (grubość 300) i jasnym tekście na ciemnym tle.

Co daje lupa pikselowa w praktyce

Ta technika nie jest potrzebna do każdego makiety. Do landing page’a z pięciu bloków wystarczy DevTools. Ale jeśli składa Pan system projektowy, dopracowuje mikroanimacje lub finalizuje interfejs, który zobaczą tysiące użytkowników, 10 minut z lupą OBS zaoszczędzi godziny dyskusji z projektantem o tym, „dlaczego to wygląda nie tak".

Proszę zacząć od małego: otworzyć swój bieżący projekt, przechwycić fragment z ikoną i tekstem, włączyć skalowanie „Punkt". Jeśli to, co Pan zobaczy, jest satysfakcjonujące, świetnie. Jeśli nie, właśnie znalazł Pan coś, co można poprawić w pięć minut.

A jakim narzędziem sprawdza Pan piksele przy składaniu layoutów, lupą, zrzutami ekranu czy ufa Pan inspektorowi przeglądarki? Proszę napisać w komentarzach.