Genel Bakış..
Web tasarımlarda, (özellikle e-ticaret website tasarımlarında) ürün resimlerinde, logo tasarımlarında veya yazılarda yansıma özelliği kullanılabilir. Tabii ki otomasyon gereken durumlarda yansıma için javascript, jQuery, PHP ile çözüm üretmek gerekir, fakat biz şimdilik photoshopta bir objenin hızlıca yansımasını nasıl oluştururuz onu öğrenelim.
Özellikle website ürün slaytlarında, carousel uygulamalarında, banner ve reklam tasarımlarında yansıma özelliği sıkça kullanılır, genel olarak açık renkli arkaplan renklerinde daha iyi sonuçlar verir, fakat bu diğer renklerde olmaz anlamına gelmez..
Bu örneğimizde yansıma için kullanılan en bilindik yöntemi inceleyeceğiz. Yaratıcılığınıza ve görsel zenginliğinize göre bu uygulamanın üzerine ufak tefek eklemelerle daha inandırıcı sonuçlar elde edebilirsiniz. Bu tip uygulamalarla web tasarımlarınıza görsel zenginlik katabilirsiniz.
Web tasarımlarda görsellik arttıkça, site açılma hızında azalmalar olması kaçınılmazdır. Fakat unutulmamalıdır ki, gösterişli bir website, hele ki günümüzdeki internet hızlarıyla, websitenizin kullanılabilirliğini ve kullanıcı mutluluğunu arttıracaktır.
Tasarıma başlayabiliriz...
Fig.1 Yansıma uygulanacak obje
400X400 px boyutunda arkaplan rengi beyaz (#ffffff) olan yeni bir sayfa açın. Yansıması yapılacak resmi, sayfaya ekleyin (Ben internetten bulduğum bir resmi kullandım) .Fig.1
- 1. Objenin bulunduğu katmanın üzerinde sağ tıklayıp "Duplicate Layer" seçerek obje katmanının suretini çıkarın.
- 2. Yeni oluşturulan katmanı seçili hale getirip
Edit > Transform > Flip vertical
katmanı dikey yönde ters çevirin. Fig.2
- 3. Orjinal resmin altına gelecek şekilde konumlandırın. Fig.2
Fig.2 Yansıma katmanının konumlandırılmış hali
- 4. Yansıma katmanını seçili hale getirip Katman Panelinin altında bulunan "Add Vector Mask"
butonuna tıklayarak seçili katmana "mask" uygulayın
- 5. Katmandaki maskın seçili olduğundan emin olun, araçlar menüsünden "gradient" aracını tıklayın.Fig.3
- 6. Gradient araç seçili iken, 1 Nolu okun göstermiş olduğu kutucukta gradient özelliğinin siyahtan beyaza ayarlı olduğunu kontrol edin.Fig.3
- 7. 2 Nolu okun gösterdiği kısımda gradient özelliğinde linear seçili olduğundan emin olun.Fig.3
Fig.3 Mask için gradient uygulama hazırlığı
- 8. Gradient aracı seçili iken Fig.4 deki gibi 1.oktan başlayıp 2.Okta bitecek şekilde sağ tuşu bırakmadan sürükleyin (İpucu:"shift" tuşu basılı olarak sürüklerseniz, istikamet dik açı olacaktır).
Fig.4 Gradient uygulama anı ve sonrası
- 9. Yansıma katmanının üst kısmını biraz daha belirgin hale getirmek için, daha önce bahsettiğimiz konuları da dikkate alarak, yansıma katmanının bir suretini oluşturun("Duplicate Layer"), yeni katmanın yansıma katmanının üstünde olduğundan emin olun, ilk yansıma katmanını gizleyin (ki, yeni katmandaki değişikliği kolay takip edebilesiniz), yeni katmana aşağıdaki gibi bir "gradient" oluşturun (Not:Yeni katmanınızda mask zaten olacaktır, herhangi bir değişiklik yapmadan, maskı seçili hale getirin ve aşağıdaki gibi bir gradient uygulayın).
Fig.5 Gradient uygulama anı ve sonrası
- 10. Yansıma katmanlarını görünür hale getirin, yansıma katmanları ile orjinal resim arasında kalan beyaz kısım için de, yeni bir katman oluşturun, önplan rengini siyah yapıp, kalem aracını(Pencil) kullanarak bu kısma 1 piksel çizgi çizin ve opacity değerini 50% civarına getirin, Fig.6'ta uygulanmış halini görebilirsiniz.
Fig.6 Yansıma katmanı ile orjinal resim arasındaki beyaz bölgenin düzenlenmiş hali
Web tasarımlarınızda kullanacağınız bu tip uygulamalar, sitenizin görselliğini artıracaktır, fakat görselliği artırmak adına, olur olmaz yerde kullanmak, website tasarımınızı baltalayacaktır. Herşeyi kararında yapmak en iyisidir.
Kolay gelsin...
