TemplateMonster veya Boxedart gibi template sitelerinden satın aldığımız yada ***** olarak edindiğimiz templatelerin Photoshop ile editlenmesini içeren resimli bir anlatım.Özellikle tasarım konusunda amatörler için ideal bir döküman.





templatemonster.com ya da benzer bir siteye girip hoşumuza giden bir template indiriyoruz. zip dosyasını açtığımızda karşımıza .HTM , .PSD ve sayfada flash ögesi varsa .FLA dosyaları geliyor.

Unutmadan .. sisteminizde yüklü olmayan font dosyalarıda zipin içinden çıkabilir. Bunları x:\WINDOWS\FONTS klasörüne atıyoruz

Amacımız .PSD dosyasını Photoshop ile açıp kendimize göre değişiklikleri yaptıktan sonra dosyayı .htm ye (ya da asp, php, ıvır zıvır) çevirmek.



PSD Dosyasını açıyoruz



Karşımıza PSD dosyası geliyor



YAZILARI (TEXT)DEĞİŞTİRİN

Hemen sayfadaki yazıları kendimize uygun olarak değiştiriyoruz. Bunun için photoshop araç kutusundan Text tool u kullanıyoruz.



Bildiğimiz üzere Photoshop tamamen layer (katman) mantığında çalışır. Değiştirmek istediğimiz yazıların olduğu layerlara (katmanlara) aşağıda görülen layer penceresei kullanarak ulaşıyor ve bunları değiştiriyoruz.



ÖNCEKİ HALİ



SONRAKİ HALİ





YAZILARA EFEKT VERİN

Keyfimize göre istediğimiz text layer larının herbirine katman penceresini kullanarak efekt veriyoruz. (gölge, bevel v.s...)



örneğin "OUR PARTNERS" yazısına efekt verelim. Bunun için layer penceresinde "OUR PARTNERS" yazılı olan katmanı bulup sağ tuşla açılan menüden Blending Options diyoruz.




DAHA FAZLA DETAY İÇİN RESİMLERİ İNCELEYİN













yazıya gölge vermek için:




yazının kenarlarını renklendirmek için:




ÖNCEKİ HALİ




SONRAKİ HALİ





Efekt verilen yazılar daha ileride göreceğimiz gibi htm dosyasına geçtiklerinde artık RESİM olacaklar. Aşağıda resime dönüşecek text leri görüyorsunuz.

(not: ne kadar fazla texti resime dönüştürürseniz web sayfanız o kadar geç açılır)





Bunlar ise ileride dreamweaver yada frontpage ile editleyeceğimiz text katmanları:






WEB SAYFAMIZDA OLACAK BAZI YAZILARI BİRAZ DAHA SÜSLEYELİM



Süsleyeceğimiz text layer ı seçelim ve karakter penceresini açalım.



önceki ve sonraki şekilleri aşağıda




YAZILARLA İŞİMİZ BİTTİ SAYILIR SIRA GELDİ RESİMLERİ DEĞİŞTİRMEYE



Örneğin yukardaki resimde görünen sandalyede oturan hatunun resmini kendi istediğimiz bir resimle değiştirelim. Önceki resimle sonraki resimin ebatlarını eşit seçersek iyi ederiz.

Ekleyeceğimiz resmi açıyoruz



Sırayla şunları yapıyoruz:

















ESKİ VE YENİ HALLERİ:




İSTEDİĞİMİZ RESİMLERİN RENK VE DOYGUNLUKLARINI DEĞİŞTİRİYORUZ

Önceki ve sonraki hali