Home > Website > Photoshop ile Website Arayüz Tasarımı Yapma
Arayüz Layout Nasıl Yapılır Photoshop Tasarım Web Tasarım Website
Photoshop ile Website Arayüz Tasarımı Yapma
Daha önce'den HTML5 ve CSS3 ile kodlama kısmını verdiğimiz makalenin bir önceki aşaması bir kaç aksilik nedeni ile geç geldi... Ben makaleyi daha öncesin de sanalkurs.net üzerin de yayınladım... Şimdi burada da bir kaç ufak değişiklik ile yayınlıyorum...
1. Photoshop ile yeni bir çalışma açıyoruz. (CTRL-N) Genişlik: 1024px Yükseklik: 1200px olsun. Arka Plan Beyaz kalsın...
2. Öncelikle sitenin üst kısmını logo ve menüleri yapalım: Yeni bir katman oluşturalım. Adına üst diyebiliriz. (CTRL+SHFT+N) (Layers paneli görünmüyor ise Window menüsünden açabilirsiniz.)
3. Daha Sonra Araç panelinden Rectangular Marquee Tool (M) aracını alıyoruz. üst seçenekler kısmından Style: bölümünü Fixed Size seçiyoruz ve genişlik 100% Yükseklik 230px giriyoruz. Ve bir seçim alanı oluşturuyoruz.
4. Araç panelinden Gradient Tool u seçip yukarı da ki seçenekler kısmından renk kısmına #7EBCD3 diğer kısma #FFFFFF ekliyoruz. Bu şekilde resimde gösterildiği gibi bir köeden diğer köşeye doğru maviden beyaza giden bir alan oluşturuyoruz.
6. şimdi yeni bir katman yaratın. adı menü olabilir...
7. Yine 3. adımda ki gibi Rectangular Marquee Tool (M) aracını alıyoruz: G: 100% Yükseklik 30px olsun.
8. Yine 4. adımda olduğu gibi Gradient Tool u seçip renk değerlerine #2f2f2f ve #fff değerlerini giriyoruz. Seçim yapılmış bölgeye üstten aşağı doğru çekiyoruz. Griden beyaza doğru inen bir alan yaratmış olduk.
9. Şimdi menümüz altında ufak bir çizgi atalım bunun için. layer panelinde ki menü alanına çift tıklayarak yada Üst menülerden Layer>Layer Style>Bevel & Emboss kısmına tıklarak Layer Biçimlendirmesine ulaşabiliriz. Resimde ki gibi değerleri giriyoruz. Style kısmının outer Bevel olmasına dikkat edin!
12. İçerik alanını hazırlıyoruz: Orta içeriğin üst bölümünü ben 2 parçaya bölüyorum bir kısım büyük bir resim yada slayt gösterisi olacak... diğer kısımlar ise belirli bir kaç tane haber vs..
13. Resimi konumlandırdıktan sonra Edit>Stroke menüsüne gelerek 10-15px lik bir çerçeve ekliyoruz. Sağ taraftaki alanları da 3. Adımda ki (M) aracı ile oluşturup resim de gördüğnüz renk kodları ile dolduruyoruz.
15. Alt bölge için yine 3. adımda ki gibi bir seçim alanı oluşturuyoruz ve koyu bir mavi ton ile dolduruyoruz...
16. Layer bölümün de çalışmamızın daha düzgün olması için alanları belirli konumlarına göre gruplandırabiliriz... Ben şu şekilde grupladım daha sonra ulaşması daha kolay olur...
Basit bir arayüz tasarımı Şimdilik bu kadar! Bir sonra ki derste bu arayüzün nasıl html/css şekline dönüştürebiliriz onu incelicez... Takıldığınız yer / tavsiye ve iyileştirmeleriniz için yorumlarınızı bekliyoruz :)
Item Reviewed: Photoshop ile Website Arayüz Tasarımı Yapma Rating: 5 Reviewed By: Mehmet Ali
Firebug ile website hızlıca nasıl düzenlenir?
Tembel insanlar için CSS border radius generator
En iyi 10 renk aracı