728x90 AdSpace

  • Latest News

    3/25/2013

    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.
    http://resim.sanalkurs.net/uploads/ust_grad.jpg


    6. Şimdi bu üst kısma sağ ve soluna görseller ekleyelim ilk resim logo için şuan yaptığım tasarım firefox tanırım sayfası bu yüzden firefox görsellerini kullanacağım.

    http://resim.sanalkurs.net/uploads/st_resim.jpg

    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!



    11. Menü elemanlarını yazalım MASAÜSTÜ bağlantısını Hover özelliği için farklı yaptım.



    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.

    http://resim.sanalkurs.net/uploads/orta_ust.jpg

    14. Hemen alt kısma da bir kaçtane yazı ekliyoruz.

    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...

    http://resim.sanalkurs.net/uploads/son_18.jpg

    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...

    http://resim.sanalkurs.net/uploads/grup.jpg

    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 :) 
    kynk:sanalkurs.net
    • Blogger Yorumları
    • Facebook Yorumları

    0 yorum:

    Yorum Gönder

    Item Reviewed: Photoshop ile Website Arayüz Tasarımı Yapma Rating: 5 Reviewed By: Mehmet Ali
    Scroll to Top