Gölge nedir?

Gölge, görselin arkasına ve biraz yanına yerleştirilen, daha koyu ve yumuşak bir kopyadır; görsel sanki sayfanın üzerinde süzülüyormuş gibi görünür. Ürün görsellerini, logoları, ekran görüntülerini ve fotoğrafları arka plandan öne çıkarır; düz tasarımlara derinlik katar.

Araç açıklaması

Bir görsel açın, Bulanıklık ayarıyla gölgenin ne kadar yumuşak olacağını belirleyin ve yatay ve dikey kaydırma değerleriyle gölgeyi konumlandırın. Renk bölümünden rengini ve opaklığını seçin. Saydamlığa sahip bir PNG veya WebP görselinde gölge, görselin etrafındaki dikdörtgeni değil, nesnenin şeklini izler. Fotoğraflarda ise gölge, fotoğrafın dikdörtgen şeklini izler.

Tuval, gölgenin tamamını sığdıracak kadar genişler. İndirilen PNG, sayfalara veya slaytlara eklenmeye hazır, saydam arka planlı bir görseldir.

Özellikler

  • Saydam görsellerin şeklini izler
  • Bulanıklık, kaydırma, renk ve opaklık ayarları
  • Gölgeyi sığdırmak için tuval genişler; böylece hiçbir şey kırpılmaz
  • Saydam PNG indirme

Nasıl çalışır?

Bulanıklık, CSS gölgesindeki bulanıklık gibi çalışır: standart sapması değerin yarısı olan bir Gauss bulanıklığı uygulanır. Gölge, görselin kenarını geçtikten sonra bulanıklık değerinin yaklaşık bir buçuk katı mesafede kaybolur. Bu nedenle tuval, gölgenin kaydırma değeri de hesaba katılarak kenarı geçtiği her yönde bu miktar kadar genişler.

İpuçları

  • Görselin hemen altında, yatay kaydırma olmadan oluşturulan bulanık bir gölge, görselin süzülüyormuş gibi görünmesini sağlar.
  • Doğal bir görünüm için opaklığı %30 ile %50 arasında tutun. Bulanıklık olmadan tam opaklık kullanmak ise düz, retro bir görünüm verir.
  • Renkli bir sayfada, sayfanın renginin daha koyu bir tonu siyahtan daha doğal görünür.
  • Saydam arka planı korumak için PNG veya WebP biçimini kullanın. JPG, gölgeyi beyaz arka plana yerleştirir.