Generator mockupów zrzutów ekranu

Umieść dowolny zrzut ekranu w ramce przeglądarki lub oknie macOS, na tych samych tłach co w aplikacji Snapix, i wyeksportuj go w dokładnej wielkości dla każdej platformy.

Jak umieścić zrzut ekranu w ramce przeglądarki

Trzy kroki, a wszystko dzieje się w Twojej przeglądarce.

Dodaj zrzut ekranu

Upuść go w polu powyżej, naciśnij ⌘V, aby wkleić, albo kliknij, aby wybrać plik – ramka pojawi się, gdy tylko go dodasz. Stuknij pole powyżej i wybierz zrzut ekranu ze swoich zdjęć – ramka pojawi się od razu.

Dopracuj wygląd mockupu

Wybierz ramkę przeglądarki lub okna Maca, wpisz własny tytuł lub adres URL, a potem wybierz gradient, obrazek lub kolor i ustaw margines, cień i narożniki.

Skopiuj lub pobierz

Skopiuj gotowy mockup do schowka albo go pobierz – od razu w wymiarach dla LinkedIn, X, Instagrama lub podglądu linku.

Ramki

Ramka przeglądarki, okno Maca lub bez ramki

Ramka mówi odbiorcom, na co patrzą, zanim przeczytają choć słowo: działająca strona internetowa, aplikacja na Maca czy po prostu czysty obraz. Wszystkie trzy są rysowane jako ścieżki wektorowe, więc pozostają ostre w każdej wielkości eksportu.

Ramka przeglądarkiDo stron i aplikacji internetowych – czyste okno w stylu Safari z polem adresu, w które wpiszesz dowolny URL.
Okno MacaDo natywnych aplikacji na Maca – trzy kolorowe przyciski okna i edytowalny tytuł, w jasnym lub ciemnym motywie dopasowanym do zrzutu.
Bez ramkiSamo tło, margines, cień i zaokrąglone narożniki – w sam raz do zrzutów z telefonu i zrzutów z Maca, które mają już własne narożniki.

Ten sam zrzut ekranu w trzech wersjach: w ramce przeglądarki w stylu Safari z edytowalnym adresem, w oknie macOS z kolorowymi przyciskami i tytułem oraz jako sam zrzut z zaokrąglonymi narożnikami – każdy na własnym gradientowym tle

Po swojemu

Dodaj tło i podpis

To przede wszystkim tło sprawia, że zrzut ekranu wygląda na dopracowany, a post w mediach społecznościowych zwykle potrzebuje jeszcze linijki tekstu. Zrób jedno i drugie tutaj i pobierz jeden obraz – bez drugiego narzędzia.

22 gradienty z aplikacji Snapix – albo gradient utworzony z kolorów Twojego zrzutu ekranu
Obrazki z regulowanym rozmyciem, 17 kolorów lub przezroczyste tło
Zachowaj wygląd jako szablon i użyj go przy następnym zrzucie ekranu
Tekst w sześciu gotowych stylach i 36 czcionkach, rysowany jako ostre wektory
Przeciągnij wszystko na miejsce – elementy przyciągają się do linii pomocniczych, a ⌘Z cofa każdy krok

Zanim dodasz ramkę, rozmyj adresy e-mail i nazwiska – nasze narzędzie Edycja zrzutu ekranu ukryje je prosto w przeglądarce.

Zrzut ekranu w ramce przeglądarki wyśrodkowany na płótnie z gradientem w kolorze indygo, nad nim zaznaczony do edycji pogrubiony podpis, uchwyty w narożnikach obu elementów i przerywana linia pomocnicza wskazująca środek

Wielkości eksportu

Właściwy rozmiar dla każdej platformy

Opcja Automatycznie dopasowuje płótno do mockupu – tego zwykle potrzebują dokumentacja i listy zmian. Jeśli zamiast tego wybierzesz proporcje, takie jak 16:9, 1:1 lub 9:16, płótno powiększy się wokół zrzutu ekranu – zrzut nigdy nie zostanie przycięty ani rozciągnięty – a potem możesz go przeciągnąć w dowolne miejsce płótna.

Menu Wielkość ma szablon dla każdego miejsca, w którym lądują zrzuty ekranu produktów: postów na LinkedIn, X, Reddit i Instagramie, galerii Product Hunt, miniatur YouTube i podglądów społecznościowych GitHub. Każdy eksportuje dokładnie w pikselach danej platformy, więc pobierasz dokładnie ten plik, który potem wysyłasz.

To także generator obrazów Open Graph: szablon Podgląd linku eksportuje kartę 1200 × 630, którą Facebook, LinkedIn, Slack i Discord budują z tagu og:image Twojej strony.

Lekkie pliki JPG albo PNG, gdy tło jest przezroczyste
Własne wielkości od 100 do 8000 px
Przezroczyste pliki PNG od razu pasują do slajdów i prezentacji

Szablony eksportu narysowane w prawdziwych proporcjach: format 16:9 wspólny dla LinkedIn, X i Reddit z mockupem w ramce, kwadrat i pion na Instagramie, karty GitHub i Product Hunt oraz podgląd linku 1200 na 630

Najczęściej zadawane pytania

Czy ten generator mockupów jest darmowy i czy dodaje znak wodny?

Jest całkowicie darmowy – bez znaku wodnego, bez rejestracji i bez limitu eksportu. Wszystko jest rysowane na elemencie canvas bezpośrednio na stronie, więc nic nie jest wysyłane i nie czekasz na serwer. Te narzędzia internetowe to nasz sposób, by przedstawić Snapix, naszą aplikację do zrzutów ekranu na Maca.

Czy mogę zmienić adres URL i tytuł okna?

Tak. Ramka przeglądarki w stylu Safari ma edytowalne pole adresu, a okno Maca – edytowalny tytuł. Tekst jest rysowany na płótnie na bieżąco, w miarę pisania, więc wszystko, co wpiszesz, trafia do eksportowanego obrazu.

Jakich teł mogę użyć?

Tej samej biblioteki co edytor Snapixa: 22 gradientów – od prostych dwukolorowych przejść po miękkie, siatkowe rozmycia – 17 kolorów, gradientu utworzonego z Twojego zrzutu ekranu, rozmytej kopii samego zrzutu lub własnego obrazka z regulowanym rozmyciem. Wybierz opcję Bez tła, aby wyeksportować przezroczysty plik PNG.

Czy mogę dodać tekst lub podpis do mockupu?

Tak. Przeciągnij jeden z sześciu stylów z karty Tekst na płótno – albo naciśnij T – i pisz prosto na podglądzie. Do wyboru jest 36 czcionek, podpisy eksportują się jako ostre wektory w każdej wielkości, a ⌘Z cofa każdy krok.

W jakich rozmiarach do mediów społecznościowych mogę eksportować?

Menu Wielkość ma dziewięć proporcji i dziewięć wielkości dla platform: posty na LinkedIn, X i Reddit w 1920 × 1080, kwadrat i pion na Instagramie, galerię Product Hunt, miniaturę YouTube, podgląd społecznościowy GitHub i podgląd linku 1200 × 630. Każda wielkość dla platformy eksportuje się dokładnie w jej pikselach, a opcja Własna wielkość przyjmuje dowolny rozmiar od 100 do 8000 px.

Jaki rozmiar powinien mieć obraz Open Graph?

1200 × 630 pikseli – to wielkość szablonu Podgląd linku w tym narzędziu. Takiego rozmiaru wymaga dokumentacja udostępniania Facebooka, a Slack, Discord, Bluesky, LinkedIn i Reddit odczytują ten sam tag og:image – więc jeden eksport wystarczy dla nich wszystkich.

Czy narzędzie eksportuje JPG, czy PNG?

Wybiera za Ciebie. Mockup z tłem pobiera się jako JPG w jakości 92% – na oko trudno go odróżnić od PNG, a waży ułamek tego, co PNG. Bez tła pobiera się jako PNG, bo tylko PNG zachowuje przezroczystość. Kopiowanie zawsze umieszcza w schowku plik PNG.

Czyste zrzuty okien jednym skrótem

Zrzut okna w Snapixie (⌘⇧5) czysto przechwytuje dowolne okno Maca i na żywo podświetla dokładnie to, co dostaniesz – a edytor umieszcza je na tych samych tłach, z szablonami, które możesz stosować do każdego zrzutu.

Pobierz na Maca

Generator mockupów zrzutów ekranu