Apakah device mockup generator ini gratis?

Ya. Semua perangkat, warna, sudut, dan ukuran ekspor gratis, tanpa daftar dan tanpa watermark.

Bisakah saya membuat mockup iPhone atau iPad dengan alat ini?

Anda bisa membuat mockup HP atau tablet modern yang mirip model populer saat ini, yang memang dibutuhkan kebanyakan orang untuk pratinjau aplikasi atau website. Modelnya generik dan digambar dengan kode; bukan gambar produk resmi Apple, dan alat ini tidak berafiliasi dengan Apple.

Bisakah saya membuat mockup website atau browser?

Ya. Pilih Browser untuk menempatkan screenshot situs Anda di jendela browser desktop dengan bilah alamat — ketik domain Anda sendiri dan pilih toolbar terang atau gelap — atau pilih Desktop untuk menampilkannya di layar besar di atas dudukan.

Bagaimana cara mendapatkan mockup PNG transparan?

Atur latar ke Transparan dan format ke PNG (atau WebP), lalu unduh. Bayangan tetap berupa piksel semi-transparan yang lembut, sehingga menyatu dengan apa pun tempat Anda meletakkan mockup.

Bagaimana cara memutar perangkat?

Gunakan slider X, Y, dan Z atau ketik sudut yang tepat dari −180° hingga 180°. Anda juga bisa menyeret perangkat di pratinjau — tahan Shift untuk memutarnya — atau klik pratinjau dan gunakan tombol panah. Preset langsung melompat ke tampilan umum, dan Reset mengembalikan ke sudut bawaan.

Resolusi berapa yang bisa saya ekspor?

1080, 2048, atau 4096 piksel di sisi panjang, atau ukuran kustom hingga 8192 piksel, dalam 1:1, 4:5, 16:9, 9:16, atau 4:3. Mockup dirender baru pada ukuran itu, jadi hasilnya tajam, bukan hasil upscale.

Screenshot saya terpotong di layar. Bagaimana menampilkan seluruhnya?

Ubah Penyesuaian layar dari Isi ke Muat, yang menampilkan seluruh gambar dengan bilah berwarna pilihan Anda. Dengan Isi, tombol perataan menentukan apakah bagian atas, tengah, atau bawah dari screenshot yang tinggi yang dipertahankan.

Apakah screenshot saya diunggah?

Tidak. Adegan 3D berjalan di browser Anda dengan WebGL, dan gambar tidak pernah meninggalkan perangkat Anda.

Muncul pesan WebGL tidak tersedia. Apa yang bisa saya lakukan?

Tampilan 3D membutuhkan WebGL. Aktifkan akselerasi perangkat keras di pengaturan browser Anda, perbarui driver grafis, atau coba browser lain; semua versi terbaru Chrome, Edge, Firefox, atau Safari mendukungnya.

Mockup Generator 3D: Mockup HP & Laptop Gratis

Screenshot Anda di perangkat 3D yang tampak nyata, dari sudut mana pun

Jatuhkan screenshot atau desain, dan gambar itu muncul di layar HP, tablet, laptop, monitor desktop, atau jendela browser 3D. Putar perangkat pada sumbu X, Y, dan Z dengan slider, angka sudut, tombol panah, atau dengan menyeretnya; pilih warna perangkat, latar, dan bayangan lembut; lalu ekspor PNG, JPEG, atau WebP yang tajam hingga 8192 piksel — dengan latar transparan jika Anda ingin menempatkannya di slide atau landing page sendiri. Perangkat dimodelkan dengan kode dan dirender dengan WebGL di browser Anda, jadi tidak ada yang diunggah dan tidak ada watermark.

Cara membuat mockup perangkat

1Jatuhkan screenshot ke halaman, pilih file, atau tempel dengan Ctrl/⌘ + V. Sebelum itu, layar aplikasi contoh akan ditampilkan.
2Pilih HP, Tablet, Laptop, Desktop, atau Browser. Pilih warna — atau, untuk jendela browser, toolbar terang atau gelap serta alamat yang ditampilkan. HP dan tablet bisa diputar ke lanskap; layar laptop bisa dibuka ke sudut berapa pun.
3Pilih tampilan dari bilah di atas pratinjau — Hero ¾, Depan, Miring kiri/kanan, Isometrik, atau Flat lay — lalu sesuaikan di tab Tampilan, atau seret perangkat di pratinjau.
4Atur latar (transparan, polos, gradien, atau blur dari screenshot Anda sendiri), bayangan, dan arah cahaya.
5Pilih rasio aspek, ukuran, dan format, lalu unduh gambarnya atau salin ke clipboard.

Mockup HP, tablet, laptop, desktop, dan browser dalam 3D

Template mockup datar hanya memberi satu sudut tetap. Di sini perangkatnya adalah model 3D sungguhan, jadi Anda bisa menampilkannya lurus dari depan untuk screenshot ala App Store, pada sudut tiga perempat yang dramatis untuk gambar hero, atau tergeletak datar untuk postingan media sosial — dari unggahan yang sama, dalam hitungan detik.

Mockup HP memiliki layar modern tepi ke tepi dengan potongan kamera berbentuk pil, bingkai logam mengilap, dan kamera tiga lensa di bagian belakang. Mockup tablet memiliki bezel tipis dan rata seperti tablet kelas iPad masa kini, dan mockup laptop memiliki keyboard lengkap, trackpad, dan layar yang bisa dibuka dari tertutup hingga rebah penuh. Desainnya generik dan menyerupai perangkat populer saat ini — berguna di mana pun orang mencari mockup iPhone, mockup iPad, atau mockup MacBook — tetapi bukan gambar produk resmi, dan alat ini tidak berafiliasi dengan Apple atau produsen lain mana pun.

Mockup website di jendela browser

Untuk website atau aplikasi web, pilih Browser: screenshot Anda mengisi area halaman jendela browser desktop yang bersih, lengkap dengan tombol jendela dan bilah alamat yang menampilkan domain yang Anda ketik. Toolbar tersedia dalam versi terang dan gelap agar serasi dengan desain Anda, dan jendelanya bisa melayang di sudut mana pun seperti perangkat lain — atau menghadap lurus ke depan untuk mockup website datar yang tajam.

Lebih suka perangkat keras sungguhan? Desktop menempatkan halaman di layar besar dengan bezel tipis di atas dudukan aluminium, seperti situs yang dilihat di monitor studio. Dengan Isi dan Atas, screenshot satu halaman penuh yang panjang menampilkan layar pertamanya, persis seperti yang dilihat pengunjung.

Kontrol

Rotasi X, Y, dan Z: X memiringkan perangkat mendekat atau menjauh dari Anda, Y memutarnya ke kiri dan kanan, Z memutarnya di bidang gambar. Masing-masing berkisar dari −180° hingga 180° dan menerima nilai yang diketik. Di pratinjau, seret untuk memutar pada X dan Y, tahan <kbd>Shift</kbd> sambil menyeret untuk memutar pada Z, atau fokuskan pratinjau dan gunakan tombol panah (<kbd>Shift</kbd> untuk langkah 15°), <kbd>Q</kbd>/<kbd>E</kbd> untuk Z, dan <kbd>R</kbd> untuk mengatur ulang.
Zoom dan bidang pandang: Zoom mengubah seberapa besar perangkat mengisi bingkai. Bidang pandang (field of view) mengatur perspektif: sudut lebar melebih-lebihkan kedalaman seperti kamera HP yang dipegang dekat, sedangkan sudut yang sangat sempit tampak hampir ortografis, seperti render produk atau ilustrasi isometrik.
Penyesuaian layar: Isi menutupi seluruh layar dan memangkas bagian yang berlebih — tambatkan ke atas untuk menampilkan awal screenshot satu halaman penuh yang panjang. Muat menampilkan seluruh gambar dengan bilah berwarna pilihan Anda, dan Regang mendistorsinya mengikuti bentuk layar.
Pantulan kaca: Pantulan halus cahaya studio pada kaca penutup, yang membuat layar terlihat seperti kaca, bukan stiker. Matikan untuk warna layar yang benar-benar datar.
Latar dan bayangan: Ekspor dengan latar transparan, warna polos, gradien dua warna, atau blur lembut dari screenshot Anda sendiri. Bayangan bisa jatuh di lantai di bawah perangkat, cocok untuk laptop di atas meja, atau di dinding di belakangnya, yang memberi HP bayangan melayang.
Pencahayaan: Perangkat diterangi lingkungan studio yang lembut, sehingga logam dan kaca menangkap pantulan yang realistis. Sudut cahaya memutar lampu dan pantulan di sekitar perangkat; intensitas membuat seluruh adegan lebih terang atau lebih gelap.

Ukuran dan format ekspor

Gambar dirender ulang pada ukuran yang Anda ekspor — 1080, 2048, atau 4096 piksel di sisi panjang, atau ukuran kustom dari 256 hingga 8192 — dalam persegi 1:1, potret 4:5, lanskap 16:9, story 9:16, atau 4:3. Karena merupakan render baru, bukan pratinjau yang diperbesar, tepiannya tetap tajam di setiap ukuran, berapa pun ukuran layar Anda.

PNG bersifat lossless dan mempertahankan transparansi, pilihan tepat untuk mockup yang akan Anda tempatkan di website, slide, atau file desain. WebP juga mempertahankan transparansi dan jauh lebih kecil. JPEG tidak mendukung transparansi, jadi latar transparan diisi putih. Salin menaruh PNG di clipboard, siap ditempel ke Figma, Keynote, Slack, atau dokumen.

Tips untuk mockup yang lebih baik

Ekspor screenshot pada resolusi asli perangkat — screenshot HP sekitar 1179 × 2556 atau tangkapan desktop 2560 × 1600 — agar layar tetap tajam bahkan dalam mockup 4K.
Sudut tiga perempat dengan cahaya dari sisi yang sama dengan arah putaran terlihat paling alami; tampilan depan paling cocok untuk listing app store.
Untuk hero landing page, gunakan PNG transparan dan biarkan latar halaman Anda sendiri terlihat.
Perlu memotong atau mengubah ukuran screenshot terlebih dahulu? Gunakan alat potong gambar atau pengubah ukuran gambar, dan pengubah ukuran gambar media sosial untuk menyesuaikan mockup jadi ke setiap platform.

Mockup generator gratis yang menjaga privasi desain Anda

Layar aplikasi yang belum dirilis dan pekerjaan klien sebaiknya tidak diunggah ke server orang lain. Di sini screenshot Anda dibaca, digambar, dan dirender sepenuhnya di perangkat Anda dengan WebGL; tidak pernah dikirim ke mana pun. Tanpa akun, tanpa watermark, dan tanpa batas jumlah mockup yang Anda buat. Pengaturan Anda — perangkat, sudut, latar, dan opsi ekspor — diingat di browser ini; gambarnya tidak.

Pertanyaan yang sering diajukan

Apakah device mockup generator ini gratis?: Ya. Semua perangkat, warna, sudut, dan ukuran ekspor gratis, tanpa daftar dan tanpa watermark.
Bisakah saya membuat mockup iPhone atau iPad dengan alat ini?: Anda bisa membuat mockup HP atau tablet modern yang mirip model populer saat ini, yang memang dibutuhkan kebanyakan orang untuk pratinjau aplikasi atau website. Modelnya generik dan digambar dengan kode; bukan gambar produk resmi Apple, dan alat ini tidak berafiliasi dengan Apple.
Bisakah saya membuat mockup website atau browser?: Ya. Pilih Browser untuk menempatkan screenshot situs Anda di jendela browser desktop dengan bilah alamat — ketik domain Anda sendiri dan pilih toolbar terang atau gelap — atau pilih Desktop untuk menampilkannya di layar besar di atas dudukan.
Bagaimana cara mendapatkan mockup PNG transparan?: Atur latar ke Transparan dan format ke PNG (atau WebP), lalu unduh. Bayangan tetap berupa piksel semi-transparan yang lembut, sehingga menyatu dengan apa pun tempat Anda meletakkan mockup.
Bagaimana cara memutar perangkat?: Gunakan slider X, Y, dan Z atau ketik sudut yang tepat dari −180° hingga 180°. Anda juga bisa menyeret perangkat di pratinjau — tahan Shift untuk memutarnya — atau klik pratinjau dan gunakan tombol panah. Preset langsung melompat ke tampilan umum, dan Reset mengembalikan ke sudut bawaan.
Resolusi berapa yang bisa saya ekspor?: 1080, 2048, atau 4096 piksel di sisi panjang, atau ukuran kustom hingga 8192 piksel, dalam 1:1, 4:5, 16:9, 9:16, atau 4:3. Mockup dirender baru pada ukuran itu, jadi hasilnya tajam, bukan hasil upscale.
Screenshot saya terpotong di layar. Bagaimana menampilkan seluruhnya?: Ubah Penyesuaian layar dari Isi ke Muat, yang menampilkan seluruh gambar dengan bilah berwarna pilihan Anda. Dengan Isi, tombol perataan menentukan apakah bagian atas, tengah, atau bawah dari screenshot yang tinggi yang dipertahankan.
Apakah screenshot saya diunggah?: Tidak. Adegan 3D berjalan di browser Anda dengan WebGL, dan gambar tidak pernah meninggalkan perangkat Anda.
Muncul pesan WebGL tidak tersedia. Apa yang bisa saya lakukan?: Tampilan 3D membutuhkan WebGL. Aktifkan akselerasi perangkat keras di pengaturan browser Anda, perbarui driver grafis, atau coba browser lain; semua versi terbaru Chrome, Edge, Firefox, atau Safari mendukungnya.

Device Mockup Generator 3D