After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları
Şu an ya üyemiz değilsiniz yada giriş yapmadınız, tüm imkanlarımızdan yararlanamıyorsunuz!
Üyemiz iseniz aşağıdaki bağlantılarımızdan Giriş yaparak, üyemiz değilseniz Kayıt olarak kısıtlamayı kaldırabilirsiniz.

Join the forum, it's quick and easy

After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları
Şu an ya üyemiz değilsiniz yada giriş yapmadınız, tüm imkanlarımızdan yararlanamıyorsunuz!
Üyemiz iseniz aşağıdaki bağlantılarımızdan Giriş yaparak, üyemiz değilseniz Kayıt olarak kısıtlamayı kaldırabilirsiniz.
After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları
Would you like to react to this message? Create an account in a few clicks or log in to continue.
En son konular
» Yıldız Sinema Günleri
PhotoShop ile Template Düzenlemek EmptySalı 25 Ocak 2022, 16:12 tarafından ytusinema

» epic games reklamı
PhotoShop ile Template Düzenlemek EmptyPerş. 12 Eyl. 2019, 14:02 tarafından ainoslu.22

» Hesap silimi ya da banlanma
PhotoShop ile Template Düzenlemek EmptyC.tesi 31 Ağus. 2019, 09:04 tarafından gariban

» 10. Yıldız Kısa Film Festivali Geliyor!
PhotoShop ile Template Düzenlemek EmptyPaz 14 Mayıs 2017, 10:38 tarafından ytusinema

» After Effects Uzmanı Aranıyor (Ankara)
PhotoShop ile Template Düzenlemek EmptyCuma 14 Nis. 2017, 13:58 tarafından Kün Medya Yapım

» İÇERİ BAK LÜTFEN KAFAYI YİCEM
PhotoShop ile Template Düzenlemek EmptySalı 11 Nis. 2017, 10:55 tarafından korsankirici

» After Effects - Neon Text Efekti - Ders 8
PhotoShop ile Template Düzenlemek EmptyPerş. 30 Mart 2017, 15:32 tarafından theyamak

» After Effects - Tanıtım Animasyonu Kurumsal - Ders 7
PhotoShop ile Template Düzenlemek EmptyPerş. 30 Mart 2017, 15:31 tarafından theyamak

» After Effects - Retro Intro Yapımı - Ders 6
PhotoShop ile Template Düzenlemek EmptyPerş. 30 Mart 2017, 15:31 tarafından theyamak

Giriş yap

Şifremi unuttum

Kimler hatta?
Toplam 79 kullanıcı online :: 0 Kayıtlı, 0 Gizli ve 79 Misafir :: 1 Arama motorları

Yok

[ Bütün listeye bak ]


Sitede bugüne kadar en çok 1614 kişi Paz 10 Tem. 2016, 20:42 tarihinde online oldu.
Istatistikler
Toplam 12710 kayıtlı kullanıcımız var
Son kaydolan kullanıcımız: ceren0

Kullanıcılarımız toplam 60796 mesaj attılar bunda 6689 konu
En iyi yollayıcılar
haziran
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
boronzox
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
Hale
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
olivon
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
render
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
alpino
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
Joker
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
aloha34
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
mobidik
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 
ypr
PhotoShop ile Template Düzenlemek Vote_lcapPhotoShop ile Template Düzenlemek Voting_barPhotoShop ile Template Düzenlemek Vote_rcap 

Anahtar-kelime

Sosyal yer imi

Sosyal yer imi reddit      

Sosyal bookmarking sitesinde After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları adresi saklayın ve paylaşın


PhotoShop ile Template Düzenlemek

Aşağa gitmek

PhotoShop ile Template Düzenlemek Empty PhotoShop ile Template Düzenlemek

Mesaj  haziran Ptsi 24 Eyl. 2007, 14:28

Anlatımda orjinal resimler kullanılarak Türkçe açıklamaları yapılmıştır...

PSD Dosyasını Açıyoruz
PhotoShop ile Template Düzenlemek 01

Karşımıza PSD Dosyası geliyor
PhotoShop ile Template Düzenlemek 00

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.

PhotoShop ile Template Düzenlemek 02
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.

PhotoShop ile Template Düzenlemek 03

ÖNCEKİ HALİ
PhotoShop ile Template Düzenlemek 04

SONRAKİ HALİ
PhotoShop ile Template Düzenlemek 05

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...)
PhotoShop ile Template Düzenlemek 09

ö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.
PhotoShop ile Template Düzenlemek 00

DAHA FAZLA DETAY İÇİN RESİMLERİ İNCELEYİN
PhotoShop ile Template Düzenlemek 10
PhotoShop ile Template Düzenlemek 01
PhotoShop ile Template Düzenlemek 02
PhotoShop ile Template Düzenlemek 03

yazıya gölge vermek için:
PhotoShop ile Template Düzenlemek 04

yazının kenarlarını renklendirmek için:
PhotoShop ile Template Düzenlemek 05

ÖNCEKİ HALİ
PhotoShop ile Template Düzenlemek 07

SONRAKİ HALİ
PhotoShop ile Template Düzenlemek 06

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)

PhotoShop ile Template Düzenlemek 01

Bunlar ise ileride dreamweaver yada frontpage ile editleyeceğimiz text katmanları:
PhotoShop ile Template Düzenlemek 02

WEB SAYFAMIZDA OLACAK BAZI YAZILARI BİRAZ DAHA SÜSLEYELİM
PhotoShop ile Template Düzenlemek 04

Süsleyeceğimiz text layer ı seçelim ve karakter penceresini açalım.
PhotoShop ile Template Düzenlemek 02

önceki ve sonraki şekilleri aşağıda
PhotoShop ile Template Düzenlemek 06

YAZILARLA İŞİMİZ BİTTİ SAYILIR SIRA GELDİ RESİMLERİ DEĞİŞTİRMEYE
PhotoShop ile Template Düzenlemek 00

Ö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
PhotoShop ile Template Düzenlemek 01

Sırayla şunları yapıyoruz:
PhotoShop ile Template Düzenlemek 02
PhotoShop ile Template Düzenlemek 03
PhotoShop ile Template Düzenlemek 04
PhotoShop ile Template Düzenlemek 05
PhotoShop ile Template Düzenlemek 06
PhotoShop ile Template Düzenlemek 07
PhotoShop ile Template Düzenlemek 08
PhotoShop ile Template Düzenlemek 09

ESKİ VE YENİ HALLERİ:
PhotoShop ile Template Düzenlemek 10

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

Önceki ve sonraki hali
PhotoShop ile Template Düzenlemek 00

PhotoShop ile Template Düzenlemek 01
PhotoShop ile Template Düzenlemek 02
RESİMLERE DAHA HOŞ BİR GÖRÜNTÜ KATALIM

Sandalyede oturan hatunun resmine efekt verelim.
PhotoShop ile Template Düzenlemek 01
PhotoShop ile Template Düzenlemek 03
PhotoShop ile Template Düzenlemek 04

Önceki ve sonraki:
PhotoShop ile Template Düzenlemek 06

Bunları tüm resimlere uygulayabiliriz.

SİTEMİZİN BÜYÜK BAŞLIĞINI DEĞİŞELİM VE LOGO EKLEYELİM
PhotoShop ile Template Düzenlemek 00

PhotoShop ile Template Düzenlemek 01

Sayfamıza ekleyeceğimiz logo resmini açalım
PhotoShop ile Template Düzenlemek 02

PhotoShop ile Template Düzenlemek 03

PhotoShop ile Template Düzenlemek 04

önce ve sonraki görünümler
PhotoShop ile Template Düzenlemek 06

ANİMASYONLU (rollower) BUTONLAR YAPALIM
PhotoShop ile Template Düzenlemek 06

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

PhotoShop ile Template Düzenlemek 08
_over katmanı siliyoruz. diğer 3 katmanıda sileceğiz.

PhotoShop ile Template Düzenlemek 09
geriye 4 asıl katman kalıyor.
PhotoShop ile Template Düzenlemek 00

bunlardan tekrar birer kopya yapıyor ve katman isimlerini over la bitiriyoruz.
PhotoShop ile Template Düzenlemek 02

PhotoShop ile Template Düzenlemek 03

PhotoShop ile Template Düzenlemek 04

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.
PhotoShop ile Template Düzenlemek 01

Eğer yukarıdaki dilimleme bize uygun değilse slice leri temizliyoruz.
PhotoShop ile Template Düzenlemek 05

Yeni baştan kendi slice lerimizi (dilimlerimizi) çizmek için araç kutusundan Slice Tool u seçiyoruz.
PhotoShop ile Template Düzenlemek 00

baştan resimleri ayrı ayrı ve yazıları ayrı ayrı olacak şekilde dilimlendiriyoruz.
PhotoShop ile Template Düzenlemek 01

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

PhotoShop ile Template Düzenlemek 06

PhotoShop ile Template Düzenlemek 02

PhotoShop ile Template Düzenlemek 03

DİLİMLERE URL (LİNK) VERMEK
Örneğin 6. dilimdeki HOME butonuna link vermek için:
PhotoShop ile Template Düzenlemek 02

PhotoShop ile Template Düzenlemek 03

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:
PhotoShop ile Template Düzenlemek 05

ADOBE IMAGE READY yi AÇIN

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

PhotoShop ile Template Düzenlemek 00

PhotoShop ile Template Düzenlemek 10

Window menüsünden Web Content i açın (Adobe Photoshop 7+ için)
PhotoShop ile Template Düzenlemek 01

PhotoShop ile Template Düzenlemek 02

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.
PhotoShop ile Template Düzenlemek 03

PhotoShop ile Template Düzenlemek 11

PhotoShop ile Template Düzenlemek 12

PhotoShop ile Template Düzenlemek 04

PhotoShop ile Template Düzenlemek 05

PhotoShop ile Template Düzenlemek 06

PhotoShop ile Template Düzenlemek 07

PhotoShop ile Template Düzenlemek 08

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

PhotoShop ile Template Düzenlemek 08

PhotoShop ile Template Düzenlemek 01

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

PhotoShop ile Template Düzenlemek 01

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

aynen bunun gibi:
PhotoShop ile Template Düzenlemek 03

son olarak
file --> save optimized as diyoruz
PhotoShop ile Template Düzenlemek 04

PhotoShop ile Template Düzenlemek 05

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


Alntıdır...
haziran
haziran
Admin
Admin

Mesaj Sayısı : 9290
Yaş : 37
Nerden : Ank, İst Arası
Meslek : Admin! :D
Kullandığınız Programlar : After Effects, Premiere, Photoshop, Dreamweawer, (Birazda illustrator, Flash, Edius, Cinema4D, Max)
Reputation : 121
Puanları : 2609
Kayıt tarihi : 27/08/07

Sayfa başına dön Aşağa gitmek

Sayfa başına dön

- Similar topics

 
Bu forumun müsaadesi var:
Bu forumdaki mesajlara cevap veremezsiniz