Yeni geliştirilen uygulamalar ve internet hızındaki artışlarla birlikte, web tasarım dünyasında görsellik kullanımı artmıştır. Menülerde veya linklerde kullanılan görsel butonlar ve uygulamalar website görünüşünü bir anda değiştirmekte ve göze hitap eder duruma getirmektedir.
Bu yazımızda, web tasarım uygulamalarınızda kullanabileceğiniz buton (düğme) yapımını ele alacağız. Hedefimiz olgunun genel mantığını vermektir.
Ebatlarda ve verdiğimiz değerlerde değişiklikler yaparak, çeşitli boyutta ve özellikte butonlar oluşturup website tasarımlarınızda kullanabilirsiniz.
İlk örneğimiz, menü olarak kullanılabilecek büyük bir buton olacak...
Oluşturacağınız butonun ana renklerinde değişiklikler yaparak ve farklı şekiller kullanarak (Butonun üst kısmındaki şekil), değişik renklerde menü linkleri oluşturabilirsiniz, bu butonları website tasarımlarınızda giriş sayfasında kullanabilirsiniz.
Butonumuzun tasarımına başlayalım..
İlk önce 400X400 px boyutunda arkaplan rengi #111111 olan yeni bir sayfa açın (Yeni sayfanızın arka planını transparent yapıp, layer panelinden yeni bir katman oluşturup bu katmanı #111111 renk ile de doldurabilirsiniz).
- 1. "Rounded Rectangle Tool"'u seçin.
- 2. Boyutlarını 240 X 240px, yarıçapı da (radius) 10px olarak ayarlayın. Fig.1
Fig.1 Buton arkaplanının ve butonun ana çatısının hazırlanması
- 3. Butona Fig.2 'deki gradient katman stilini uygulayın.
- 4. Daha sonra Fig.3 'deki "inner glow" katman stilini uygulayın.
- 5. Gradient ve Inner Glow'dan sonra butonunuz Fig.4 'deki gibi görünmelidir .
Fig.2 Butona "gradient" uygulanması.
Fig.3 Butona "inner glow" uygulanması.
Fig.4 "Gradient" ve "inner glow" uygulandıktan sonraki görünüm.
Tekrar "Rounded Rectangle Tool" kullanarak, daha küçük ebatta, butonun üst kısmını hazırlayalım.
- 6. "Rounded Rectangle Tool"'u seçin.
- 7. Boyutlarını 180 X 100px, yarıçapı da (radius) 6px olarak ayarlayın. Fig.5
- 8. Rengini #0a9de3 olarak ayarlayın. Fig.5
- 9. Bu alana "Outer Glow" ve "Inner Glow" uygulayın (Layer panelinin altında "fx" menüsünün içinde"). Fig.6
Fig.5 Butonun üst kısmının hazırlanması
Fig.6 Üst kısmın "Outer Glow" ve "Inner Glow" özellikleri
Fig.6 Üst kısma "Pattern Overlay" uygulaması ve butonun son hali
- 11. "Custom Shape Tool"'dan herhangi bir şekil seçin (Biz örneğimizde "checkmark" şeklini kullandık). Fig.7
- 12. Şekli #63b0e6 rengi ile doldurun. Fig.7
- 13. Blend modunu (Layer panelinde "opacity" özelliğinin solunda yer alır) "Soft Light" olarak değiştirin. Fig.7
Fig.7 Üst kısma "Custom Shape Tool" kullanılarak şekil eklenmesi.
- 14. Şekle aşağıdaki özelliklerde "Gölge (Drop Shadow)" ekleyin. Fig.8
Fig.8 Üst kısımdaki şekle gölge eklenmesi (Drop Shadow).
Butonumuzun üst tarafına aydınlık kısım ekleyelim..
- 15. Layer panelinizde en üste yeni bir katman ekleyin.
- 16. Buton için oluşturduğumuz ilk katmana gelin "ctrl" tuşu basılı iken bu katmandaki maskı tıklayın, bu sayede şekil seçili hale gelecektir. Fig.9
Fig.9 Butonun ana şeklini seçili hale getirmek.
- 16. Tool menüsünden "Eliptical Marquee Tool"'u seçip kırmızı okla gösterilen butonu ("Subtract From Selection") tıklayın (Önceki yapılan seçimden yeni yapılan seçimi çıkarır).Fig.10
- 17. Fig.10' da gösterildiği gibi yeni bir seçim yapın
Fig.10 Ana seçimden yeni seçimin çıkarılması("Subtract From Selection").
- 18. Katman panelinde en üstte oluşturduğunuz katmana tıklayın ve seçili alanı "Beyaz" ile doldurun.Fig.11
- 19. "ctrl+d" yaparak seçim halini kaldırın, şekliniz Fig.11'deki gibi görünmelidir.
Fig.11 Aydınlık kısmın oluşturulması.
- 20. Bu katmana Fig.12'deki özelliklerde "Gradient Overlay" uygulayın.
Fig.12 Aydınlık kısma "Gradient Overlay" uygulanması.
- 21. Katmanın dolgu ("Fill") değerini "0" yapın (Kırmızı ok ile gösterilen kısım) Fig.13
- 22. Butonun altına yazınızı da ekleyip (renk:siyah, opacity:70%, distance:1, spread:0 size:1 olacak şekilde yazıya gölge ekleyebilirsiniz) butonunuzu tamamlayın.
Fig.13 Katmanın dolgu ("Fill") değerinin "0" olarak değiştirilmesi.
Web tasarımlarda görsellik arttıkça, site açılma hızında azalmalar olması kaçınılmazdır. Fakat unutmamak gerekir ki, web tasarımı başlı başına görsel bir sanattır, yani, iyi bir içeriğin yanında göze de hitap etmelidir.
Bu durumda, sade fakat gösterişli bir website tasarımı, hele ki günümüzdeki internet hızlarıyla, sitenizin kullanılabilirliğini ve kullanıcı mutluluğunu arttıracaktır.
Website tasarımlarınızı, yapılan işe göre avantaj ve dezavantajlarını iyi belirleyip, yapmanız gerekir.
Kolay gelsin...
