Template Editleme Genis Anlatim

TemplateMonster veya Boxedart gibi template sitelerinden satın aldığımız yada warez 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.



Orjinal Boyutunda Açmak İçin ( 700x614 ve 91KB ) Buraya Tıklayın



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

Orjinal Boyutunda Açmak İçin ( 700x614 ve 91KB ) Buraya Tıklayın


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...)

Orjinal Boyutunda Açmak İçin ( 700x614 ve 91KB ) Buraya Tıklayın

ö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)


Orjinal Boyutunda Açmak İçin ( 700x614 ve 105KB ) Buraya Tıklayın



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



Orjinal Boyutunda Açmak İçin ( 700x614 ve 104KB ) Buraya Tıklayın



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

Orjinal Boyutunda Açmak İçin ( 700x614 ve 93KB ) Buraya Tıklayın

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

Orjinal Boyutunda Açmak İçin ( 700x614 ve 93KB ) Buraya Tıklayın

Ö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:


Orjinal Boyutunda Açmak İçin ( 700x634 ve 101KB ) Buraya Tıklayın








ESKİ VE YENİ HALLERİ:




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

Önceki ve sonraki hali






RESİMLERE DAHA HOŞ BİR GÖRÜNTÜ KATALIM

Sandalyede oturan hatunun resmine efekt verelim.



Orjinal Boyutunda Açmak İçin ( 700x373 ve 82KB ) Buraya Tıklayın




Önceki ve sonraki: (deterjan reklamına benzedi artık be..)



Bunları tüm resimlere uygulayabiliriz.


SİTEMİZİN BÜYÜK BAŞLIĞINI DEĞİŞELİM VE LOGO EKLEYELİM






Sayfamıza ekleyeceğimiz logo resmini açalım


Orjinal Boyutunda Açmak İçin ( 700x614 ve 107KB ) Buraya Tıklayın



önce ve sonraki görünümler

Orjinal Boyutunda Açmak İçin ( 700x614 ve 93KB ) Buraya Tıklayın

ANİMASYONLU (rollower) BUTONLAR YAPALIM

Orjinal Boyutunda Açmak İçin ( 700x614 ve 93KB ) Buraya Tıklayın

En üstteki 4 butona ait (home, services, partners, contacts) ikişer katman var. Bunlardan katman isminin sonunda _over olan katmanları siliyoruz. Ardından her katmanı Duplicate Layer ile birer kere çoğaltıp, yeni oluşan katmanların renklerini değişiyoruz. resimleri inceleyin

Orjinal Boyutunda Açmak İçin ( 700x614 ve 93KB ) Buraya Tıklayın

_over katmanı siliyoruz. diğer 3 katmanıda sileceğiz.

Orjinal Boyutunda Açmak İçin ( 700x614 ve 93KB ) Buraya Tıklayın


geriye 4 asıl katman kalıyor.



bunlardan tekrar birer kopya yapıyor ve katman isimlerini over la bitiriyoruz.







over olan katmanların rengini kendimize göre ayarlıyoruz

Sıra en önemli bölüme geldi

SLICE YANİ DİLİMLEME

Photoshopu web sayfası yazanların kullandığı araçtır slice.

Dilimlemekteki amaç resimleri ve yazıları birbirinden ayırmaktır. Slice yaparak imaj dosyaları oluşturulur ve daha sonra web sayfamız için gereksiz olan imajlar silinir. Gereksiz dilimlerdeki imajları silmessek sayfamız yavaşlar.

Kaldığımız yerden devam ediyoruz..

Resmimizi açıyoruz

(ünlü template firmalarından indireceğiniz templateler içindeki PSD dosyaları dilimlenmiş olarak gelirler)

Dilimleri görmek için CTRL + H yapıyoruz. Gelen mavi çizgiler ve üstündeki küçük mavi rakamlar dilim numaralarını gösterir.

Orjinal Boyutunda Açmak İçin ( 700x617 ve 128KB ) Buraya Tıklayın


Eğer yukarıdaki dilimleme bize uygun değilse slice leri temizliyoruz.




Yeni baştan kendi slice lerimizi (dilimlerimizi) çizmek için araç kutusundan Slice Tool u seçiyoruz.




baştan resimleri ayrı ayrı ve yazıları ayrı ayrı olacak şekilde dilimlendiriyoruz.



Orjinal Boyutunda Açmak İçin ( 700x617 ve 128KB ) Buraya Tıklayın

Daha sonra dilimlerimize aklımızda kalacak isimler veriyoruz. Örneğin aşağıdaki resimde 12. dilime wel2 ismi verilmiş.






DİLİMLERE URL (LİNK) VERMEK

Örneğin 6. dilimdeki HOME butonuna link vermek için:




Yukarıdaki pencerede URL kutusuna düğmenin gitmesini istediğiniz linki,

Message Text Kutusuna, mouse linkin üstüne geldiğinde kullanıcıya vermek istediğiniz mesajı,

Alt Tag kutusuna ise Internet Explorer durum çubuğunun sol tarafında görüntülemek istediğiniz mesajı yazın.

örnek başka bir görünüm:





ADOBE IMAGE READY yi AÇIN

File-->Open-->PSD Dosyanız


Orjinal Boyutunda Açmak İçin ( 659x644 ve 71KB ) Buraya Tıklayın Orjinal Boyutunda Açmak İçin ( 700x672 ve 110KB ) Buraya Tıklayın


Window menüsünden Web Content i açın (Adobe Photoshop 7+ için)

Orjinal Boyutunda Açmak İçin ( 700x581 ve 92KB ) Buraya Tıklayın





ANİMASYONLU BUTONLARI IMAGE READY DE DÜZENLEMEK

Hatırlarsanız HOME butonu animasyonlu idi. Yani normalde HOME yazısının rengi yeşildi. Mouse la üstüne geldiğimizde turuncu olacaktı. Aşağıdaki resimleri iyi inceleyin.





Aynı işlemler diğer rollwer olacak butonlar için tekrarlanacak.





AZ KALDI..

SAYFAMIZI ARTIK WEB İÇİN KAYDEDİYORUZ (HTML için)

Arkadaşlar unutmadan söliyim. Image Ready bu dosyayı HTML olarak kaydedecek. Ama siz server taraflı bir uygulama kullanacaksanız html dosyalarını ileride Dreamweaver ile ASP ye çevirebilirsiniz.


aşağıdaki resme bakın. kırmızı çizgi içindeki katmanlar resim olarak bize lazım değil. O yüzden bunları boş olarak kaydedeceğiz. Boşlukları ileride dreamweaver ile biz yazarak veya renklendirerek dolduracağız. Bize gerekli olan şablondu unutmayın !!

Orjinal Boyutunda Açmak İçin ( 700x672 ve 115KB ) Buraya Tıklayın

Text layer ların yanındaki göz işaretlerini yok ediyoruz ve artık textler piyasada gözükmüyor.




aynen bunun gibi:

Orjinal Boyutunda Açmak İçin ( 700x514 ve 89KB ) Buraya Tıklayın
L]
son olarak

file --> save optimized as diyoruz






index.html dosyamız böylelikle hazır hale geldi..Kolay gelsin.Umarım faydalı bir çalışma olmuştur​