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.
En son konular
» YÖNETİCİLERE SESLENİYORUM FORUM NEDEN AKTİF DEĞİL
Dün 10:07 tarafından halisonmez

» Plugin yardım?
Dün 10:04 tarafından halisonmez

» Tanışma
Dün 09:59 tarafından halisonmez

» Çift ekran kart var. Opengl değiştiremiyorum
Ptsi 28 Kas. 2016, 20:43 tarafından Baranbankman

» view'lar beyaz olup donuyor
Paz 27 Kas. 2016, 13:52 tarafından oklava

» 3D PSD dosyası import sorunu...
Çarş. 20 Tem. 2016, 09:42 tarafından ilkblood

» sure target dersi kolay anlatım
Çarş. 20 Nis. 2016, 23:07 tarafından blizzard205

» after effect ögreniyoruz
Çarş. 20 Nis. 2016, 22:32 tarafından blizzard205

» sabit layerin opacityle birlikte ortaya çıkması
Ptsi 22 Şub. 2016, 22:53 tarafından fotoyalniz

Giriş yap

Şifremi unuttum

Kimler hatta?
Toplam 10 kullanıcı online :: 0 Kayıtlı, 0 Gizli ve 10 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 12623 kayıtlı kullanıcımız var
Son kaydolan kullanıcımız: manilaorleans

Kullanıcılarımız toplam 60754 mesaj attılar bunda 6647 konu
Sosyal yer imi

Sosyal yer imi Digg  Sosyal yer imi Delicious  Sosyal yer imi Reddit  Sosyal yer imi Stumbleupon  Sosyal yer imi Slashdot  Sosyal yer imi Furl  Sosyal yer imi Yahoo  Sosyal yer imi Google  Sosyal yer imi Blinklist  Sosyal yer imi Blogmarks  Sosyal yer imi Technorati  

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


PhotoShop ile Template Düzenlemek

Önceki başlık Sonraki başlık Aşağa gitmek

PhotoShop ile Template Düzenlemek

Mesaj  haziran Bir 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


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:


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.






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


Alntıdır...

______________

Forum Kurallarını Okuyunuz
Dost Sitelerimiz

Murat Özdemir
www.after-effects.tr.cx
Banka Bilgileri
eBankam Bankalar
IBAN BIC SWIFT Bilgileri

haziran
Admin
Admin

Mesaj Sayısı : 9290
Yaş : 29
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

Önceki başlık Sonraki başlık Sayfa başına dön

- Similar topics

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