Ders Adı: Arayüz Yapımı-1
Kategorisi: Photoshop Örnekleri
Ekleyen: zebaniz - Tarih: 26.11.2005 - 13:59

Arayüz Yapımı-1
Web Siteme Hoşgeldiniz
Ziyaretçi Defteri İletişim
Ana Sayfam
Hakkımda
Galerim
Önemli Linkler
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.
Web Siteme Hoşgeldiniz
Ziyaretçi Defteri İletişim
Ana Sayfam
Hakkımda
Galerim
Önemli Linkler
Şimdi butonumuzun altına biraz gölge verelim.
Gölgenin Layer 1'in altında olması gerekiyor. Bunun için gölgenin bulunacağı Layeri yaratıp, Layer 1'in altına taşımalıyız (Layer Order). Önce Layer 1'e tıkdık, sonrada Layer 1'i seçili hale getirmek için Ctrl tuşuna basılı tutarak tekrar tıkladık. Yeni bir layer yarattık (Layer 3). Layer 3'ü sol tuş ile tutarak Layer 1'in altına sürükleyerek taşıdık (Layer Order). Select>Modify>Expand ile Expand değerini 2 vererek OK dedik ve seçili alanı 2 pixel genişlettik. Şimdi bu alanı boyayacağız, Edit>Fill ile açılan Fill Penceresinden Use: kısmındaki açılır menüden Black'ı seçtik, OK dedik. Ctrl+D ile de seçimi iptal ettik (Deselect). Filter>Blur>Gaussian Blur Penceresinde Radius değerini 1,6 olarak verip OK dedik ve gölgemizi tamamladık.
Şimdi Butonumuzun üzerine yazımızı yazacağız.
Hemen bir hatırlatma yapalım, tıklayarak seçili hale gelen (mavi renk alan) layerin sol tarafındaki kutucukta "Fırça İkonu" görünmektedir. Bunun anlamı, "Çalışma bu Layerde yapılmaktadır" demektir. Yani yapacağınız her işlem "Fırça İkonu" olan Layer'e etki edecektir.
Öncelikle yazımızın Layer 2'nin üzerinde olması için Layer 2'yi tıkladık.
Yazımızın rengini seçmeliyiz. Biz örneğimizde Beyaz rengi seçmek için Swatches Penceresinden beyaz (White) rengi seçtik. Sonrada Araç Kutusundan Yazı Aracı (Type Tool-T)'nı seçtik. Araç Seçenekleri Çubuğundan yazı font'u olarak Arial'i seçtik ve Ana Sayfa olarak yazdık.
Dikkat ederseniz Ana Sayfa yazısının bulunduğu Layer, Layer Penceresindeki Layer 2'nin üzerinde kendiliğinden oluştu. Yazımız çok sade oldu. Biraz gölgelendirelim. Layer Penceresindeki Ana Sayfa yazılı Layer'e sağ tuş ile Dublicate Layer'i seçerek Ana Sayfa copy layerini oluşturduk. Ana Sayfa Layer'ini T ikonu üzerine çift tıklayarak açılan Araç Seçenekleri Çubuğundan Palettes'i tıklayarak Yazı Paleti Aracını açtık. Burada Color: bölümüne tıklayarak Color Picker deki
# bölümüne 000000 renk kodunu vererek siyah rengi seçtik ve OK dedik.
Aynı Layerde iken tekrar Araç Çubuğundan Move Tool aracını seçerek klavyemizdeki oklar yardımıyla 1 pixel sağ için sağ ok'a bir defa, 1 pixel aşağı içinaşağı ok'a bir defa bastık. Böylece yazımızın altında bulunan siyah renkli Ana sayfa Layerini 1'er pixel sağa ve aşağıya kaydırarak yazımıza gölge vermiş olduk. Şimdi butonumuza biraz daha derinlik kazandıralım.
Ana Sayfa copy Layer'ına tıkladık ve yeni bir layer yarattık (Layer 4). Araç Kutusundan Fırça (Paintbrush Tool-B) araçını seçtik. Yukarıdaki Araç Seçenekleri Çubuğundan Brush: değerini 5 olarak seçtik. Shift tuşunu basılı tutarak, kırmızımsı olan butonumuzun üst kenarına yatay olarak soldan sağa doğru çizerek fırça etkisi verdik. Filter>Blur>Gaussion Blur daki Radius değerini 1,8 olarak verip OK dedik. Layer 4 ün Opacity değerini değiştirmek için Layer Penceresindeki Opacity değerini 85% olarak verdik . Dikkat ederseniz butonumuz 3 boyutlu bir hal aldı.
Butonumuzu biraz daha netleştirmek için kenarlarını belirleyelim.
Paletteki üst rengi (Foreground Color), Swatches dan siyah olarak seçtik. Layer 2 isimli Layer'i tıkladık (hemen yanındaki fırça ikonu göründü). Edit>Stroke ile Stroke Penceresini açtık. Width: kısmına 2 değerini verip OK dedik. Böylece ilk butonumuz olan ve "buton Layer Set"i içindeki butonumuzu tamamladık.
"buton Layer Set"indeki Layerlerin görünmesini engellemek için yanındaki ikonuna tıklayarak açık olan "buton Layer Set"ini kapatabiliriz.
Aynı şekilde ikinci butonu yaratmak için ""buton Layer Set"e sağ tuş ile Dublicate Layer Set ile açılan pencerede As: bölümüne buton 2 yazarak ile kopyasını çıkardık.
Araç Kutusundaki Move Tool aracı seçili iken klavyedeki oklar yardımıyla ikinci butonumuzu
dökümanımızda istediğimiz yere taşıyabiliriz.
"buton 2" isimli Layer Setteki butonun yazısını değiştirmek için "Ana Sayfa" ve "Ana Sayfa copy"
Layerlerinin üzerine çift tıklayarak istediğinizi yazabilirsiniz. Biz örneğimizde "Kimim" olarak değiştirdik.
Buton sayısını çoğaltmak için bu işlemi tekrarlamanız yeterlidir.
Layer Set lerin renklerini değiştirmek için Layer Set Properties den renk seçebilirsiniz.
Web Siteme Hoşgeldiniz
Ziyaretçi Defteri İletişim
Ana Sayfam
Hakkımda
Galerim
Önemli Linkler
Şimdi Logomuzu yapalım.
Örneğimizde alt alta 4 tane buton olduğundan 4 tane de (buton, buton 2, buton 3, buton 4) buton Layer Set imiz var. "buton 4" Layer Set'i tıkladık. Layer Penceresinin alt tarafındaki ikonuna tıklayarak Logo adında yeni bir Layer Set yarattık.
Bu Layer set'in içine de yeni bir Layer yarattık (Layer 17).
Elliptical Marquee Tool ile dökümanımızdaki arayüzün zemininin sol köşesine, 75 pixel çapında bir daire çizmek için seçili alan yarattık. Araç Kutusundaki Palette ikonu ile default palet renklerini seçtik.
Gradient Tool ile ve bu defa Araç Seçenekleri Çubuğunda 2. sırada bulunan Radial Gradient'i seçerek shift tuşunu basılı tutarak sağ üst köşeden sol alt köşeye doğru 45 derecelik bir açı ile çizgi çektik. Select>Modify>Contract ile Contract: 4 vererek yeni bir seçili alan yarattık.
Tekrar yeni bir Layer yarattık (Layer 18). Palette üst renk olarak, A3D39C ve alt renk olarak, 005E20 renk kodlarını verdik. Gradient Tool ile yukarıda anlattığımız aynı uygulamayı tekrarladık.
Edit>Stroke ile Width: 1 değerini vererek Stroke uyguladık. Layer 17 'ye de gölge uygulamak için;
Önce Layer 17'ye tıkladık, sonrada Layer 17'yi seçili hale getirmek için Ctrl tuşuna basılı tutarak tekrar tıkladık. Yeni bir layer yarattık (Layer 19). Layer 19'u sol tuş ile tutarak Layer 17'nin altına sürükleyerek taşıdık (Layer Order). Select>Modify>Expand ile Expand değerini 3 vererek OK dedik ve seçili alanı 3 pixel genişlettik. Şimdi bu alanı boyayacağız, Edit>Fill ile açılan Fill Penceresinden Use: kısmındaki açılır menüden Black'ı seçtik, OK dedik. Ctrl+D ile de seçimi iptal ettik (Deselect). Filter>Blur>Gaussian Blur Penceresinde Radius değerini 2,2 olarak verip OK dedik ve gölgemizi tamamladık.
Şimdi Logo butonumuzun üzerine Logo yazımızı yazacağız.
Hatırlayacağınız gibi yazımızın Layer 18'nin üzerinde olması için Layer 18'yi tıkladık. Yazımızın rengini seçmeliyiz. Swatches Penceresinden yine beyaz (White) rengi seçtik. Sonrada Araç Kutusundan Yazı Aracı (Type Tool-T)'nı seçtik. Araç Seçenekleri Çubuğundan yazı font'u olarak Arial MT'i seçtik ve Logo olarak yazdık.
Dikkat ederseniz Logo yazısının bulunduğu Layer, Layer Penceresindeki Layer 19'un üzerinde kendiliğinden oluştu. Logo Layer'inin üzerine çift tıkladık. Araç seçenekleri Çubuğundaki ikonuna tıklayarak Wrap Text pencersini açtık ve buradan da Bulge'yi seçip OK dedik. Gölge vermek için ise Logo yazılı Layer'e sağ tuş ile Dublicate Layer'i seçerek Logo copy layerini oluşturduk.
Yazı Paleti Aracında Color: bölümüne tıklayarak Color Picker deki # bölümüne 000000 renk kodunu vererek siyah rengi seçtik ve OK dedik. Aynı Layerde iken tekrar Araç Çubuğundan Move Tool aracını seçerek klavyemizdeki oklar yardımıyla 1 pixel sağa ve 1 pixel aşağı kaydırarak yazımıza gölge vermiş olduk. Logo copy Layer'ına tıkladık ve yeni bir layer yarattık (Layer 20).
Araç Kutusundan Fırça (Paintbrush Tool-B) araçını seçtik. Yukarıdaki Araç Seçenekleri Çubuğundan
Brush: değerini 13 (Soft Round 13 pixels) olarak seçtik. Logo butonumuzun sağ üst köşesine tıkladık. Böylece Logo butonumuzu da tamamladık.
Sizler hazırladığınız arayüz (interface) üzerine değişik desenler ve yazılar ekliyebilirsiniz.
Biz de bir kaç ekleme yaparak örnek arayüzümüzü tamamlamış olduk.
Sıra geldi hazırladığımız arayüzü parçalara ayırıp butonlara linkler verip web sayfamıza yerleştirmeye...
Şimdi bu işlemi çok kolay bir şekilde yapacağız.
Araç Kutusundan Dilimleme Aracı (Slice Tool-K)nı seçtik. Daha sonra link vermek istediğimiz butonların, yazıların, şekillerin üzerine gelip istediğimiz gibi sürükleyerek seçli alanlar olan Slice bölümlerini oluşturduk.
Bu bölümleri oluşturduktan sonra yine Araç Kutusundan bu defa Slice Select Tool (Dilimleme Seçim Aracı) ile daha önceden seçtiğimiz alanların üzerine çift tıklayarak açılan Slice Options Penceresinden URL: kısmına link vereceğimiz adresi, Target: kısmına Sayfanın açılma şeklini, Alt Tag: kısmına da mouse üzerine gelince browser penceresi alt tarafında oluşacak mesajımızı yazıyoruz. Slice ile işaretlediğimiz bütün parçalara bu işlemi tek tek uyguladıktan sonra File>Save for Web ile açılan pencereden OK diyerek, nereye kaydetmek istiyorsak seçerek hem HTML olarak hemde Photoshop'un kayıt sırasında kendisinin otomatik oluşturacağı "images" klasörü içine Slice Aracı ile dilimlediğimiz dökümanın parçalarını .*gif formatında kaydedebiliriz.
Daha sonra kaydedilen HTML sayfasının kodlarını alıp, web sitenizin HTML kodları arasına yerleştirebilirsiniz.
Son olarak da dökümanımızı PSD formatında kaydetmeyi unutmayalım ki daha sonra üzerinde istediğimiz değişikliği rahatça yapabilelim (File>Save).
Slice seçimlerini döküman üzerinde görmemek isterseniz View>Show Extras'ın yanındaki işareti kaldırın (Ctrl+H).

İlk Arayüz(interface)müzü yarattık.
Bütün bu anlatılanları daha iyi anlamak için bu uygulamaları Photoshop 'u açarak sabırla adım adım sıra ile yapmanızda fayda var.
Aksi halde size çok sıkıcı gelebilir.

Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=107
Web Sitesi: http://www.aeyStudio.com