Photoshop ile Website Arayüz Tasarımı Yapmak

Photoshop ile basit bir arayüz tasarımı hazırlıyoruz.

Photoshop ile basit bir arayüz tasarımı hazırlıyoruz.

1. Photoshop ile yeni bir çalışma açıyoruz. 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:

3. Yeni bir katman oluşturalım. Adına üst diyebiliriz. CTRL-N (Layers paneli görünmüyor ise Window menüsünden açabilirsiniz.)



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



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



7. şimdi yeni bir katman yaratın. adı menü olabilir...

8. Yine 4. adımda ki gibi Rectangular Marquee Tool (M) aracını alıyoruz: G: 100% Yükseklik 30px olsun.

9. Yine 5. adımda olduğu gibi Gradient Tool u seçip renk değerlerine #2f2f2f ve #fff değerlerini giroyuz. Seçim yapılmış bölgeye üstten aşağı doğru çekiyoruz. Griden beyaza doğru inen bir alan yaratmış olduk.

10. Ş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 vs... diğer kısımlar ise belirli bir kaç tane haber vs.. olacak...

13. Resimi konumlandırdıktan sonra Edit>Stroke menüsüne gelerek 10-15px lik bir çerçeve ekliyoruz. Sağ taraftaki alanları da 4. Adımda ki (M) aracı ile oluşturup resim de gördüğnüz renk kodları ile dolduruyoruz.



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

15. Alt bölge için yine 4. adımda ki gibi bir seçim alanı oluşturuyoruz ve koyu bir mavi ton ile dolduruyoruz...



16. Photoshop layer ayarını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...



Şimdilik bu kadar! 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 :)

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

cok aciklayici tesekurler
kişisel bi web arayüzü yaptım . css nasıl yapılcak bekliyorum :) teşekkür
emeğine sağlık güzel olmuş..
güzel ve açıklayıcı olmuş emeğine sağlık

Yukarı Git