Bir Grafik Sitesi Hazırlıyoruz (Oyun Sitesi Yapalım)

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 yazıda da göreceğiniz üzere, olabildiğince basit olacaktır, hiç zorlanmayacaksınız, diyebilirim.

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.
  • Etiketler;
Yorum Yaz

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

• 13 yıl önce
Bu bölümlere tıklanmıyordur buralara html kodu yada başka bir kod nasıl koyarın lütfen söyleyin:agla:
• 13 yıl önce
bunları nasıl bölüp link eklenir yardımcı olsanız valla cok iyi olur
• 13 yıl önce
İlk Önce şunu söyleyim çok güzel anlatım olmuş Eline sağlık. Photoshop'tan slayslarsınız ardından Dreamweaver'dan cagiribilirsiniz. haliyle linkleri çalıştırmak için Dw'de Slayslara link verebilirsiniz. Ama bu şekilde webde geç acılır (Nekadar İmage Okadar geç açılma)
• 13 yıl önce
slice aracıyla keser url verırsın daha geniş eklentileri dreamveaver da yaparsın
• 13 yıl önce
Hocam gerçekten harikasın ellerin dert görmesin inşallah
• 13 yıl önce
:gul:ellerinize sağlık hoş bir çalışma olmuş
• 13 yıl önce
hele gurban essahtan guzel omuş
• 13 yıl önce
dersi nerden alıntı yaptın ??? hazır template oldugu belli yani sen hazırlamadın galiba bu dersi
• 13 yıl önce
Alttaki yazıyı okumadın galiba: Not: Head Nerd'in hazırladığı dersten çevrilmiştir.
• 12 yıl önce
Paylasşım için saÐoLun...:D:D
• 12 yıl önce
Paylasşım için saÐoLun...:D:D
• 12 yıl önce
pek sade bir anlatım olmamış ama yinede tşkler.
• 11 yıl önce
teşekkürler güzel anlatım olmuş. Emeğine sağlık
• 11 yıl önce
paylaşım için sağol yeni paylaşımlar göndermeniz dileiyle
• 10 yıl önce
bu isten anlamiyorum la cs4 var sifirdan nasil ogrencem fotoraf temizlemeyi biliyorum sadece arka plan baska bi bilgim yok:sasir:

Yukarı Git