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
PSP - 3D Bar Yapımı
Flash Actions Script Örnekleri
Flash Movie'e, Başka Bir Movie Ekleme
Flash ile Açılır Menü ve Web Butonları Yapımı
ImageReady ile Animasyonlu Banner
Yazı Aracı
PSP - Paslı Zemin Yapımı
Flash Araç Kutusu (Toolbox)
Flash Web'de Yayınlama - Publish
FreeHand Genel Bilgi

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ı-1

Arayüz Yapımı-1
RSS Feed: Arayüz Yapımı-1 (Dersler)
Eklenme Tarihi: 26.11.2005 - 13:59   (İzlenme: 71837)
Yorumları Oku (3)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır /

Sayfalar:

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.





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 Offline dewilarda dewilarda at gmail.com
casus
Üye

Kayıt Tarihi: 14.03.2007
Yorumlar: 1
tesekkürler

mutlaka ise yarar sağol..
14.03.2007 13:28 Offline casus tr_34ekrem37 at hotmail.com
**angel**
Ziyaretçi
tsk

emeğinize yüreğinize sağlık teşekkürler..
20.11.2006 15:35  

RSS Feed: Arayüz Yapımı-1 (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