3D Bar Button
Çalışmamızda flash buton hazırlayacağız butonumuzu 3D bar şeklinde tasarlayacağız.Örnek çalışmamızı isterseniz web sitenizde menü olarak kullanabilirsiniz.
1-İlk olarak yeni bir çalışma sayfası açalım örnek çalışmamızı yapmak için ben 450×250 px sayfa oluşturdum. Frame date 30 olarak ayarlayalım.
2-Rectangle Tool aracı ile dikdörtgen oluşturalım dış çizgisi olmasın renk olarak #0099FF uygulayalım 400×30 px yapalım.
3-Color Mixer panel açalım Window > Color Mixer. Type penceresinden Linear seçelim.
4-Color Mixer panel renklerimiz siyah ve beyaz görülecek ilk olarak siyah kısımdaki renk seçimini değişelim. #E33B0C beyaz kısımdaki renk seçimini değişelim #A30000 uygulamadaki diğer renklerin kodlarını resim üzerine ekleyeyim daha kolaylık olsun.
5-Paint Bucket tool Kova aracını seçelim shift tuşun a basıl olarak sahnedeki dikdörtgenin üst tarafından alt kısmına kadar çekelim.
6-Sahnedeki dikdörtgeni seçili yapalım (Selection tool V ) F8 Modify > Convert to Symbol button kutusunu işaretleyelim name kısmına isim verelim.
7-Buton içine girelim hit alanına key ekleyelim F5 layer 1 adını gradient_bg olarak isimlendirip kilitleyelim.
8-Yeni layer ekleyelim layer adı etiket_1 olsun Up framede yazımızı yazıyoruz Photoshop yazı seçili F8 movie clip yapalım name text1_mc olsun.
9-Klip içine girelim layer1 adını text olarak değişelim yeni layer ekleyelim layer adı mask olsun yazımızı kapatacak kadar bir dikdörtgen oluşturalım dış çizgisi olmasın mask layer üzerine gelip sağ klik mask seçeneğini aktif edelim.
10-Text layerimize gelelim mask layer görünmez yaparsak daha kolay olur göz simgesini kapatalım properties panelden Filters seçeneğini seçip Drop Shadow uygulayalım.
11-Orange_buton geri dönelim etiket1 layerde Down seçeneğine keyframe ekleyelim Over kısmında key oluyor Hit alanı boş kalıyor.
12-Yeni layer ekleyelim layer adını etiket_2 yazalım up konumunda text tool yazı aracını seçelim Static Text Yazımızı yazmadan renk ayarını ve font size ayarını yapalım yazımızı yazalım. Down ve Over framelere keyframe ekleyelim.
13- Yazı seçli F8 movie clip yapalım name olarak text2_mc yazalım.Yeni layer ekleyip layer adını mask yazalım Rectangle Tool aracı ile yazıyı kapatacak bir dikdörtgen çizelim mask layer üzerinde sağ klik mask seçeneğini aktif edelim.
14-Orange_buton layer geri gelelim bildiğiniz gibi Mouse ile photoshop menü üzerinde gelince içerik tanıtımı olan Galeri yazımıza animasyon ekleyeceğiz. Key frame eklemiştik yazımız seçelim F8 movie clip yapalım name text2_animasyon olsun. Yazımız seçili tekrar F8 movie klip yapalım name text2_duble_mc olsun. Klip içinde yazımızı kopya yapalım Ctrl+C paste yapalım Ctrl+Shift+V . Tam olarak kopyaladığımız yazı üzerinde yapışmış göreceğiz şimdi up tuşu ile yukarı doğru kaydıralım Barın tam kenarına ayarlayalım.
15-Text2_animasyon klip içine girelim layer1 adını text animasyon yapalım. 35 frameye keyframe ekleyelim 35 framede yazımızı alt tarafa kaydıralım üst yazımız barın ortasına gelsin 1 frameye gelelim create motion tween verelim yeni layer ekleyelim layer adı mask olsun yazıyı kapatacak şekilde dikdörtgen oluşturalım mask layer üzerinde sağ klik mask yapalım.
16-Buton layerimize gelelim şimdi etiket_2 layerin over kısmında animasyonumuz oldu Down kısmında animasyon olmayacak bu yüzden Up kısmını kopya yapıp Down kısmına yapıştıralım Hit alanı silelim boş kalsın.
Çalışmamızı sonlandırdık şimdi test edebiliriz bu örneğe benzer butonlar yaparak web siteniz için menü hazırlayabilirsiniz. Aynı çalışmayı mavi bar olarak uyguladım örnek çalışmada görebilirsiniz.
Merhaba.. Photoders sitesi photoshop ve flash derslerin türkçe paylaşımak amaclı kurulmuş web sitesidir. Sitede mevcut dersler tamamen ücretsizdir. Ziyaretciler üye olmadan siteyi gezebilir yararlanabilirler, destek alabilmek sorunlarını iletebilmek için tek yapmaları gereken kısa bir zaman ayırarak ücretsiz üye olmalarıdır.Site içinde eklenmiş derslere yorum ekleyerek verilen emeklere saygı göstermek olduğu unutulmamalıdır.
Güzel anlatım teşekkürler
Yorum Yazın