Generator Mockup Perangkat

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.

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.

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

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

1. Tambahkan tangkapan layar Anda: jatuhkan PNG atau JPG ke panel unggah, klik untuk menelusuri, atau tekan Ctrl+V untuk menempel langsung dari papan klip.
2. Pilih bingkai perangkat: iPhone, Android, iPad, MacBook, Peramban, atau Monitor. Bingkai ponsel dan tablet juga beralih antara potret dan lanskap.
3. Periksa meter potong: jika terlalu banyak yang tersembunyi, seret penggeser pan atau beralih ke Muatkan seluruhnya agar tidak ada yang hilang.
4. Gaya bingkai: atur warna bingkai, latar belakang, padding, bayangan, dan kilau. Pada bingkai peramban, ketik judul tab dan alamat sendiri.
5. 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.

Peralatan gambar:

• Tambahkan Garis ke Gambar
• Tambahkan Teks ke Gambar
• ⬛ Kalkulator Rasio Aspek Populer
• Potong Gambar Bulat Baru
• Pembuat Kolase
• Generator Hubungkan Titik
• Penampil dan Penghapus Data EXIF Baru
• Balik GIF
• Balik Gambar Populer
• Pembuat GIF
• Alat Piksel Gambar
• Kompresor Gambar
• Pemangkas Gambar
• Peningkat Gambar
• Pengubah Ukuran Gambar
• Pemutar Gambar
• Pembagi Gambar Populer
• Konverter Gambar ke Seni ASCII Baru
• Pelacak Gambar ke SVG Baru
• Pembuat Gambar Placeholder Lorem Picsum Baru
• 📷 OCR / Gambar ke Teks Baru
• Kalkulator Ukuran Cetak dan Resolusi (DPI/PPI) Populer
• Generator Gambar Sudut Membulat Baru
• Pempercantik Tangkapan Layar Baru
• Generator Mockup Perangkat Baru
• Tambah Bayangan ke Gambar Baru
• Tambahkan Border ke Gambar Baru