Mockup online

Jak to obliczamy

W skrócie: mockup to realistyczna wizualizacja, która pokazuje, jak logo lub projekt wygląda na prawdziwym produkcie. To narzędzie nakłada Twój obraz w poprawnej perspektywie na osiem zdjęć – koszulkę, bluzę z kapturem, kubek, szyld sklepu, wizytówkę, laptop, telefon i plakat w ramie – i zachowuje fałdy, cienie oraz połysk. Wszystko działa w przeglądarce: bez konta, bez znaku wodnego i bez wysyłania plików.

Jak to działa

1. Przeciągnij logo, wybierz plik albo wklej go skrótem Ctrl + V. Bez obrazu narzędzie rysuje przykładowe logo z wpisanego tekstu.
2. Dotknij produktu – podgląd pojawia się od razu.
3. Dopasuj wielkość i położenie. Przy logo na białym tle zostaw włączone „Usuń białe tło”, przy zdjęciach i zrzutach ekranu włącz „Wypełnij całą powierzchnię”.
4. „Zapisz mockup” pobiera PNG lub JPG, a „Wszystkie 8 w ZIP” tworzy od razu wszystkie produkty – przydatne do ofert, sklepów internetowych i prezentacji.

Jak to jest liczone

Szyld, plakat czy ekran widać na zdjęciu pod kątem. Z czterech narożników powierzchni narzędzie wyznacza przekształcenie rzutowe (homografię) – metodę opisaną przez Paula Heckberta w 1989 roku dla mapowania tekstur. Dla każdego piksela zdjęcia wylicza odpowiadający mu punkt projektu i miesza cztery sąsiednie piksele (interpolacja dwuliniowa), więc nie ma schodków ani szwów. Kubek jest okrągły: projekt owija się wokół walca, zwęża ku bokom, a górą i dołem biegnie po łuku elipsy.

Aby wyglądał na nadruk, a nie naklejkę, projekt jest mnożony przez jasność zdjęcia (tryb mieszania „mnożenie” według W3C). Fałdy materiału i cień na kubku przechodzą przez nadruk, a odblaski na ceramice pozostają widoczne. Ekrany świecą same, więc nie są przyciemniane.

Ograniczenia

Zdjęcia produktów mają od 1024 do 1216 pikseli na dłuższym boku – w zupełności wystarczy na stronę, do sklepu i social mediów, ale to nie jest plik do drukarni. Zostały wygenerowane lokalnie dla tej strony modelem graficznym i nie pokazują żadnych marek. Mockup to podgląd: rzeczywisty kolor zależy od techniki druku i materiału.

Prywatność

Logo jest przetwarzane wyłącznie w przeglądarce i nigdy nie jest wysyłane. Zapamiętywane są tylko ustawienia (produkt, wielkość, tekst), nigdy obraz.

Przydatne też: usuwanie tła z logo i kreator wizytówek z plikiem PDF do druku.

Najczęściej zadawane pytania

Źródła i podstawa prawna

• Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
• W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
• ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
• MDN – CanvasRenderingContext2D.getImageData() / putImageData()
• W3C – Web Share API
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

Stan na: 1 października 2026 · Zasady redakcyjne