Rehber ve belgeler için net ekran görüntüleri

İyi ekran görüntüsü nereye tıklanacağını, ne seçileceğini veya sonucu gösterir. Doğru düğme bulunamıyorsa net bir tam masaüstü görüntüsü de yardımcı olmaz.

Amaç, her adımı dikkat dağıtan öğeler veya özel bilgiler olmadan, gereksiz büyük dosyalar oluşturmadan anlatmaktır. Bu rehber, ekranı hazırlamaktan yayımlanan görüntüyü kontrol etmeye kadar ilerler.

Her görüntünün görevini belirleyin

Önce talimatı yazın. “Dışa aktar, ardından PNG seç” açık bir konudur; “İşte ayarlar” önemli noktayı okuyucuya aratır.

Doğru anı gösterin: seçenekler için açık menü, sonuç için onay. Başlangıç, menü ve sonucu gerekirse ayrı görüntülere bölün.

Okuyucunun doğru yeri bulmasına yetecek bağlamı koruyun. Ait olduğu panelin başlığı görünmeyen tek bir açma-kapama düğmesini uygulamada bulmak zor olabilir. İlgili başlığı veya gezinme öğesini bırakın, gereksiz alanları çıkarın.

Her görüntünün bilgi eklediği kısa bir dizi planlayın. Açıkça anlatılmış her tıklama için ekran görüntüsü gerekmez.

Temiz bir orijinal yakalayın

Deneme hesabı kullanın, gereksiz sekme ve bildirimleri kapatın. Anlatılan arayüze uygun pencere genişliği seçin; dar pencereler menüleri değiştirebilir.

• Windows: Windows + Shift + S alan seçer. Ekran Alıntısı Aracı pencere ve tam ekran da yakalar; Microsoft yönergelerine bakın.
• Mac: Shift + Command + 4 alan seçer; Shift + Command + 5 denetimleri açar. Apple rehberine bakın.

Orijinal dosyayı kaydedin. Sohbet önizlemesini yeniden yakalamak veya küçük resmi indirmek ayrıntı kaybettirebilir. Monitörü fotoğraflamak yansıma ve bozulma ekler.

Metin zaten küçükse yakınlaştırmayı ayarlayıp yeniden yakalayın. Düzenin değişmediğini ve kontrollerin gizlenmediğini kontrol edin. Sonradan büyütmek kötü yakalanmış harfleri onarmaz.

Paylaşmadan önce özel bilgileri kaldırın

Adres, sekme başlıkları, hesap menüsü, kenar çubukları ve bildirimlere bakın. Örnek kayıtlar hesap menüsündeki gerçek e-postayı korumaz.

Gerekli alanın dışında kalan özel bilgileri kırparak çıkarın. Görüntüde kalması gereken bilgileri ise tamamen opak bir alanla kapatın. Bulanıklaştırma ve pikselleştirme içerik hakkında ipucu bırakabilir; gizli metinleri korumak için uygun değildir.

1. Görsel pikselleştirme aracını açın. Efekt altında opak kapatmayı, İngilizce arayüzde Solid cover seçin.
2. Kaplamayı yerleştirin. Dikdörtgeni harflerin tamamı etrafında pay bırakacak şekilde ayarlayın.
3. Her ek yer için alan ekleyin. İngilizce düğme Add area adını taşır. Tekrarları, kodları ve QR'ları kontrol edin. Kaplamayı taşımak iki yeri birden korumaz.
4. PNG'yi indirip açın. Yalnızca önizlemeyi değil, dosyayı kontrol edin.

Kaplama PNG piksellerinin parçasıdır. Kaldırılabilir dikdörtgen içeren düzenlenebilir belge yerine bu kopyayı paylaşın. Orijinali herkese açık klasörlerden uzak tutun.

Bu işlem yalnızca kapatılan alanları korur; belge, pano, hesap ve kaynaklardaki diğer bilgileri silmez. Pikselleştirme ve kapatma rehberini okuyun.

Önce kırpın, sonra vurgulayın

Görsel kırpma ile gereksiz gezinme, kenar boşluğu ve masaüstünü kaldırın. Kontrolün adını ve yeterli bağlamı bırakın.

İşaretlerden önce kadrajı belirleyin; oklar sonradan silinen içeriği göstermesin. Panel başlığı, bağlamsız oktan daha açıklayıcıdır.

Gerekirse bu işlevleri destekleyen bir görsel düzenleyicide çerçeve veya numara ekleyin. Düğmenin adını kapatmayın ve işareti metinde açıklayın. Pixilo’nun kırpma aracı görünür alanı değiştirir; ok veya açıklama eklemez.

Tutarlı stil ve adım numaraları kullanın. “2 numaralı düğmeyi seç” yalnızca yeşile dayanan tariften daha açıktır.

Gerçek okuma boyutuna göre ölçülendirin

Görseli son makalede değerlendirin. Tam ekranda okunan metin dar sütunda küçücük kalabilir.

Görünen metin boyutuyla netlik için gereken pikseli ayırın. Daha çok piksel harfleri kendiliğinden büyütmez.

800 × 500 CSS piksel görünüm 2× yakalandığında 1.600 × 1.000 üretebilir. 800 × 500 CSS'de göstermek görünür boyutu korur; 400 CSS genişlik etiketleri küçültür.

Yöntem, ekran ölçeği ve yakınlaştırma sonucu etkiler. MDN piksel yoğunluğunu açıklar. Her görüntüyü 2× varsaymadan kayıtlı ölçülere bakın.

Piksel azaltmadan önce daha odaklı kırpma deneyin. Telefonda 800 genişlik, 360 CSS içine sığabilir. Gerekirse bölün veya açılabilir büyük sürüm sunun.

Aşırı büyük kaynaklarda oran kilitli boyutlandırmayı kullanın. Yayın boyutunda karşılaştırın; bilgi kaybolursa daha çok piksel koruyun veya sadeleştirin.

Metni net tutan biçimi seçin

Metin ve kontrollerde PNG ile başlayın: kayıpsız sıkıştırma JPG hasarını önler. Ölçülerden önce PNG optimizasyonunu deneyin. Fotoğraf ağırlıklı ekranlarda JPG veya WebP karşılaştırılabilir.

Aynı kaynaktan aynı piksel ve gösterim boyutunda çıktı alın. Küçük harf, ince çizgi ve işaret kenarlarında bulaşma, kayıp noktalama ve hale arayın. Bilgi kayboluyorsa net sürümü koruyun.

JPG–PNG rehberine ve MDN biçim kaynağına bakın. Yeni karşılaştırmayı sıkıştırılmış indirmeden değil, hazırlanmış kaynaktan başlatın.

Görsel olmadan da anlaşılabilen talimat yayımlayın

Ekran okuyucu, yakınlaştırma, baskı ve yükleme hataları için adımları görselin yanına yazın: “Ayarlar, Faturalandırma, Faturayı indir.”

Alternatif metin katkıyı anlatır: “Son ödemenin yanında fatura indirme vurgulanmış faturalandırma ekranı.” Gereksiz kenar çubuklarını yazıya dökmeyin. W3C yönergelerine bakın.

Görsel altı açıklamasında, örneğin gösterilen yazılım sürümünü belirtebilirsiniz. Görseli, açıklamasını ve ilgili adımı birbirine yakın tutun. Bütün ekran görüntülerini adımlardan uzakta, sayfanın sonunda toplamayın.

Oranı koruyun ve sütun dışına taşmayı önleyin. Duyarlı görseller rehberi uygulamayı açıklar. Editörün küçük önizlemeyi seçmediğini kontrol edin.

Örnek: fatura indirmeyi anlatmak

Talimat “Ayarlar → Faturalandırma, sonra ödemenin yanındaki Faturayı indir” olsun. Ölçüler açıklama amaçlıdır, uygulama ölçümü değildir.

1. Görünümü hazırlayın. Örnek ödemeleri ve doğru düğmeyi gösterip diğer menüleri kapatın.
2. Ekran görüntüsünü alıp kırpın. 1.600 × 1.000 piksellik görüntüden alınan 1.200 × 700 piksellik bir kesit, Faturalandırma başlığını, son ödemeyi ve düğmeyi korurken gereksiz kenar çubuğunu dışarıda bırakabilir. Orijinali özel olarak saklayın.
3. Kalan hesap bilgisini kapatın. Gerçek e-posta ve tekrarlarına ayrı alan uygulayın. PNG indirip kontrol edin.
4. Gerekirse vurgulayın. İşaretleme yapabilen bir görsel düzenleyicide, düğmenin adını kapatmadan çevresine çerçeve ekleyin. Tutarlı bir stil kullanıp PNG olarak kaydedin.
5. Makalede kontrol edin. 1.200 piksel genişliğindeki kesit 600 CSS pikseli genişliğinde gösterilirse her CSS pikseli için iki görüntü pikseli bulunur. Telefonda ödeme satırını ve düğmenin adını kontrol edin. Gerekirse tüm ekranı daha da küçültmek yerine ilgili satırın yakın görünümünü sunun.
6. Metinle yayımlayın. Sayfa ve tam boyut bağlantısı korunan PNG'yi kullanmalı.

Önemli olan okuyucunun ödeme ve düğmeyi bulmasıdır; ne kadar masaüstü silindiği değil.

Kötü sonucun kaynağını bulun

Yayını yeni kullanıcı gibi izleyin: adlar ve adımlar eşleşmeli, görsel ilgili eylemin yanında olmalı.

Sık sorulan sorular

Her adım ekran görüntüsü ister mi?

Hayır. Ekran görüntüsü, bir işlemin yerini, yapılacak seçimi veya beklenen sonucu açıklamalıdır. Açık bir metin bazen yeterlidir. Gereksiz görüntüler daha fazla kaydırma gerektirir ve yazılım değiştiğinde güncellenmeleri gerekir.

Tam sayfa yakalama faydalı mı?

Genel yapı için evet; küçük kontroller için genellikle değil. Odaklı ayrıntı görünümleri ekleyin.

Fare işaretçisi görünmeli mi?

Yalnızca yardımcıysa. Etiketi örten işaretçi zorlaştırır; çerçeve ve yazı çoğu zaman daha açıktır.

Görseller nasıl güncel kalır?

Gerekli bağlamı gösterin; yararlıysa sürüm veya kontrol tarihi belirtin. Menüler değiştiğinde görseli ve metni birlikte güncelleyin.