Czytelne zrzuty ekranu do poradników i dokumentacji

Dobry zrzut pokazuje, gdzie kliknąć, co wybrać lub jaki wynik uzyskać. Cały pulpit, nawet ostry, nie pomaga, gdy nie widać właściwego przycisku.

Celem jest wyjaśnienie każdego kroku bez zbędnych elementów, ujawniania prywatnych danych i niepotrzebnie dużego pliku. Poradnik prowadzi od przygotowania widoku do sprawdzenia opublikowanego zrzutu.

Ustal zadanie każdego zrzutu

Najpierw napisz instrukcję. „Wybierz Eksportuj, potem PNG” wyznacza temat; „Oto ustawienia” każe samodzielnie szukać.

Pokaż właściwy moment: otwarte menu dla opcji, potwierdzenie dla wyniku. W razie potrzeby oddziel początek, menu i rezultat.

Zostaw punkty orientacyjne. Sam przełącznik bez tytułu panelu jest trudny do znalezienia. Zachowaj ważny nagłówek lub nawigację.

Zaplanuj krótką serię z nową informacją w każdym obrazie. Nie każde oczywiste kliknięcie potrzebuje ilustracji.

Zrób czysty oryginalny zrzut

Użyj konta testowego, zamknij zbędne karty i powiadomienia. Wybierz szerokość zgodną z opisem: wąskie okno może zmieniać menu.

• Windows: Windows + Shift + S wybiera obszar. Narzędzie Wycinanie przechwytuje też okno i pełny ekran; zobacz instrukcję Microsoft.
• Mac: Shift + Command + 4 wybiera obszar, Shift + Command + 5 otwiera opcje. Zobacz instrukcję Apple.

Zachowaj oryginalny plik. Przechwytywanie podglądu z czatu lub pobranie miniatury może gubić szczegóły. Zdjęcie monitora dodaje odbicia i zniekształcenia.

Jeśli tekst jest mały już na zrzucie, zmień powiększenie aplikacji i zrób nowy. Sprawdź układ i ukryte kontrolki. Późniejsze powiększenie nie odtworzy źle przechwyconych znaków.

Usuń prywatne dane przed udostępnieniem

Sprawdź adres, tytuły kart, konto, panele boczne i powiadomienia. Przykładowe rekordy nie chronią prawdziwego e-maila w menu konta.

Usuń przez kadrowanie prywatne dane leżące poza potrzebnym obszarem. Te, które pozostają w obrazie, zakryj całkowicie nieprzezroczystym prostokątem. Rozmycie i pikselizacja mogą pozostawić wskazówki o treści i nie nadają się do ochrony poufnego tekstu.

1. Otwórz Pikselizację obrazu. W Efekcie wybierz jednolite zakrycie, po angielsku Solid cover.
2. Ustaw zakrycie. Dopasuj prostokąt z marginesem wokół wszystkich znaków.
3. Dodaj obszar dla każdego kolejnego miejsca. Angielski przycisk to Add area. Sprawdź powtórzenia, kody i QR. Przesunięcie zakrycia nie zabezpiecza obu miejsc.
4. Pobierz i otwórz PNG. Sprawdź plik, nie tylko podgląd.

W pobranym PNG zakrycie jest częścią pikseli obrazu. Udostępniaj tę kopię, a nie edytowalny dokument z prostokątem, który można usunąć, aby odsłonić oryginał. Oryginał przechowuj poza publicznymi folderami.

Chroni to tylko zakryte obszary, nie dokument, schowek, konto ani pliki źródłowe. Przeczytaj poradnik pikselizacji i zakrywania.

Najpierw kadruj, potem wyróżniaj

Usuń zbędną nawigację, marginesy i pulpit przez kadrowanie obrazu. Zachowaj nazwę kontrolki i kontekst.

Ustal kadr przed oznaczeniami, aby strzałki nie wskazywały później usuniętych elementów. Tytuł panelu pomaga bardziej niż samotna strzałka.

W razie potrzeby dodaj ramkę lub numer w odpowiednim edytorze, bez zasłaniania nazwy. Wyjaśnij oznaczenie w tekście. Pixilo nie dodaje strzałek w narzędziu kadrowania.

Zachowaj styl i numerację zgodną z krokami. „Wybierz przycisk 2” jest jaśniejsze niż poleganie wyłącznie na zieleni.

Dobierz wymiary do rzeczywistej wielkości

Oceń obraz w gotowym artykule. Tekst czytelny na pełnym ekranie może być malutki w kolumnie.

Oddziel widoczną wielkość tekstu od pikseli potrzebnych do ostrości. Więcej pikseli nie powiększa samo liter.

Widok o wymiarach 800 × 500 pikseli CSS przechwycony przy gęstości 2× może dać obraz 1600 × 1000 pikseli. Wyświetlenie go jako 800 × 500 pikseli CSS zachowuje widoczną wielkość interfejsu: tekst nie staje się automatycznie o połowę mniejszy. Pokazanie całego widoku na szerokości 400 pikseli CSS zmniejsza jednak napisy.

Wpływają na to metoda, skalowanie i zoom. MDN wyjaśnia gęstość pikseli. Sprawdź zapisane wymiary zamiast zawsze zakładać 2×.

Przed zmniejszeniem wymiarów w pikselach wypróbuj ciaśniejszy kadr. Na telefonie widok o szerokości 800 pikseli może trafić do kolumny o szerokości zaledwie 360 pikseli CSS. Nawet ostry tekst może być wtedy za mały do odczytania. W razie potrzeby podziel widok lub dodaj możliwość otwarcia większej wersji.

Dla zbyt dużych źródeł użyj zmiany rozmiaru z blokadą proporcji. Porównaj w docelowym widoku; zachowaj więcej pikseli lub uprość, gdy ginie informacja.

Wybierz format zachowujący tekst

Zacznij od PNG dla tekstu i kontrolek: bezstratna kompresja nie dodaje uszkodzeń JPG. Wypróbuj optymalizację PNG przed zmianą wymiarów. Dla zrzutów fotograficznych porównaj JPG lub WebP.

Porównuj tę samą źródłową kopię przy identycznych wymiarach i wyświetlaniu. Sprawdź drobne litery, linie i oznaczenia: smugi, brak interpunkcji, obwódki. Zachowaj czytelniejszy wariant, jeśli lżejszy gubi informacje.

Zobacz JPG a PNG i opis formatów MDN. Nowe próby zaczynaj od przygotowanego źródła, nie skompresowanego wyniku.

Opublikuj instrukcje zrozumiałe bez obrazu

Zapisz kroki obok zrzutu dla czytników ekranu, powiększenia, wydruku i błędów ładowania: „Otwórz Ustawienia, Rozliczenia i Pobierz fakturę”.

Tekst alternatywny wyjaśnia, co obraz wnosi do instrukcji. Na przykład: „Ustawienia rozliczeń z wyróżnionym przyciskiem Pobierz fakturę obok ostatniej płatności”. Nie przepisuj nieistotnych elementów panelu bocznego. Zobacz wskazówki W3C.

Podpis może podać wersję programu. Trzymaj obraz, podpis i krok razem, zamiast zbierać zrzuty daleko pod instrukcjami.

Zachowaj proporcje i szerokość kolumny. Poradnik obrazów responsywnych opisuje wykonanie. Sprawdź, czy edytor nie wybrał małej miniatury.

Przykład: wyjaśnienie pobierania faktury

Instrukcja: „Ustawienia → Rozliczenia, potem Pobierz fakturę przy płatności”. Wymiary są przykładowe, nie zmierzone w aplikacji.

1. Przygotuj widok. Pokaż przykładowe płatności i właściwy przycisk; zamknij inne menu.
2. Przechwyć i przytnij. Z 1600 × 1000 kadr 1200 × 700 może zachować tytuł, płatność i przycisk bez panelu bocznego. Oryginał trzymaj prywatnie.
3. Zakryj pozostałe dane. Zasłoń prawdziwy e-mail i powtórzenia osobnymi obszarami. Pobierz i sprawdź PNG.
4. Wyróżnij w razie potrzeby. Dodaj ramkę wokół przycisku bez zasłaniania napisu w edytorze oznaczeń. Zapisz PNG w spójnym stylu.
5. Sprawdź w artykule. Obraz o szerokości 1200 pikseli wyświetlany na szerokości 600 pikseli CSS zapewnia dwa piksele obrazu na każdy piksel CSS. Oceń wiersz płatności i nazwę przycisku na telefonie. W razie potrzeby pokaż zbliżenie tego wiersza zamiast dalej zmniejszać cały widok.
6. Publikuj z tekstem. Strona i link pełnowymiarowy muszą korzystać z chronionego PNG.

Liczy się znalezienie płatności i przycisku, nie ilość usuniętego pulpitu.

Znajdź przyczynę słabego wyniku

Przejdź przez opublikowaną instrukcję tak, jakbyś korzystał z tej funkcji po raz pierwszy. Nazwy na zrzutach muszą odpowiadać tekstowi, a każdy obraz powinien znajdować się obok właściwego kroku.

Najczęstsze pytania

Czy każdy krok wymaga zrzutu?

Nie. Zrzut ma wyjaśniać, gdzie wykonać działanie, co wybrać lub jaki wynik uzyskać. Często wystarczy jasny tekst. Zbędne obrazy wydłużają stronę i wymagają aktualizacji po zmianach programu.

Czy zrzut całej strony jest przydatny?

Może pokazać ogólną strukturę strony, ale rzadko nadaje się do objaśniania małego przycisku lub ustawienia. Tam, gdzie ważne są szczegóły, dodaj zrzuty odpowiednich fragmentów.

Czy pokazywać wskaźnik myszy?

Tylko gdy pomaga. Na etykiecie przeszkadza; ramka i tekst są często lepsze.

Jak utrzymywać aktualność zrzutów?

Pokazuj potrzebny kontekst, podaj wersję lub datę kontroli, jeśli warto. Przy zmianach menu aktualizuj obraz i tekst razem.