Photoshop’ta Teknoloji Blogu Taslağı Yapalım

March 15th, 2010 • Bir Başka Tasarım

Bu yazının orjinalini okumak için; http://psdvibe.com/2009/06/22/creating-a-tech-blog-layout-in-adobe-photoshop/

Bu derste Adobe Photoshop‘ta A’dan Z’ye nasıl profösyonel blog tasarımı yapmayı öğreneceğiz. Bu ders hakkında en ufak bir sorunuz bile varsa sorularınızı yorum kısmında sormaktan çekinmeyin. (Sorularınızı, http://psdvibe.com/2009/06/22/creating-a-tech-blog-layout-in-adobe-photoshop/ adresine sorabilirsiniz.)

Bu sonucumuzun ne şekilde görüneceğidir:

1- Yeni bir döküman oluşturarak başlayalım. Boyutları 1280*1200 piksel olsun. Arkaplanı siyah rengi ile doldurun (#000000).

2- Content isminde yeni bir katman oluşturun. Rectangular marquee tool aracını seçin ve 976px genişliğinde bir dikdörtgen çizin. Dikdörtgeni beyaz renk ile doldurun (#FFFFFF).

3- Hala content katmanı üzerindeyken, rectangular marquee tool aracını sağ menüyü çizmek için kullanın. (Sağ menülerin yer aldığı gri kısım). Genişliği 331px ve arkaplan rengi #E9E9E9.
Bu noktada, tasarımınız bu şekilde görünmeli:4-  Yeni bir katman oluşturun ve ismini header yapın. Şimdi baş kısım için hoş bir arkaplan oluşturabiliriz. Bunun için ben önce bu resmi indirdim ve Photoshop’un içine aktardım. Resim aktarıldıktan sonra, Filter menüsünden, Blur oradan da Mottion blur‘u seçin ve resimde ki, adımları uygulayın:

5- Tamamlandığında, modifiye edilmiş resmi, tasarıma aktarın. 972*188px‘e kırpın (Crop). Sonra, Image menüsüne gidin ve Ajdjustments oradan da Color balance‘ı seçin. Highlight, shadows ve midtones‘a mavi ekleyin.
Baş kısım bu şekilde görünmeli: 6- Üst menüleri çizme zamanı. Rectangular marquee tool, aracını seçin ve ismi navigation olan yeni bir katmanda 972×53 piksellerde bir dikdörgen çizin. İçini #080808 ile doldurun.

7-  Layers panelinden, katmanın üzerine sağ tıklayın ve Blending options‘ı açın. Layer style (Blending options) açıldığında, Gradient overlay ekleyin. Ardından, Opaklığını (Gradient‘in) %65 yapın, Gradient‘in sol rengine #000000 bunu ve sağ rengine ise #3F3E3E rengi verin.

8- Şimdi, Text Tool (T) aracını seçin ve üst kısmın menülerini yazmaya başlayın. Ben Arial (bold), kalın ve beyaz renkte seçtim.

9-  Üzerinde/Aktifken linklerini yapmak için, rounded rectangle tool aracını seçin ve linklerden birinin etrafına köşeleri yuvarlatılmış dikdörtgen şekli çizin. Dikdörtgenin yarıçapı (radius özelliği) 10px, arkaplan rengi ise #6589A7 olsun.

10-  Blogu tasarımımıza logo ekleme zamanı. Ben Futura bold yazı tipini, 72pt ve (yazar, siyah renk demiş ancak renk kodu beyaz.) beyaz (#FFFFFF) renk seçiyorum. Basitçe isteğinize göre bir metin girin, ve girdikten sonra metni kopyalayın (duplicate).

11-  Layers panelinden, ilk metnin (Kopyalanmış olanın değil) seçili olduğundan emin olun, sağ tıklayın ve Blending options‘u seçin. Şimdi yazıya hoş, çok “teknoloji tarzı” bir geçiş efekti, Gradient veriyoruz. Gradient overlay‘ı seçin ve gradient ekleyin. Sol renk, #EEEFF0 ve sağ renk ise, #4E4D4D olsun.

12- Gradient ile işiniz bittiği zaman, kopyalanan katmanı seçin (sırf beyaz renkte olan). Move Tool‘u seçin ve klavye oklarıyla, 1 piksel sağa ve 1 piksel alta doğru oynatın.
Bu üç adımdan sonra, logonuz bu şekilde görünmeli: 13- Baş kısımla işimiz bitti sıra yazıları oluşturmakta. İlk yapacağımız şey ismi post olan bir katman yaratmak. Sonra, üç veya dört adet 200*200px boyutlarında resimlerle örnek yazılar oluşturmak. Bir çok resim benim, Cats Who Code ve WpRecipes bloglarımdan bulunabilinir (yazarın blogları). Tasarımın içine 200 piksel‘e 200 piksel boyutlarında resimler alın ve 18 piksel beyaz kenarlıklı çerçevelere yerleştirin.

14- Başlıklar için kullanılan yazı tipi, Arial, kalın, 36pt ve #222222 renkli. Text tool aracını seçerek başlıklara istediğiniz yazıyı yazın ve yazdığınız yazıyı yine Text tool aracı ile seçin. Photoshop‘ta, Window menüsünden Paragraph‘ı seçin. Alttaki ekran görüntüsüne göre, AV‘ı -75 olarak ayarlayın: 15- Tekrar text tool aracını seçin ve gönderenin adı (the author name), yazıların kategorileri (the post category), yorumların sayısı (the number of comments) veya herhangi bir şey yazın. Beyaz renkli (#FFFFFF), 12pt‘li, Arial yazı tipini seçin.

16- Rectangular marquee tool aracını seçin ve daha demin girdiğiniz (gönderenin adı, kategoriler…) yazıların etrafına bir dikdörtgen çizin. Dikdörtgeni #6589A7 ile doldurun. Yazının katmanının, şeklin üstünde olduğundan emin olun.

17-  Yazı için, Arial yazı tipi, 12pt, Yatık (Italic) ve #555555 rengini seçiyorum.

18-  Line Tool‘u seçin ve yazının altına #CCCCCC renginde çizgi çizin.
Yazı, izlenen adımlardan sonra bu şekilde görünmeli: 19- Post, katmanını birçok kez kopyalayın ve içeriğin boş kısımlarını dolduracak kadar yapıştırın:
20- Şimdi sıra, güzel bir yan alan oluşturmada. İsmi sidebar olan yeni bir katman oluşturmakla başlayalım. İlk önce, sidebar katmanına 125*125px sponsor alanı ekleyelim. Favorisi olduğunuz bir kaç blog, (logosunu) indirin ve tasarımın içine aktarın. Psd içinde görünmesi için 4 sponsor seçtim ancak tabi ki bu bir örnek.

21- Bir sonraki işimiz, yan kısma kutu başlıkları (widget) çizmek, ismi widget olan yeni bir katman oluşturun, rectangular marquee tool aracını seçin ve sol kenardan başlayarak, yan kısma 342*40 piksel boyutlarında dikdörtgen çizin. İçini #6589A7 rengi ile doldurun.

22- Zoom Tool aracını kullanarak, şimdi oluşturduğumuz dikdörtgenin sağ köşesine yakınlaşın. Polygonal Lasso Tool aracını seçin ve altta olan ekran görüntüsündeki gibi şekil çizin. Şekli, #4F667A rengi ile doldurun. 23- Kutunun (widget) başlığına biraz metin ekleyin. Bu örnekte, 12pt, Arial bold kullanılmıştır. Yazı rengi beyazdır (#FFFFFF).

24- Başlığın altına biraz yazı ekleyin. Arial yazı tipi, kalın, 12pt, #222222 kullanılmıştır. Bu tamamlandığında, yan kısımdaki, kutu (widget) şu şekilde görünmelidir:

25- Yan kısımda ki boşluğu doldurmaya yetecek kadar ihtiyacınız olan widget katmanını kopyalayın.

26- Tasarımımız, şu an alttaki ekran görüntüsü gibi görünmeli:
27- Sonunda bu dersin son adımı olan şey, basit ama hoş görünen bir alt kısım (footer) oluşturmaktır. İsmi footer olan yeni bir katman oluşturmakla başlayın. Ardından, yeni bir katman daha oluşturun (bununda adı footer olsun) Rectangular Marquee Tool aracını kullanarak, 972*34 px boyutlarında bir dikdörtgen çizin. İçini #6589A7 rengi ile doldurun.

28- Tüm Hakları Saklıdır (Copyright) mesajınızı (veya her ne ise onu) alt kımsa (Footer) ekleyin. Kullandığım yazı tipi, Arial, kalın, 12pt. Rengi beyaz (#FFFFFF). Tamamlandığında, metni tasarımın sağ kısmına hizalayın.

29- Alt kısımda (footer) logonuzun daha küçük versiyonu için, 10, 11 ve 12. adımları tekrarlayın. Ayrıca tabi logo katmanlarını alt kısım için kopyalayabilirsiniz ve boyutlandırabilirsiniz de. 30- Tamamdır! Daha demin ne yaptığına bir bak:

---

Bu yazı, http://psdvibe.com/2009/06/22/creating-a-tech-blog-layout-in-adobe-photoshop/ yazısının Türkçe çevirisidir. Yazının hakkları siteye ve/veya yazar’a aittir. Siteye (PSDVibe.com) ve yazarına (Jean-Baptiste Jung) teşekkür ederim. Çeviri: Cannur DAŞKIRAN.

Tags: blog tasarımı, çeviri, photoshop, teknoloji blogu

Trackback URI.