ARA YÜZ TASARIMI
Ö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.
Ş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.
Ş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 6.0 'ı açarak sabırla adım adım sıra ile yapmanızda
fayda var.
Aksi halde size çok sıkıcı gelebilir. 
