Ekran Görüntüsü Mockup Oluşturucu
Ham bir ekran görüntüsü işlevseldir ama sıradandır. Bir tarayıcı çubuğuna ya da macOS penceresi çerçevesine, yumuşak bir gölge ve renkli bir arka planla sarıldığında aynı ekran görüntüsü bitmiş bir ürün görseli gibi görünür. Bu araç zaten elinizdeki görüntüyü alır ve bir tarayıcı penceresine, bir macOS penceresine ya da köşeleri yuvarlatılmış sade bir çerçeveye yerleştirir; degrade bir arka plan üzerine, ayarlanabilir kenar boşluğu, köşe yarıçapı ve gölgeyle; böylece sonuç sunum destelerine, sosyal gönderilere ve basın kitlerine uyar.
Bir ekran görüntüsünü nasıl mockup'larsınız
-
1
Ekran görüntünüzü yükleyin
Herhangi bir çözünürlükte yakalanmış, 30 MB'a kadar herhangi bir PNG, JPG ya da WebP. Araç retina ve standart görüntüleri işler.
-
2
Bir çerçeve seçin
Tarayıcı penceresi (trafik ışığı noktaları ve bir URL çubuğuyla), macOS penceresi (trafik ışığı noktalarıyla) ya da yalnızca yuvarlatılmış köşeleri olan sade bir çerçeve.
-
3
Arka planı şekillendirin
Sıcak bir degradeye karışan bir arka plan rengi seçin. Kenar boşluğu ekleyin, köşe yarıçapını ayarlayın ve gölgeyi açın ya da kapatın.
-
4
Dışa aktarın
Bitmiş mockup'ı sosyal gönderiler, slaytlar ya da basın kitleri için PNG olarak indirin.
Doğru çerçeveyi ve arka planı seçmek
Çerçeve seçimi bağlamı belli eder. Tarayıcı çubuğu “web uygulaması” der. macOS penceresi “masaüstü uygulaması” der. Sade bir çerçeve, kendi chrome’u zaten olan bir arayüzde odağı korur. Gösterdiğiniz şeyle eşleşen birini seçin.
Çerçeve rehberi
| Çerçeve | En uygun kullanımı |
|---|---|
| Tarayıcı penceresi | SaaS özellikleri, açılış sayfaları, kontrol panelleri |
| macOS penceresi | Masaüstü uygulamaları, editörler, terminal yakalamaları |
| Sade | Kendi chrome’unu zaten içeren bir ekran görüntüsü |
Önerilen referans boyutları
Araç, ekran görüntünüzün kendi çözünürlüğünde dışa aktarır. Sonucu belirli bir kanal için kırparken ya da yeniden boyutlandırırken bu boyutlar yararlı bir referanstır.
| Hedef | Boyutlar (px) |
|---|---|
| Twitter / X kartı | 1600 x 900 |
| LinkedIn tek görsel | 1200 x 627 |
| Instagram akışı (yatay) | 1080 x 566 |
| Product Hunt galerisi | 1270 x 760 |
| Sunum destesi (16:9) | 1920 x 1080 |
Stil ipuçları
- Gölgeyi ince tutun. Gölge, çerçeveyi arka plandan ayırır; derinlik için açık bırakın ya da düz, sade bir görünüm için kapatın.
- Kenar boşluğunu bol tutun. Çerçevenin çevresinde 60-120 px, ekran görüntüsünün sıkışık görünmesini önler.
- Markanıza uygun bir arka plan seçin. Seçtiğiniz renk sıcak bir degradeye karışır, böylece markanıza yakın bir ton öğeyi sitenize bağlar.
- Çerçeveyi içeriğe uydurun. Masaüstü uygulamasının çevresindeki bir tarayıcı çubuğu ya da web sayfasının çevresindeki bir macOS penceresi uyumsuz görünür. Tereddüt ederseniz sade çerçeveyi kullanın.
- Hassas verileri (kullanıcı e-postaları, gerçek isimler, fatura bilgileri) dışa aktarmadan önce karartın. Bulanıklaştırmak, hukuki sonuçlardan kolaydır.
Sık Sorulan Sorular
Üç tane: bir tarayıcı penceresi (trafik ışığı noktaları ve bir URL çubuğu), bir macOS penceresi (trafik ışığı noktaları, URL çubuğu yok) ve yalnızca ekran görüntünüzün köşelerini yuvarlatan sade bir çerçeve. Çerçeveler stilizedir, belirli bir ürünün piksel kusursuz yeniden üretimleri değildir; bu yüzden çoğu bölgede pazarlama kullanımı için güvenlidir.
Şu an için hayır. Mockup, seçtiğiniz arka plan renginden oluşturulan bir degradenin üzerine yerleştirilir ve PNG bu arka plan gömülü olarak dışa aktarılır. Markanıza yakın bir renk ya da görüntüyü düz bir yüzeye yerleştirmeyi planlıyorsanız nötr bir ton seçin.
Mockup rahat bir çalışma genişliğinde işlenir, bu yüzden çok büyük ekran görüntüleri çerçeveye sığacak şekilde ölçeklenir. En keskin sonuç için retina (2x) yakalayın; dışa aktarılan PNG yüksek yoğunluklu ekranlarda keskin kalır.
Hayır. Birleştirme bir tarayıcı tuvalinde çalışır ve görüntü yalnızca son PNG’yi kaydettiğinizde cihazınızdan ayrılır.
İlgili Araçlar
Material Design Renk Seçici
Material Design renk paletini gezin. Herhangi bir tonu (50'den A700'e kadar) tek dokunuşla HEX, RGB veya HSL biçiminde kopyalayın.
Çizgili Kağıt Oluşturucu
Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.
Kanaviçe Şablonu Oluşturucu
JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.
Kareli kağıt oluşturucu
Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.
Fotoğraflardaki Yüzleri Çevrimiçi Bulanıklaştırın
Yüzlerin veya hassas ayrıntıların üzerine kutular çizin, ardından bulanıklaştırın, pikselleştirin ya da siyah kutuyla kapatın. İşlem tarayıcıda yapılır ve sonuç JPEG olarak indirilir.
Görüntü Formatı Dönüştürücü
Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.
Araç diğer dillerde mevcuttur
- Mockup-generator för skärmdumpar [SV]
- 스크린샷 목업 생성기 [KO]
- Générateur de maquettes d'écran [FR]
- เครื่องสร้างภาพจำลองสกรีนช็อต [TH]
- Screenshot-mockupgenerator [NL]
- Trình tạo mẫu ảnh chụp màn hình [VI]
- Screenshot-Mockup-Generator [DE]
- Generador de maquetas de captura de pantalla [ES]
- Generator Mockup Tangkapan Layar [ID]
- مولد نماذج لقطات الشاشة [AR]
- スクリーンショットモックアップ生成ツール [JA]
- Generator makiet zrzutów ekranu [PL]
- Gerador de Mockup de Captura de Tela [PT]
- Screenshot Mockup Generator [EN]
- Generatore di Mockup Screenshot [IT]
- Генератор макетов скриншотов [RU]
- 截图样机生成器 [ZH]