sluce kutusu

Photoshop Tips [Arayüz - interface - Yapýmý - 2] - aeyStudio.com
Sýçramak için
Arayüz (interface) Yapalým - 2
Photoshop
(Navigation Bar)
Araç Kutusu (Tool Box)
Araç Kutusu Ýkonlarý
Katmanlar (Layers)
Filitreler (Filters)
1.Bar
Efektler (Effects)
Photoshop Plug-ins
2.Bar
Örnekler
Arayüz Yapalým
Arayüz Yapalým - 2
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.
ikonuna týklayýp yeni bir Layer (Katman) yarattýk (Layer 1) ve bunun da adýný
Layer Penceresindeki
"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,
Photoshop Tips [Arayüz - interface - Yapýmý - 2] - aeyStudio.com
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...
Örnek Dökümalarýn PSD Dosyasý
Arayuz02.zip 165 Kb
Sýçramak için
ImageReady
Araç Kutusu (Tool Box)
Araç Kutusu Ýkonlarý
Pencereler
Animation
Rollover
Image Map
Slice
Optimize
Effects
Örnekler
Anime Banner Yapýmý
Arayüz Yapalým - 2
Arayüz (interface) Yapalým - 2
(Navigation Bar)
( Photoshop Bölümümüzdeki Arayüz (Interface) Yapalým - 2 konusunun tamamlayýcý bölümüdür. )
Photoshop Tips [Arayüz - interface - Yapýmý - 2] - aeyStudio.com
Photoshop da hazýrlayýp, Arayuz02.psd
olarak kayýt ederek, ImageReady'e
gönderdiðimiz dökümanýmýzýn Slice ile
ayýracaðýmýz parçalarýný tespit etmek
için "Guide" ile bölümlerini belirledik. [
"Guide", yan taraftaki resimde görünen
mavi çizgilerdir. Bu çizgileri bulup,
oluþturmak için imaj penceresinin üst
ve sað tarafýndan yada yandaki
resimde görünen cetvel (Rule) üzerine
týklayýp maus u basýlý tutarak
çekiyoruz. Böylece "Guide" nin -mavi- çizgilerini bulup imaj üzerinde istediðimiz gibi taþýyoruz. ]
Daha sonra da Tool Box dan Slice Tool
aracýný seçip, Guide
(Dilimleme)
ile ayýrdýðýmýz bölümler arasýnda
imajý dilimleyeceðimiz alanlarý seçtik.
Yan taraftaki resme dikkat ederseniz,
"Ana Sayfa" yazýsý üzerinde mavi
zeminli 03 yazýsýný görebilirsiniz.
Bunun anlamý, "Þu anda 03 nolu dilimdesiniz" demektir. Bu arada Slice Penceresine dikkat ederseniz, otomatik
olarak Name: Arayuz02_03 ismini verdiðini görebilirsiniz. URL: kýsmýna ise bu, "Ana Sayfa" yazýsý olan butona
basýlýnca gidilecek olan URL yi girmeniz gerekir. Diðer alanlarýn doldurulmasýný "Slice Bölümünde" görebilirsiniz.
Tool Box dan Slice Select Tool ile
diðer mavi zeminli alanlarý týklayarak dilimleri seçebilirsiniz. Bizde
örneðimizde diðer URL vereceðimiz bölümleri bu þekilde belirledik.
Dilimlenecek alanlarýmýzý Slice ile tespit ettikten sonra mause üzerine gelince oluþacak fonksiyonu belirlemek için
þimdi Rollover Penceresine (Sekmesine) týklayarak geçelim. Burada Normal Penceresi görünmektedir. Buradaki
Normal, browser da görünen imajýn ilk halidir. Alt tarafta bulunan
ikonuna (Create new rollover state)
týklayarak yeni bir rollover durumunu gösterecek olan ve default olarak Over adýyla yeni bir pencere açýldý.
ikona týklarsak
Burasý da browser da mause hareketine göre görünen imajýn 2. halidir. Over yazýsý yanýndaki
açýlan menüden Mause, Over:imaj üzerine gelinceki görüntüsünü, Down:imajýn üzerine týklayýncaki
görüntüsünü, Click:imaja týklayýnca sabit kalan görüntüsünü, Out:imaj üzerinden ayrýldýðý zamanki
görüntüsünü, Up:imaja týklayýp üzerinde bekleme görüntüsünü belirler. Bunlarý deneyerek daha iyi anlarsýnýz.
Konuyu daha iyi anlatmak için örneðimizde "Ana Sayfa" butonunda Down, diðer butonlarda ise Over kullandýk. Siz
istediðiniz tercihi kullanabilirsiniz.
Dökümanýmýza dönersek, öncelikle, 03 numaralý parçaya týklayarak "Ana Sayfa" yazýlý butonumuzu seçtik,
Down penceresine gelip, Layer Penceresindeki "Bar&Button01" isimli Layer Set içindeki, "Button1_2" isimli Layerin
. 04 nolu parçaya týklayýp,
yanýndaki boþ bölüme týklayarak göz ikonunu açýp görünür hale getirdik
"Galerim" yazan butonu seçtik bu defa Over Penceresine gelip, ayný þekilde layer penceresindeki "Button2_2"
layerini görünür hale getirdik. Ayný þekilde "Linkler" butonunda "Button3_2" ve "E-mail" butonunda da
"Button4_2" isimli layerleri görünür hale getirdik.
Animasyonlu örneði görmek için Týklayýnýz!
Böylece iþlemlerimizi bitirmiþ, Photoshop da hazýrlamýþ olduðumuz Navigasyon Barýmýza link verip marifetlerini
arttýrmýþ olduk.
ikonuna
Bütün yaptýmýz iþlemleri test etmek ve browser da görmek için Araç Çubuðundaki Browser
týklamanýz yeterli. Açýlan browser penceresinde dökümanýnýzý çok detaylý olarak bütün özelliklerini ve HTML
kodlarýný görebilirsiniz. Örneðimizin kayýt kodlarýný görmek için Týklayýnýz!
Gerekli kontrolleri yaptýktan sonra herþey istediðimiz gibiyse File>Save Optimized (baþka bir isim ile
kaydedeceksek File>Save Optimized As... ile) açýlan pencereden kaydetmek istediðimiz yeri seçerek hem HTML
sayfasý olarak ve hem de ayný klasör içine ImageReady nin otomatik olarak yaratacaðý images klasörünün
içindeki .*gif formatlý resimleri de olmak üzere kaydedebiliriz. Kayýt özelliklerini açýlan penceredeki Output
Settings den deðiþtirebiliriz. Ancak önerimiz bu ayarlarý pek deðiþtirmeyin. Býrakýn default kalsýnlar..
Þayet dökümanýmýzý ayrýca PSD Formatýnda kaydetmek istersek File>Save (baþka bir isim ile kaydedeceksek
File>Save As... ile) yine açýlan pencereden kaydedeceðimiz yeri seçerek PSD formatýnda kaydedebiliriz. Daha
sonraki deðiþiklikleri yapabilmeniz için bu PSD formatlý kaydý mutlaka yapmanýzý öneririz.
Burada hazýrladýðýmýz Arayüzün Photoshop da yapýlmasýný incelemek için Týklayýn »
Kolay gelsin...
Örnek Dökümalarýn PSD Dosyasý
Arayuz02.zip 165 Kb