Photoshop ile Kişisel Blog Tasarımı Yapalım

Bu ders de Photoshop kullanarak basit bir kişisel blog tasarımı yapacağız. Ama “basit” diyerek geçmek istemiyorum çünkü güzellik ayrıntılarda gizli ve bu derste web tasarımda sık sık kullanılan ufak ayrıntılardan birkaçını nasıl yapabileceğimizi de öğreneceğiz. Koyu bir tasarım çizmek istedim bu tasarımda göstereceklerimi nerede nasıl kullanacağınız tamamen sizin yaratıcılığınıza kalmış.

Ne yapacağız?

Arkaplanı İle Başlayalım

Photoshop da yeni bir 1280×1420 boyutunda yeni bir dosya oluşturuyoruz. Background katmanına sağ tıklıyor ve “Layer From Background”‘ı seçiyoruz. Sonra Menü Çubuğundan Edit»Fill‘e tıklıyoruz ve resimdekileri yapıyoruz:

Sonra yeni bir katman oluşturuyoruz(ctrl+sift+n) ve Edit»Fill’e tıklayıp kutundan white’ı seçiyor ve ok diyoruz. Sonra filter»Noise»Add Noise’a tıklıyoruz ve resimdeki gibi yapıyoruz:

Son işlem yaptığımız katmana tıklayıp menü çubuğundan Image»Adjustments»Hue/Saturation(ctrl+u) yolunu izliyoruz ve resimdeki gibi yapıyoruz:

Bunları yaptıktan sonra Image»Adjustments»Invert(ctrl+i) yolunu izliyoruz. Ve katmanın karışım modunu Linear Dodge (Add), Opacity değerini ise %11 olarak ayarlıyoruz:

Arkaplanımız hazır…

Header(Başlık) Kısımı

Başlığa basit bir logo ve menü ekledim. (Not: Aralarındaki boşluk resimde gözükdüğünden fazla. Tasarımın genel genişliği 980px dir.)

Kategorileri listelediğimiz bir menü için kutu çiziyoruz. Sağına ve solunada yarısı gözüken kutular koyuyor ve tasarımın sıkıcılığını biraz olsun gideriyoruz.

Sonra yeni 1×5 boyutunda bir dosya açıyoruz. Yeni bir katman oluşturuyoruz(CTRL+N) background katmanını siliyoruz ve aşağıdaki gibi yapıp Edit»Define Pattern yolunu izleyerek kaplama olarak kaydediyoruz. (Bunu menü ayraçı olarak kullanacağız.)

Sonra blog tasarımına geri dönüyor menüye öğeler ekliyoruz.  Bu öğelerin yanında Select Tool kullanarak 1px genişliğinde bir çizgi seçiyoruz ve bu alanın fill değerini katmanlar panelinden %0 olarak ayarlıyoruz. Sonra yeni bir katman daha oluşturup CTRL tuşu ile iki katmanı seçiyor ve sağ tıklayıp Merge Layers’ı seçiyoruz. Sonra oluşan yeni katmana sağ tıklayıp Duplicate Layer‘ı seçiyoruz ve 1px sağa kaydırıyoruz.

1. Katmana çift tıklayıp özellikler menüsünden Resimdeki gibi yapıyoruz:

2. katmanıda aynı şekilde #31363d kaplıyoruz ve menü öğelerini çoğaltıyoruz.

Sonra menünün en sağına bir arama alanı ekliyoruz:

Kırmızı kutu içindeki mercek ikonunu Photoshop’un Custom Shape Tool aracını kullanarak ekledim.

Sonra menünün altında 980×1 boyutunda iki alan seçiyoruz ve resimdeki gibi yapıyoruz

İki katmanı seçip sağ tıklıyor ve  Merge Layers‘ı seçiyoruz. Sonra katman görünümü katmanlar panelinden overlay olarak, opacity değerini de %27 olarak ayarlıyoruz.

Biraz önce çizdiğimiz iki çizginin hemen üstünde 980×10 boyutunda bir alanı seçim aracıyla seçiyoruz seçiyoruz ve Gradient Tool ile resimdeki ok yönünde sürüyoruz.

Sonra aynı işlemi çizginin altına siyah renk seçerek yapıyoruz. Yaptığımız iki geçişi birleştiriyoruz karışma modunu Soft Light Opacity değerini de %49 olarak ayarlıyoruz.

Çizdiğimiz yeri 980×20 genişliğinde seçiyoruz. Select»Modify»Feather(Shift+F5) a girip resimdeki gibi ayarlıyoruz. Sonra Select»Inverse(Shift+Ctrl+i) seçiyoruz ve resimdeki halini alana kadar Del‘e tıklayoruz.

Biraz içerik resim falan ekliyoruz. En son alt alanı da ekleyip bitiriyoruz.(Burada eklenen kutuları Rectangle tool yada Marque Tool kullanıp Edit»Fill yolu ile dolduruyoruz.)  Sonuç resimdeki gibi olacak:

Dersimiz bu kadar. Kullanacağınız renkler, şekiller tamamen sizin yaratıcılığınıza bağlı. Photoshop içinde ne kadar özgür olursak o kadar güzel tasarımlar yapacağımıza inanıyorum. Kendinizi kalıplara bağlamayın. İyi günler dilerim.

Not: Ders de anlamadığınız her şeyi yorumlarda bana sorabilirsiniz. Hepsini elimden geldiğince cevaplayacağım.