aeyStudio
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Püf Noktaları
ImageReady - Effects Penceresi
Flash da Buton Yapımı
Filitreler
Flash da Sayfa Yükleme - Preloading
Micro Buton Yapımı
Illustrator Araç Kutusu (Tool Box)
Illustrator Plug-ins (Geliştiriciler)
PSP - Zincir Yapımı
Efektler

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.697
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / Photoshop / Photoshop Örnekleri / Arayüz Yapımı-2

Arayüz Yapımı-2
RSS Feed: Arayüz Yapımı-2 (Dersler)
Eklenme Tarihi: 26.11.2005 - 14:09   (İzlenme: 63768)
Yorumları Oku (2)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır /


Arayüz (interface) Yapalım - 2

(Navigation Bar)

1.Bar Tıklayınız
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 » Jump to ImageReady
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 Offline f1rstmaster1 benim-adim at hotmail.com
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 Offline musti-4 mus-ti at freenet.de

RSS Feed: Arayüz Yapımı-2 (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar