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. 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. 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. 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. 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

Araç diğer dillerde mevcuttur