Bu alana reklam verebilirsin

Merhaba Ziyaretçi!
Nick
Şifre
Sectit Photoshop Dersleri,Grafiker,Grafikerler,Grafik Tasarım,Corel Dersleri,Çizim ve Dijital Sanatlar :Sectit Özel Bölüm Örnekler ve Dersler Adobe DersleriPhotoshop DersleriKonu: Photoshop ve imageReady ile Gif Hazırlama...

Sayfa: [1] 2 |   Aşağı git
Bu Konuyu GönderYazdır
Gönderen Konu: Photoshop ve imageReady ile Gif Hazırlama...  (Okunma Sayısı 2793 defa)
0 Üye ve 1 Ziyaretçi konuyu incelemekte.
Yorkshire
Erkal Can ERKAL
Çok Katılımcı
****

Toplam Ödül: 8
Offline Offline

Cinsiyet: Bay

Mesaj Sayısı: 341


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri WWW
« : 12 Ara 2006, 15:43 »




Yanılmıyor isem Photoshop 6 sürümünden sonra gelen photoshoplar ile birlikte verilmeye başlanan imageready ile Animasyon Yapılması mümkün olmaya başlamıştır.
Programın Çok basit bir sistem ve mantıkla Flasha Benzer Layer Mantığı ile hareket verilebilme özelliği çok özel bir kullanım yeri getirmiştir photoshopa.
Son Gelen Photoshop CS2 sürümü ile Artık Animasyon ve Gelişmiş Gif özellikleri Direk Photoshop Programınada Uyarlanmıştır.

Benim Bu Derste Amacım size imagereadynin genel kullanımı Hakkında Bilgi Vermekten çok Yanlızca Programın Animasyon özelliğini Anlatmaktır. Başladıktan Sonra gif yapmanın ne kadar kolay olduğunu sizde Görüceksiniz...

İlk Olarak Gif Animasyon Mantığını Anlatıyım;
Gif yani Graphics Interchange Format (Grafik Değiştirme Biçimi) Anlamına Gelir. Maksimum 8bit Renk (256Renk) Desteği bulunur. Tam Transparanlık özeliği vardır. Yani Yarı Saydam Olamazlar. Piksel (Bitmap) Tabanlı Animasyon Olarak Saklanabilirler. Genel Amacı düşük renkler sayesinde düşük yer tutması sebebiyle Görselleri Saklamada Kullanılırlar. Yada Webte Düşük Boyutlu buton ve küçük resimler için.

Bir gif içerisine Verilen Frame Sayısı Sınırsızdır. Fakat Avi yada mov gibi yine bitmap tabanlı filmlere göre Akıcı değildir. Basit 4 5 kareyi(Frame) hareket ettirerek sürekli yada 1 kere tekrar eden animasyon gösterimine elverişlidir.

Evet Bu Kadar Bilgi Yeter, Şimdi ilk Örneğimizle Başlıyalım.
Yanlız Belirtmek istiyorum bu bir çizim dersi değildir. Söylediğim Şekillerin Nasıl çizildiği ile ilgili Forumumuzda Mevcuttur. Örneklerde çizdiğim şekilleri sizinde çizebilmeniz Gerekmektedir...
Evet;
Photoshopu Açın ve 400 x 400 piksellik bir Sayfa Oluşturun.
Ben Basit Bir Arka Fon resmi Koydum Sahneme.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Şimdi Sahneye Bize El Sallıyan Bir Karakter Oluşturucaz.
Bunun için Basit Bir Karakter çizebilir yada mevcut bir resminizin Etrafını Temizleyerek Koyabilirsiniz.Eğer Siz Çizecekseniz Kol, Bak ve Ayak Gibi Uzuvları Ayrı Layerde Bırakın. Eğer resim Ekliycek iseniz Eklediğiniz Resmin El Baş Ve Ayaklarını Layerlere Ayırın.
Benim Karakterim Bu;
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Gözleri Boş Bıraktım Daha Sonra Değişik Bir animasyon Çeşidini Gözler üzerinde Göstericem...
Şimdi Karakterimizin Layerlerini Resimdeki Oluşturun.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Az Önce dediğim gibi Yanlızca Animasyon Vericeğimiz Layerların Ayrı olması yeticektir.
Şimdi Yapmamız gereken Photoshopun tool Menüsünün Altındaki İmageready simgesine tıklamak ve direk olarak imagereadye geçmek olucaktır.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Bu Butona tıkladığımız Zaman Otomatik olarak imageready açılacak ve Sayfamız Layerleri ile birlikte aynen orda açılacaktır.
imageReady menüsü Photoshop menülerine oldukça benzediğinden kullanım konusunda zorluk çekmiyceksiniz.
Görüldüğü gibi seçilen Layerler etrafında çizgi ile gösterilir. Burda Photoshopun aksine Move Tool ile tıkladığımız resmin layeri seçili hale gelir.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Tool Menüsündeki Elipse Tool ile Gözü oluşturucak siyah noktayıde ekliyorum.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Bu Photoshoptaki ile Tamamen Aynı Şekilde Çalışır.
Aynı Photoshoptaki Gibi Work Path Yerine Shape olarak oluşturuyorum.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Gözleri Shapelerden Yapmamızın Sebebi imageReadynin Shapelere Verilen Hareketleri Daha Gerçekçi Animasyon Haline Getirebilmesi yüzündendir.
Şimdi Gelelim Animasyon Kısmına;
Animasyon için Her Kareyi Ayrı Ayrı oluşturmamız Gerekmektedir. Gif Mantıksal olarak animasyonu oluşturan resimlerin tıpkı bir film şeridi gibi ardarda gelmesinden oluşur.

Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
(animasyon Penceresinde Animasyonun Herkaresi düzenlenir)

Bu Yüzden Önce Animasyonun hikayesini düşünmeli ve Karakterimizin hareketlerini teker teker Buna Göre çizmeliyiz. Tabi Layer Mantığıyla. Yani Sadece Kol Hareket edicekse 2 tane Kol layeri oluşturmalı bu layerların ilkinde kol normal ikincisinde hareketin bittiği noktada olmalı. Animasyon kısmında ilk Frame ilk layeri, ikinci frame ise ikinci layeri gösterdiği zaman sanki kol hareket etmiş gibi bir görüntü oluşturur. bunun için ilk framede normal kol layeri görünür hareket layeri görünmez, ikinci framede ise tam tersi şeklinde uygulanmalıdır.

Bunu şöyle bir örnekle gösterelim;
Karakterimizin Kol Layerini Duplicate edelim,
Duplicate layerine "Kol Hareket" ismini verelim ve Ctrl + T yardımı ile şeklini değiştirelim.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Şekilde iki adet Kol Layerimiz Var.
Aynı şekilde Animasyon Penceresindede iki frame oluşturalım.
Bunun için animasyon penceresinin altındaki küçük duplicate frame butonuna bir kez tıklayalım. Böylece Ordaki Framein bir kopyasını oluşturur.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Karelerimiz(Frameler) sadece Layerlarıdaki visibility (görünürlülük) ve Opacity (Opaklık, saydamlık) Ayarlarını üzerlerinde saklayabilirler.
Bu mantıkla Animasyon penceresinden ilk karemizi seçelim ve layer penceresinden Sol Kol hareket Layerinin Yanındaki küçük köz işaretine tıklayarak kaldıralım.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Aynı Şekilde yine Animasyon penceresinden bu sefer ikinci karemizi seçip, Layer Penceresinden hareket layerini aktif, Normal Kol Layerinin yanındaki Gözü ise (deaktif)iptal edelim...
Logged
Yorkshire
Erkal Can ERKAL
Çok Katılımcı
****

Toplam Ödül: 8
Offline Offline

Cinsiyet: Bay

Mesaj Sayısı: 341


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri WWW
« Yanıtla #1 : 12 Ara 2006, 16:14 »




Şimdi Yine Duplicate Frame tuşu ile Animasyon Penceresinde bir Kare Daha oluşturalım. Bu Karede de ilk karedeki gibi normal kol hareketinin görünür hareket kol layerinin gizli olmasını ayarlıyalım.
Şimdi Animasyon Penceresinin Altındaki Küçük Oynatma tuşu ile Animasyonumuza önizleme yapabiliriz.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap

Evet Gelelim Karelerin hızını Ayarlamaya;
Görüldüğü gibi animasyonumuz çok hızlı hareket etmekte ve sürekli başa dönmektedir.
Bizim istedğimizde sürekli tekrar etmesidir fakat hareket hızını ayarlamamız gerekmektedir. Bunun için tek yapmamız gereken şey Framelerimizin Gösterimiz zamanını uzatmaktır.
Animasyon Penceresindeki karelerin altında 0.0 seconds yazdığını görürsünüz, işte bu karenin gösterme zamanıdır.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Buna tıkladığınız zaman çıkan açılır pencereden Gösterim Zamanı seçenekleri ve kendiniz bir zaman vermeniz için Other seçeneği bulunmaktadır. Biz ilk Kareye 0,2 sn, ikinci kareye 0,5sn ve 3.kareye yine 0,2 sn verelim...
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap
Şimdi izlediğimizde ise animasyonumuzun hareket hızlarının daha gerçekçi olduğunu görürsünüz.

Burda Mantık şudur; ilk karede Görünür tüm layerler 0,2 saniye göründükten sonra ikinci kareye geçip burdada görünür tüm layerleri 0,5 sn gösterip diğer kareye(frame)geçmesidir.

Bu mantıkla animasyonlarımız oluşturulabilir. Daha yumuşak ve gerçekçi geçişler için kol hareketini daha fazla layerden oluşturup kare sayılarını bu şekilde ayarlıyabilirsiniz.

Yumuşak Geçişlerin ikinçi yolu ise flashtakine benziyen Tween özelliğidir. bu özellik sayesinde uğraşmadan iki kare arası opacity ayarlı geçişler oluşturabiliriz. Aslında Asıl amacı Çizdiğimiz Shape Şekillerinin Yer değişimi arasında oluşan hareketleri hesaplamaktır. Biz Göz için çizdiğimiz shapleri bu şekilde düzenliycez. Neyse ama ilk önce opacity geçişini gösterelim...

Bunun için Geçiş yapıcağımız iki karemizi shift yardımı(ilk kareyi seçip ikinci kareyi shifte basılı tutarak) ile seçiyoruz. Tabi sadece yanyana bulunan kareler için.
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap

Ardından Animasyon Penceresindeki küçük tween tuşuna basıyoruz(duplicate framein hemen yanında).
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap

Açılan Pencere;
Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap

Bu Pencerede ilk kısımdaki sayı girilen yer animasyon geçişi için kaç kare kullanmak istediğinizi sorar. bunun 5 te kalması makuldur.
Layers Kısmındaki All Layers seçili olmalı diğeri seçili olursa yanlızca seçili layera hareket verir.
ikinci kısımdaki seçenekler açık kalsın.
ve Ok tuşuna Basabilirsiniz.

Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap

Gördüğünüz gibi tween Seçtiğimiz iki kare arasında 5 yeni kare(frame) ekledi.
Kareleri incelerseniz görürsünüzki iki kare arasında verdiğimiz opacity ayarlarını geçiş şeklinde sıralamıştır. Yani ilk karede solkol hareketimiz 100% görünmezken bu 2 , 3 , 4 , 5 karelerde sırayla yukarı şekilde görünür olmuş ve ilk seçtiğimiz anda ikinci kare olan ama şu anda 6. kare olan framemimizde ise 100% görünür hale gelmiştir.
Logged
Yorkshire
Erkal Can ERKAL
Çok Katılımcı
****

Toplam Ödül: 8
Offline Offline

Cinsiyet: Bay

Mesaj Sayısı: 341


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri WWW
« Yanıtla #2 : 12 Ara 2006, 16:26 »




Animasyonu Kaydetmek için ise Ctrl + Shift + Alt + S ye Basmanız Ve Burda Gif olarak Kaydetmeniz Gerekmektedir...

Resim Ön İzlemesi, Tam Görünüm için Üye Olmalısınız veya Giriş Yapmalısınız!

Üye Ol veya Giriş Yap

Ben burda göz animasyonlarınıda ekledim bunu yapmak için gözleri her framedeki yerlerine getirip yine tweeni kullanıp bu sefer çıkan pencerede sadece positionu seçili bırakarak ok demeniz yeterlidir...
Logged
eylemmm
Sadece Kayıtlı
*

Toplam Ödül: 0
Offline Offline


Mesaj Sayısı: 34


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri
« Yanıtla #3 : 12 Ara 2006, 20:51 »




Hocam eline ,klavyene , mause na sağlık

Çoook teşk ediyorum ...

sectitweb is number one  Wink

benim yine yardımıma koştunuz tekrar çok teşk ediyorum ... Smiley
Logged
Yasaklı Üye

Henüz Üyemiz Değilsiniz


« Yanıtla #4 : 13 Ara 2006, 01:15 »




 Grin Grin york çok güzel anlatmışşın bir insanın sinek i nasıl yakalaması gerektiğini ben anlatıcaktım yoğunum bu aralar sen anlatmıssın iyiki çok güzel  Grin Grin Grin
Logged
SeDmiR
Sadece Kayıtlı
*

Toplam Ödül: 1
Offline Offline

Cinsiyet: Bayan

Mesaj Sayısı: 65


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri
« Yanıtla #5 : 13 Ara 2006, 07:02 »




york ellerıne sağlık. uyus ayrıca werdıgın site linkleride çok işimize yarıyor teşekkürler.
« Son Düzenleme: 13 Ara 2006, 07:26 Gönderen: uyus » Logged
79taner
Sadece Kayıtlı
*

Toplam Ödül: 0
Offline Offline


Mesaj Sayısı: 23

Aktiflik
Seviye
Deneyim

Üyelik Bilgileri
« Yanıtla #6 : 23 Oca 2007, 15:13 »




Ellerine saglık cok güzel
Logged
ünal
sevecen
Normal Katılımcı
***

Toplam Ödül: 2
Offline Offline


Mesaj Sayısı: 123


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri
« Yanıtla #7 : 02 Şub 2007, 18:33 »




çok güzel ya paylasım için tşk Smiley
Logged
peymane
çığlık
Sadece Kayıtlı
*

Toplam Ödül: 2
Offline Offline

Cinsiyet: Bayan

Mesaj Sayısı: 69


Aktiflik
Seviye
Deneyim

Üyelik Bilgileri
« Yanıtla #8 : 06 Şub 2007, 23:40 »




bende animasyona merak sarmıstım bır haftadır konuyu burda gormek hosuma gıttı elıne saglı
Logged
Uğur
Sadece Kayıtlı
*

Toplam Ödül: 0
Offline Offline


Mesaj Sayısı: 1

Aktiflik
Seviye
Deneyim

Üyelik Bilgileri
« Yanıtla #9 : 10 Şub 2007, 10:57 »




Sağolasın kardeş güzel yapmışsın
Logged
Technorati Favorilere Ekle Add to Google Reader or Homepage Subscribe in NewsGator Online Add to The Free Dictionary Add Sectit Grafik Tasar?m :: Photoshop Dersleri Corel Dersleri Dijital Sanatlar Online Grafik Sanatlar - to Newsburst from CNET News.com

Konunun Etiketleri (Tags) :
Sayfa: [1] 2 |   Yukarı git
Bu Konuyu GönderYazdır

Sectit Photoshop Dersleri,Grafiker,Grafikerler,Grafik Tasarım,Corel Dersleri,Çizim ve Dijital Sanatlar :Sectit Özel Bölüm Örnekler ve Dersler Adobe DersleriPhotoshop DersleriKonu: Photoshop ve imageReady ile Gif Hazırlama...

Gitmek istediğiniz yer:  

Benzer Konular
Konu Başlığı Başlatan Yanıtlar Görüntülenme Son Mesaj
ImageReady Hakkında Ders ve Örnek Talepleriniz eylemmm 4 566 Son Mesaj 12 Ara 2006, 16:28
Gönderen: Yorkshire
Adobe Premierde Akan Jenerik Hazırlama Dersi AfterEffects Dersleri « 1 2 » KUROCK 12 2665 Son Mesaj 19 Kas 2007, 13:16
Gönderen: KUROCK
buton hazırlama ImageReady Dersleri alicex 1 1292 Son Mesaj 12 Kas 2007, 08:59
Gönderen: Sectit
Photosop Yanıp sönen yazı (Photoshop+Imageready) Yazı Efeketleri mustafa 6 1638 Son Mesaj 24 Eki 2008, 10:54
Gönderen: _kristal_
Deviant CaNCeR-X Graphics World Dexigner Design Portal ArtWorld Toplist site ekle iyi hit siteler hosting

WAP | WAP2 | WAPForum | RSS | RSS2 | XML
Grafik Video Dersler