Softonic

Generator Mockup Tangkapan Layar

Langkah 1 / 3

Tangkapan layar mentah memang fungsional, tetapi terlihat biasa saja. Ketika dibungkus dalam bilah browser atau bingkai jendela macOS, dilengkapi bayangan lembut dan latar yang berwarna, tangkapan layar yang sama tampak seperti visual produk jadi. Alat ini mengambil gambar yang sudah Anda miliki dan menempatkannya dalam jendela browser, jendela macOS, atau bingkai sederhana dengan sudut membulat, di atas latar gradien dengan padding, radius sudut, dan bayangan yang dapat disesuaikan, sehingga hasilnya cocok untuk slide, unggahan media sosial, dan kit pers.

Cara membuat mockup tangkapan layar

  1. 1

    Unggah tangkapan layar Anda

    File PNG, JPG, atau WebP apa pun hingga 30 MB, diambil pada resolusi berapa pun. Alat ini mendukung gambar Retina maupun standar.

  2. 2

    Pilih bingkai

    Jendela browser (dengan titik-titik ala lampu lalu lintas dan bilah URL), jendela macOS (dengan titik-titik ala lampu lalu lintas), atau bingkai sederhana yang hanya membulatkan sudut.

  3. 3

    Atur latar belakang

    Pilih warna latar yang berbaur menjadi gradien hangat. Tambahkan padding, sesuaikan radius sudut, lalu aktifkan atau nonaktifkan bayangan.

  4. 4

    Ekspor

    Unduh mockup yang sudah jadi sebagai PNG untuk unggahan media sosial, slide, atau kit pers.

Memilih bingkai dan latar belakang yang tepat

Pemilihan bingkai menunjukkan konteks. Bilah browser berkata “aplikasi web”. Jendela macOS berkata “aplikasi desktop”. Bingkai sederhana menjaga fokus pada antarmuka yang sudah memiliki chrome sendiri. Pilih yang sesuai dengan apa yang Anda tampilkan.

Panduan bingkai

Bingkai Paling cocok untuk
Jendela browser Fitur SaaS, halaman arahan, dasbor
Jendela macOS Aplikasi desktop, editor, tangkapan terminal
Sederhana Tangkapan layar yang sudah memiliki chrome sendiri

Ukuran referensi yang disarankan

Alat ini mengekspor pada resolusi tangkapan layar Anda sendiri. Saat Anda memotong atau mengubah ukuran hasil untuk saluran tertentu, dimensi berikut menjadi acuan yang berguna.

Tujuan Dimensi (px)
Kartu Twitter / X 1600 x 900
Gambar tunggal LinkedIn 1200 x 627
Feed Instagram (horizontal) 1080 x 566
Galeri Product Hunt 1270 x 760
Deck slide (16:9) 1920 x 1080

Tips gaya

  • Jaga bayangan tetap halus. Bayangan mengangkat bingkai dari latar; biarkan aktif untuk kedalaman atau matikan untuk tampilan datar dan minimalis.
  • Jaga padding tetap lega. Jarak 60-120 px di sekeliling bingkai mencegah tangkapan layar terasa sempit.
  • Pilih latar yang sesuai dengan merek Anda. Warna yang Anda pilih berbaur menjadi gradien hangat, sehingga nuansa yang dekat dengan merek mengaitkan aset dengan situs Anda.
  • Sesuaikan bingkai dengan kontennya. Bilah browser di sekeliling aplikasi desktop, atau jendela macOS di sekeliling halaman web, terasa tidak selaras. Gunakan bingkai sederhana jika ragu.
  • Hapus data sensitif (alamat email pengguna, nama asli, informasi penagihan) sebelum mengekspor. Mengaburkan data lebih mudah daripada menghadapi konsekuensi hukum.

Pertanyaan yang Sering Diajukan

Tiga: jendela browser (titik-titik ala lampu lalu lintas plus bilah URL), jendela macOS (titik-titik ala lampu lalu lintas, tanpa bilah URL), dan bingkai sederhana yang hanya membulatkan sudut tangkapan layar Anda. Bingkai-bingkai ini bergaya, bukan reproduksi sempurna dari produk tertentu, sehingga aman untuk keperluan pemasaran di sebagian besar wilayah.

Saat ini tidak. Mockup disusun di atas gradien yang dibangun dari warna latar yang Anda pilih, dan PNG diekspor dengan latar tersebut menyatu di dalamnya. Pilih warna yang dekat dengan merek Anda, atau nuansa netral jika Anda berencana menempatkan gambar di atas permukaan polos.

Mockup dirender pada lebar kerja yang nyaman, sehingga tangkapan layar yang sangat besar diperkecil agar pas dengan bingkai. Ambil dalam Retina (2x) untuk hasil paling tajam, dan PNG yang diekspor tetap tajam pada layar beresolusi tinggi.

Tidak. Proses komposisi berjalan di dalam kanvas browser, dan gambar hanya keluar dari perangkat Anda saat Anda menyimpan PNG akhir.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pembuat Bendera

Rancang bendera 3:2 kustom sederhana di browser dengan enam tata letak, warna, teks, dan simbol. Unduh SVG atau PNG, atau buka dialog cetak browser.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain