Turkish Power
En kaliteli hizmeti almak için üye olunuz!

Turkish Power

TurkishPowerForumuna Hoşgeldiniz!Aradığınız ne varsa burda!
 
AnasayfaKapıGaleriKayıt OlGiriş yap
Forumumuza Hoşgeldiniz!İyi vakit geçirmeniz dileğiyle!
Arama
 
 

Sonuç :
 
Rechercher çıkıntı araştırma
En son konular
» Süper Mario
Cuma Nis. 09, 2010 3:13 pm tarafından LegendKiller

» Bugs Bunny
Salı Şub. 16, 2010 8:56 pm tarafından LegendKiller

» Ruhsar
Salı Şub. 16, 2010 8:55 pm tarafından LegendKiller

» Ebru Gündeş'in An An Beyin Kanaması
Salı Şub. 16, 2010 8:54 pm tarafından LegendKiller

» Eski Türk Sigaraları!
Salı Şub. 16, 2010 8:51 pm tarafından LegendKiller

» Kemal Sunal Filmleri
Salı Şub. 16, 2010 8:50 pm tarafından LegendKiller

» Power Rangers
Salı Şub. 16, 2010 8:48 pm tarafından LegendKiller

» Milli Mücadele Dönemi Ayaklanmaları!
C.tesi Şub. 13, 2010 3:30 pm tarafından LegendKiller

» Amerikan Ambargosu 1975-1978
C.tesi Şub. 13, 2010 3:29 pm tarafından LegendKiller

Tarıyıcı
 Kapı
 Indeks
 Üye Listesi
 Profil
 SSS
 Arama
Google Translate

Paylaş | 
 

 Photoshop İle Template Düzenlemek!

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
LegendKiller
Administratör
Administratör


Hangi Takımlısınız? : Galatasaray
Mesaj Sayısı : 295
Kayıt tarihi : 28/01/10
Yaş : 37
Nerden : Rize/Ardeşen

MesajKonu: Photoshop İle Template Düzenlemek!   Çarş. Şub. 03, 2010 2:17 pm

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














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.

Click this bar to
view the full image.
























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 pişmiş oldu. Afiyet olsun diyor,
hatalarım ya da sorularınız varsa PM den bana ulaşmanızı diliyorum..
Sayfa başına dön Aşağa gitmek
http://turkishpowerforum.hareketforum.biz
 
Photoshop İle Template Düzenlemek!
Önceki başlık Sonraki başlık Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» Photoshop HDR (high dinamic rendering) eklentisi
» Photoshop tırtıklı kenar
» psd nedir nasıl kullanılır? psd hakkında soru cevap?
» photofiltrede photoshop gibi imza yapımı

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
Turkish Power :: İnternet :: Resimli Program Anlatım...-
Buraya geçin: