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

Sandalyede oturan hatunun resmine efekt verelim.







Ö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







önce ve sonraki görünümler




ANİMASYONLU (rollower) BUTONLAR YAPALIM



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



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



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.



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.




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





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






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 !!



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



aynen bunun gibi:



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

Alıntı. Güzel bir döküman benim çok hoşuma gitti .