Generator Gambar Placeholder
Buat gambar placeholder dengan ukuran preset untuk media sosial, iklan, dan thumbnail, dengan isian gradien atau acak, pola diagonal atau kisi, label multibaris, dan ekspor @2x.
Generator Gambar Placeholder — Pilih ukuran dari preset umum untuk media sosial, iklan, dan thumbnail atau masukkan sendiri, pilih latar solid, gradien, atau yang dibuat acak, lalu lapisi dengan pola diagonal atau kisi. Tambahkan label multibaris yang bisa ditempatkan di mana saja dengan keluarga font, ketebalan, dan ukuran pilihanmu, lalu ekspor sebagai PNG, JPG, WebP, atau SVG — dengan opsi @2x untuk layar retina. Semuanya digambar di peramban dengan API canvas dan SVG, jadi tidak ada yang kamu masukkan diunggah ke server.
Apa itu Generator Gambar Placeholder?
Generator Gambar Placeholder adalah alat gratis di peramban untuk desainer dan pengembang front-end yang membutuhkan grafik pengisi saat membuat tata letak, mockup, iklan, dan pustaka komponen. Mulailah dari preset seperti unggahan Instagram, thumbnail YouTube, kartu OG, atau slot iklan seperti leaderboard 728×90, atau ketik dimensi piksel yang tepat. Bergayakan latar sebagai satu warna, gradien diagonal dua warna, atau palet acak, tambahkan pola diagonal atau kisi, dan tempatkan label multibaris di salah satu dari sembilan posisi dengan font sans, serif, atau monospace. Aktifkan overlay dimensi untuk mencantumkan lebar dan tinggi di sudut, dan ekspor sebagai PNG, JPG, WebP, atau SVG yang bisa disalin, dengan skala retina @2x opsional untuk format raster.
Cara menggunakan Generator Gambar Placeholder
- Pilih ukuran preset (sosial, thumbnail, atau iklan) atau ketik lebar dan tinggi tepat dalam piksel.
- Buka Pengaturan untuk menetapkan latar: solid, gradien dua warna, atau klik Acak untuk warna acak yang aman.
- Secara opsional lapisi pola diagonal atau kisi dan aktifkan overlay dimensi.
- Ketik label — gunakan baris baru untuk teks multibaris — lalu atur posisi, keluarga font, ketebalan, dan ukurannya.
- Pilih PNG, JPG, WebP, atau SVG, dan aktifkan @2x untuk ekspor raster retina.
- Periksa pratinjau langsung dan klik Unduh (untuk SVG kamu juga bisa menyalin markup).
Contoh
Unggahan Instagram 1080×1080
Pilih preset Instagram Post, atur latar gradien dua warna, pusatkan label tebal dua baris, dan unduh PNG siap untuk mockup feed.
Iklan leaderboard 728×90
Pilih preset Ad Leaderboard, pertahankan latar abu-abu solid dengan pola kisi dan overlay dimensi aktif, lalu ekspor WebP pengisi untuk slot iklan.
Thumbnail YouTube retina
Pilih preset YouTube Thumbnail (1280×720), aktifkan ekspor @2x, dan unduh PNG 2560×1440 yang tetap tajam di layar berkerapatan tinggi.
Pertanyaan yang sering diajukan
- Ukuran preset apa saja yang tersedia?
- Ukuran sosial (unggahan, potret dan story Instagram, sampul Facebook, unggahan dan header X, banner LinkedIn, thumbnail YouTube, kartu OG) dan unit iklan standar (leaderboard, medium rectangle, wide skyscraper, billboard). Pilih salah satu untuk mengisi lebar dan tinggi, atau masukkan ukuran khusus apa pun.
- Bagaimana opsi latar dan pola bekerja?
- Latar bisa berupa satu warna, gradien diagonal dua warna, atau palet acak dari tombol Acak, yang memakai generator angka acak aman peramban. Di atasnya kamu bisa melapisi pola garis diagonal atau kisi yang digambar dengan warna teks.
- Bisakah label memiliki banyak baris dan dipindahkan?
- Ya. Ketik baris baru di kotak label untuk teks multibaris, tempatkan blok di salah satu dari sembilan posisi (atas/tengah/bawah × kiri/tengah/kanan), dan pilih font sans, serif, atau monospace dengan ketebalan normal atau tebal serta ukuran otomatis atau tetap. Biarkan label kosong untuk mencetak dimensi secara otomatis.
- Apa fungsi ekspor @2x?
- Untuk format raster (PNG, JPG, WebP) ia merender kanvas pada dua kali dimensi piksel agar berkas tetap tajam di layar retina dan DPI tinggi. SVG sudah tidak bergantung resolusi, jadi @2x tidak berlaku untuknya.
- Apakah gambar atau teks saya diunggah ke mana pun?
- Tidak. Setiap placeholder digambar sepenuhnya di peramban dengan API canvas dan SVG, dan unduhan terjadi secara lokal — tidak ada yang kamu ketik atau hasilkan dikirim ke server, jadi ini bekerja offline dan menjaga pekerjaanmu tetap pribadi.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi gambar dengan penyorotan sintaksis di browser Anda, dengan 20+ bahasa, tema dan latar kustom, nomor baris, serta ekspor PNG atau SVG.
Pemeriksa Kontras Warna
Periksa kontras WCAG 2.1 dan skor APCA Lc antara warna teks dan latar belakang, lihat lencana AA, AAA, dan 3:1, lalu terapkan warna lolos terdekat.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala OKLCH, HSL, atau RGB dengan langkah yang bisa diatur, petunjuk kontras WCAG per langkah, dan ekspor ke CSS, Tailwind, dan JSON.