Arayüz Yapımı-1

Sayfalar: Sayfa Atla Sayfa [ Arayüz Yapımı-1- 1] Sayfa [ Arayüz Yapımı-1- 2] Sayfa [ Arayüz Yapımı-1- 3]

Bu bölümümüzde hem web sitelerinin vaz geçilmez elemanları olan Arayüzler (interface) in yapılmasını öğrenip, yaptığımız arayüzün nasıl parçalara ayrılarak HTML kodları ile beraber kaydedildiğini hem de buna bağlı olarak butonların nasıl yapıldığını inceleyip öğreneceğiz. Daha iyi anlayabilmek için yan taraftaki örnek arayüzün yapımını anlatacağız. Öncelikle, File>New ile açılan New Penceresinde Name:Arayuz yazdık, Width:320 pixels, Height:260 pixels, Resolution:72 pixels/inch, Mode:RGB Color, Contents:White olan yeni bir döküman açtık. View>Show Rules ile cetveli açalım. Daha sonra Layer Penceresinden New Layer ile yeni bir Layer (Katman) yarattık (Layer 1). Araç Kutusu (Tool Box)dan Elliptical Marquee Tool(M)'u seçerek Shift tuşunu basılı tutup, info penceresinden de kontrol ederek W:90 H:90 olan, 90 pixel çapında bir daire çizmek için seçili alan yarattık. Palette üst renk (Foregroung Color)'e Tıklayıp açılan Color Picker Penceresinde alt taraftaki # kısmına 005294 renk kodunu yazarak dairemizin rengini belirledik. Siz başka bir renk seçebilirsiniz. Bu konuda Swatches Penceresinden hazır renkleri seçmek konusunda yardım alabilirsiniz. Daha sonra yine Araç Kutusundan Kova Aracı (Paint Bucket Tool-G) nı seçip seçili olan daire şeklimizin içine tıklayarak dairemizi boyadık. Ctrl+D ile de seçili alanı iptal ettik (Deselect). Layer Penceresine giderek ikonuna tıklayıp yeni bir Layer (Katman) yarattık (Layer 2). Bu yeni Layerimize dikdörtgen bir şekil çizmek için bu defa Araç Kutusundan Elliptical Marquee Tool'un üzerine tıklayıp mausumuzu bir süre üzerine tutarak açılan menüden Rectangular Marquee Tool'u seçtik. Dökümanımızdaki dairemizin üzerinden aşağıya doğru info penceresinden kontrok ederek W:90, H: 205 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 5 olarak verdik OK tuşuna bastık. Kova Aracı (Paint Bucket Tool-G) ile bu seçili alanın içine tıklayarak Layer 2 deki dikdörtgenimizi boyadık. Ctrl+D ile de seçili alanı iptal ettik (Deselect). Layer Penceresine giderek ikonuna tıklayıp yeni bir Layer (Katman) yarattık (Layer 3). Bu yeni Layerimize de dikdörtgen bir şekil çizmek için yine Rectangular Marquee Tool ile dairemizin üzerinden bu defa yatay olarak, soldan sağa doğru çekerek ve info penceresinden de kontrol ederek W:244, H: 72 olan dikdörtgen çizmek için seçili alan yarattık. Bu dikdörtgenimizin kenarlarını da yumuşatmak için Select>Modify>Smooth 'u seçerek açılan Smooth Selection Penceresinde Sample Radius:5 olan değerini değiştirmeden OK tuşuna bastık. Kova Aracı (Paint Bucket Tool-G) ile bu seçili alanın içine tıklayarak Layer 3 deki dikdörtgenimizi de boyadık. Ctrl+D ile de seçili alanı iptal ettik (Deselect). Layer penceresine dikkat ederseniz şu anda Layer 3 de bulunuyoruz. Layer 2 ve Layer 1 in yan taraflarındaki göz ikonlarının yanlarında bulunan boş kutulara tıklayarak zincir ikonlarını aktif hale getirdik. Böylece Layer ler bir link ile birbirlerine bağlandılar. Layer penceresinin üst tarafındaki ikona tıklayarak açılan menüden Merge Linked'i seçerek bu layerleri tek bir Layer olarak Layer 3 de birleştirdik. Layer 3 'e sağ tuş ile tıklayıp açılan menüden Layer Properties'i seçerek Layer Properties Penceresindeki Name: kısmına taban yazdık. Arayüzümüzün tabanının görünümünü tamamlamış olduk. Şimdi arayüzümüzün tabanına efekt vermek için layer penceresindeki taban layerine çift tıklayadık. Açılan Layer Style Penceresinde Bevel and Emboss'un üzerine tıkladık, yanındaki kutucuk kendiliğinden işaretlendi. Burada default ayarlarına hiç dokunmadan OK dedik. Sizler değişik etkiler elde edebilmek için buradaki ayarları ile istediğiniz gibi değiştirebilirsiniz. Hatta birazda zeminde gölge yaratmak için Drop Shadow'un üzerine de tıkladık, buradaki default ayarlarına da hiç dokunmadan OK dedik. Artık arayüzümüzün tabanı oluştu diyebiliriz. Şimdi link vereceğimiz butonlarımızı yapalım. İleride herhangi bir karışıklığa yer vermemek için butonlarımızı Layer Set içinde oluşturacağız. Yeni bir Layer Set oluşturmak için Layer Penceresinin alt tarafında bulunan ikonuna (Create a new set) tıklayarak Set 1 adındaki Layer Set'i yarattık. Set 1'e sağ tuş ile tıklayıp açılan menüden Layer Set Properties'i seçtik ve Layer Set Properties Penceresinde Name: kısmına buton yazdık, Color: kısmındaki açılır menüden Red'i seçip OK diyerek, buton isimli Layer Set'imizi kırmızı olarak renklendirdik. Buton isimli Layer Set'e yeni bir Layer eklemek için Layer Penceresindeki ikonuna tıkladık (Layer 1). İlk butonumuzun zeminini yaratmak için yine Rectangular Marquee Tool aracını kullanacağız. Dökümanımızdaki tabanımızın üzerinde herhangi bir yerine Rectangular ile bir dikdörtgen çizmek için seçili alan yarattık. Select>Modify>Smooth ile Smooth değerini 3 vererek kenarlarını yuvarladık. Araç Kutusundan ikonuna tıklayarak paletteki default renkleri elde ettik. Kova Aracı (Paint Bucket Tool-G)nın üzerine tıklayıp, bir süre bekledikten sonra açılan menüden Gradient Tool'u seçtik. Araç Seçenekleri Çubuğunda 1. sırada bulunan Linear Gradient'i seçerek Araç Seçenekleri Çubuğundaki default ayarları değiştirmeden ve düzgün bir doğru yaratmak için Shift tuşunu basılı tutarak seçili alanımızın alt kenarından üst kenarına (yukarıya) doğru hareket ederek (çizgi çekerek) Layer 1'i renklendirdik. Yeni bir Layer yarattık (Layer 2). Select>Modify>Contract ile Contract değerini 2 pixels vererek, seçili alanı 2 pixel küçülttük. Paletteki üst renk olarak (Foreground) Color Picer'deki # kısmına F69679 renk kodunu, alt renk olarak (Background) da FF0000 renk kodunu yazdık. Yine Gradient Tool ile ve Shift tuşunu basılı tutarak, seçili alanın bu defa üst kenarından alt kenarına doğru çizgi çekerek Layer 2'yi renklendirdik.

Yazan: Yorum: dewilarda Üye Kayıt Tarihi: 03.04.2007 Yorumlar: 1 tsk sagol bu site super 1 site çok önceden kaydoldum ama gırmıodum neyse butun sıteye tesekkurler emege saygı 02.06.2007 14:33 casus Üye Kayıt Tarihi: 14.03.2007 Yorumlar: 1 tesekkürler mutlaka ise yarar sağol.. 14.03.2007 13:28 **angel** Ziyaretçi tsk emeğinize yüreğinize sağlık teşekkürler.. 20.11.2006 15:35

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