Çıplak bir ekran görüntüsü bir sunumda, ürün sayfasında ya da sosyal medya paylaşımında çoğu zaman yarım kalmış gibi durur. Etrafına bir tarayıcı penceresi ya da telefon gövdesi eklemek, görselin ne gösterdiğini ilk bakışta anlatır: bu bir web sitesi, bu bir mobil uygulama. Bu araç, tasarım programı açmana gerek kalmadan bu çerçeveyi ekler.
Nasıl kullanılır?
- Bir ekran görüntüsü seç. Görüntü tarayıcında işlenir, hiçbir sunucuya yüklenmez.
- Çerçeveyi seç: açık ya da koyu tarayıcı penceresi, markasız telefon gövdesi veya yalnızca yuvarlak köşe ve gölgeden oluşan sade kart.
- Tarayıcı çerçevesinde adres çubuğundaki metni istediğin gibi düzenle.
- Zemini belirle: düz renk, iki renkli geçiş ya da şeffaf.
- İç boşluğu ve gölgenin yoğunluğunu ayarla.
- Sonucu 1x ya da 2x boyutta PNG olarak indir.
Hangi çerçeve, hangi iş için?
Tarayıcı penceresi web sitesi ve web uygulaması görselleri için doğal seçimdir. Açık tema çoğu belgede, koyu tema ise koyu renkli sunumlarda ve yazılım içeriklerinde daha uyumlu durur. Adres çubuğunu düzenleyebilmek iki açıdan işe yarar: deneme sunucusunun karmaşık adresini sitenin gerçek adıyla değiştirebilir, adreste görünen oturum ya da takip bilgilerini temizleyebilirsin.
Telefon çerçevesi dikey mobil ekran görüntüleri içindir. Gövde belirli bir marka ya da modele benzemeyen genel bir tasarımdır; çerçevede marka logosu veya tescilli bir cihaz tasarımı bulunmaz. Böylece görselin belirli bir üreticinin cihazını tanıtıyormuş gibi görünmez ve uygulaman ön planda kalır.
Sade kart belirgin bir çerçeve istemediğin, ama görselin zeminden ayrılmasını istediğin durumlar içindir. Blog yazılarındaki ara görseller, kullanım kılavuzları ve belgeler için uygundur.
Zemin için iki renkli geçiş, sosyal medya ve ürün tanıtım görsellerinde dikkat çeker. Şeffaf zemin ise görseli başka bir tasarımın ya da sayfanın üzerine yerleştireceksen kullanışlıdır.
Tarayıcı çerçevesi kullanacaksan ekran görüntüsünü alırken tarayıcının kendi sekme ve adres çubuğunu dışarıda bırak ya da sonradan Kırp aracıyla kes. Aksi hâlde görselde iki kat pencere görünür. Telefon ekran görüntülerinde de üstteki saat ve bildirim satırını kırpmak daha temiz bir sonuç verir.
1x mi, 2x mi?
Telefonların ve birçok dizüstü bilgisayarın ekranı, görüntüdeki her nokta için birden fazla fiziksel piksel kullanır. 1x çıktı bu ekranlarda biraz yumuşak görünebilir. 2x seçeneği aynı görseli iki kat genişlik ve yükseklikte kaydeder; sayfada yarı boyutunda gösterildiğinde keskin durur. Dosya daha büyük olacağı için bir web sitesinde kullanmadan önce Resim sıkıştır ile hafifletmeyi düşünebilirsin. Çıktının neden PNG olduğunu merak ediyorsan PNG format sayfasına göz at.
Paylaşmadan önce
Ekran görüntüleri e-posta adresleri, müşteri isimleri, bildirimler ve açık sekmeler gibi gözden kaçan kişisel bilgiler içerebilir. Çerçeveye koymadan önce bu kısımları Bulanıklaştır & sansürle aracıyla gizle. Sadece köşe yuvarlama ve kenarlık gerekiyorsa Kenarlık & yuvarlak köşe aracı daha sade bir alternatiftir.
Sık sorulan sorular
Çerçeveli görsel neden PNG olarak iniyor?
Çerçevenin yuvarlak köşeleri, gölgesi ve şeffaf zemin seçeneği ancak saydamlığı destekleyen bir formatta saklanabilir. Ekran görüntülerindeki yazılar da PNG'de keskin kalır.
Telefon çerçevesi belirli bir modele benziyor mu?
Hayır. Gövde marka belirtmeyen genel bir telefon tasarımıdır; logo veya tescilli tasarım içermez.
Birden çok ekran görüntüsünü aynı anda çerçeveleyebilir miyim?
Araç her seferinde bir ekran görüntüsüyle çalışır. Diğerlerini sırayla aynı şekilde işleyebilirsin.
2x çıktı ne zaman gerekli?
Görseli web sitesinde, sunumda ya da yüksek çözünürlüklü ekranlarda göstereceksen 2x kullan. Mesajlaşma gibi hızlı paylaşımlarda 1x genellikle yeterlidir.