Tanıtım sayfasının girişi
Tarayıcı çerçevesindeki bir ekran görüntüsü ilk bakışta “bu bir web uygulaması” der. Her bölüm rengine oturtmak için şeffaf arka plan (PNG ya da WebP) kullanın.
Ekran görüntünüzü tarayıcı penceresine yerleştirin
Web sitesi mockup için ürününüzün ekran görüntüsünü kendi adresiniz ve sekme adınızla bir Chrome, macOS ya da Windows tarayıcı çerçevesine koyun, sonra tanıtım sayfası, duyuru gönderisi ya da dokümantasyon için dışa aktarın. Henüz yayınlanmamış ekranlar hiçbir yere yüklenmez.
- Kendi adresiniz ve sekme adınız
- Hiçbir yere yüklenmez
- Filigran yok
Web sitesi mockup
Örnek yükleniyor
Örnek ekran görüntüsü· bırakın ya da CtrlV ile yapıştırın
Çıktı 0 × 0 piksel· bu cihazda kalır
Yapıştır CtrlVİndir CtrlS
Cihazınızda kalır. Dosyanız burada, bu tarayıcı sekmesinde işlenir. Hiçbir şey yüklenmez, saklanmaz veya gönderilmez.
Güncelleme: Ekim 2026
Kısa cevap
Web sitesi mockup’ı yapmak için ekran görüntünüzü yukarıdaki araca bırakın, bir tarayıcı çerçevesi seçin ve adres çubuğuna istediğiniz adresi yazın. Mockup kalabalık bir sayfada duracaksa arka plan ve kenar boşluğu ekleyin, sosyal medya gönderisi için 16:9 gibi bir boyut seçin ve PNG olarak indirin. Her renge oturan şeffaf bir mockup için arka planı Yok yapın.
Mockup’tan önce kişisel bilgileri gizleyin
Gerçek ürün, görüntüde gerçek müşteri yok
En iyi ürün ekran görüntüleri gerçek uygulamadan gelir; o da gerçek adlar, e-postalar ve gelir rakamlarıyla doludur. Blurr.ing Chrome eklentisi bunların herhangi birini canlı sayfada bulanıklaştırır, sonra ekran görüntüsü kısayolu görüntüyü bulanıklıklar piksellere işlenmiş olarak alır ve sonuca tarayıcı penceresi çerçevesi, arka plan, kenar boşluğu ve köşe ekleme imkânı sunar.
- Sayfada bulanıklaştırma ücretsiz ve sınırsızdır.
- Ücretsiz plan 5 ekran görüntüsü içerir; Premium sınırı kaldırır.
- Görsel tarayıcınızda oluşturulur ve hiçbir yere yüklenmez.
Chrome’a ekle
Kurulumu ücretsiz. Bilgisayardaki Chrome için.
Ekran görüntüsüne arka plan eklemeHer ekran görüntüsü için gradyan, kenar boşluğu, köşe ve gölge; çerçeve gerekmez. Ekran görüntüsü düzenlemeÇerçevelemeden önce ok, kutu, yazı ve fosforlu kalem ekleyin. Fotoğraf sansürlemeÖnceden aldığınız bir ekran görüntüsündeki kişisel bilgileri siyah kutuyla kapatın, bulanıklaştırın ya da mozaik yapın.
Nasıl çalışır
Ücretsiz mockup nasıl yapılır
Dört adım, yaklaşık bir dakika, tasarım programı gerekmez.
- 1
Ekran görüntünüzü ekleyin
Ürününüzün ekran görüntüsünü önizlemeye bırakın, Ctrl+V (Mac’te Cmd+V) ile yapıştırın ya da Görsel seç’e basın. Siz bir görsel ekleyene kadar örnek bir sayfa görünür.
- 2
Tarayıcı çerçevesini seçin
macOS ya da Windows’ta Chrome’u, macOS veya Windows tarayıcı çubuğunu, düz bir macOS veya Windows penceresini ya da çerçevesiz seçeneği seçin. Temayı açık, koyu ya da ekran görüntünüzün üst kısmına uyan otomatik olarak ayarlayın.
- 3
Adresi ve sekme adını yazın
Adres çubuğuna siteniz.com/fiyatlar gibi istediğiniz adresi, Chrome çerçevesi için de bir sekme adı yazın. Adresin gerçek ve canlı olması gerekmez.
- 4
Tuvali ayarlayıp dışa aktarın
Arka plan, kenar boşluğu, köşe ve gölge ekleyin, 16:9 ya da 1:1 gibi bir boyut seçin, sonra tam çözünürlükte PNG, JPEG ya da WebP indirin veya panoya kopyalayın.
Nerede işe yarar
İlk bakışta “web uygulaması” diyen ürün görselleri
Çıplak bir ekran görüntüsü yalnızca bir arayüz dikdörtgenidir. Aynı görüntü tarayıcı çerçevesinin içinde nerede çalıştığını ve nasıl bir ürün olduğunu gösterir.
Duyuru gönderileri ve galeriler
Product Hunt galerileri, duyuru gönderileri ve sürüm notları bir ürünü çıplak bir kırpıntıdan çok bağlamı içinde iyi gösterir. Önizlemede çerçeve kesilmesin diye 16:9 ya da 1.91:1 seçin.
Dokümantasyon ve yardım makaleleri
Adres çubuğunda gerçek yolu olan bir tarayıcı çerçevesi, okuyana bir adımın tam olarak hangi sayfada olduğunu söyler; kırpılmış bir panel bunu yapamaz.
Sosyal medya ve sunumlar
X, LinkedIn, Instagram gönderileri ve dikey gönderiler, hikâyeler ve Dribbble için boyutlar tuvali orana göre büyütür, ekran görüntünüzü kırpmaz.
Çerçeveler
Altı tarayıcı ve pencere çerçevesi
Her biri ekran görüntünüzün çözünürlüğünde, açık ya da koyu, düz şekillerle çizilir; Retina ekran görüntüsünde de keskin kalır.
- macOS’ta Chrome
- Üç pencere ışığı ve tek sekmeli (simge, başlık, kapat) bir sekme şeridi, altında geri, ileri, yenile düğmeleriyle adres çubuğu. En tanıdık “web uygulaması” çerçevesi.
- Windows’ta Chrome
- Aynı sekme şeridi ve araç çubuğu; simge durumuna küçült, ekranı kapla ve kapat düğmeleri şeridin sağ ucunda. Çoğu kullanıcı Chrome’u böyle görür.
- macOS tarayıcı
- Üç pencere ışığı ve ortada bir adres alanı; Safari tarzı bir başlık çubuğuna yakın.
- Windows tarayıcı
- Solda bir adres alanı, sağda simge durumuna küçült, ekranı kapla ve kapat simgeleri.
- macOS penceresi
- Pencere ışıkları ve isteğe bağlı bir başlık, adres çubuğu yok: masaüstü uygulamaları için ya da adresin görünmemesi gerektiğinde.
- Windows penceresi
- Sağda simge durumuna küçült, ekranı kapla ve kapat düğmeleri olan sade bir başlık çubuğu: Windows uygulamaları için, adres olmadan.
SSS
Web sitesi mockup: sık sorulan sorular
Ücretsiz mockup nasıl yapılır?
Ekran görüntünüzü yukarıdaki araca bırakın, bir tarayıcı çerçevesi seçin, adresi ve sekme adını yazın, sonra PNG, JPEG ya da WebP olarak indirin. Hesap, filigran ya da sayı sınırı yok; araç tamamen tarayıcınızda çalışır.
Adres çubuğundaki URL’yi ve sekme adını değiştirebilir miyim?
Evet. Adres alanına istediğiniz adresi, Sekme adı alanına (Chrome çerçevesi) istediğiniz metni yazın. İkisi de çerçeveye çizilir; böylece test sunucusundaki bir sayfayı asıl alan adınızla ya da kısa, düzgün bir yolla gösterebilirsiniz.
Şeffaf arka planlı PNG alabilir miyim?
Evet. Arka planı Yok yapın ve PNG ya da WebP olarak dışa aktarın: pencerenin çevresi ve yuvarlak köşeleri şeffaf kalır. JPEG şeffaflığı desteklemez, o alan beyaz olur.
Koyu temalı ekran görüntüleriyle çalışıyor mu?
Evet. Çerçeve teması Otomatik’teyken araç ekran görüntünüzün üst kısmına bakar ve ona uyan açık ya da koyu çerçeveyi seçer. Açık ya da Koyu’yu elle de seçebilirsiniz.
Ekran görüntüsüne arka plan ekleme aracından farkı ne?
Motor aynı, başlangıç noktası farklı. Arka plan aracı gradyanla ve çerçevesiz açılır, düzgün bir ekran görüntüsü için. Bu sayfa tarayıcı çerçevesiyle açılır ve ürün görselleri için adresi, sekme adını ve çerçeve tarzını öne çıkarır.
Ürün ekran görüntüsündeki müşteri verilerini nasıl gizlerim?
Ekran görüntüsünü almadan önce canlı sayfada bulanıklaştırın. Blurr.ing Chrome eklentisi bir web sayfasındaki herhangi bir adı, e-postayı ya da numarayı bulanıklaştırır, sonra ekran görüntüsü kısayolu görüntüyü bulanıklıklar piksellere işlenmiş olarak alır ve tarayıcı penceresi çerçevesi de sunar. Ücretsiz planı 5 ekran görüntüsü içerir.
Ekran görüntüm bir yere yükleniyor mu?
Hayır. Görsel cihazınızdan okunur ve bu sayfadaki bir tuvale çizilir. Hiçbir sunucuya gönderilmez ve saklanmaz, yani henüz yayınlanmamış ürün ekranları gizli kalır.