Sekcja hero na stronie
Zrzut w ramce przeglądarki od razu mówi „to aplikacja webowa”. Z przezroczystym tłem (PNG lub WebP) położysz go na sekcji w dowolnym kolorze.
Włóż zrzut ekranu strony w okno przeglądarki
Mockup przeglądarki ze zrzutu ekranu twojego produktu: ramka Chrome, macOS albo Windows z własnym adresem i tytułem karty, gotowa na stronę, post o premierze albo do dokumentacji. Niepublikowane jeszcze ekrany nigdzie nie są wysyłane.
- Twój adres i tytuł karty
- Bez wysyłania
- Bez znaku wodnego
Mockup przeglądarki
Wczytuję przykład
Przykładowy zrzut· upuść albo wklej skrótem CtrlV
Wynik 0 × 0 px· zostaje na tym urządzeniu
Wklej CtrlVPobierz CtrlS
Zostaje na twoim urządzeniu. Plik jest przetwarzany tutaj, w tej karcie przeglądarki. Nic nie jest wysyłane, zapisywane ani nigdzie przekazywane.
Aktualizacja: październik 2026
Szybka odpowiedź
Żeby zrobić mockup przeglądarki, upuść zrzut ekranu do narzędzia powyżej, wybierz ramkę przeglądarki i wpisz adres, który ma się pojawić w pasku adresu. Jeśli mockup ma stać na ruchliwej stronie, dodaj tło i odstęp, pod post wybierz rozmiar, na przykład 16:9, i pobierz PNG. Ustaw tło na Brak, a dostaniesz przezroczysty mockup, który położysz na dowolnym kolorze.
Ukryj prywatne dane przed mockupem
Prawdziwy produkt, bez prawdziwych klientów na obrazku
Najlepsze zrzuty produktu pochodzą z prawdziwej aplikacji, a ta jest pełna prawdziwych nazwisk, e-maili i przychodów. Rozszerzenie Blurr.ing do Chrome rozmywa je na otwartej stronie, a jego skrót do zrzutów robi zrzut z rozmyciem już wpisanym w piksele i oferuje na wyniku ramkę okna przeglądarki, tło, odstęp i rogi.
- Rozmywanie na stronie jest darmowe i bez limitu.
- Darmowy plan obejmuje 5 zrzutów ekranu; Premium znosi limit.
- Obraz powstaje w twojej przeglądarce i nie jest nigdzie wysyłany.
Dodaj do Chrome
Instalacja za darmo. Działa w Chrome na komputerze.
Jak to działa
Jak zrobić mockup przeglądarki
Cztery kroki, mniej więcej minuta, bez programu graficznego.
- 1
Dodaj zrzut ekranu
Upuść zrzut ekranu produktu na podgląd, wklej go skrótem Ctrl+V (Cmd+V na Macu) albo kliknij Wybierz obraz. Do tego czasu widać przykładową stronę.
- 2
Wybierz ramkę przeglądarki
Chrome na macOS lub Windows, pasek przeglądarki albo zwykłe okno w stylu macOS lub Windows, albo brak ramki. Motyw ustaw na jasny, ciemny albo automatyczny, dopasowany do górnej krawędzi zrzutu.
- 3
Wpisz adres i tytuł karty
Wpisz w pasek adresu dowolny adres, na przykład twojprodukt.pl/cennik, a dla ramki Chrome także tytuł karty. Adres nie musi prowadzić do prawdziwej, działającej strony.
- 4
Ustaw płótno i zapisz
Dodaj tło, odstęp, rogi i cień, wybierz rozmiar, na przykład 16:9 albo 1:1, a potem pobierz PNG, JPEG lub WebP w pełnej rozdzielczości albo skopiuj obraz do schowka.
Do czego się przydaje
Grafiki produktu, po których od razu widać aplikację webową
Goły zrzut ekranu to prostokąt z interfejsem. Ten sam zrzut w ramce przeglądarki pokazuje, gdzie produkt działa i czym jest.
Posty o premierze i galerie
Galerie na Product Hunt, posty o premierze i wpisy w changelogu lepiej pokazują produkt w kontekście niż jako goły wycinek. Wybierz 16:9 albo 1.91:1, żeby podgląd nie uciął ramki.
Dokumentacja i artykuły pomocy
Ramka przeglądarki z prawdziwą ścieżką w pasku adresu mówi czytelnikowi, na której stronie dzieje się dany krok. Wycięty panel tego nie powie.
Social media i slajdy
Rozmiary pod X, LinkedIn, posty kwadratowe i pionowe na Instagramie, relacje i Dribbble powiększają płótno do proporcji bez przycinania zrzutu.
Ramki
Sześć ramek przeglądarki i okna
Każda jest rysowana płaskimi kształtami w rozdzielczości twojego zrzutu, w wersji jasnej albo ciemnej, więc zostaje ostra także na zrzucie z ekranu Retina.
- Chrome na macOS
- Pasek kart z trzema kolorowymi przyciskami okna i jedną kartą (ikona, tytuł, zamknięcie) nad paskiem z przyciskami wstecz, dalej, odśwież i paskiem adresu. Ramka, po której najłatwiej poznać aplikację webową.
- Chrome na Windows
- Ten sam pasek kart i pasek narzędzi, a przyciski minimalizacji, maksymalizacji i zamknięcia na prawym końcu paska kart. Tak Chrome wygląda u większości użytkowników.
- Przeglądarka macOS
- Trzy kolorowe przyciski okna i wyśrodkowane pole adresu, blisko paska tytułu w stylu Safari.
- Przeglądarka Windows
- Pole adresu po lewej, a po prawej przyciski minimalizacji, maksymalizacji i zamknięcia.
- Okno macOS
- Kolorowe przyciski okna i opcjonalny tytuł, bez paska adresu: do aplikacji na komputer albo gdy adres ma nie być widoczny.
- Okno Windows
- Zwykły pasek tytułu z przyciskami minimalizacji, maksymalizacji i zamknięcia po prawej: do aplikacji na Windows, bez adresu.
FAQ
Mockup przeglądarki: pytania i odpowiedzi
Co to jest mockup strony internetowej?
To grafika, która pokazuje stronę albo aplikację w realistycznym otoczeniu, tutaj w oknie przeglądarki z paskiem adresu i kartą. Dzięki temu zrzut ekranu od razu wygląda jak działający produkt, a nie wycięty fragment interfejsu. Mockup przeglądarki robi się ze zrzutu gotowej strony; to nie jest projekt ani makieta przed wdrożeniem.
Czy mogę wpisać własny adres URL i tytuł karty?
Tak. Wpisz dowolny adres w pole Adres i dowolny tekst w Tytuł karty (ramka Chrome). Są rysowane w ramce, więc możesz pokazać stronę ze środowiska testowego pod adresem produkcyjnym albo krótką, porządną ścieżkę.
Czy pobiorę PNG z przezroczystym tłem?
Tak. Ustaw Tło na Brak i zapisz PNG albo WebP: obszar wokół okna i jego zaokrąglone rogi zostaną przezroczyste. JPEG nie obsługuje przezroczystości, więc ten obszar robi się biały.
Czy zrzut ekranu jest wysyłany na serwer?
Nie. Obraz jest czytany z twojego urządzenia i rysowany na canvasie na tej stronie. Nigdy nie trafia na serwer i nie jest zapisywany, więc niepublikowane ekrany produktu zostają prywatne.
Czy działa ze zrzutami w trybie ciemnym?
Tak. Motyw ramki ustawiony na Auto czyta górną krawędź zrzutu i dobiera jasną albo ciemną ramkę. Możesz też wymusić Jasny albo Ciemny.
Czym to się różni od narzędzia do tła zrzutu ekranu?
Ten sam silnik, inny punkt wyjścia. Narzędzie do tła zaczyna od gradientu bez ramki, pod dopracowany zrzut. Ta strona zaczyna od ramki przeglądarki i stawia na pierwszym miejscu adres, tytuł karty i styl ramki, pod grafiki produktu.
Jak nie pokazać danych klientów na mockupie produktu?
Rozmyj je na otwartej stronie, zanim zrobisz zrzut. Rozszerzenie Blurr.ing do Chrome rozmywa dowolne nazwisko, e-mail albo numer na stronie internetowej, a jego skrót do zrzutów robi zrzut z rozmyciem już wpisanym w piksele i oferuje też ramkę okna przeglądarki. Darmowy plan obejmuje 5 zrzutów ekranu.