Arayüz Yapımı-2

	Arayüz (interface) Yapalım - 2
	(Navigation Bar)
1.Bar 2.Bar 3.Bar Bu bölümde hem Photoshop da Arayüz (Interface) yapımının 2. bölümünü (Navigation Bar) inceleyeceğiz, hem de Photoshop da hazırladığımız bu arayüzü ImageReady'e gönderip (Jump to ImageReady Ctrl+Shift+M), ImageReady deki Slice Penceresi ile imajımızı parçalara ayırıp, Rollover penceresi ile de mause üzerine gelince butonların değişmesini düzenleyeceğiz. Öncelikle Photoshop da arayüzümüzü hazırlamayı görelim; File>New (Ctrl+N) ile yeni imaj penceremizi açtık. (Örnek imajımız, 500x150 Pixels, Beyaz zeminli (Contents:White) 72 pixels/inch Resolution) Layer penceresine gidip (ileride karıştırmamak için "Layer Set Kullanacağız)" alt tarafında bulunan ikonuna (Create a new set) tıklayarak Set 1 adındaki Layer Set'i yarattık. Adını da "Bar&Button01" olarak değiştirdik. Layer Penceresindeki ikonuna tıklayıp yeni bir Layer (Katman) yarattık (Layer 1) ve bunun da adını "Alt_Bar" olarak değiştirdik. Alt_Bar Layerine dikdörtgen bir şekil çizmek için bu defa Araç Kutusundan Rectangular Marquee Tool'u seçtik. İmaj Penceremizde soldan sağa doğru çekerek ve info penceresinden kontrol ederek W:467, H: 35 olan dikdörtgen çizmek için seçili alan yarattık. Dikdörtgenimizin kenarlarını biraz yuvarlatıp yumuşatmak için Select>Modify>Smooth 'u seçerek açılan Smooth Selection Penceresinde Sample Radius: değerini 12 olarak verdik. Palette üst rengi (Foreground) #DAAC79, alt rengi de (Background) #3D250D olarak belirledik. Araç Kutusundan Gradient Tool (G)'u seçtik (Üst taraftaki Araç Seçenekleri Çubuğunda 1. sırada bulunan Linear Gradient seçili olmalı) ve Shift tuşunu basılı tutarak (düzgün bir doğru çizmek için Shift tuşunu kullanıyoruz) imaj penceresindeki seçili alanın üst köşesinden alt köşesine doğru çektik. Tekrar yeni bir katman (Layer) yarattık, adını da "Ust_Bar" olarak değiştirdik. Select>Modify>Contract ile Contract değerini 5 vererek seçili alanı 5 pixels küçülttük ve yine Gradient Tool (G) ile bu defa seçili alanın alt köşesinden, üst köşesine doğru Shift tuşunu basılı tutarak çektik. Ctrl+D ile de seçili alanı iptal ettik (Deselect). "Alt_Bar" Layerine çift tıklayarak açılan Layer Style Penceresinden Drop Shadow u seçip, default ayarlarını değiştirmeden OK dedik. Yeni bir Layer (Katman) yarattık (Layer 3), adını da "Button1" olarak değiştirdik. Tekrar Rectangular Marquee Tool ile W:100, H:20 seçili alan yaratıp, Select>Modify>Smooth:5 ile seçili alanın kenarlarını yuvarladık. Gradient Tool (G) ile seçili alanın üst kenarından alt kenarına doğru (Shift) çektik. "Ust_Bar" Layerini tıklayıp işaretleyerek yeni bir Katman yarattık (Layer 4), adını da "Button1_golge" olarak değiştirdik (Bu yeni "Button1_golge" Layerinin gölge oluşturması için, "Button1" Layerindeki imajın altında olması gerekiyor). Select>Modify>Expand:1 ile seçili alanı 1 pixel genişleterek büyüttük. Edit>Fill, Use:Black ile ile siyah renge boyadık ve seçili alanı Ctrl+D ile iptal ettik (Deselect). siyah boyalı alana gölge hissi vermek için Filter>Blur>Gaussian Blur, Radius:2,3 pixels uyguladık. Klavyedeki sol ok'a 2 defa tıklayarak gölgeyi biraz sola taşıdık. Böylece ilk butonumuzu tamamladık. Aynı yolu izleyerek Button2, Button3, Button4'ü yaratabilirsiniz. Ancak daha bunun için daha kısa bir yoldan bahsedelim; "Button1" ile "Button1_golge" Layerlerinin bir tanesine tıklayarak yanlarında bulunan boş kutulardaki zincir ikonlarını aktif hale getirip, Layer penceresinin üst tarafındaki ikona tıklayarak açılan menüden Merge Linked'i seçerek bu layerleri tek bir Layer olarak birleştirebilirsiniz. Daha sonra da birleşmiş olan bu yeni Layer'e Ctrl tuşunu basılı tutarak sol tuş ile tıklayıp, Ctrl+C ile kopyalayıp, Ctrl+V ile yapıştırabilirsiniz. Ancak iki Layer in birleştirme işleminden önce bu yapıştırmayı yapmak (yani Layer Penceresinde ilk uygulamanın aynen kalmasını) isterseniz, Ctrl+C ile kopyaladıktan sonra, History Penceresine gidip, Merge Linked işleminini gösteren Layer in üzerindeki Layer i tıklayıp, birleştirme işleminden önceki konuma dönmelisiniz. Örneğimizdeki işlem için, History Penceresindeki Merge Linked Layer i üstündeki Nudge Layerini işaretleyin (Böylece birleştirmeden önceki pozisyona döndünüz). Biz örneğimizde bu kolay yolu izledik. Yapıştırdığımız bu Layerin adını "Button2" olarak değiştirdik. Klavyedeki oklar yardımıyla bar üzerindeki konumuna yerleştirdik Daha sonra Layer>Dublicate Layer ile "Button3" ve "Button4" ü yaratıp bunlarıda yine klavyedeki oklar yardımıyla bar üzerindeki konumlarına yerleştirdik. Böylece bar ve butonlarımızı yaratmış olduk. Şimdi butonların üzerindeki yazıları yazalım. "Bar&Button01" isimli Layer Set'e tıklayarak üstünde yeni bir Layer Set yarattık ve adını da "Text01" olarak değiştirdik. "Text01" Layer Set'i seçili iken Araç Çubuğundan Type Tool (T) yazı aracını seçtik, Font: Arial>Bold>14pt>Av:75>Color:#FFFFFF (beyaz) rengi kulLanarak "Ana Sayfa" yazısını imajımızdaki ilk butonun ("Button1" Layerindeki imaj) 'in üzerine gelecek şekilde yazdık. Opacity değerini 67% olarak değiştirdik. Aynı yol ile diğer yazılarıda yazabilirsiniz. Biz buradaki diğer yazıları (Galerim - Linkler - E-mail), Layer>Dublicate Layer ile düzenledik. Mause üzerine gelince değişecek imajı tespit etmek için küçük bir ilave yapacağız. Şöyleki; "Button1" isimli Layer e gelerek bu layer i Layer>Dublicate ile "Button1_2" adını verek çoğalttık. Edit>Transform>Rotate 180° ile döndürdük. Bu layer mause üzerine gelince "Button1" Layerindeki değişen imajı gösterecek. Aynı uygulamayı "Button2" için "Button2_2" gibi diğer button layerlerine de yaptık. Böylece her butonun mause üzerine gelince değişecek olan 2. halini oluşturduk. Nihayet örnek interface olan 1.Bar a ait imajımızı Photoshop da bitirdik. Örnekte görünen diğer arayüzler olan 2. Bar ve 3. Bar ın da Photoshop da yapılışlarını anlamak için örnek PSD dosyayı indirebilirsiniz. Şimdi bu imajın diğer fonksiyonlarını düzenlemek için ImageReady'e gönderelim (Jump to ImageReady Ctrl+Shift+M). Bunun için Araç Çubuğundaki "Jump to ImageReady" ikonuna tıklıyoruz. Tıklayın » Kolay gelsin...

Yazan: Yorum: f1rstmaster1 Üye Kayıt Tarihi: 07.01.2007 Yorumlar: 3 butonu üzerine gelince sarı yapmak en baş butonunu photoshopta aç ctrl+u yap rengini sarı olarak belirle dahasonra kaydet onu ayrı olarak yani bi tane mor bitane sarı butonun olsun ben Macromedia Dreamweaver 8 kullanmayı biliyorum front page i fazla bilmiyorum Macromedia Dreamweaver 8 aç butonunu koy daha sonra butonunu seç behaviorstan swap image i seç oradan sarı butonunu koy tamam de daha sonra yan tarafında onmause over ı seç bu mausela üzerine geldiğinde diğer resmi göster demek onclik felanda var yani üzerine 1 kere tıklandığında felan orada olaylarda var böylelikle on mause over la üzerine gelindiğinde butonun sarı olacaktır 07.01.2007 16:46 musti-4 Üye Kayıt Tarihi: 19.06.2006 Yorumlar: 1 (Navigation Bar) Help selam öncelile yaptiginiz bu calismadan dolayi tebrikler acaba bu linkleri parcalamadan nasil sizin gibi yapabilirim http://www.aeystudio.com/tips/photoshop/tips/images02/Arayuz02_2_04.gif bu navigatsyon barda özerine gidince sari oluyor ben onu nasil yapabilirim acaba tesekurler 11.10.2006 18:59

	Arama terimlerinizi girin Arama formu gönder
	Web www.aeystudio.com