1. Merhabalar, dersimize hoş geldiniz. Bu derste sizlere Photoshop kullanarak bir oyun sitesi taslağı hazırlayacağız. Hani sık sık gördüğünüz template çalışmalarındaki taslaklardan biri yani. Kullanacağınız teknikler aşağıda da göreceğiniz üzere, olabildiğince basit olacaktır, hiç zorlanmayacaksınız, diyebilirim.

2. Haydi başlayalım! PS (Photoshop yerine kısaca böyle diyeceğim)'ta yeni bir dosya açın. RGB renk modu, boyut: 780 x 690 (siz içeriğinize ve isteğinize uygun farklı bir boyut ayarlayabilirsiniz), çözünürlük: 72 DPI olsun.



3. Foreground Color (Ön renk) olarak #261E1B seçin ve bu rengi sahneye uygulamak için Alt+Backspace tuşlarına birlikte basın.

4. Burada yapacağımız ilk şey taslağımızın çeşitli bölümlerini oluşturmak olacaktır. Banner kısmı, Navigasyon Barı, sol kısımdaki navigasyon gibi.

5. Rentacgular Marquee aracı ile aşağıda görüldüğü gibi o alanı seçin.



6. Layer paletinde yeni bir layer oluşturun. Foreground Rengi: #283036, Background Rengi ise #494F53 ayarlı olsun. Gradient aracını seçmek için klavyeden G tuşuna basın ve resimde görüldüğü gibi gradient şekli çizin. Düzenli bir şekilde gradient dolgu yapabilmeniz için SHIFT tuşuna basılı tutun.



Not: Yeni layerler oluşturmak, bu çalışmaları sonradan düzenleme konusunda çok büyük kolaylıklar sağlayacaktır.

7. Foreground rengini #555142 ayarlayın ve Background rengi de #5D5946 olsun. Aşağıdaki gibi bir seçin daha yapın ve yeni bir layer oluşturarak resme aşağıda görüldüğü üzere gradient aracı ile dolgu yapın. Seçimi iptal etmek için Ctrl+D'ye basın. Bundan sonra foreground rengini #5C5C5C şeklinde ayarlayın ve SHIFT tuşuna basılı tutarak basit bir çizgi çizin. ALT tuşuna basın ve çizgiyi aşağı çekerek bir kopyasını oluşturun. Ve bu oluşturduğunu çizgiyi navigasyon olarak düşündüğümüz sol kısmın üstüne taşıyın. Bu adımın sonunda aşağıdaki gibi bir şey ortaya çıkmış olacaktır. Bu navigasyonu daha güzel yapmak için ben ona Drop Shadow, Outer Glow ve Bevel and Emboss efektlerini uyguladım. Aşağıdaki gibi yapmanız için efekt ayarları ile biraz oynayın.





8. Şimdi sol kısımdaki navigasyon üzerinde çalışacağız. Aşağıdaki gibi bir dikdörtgen çizin. Sonra ALT tuşuna basarak onun bir kopyasını oluşturun. Son durum için aşağıdaki resimden istifade edebilirsiniz.



9. Şimdi Drop Shadow, Glow ve Bevel efektlerini uygulayın. Aşlağıdaki resme benzer bir şekil oluşması gerekiyor.



10. Foreground rengini #3C3220 yapın ve Background rengi bu kez #3F2E1F olsun. Aşağıda gördüğünüz gibi bir dikdörtgen çizin ve SHIFT tuşuna basılı tutarak Gradient dolgu yapın. ALT tuşuna basarak şimdi bunun bir kopyasını oluşturun ve taşıyın. Gerekiyorsa birkaç efekt uygulayabilirsiniz. Aşağıdaki şekildeki gibi olsun.



11. Foreground rengini #2F261D yapın ve SHIFT tuşuna basılı tutarak bir çizgi çizin. Bu çizgi ayıraç vazifesi görecektir. Bu çizginin bir kopyasını oluşturun. Aşağıda göreceğiniz gibi bir şey ortaya çıkacaktır. Ben bir parça gradient değişikliği yaptım. Gerçekçiliği tam anlamı ile sağlamak için biraz yazı ekleyebilirsiniz.



12. Şimdi üst navigasyon üzerinde çalışacağız. Şekildeki gibi bir çizgi çizin ve bir kopyasını oluşturun. Linklerin tam anlamı ile hizalandığından emin olun.





13. Taslağımızın daha gerçekçi olması için bir banner ekliyorum.



14. Şimdi bir taslağımızın bir parçası olan Navigasyon ve Banner kısımlarını yapmış olduk. Şimdi taslağımız için içerik oluşturacağız.

15. Rectangular marquee aracı ile aşağıda görülen alanı seçin.



16. Seçimi iptal etmeksizin yeni bir layer oluşturun ve bu arada foreground renginin #5B4646 ve background renginin de #3F2E1F şeklinde olmasına dikkat edin. Gradient aracı ile seçili alana dolgunuzu yapın. Aşağıdakine benzer bir şekil ortaya çıkacaktır.



17. Ctrl + D'ye basarak seçimi iptal edin. Şimdi en alt kısım (footer) için aynı adımları izleyin. Renkleri (background - foreground)değiştirmek için klavyeden X tuşuna basılı tutun. Footer alanı için bir seçim alanı çizin ve yeni bir layer oluşturarak seçimin içine gradient aracı ile doldu yapın.



18. Bundan sonra Stroke (dış çizgi) ayarları ile oynayıp birkaç değişiklik yapıyorum.



19. Aşağıdaki gibi bir şey ortaya çıkacaktır.



20. Sadece birkaç adım kaldı, ondan sonra tamamlıyoruz! Aşağıdaki gibi içerik eklemek için birkaç dörtgen şekil çizin.



21. Bundan sonra taslak için içerik ekleyebilirsiniz. Ben birkaç resim ve yazı ekledim, son hali aşağıdaki gibi oldu. Siz daha değişik yazı ve resimler ekleyebilirsiniz.



Not: Head Nerd'in hazırladığı dersten çevrilmiştir.