Generator Mockup Perangkat

Tampilkan tangkapan layar dalam konteks dengan Generator Maket Perangkat MiniWebtool. Pilih bingkai ponsel, tablet, laptop, monitor, atau browser, periksa pengukur potongan, dan ekspor PNG yang dirender di browser.

Belum tahu cara menggunakannya? Tanya AI

Gemini (salin dan buka)

Di Gemini, tempelkan pertanyaan yang disalin ke chat. Anda juga dapat menyalinnya di bawah.

Lihat pertanyaan

Saya ingin memahami cara menggunakan alat Generator Mockup Perangkat dari MiniWebtool: https://miniwebtool.com/id/generator-mockup-perangkat/. Apa kegunaannya, masukan atau pengaturan apa yang diperlukan, dan bagaimana cara menggunakan alat ini serta memahami hasilnya? Jelaskan dengan satu contoh sederhana langkah demi langkah. Gunakan halaman ini sebagai sumber dan jawab dalam bahasa Indonesia.

Gratis 3× per hariTidak perlu mendaftarHasil instan

Generator Mockup PerangkatCoba sekarang — gratis ▼

Tangkapan layar aplikasi Anda di ponsel, tanpa ada yang terpotong

Pilih bingkai iPhone, Android, iPad, MacBook, atau browser. Meteran potong menunjukkan bagian yang tersembunyi, dan Tampilkan utuh membuatnya 0%.

📱

Jatuhkan tangkapan layar di sini

atau klik untuk menelusuri · atau tekan Ctrl + V untuk menempel

PNG JPG WebP Tetap di peramban Anda

screenshot.png

Ukuran ekspor 0 × 0 Tangkapan layar demo bawaan — jatuhkan milik Anda untuk menggantinya

📱 Bingkai perangkat

Setiap bingkai menggunakan proporsi layar nyata perangkat tersebut.

Orientasi

🎯 Kecocokan layar & meter potong

Memeriksa kecocokan…

Geser jendela yang terlihat50%

Warna padding di belakang tangkapan layar

🎨 Warna bingkai

🌐 Teks peramban

Judul tab

Bilah alamat

🌈 Latar belakang

Warna padat

✨ Sentuhan akhir

Padding9%

Bayangan

Kilau layar

📐 Ekspor

Tidak ada yang diunggah — PNG dikodekan oleh peramban Anda sendiri.

Embed Generator Mockup Perangkat Widget

Tentang Generator Mockup Perangkat

Generator Mockup Perangkat menempatkan tangkapan layar ke dalam bingkai perangkat nyata: iPhone dengan Dynamic Island, ponsel Android, iPad, MacBook Pro, jendela peramban dengan strip tab dan bilah alamat, atau monitor desktop di atas stand. Setiap bingkai digambar pada proporsi layar sebenarnya perangkat itu, jadi yang Anda ekspor adalah tampilan tangkapan layar pada perangkat kerasnya. Bingkai dilukis pada kanvas di dalam tab peramban Anda sendiri, yang berarti tangkapan layar aplikasi yang belum rilis atau dasbor internal tidak pernah meninggalkan mesin Anda.

Sekilas

Generator Mockup Perangkat menempatkan tangkapan layar di dalam bingkai iPhone, Android, iPad, MacBook, jendela browser atau monitor desktop dan mengekspor PNG. Meter pemotongan menunjukkan berapa bagian tangkapan layar yang tertutup bingkai.

Generator Mockup Perangkat: fitur sekilas
Fitur	Yang didapat	Cocok untuk
Enam bingkai perangkat	iPhone, Android, iPad Pro, MacBook Pro, jendela browser dan monitor desktop, digambar sesuai proporsi layar asli setiap perangkat.	Tangkapan layar App Store, dasbor SaaS dan perangkat lunak desktop
Meter pemotongan	Dalam mode Isi layar, meter menampilkan persentase tepat tangkapan layar yang tertutup bingkai, dan batangnya berubah merah saat naik.	Mengetahui apa yang terpotong sebelum memposting
Isi atau muat	Isi layar dengan penggeser sepanjang sumbu yang dipotong, atau Muat untuk menampilkan setiap piksel dengan strip berwarna di sekelilingnya.	Mempertahankan bagian header, tengah atau footer dari tangkapan layar panjang
Orientasi	Bingkai ponsel dan tablet dapat beralih antara potret dan lanskap.	Menampilkan aplikasi dan gim lanskap
Warna bingkai dan browser	Lima warna bingkai, dengan bilah browser berubah gelap untuk Space Black. Ubah judul tab dan teks bilah alamat.	Memasukkan nama produk dan domain Anda ke dalam gambar
Latar belakang dan finishing	Latar gradien, solid, sampel otomatis atau transparan, plus kedalaman bayangan dan silau layar.	Perangkat melayang di slide dan bagian hero
Ekspor	Unduh PNG atau salin gambar, dengan preset ekspor sosial.	Memposting langsung ke feed

Tiga bingkai yang paling sering digunakan

Bingkai adalah jalan pintas bagi pembaca: ia memberi tahu mereka dalam sekejap apakah mereka melihat aplikasi ponsel, halaman web, atau alat desktop, sebelum mereka membaca satu kata pun di dalam tangkapan layar.

Bingkai perangkatBodi, bezel, Dynamic Island, notch, atau chrome jendela. Digambar dari proporsi nyata setiap perangkat, bukan persegi panjang membulat generik.

Kecocokan layarCara tangkapan layar Anda ditempatkan pada layar yang hampir tidak pernah berbentuk sama: isi dan potong, atau muatkan seluruhnya dan beri padding.

Latar belakangArea padding di belakang perangkat. Gradien, padat, diambil dari tangkapan layar Anda, atau sepenuhnya transparan untuk slide.

Sentuhan akhirKedalaman bayangan dan kilau layar, dua hal yang mencegah bingkai datar terlihat seperti diagram.

Meter potong: bagian yang dilupakan sebagian besar alat mockup

Layar perangkat memiliki bentuk tetap. Layar iPhone berukuran 1179 kali 2556, kira-kira 9:19,5, dan hampir tidak ada yang Anda tangkap persis seperti itu. Sebagian besar generator mockup diam-diam menskalakan gambar Anda sampai menutupi layar dan membuang apa pun yang melewati tepi, jadi Anda baru tahu bagian bawah tabel harga hilang setelah Anda mempostingnya.

Alat ini mengukurnya. Dalam mode Isi layar meter di bawah tombol kecocokan melaporkan persentase tepat tangkapan layar Anda yang disembunyikan bingkai, dan batang berubah dari hijau ke merah seiring angka itu naik. Jika lebih tinggi dari yang Anda suka, ada dua jalan keluar:

Pan. Penggeser memindahkan jendela yang terlihat sepanjang sumbu mana pun yang overflow, sehingga Anda dapat mempertahankan header, bagian tengah, atau footer alih-alih menerima potongan yang terpusat.
Muatkan seluruhnya. Tangkapan layar diskalakan sampai setiap pikselnya berada di dalam layar, dan strip sisa diisi dengan warna yang Anda pilih. Tidak ada yang terpotong, dengan biaya pita yang terlihat di atas dan bawah, atau kiri dan kanan.

Aturan yang baik: di bawah sekitar 8% terpotong tidak terlihat oleh pembaca, 8% hingga 25% baik-baik saja jika Anda telah mem-pan agar subjek tetap ada, dan di atas 25% Anda sebaiknya mengambil ulang tangkapan layar pada rasio aspek perangkat atau beralih ke Muatkan seluruhnya.

Bingkai mana, dan pada resolusi berapa

Generator Mockup Perangkat: Bingkai mana, dan pada resolusi berapa
Bingkai	Piksel layar	Rasio	Gunakan ketika
iPhone	1179 × 2556	9:19.5	Tangkapan App Store, postingan aplikasi seluler, alur onboarding
Android	1080 × 2400	9:20	Daftar Play Store dan apa pun yang khusus Android
iPad Pro	1668 × 2388	7:10	Aplikasi tablet, alat baca dan gambar, layar kios
MacBook Pro	3024 × 1964	3:2	Perangkat lunak desktop, alat desain, alur kerja pengembang
Peramban	1440 × 900	16:10	Halaman web dan dasbor SaaS di mana URL adalah bagian dari poinnya
Monitor	2560 × 1440	16:9	Dasbor lebar, editor video, still presentasi

Tangkapan layar pada ukuran piksel itu atau lebih besar tetap tajam pada setiap ukuran ekspor. Yang lebih kecil diperbesar, dan yang pertama mengendur adalah anti-aliasing pada teks kecil di dalam tangkapan layar.

Cara Menggunakan Generator Mockup Perangkat: langkah demi langkah

Tambahkan tangkapan layar Anda: jatuhkan PNG atau JPG ke panel unggah, klik untuk menelusuri, atau tekan Ctrl+V untuk menempel langsung dari papan klip.
Pilih bingkai perangkat: iPhone, Android, iPad, MacBook, Peramban, atau Monitor. Bingkai ponsel dan tablet juga beralih antara potret dan lanskap.
Periksa meter potong: jika terlalu banyak yang tersembunyi, seret penggeser pan atau beralih ke Muatkan seluruhnya agar tidak ada yang hilang.
Gaya bingkai: atur warna bingkai, latar belakang, padding, bayangan, dan kilau. Pada bingkai peramban, ketik judul tab dan alamat sendiri.
Ekspor: pilih ukuran ekspor, lalu Unduh PNG untuk menyimpan mockup atau Salin gambar untuk menempelkannya ke postingan.

Tips praktis

Ambil tangkapan layar pada rasio aspek perangkat jika bisa. Jendela peramban yang diubah ukurannya ke 1179 kali 2556 sebelum Anda menangkap membuat meter potong membaca 0% dan mockup sempurna piksel.
Gunakan bingkai peramban ketika URL penting. Mengetik domain sendiri ke bilah alamat menempatkan merek Anda di gambar tanpa menambahkan keterangan.
Jaga padding antara 6% dan 12%. Kurang dari itu perangkat menyentuh tepi postingan; lebih dari itu layar menjadi sulit dibaca di feed.
Sesuaikan warna bingkai dengan tangkapan layar. Space Black di bawah tangkapan layar mode gelap, Silver atau Titanium di bawah yang terang; chrome peramban mengikuti pilihan yang sama secara otomatis.
Turunkan kilau untuk layar yang penuh teks. Kilau halus terbaca sebagai kaca, yang kuat terbaca sebagai foto stok dan menyembunyikan salinan Anda.
Ekspor transparan untuk slide. Latar belakang NONE memberi Anda perangkat mengambang beserta bayangannya, siap diletakkan di deck atau bagian hero mana pun.

Privasi

Semuanya terjadi di tab peramban melalui API kanvas HTML5. Tangkapan layar Anda dibaca dari URL objek lokal, digambar ke dalam bingkai, dan dikodekan ke PNG oleh peramban itu sendiri. Tidak ada gambar yang diunggah, disimpan, atau dikirim, dan setelah halaman dimuat alat ini tetap berfungsi tanpa koneksi jaringan.

Pertanyaan yang Sering Diajukan

Apakah tangkapan layar saya diunggah ke server?

Tidak. Bingkai perangkat digambar dengan API kanvas HTML5 di dalam tab peramban Anda sendiri, dan tangkapan layar Anda dibaca dari URL objek lokal. Tidak ada yang dikirim ke mana pun, jadi mockup aplikasi yang belum rilis, dasbor internal, atau pekerjaan klien tetap di mesin Anda. Setelah halaman dimuat alat ini tetap berfungsi tanpa koneksi jaringan sama sekali.

Bingkai perangkat mana yang tersedia?

Enam: iPhone dengan Dynamic Island, ponsel Android dengan kamera punch-hole, iPad Pro, MacBook Pro dengan notch dan alas, jendela peramban dengan strip tab dan bilah alamat, serta monitor desktop di atas stand. Setiap bingkai menggunakan proporsi layar nyata perangkat itu, jadi mockup yang dibuat di sini cocok dengan tampilan tangkapan layar pada perangkat kerasnya.

Tangkapan layar saya tidak berbentuk sama dengan layar perangkat. Apa yang terjadi?

Itulah fungsi meter potong. Isi layar menskalakan tangkapan layar sampai menutupi seluruh layar, yang memotong apa pun yang melewati tepi, dan meter memberi tahu Anda persentase tepat yang tersembunyi. Penggeser pan kemudian memindahkan jendela yang terlihat sepanjang sumbu yang terpotong agar bagian penting tetap terlihat. Muatkan seluruhnya menskalakan tangkapan layar sampai semuanya berada di dalam layar dan mengisi strip sisa dengan warna yang Anda pilih, jadi tidak ada yang hilang.

Resolusi berapa yang seharusnya digunakan tangkapan layar saya?

Sesuaikan dengan perangkat yang Anda bingkai: 1179 kali 2556 untuk iPhone, 1080 kali 2400 untuk ponsel Android, 1668 kali 2388 untuk iPad, 3024 kali 1964 untuk MacBook, 1440 kali 900 untuk jendela peramban, dan 2560 kali 1440 untuk monitor. Apa pun sebesar itu atau lebih besar tetap tajam. Tangkapan layar yang lebih kecil tetap berfungsi, tetapi diperbesar dan tepi lembut menjadi terlihat di sekitar teks.

Bisakah saya mengekspor perangkat pada latar belakang transparan?

Ya. Pilih swatch latar NONE dan padding di sekeliling perangkat diekspor sebagai alfa, bukan warna, sementara bingkai, layar, dan bayangan jatuh tetap digambar. Unduh PNG mempertahankan transparansi itu, yang Anda inginkan saat mockup akan diletakkan di slide, bagian hero, atau halaman yang latarnya sendiri harus terlihat tembus.

Mengapa bingkai peramban menjadi gelap?

Chrome peramban mengikuti warna bingkai yang Anda pilih. Pilih Space Black dan strip tab, bilah alat, serta bilah alamat beralih ke tema gelap agar mockup cocok dengan tangkapan layar mode gelap; salah satu warna bingkai yang lebih terang memberi Anda tema terang. Judul tab dan alamat adalah kolom teks biasa, jadi Anda dapat menempatkan nama produk dan domain sendiri di gambar.

Kutip konten, halaman, atau alat ini sebagai:

"Generator Mockup Perangkat" di https://MiniWebtool.com/id/generator-mockup-perangkat/ dari MiniWebtool, https://MiniWebtool.com/

oleh tim miniwebtool. Diperbarui: 4 September 2026

Mengobrol dengan AI favorit Anda