Czy ten generator mockupów urządzeń jest darmowy?

Tak. Wszystkie urządzenia, kolory, kąty i rozmiary eksportu są darmowe, bez rejestracji i bez znaku wodnego.

Czy mogę zrobić nim mockup iPhone'a lub iPada?

Możesz zrobić mockup nowoczesnego telefonu lub tabletu przypominającego dzisiejsze popularne modele, czyli to, czego większość potrzebuje do podglądu aplikacji lub strony. Modele są ogólne i narysowane w kodzie; nie są oficjalnymi zdjęciami produktów Apple, a to narzędzie nie jest powiązane z Apple.

Czy mogę zrobić mockup strony internetowej lub przeglądarki?

Tak. Wybierz Przeglądarkę, aby umieścić zrzut swojej strony w oknie przeglądarki na komputer z paskiem adresu — wpisz własną domenę i wybierz jasny lub ciemny pasek — albo wybierz Monitor, aby pokazać ją na dużym ekranie na podstawie.

Jak uzyskać mockup w przezroczystym PNG?

Ustaw tło na Przezroczyste i format na PNG (lub WebP), a potem pobierz. Cień zostaje zachowany jako miękkie, półprzezroczyste piksele, więc wtapia się w to, na czym umieścisz mockup.

Jak obrócić urządzenie?

Użyj suwaków X, Y i Z lub wpisz dokładny kąt od −180° do 180°. Możesz też przeciągać urządzenie w podglądzie — z wciśniętym Shift obraca się w płaszczyźnie — albo kliknąć podgląd i używać strzałek. Ustawienia gotowe przeskakują do popularnych widoków, a Resetuj przywraca kąt domyślny.

W jakiej rozdzielczości mogę eksportować?

1080, 2048 lub 4096 pikseli na dłuższym boku albo własny rozmiar do 8192 pikseli, w 1:1, 4:5, 16:9, 9:16 lub 4:3. Mockup jest renderowany od nowa w tym rozmiarze, więc jest ostry, a nie powiększony.

Mój zrzut jest ucięty na ekranie. Jak pokazać go w całości?

Przełącz dopasowanie do ekranu z Wypełnij na Dopasuj — wtedy widać cały obraz z pasami w wybranym kolorze. Przy Wypełnij przyciski wyrównania decydują, czy zostaje góra, środek czy dół wysokiego zrzutu.

Czy mój zrzut ekranu jest przesyłany?

Nie. Scena 3D działa w Twojej przeglądarce przez WebGL, a obraz nigdy nie opuszcza Twojego urządzenia.

Pojawia się komunikat, że WebGL jest niedostępny. Co mogę zrobić?

Widok 3D wymaga WebGL. Włącz akcelerację sprzętową w ustawieniach przeglądarki, zaktualizuj sterowniki karty graficznej albo spróbuj innej przeglądarki; obsługuje go każda aktualna wersja Chrome, Edge, Firefox i Safari.

Mockup 3D telefonu i laptopa online za darmo

Twój zrzut ekranu na realistycznym urządzeniu 3D, pod dowolnym kątem

Upuść zrzut ekranu lub projekt, a pojawi się na ekranie telefonu, tabletu, laptopa, monitora lub okna przeglądarki w 3D. Obracaj urządzenie wokół osi X, Y i Z suwakami, wpisanymi kątami, strzałkami lub przeciąganiem; wybierz kolor urządzenia, tło i miękki cień, a potem wyeksportuj ostry PNG, JPEG lub WebP do 8192 pikseli — z przezroczystym tłem, jeśli chcesz umieścić go na własnym slajdzie lub landing page'u. Urządzenia są modelowane w kodzie i renderowane przez WebGL w Twojej przeglądarce, więc nic nie jest przesyłane i nie ma znaku wodnego.

Jak zrobić mockup urządzenia

1Upuść zrzut ekranu na stronę, wybierz plik albo wklej go skrótem Ctrl/⌘ + V. Do tego czasu wyświetla się przykładowy ekran aplikacji.
2Wybierz Telefon, Tablet, Laptop, Monitor lub Przeglądarkę. Wybierz kolor — albo, dla okna przeglądarki, jasny lub ciemny pasek i widoczny w nim adres. Telefony i tablety można obrócić poziomo; pokrywę laptopa da się otworzyć pod dowolnym kątem.
3Wybierz widok na pasku nad podglądem — Hero ¾, Przód, Pochylenie w lewo/prawo, Izometria lub Flat lay — i dopracuj go w zakładce Widok albo przeciągnij urządzenie w podglądzie.
4Ustaw tło (przezroczyste, jednolite, gradient lub rozmycie Twojego zrzutu), cień i kierunek światła.
5Wybierz proporcje, rozmiar i format, a potem pobierz obraz lub skopiuj go do schowka.

Mockupy 3D telefonu, tabletu, laptopa, monitora i przeglądarki

Płaskie szablony mockupów dają jeden stały kąt. Tutaj urządzenie to prawdziwy model 3D, więc możesz pokazać je na wprost do zrzutu w stylu App Store, pod efektownym kątem trzech czwartych do obrazu hero albo leżące płasko do posta w social mediach — z tego samego pliku, w kilka sekund.

Mockup telefonu ma nowoczesny ekran od krawędzi do krawędzi z wycięciem na aparat w kształcie pigułki, polerowaną metalową ramkę i potrójny aparat z tyłu. Mockup tabletu ma wąskie, równe ramki w stylu współczesnych tabletów klasy iPad, a mockup laptopa pełną klawiaturę, touchpad i pokrywę, którą można otworzyć od zamkniętej do całkowicie odchylonej. To ogólne projekty przypominające dzisiejsze popularne urządzenia — przydatne wszędzie tam, gdzie ktoś szuka mockupu iPhone'a, iPada czy MacBooka — ale nie są to oficjalne zdjęcia produktów, a to narzędzie nie jest powiązane z Apple ani żadnym innym producentem.

Mockupy stron internetowych w oknie przeglądarki

Dla strony lub aplikacji webowej wybierz Przeglądarkę: Twój zrzut wypełnia obszar strony w czystym oknie przeglądarki na komputer, z przyciskami okna i paskiem adresu pokazującym wpisaną przez Ciebie domenę. Pasek jest dostępny w wersji jasnej i ciemnej, pasującej do Twojego projektu, a okno może unosić się pod dowolnym kątem jak urządzenia — albo stać na wprost, tworząc wyraźny, płaski mockup strony.

Wolisz prawdziwy sprzęt? Monitor pokazuje stronę na dużym ekranie z wąskimi ramkami na aluminiowej podstawie, tak jak wygląda strona na monitorze w studiu. Z opcjami Wypełnij i Góra długi zrzut całej strony pokazuje swój pierwszy ekran — dokładnie tak, jak widzi go odwiedzający.

Ustawienia

Obrót X, Y i Z: X przechyla urządzenie do Ciebie lub od Ciebie, Y obraca je w lewo i w prawo, Z obraca je w płaszczyźnie obrazu. Każda oś ma zakres od −180° do 180° i przyjmuje wpisane wartości. W podglądzie przeciągaj, aby obracać wokół X i Y, przytrzymaj <kbd>Shift</kbd> podczas przeciągania, aby obracać wokół Z, albo zaznacz podgląd i użyj strzałek (<kbd>Shift</kbd> dla kroków co 15°), <kbd>Q</kbd>/<kbd>E</kbd> dla Z i <kbd>R</kbd>, aby zresetować.
Powiększenie i pole widzenia: Powiększenie zmienia, jaką część kadru zajmuje urządzenie. Pole widzenia ustala perspektywę: szeroki kąt przesadza głębię jak aparat telefonu trzymany blisko, a bardzo wąski wygląda niemal ortograficznie, jak render produktu czy ilustracja izometryczna.
Dopasowanie do ekranu: Wypełnij pokrywa cały ekran i przycina nadmiar — zakotwicz do góry, aby pokazać początek długiego zrzutu całej strony. Dopasuj pokazuje cały obraz z pasami w wybranym kolorze, a Rozciągnij zniekształca go do kształtu ekranu.
Odbicie na szkle: Subtelne odbicie światła studyjnego na szybce, dzięki któremu ekran wygląda jak szkło, a nie naklejka. Wyłącz je, aby kolory ekranu były idealnie płaskie.
Tło i cień: Eksportuj na przezroczystym tle, jednolitym kolorze, dwukolorowym gradiencie lub miękkim rozmyciu Twojego zrzutu. Cień może padać na podłogę pod urządzeniem, co pasuje do laptopa na biurku, albo na ścianę za nim, co daje telefonowi efekt unoszącego się cienia.
Oświetlenie: Urządzenie jest oświetlone miękkim otoczeniem studyjnym, więc metal i szkło łapią realistyczne odbicia. Kąt światła obraca światła i odbicia wokół urządzenia; intensywność rozjaśnia lub przyciemnia całą scenę.

Rozmiary i formaty eksportu

Obraz jest renderowany od nowa w rozmiarze eksportu — 1080, 2048 lub 4096 pikseli na dłuższym boku albo dowolny własny rozmiar od 256 do 8192 — w formacie kwadratu 1:1, pionu 4:5, poziomu 16:9, relacji 9:16 lub 4:3. Ponieważ to nowy render, a nie powiększony podgląd, krawędzie pozostają ostre w każdym rozmiarze, niezależnie od wielkości Twojego ekranu.

PNG jest bezstratny i zachowuje przezroczystość — to dobry wybór dla mockupu, który umieścisz na stronie, slajdzie lub w pliku projektu. WebP też zachowuje przezroczystość i jest znacznie mniejszy. JPEG nie obsługuje przezroczystości, więc przezroczyste tło zostaje wypełnione bielą. Kopiuj umieszcza PNG w schowku, gotowy do wklejenia w Figmie, Keynote, Slacku lub dokumencie.

Wskazówki dla lepszych mockupów

Eksportuj zrzut w natywnej rozdzielczości urządzenia — zrzut z telefonu ok. 1179 × 2556 albo zrzut z komputera 2560 × 1600 — aby ekran był ostry nawet w mockupie 4K.
Kąt trzech czwartych ze światłem z tej samej strony, w którą obrócone jest urządzenie, wygląda najbardziej naturalnie; widok z przodu najlepiej sprawdza się w sklepach z aplikacjami.
Do sekcji hero na landing page'u użyj przezroczystego PNG i pozwól, by prześwitywało tło Twojej strony.
Musisz najpierw przyciąć zrzut lub zmienić jego rozmiar? Użyj przycinania obrazów lub zmiany rozmiaru obrazu, a narzędzia Zdjęcia do social mediów, aby dopasować gotowy mockup do każdej platformy.

Darmowy generator mockupów, który chroni prywatność Twoich projektów

Ekranów niewydanych aplikacji i prac dla klientów nie powinno się wysyłać na cudzy serwer. Tutaj Twój zrzut jest odczytywany, rysowany i renderowany w całości na Twoim urządzeniu przez WebGL; nigdy nie jest nigdzie wysyłany. Bez konta, bez znaku wodnego i bez limitu liczby mockupów. Twoje ustawienia — urządzenie, kąt, tło i opcje eksportu — są zapamiętywane w tej przeglądarce; obraz nie.

Najczęstsze pytania

Czy ten generator mockupów urządzeń jest darmowy?: Tak. Wszystkie urządzenia, kolory, kąty i rozmiary eksportu są darmowe, bez rejestracji i bez znaku wodnego.
Czy mogę zrobić nim mockup iPhone'a lub iPada?: Możesz zrobić mockup nowoczesnego telefonu lub tabletu przypominającego dzisiejsze popularne modele, czyli to, czego większość potrzebuje do podglądu aplikacji lub strony. Modele są ogólne i narysowane w kodzie; nie są oficjalnymi zdjęciami produktów Apple, a to narzędzie nie jest powiązane z Apple.
Czy mogę zrobić mockup strony internetowej lub przeglądarki?: Tak. Wybierz Przeglądarkę, aby umieścić zrzut swojej strony w oknie przeglądarki na komputer z paskiem adresu — wpisz własną domenę i wybierz jasny lub ciemny pasek — albo wybierz Monitor, aby pokazać ją na dużym ekranie na podstawie.
Jak uzyskać mockup w przezroczystym PNG?: Ustaw tło na Przezroczyste i format na PNG (lub WebP), a potem pobierz. Cień zostaje zachowany jako miękkie, półprzezroczyste piksele, więc wtapia się w to, na czym umieścisz mockup.
Jak obrócić urządzenie?: Użyj suwaków X, Y i Z lub wpisz dokładny kąt od −180° do 180°. Możesz też przeciągać urządzenie w podglądzie — z wciśniętym Shift obraca się w płaszczyźnie — albo kliknąć podgląd i używać strzałek. Ustawienia gotowe przeskakują do popularnych widoków, a Resetuj przywraca kąt domyślny.
W jakiej rozdzielczości mogę eksportować?: 1080, 2048 lub 4096 pikseli na dłuższym boku albo własny rozmiar do 8192 pikseli, w 1:1, 4:5, 16:9, 9:16 lub 4:3. Mockup jest renderowany od nowa w tym rozmiarze, więc jest ostry, a nie powiększony.
Mój zrzut jest ucięty na ekranie. Jak pokazać go w całości?: Przełącz dopasowanie do ekranu z Wypełnij na Dopasuj — wtedy widać cały obraz z pasami w wybranym kolorze. Przy Wypełnij przyciski wyrównania decydują, czy zostaje góra, środek czy dół wysokiego zrzutu.
Czy mój zrzut ekranu jest przesyłany?: Nie. Scena 3D działa w Twojej przeglądarce przez WebGL, a obraz nigdy nie opuszcza Twojego urządzenia.
Pojawia się komunikat, że WebGL jest niedostępny. Co mogę zrobić?: Widok 3D wymaga WebGL. Włącz akcelerację sprzętową w ustawieniach przeglądarki, zaktualizuj sterowniki karty graficznej albo spróbuj innej przeglądarki; obsługuje go każda aktualna wersja Chrome, Edge, Firefox i Safari.

Generator mockupów urządzeń 3D