Grafik ve Animasyon Dersi Sözlüsü ve Yazılısı için çalışma örnekleri
Sözlü için yapılacak çalışmalar aşağıda sıralanmıştır.
Ödevlerin teslim tarihi 8 Ocak 2010 Cuma günüdür.
Öncelikle bir dizin oluşturulacak adı ADINIZSOYADINIZ.SINIFINIZ.NUMARANIZ şeklinde olacak. İçine yaptığınız PNG uzantılı Fireworks çalışmaları olacak

1. Balon yapımı
Resimde görünene benzeyen bir şekil ekrana yapacaksınız. İnternetten herhangi bir çiçek resmi bulup üzerine üç tane farklı renkte balon yapılacak. Çalışma boyutu 400×400 olacak balonları ekrana sığacak şekilde ölçeklendirirsiniz.
Ayrıca balon yapımını anlattığım videolar burada var eğer sınıfta anlamadıysanız: video

2. Ekrana ismimizi yazalım
Bu örnekte ise çalışma alanı 400×300 olacak. Ekrana buradaki gibi isminizi yazacak ve benzeri bir arkafon yapacaksınız.
Ayrıca bu çalışmanını yapımını anlattığım videolar burada var eğer sınıfta anlamadıysanız:
Nasıl Yapıldığını aşama aşama yazayım :
a. File/New çalışma alanını 400*300 olarak belirleyin
b. Ekrana bir dikdörtgen çizin boyutları 400×300 olsun Align komutu ile canvas a ortalayın. Sonra gradien ile Radial bir dolgu veriniz. İlerde problem olmaması için kilitleyin.
c. Ekrana isminizi yazınız. Yazı tipini ve boyutun ayarlayınız.
d. Edit / Clone ile çoğaltın, Modify / Transform / Flip Vertical ile çevirin, oklarla konumunu ayarlayın. Commands/Creative/Fade Image komutu ile geçirgenliğini veriniz. Gerekiyorsa ayarlamaları yapın.
e. Edit / Clone ile yeniden yazıyı çoğaltın. Yazıyı kesecek şekli Path komutu ile oluşturuz. Metni seçip Text/Convert to Path ile metni çizgiye dönüştür, sonra Modify / Ungroup ile grup özelliğini kaldır. Çünkü grup iken kesmeyi yapamıyoruz. Modify/Combine Path/ Union ile parça parça olan harfleri tek şekil haline getir, en son olarak üst layer daki kesecek şekli ve metni seçip Modify / Combine Path/ Punch komutunu uygulayın. Artık bu yeni parçaya renk vererek yaptığınızı görebilirsiniz. Bu kadar.
video izlemek için tıklayınız.

3. Monitör Yapımı
Bu çalışmanın boyutları 400×400 dir. Ekranda gördüğünüze benzer bir monitör çizeceksiniz ve içine kendi bilgisayarınızın ekran görüntüsünü alıp yerleştireceksiniz. Ekran görüntüsünü almak için klavyenizden PrintScreen tuşunu kullanabilirsiniz. Eğer Vista veya Windows 7 kullanıyorsanız ekranı yakalamak için Ekran Alıntısı Aracını da kullanabilirsini. Bunun için bir videolu eğitim yok gerekli görmedim.

4. Basit Slice ve Hotspot Kullanımlı Monitör
Çalışma alanı 400*300 olacaktır. Burada da bir önceki şekilde kullanılan monitör kullanılacak. Her butonun üzerine gelindiğinde monitördeki çiçek resmi değişecek. Sizde internetten bulduğunuz güzel çiçek resimlerini ekleyip aşağıdakine benzer bir görüntü elde ediniz.
Ayrıca hotpot ve slice yapımını anlattığım videolar burada var eğer sınıfta anlamadıysanız: video
Resim hali:

Uygulanmış hali:
5. Web sitesi Şablonu 1
Burada dikkat edeceğiniz birinci unsur boyutları 640×480 olacak resimde gördüğünüz bu boyutlarda değil ama ekrana sığması için bu boyutlarda görüyorsunuz.

Nasıl yapıldığını kısaca adım adım açıklayayım:
a. İlk olarak çalışma ekranı boyutunda bir 640 x 480 piksel dikdörtgen oluşturunuz ve bunu Align ile canvasa ortalayınız.. Buna Properties den Texture Line-Horiz 1 ve %22 yoğunluk veriniz. Rengi de resimden bulunuz.
b. Ekranın üst kısmına 640×100 piksel genişliğinde bir dikdörtgen yerleştiriniz. Properties den Filters + ya basıp Shadow and Glow dan Drop Shadow uygulayınız. Rengide arkafondan daha koyu bir renk seçiniz.
c. Ekranın üst kısmında bir gül bahçesi yazısı ve onun hemen altında yansıması bulunuyor. Yansıma gül bahçesi yazmak için gülbahçesi yazısını Edit /Clone layıp Modify/Transform/Flip Verticali ile çeviriniz ve son olarak da Command / Create / Fade Image kumutunu veriniz.
d. Bu üst kutunun altına 4 adet dikdörtgen oluşturuyoruz. Boyutları 70×30 olacak ve renklerini ekrandan alınız. Align komutunu kullanarak aralıklarını eşitleyin ve gruplayıp ekrana ortalayınız.
e. Ekranın yaklaşık ortasına 400×250 boyutlarında bir dikdörtgen yapınız. Bunun içine metin aracını kullanarak ekranda gördüğüz yazıları yazınız.
f. Frame 2, Frame 3, Frame 4 ve Frame5 e gelip internetten bulduğunuz resimleri yerleşitiriniz. Mümkün olduğu kadar frame 1 deki boyutlara yakın olsun.
g. Yukarda yaptığınız dört küçük dikdörtgenin üzerine hotspotlar yerleştiriniz. Bunları orta noktaya yaptığınız slice üzerine sürükleyip sırayla Frame2 , Frame3, Frame4 ve Frame 5 ile ilişkilendiriniz.
işte bu kadar.
Uygulanmış hali:
6. Web sitesi Şablonu 2 : Butonlu
Burada dikkat edeceğiniz ilk unsur boyutları 640×480 olacak resimde gördüğünüz bu boyutlarda değil ama ekrana sığması için bu boyutlarda görüyorsunuz.

Yapılacakların açıklamaları olan resim

Nasıl yapıldığını kısaca adım adım açıklayayım:
a. İlk olarak çalışma ekranı boyutunda bir 640 x 480 piksel dikdörtgen oluşturunuz ve bunu Align ile canvasa ortalayınız.. Buna Properties den Texture Crosshatch 3ve %80 yoğunluk veriniz. Rengi de resimden bulunuz.
b. Ekranın üst kısmına 640×100 piksel genişliğinde bir dikdörtgen yerleştiriniz. Renk kısmından Gradient ve Linear Lacivertten maviye bir dolgu rengi veriniz. Properties den Filters + ya basıp Shadow and Glow dan Drop Shadow uygulayınız.
c. Ekranın üst kısmında önce MALTEPE TİCARET ve altına MESLEK LİSESİ yazınız. Yansımalı yazı konusunda anlattığım teknikle buna iki farklı rengi uygulayalım. MESLEK LİSESİ yazısının altında yansıması bulunuyor. Yansıma MESLEK LİSESİ yazmak için MESLEK LİSESİ yazısını Edit /Clone layıp Modify/Transform/Flip Verticali ile çeviriniz ve son olarak da Command / Create / Fade Image kumutunu veriniz. Bu yazının sağındaki Sizi başarıya götürür yazısı için Path ile bir çizgi oluşturun ve yazı ile bu çizgiyi seçip Text /Attach to Path komutunu uygulayanız. Tabi bu arada Kuş resmini path ile çizmeyi de unutmayınız.
d. Ekranın yaklaşık ortasına 350×250 boyutlarında bir dikdörtgen yapınız. Bunun içine metin aracını kullanarak ekranda gördüğüz yazıları yazınız.
e. 80×80 boyutlarında bir daire oluşturun. Ekranda gördüğünüz gibi içi yeşil ve üzerine gelinde turuncu olan bir buton yapınız. ve sonra bunu çoğaltınız. Butonların sadece Up ve Over larını yapınız diğer özelliklerine bu çalışmada gerek yok.
f. Frame 2, Frame 3 gelip ikinci resimde görülen yazıları yazınız. Mümkün olduğu kadar frame 1 deki boyutlara yakın olsun.
g. Aşağıda yaptığınız üç yuvarlak buton ile ortaya noktaya yaptığınız slice üzerine sürükleyip sırayla Frame2 , Frame3 ilişkilendiriniz. Misyonumuz yazan ile ana sayfadaki aynı olduğundan Misyonumuz butonunu Frame1 ile ilişkilendiriniz.
Ayrıca buton yapımını anlattığım videolar burada var : video1 alternatif video2
işte bu kadar.
Uygulanmış hali: