CodeKitHubApa Itu Alat Ini?
Generator Instagram Story adalah alat mockup berbasis browser yang meniru tampilan vertikal Story Instagram — garis progress bar bersegmen di atas, avatar bulat dengan cincin gradien, @username dan waktu relatif, latar belakang foto atau gradien penuh layar, teks overlay di tengah, serta reply bar membulat bertuliskan "Send message" dengan ikon hati — sehingga Anda bisa mengetik konten sendiri dan mengekspornya sebagai gambar potret yang siap dibagikan.
Hanya untuk hiburan dan desain: alat ini dibuat untuk lelucon, meme, slide presentasi, prototipe UI/UX, dan konten media sosial. Alat ini tidak boleh digunakan untuk membuat bukti palsu, melecehkan atau mencemarkan nama baik seseorang, atau menyamar sebagai Story asli milik orang lain — hal ini bisa melanggar hukum tergantung yurisdiksi Anda, dan sepenuhnya bertentangan dengan tujuan alat ini.
Apa pun yang Anda ketik tidak pernah meninggalkan perangkat Anda — seluruh Story digambar menggunakan HTML Canvas API langsung di browser, dan file PNG dibuat serta diunduh secara lokal. Tidak ada unggahan ke server, tidak ada akun, dan tidak ada pelacakan konten Anda.
Mengapa Menggunakannya?
- Kamu presentasi kampanye Story untuk brand ke klien dan ingin menunjukkan seperti apa teks overlay akan terlihat di format vertikal sebelum benar-benar syuting konten.
- Kamu bikin meme yang jelas-jelas lucu bergaya "Story dramatis" untuk dibagikan ke grup teman, bukan menyamar sebagai Story asli siapa pun.
- Kamu desainer UI yang sedang membuat mockup fitur mirip Story untuk aplikasi baru, dan butuh referensi visual proporsi elemen yang akurat.
- Kamu ingin uji coba beberapa variasi warna gradien latar dan posisi teks sebelum memutuskan gaya visual untuk Story asli brand-mu.
- Kamu membuat materi edukasi tentang anatomi UI Instagram Story (progress bar, reply bar, dll) untuk kelas desain atau workshop.
- Rendering 100% lokal — teks Anda tidak pernah menyentuh server.
Cara Menggunakan
- Atur username (@handle), waktu, warna avatar, atau unggah foto.
- Aktifkan placeholder gambar latar belakang dan pilih warna dasarnya.
- Ketik teks overlay yang akan ditampilkan di tengah Story.
- Sesuaikan teks placeholder pada reply bar di bagian bawah.
- Pantau preview potret yang diperbarui secara langsung, lalu klik "Download PNG" untuk menyimpan gambar.
Contoh
Input
Username: "@alex.rivera" · Waktu: "4h" · Teks overlay: "Weekend vibes 🌅" · Reply bar: "Send message"Output
Gambar PNG potret berukuran 360×640 yang menampilkan Instagram Story: tiga segmen progress bar di atas, avatar dengan cincin gradien bertuliskan "alex.rivera" dan "4h", latar belakang gradien ungu ke merah muda, teks "Weekend vibes 🌅" di tengah layar, serta reply bar membulat bertuliskan "Send message" dengan ikon hati di bagian bawah.Gambar dihasilkan secara instan di canvas preview langsung dan bisa diunduh dengan sekali klik — tanpa menunggu, tanpa unggahan.
Yang bisa Anda sesuaikan
- Username (@handle), waktu, warna avatar, atau foto yang diunggah.
- Progress bar bersegmen di bagian atas, sesuai dengan indikator Story multi-slide yang asli.
- Teks overlay di tengah dengan bayangan, persis seperti caption Story asli.
- Reply bar membulat di bagian bawah dengan teks placeholder yang bisa diedit dan ikon hati.
Penggunaan yang bertanggung jawab
Generator ini dibuat untuk memudahkan pembuatan gambar Instagram Story yang jelas-jelas fiktif untuk humor, bercerita, dan pekerjaan desain. Ini bukan alat untuk memalsukan bukti, merekayasa pelecehan, atau menyesatkan siapa pun agar mengira Story palsu itu asli. Jika Anda berencana membagikan gambar yang dibuat dengan alat ini, pertimbangkan untuk menambahkan konteks (seperti "fake" atau "mockup") agar penonton memahami bahwa itu bukan Instagram Story sungguhan — terutama jika subjeknya bisa disalahartikan sebagai orang atau kejadian nyata.
Elemen Story dan fungsinya
Setiap elemen visual di mockup ini secara sengaja meniru bagian spesifik dari tampilan Story Instagram asli.
| Elemen | Fungsi dalam mockup |
|---|---|
| Progress bar bersegmen | Meniru indikator multi-slide di rangkaian Story asli |
| Cincin gradien di avatar | Menandakan ini adalah tampilan Story aktif, bukan foto profil biasa |
| Teks overlay tengah dengan bayangan | Meniru gaya caption Story asli agar tetap terbaca di atas latar apa pun |
| Reply bar membulat + ikon hati | Meniru kolom balas cepat yang muncul di bagian bawah setiap Story |
Pertanyaan yang Sering Diajukan
Apakah menggunakan alat ini legal atau etis?
Alat ini sendiri sepenuhnya legal digunakan untuk hiburan, mockup, presentasi, dan pekerjaan desain. Yang tidak legal atau tidak etis adalah menggunakan gambar hasil generate untuk menipu seseorang — misalnya menampilkannya sebagai Story asli untuk melakukan penipuan, pelecehan, atau pencemaran nama baik seseorang, atau meniru konten asli milik seseorang. Tergantung tempat tinggal Anda, penyalahgunaan semacam itu bisa dianggap penipuan, pencemaran nama baik, atau pelecehan. Mohon gunakan alat ini hanya untuk tujuan yang jelas-jelas fiktif atau ilustratif.
Apakah alat ini mengunggah teks saya ke suatu tempat?
Tidak. Semua yang Anda masukkan tetap berada di memori browser Anda dan digambar langsung ke elemen canvas menggunakan JavaScript. File PNG dibuat dan diunduh di perangkat Anda — tidak ada yang pernah dikirim ke server mana pun.
Bisakah saya menggunakan foto saya sendiri sebagai latar belakang Story?
Latar belakang sengaja dibuat sebagai placeholder berwarna atau gradien, agar alat ini tetap sederhana dan menghindari godaan untuk menampilkan foto asli milik orang lain sebagai Story Anda sendiri. Anda tetap bisa mengunggah foto asli untuk avatar bulat.
Mengapa gambarnya berbentuk potret?
Instagram Story menggunakan rasio aspek vertikal 9:16, sehingga preview dan PNG hasil ekspor dibuat dalam format potret yang sama agar terlihat alami saat dibagikan atau disematkan dalam presentasi.
Sebaiknya saya pakai alat ini atau salah satu generator mockup Instagram lainnya?
Jika Anda membuat mockup Story vertikal layar penuh yang bersifat sementara dengan teks overlay, gunakan generator Story ini. Jika Anda membutuhkan postingan feed permanen dengan caption serta jumlah like/komentar, gunakan Generator Instagram Post; untuk thread komentar, gunakan Generator Instagram Comment; untuk halaman profil lengkap, gunakan Generator Instagram Profile.
Berapa banyak segmen yang ditampilkan progress bar di bagian atas?
Progress bar meniru indikator multi-slide Story asli, yang menampilkan satu segmen untuk setiap foto atau video dalam rangkaian Story seseorang — pada contoh bawaan alat ini ditampilkan tiga segmen untuk memberi kesan bahwa ini adalah slide di tengah sebuah rangkaian Story, bukan slide tunggal berdiri sendiri.
Apakah saya bisa membuat teks overlay dengan warna berbeda-beda dalam satu Story?
Teks overlay dirender sebagai satu blok dengan gaya konsisten (posisi tengah dengan bayangan) untuk menjaga alat tetap sederhana — kalau Anda butuh beberapa warna atau gaya teks berbeda, cara praktisnya adalah membuat beberapa Story terpisah dengan teks masing-masing lalu menggabungkannya nanti di editor gambar lain kalau perlu ditumpuk.
Kenapa harus format 9:16 vertikal, tidak bisa dibuat landscape atau persegi?
Rasio 9:16 bukan pilihan sembarangan — ini adalah rasio aspek layar penuh standar yang dipakai Story di Instagram, Facebook, Snapchat, dan TikTok, jadi mockup yang dibuat dengan rasio ini akan terlihat proporsional dan wajar kalau disematkan ke presentasi bertema media sosial atau dibandingkan langsung dengan Story asli.
Apakah waktu (timestamp) seperti "4h" bisa diganti dengan format lain, misalnya jam sungguhan?
Bisa — kolom waktu menerima teks bebas apa pun yang Anda ketik, jadi Anda bisa memakai format relatif seperti "4h" atau "2d" (meniru gaya Instagram asli), atau mengetik waktu absolut seperti "14:30" kalau itu lebih sesuai kebutuhan mockup Anda.