Buat mockup online

Cara menghitung

Singkatnya: mockup adalah gambar pratinjau realistis yang memperlihatkan tampilan logo atau desain di produk sungguhan. Alat ini menempelkan gambar Anda dengan perspektif yang benar pada delapan foto produk – kaos, hoodie, mug, papan nama toko, kartu nama, laptop, HP, dan poster berbingkai – sambil mempertahankan lipatan, bayangan, dan kilau foto. Semuanya berjalan di browser: tanpa akun, tanpa watermark, tanpa upload.

Cara pakai

1. Tarik logo ke sini, pilih file, atau tempel dengan Ctrl + V. Tanpa gambar, alat ini menggambar logo contoh dari teks yang Anda ketik.
2. Ketuk salah satu produk – pratinjau langsung muncul.
3. Atur ukuran dan posisi. Biarkan “Hapus latar putih” aktif untuk logo berlatar putih, dan nyalakan “Penuhi seluruh bidang” untuk foto atau screenshot.
4. “Simpan mockup” mengunduh PNG atau JPG; “Semua 8 dalam ZIP” membuat semua produk sekaligus – praktis untuk penawaran, toko online, dan presentasi.

Cara menghitungnya

Papan nama, poster, atau layar tampak miring di foto. Dari empat sudut bidang tersebut alat ini menghitung transformasi proyektif (homografi), metode yang dijelaskan Paul Heckbert pada 1989 untuk texture mapping. Untuk setiap piksel foto, dicari titik yang sesuai di desain Anda lalu empat piksel tetangganya dicampur (interpolasi bilinear), sehingga tidak ada tepi bergerigi atau sambungan. Mug berbentuk bulat, jadi desain dililitkan pada silinder, menyempit ke arah sisi, dan mengikuti busur elips di bagian atas dan bawah.

Supaya terlihat tercetak, bukan ditempel, desain dikalikan dengan kecerahan foto produk (mode blend “multiply” dari W3C). Lipatan kain dan bayangan pada mug ikut terlihat di atas sablon, dan kilau keramik tetap tampak. Layar memancarkan cahaya sendiri, jadi tidak digelapkan.

Batasan

Foto produk berukuran 1024–1216 piksel di sisi panjang: cukup untuk situs web, toko online, dan media sosial, tetapi bukan file siap cetak. Foto dibuat secara lokal untuk situs ini dengan model gambar dan tidak menampilkan merek apa pun. Mockup hanyalah pratinjau: warna asli bergantung pada teknik cetak dan bahan.

Privasi

Logo Anda hanya diproses di browser dan tidak pernah diunggah. Yang diingat hanya pengaturan (produk, ukuran, teks), bukan gambarnya.

Lihat juga: hapus background logo dan buat kartu nama siap cetak.

Pertanyaan umum

Sumber dan dasar hukum

• 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()

Diperbarui: 1 Oktober 2026 · Kebijakan editorial