Generator makiet urządzeń

O Generator makiet urządzeń

Generator makiet urządzeń umieszcza zrzut ekranu w rzeczywistej ramce urządzenia: iPhone z Dynamic Island, telefon Android, iPad, MacBook Pro, okno przeglądarki z paskiem kart i paskiem adresu albo monitor pulpitu na podstawie. Każda ramka jest rysowana w prawdziwych proporcjach ekranu tego urządzenia, więc to, co eksportujesz, wygląda tak, jak zrzut wyglądałby na sprzęcie. Ramka jest malowana na płótnie w Twojej własnej karcie przeglądarki, więc zrzut nieopublikowanej aplikacji albo wewnętrznego pulpitu nigdy nie opuszcza komputera.

Trzy ramki, po które sięga się najczęściej

Ramka to skrót dla czytelnika: na pierwszy rzut oka mówi, czy patrzy na aplikację telefoniczną, stronę internetową czy narzędzie pulpitu, zanim przeczyta choć jedno słowo ze zrzutu.

Miernik przycięcia: część, którą większość narzędzi do makiet pomija

Ekran urządzenia ma stały kształt. Ekran iPhone ma 1179 na 2556, czyli mniej więcej 9:19,5, i prawie nic, co zrzucasz, nie ma dokładnie tych proporcji. Większość generatorów makiet po cichu skaluje obraz, aż pokryje ekran, i odrzuca to, co wystaje poza krawędź, więc dopiero po publikacji okazuje się, że zniknął dół tabeli cen.

To narzędzie to mierzy. W trybie Wypełnij ekran miernik pod przyciskami dopasowania podaje dokładny procent zrzutu, który ramka ukrywa, a pasek przechodzi z zielonego w czerwony, gdy ta liczba rośnie. Jeśli jest wyższa, niż chcesz, masz dwa wyjścia:

• Przesuń. Suwak przesuwa widoczne okno wzdłuż osi, która wystaje, więc możesz zachować nagłówek, środek albo stopkę zamiast akceptować wyśrodkowane przycięcie.
• Dopasuj całość. Zrzut jest skalowany, aż każdy jego piksel zmieści się na ekranie, a pozostałe pasy są wypełniane wybranym kolorem. Nic nie jest przycinane, kosztem widocznych pasów u góry i dołu albo po lewej i prawej.

Dobra zasada: poniżej około 8% przycięcia jest niewidoczne dla czytelnika, 8% do 25% jest w porządku, jeśli przesunąłeś kadr, by zachować temat, a powyżej 25% powinieneś albo zrobić zrzut ponownie w proporcjach urządzenia, albo przełączyć na Dopasuj całość.

Którą ramkę wybrać i w jakiej rozdzielczości

Zrzuty w tych rozmiarach pikseli lub większe pozostają ostre w każdym rozmiarze eksportu. Mniejsze są powiększane, a jako pierwsze ustępuje wygładzanie małych liter wewnątrz zrzutu.

Jak korzystać z Generatora makiet urządzeń: krok po kroku

1. Dodaj zrzut ekranu: upuść PNG lub JPG na panel wczytywania, kliknij go, aby wybrać plik, albo naciśnij Ctrl+V, aby wkleić bezpośrednio ze schowka.
2. Wybierz ramkę urządzenia: iPhone, Android, iPad, MacBook, Przeglądarka lub Monitor. Ramki telefonu i tabletu przełączają też orientację pionową i poziomą.
3. Sprawdź miernik przycięcia: jeśli ukryte jest za dużo, przeciągnij suwak przesuwania albo przełącz na Dopasuj całość, żeby nic nie zginęło.
4. Ostylizuj ramkę: ustaw kolor ramki, tło, odstęp, cień i odblask. W ramce przeglądarki wpisz własny tytuł karty i adres.
5. Eksport: wybierz rozmiar eksportu, potem Pobierz PNG, aby zapisać makietę, albo Kopiuj obraz, aby wkleić ją do posta.

Praktyczne wskazówki

• Rób zrzut w proporcjach urządzenia, kiedy możesz. Okno przeglądarki zmniejszone do 1179 na 2556 przed przechwyceniem sprawia, że miernik przycięcia pokazuje 0%, a makieta jest pikselowo dokładna.
• Użyj ramki przeglądarki, gdy URL ma znaczenie. Wpisanie własnej domeny w pasek adresu umieszcza markę w obrazie bez dodawania podpisu.
• Trzymaj odstęp między 6% a 12%. Mniej i urządzenie dotyka krawędzi posta; więcej i ekran staje się nieczytelny w kanale.
• Dopasuj kolor ramki do zrzutu. Gwiezdna czerń pod zrzutem w trybie ciemnym, Srebrny lub Tytan pod jasnym; chrom przeglądarki podąża za tym samym wyborem automatycznie.
• Zmniejsz odblask przy ekranach pełnych tekstu. Subtelny połysk czyta się jak szkło, mocny jak zdjęcie stockowe i zasłania treść.
• Eksportuj przezroczystość na slajdy. Tło BRAK daje unoszące się urządzenie z cieniem, gotowe do wrzucenia na dowolną prezentację albo sekcję hero.

Prywatność

Wszystko dzieje się w karcie przeglądarki przez interfejs HTML5 canvas. Twój zrzut jest odczytywany z lokalnego adresu URL obiektu, rysowany w ramce i kodowany do PNG przez samą przeglądarkę. Żaden obraz nie jest wysyłany, przechowywany ani transmitowany, a po załadowaniu strony narzędzie działa dalej bez połączenia sieciowego.

Często zadawane pytania

Czy mój zrzut ekranu jest wysyłany na serwer?

Nie. Ramki urządzeń są rysowane interfejsem HTML5 canvas w Twojej własnej karcie przeglądarki, a zrzut ekranu jest odczytywany z lokalnego adresu URL obiektu. Nic nie jest nigdzie wysyłane, więc makiety nieopublikowanych aplikacji, wewnętrznych pulpitów albo prac dla klientów zostają na Twoim komputerze. Po załadowaniu strony narzędzie działa dalej bez żadnego połączenia sieciowego.

Jakie ramki urządzeń są dostępne?

Sześć: iPhone z Dynamic Island, telefon Android z aparatem w otworze, iPad Pro, MacBook Pro z wycięciem i podstawą, okno przeglądarki z paskiem kart i paskiem adresu oraz monitor pulpitu na podstawie. Każda ramka używa rzeczywistych proporcji ekranu tego urządzenia, więc makieta zrobiona tutaj odpowiada temu, jak zrzut wyglądałby na sprzęcie.

Mój zrzut ekranu nie ma tego samego kształtu co ekran urządzenia. Co się dzieje?

Właśnie do tego służy miernik przycięcia. Wypełnij ekran skaluje zrzut, aż pokryje cały ekran, co obcina to, co wystaje poza krawędź, a miernik podaje dokładny procent, który jest ukryty. Suwak przesuwania przesuwa potem widoczne okno wzdłuż przyciętej osi, żeby zachować ważną część. Dopasuj całość skaluje zrzut, aż cały zmieści się na ekranie, i wypełnia pozostałe pasy wybranym kolorem, więc nic nie ginie.

Jaką rozdzielczość powinien mieć mój zrzut ekranu?

Dopasuj ją do urządzenia, które oprawiasz: 1179 na 2556 dla iPhone, 1080 na 2400 dla telefonu Android, 1668 na 2388 dla iPada, 3024 na 1964 dla MacBooka, 1440 na 900 dla okna przeglądarki i 2560 na 1440 dla monitora. Wszystko w tym rozmiarze lub większe pozostaje ostre. Mniejsze zrzuty też działają, ale są powiększane i wokół tekstu widać miękkie krawędzie.

Czy mogę wyeksportować urządzenie na przezroczystym tle?

Tak. Wybierz próbkę tła BRAK, a odstęp wokół urządzenia zostanie wyeksportowany jako alfa zamiast koloru, podczas gdy ramka, ekran i cień nadal są rysowane. Pobierz PNG zachowuje tę przezroczystość, której potrzebujesz, gdy makieta trafia na slajd, sekcję hero albo stronę, której własne tło ma prześwitywać.

Dlaczego ramka przeglądarki staje się ciemna?

Chrom przeglądarki podąża za wybranym kolorem ramki. Wybierz Gwiezdną czerń, a pasek kart, pasek narzędzi i pasek adresu przełączą się na ciemny motyw, żeby makieta pasowała do zrzutu w trybie ciemnym; każdy jaśniejszy kolor ramki daje jasny motyw. Tytuł karty i adres to zwykłe pola tekstowe, więc w obrazie możesz umieścić własną nazwę produktu i domenę.

Narzędzia obrazów:

• Dodaj linię do obrazu
• Dodaj tekst do obrazu
• ⬛ Kalkulator Proporcji Ekranu Nowy
• Przycinanie zdjęcia do koła Nowy
• Twórca kolaży
• Generator połącz kropki Popularne
• Przeglądarka i Usuwacz Danych EXIF Nowy
• Odwróć GIF
• Odwróć obraz
• Twórca GIF
• Narzędzie do pikselizacji obrazów
• Kompresor obrazów
• Narzędzie do przycinania obrazów
• Wzmacniacz obrazu
• Zmieniacz Rozmiaru Obrazu
• Rotator obrazów
• Rozdzielacz obrazów Popularne
• Konwerter obrazu na sztukę ASCII Nowy
• Tracer Obrazu do SVG Nowy
• Generator Obrazów Zastępczych Lorem Picsum Nowy
• 📷 OCR / Obraz na Tekst Nowy
• Kalkulator rozmiaru wydruku i rozdzielczości (DPI/PPI)
• Generator obrazu z zaokrąglonymi rogami Nowy
• Upiekszacz zrzutów ekranu Nowy
• Generator makiet urządzeń Nowy
• Dodaj cień do obrazu Nowy
• Dodaj ramkę do obrazu Nowy