T.C.
MĠLLÎ EĞĠTĠM BAKANLIĞI
BĠLĠġĠM TEKNOLOJĠLERĠ
RESĠMLERLE WEB ARAÇLARI
HAZIRLAMA 482BK0169
Ankara, 2011
i
Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan
Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya
yönelik olarak öğrencilere rehberlik etmek amacıyla hazırlanmıĢ bireysel
öğrenme materyalidir.
Millî Eğitim Bakanlığınca ücretsiz olarak verilmiĢtir.
PARA ĠLE SATILMAZ.
i
AÇIKLAMALAR ................................................................................................................... iii GĠRĠġ ....................................................................................................................................... 1 ÖĞRENME FAALĠYETĠ–1 .................................................................................................... 3 1. DÜĞMELER ........................................................................................................................ 3
1.1. Düğme Düzenleyicisi (Buton Editor) ........................................................................... 3 1.2. Yeni Bir Düğme Ekleme ............................................................................................... 4 1.3. Düğmeleri DeğiĢtirme ................................................................................................... 8 1.4. Düğmelere Ad Verme ve Bağlantı Ekleme ................................................................... 8 1.5. Düğmeleri Alma ............................................................................................................ 9 1.6. Grafikleri Düğmeye DönüĢtürme ................................................................................ 10 UYGULAMA FAALĠYETĠ .............................................................................................. 11 ÖLÇME VE DEĞERLENDĠRME .................................................................................... 13
ÖĞRENME FAALĠYETĠ–2 .................................................................................................. 15 2. DĠLĠMLER VE ETKĠN BÖLGELER ................................................................................ 15
2.1. Etkin Resim Bölgesi (Image Map) OluĢturma ............................................................ 15 2.2. Web Katmanıyla ÇalıĢma ........................................................................................... 17 2.3. Resmi Dilimleme ........................................................................................................ 17 2.4. DönüĢümlü Resimler (Rollover) OluĢturma ............................................................... 19 2.5. Durum Ekleme ............................................................................................................ 19 2.6. DavranıĢ Ekleme ......................................................................................................... 20 2.7. Yeni Dilimler Ekleme ................................................................................................. 23 2.8. Tam Ekran Görüntüleme ............................................................................................. 23 UYGULAMA FAALĠYETĠ .............................................................................................. 24 ÖLÇME VE DEĞERLENDĠRME .................................................................................... 27
ÖĞRENME FAALĠYETĠ–3 .................................................................................................. 28 3. OPTĠMĠZASYON VE AKTARMA ĠġLEMĠ .................................................................... 28
3.1. DıĢa Aktarma Sihirbazı (Export Wizard) .................................................................... 28 3.2. Resmin Dosya Türünü Seçme ..................................................................................... 33 3.3. Önizleme Düğmesi ...................................................................................................... 34 3.4. Mevcut Optimizasyon Ön Ayarları ............................................................................. 35 3.5. Aktarma ĠĢlemleri ....................................................................................................... 35
3.5.1. JPEG Resimlerini Gönderme ............................................................................... 35 3.5.2. Tarayıcıda Önizleme ............................................................................................ 36 3.5.3. HTML Olarak DıĢa Aktarma ............................................................................... 37
3.6. Slayt Gösterisi Ġle Resimlerin DıĢa Aktarılması ......................................................... 40 UYGULAMA FAALĠYETĠ .............................................................................................. 45 ÖLÇME VE DEĞERLENDĠRME .................................................................................... 47
ÖĞRENME FAALĠYETĠ–4 .................................................................................................. 48 4. GIF ANĠMASYONLARI ................................................................................................... 48
4.1. Animasyon OluĢturma ................................................................................................ 48 4.2. Soğan Zarı (Onion Skin) Kullanma ............................................................................ 50 4.3. Katman PaylaĢma ........................................................................................................ 52 4.4. Animasyon Sembolleri ................................................................................................ 53 4.5. Oynatımı Kontrol Etme ............................................................................................... 55 4.6. Bir GIF Dosyasına Aktarma ....................................................................................... 57 4.7. Aktarma Önizlemesini Kullanma ................................................................................ 58
ĠÇĠNDEKĠLER
ii
4.8. Ara Kareler Doldurmak (Tweening) ........................................................................... 59 4.9. Efektlere Dolgu Uygulama ......................................................................................... 60 UYGULAMA FAALĠYETĠ .............................................................................................. 62 ÖLÇME VE DEĞERLENDĠRME .................................................................................... 67
ÖĞRENME FAALĠYETĠ–5 .................................................................................................. 68 5. MASKELEME VE AÇILIR MENÜLER .......................................................................... 68
5.1. Bir ġablon OluĢturma.................................................................................................. 68 5.2. Bir Resmi Maskeleme ................................................................................................. 69
5.2.1. Bitmap Maskeleri OluĢturma ............................................................................... 69 5.2.2. Vektör Maskeleri OluĢturma ............................................................................... 70
5.3. Katman Panelini Kullanarak Maskeleme Yapma ....................................................... 71 5.4. Metni Bir Maske Olarak Kullanma ............................................................................. 73 5.5. Metin Dilimi OluĢturma .............................................................................................. 74 5.6. Açılır Menü Ekleme .................................................................................................... 76 5.7. Açılır Menüyü Düzenleme .......................................................................................... 81 UYGULAMA FAALĠYETĠ .............................................................................................. 82 ÖLÇME VE DEĞERLENDĠRME .................................................................................... 87
MODÜL DEĞERLENDĠRME .............................................................................................. 88 CEVAP ANAHTARLARI ..................................................................................................... 92 KAYNAKÇA ......................................................................................................................... 95
iii
AÇIKLAMALAR KOD 482BK0169
ALAN BiliĢim Teknolojileri
DAL/MESLEK Web Programcılığı
MODÜLÜN ADI Resimlerle Web Araçları Hazırlama
MODÜLÜN TANIMI
Bu modül, görüntü iĢleme yazılımı kullanarak resimler
ile web araçları hazırlamak için temel bilgi ve becerilerin
kazandırıldığı bir öğrenme materyalidir.
SÜRE 40/32
ÖNKOġUL Görüntü ĠĢleme modülünü tamamlamıĢ olmak
YETERLĠK Resimler ile web araçları hazırlamak
MODÜLÜN AMACI
Genel Amaç
Bu modül ile gerekli ortam sağlandığında; resimler ile web
araçları hazırlayabileceksiniz.
Amaçlar
1. Düğmeler oluĢturabileceksiniz.
2. Etkin resim bölgeleri oluĢturabileceksiniz.
3. Aktarma (export) iĢlemi ve optimizasyon
yapabileceksiniz.
4. Hareketli resimler (GIF) oluĢturabileceksiniz.
5. Maskeleme iĢlemlerini gerçekleĢtirebilecek ve açılır
menüler oluĢturabileceksiniz.
EĞĠTĠM ÖĞRETĠM
ORTAMLARI VE
DONANIMLARI
Ortam: BiliĢim Teknolojileri laboratuvarı, iĢletme ortamı Donanım: Bilgisayar, projeksiyon, yazıcı, görüntü iĢleme
yazılımı ve internet bağlantısı
ÖLÇME VE
DEĞERLENDĠRME
Modül içinde yer alan her öğrenme faaliyetinden sonra
verilen ölçme araçları ile kendinizi değerlendireceksiniz.
Öğretmen modül sonunda ölçme aracı (çoktan seçmeli test,
doğru-yanlıĢ testi, boĢluk doldurma, eĢleĢtirme vb.)
kullanarak modül uygulamaları ile kazandığınız bilgi ve
becerileri ölçerek sizi değerlendirecektir.
AÇIKLAMALAR
iv
1
GĠRĠġ
Sevgili Öğrenci,
Web sitelerinde sitenin içeriği kadar görselliğinin de önemli olduğunu unutmayınız.
Ziyaretçiler web sitenizi açtıklarında onların dikkatini çekecek görsel materyallerle
zenginleĢtirmeniz gerekmektedir.
Web sitelerini hazırlarken görüntü iĢleme yazılımları web sitenize görsel öğeler
hazırlamanızda size yardımcı olacaktır. Görüntü iĢleme yazılımları ile sitenize etkileĢimli,
hareketli ya da hareketsiz görseller hazırlayabilirsiniz. Bu çalıĢmalarınızı dıĢarı aktararak
doğrudan veya bir web editör yazılımı ile sitenize yerleĢtirerek kullanabilirsiniz.
Unutmamanız gereken bir nokta da görüntü iĢleme yazılımlarını kullanmayı tam
olarak öğrendikten sonra tasarım yönünüzü geliĢtirebilmeniz için çok sayıda örnek uygulama
yapmanızdır.
Bu modülde görüntü iĢleme yazılımında düğmeler, dilimler ve etkin bölgeler,
optimizasyon ve aktarma iĢlemleri, GIF animasyonları ile maskeleme ve açılır menülerle
ilgili bilgiler yer almaktadır.
GĠRĠġ
2
3
ÖĞRENME FAALĠYETĠ–1
Web sitesi tasarlarken sayfalara ilgi uyandırmak ve etkileĢim eklemek için düğme
düzenleyiciyi kullanarak düğmeler oluĢturabileceksiniz.
ÇeĢitli web sitelerini inceleyerek sayfalarda kullanılan düğmeleri sınıfta
paylaĢınız.
Web sitelerinde kullanılan düğmeler için hangi yazılımların kullanılabileceğini
araĢtırınız.
1. DÜĞMELER
Semboller herhangi bir metin, nesne veya gruptan oluĢturulan ve istenildiğinde tekrar
kullanılabilen kütüphane nesnelerdir. Sembollerde yapılan değiĢikliklerin kullanılan
kopyaları da aynı Ģekilde değiĢtireceği unutulmamalıdır. Görüntü iĢleme yazılımı üç farklı
sembole sahiptir.
Görüntü iĢleme yazılımı sembol türleri:
Grafik: Grafik türü sembol en temel sembol türüdür. Amacı çalıĢmalarınızda
sürekli kullandığınız grafik öğelerini kütüphane içinde saklamak ve kolayca
yönetebilmenizi sağlamaktır.
Animasyon: ÇalıĢmalarınız içinde tekrar tekrar kullanabileceğiniz
animasyonlar oluĢturmak için kullanılan sembol türüdür.
Düğme: Web sayfalarındaki butonları oluĢturmak için kullanılır.
Web sayfalarında kullanılan ve fare ile etkileĢime giren nesneler sembol olarak
hazırlandıklarında görüntü iĢleme yazılımı birçok kolaylık sağlamaktadır.
Bu faaliyet altında düğme sembolleri hakkına bilgi verilmektedir.
1.1. Düğme Düzenleyicisi (Buton Editor)
Düğme düzenleyicisi (Button Editor) bir düğmenin tüm durumlarının oluĢturulmasını
ve düğmeye etkileĢim eklenmesini sağlar. Ġstenirse düğmeler elle de oluĢturulabilir.
ARAġTIRMA
ÖĞRENME FAALĠYETĠ–1
AMAÇ
4
Görüntü iĢleme yazılımı ile bir düğme sembolü oluĢturduğunuzda bu sembolün
aĢağıdaki dört durumu otomatik olarak oluĢturulur.
Yukarı: Farenin düğme ile etkileĢime girmediği zamandaki düğmenin
görünümünü ifade eder.
Üzerinde: Farenin düğme üzerine gelindiğindeki görünümünü ifade eder.
AĢağı: Farenin düğmeyi tıklama anındaki görünümünü ifade eder.
AĢağıdayken Üzerinde: Fare tıklandıktan sonra farenin tekrar düğme üzerine
gelindiğindeki görünümünü ifade eder.
1.2. Yeni Bir Düğme Ekleme
Görüntü iĢleme yazılımı ile düğme düzenleyicisi kullanarak düğme oluĢturabilirsiniz.
Yeni bir düğme eklemek için,
“Düzenle / Ekle / Yeni Düğme (Ctrl + Shift + F8)” komutunu seçiniz.
Resim 1.1: Yeni düğme ekleme
Düğme düzenleyici ekranında düğmeye ait dört durumu düzenleyebilirsiniz.
Düğme düzenleyicisi baĢlangıçta “Yukarı” seçeneği ile açılır.
5
Resim 1.2: Düğme durumları
“Yukarı” seçeneğinde düğmenizi çizdikten ve içine yazısını yazdıktan sonra
Durum açılır menüsü içinden “Üzerinde” seçeneğini seçebilirsiniz.
Resim 1.3: Düğme durumlarını değiĢtirme
Düğmelerin durumları arasında genellikle sadece basit görsel farklılık olması
yeterli olacaktır. Bu durumda “Üzerinde” seçeneğindeyken “Yukarıda Grafiğini
Kopyala” komutunu seçerek “Yukarı” durumunda yapmıĢ olduğunuz çizimleri
“Üzerinde” durumuna kopyalayabilirsiniz. Kopyalama yapmak istemezseniz
yeni bir Ģekil de çizebilirsiniz.
6
Resim 1.4: Düğme durumuna bir önceki durumu kopyalama
Kopyalama iĢleminden sonra çizim üzerinde küçük değiĢiklik yapabilirsiniz.
Resim 1.5: Düğme durumları üzerinde değiĢiklik yapma
Diğer durumlar için 4. ve 5. adımları tekrarlayınız. Her adımda Ģekiller üzerinde
küçük değiĢiklikler yapmayı unutmayınız.
Düğme tasarımınızı bitirdikten sonra Durum açılır menüsünden “Etkin Alan”
seçeneğini kullanarak butonunuzun hangi alandaki hareketlere cevap vermesini
istediğinizi belirleyebilirsiniz. Varsayılan davranıĢ olarak düğmeler içindeki
çizimleri etkin alan olarak tanımlar.
7
Resim 1.6: Düğme etkin bölgesini ayarlama
Tüm iĢlemleri tamamladıktan sonra düğme düzenleyicisinden çıkmak için
yapmanız gereken tuvalin sol üst köĢesinde bulunan Sayfa 1 ikonuna veya sol
tarafı gösteren ok’a tıklamanızdır.
Resim 1.7:Düğme düzenleyisinden çıkma
Düğmelerin nasıl çalıĢtığını görmek için tuval üzerindeki önizleme seçeneğini
kullanabilirsiniz ya da “F12” tuĢu ile tarayıcı üzerinde önizleme yapabilirsiniz.
Resim 1.8: Düğmeyi önizeleme ile görüntüleme
8
1.3. Düğmeleri DeğiĢtirme
Düğme oluĢturulduktan sonra düğmeler tekrar düzenlenebilir. Unutmamanız gereken
düğme üzerinde değiĢiklik yaptığınız zaman sembol özelliğinden dolayı kütüphanedeki
orijinal düğme değiĢtirilir ve bu değiĢiklik her yerde aktif olur.
Düğmeleri düzenlemek için düğme üzerinde çift tıklandığı zaman düğme
düzenleyicisi açılır. Yeni düğe ekleme iĢlemindeki adımlar tekrarlanarak düğme
düzenlenebilir.
1.4. Düğmelere Ad Verme ve Bağlantı Ekleme
Görüntü iĢleme yazılımı ile oluĢturduğunuz düğmeleri otomatik olarak
isimlendirebilir, isterseniz bu ismi değiĢtirebilirsiniz. Bu isimler düğmenin baĢka
programlara yerleĢtirildiğinde ya da internette yayınlandığında kullanılan ismidir. Düğme
Özellik denetçisinden düğmenin ismini görebilir veya değiĢtirebilirsiniz.
Resim 1.9: Düğmeleri isimlendirme
Görüntü iĢleme yazılımı ile oluĢturduğunuz düğmelere özellik denetçisini kullanarak
bağlantı ekleyebilirsiniz.
Resim 1.10: Düğmelere bağlantı ekleme
Düğmeye bağlantı eklerken;
Bağ: Düğme tıklandığında açılacak olan sayfayı ifade eder.
Alt: Fare ile düğme üzerine gelince ekrana gelecek alternatif metni ifade eder.
Hedef: Tıklama sonrası açılacak sayfanın açılma Ģeklini belirler. Bu seçeneğin
alt seçenekleri;
_blank : Bağlantıyı yeni bir pencerede açar.
_self : Bağlantıyı aynı pencerede açar.
_top : Bağlantıyı aynı pencere en üsten itibaren açar.
_parent : Bağlantı, o anda açık sayfada ana sayfa varsa onun yerinde
açılır.
9
1.5. Düğmeleri Alma
Daha önceden oluĢturulmuĢ düğmeler veya düğme düzenleyicisi ile oluĢturulmuĢ
düğmeler tuval üzerine aktarılabilir.
OluĢturulan bir düğmeyi almak için,
Yeni bir belge oluĢturunuz.
“Dosya / Ġçe Aktar (Ctrl + R)” komutunu seçiniz.
Resim 1.11: Düğmeleri içe aktarma
“Ġçe Aktar” iletiĢim penceresinden düğmenin olduğu dosyayı seçiniz ve
onaylayınız.
Resim 1.12: Ġçe aktar iletiĢim peceresi
Ekrana gelen “Sayfayı Ġçe Aktar” iletiĢim penceresinde içe aktar seçeneğini
tıklayınız.
Resim 1.13: Sayfayı içe aktar iletiĢim penceresi
10
Tuval üzerinde düğmeyi eklemek istediğiniz noktayı fare ile tıklayınız. Böylece
düğme eklenmiĢ olacaktır.
1.6. Grafikleri Düğmeye DönüĢtürme
Eğer tuvalinizin üzerinde bir çizim varsa ve bunu düğmeye çevirmek istiyorsanız;
Düğmeye dönüĢtürmek istediğiniz nesneyi seçiniz.
Resim 1.14: Düğmeye dönüĢtürülecek nesne
“DeğiĢtir / Sembol / Sembole DönüĢtür (F8)” komutunu seçiniz.
Resim 1.15: Bir nesneyi sembole dönüĢtürme
“Sembole DönüĢtür” iletiĢim penceresinden Düğme seçeneğini iĢaretleyiniz,
düğmeye isim verdikten sonra onaylayınız.
Resim 1.16: Sembole dönüĢtür iletiĢim penceresi
Bu iĢlemden sonra düğme oluĢturulacaktır. Ancak unutmamanız gereken nesne
sadece düğmenin “Yukarı” durumunu ifade eder. Diğer çizimleri düğme
düzenleyicisini kullanarak tamamlamalısınız.
11
UYGULAMA FAALĠYETĠ
Düğme düzenleyicisini kullanarak bir düğme oluĢturunuz.
UYGULAMA FAUYGULAMA FAALĠYETĠ
ĠĢlem Basamakları Öneriler
Düğme düzenleyicisini açınız.
“Düzenle / Ekle / Yeni Düğme (Ctrl
+ Shift + F8)” komutunu
kullanabilirsiniz.
Yukarı seçeneğine bir yuvarlak köĢeli
dikdörtgen çizerek filtre uygulayınız.
Yuvarlak köĢeli dikdörtgen aracını
kullanabilirsiniz.
Özellik denetçisinden nesneye iç
gölge ve alt gölge ekleyebilirsiniz.
Buton metnini ekleyiniz.
Buton üzerine MEB yazısını
ekleyebilirsiniz.
Üzerinde seçeneğine bir önceki çizimi
kopyalayınız ve küçük değiĢikler yapınız.
Özellik denetçisinden üzerinde
durumunu seçebilirsiniz.
Bir önceki durumu kopyalamak için
Yukarıda grafiğini kopyala
seçeneğini kullanabilirsiniz.
Yazı rengini beyaz yapabilirsiniz.
AĢağı seçeneğine bir önceki çizimi
kopyalayınız ve küçük değiĢikler yapınız.
Özellik denetçisinden üzerinde
durumunu seçebilirsiniz.
Bir önceki durumu kopyalamak için
Üzerinde grafiğini kopyala
seçeneğini kullanabilirsiniz.
Alt gölge ve iç gölge rengini beyaz
yapabilirsiniz.
AĢağıdayken üzerinde seçeneğine bir önceki
çizimi kopyalayınız ve küçük değiĢikler
yapınız.
Özellik denetçisinden üzerinde
durumunu seçebilirsiniz.
Bir önceki durumu kopyalamak için
AĢağıda grafiğini kopyala
seçeneğini kullanabilirsiniz.
Yazıyı siyah yapabilirsiniz.
Etkin alanı düğmeye göre düzenleyiniz.
Özellik denetçisinden etkin alan
durumunu seçebilirsiniz.
Önizleme ile düğme durumlarını
gözlemleyiniz.
Tuval sol üst köĢesindeki Sayfa 1 ya
da ok’u tıklayarak düğme
düzenleyicisinden çıkabilirsiniz.
Tuval sol üst köĢesindeki önizleme
seçeneğini kullanabilirsiniz.
UYGULAMA FAALĠYETĠ
12
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. Düğme düzenleyiĢini kullanarak düğme ekleyebildiniz mi?
2. OluĢturduğunuz düğmeler üzerinde değiĢiklik yapabildiniz mi?
3. Düğmeleri adlandırabildiniz mi?
4. Düğmeleri isimlendirebildiniz mi?
5. Düğmelere bağlantı ekleyebildiniz mi?
6. Tuval üzerine dıĢardan düğme alabildiniz mi?
7. OluĢturduğunuz bir grafiği düğmeye dönüĢtürebildiniz mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme”ye geçiniz.
13
ÖLÇME VE DEĞERLENDĠRME AĢağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği iĢaretleyiniz.
1. AĢağıdakilerden hangisi görüntü iĢleme yazılımına ait bir sembol türü değildir?
A) Grafik
B) Animasyon
C) Web
D) Düğme
2. OluĢturulan düğmeler hangi panelden tekrar alınarak kullanılabilir?
A) Katmanlar
B) Durumlar
C) Stiller
D) Belge Kitaplığı
3. Düğme düzenleyicisini açmak için klavye üzerinde hangi tuĢ ya da tuĢlar kullanılır?
A) F8
B) Ctrl + F8
C) Ctrl + Shift + F8
D) Ctrl + Alt + F8
4. AĢağıdakilerden hangisi düğmenin fare ile tıklama durumunu ifade eder?
A) Yukarı
B) Üzerinde
C) AĢağı
D) AĢağıdayken üzerinde
5. OluĢturulan düğme tarayıcıda hangi tuĢ yardımıyla görüntülenebilir?
A) F1
B) F5
C) F10
D) F12
6. AĢağıdakilerden hangisi düğmeye alternatif metin eklemek için kullanılır?
A) Bağ
B) Alt
C) Hedef
D) Metin
7. AĢağıdaki hedef seçeneklerinden hangisi düğmeye tıklandığında bağlantıyı yeni
pencerede açar?
A) _blank
B) _self
C) _parent
D) _top
ÖLÇME VE DEĞERLENDĠRME
14
AĢağıdaki cümlelerin baĢında boĢ bırakılan parantezlere, cümlelerde verilen
bilgiler doğru ise D, yanlıĢ ise Y yazınız.
8. ( ) Düğme üzerinde değiĢiklik yapıldığında düğmenin kullanıldığı tüm yerlerde
değiĢiklik olur.
9. ( ) Görüntü iĢleme yazılımı düğmeleri otomatik olarak isimlendirir.
10. ( ) OluĢturulan grafikler sonradan düğmeye dönüĢtürülemez.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz.
15
ÖĞRENME FAALĠYETĠ–2
Web sayfaları tasarlarken resimler üzerinde dilimler ve etkin bölge
oluĢturabileceksiniz.
Resimleri dilimlemenin amacını araĢtırınız.
Etkin bölgelerin kullanım amacını araĢtırınız.
2. DĠLĠMLER VE ETKĠN BÖLGELER
Görüntü iĢleme yazılımı, temel özellik ve araçlarıyla tam bir web arayüzü geliĢtirme
aracıdır. Web ile ilgili birçok aracı ve özelliği barındırmaktadır. Bu özelliklerden bazıları;
dilimlemelerin yapılması, açılır menülerin eklenmesi ve tasarımların webe uygun olarak
ihraç edilmesidir.
2.1. Etkin Resim Bölgesi (Image Map) OluĢturma
Görüntü iĢleme yazılımı içerisinde etkin resim bölge eklemek için sıcak nokta aracı
kullanılır. Sıcak nokta aracı, web için hazırladığınız görsellerin belli bölümlerine ayrı ayrı
iĢlevsellik katmanızı yardımcı olur.
“Sıcak Nokta” aracı araçlar panelinde web araç setinde yer almaktadır. Sıcak nokta
aracının üç farklı çeĢidi bulunmaktadır.
Dikdörtgen sıcak nokta aracı: Dikdörtgen sıcak nokta eklemek için kullanılır.
Daire sıcak nokta aracı: Dairesel sıcak nokta eklemek için kullanılır.
Çokgen sıcak nokta aracı: Çok noktalı sıcak nokta eklemek için kullanılır.
Resim 2.1: Sıcak nokta araçları
Sıcak nokta eklemek için,
Araçlar panelinden uygun olan “Sıcak Nokta” aracını seçiniz.
ÖĞRENME FAALĠYETĠ–2
AMAÇ
ARAġTIRMA
16
Resim 2.2: Sıcak nokta aracını seçme
Uygulamak istediğiniz alanın üstünde bir Sıcak Nokta aracı nesnesi çiziniz.
Resim 2.3: Sıcak nokta ekleme
Özellik denetçisi panelinden Sıcak Nokta ile ilgili seçimleri yapınız.
Resim 2.4: Sıcak nokta özellikleri
Özellik denetçisi üzerinde bulunan seçimler Ģunlardır:
A: Sıcak noktaya ait isimlendirme yapabilirsiniz.
B: Sıcak nokta Ģeklini ve rengini seçebilirsiniz.
C: Sıcak noktaya bağlantı ekleyebilirsiniz.
D: Sıcak noktaya alternatif metin ekleyebilirsiniz.
E: Sıcak noktaya ait bağlantının açılacağı pencereyi belirleyebilirsiniz.
Önizleme yaparak sıcak noktanın çalıĢmasını görebilirsiniz. Ön izlemede sıcak
nokta rengi görünmediğini, fare ile üzerine gelindiğinde imlecin değiĢtiğini
görebilirsiniz. Sıcak noktalar bir düğme gibi çalıĢacaktır.
17
2.2. Web Katmanıyla ÇalıĢma
Sıcak noktalar ve dilimler, katmanlar panelinde web katmanına yerleĢir. Yeni bir
belge oluĢturduğunuzda web katmanı, katmanlar panelinin en üst katmanı olarak otomatik
olarak görüntü iĢleme yazılımı tarafından oluĢturulacaktır.
Resim 2.5: Web katmanı
Web katmanının diğer katmanlardan bir farkı yoktur. Diğer katmanlarda yapılan bütün
iĢlemler burada da yapılabilir. Farkı sadece sıcak nokta ve dilimlerin yerleĢim katmanı
olmasıdır.
2.3. Resmi Dilimleme
Büyük boyutlu resim ya da nesnelerin web ortamında yüklenmesi uzun zaman
alacaktır. Bu durum kullanıcılar açısından istenmeyen bir durumdur. Bu durumu ortadan
kaldırmak için dilimleme mantığını geliĢtirmiĢtir. Büyük boyutlu resim ya da nesneler
dilimlere ayrılarak daha küçük boyutlu birbirinden bağımsız resim ya da nesnelere
dönüĢtürülür. Böylece yükleme iĢlemi daha hızlı olması sağlanmıĢ olur.
Bir web sayfası hazırlanırken öncelikle sayfanın arayüzü görüntü iĢleme yazılımı ile
hazırlanır. Daha sonra bu arayüz resim dosyası HTML standartlarına uygun olarak dilimlenir
ve bir HTML sayfası içinde görüntülenebilir hâle getirilir.
Görüntü iĢleme yazılımı oldukça kullanıĢlı bir dilimleme aracına sahiptir.
ÇalıĢmalarınızı dilimlere ayırarak her bir dilime fonksiyon ekleyebilir ve bu fonksiyonlara
etkileĢimler bağlayabilirsiniz.
Her bir dilim dıĢarıya ayrı bir resim dosyası olarak aktarılmaktadır. Bu nedenle her bir
dilimin optimizasyonunu da ayrı ayrı düzenleyebilirsiniz.
ÇizmiĢ olduğunuz dilimler web katmanı içinde tutulur.
18
Görüntü iĢleme yazılımı iki farklı dilimleme aracı sahiptir. Birinci Dilim aracı, ikincisi
ise Çokgen Dilim aracıdır.
Resim 2.6: Dilim araçları
ÇalıĢmalarınızı dilimlemek için,
Araçlar panelinden dilim aracını seçiniz.
Resim 2.7: Dilim aracını seçme
Ġmleci dilimlemek istediğiniz alanda tıklayarak bir dilim çiziniz.
Resim 2.8: Dilim ekleme
Çizdiğiniz dilimin özelliklerini özellik denetçisinden ayarlayabilirsiniz.
Resim 2.9: Dilim aracı özellikleri
Özellik denetçisi üzerinde bulunan seçimler Ģunlardır:
A: Dilimi isimlendirebilirsiniz.
B: Ön Plan Görüntüsü, Arka Plan Görüntüsü veya HTML seçeneğini
seçebilirsiniz.
C: OluĢturduğunuz dilimin dosya türünü ve kalitesini belirtebilirsiniz.
D: Sıcak noktanın bağ adresini yazın.
E: HTML açıklama etiketi ekleyebilirsiniz.
F: Bağın hangi pencerede açılacağını seçebilirsiniz.
19
2.4. DönüĢümlü Resimler (Rollover) OluĢturma
DönüĢümlü resimler (Rollover), imleç üzerine getirildiğinde veya tıklandığında
görünümü tamamen değiĢen resimlerdir. Kullanıcı dönüĢümlü resim üzerine fare
göstergecini getirdiğinde ve tıkladığında yeni bir resim açılır. DönüĢümlü resimler, resimleri
saklamak için durumları kullanır.
2.5. Durum Ekleme
Durumlar dönüĢümlü resimlerin çeĢitli durumlarının saklandığı yerdir. Düğme
düzenleyici kullanıldığında düğmenin Yukarı durumu 1. duruma, üzerinde durumu 2.
duruma ve aĢağı durumu 3. duruma yerleĢir.
Durumlar paneli katmanlar paneli ile aynı grupta yer almaktadır. Durumlar paneli açık
değilse “Pencere / Durumlar (Shift + F2)” komutunu kullanabilirsiniz.
Resim 2.10: Durumlar paneli
Yeni durum eklemek için görüntü iĢleme yazılımı birden fazla seçenek sunar.
Durumlar panelinden Yeni / ÇoğaltılmıĢ durum seçeneğini kullanarak durum
ekleyebilirsiniz.
Resim 2.11: Yeni durum ekleme
20
Panel seçeneklerini kullanarak istenilen sayıda durum ekleyebilirsiniz.
Resim 2.12: Durumlar paneli seçenekleri
Panel seçenekleri kullanarak durum eklediğinizde karĢınıza “Durumlar Ekle”
iletiĢim penceresi gelecektir. Buradan istediğiniz sayıda durum ekleyebilirsiniz.
Resim 2.13: Durumlar ekle iletiĢim penceresi
2.6. DavranıĢ Ekleme
Görüntü iĢleme yazılımı sıcak noktalara bağlı olarak farklı durumlardaki dilimleri
ekrana gelmesini sağlayabilir. DavranıĢ olarak adlandırılan bu durum için sıcak nokta aracı,
dilim aracı ve durumlar paneli kullanılır.
DavranıĢ eklemek için,
DavranıĢ eklemek istediğiniz kadar durumu ekleyiniz. 1. durumun davranıĢları
görüntülemek için kullanılacağını unutmayınız.
21
Resim 2.14: DavranıĢ için durum ekleme
1. durum hariç diğer durumlara farklı resimler ya da bir resme ait farklı dilimler
ekleyiniz.
Resim 2.15: Durumlara resim ekleme
1. duruma oluĢturduğunuz diğer durumlar kadar kullanılacak nesne çiziniz.
Resim 2.16: Durumları göstermek için kullanılacak nesneler
Nesnelerin her birinin üzerine sıcak nokta ekleyiniz.
22
Resim 2.17: Nesnelere sıcak noktaların ekleme
Durumlardaki nesnelerin üzerine gelecek Ģekilde ayrı ayrı dilim ekleyiniz.
Resim 2.18: Resimlere dilim ekleme
1. sıcak noktayı seçin ve sıcak nokta tutmacından 1. dileme doğru sürükleyiniz.
Resim 2.19: Sıcak nokta ile dilimi birbirene bağlama
Ekrana gelen “Görüntüyü Takas Et” iletiĢim penceresinden dilime ait resmin
bulunduğu durumu seçiniz ve onaylayınız.
Resim 2.20: Görüntüyü takas et iletiĢim penceresi
Diğer sıcak nokta ve dilimler için son iki adımı tekrarlayınız.
23
ÇalıĢmasını önizleme yaparak kontrol ediniz.
2.7. Yeni Dilimler Ekleme
Görüntü iĢleme yazılımı bir resmi dilimlere ayırdıktan sonra bu dilimleri
değiĢtirmenize olanak sağlar. Ancak dilimleri değiĢtirebilmeniz, yeni dilim ekleyebilmeniz
veya dilimleri kaldırabilmeniz için düzenlenebilir resim formatı olan PNG dosyası ile
çalıĢmanız gerektiğini unutmayınız. Bu nedenle çalıĢmanızı PNG formatında kaydettikten
sonra dıĢa aktarma iĢlemi yapınız.
2.8. Tam Ekran Görüntüleme
Görüntü iĢleme yazılımı ile çalıĢma alanının ekran görünümünü istediğiniz Ģekilde
ayarlayabilirsiniz. Araçlar panelinde Görünüm araç setini kullanarak ekran görünümünü
değiĢtirebilirsiniz.
Resim 2.21: Görünüm araç seti
Tam ekran görüntülemeye görünüm araç setinde yer alan Tam Ekran Modu aracını
kullanarak geçebilirsiniz.
Resim 2.22: Tam ekran modunun seçilmesi
Shift tuĢuna bir kere basarak tam ekran modundan çıkabilir ve görünümü standart
ekran modu konumuna getirebilirsiniz.
24
UYGULAMA FAALĠYETĠ
AĢağıdaki uygulamayı yaparak istenilen sayı kadar davranıĢ ekleyiniz.
ĠĢlem Basamakları Öneriler
Ayrı ayrı durumlara beĢ farklı Ģekil
çiziniz.
Durum 2’den baĢlayarak çeĢitli
geometrik Ģekilleri çizebilirsiniz.
Durum 1’e çizmiĢ olduğunuz Ģekillerin
isimlerini alt alta yazınız.
ġekillerin yanına aynı sıra ile Metin
aracını kullanarak isimleri alt alta
yazabilirsiniz.
Yazıların üzerine gelecek Ģekilde sıcak
nokta ekleyiniz.
Web araç setinden dikdörtgen araç setini
kullanabilirsiniz.
UYGULAMA FAALĠYETĠ
25
ġekillerin üzerine gelecek Ģekilde dilim
ekleyiniz.
Web araç setinden dilim aracını
kullanabilirsiniz.
Sıcak noktaları Ģekil isimlerine göre
Ģekillere ait dilimlere bağlayınız.
Sıcak nokta tutmacından dilime doğru
fare ile sürükleyiniz.
Önizleme ile çalıĢmanızı test ediniz.
Önizleme tuvalin sol üst köĢesinde yer
almaktadır.
26
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. Etkin bölgeler ekleyebildiniz mi?
2. Web katmanını kullanabildiniz mi?
3. Resimleri dilimleyebildiniz mi?
4. Durum ekleyebildiniz mi?
5. DavranıĢ ekleyebildiniz mi?
6. ÇalıĢmanızı tam ekran görüntüleyebildiniz mi?
7. Tam ekrandan çıkabildiniz mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme”ye geçiniz.
27
ÖLÇME VE DEĞERLENDĠRME
AĢağıdaki cümlelerin baĢında boĢ bırakılan parantezlere, cümlelerde verilen
bilgiler doğru ise D, yanlıĢ ise Y yazınız.
1. ( ) Etkin bölge eklemek için kullanılan sıcak nokta aracı aralar panelinde görünüm
araç setinde yer alır.
2. ( ) Durumlar paneli Shift +F2 tuĢları kullanılarak aktif hâle getirilir.
3. ( ) Sıcak nokta ve dilimler web katmanı üzerinde gösterilir.
4. ( ) Sıcak noktalara bağ verilemez.
5. ( ) Bir resmi dilimlere ayırmak tarayıcıda resmin kolay Ģekilde yüklenmesine
yardımcı olur.
6. ( ) Durumlar dönüĢümlü resimlerin çeĢitli durumlarının saklandığı yerdir.
7. ( ) Araçlar panelinde görünüm araç seti ile tuval tam ekran görüntülenebilir.
8. ( ) Tam ekran modundan çıkmak için Tab tuĢu kullanılır.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz.
ÖLÇME VE DEĞERLENDĠRME
28
ÖĞRENME FAALĠYETĠ–3
Web sayfalarında kullanabileceğiniz resimleri optimizasyonunu yapabilecek ve dıĢa
aktarabileceksiniz.
Web sitelerinde sık kullanılan resim formatlarını araĢtırınız.
3. OPTĠMĠZASYON VE AKTARMA ĠġLEMĠ
Görüntü iĢleme yazılımı uygulamasındaki yeni belgeler PNG belgesi olarak
kaydedilir. PNG, “TaĢınabilir Ağ Grafiği” anlamındaki (Portable Network Graphics)’in
kısaltmasıdır ve kayıpsız sıkıĢtırarak görüntü saklamak için kullanılan bir saklama biçimidir.
Görüntü iĢleme yazılımı ile grafik oluĢturduktan sonra birçok grafik formatında
kaydedilebilir ve dıĢa aktarılabilir. Bu iĢlem sadece tek bir resim dosyası olarak
düzenlediğiniz çalıĢmalar için kullanıĢlıdır.
Web sayfaları için dıĢa aktarmada her bir dilimin özelliğini gözden geçirmelisiniz.
3.1. DıĢa Aktarma Sihirbazı (Export Wizard)
Görüntü iĢleme yazılımı, çalıĢmalarınızı dıĢa aktarmak için “DıĢa Aktarma
Sihirbazı”nı kullanır. Sihirbaz çalıĢmanızı dıĢa aktarma iĢlemi boyunca seçenekler önerir ve
en iyi dıĢa aktarma iĢlemine yardım etmek için “Görüntü Önizleme”yi gösterir.
DıĢa aktarma sihirbazını kullanarak dıĢa aktarma iĢlemi için,
ÇalıĢmanızı dıĢa aktarmadan önce son hâlini aldığından emin olunuz.
Dosyanızın PNG uzantılı hâlini “Dosya > Kaydet (Ctrl + S)” komutunu
kullanarak kayıt ediniz.
Resim 3.1: DıĢa aktarılacak çalıĢma
ÖĞRENME FAALĠYETĠ–3
AMAÇ
ARAġTIRMA
29
“Dosya > DıĢa Aktarma…” komutunu seçiniz.
Resim 3.2: DıĢa aktarma sihirbazı komutu
DıĢa Aktarma Sihirbazı ekranı görüntülenecektir. Bu pencerede “Hedef dıĢa
aktarma dosya boyutu” seçeneğini seçerek çalıĢmanızı belli bir dosya boyutuna
göre optimize edebilirsiniz. Sonraki adıma geçmek için Devam butonuna
basınız.
Resim 3.3: DıĢa aktarma sihirbazı iletiĢim penceresi 1. adım
Dosyalarınızın hangi ortamda kullanılacağını seçiniz.
Resim 3.4: DıĢa aktarma sihirbazı iletiĢim penceresi 2. adım
DıĢa aktarma sihirbazı ile görüntü iĢleme yazılımı seçtiğiniz yere göre dosya
formatını belirleyecek ve “Analiz Sonuçları” iletiĢim penceresi ekrana
gelecektir. Devam etmek için “Çık” komutunu seçiniz.
30
Resim 3.5: Analiz sonuçları iletiĢim penceresi
“Görüntü Önizleme” iletiĢim penceresi içinde çalıĢmanızın farklı dosya
formatlarındaki boyutlarını ön izleyebilir ve optimizasyon yapabilirsiniz.
Resim 3.6: Görüntü önizleme iletiĢim peceresi
Dosya sekmesine tıklayarak dosyanızın boyutları ile ilgili ayarları da
düzenleyebilirsiniz.
Resim 3.7: Görüntü önizleme iletiĢim peceresi dosya sekmesi
31
Görüntü iĢleme yazılımı içinde daha önceden kayıt edilmiĢ optimizasyon
ayarları bulunmaktadır. Bu ayarları hazır ayarları kullanmak için sağdaki
pencere içinde bulunan “KaydedilmiĢ ayarlar” açılır penceresinden
yararlanabilir ve sonuçları ön izleyebilirsiniz.
Resim 3.8: KaydedilmiĢ optimizasyon ayarlarının kullanılması
Önizleme penceresi içinde birden fazla ayarı aynı anda görüntüleyebilirsiniz.
Bunu yapmak için önizleme penceresinin sağ altında bulunan önizleme
seçeneklerine tıklayabilirsiniz.
Resim 3.9: Birden fazla ayarın önizleme ile görüntülenmesi
DıĢa aktarma iĢlemini tamamlamak için “DıĢa Aktar…” komutunu tıklayınız.
“DıĢa aktar” iletiĢim penceresinden dosya adını ve dıĢa aktarma Ģeklini
belirleyip kaydediniz.
32
Resim 3.10: DıĢa aktar iletiĢim penceresi
DıĢa aktarma sihirbazını kullanmadan “Dosya / DıĢa Aktar… (Ctrl + Shift + R)”
komutunu kullanarak “DıĢa aktar” iletiĢim penceresine ulaĢabilirsiniz.
DıĢa aktarma iĢlemi için,
ÇalıĢmanızı dıĢa aktarmadan önce son hâlini aldığından emin olunuz.
Dosyanızın PNG uzantılı hâlini Dosya > Kaydet seçeneğini seçerek kayıt
ediniz.
En ĠyileĢtir paneli içinden ihraç etmek istediğiniz resim formatını seçiniz ve
özelliklerini düzenleyiniz. En iyileĢtir paneli açık değilse “Pencere > En ĠyileĢtir
komutu (F6)” komutu ile aktif hâle getirebilirsiniz.
Resim 3.11: En iyileĢtir paneli
33
“Dosya > DıĢa Aktar…” komutunu seçiniz.
Resim 3.12: DıĢa aktar komutu
“DıĢa Aktar” iletiĢim penceresinden konum, dosya adı ve dıĢa aktar seçeneğini
belirleyip “Kaydet”e tıklayınız.
Resim 3.13: DıĢa aktarma iĢleminin tamalanması
3.2. Resmin Dosya Türünü Seçme
Görüntü iĢleme yazılımı DıĢa Aktarma sihirbazı ile analiz iĢlemini otomatik olarak
yapar. Ġsterseniz ayarları kendiniz de yapabilirsiniz.
Doğru resim türünü seçmek optimizasyon süreci için çok önemlidir. WEB grafikleri
için popüler dosya türleri GIF ve JPEG’dir. GIF resimleri genellikle iki renkli ve düz renkli
resimler için kullanılır. GIF resimleri saydam alanlar içerebilir ve animasyon dosyaları için
kullanılabilir. GIF resimlerinin dezavantajı bunların 256 renkle kısıtlanmıĢ olmasıdır. JPEG
dosya türü genellikle fotoğraf türündeki resimler ve çok renkli resimler için kullanılır.
34
Dosya veya dilimleri aktarmak için biçimlendirme seçenekleri ayarlamak üzere En
ĠyileĢtir paneli kullanılır. Optimizasyon süreci daha iyi kontrol edebilmek için her dilimin
optimizasyonu ayarlanabilir.
En ĠyileĢtir panelinde dıĢa aktar dosya formatı açılır menüsünde istenen dosya türünü
seçebilirsiniz.
Resim 3.14: En iyileĢtir panelinden dıĢa aktarılacak dosya formatının seçilmesi
3.3. Önizleme Düğmesi
Görüntü iĢleme yazılımı çalıĢmalarınızı dıĢa aktarmadan önce önizleme ile
çalıĢmanızın durumunu görebilmenize imkân sağlar. Farklı ayarları görmek için çalıĢmanız
iki veya dört önizleme alanına bölünebilir. Aynı zamanda her önizleme için yaklaĢık
yükleme sürelerini ve dosya boyutunu görüntüler.
ÇalıĢma alanında sayfanın önizlemesini görmek için tuval sol üst köĢesinde yer alan
“Önizleme” komutunu kullanabilirsiniz.
Resim 3.15: Önizleme komutu
Sayfayı iki ön izlemeli görünüme ayırmak için “2 Yukarı” komutu, dört ön izlemeli
görünüme ayırmak için “4 Yukarı” komutunu kullanabilirsiniz.
Resim 3.16: 2 Yukarı ve 4 Yukarı önizleme
Normal görünüme geçmek için “Orijinal” komutunu kullanabilirsiniz. ÇalıĢmalarınız
üzerinde düzenlemelerinizi orijinal görünümünde yapabilirsiniz. Önizleme yapılırken
düzenleme yapamazsınız.
2 Yukarı veya 4 Yukarı önizleme görünümündeyken seçilen görünüm etrafında
çerçeve belirir. Seçilen önizleme En ĠyileĢtir paneli kullanılarak yapılan değiĢiklikler sayfaya
yansır. Diğer görünümler için farklı formatlar seçebilirsiniz. Karar verdiğiniz görünümü
seçip orijinal görünüme geçebilirsiniz.
35
3.4. Mevcut Optimizasyon Ön Ayarları
DıĢa aktarma iĢlemine dosya türünü belirleyebilmeniz için görüntü iĢleme yazılımı En
ĠyileĢtir panelinde dıĢa aktar dosya formatı açılır menüsünde ön ayar yapabilmenize imkân
sağlar.
Resim 3.17: Ön ayar yapmak için En iyileĢtir panelinin kullanılması
Bir dilim söz konusu ise Özellik denetçisinden “Dilim DıĢa Aktarma Ayarları”
komutu ile ön ayar yapabilirsiniz.
Resim 3.18: Dilim Özellik denetçisinden ön ayar yapılması
3.5. Aktarma ĠĢlemleri
3.5.1. JPEG Resimlerini Gönderme
Web sayfalarında en çok kullanılan resim formatı özelliğine sahip olan JPEG
formatını kullanarak dıĢa aktara iĢlemi yapmak için,
En ĠyileĢtir panelinden DıĢa aktar dosya formatını JPEG olarak seçiniz.
Resim 3.19: JPEG formatı ile dıĢa aktarma
36
Görüntü iĢleme yazılımı JPEG formatı ile ilgili iki tane dıĢa aktarma kaydı
verir. Ġsterseniz kendi ayarlarınız da yapabilirsiniz.
Kalite değeri sıkıĢtırma ve renk oranlarını ayarlar. Kalite değerinin yüksek
olması resmin kalitesini de artırırken sıkıĢtırmanın azalmasından dolayı dosya
boyutunun büyümesine sebep olacaktır.
Resim 3.20: JPEG kalitesinin belirlenmesi
DüzgünleĢtirme değeri ise aktarma sırasında resmin bulanıklık oranını belirler.
Oranın artması bulanıklığı artıracaktır.
Resim 3.21: JPEG düzgünleĢtirme oranının belirlenmesi
3.5.2. Tarayıcıda Önizleme
Görüntü iĢleme yazılımı tarayıcı üzerinde çalıĢmalarınızın nasıl görüneceğini önceden
incelemenize imkân sağlar.
Tarayıcıda önizleme yapmak için,
“Dosya / Tarayıcıda Önizleme / iexplore.exe içinde önizleme (F12)” komutunu
seçin.
Resim 3.22: Tarayıcıda önizleme
37
“Ana Tarayıcıyı Ayarla…” komutu kullanılarak varsayılan tarayıcınızı
değiĢtirebilirsiniz.
Resim 3.23: Tarayıcının ayarlanması
3.5.3. HTML Olarak DıĢa Aktarma
Görüntü iĢleme yazılımı ile yapmıĢ olduğunuz tasarımı HTML düzeninde dıĢarı
aktarabilirsiniz. Bu durumda Görüntü iĢleme yazılımı dilimlediğiniz resimleri ayrı resimler
olarak kaydedecek, gerekli javaScript kodlarını ekleyecek ve sayfalarınızı bir arada tutacak
tablo yapısını oluĢturacaktır.
Sayfalarınızı HTML olarak dıĢa aktarmak için,
Sayfa içinde dilimlerinizi hazırlayınız ve gerekli bağları veriniz.
“Dosya / DıĢa Aktar… (Ctrl + Shift + R)” komutunu seçiniz.
Resim 3.24: DıĢa aktar iletiĢim penceresi
“DıĢa Aktar” iletiĢim penceresi içinde “Görüntüleri alt klasöre koy” seçeneğini
seçiniz ve “Gözat…” komutunu seçerek varsayılan değer olan “görüntüler”
klasörünü değiĢtirin. Dosya ve klasöre eriĢim adlarında Ġngilizce karakterler
kullanmanız daha sorunsuz çalıĢmasına yardımcı olacaktır.
38
Resim 3.25: DıĢa aktar iletiĢim penceresi görüntüler için alt klasörün seçimi
“Seçenekler…” komutu dıĢa aktaracağınız tablonun özelliklerini belirlemenize
yardımcı olur.
Resim 3.26: DıĢa aktarılacak tablonunun seçeneklerinin ayarlanması
39
“Genel” sekmesi altında HTML stilini istediğiniz uygulamaya uygun
standartlarda çıkartabileceğiniz bir açılır menü bulunmaktadır.
Resim 3.27: HTML ayarı genel sekmesi
“Tablo” sekmesi, HTML dosyaları oluĢturulurken tablo yerleĢimlerinin
nasıl olacağını belirlemenizi sağlar.
Resim 3.28: HTML ayarı tablo sekmesi
Belgeye özgü sekmesi altında dosya isimlendirme kurallarını
belirleyebilirsiniz.
Resim 3.29: HTML ayarı belgeye özgü sekmesi
“Tamam” komutunu seçerek HTML ayarı iletiĢim penceresini kapatınız.
“DıĢa Aktar” iletiĢim penceresinden “Kaydet” komutunu seçerek dıĢa aktarma
iĢlemini tamamlayınız.
40
3.6. Slayt Gösterisi Ġle Resimlerin DıĢa Aktarılması
Görüntü iĢleme yazılımı, web sayfanızda fotoğraf albümü oluĢturmanıza imkân
sağlayan slayt gösterisi özelliğine sahiptir. Bu iĢlem için herhangi bir çalıĢma oluĢturmanıza
gerek yoktur. Sadece slayt gösterisinde kullanacağınız resimleri ve klasörleri düzenlemeniz
yeterli olacaktır.
Resimlerinizi slayt gösteri olarak dıĢa aktarmak için,
“Komutlar / Slayt gösterisi oluĢtur” komutunu seçin.
Resim 3.30: Slayt gösterisi oluĢtur komutu
Ekrana “slayt gösterisi oluĢtur” iletiĢim penceresi açılacaktır.
BaĢlık seçeneği ile slayt gösterinize baĢlık ekleyiniz.
Resim 3.31: Slayt gösterisine baĢlık eklenmesi
Açıklama seçeneği ile isteğinize bağlı olarak slayt gösterinize açıklayıcı
metin ekleyiniz.
41
Resim 3.32: Slayt gösterisine açıklama eklenmesi
Oynatıcı seçeneği ile slayt gösterisinin görünümünü seçin. Önizlemeden
kontrol sağlayabilirsiniz.
Resim 3.33: Slayt gösterisi oynatıcının seçilmesi
“Slayt Gösterisini Otomatik BaĢlat” seçeneğini iĢaretlerseniz slayt
gösterisi görüntülendiğinde otomatik olarak baĢlayacaktır.
Resim 3.34: Slayt gösterisinin otomatik olarak baĢlatılması
“Görüntüleri tıklamaya izin ver” seçeneği ile resimlerin tıklanmasına izin
verebilirsiniz.
Resim 3.35: Slayt gösterisinde resimlerin tıklanmasına izin verilmesi
Resimleri eklemek için önceden klasörler hâlinde hazırlamıĢ olmanız
gerekir. EklemiĢ olduğunuz her klasör bir albüm olarak nitelendirilir.
Albümler “Slayt gösterisi oluĢtur” iletiĢim penceresi sol üst köĢesinde yer
alır. Hemen altında ise seçilmiĢ olan albüm içindeki resimleri
görebilirsiniz.
Albüm eklemek için “Albüm Ekle” komutunu kullanınız.
42
Resim 3.36: Albüm ekle komutu
o 1: Albüm ekleme yapabilirsiniz.
o 2: Eklenen albümü albüm listesinden silebilirsiniz.
o 3: Albümlerin listedeki sırasını değiĢtirebilirsiniz.
“ĠĢlenecek Dosyalar” iletiĢim penceresinden “Gözat” komutunu seçiniz.
Resim 3.37: Albümün seçilmesi
Albüm klasörü içindeki bütün resimleri seçiniz ve “Bitti” komutunu
tıklayınız.
Resim 3.38: Albüme eklenecek resimlerin seçilmesi
Elediğiniz albümler, albüm listesine yerleĢecektir. Albüm ismini
tıkladığınız zaman albüm içeriğindeki resimler de hemen altında
listelenecektir.
Resim 3.39: Albüm listesi
43
“Albüm Özellikleri” sekmesini tıklayınız. Burada albüme açıklama arka
plan resmi ya da küçük resim atabilirsiniz. Zorunlu değildir.
“Resim Yazıları” sekmesini tıklayınız. Ġsterseniz albüm içindeki
resimlere açıklama ekleyebilirsiniz. Zorunlu değildir.
“Filtreler” sekmesini tıklayınız. Ġsterseniz albümlere filtre
uygulayabilirsiniz. Zorunlu değildir.
Slayt Gösterisi sekmesini tıklayınız.
Resim 3.40: Slayt gösterisi özelliklerinin belirlenmesi
o Aralık değerine resimlerin geçiĢ sürelerini düĢünerek bir değer
atayınız.
o Resimler arasında geçiĢi ayarlamak için listeden bir geçiĢ türü
seçiniz.
o Slayt sırasını belirleyiniz.
“DıĢa Aktarma Seçenekleri” sekmesini tıklayınız. Slayt gösterisinin
oluĢturulacağı yeri belirleyiniz. Diğer ayarlar görüntü iĢleme yazılımı
tarafından otomatik yapılacaktır.
Resim 3.41: Slayt gösterisi dıĢa aktarma seçeneklerinin belirlenmesi
44
Son olarak sol altta yer alan “Slayt Gösterisi OluĢtur” komutuna
tıklayınız. görüntü iĢleme yazılımı yapılan ayarlara göre slayt gösterisini
oluĢturacaktır. Ġsterseniz “Tarayıcıda slayt gösterisini baĢlat” seçeneği ile
önizleme yapabilirsiniz.
Resim 3.42: Slayt gösterisinin sonlandırılması
Slayt gösterisini tarayıcıda görüntüleyiniz.
Resim 3.43: TamamlanmıĢ slayt gösterisi
45
UYGULAMA FAALĠYETĠ
Görüntü iĢleme yazılımı ile hazırladığınız çalıĢmanızı aĢağıdaki uygulama ile HTML
ve Görüntüler olarak aktarınız.
ĠĢlem Basamakları Öneriler
Sayfa içine okul web sitesinde
kullanmak üzere dört tane metin
ekleyiniz.
Metin aracını kullanabilirsiniz.
Metinlerin üzerine etkin bölge ekleyiniz.
Sıcak Nokta aracını kullanabilirsiniz.
Etkin bölgelere uygun bağlantılar
ekleyiniz.
Sıcak Nokta aracı Özellik denetçisini
kullanabilirsiniz.
Önizleme ile çalıĢmanızı kontrol ediniz.
“Önizleme” komutunu tuvalin sol üst
köĢesinde bulabilirsiniz.
Tarayıcı ile çalıĢmanızı kontrol ediniz. F12 tuĢu ile tarayıcıda önizleme
yapabilirsiniz.
“Dosya / DıĢa Aktar… (Ctrl + Shift +
R)” komutunu seçiniz.
DıĢa aktar penceresinde,
Dosya adını verebilirsiniz.
DıĢa aktar seçeneğinde HTML ve
“Görüntüler”i seçebilirsiniz.
“DıĢa Aktar” iletiĢim penceresinden
“Kaydet” komutunu seçerek dıĢa
aktarma iĢlemini tamamlayınız.
Kayıt yeri olarak site kök klasöründe
images klasörünü seçebilirsiniz.
UYGULAMA FAALĠYETĠ
46
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. DıĢa aktarma sihirbazını kullanabildiniz mi?
2. DıĢa aktarılacak dosya türünü seçebildiniz mi?
3. ÇalıĢmalarınızı önizleme yapabildiniz mi?
4. Tarayıcıda önizleme yapabildiniz mi?
5. HTML olarak dıĢa aktarma yapabildiniz mi?
6. Slayt gösterisi ile resimleri dıĢa aktarabildiniz mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme”ye geçiniz.
47
ÖLÇME VE DEĞERLENDĠRME AĢağıdaki cümlelerin baĢında boĢ bırakılan parantezlere, cümlelerde verilen
bilgiler doğru ise D, yanlıĢ ise Y yazınız.
1. ( ) DıĢa aktarma sihirbazı ile dıĢa aktarılacak dosya boyutu ayarlanabilir.
2. ( ) Görüntü iĢleme yazılımı dıĢa aktarma sihirbazı analizi sonucunda önerilen
formatları kullanıcıya önerir.
3. ( ) DıĢa aktarılacak dosya formatı stiller panelinden seçilir.
4. ( ) Görüntü iĢleme yazılımı dıĢa aktarılacak birden fazla formatını aynı anda ekranda
önizleme ile gösterebilir.
5. ( ) Önizleme ekranında düzenleme yapılabilir.
6. ( ) Tarayıcıda önizleme için F10 tuĢu kullanılır.
7. ( ) Görüntü iĢleme yazılımı çalıĢmalarınızı HTML olarak dıĢa aktarabilir.
8. ( ) Görüntü iĢleme yazılımı aynı slayt içinde sadece bir klasörü slayt gösterisi olarak
dıĢa aktarabilir.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz.
ÖLÇME VE DEĞERLENDĠRME
48
ÖĞRENME FAALĠYETĠ–4
Web sayfalarında kullanmak için hareketli resimler oluĢturabileceksiniz.
Bir web sitesinde hareketli resimlerin kullanılabileceği alanları araĢtırınız.
4. GIF ANĠMASYONLARI
Animasyon sembolleri olarak adlandırılan nesnelere özellikler atayarak animasyon
oluĢturabilirsiniz. Bir sembolün animasyonu, animasyonda görüntü ve nesneler içeren
durumlara bölünür. Bir animasyonda birden fazla sembol bulunabilir ve her sembolün farklı
bir eylemi olabilir. Farklı semboller, farklı sayıda durum içerebilir. Tüm sembollerin
eylemleri tamamlandığında animasyon sona erer.
Tek bir dosyada birden çok sembolünüz olabileceği için farklı eylem türlerinin aynı
anda ortaya çıktığı karmaĢık bir animasyon oluĢturabilirsiniz.
Dosyanızın nasıl oluĢturulduğunu kontrol etmek için En ĠyileĢtir panelinde en
iyileĢtirme ve dıĢa aktarma ayarlarını değiĢtirebilirsiniz.
Çok kullanılasına rağmen animasyonlu GIF resimleri mükemmel değildir. GIF
dosyaları olduğu için 256 renkle sınırlandırılmıĢlardır. Eksiklerine rağmen hareketli GIF
dosyası basit WEB animasyonu için iyi bir ortamdır, hiçbir eklenti ve sunucu geliĢmesine
gerek duymaz veya çeĢitli tarayıcılarda uyumsuzluk sorunları yoktur.
4.1. Animasyon OluĢturma
Animasyonlu GIF oluĢtururken görüntü iĢleme yazılımı durumları kullanır. Durumlar
ekrana sıra ile getirilerek hareketlendirme sağlanır. Durumlar panelinde görüntülenen
durumlar oluĢturarak animasyonlar hazırlayabilirsiniz. Burada, durumları yeniden
adlandırabilir, düzenleyebilir, animasyon zamanlamasını elle ayarlayabilir ve nesneleri bir
durumdan baĢka bir kareye taĢıyabilirsiniz.
Her durumun ayrıca ilgili özellikleri vardır. Durum gecikmesini ayarlayarak veya bir
durumu gizleyerek animasyonu düzenlediğinizde nasıl göründüğünü görebilirsiniz.
AMAÇ
ARAġTIRMA
ÖĞRENME FAALĠYETĠ–4
49
Resimlere durumlara dağıtırken iki farklı yol kullanabilirsiniz:
Birinci yol farklı görüntü sayısı kadar durum ekler, her bir duruma ayrı ayrı
görüntüler oluĢturursunuz.
Ġkinci yol olarak görüntülerin hepsini oluĢturur, bütün görüntüleri seçtikten
sonra durumlar panelinden “Durumlara Dağıt” komutunu kullanırsınız.
Durum ekleyerek animasyonlu GIF oluĢturmak için,
Animasyonlu GIF’te farklı görüntü sayısı kadar durum ekleyiniz.
Resim 4.1: Animasyonlu GIF için durumların eklenmesi
Her duruma farklı bir görüntü yerleĢtiriniz.
Tuvalin altında yer alan “Oynat / Durdur” komutu ile hareketli resmi
görüntüleyiniz.
Resim 4.2: Hareketli resimlerin görüntülenmesi
Durumların ekranda kalma sürelerini değiĢtirmek için durum isminin hemen
yanındaki değeri çift tıklayarak değiĢtiriniz. Bu değerin artması durumun
ekranda kalma süresini de artırır.
Resim 4.3: Durum ekranda kalma süresi
Resmi kaydederken dosya formatını Animasyonlu GIF (*.gif) olarak seçiniz ve
dosyanızı kaydediniz.
“Durumlara Dağıt” komutu ile GIF oluĢturmak için,
Tuval üzerine sıra ile gelecek nesneleri çiziniz.
Resim 4.4: Hareket edecek nesneler
50
Nesnelerin tamamını seçiniz ve durumlar panelinden “Durumlara Dağıt”
komutunu seçiniz.
Resim 4.5: Durumlara dağıt komutu
Veya durumlar paneli seçeneklerinden “Durumlara Dağıt” komutunu seçiniz.
Resim 4.6: Durumlar paneli seçenekleri
Görüntü iĢleme yazılımı, resimleri sırası ile durumlara dağıtacaktır. Ġsterseniz
durumları ayrı ayrı düzenleyebilirsiniz.
Tuvalin altında yer alan “Oynat / Durdur” komutu ile animasyonu
görüntüleyiniz.
Durumların ekranda kalma sürelerini değiĢtirmek için durum isminin hemen
yanındaki değeri çift tıklayarak değiĢtiriniz. Bu değerin artması durumun
ekranda kalma süresini de artırır.
Resmi kaydederken dosya formatını Animasyonlu GIF (*.gif) olarak seçiniz ve
dosyanızı kaydediniz.
4.2. Soğan Zarı (Onion Skin) Kullanma
Soğan zarı, seçilen durumdan önce ve sonra, durumların içeriklerini görüntülemek için
kullanılan bir tekniktir. Nesneleri, durumlar arasında ileriye ve geriye geçiĢ yapmadan
canlandırabilirsiniz.
51
Soğan zarını açtığınızda önceki ve sonraki durumdaki nesneler soluklaĢtırılır. Böylece
onları geçerli durumdaki nesnelerden ayırabilirsiniz. Varsayılan değer olarak “Çok Durumlu
Düzenleme” etkinleĢtirilir. Böylece geçerli durumu bırakmadan diğer durumlardaki
soluklaĢtırılmıĢ nesneleri seçebilir ve düzenleyebilirsiniz.
Resim 4.7: Soğan zarı kullanarak durumların görüntülenmesi
“Soğan Zarı” komutuna “Durumlar” panelinden ulaĢabilirsiniz.
Resim 4.8: Soğan zarı komutu
“Soğan Zarı” komutu kullanılarak gösterilen durumlar, panelde iĢaretçi yardımıyla
gösterilir. Ġsterseniz fare yardımıyla bu alandan da gösterilen durumları belirleyebilirsiniz.
Resim 4.9: Soğan zarı ile gösterilen durumlar
“Soğan Zarı” komutu altında Ģu komutlar yer almaktadır:
Soğan Zarı Yok: Bu komut seçili ise sadece seçili durum tuval üzerinde
gösterilir.
52
Sonraki Durumu Göster: Seçili durum bir sonraki durumla birlikte tuval
üzerinde gösterilir.
Önce ve Sonra: Seçili durum önceki ve sonraki durumla birlikte görüntülenir.
Tüm Durumları Göster: Hareketli resme ait tüm durumlar görüntülenir.
Resim 4.10: Soğan zarı komutu alt komutları
4.3. Katman PaylaĢma
Animasyon oluĢtururken durumlar sıra ile ekrana getirilerek hareketlendirme
oluĢturulur. Ancak tüm durumlarda değiĢikliğe uğramayan ortak nesneler olabilir. Bu
nesneleri tüm durumlarda göstermek görüntü iĢleme yazılımı katman paylaĢımını
sağlamaktadır.
Katman paylaĢımını kullanmak için,
ÇalıĢmanıza yeni bir katman ekleyiniz. Bu katman tüm durumlarda
görüntülenecek nesneler için kullanılacaktır.
Resim 4.11:PaylaĢılan katmanın eklenmesi
Tüm durumlarda görüntülenmesini istediğiniz nesneleri bu katmana çiziniz.
53
4.12: PaylaĢılan katmana nesnelerin eklenmesi
PaylaĢılacak katman seçili durumda iken “Katmanlar” paneli özellikler
menüsünden “Katmanı Durumlara PaylaĢ” komutunu seçiniz.
Resim 4.13: Katmanlar paneli özellikleri
PaylaĢılan katmandaki nesneler bütün durumlarda gösterilecektir. Hareket
edecek nesneleri diğer katmanlarda oluĢturmayı unutmayınız.
4.4. Animasyon Sembolleri
Animasyon sembolleri animasyonunuzun aktörleridir. Bir animasyon sembolü,
oluĢturduğunuz ya da içe aktardığınız herhangi bir nesne olabilir ve bir dosyada birçok
sembol bulundurabilirsiniz. Her sembolün kendi özellikleri vardır ve bağımsız davranır. Bu
yüzden diğerleri solarken veya daralırken ekran boyunca taĢınan semboller oluĢturabilirsiniz.
Animasyonunuzun her boyutu için sembol gerekmez. Ancak çoklu durumlar görülen
grafikler için sembol kullanmak dosya boyutunu küçültür.
“Canlandır” iletiĢim penceresi veya Özellik denetçisini kullanarak istediğiniz zaman
animasyon sembol özelliklerini değiĢtirebilirsiniz. Ayrıca belgenin geri kalanını etkilemeden
sembol resmini düzenleyebilirsiniz.
Animasyon sembolleri kitaplığa otomatik olarak yerleĢtirildiğinden diğer
animasyonları oluĢturmak için bunları yeniden kullanabilirsiniz.
54
Animasyon sembolü oluĢturmak için,
Tuval üzerine bir nesne çiziniz.
Resim 4.14: Animasyon eklenecek nesne
“DeğiĢtir / Animasyon / Seçimi Canlandır… (Alt + Shift + F8)” komutunu
seçiniz.
Resim 4.15: Seçimi canlandır komutu
Ekrana gelen “Canlandır” iletiĢim penceresinden gerekli ayarlamaları yapınız.
Resim 4.16: Canlandır iletiĢim penceresi
A: Animasyondaki durum sayısı ifade eder. Kaydırıcıyla 250'ye kadar
durum sayısını belirleyebilirsiniz veya Durumlar metin kutusuna herhangi
bir sayı girebilirsiniz. Varsayılan değer 5’tir.
B: Animasyonun hareket mesafesini ayarlayabilirsiniz. Piksel cinsinden
nesnenin taĢındığı uzaklığıdır. Varsayılan 72'dir ancak bir sınırı yoktur.
C: 360º arasında derece cinsinden nesnenin taĢındığı yönü ifade eder.
Nesnenin animasyon tutamaçlarını sürükleyerek de taĢıma ve yön
değerlerini değiĢtirebilirsiniz.
55
D: BaĢlangıçtan bitiĢe kadar yüzde olarak sembol boyutundaki
değiĢikliği ifade eder. Varsayılan % 100'dür ancak bir sınırı yoktur. Bir
nesneyi 0’dan % 100’e ölçeklemek için orijinal nesne küçük olmalıdır.
Vektör nesneleri için önerilir.
E: BaĢlangıçtan bitiĢe kadar yavaĢça görünüp kaybolma derecesidir.
Değerler 0 ile 100 arasındadır ve varsayılan değer % 100’dür. YavaĢça
görünüp/kaybolma oluĢturmak için aynı sembolün iki örneği gerekir.
F: BaĢlangıçtan bitiĢe kadar dönüĢ derecesidir. Değerler 0-360º yön
aralığındadır. Birden fazla dönüĢ için daha yüksek değerler girebilirsiniz.
Varsayılan değer 0ºdir. DönüĢ yönünü Saat yönünde (SY) veya saatin
aksi yönünde (SAY) olarak belirleyebilirsiniz.
“Canlandır” iletiĢim penceresinden ayarları yaptıktan sonra “Tamam”ı tıklayın.
Resim 4.17: Animasyon uygulanmıĢ nesne
“Oynat / Durdur” komutu ile animasyonu çalıĢtırın.
Önemli bir özellik durum sayısıdır. Bu özelliği ayarladığınızda görüntü iĢleme
yazılımı eylemi tamamlamak için gereken durum sayısını otomatik olarak belgeye ekler.
Sembol, animasyonda geçerli olarak bulunan durumlardan daha fazlasını gerektiriyorsa
görüntü iĢleme yazılımı ilave durum eklemek isteyip istemediğinizi sorar.
“Canlandır” iletiĢim kutusu veya özellik denetçisini kullanarak animasyon
özelliklerini değiĢtirebilirsiniz.
4.5. Oynatımı Kontrol Etme
Animasyon oluĢturulduktan sonra durum gecikmesini ayarlayarak animasyon hızını
belirleyebilirsiniz. Durum gecikmesi her karenin görüntülenme süresini belirler. Durum
gecikmesi saniyenin yüzde biri cinsinden birim ile belirtilir. 100 değeri 1 saniyeyi ifade eder.
Animasyon oluĢturduğunuzda durum gecikmesi varsayılan değeri 7’dir. Bu değerin
artırılması durumun ekranda kalma süresini de artırır.
56
Durum gecikmesini ayarlamak için,
DeğiĢtirilecek durumun durum gecikmesi üzerinde çift tıklayınız. Birden fazla
durum gecikmesini değiĢtirmek isterseniz durumları seçip durum gecikmesi
üzerinde çift tıklayınız.
Resim 4.18: Durum gecikmesinin ayarlanması
Durum gecikmesi değerini değiĢtiriniz.
Resim 4.19: Durum gecikmesinin değiĢtirilmesi
Animasyon oluĢturduktan sonra isterseniz döngü değerini değiĢtirerek animasyonun
sürekli veya belli bir sayıda çalıĢmasını sağlayabilirsiniz.
Animasyon döngüsünü ayarlamak için,
Durumlar panelinden “GIF Animasyon Döngüsü” komutunu tıklayınız.
Resim 4.20: Gif animasyon döngüsü komutu
57
Açılan iletiĢim penceresinden döngü sayısını ya da her zaman seçeneği ile
animasyonun döngü sayısını belirleyiniz.
Resim 4.21: Gif animasyon döngüsü iletiĢim penceresi
4.6. Bir GIF Dosyasına Aktarma
Animasyon oluĢturulduktan sonra animasyonun GIF dosyası olarak dıĢa aktarılması
gerekir. Animasyon içindeki durum sayısı artıkça dosya boyutu da buna bağlı olarak
artacaktır.
Animasyonu dıĢa aktarmak için,
Animasyonu tamamlayınız.
En iyileĢtir panelinden dıĢa aktar dosya formatı olarak Animasyonlu GIF
formatını seçiniz.
Resim 4.22: En iyileĢtir paneli
“Dosya / DıĢa aktar… (Ctrl + Shift + R)” komutunu seçiniz.
“DıĢa Aktar” iletiĢim penceresinden dosya adını giriniz ve “DıĢa Aktar”
seçeneğinden “Sadece Görüntüler”i seçiniz.
58
Resim 4.23: DıĢa aktar iletiĢim penceresi
Dosya kayıt yerini seçiniz ve “Kaydet” komutuna tıklayınız.
4.7. Aktarma Önizlemesini Kullanma
Animasyonlu GIF formatı için varsayılan ayarlar animasyonların çoğu için
kullanılabilir. Ayarları geliĢtirmek için dıĢa aktarma iĢlemi yapılmadan önce görüntü
“Önizleme” komutunu kullanabilirsiniz.
Görüntü önizlemeyi kullanmak için,
Animasyonu tamamlayınız.
“Dosya / Görüntü Önizleme… (Ctrl + Shift + X)” komutunu seçiniz.
“Görüntü Önizleme” iletiĢim penceresinden animasyon sekmesini seçiniz.
Resim 4.24: Görüntü önizleme iletiĢim penceresi
59
“Görüntü Önizleme” iletiĢim penceresinden değiĢiklik yapabilirsiniz.
DeğiĢiklikleri bitirdikten sonra “DıĢa Aktar…” komutunu seçiniz.
“DıĢa Aktar” iletiĢim penceresinden dıĢa aktarmayı tamamlayın.
4.8. Ara Kareler Doldurmak (Tweening)
Görüntü iĢleme yazılımı ara kareleri doldurma özelliği ile bir animasyona ait ilk ve
son görüntüyü oluĢturduktan sonra ilk görüntüden ikinci görüntüye geçiĢ aĢamasında ara
görüntüleri otomatik olarak oluĢturur. Ancak bu durum için bir sınırlama vardır. Ġlk
görüntünün sembol olması, ikinci görüntünün ise o sembolün kopyasının olması gereklidir.
Ara kareleri doldur komutu için,
Tuval üzerine bir nesne çiziniz.
Resim 4.25: Ara kareleri doldur komutu ile kullanılacak nesne
“DeğiĢtir / Sembol / Sembole DönüĢtür… (F8)” komutu ile nesneyi sembole
dönüĢtürünüz. Sembol türü olarak Grafik türünü seçiniz.
Sembolü çoğaltma metotlarından birini kullanarak bir kopyasını tuval üzerine
alınız.
Resim 4.26: Sembolün kopyasının alınması
Ġkinci Ģekilde değiĢiklik yapınız.
Resim 4.27: Ġkinci sembolün değiĢtirilmesi
60
“DeğiĢtir / Sembol / Örneklerin Arasını Doldur… (Ctrl + Alt + Shift + T)”
komutunu seçiniz.
Resim 4.28: Örneklerin arasını doldur komutu
“Örneklerin Arasını Doldur” iletiĢim penceresinden durum sayısını giriniz ve
onaylayınız.
Resim 4.29: Örneklerin arasını doldur iletiĢim penceresi
Önizleme ile animasyonu görüntüleyiniz.
4.9. Efektlere Dolgu Uygulama
Efektlere dolgu uygulamak için,
Tuval üzerine yeni bir nesne çiziniz.
Resim 4.30: Filtre uygulanacak nesne
“DeğiĢtir / Sembol / Sembole DönüĢtür (F8)” komutunu kullanarak nesneyi
grafik sembole dönüĢtürünüz.
Sembole filtre uygulayınız.
Resim 4.31: Filtre uygulanmıĢ nesne
61
Sembole uygulanan filtrelerin opaklık değerlerini % 0 değeri olarak ayarlayınız.
Resim 4.32: Filtre opaklık değerinin değiĢtirilmesi
Sembolü tuval üzerinde kopyasını alınız ve filtre değerlerini tekrar ayarlayınız.
Resim 4.33: Sembolün çoğaltılması
Ġki sembolü seçtikten sonra “DeğiĢtir / Sembol / Örneklerin Arasını Doldur
(Ctrl + Alt + Shif + T)”komutunu seçiniz.
Durum sayısını giriniz ve “Durumlara dağıt”ı iĢaretleyerek onaylayınız.
Animasyonunuzu önizleme ile görüntüleyiniz.
62
UYGULAMA FAALĠYETĠ
Gif animasyonları ile ilgili aĢağıdaki uygulamayı yapınız.
ĠĢlem Basamakları Öneriler
Boyutları 350x75 px olan yeni bir belge açınız.
“Dosya / Yeni (Ctrl + N)”
komutunu kullanabilirsiniz.
Boyutları “Yeni Belge” iletiĢim
penceresinden ayarlayabilirsiniz.
Yeni bir katman ekleyiniz ve adını meb olarak
değiĢtiriniz.
Yeni katman eklemek için
“Katmanlar” panelini
kullanabilirsiniz.
Katman adını değiĢtirmek için
katman adını çift tıklayabilirsiniz.
Meb katmanına Milli Eğitim Bakanlığı yazan
bir metin ekleyiniz.
Meb katmanı seçili iken Metin
aracı ile tuval üzerine metin
ekleyebilirsiniz.
Katman 1 ismini hareket olarak değiĢtiriniz.
Katman adını değiĢtirmek için
katman adını çift tıklayabilirsiniz.
UYGULAMA FAALĠYETĠ
63
Hareket katmanına 5 tane durum ekleyiniz.
Hareket katmanı seçili iken
“Durumlar” panelinden yeni
durum komutu ile durum
ekleyebilirsiniz.
Durum gecikmesini 0,5 saniye olarak
değiĢtiriniz.
Durum gecikmesi üzerine çift
tıklayarak durum gecikmesi
değerini değiĢtirebilirsiniz.
Durum gecikmesi değerinin 0,5
saniye olması için 50 değerini
girebilirsiniz.
Durumların her birine tuval üzerine farklı yere
gelecek Ģekilde bir nesne çiziniz.
Durumları tek tek seçerek tuval
üzerine nesne çizebilirsiniz.
Nesnelerin yerleĢimlerini
ayarlamak için soğan zarı
özelliğini kullanabilirsiniz.
Durum 1 seçili iken tuval üzerine 10 tane nesne
ekleyiniz.
“Durumlar” panelinden Durum 1
seçtikten sonra elips aracını
kullanabilirsiniz.
64
Sonradan eklediğiniz nesneleri seçiniz ve
durumlara dağıtınız.
Durumlara dağıtmak için
durumlar panelinden “Durumlara
dağıt” komutunu
kullanabilirsiniz.
Yeni bir katman daha ekleyiniz ve adını sembol
olarak değiĢtiriniz.
Yeni katman eklemek için
“Katmanlar” panelini
kullanabilirsiniz.
Katman adını değiĢtirmek için
katman adını çift tıklayabilirsiniz.
Sembol katmanına bir nesne çiziniz ve sembol
grafiğe dönüĢtürünüz.
Sembol katmanı seçili iken bir
nesne çizebilirsiniz.
Nesneyi sembole dönüĢtürmek
için “DeğiĢtir / Sembol / Sembole
DönüĢtür (F8)” komutunu
kullanabilirsiniz.
Sembolü çoğaltınız.
Nesne çoğaltma seçeneklerinden
birini kullanabilirsiniz.
Sembol ekrandan kaybolacak ve 10. duruma
gelecek animasyona dönüĢtürünüz.
Sembollerin ikisini de seçerek
canlandırma uygulayabilirsiniz.
Canlandırma uygulamak için
“DeğiĢtir / Sembol / Örneklerin
65
Arasını doldur (Crtl + Alt + Shift
+ T)” komutunu kullanabilirsiniz.
Meb katmanını paylaĢtırınız.
Meb katmanını seçtikten sonra
katmanlar paneli seçeneklerinden
“Katmanı Durumlara PaylaĢ”
komutunu kullanabilirsiniz.
Animasyonunuzu çalıĢtırınız.
Tuval altındaki “Oynat / Durdur”
komutunu kullanabilirsiniz.
ÇalıĢmanızı dıĢa aktarınız.
En iyileĢtir panelinden DıĢa
Aktar dosya formatını
Animasyonlu GIF olarak
seçebilirsiniz.
“Dosya / DıĢa Aktar” komutunu
kullanarak çalıĢmanızı dıĢa
aktarabilirsiniz.
66
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. Animasyon oluĢturabildiniz mi?
2. Soğan zarı özelliğini kullanabildiniz mi?
3. Katman paylaĢtırabildiniz mi?
4. Animasyon sembolleri oluĢturabildiniz mi?
5. Durum gecikmesini ayarlayabildiniz mi?
6. GIF dosyasını dıĢa aktarabildiniz mi?
7. Aktarma önizlemesini kullanabildiniz mi?
8. Ara kareleri doldurarak animasyon hazırlayabildiniz mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme”ye geçiniz.
67
ÖLÇME VE DEĞERLENDĠRME
AĢağıdaki cümlelerin baĢında boĢ bırakılan parantezlere, cümlelerde verilen
bilgiler doğru ise D, yanlıĢ ise Y yazınız.
1. ( ) Görüntü iĢleme yazılımı hareketli resimler için durumları kullanır.
2. ( ) Hareketli resimlerde sadece bir nesne hareket edebilir.
3. ( ) Durumlara dağıt komutu ile çizilen nesneler kadar durum oluĢturularak durumlara
dağıtılmasını sağlanır.
4. ( ) Aynı anda bütün durumlar tuval üzerinde görüntülenemez.
5. ( ) Katman paylaĢma baĢka bir dosya ile katmanı paylaĢmak için kullanılır.
6. ( ) Birden fazla katman paylaĢılmaz.
7. ( ) Bir animasyon içinde hareketlerin hepsi aynı durum sayısında olmalıdır.
8. ( ) Durum gecikmesi durumun ekranda kalma süresini verir.
9. ( ) ÇalıĢma dıĢa aktarılmadan önce “En ĠyileĢtir” panelinden Animasyonlu GIF
formatı seçilmelidir.
10. ( ) Görüntü iĢleme yazılımı bir animasyona ait bir görüntüden bir baĢkasına geçiĢte
istenilen durum sayısına göre araları doldurma özelliğine sahiptir.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise “Modül Değerlendirme”ye geçiniz.
ÖLÇME VE DEĞERLENDĠRME
68
ÖĞRENME FAALĠYETĠ–5
Görüntü iĢleme yazılımı çalıĢmalarında maskeleme tekniklerini ve açılır menüleri
kullanabileceksiniz.
Maskelemenin kullanım amacını araĢtırınız.
Açılır menü oluĢturmak için kullanılan yöntemleri araĢtırınız.
5. MASKELEME VE AÇILIR MENÜLER
5.1. Bir ġablon OluĢturma
Bir web sitesi tasarımı yaparken sayfaların belirli bir bölümü genellikle değiĢmeden
tüm sayfalarda tekrarlanır. Görüntü iĢleme yazılımı bu durum için Ģablonlarla kullanıcıya
kolaylık sağlamaktadır. Sayfalardaki ortak alanların Ģablon üzerinde gösterilerek tekrar
tekrar oluĢturulmasının önüne geçilmiĢ olur.
Bir görüntü iĢleme yazılımı dosyasını Ģablon olarak kaydedebilir ve Ģablonu
kullanarak yeni dosyalar oluĢturabilirsiniz. ġablon, görüntü iĢleme yazılımı PNG formatında
kaydedilir. Ayrıca görüntü iĢleme yazılımı, cep telefonları, prototipler, web siteleri için
önceden oluĢturulmuĢ bir özel Ģablon listesi sağlamaktadır.
Bir görüntü iĢleme yazılımı dosyasını Ģablon olarak kaydetmek için,
Bir dosya oluĢturunuz. Bu Ģablon kullanılarak oluĢturulan belgelerin
görünümünü standart hâle getirmenize yardımcı olması amacıyla tasarım ve
içerikler için yer tutucular ekleyebilirsiniz.
Dosyayı bir Ģablon görüntü iĢleme yazılımı PNG dosyası olarak kaydetmek için
“Dosya > ġablon Olarak Kaydet” komutunu seçiniz.
AMAÇ
ARAġTIRMA
ÖĞRENME FAALĠYETĠ–5
69
Resim 5.1: ġablon olarak kaydet komutu
5.2. Bir Resmi Maskeleme
Maskeler, bir nesnenin ya da görüntünün belirli bölümlerini gizler veya gösterir.
Nesnelerle çok çeĢitli yaratıcı efektler elde edebilmek için birçok maskeleme tekniği
kullanabilirsiniz.
Bir maske nesnesini ya bir vektör nesnesinden (vektör maskesi) ya da bir bitmap
nesnesinden (bitmap maskesi) oluĢturabilirsiniz. Ayrıca bir maske oluĢturmak için birden
çok nesne veya gruplanmıĢ nesneler ve bir vektör maskesi oluĢturan metin kullanabilirsiniz.
Bir maske oluĢturduktan sonra maskelenmiĢ seçimin tuval üzerindeki konumunu
ayarlayabilir ya da maskenin görünümünü değiĢtirebilirsiniz. Ayrıca, dönüĢtürmeleri
maskeye bir bütün olarak veya maskenin bileĢenlerine ayrı ayrı uygulayabilirsiniz.
5.2.1. Bitmap Maskeleri OluĢturma
Görüntü iĢleme yazılımı uygulamasının maske iĢlem özelliğini kullanarak bir görsel
ile diğer bir görsele maskeleme iĢlemi uygulayabilirsiniz. Görüntü iĢleme yazılımı bitmap
maskeleri, maske nesnesinin piksellerinin altındaki nesnelerin görünürlüğünü etkiler.
Bir görseli diğerinin üzerinde maske olarak kullanmak için,
ĠĢlem yapacağınız iki görseli de tuvalin üzerine maskeleme pozisyonuna göre
yerleĢtiriniz.
70
Resim 5.2: Maskeleme yapılacak bitmap resimler
Maskelenecek resim üstte olacak Ģekilde iki görseli de seçiniz.
Resim 5.3: Maskelenecek resimlerin seçilmesi
“DeğiĢtir / Maske / Maske Olarak Grupla” komutunu seçiniz.
Resim 5.4: Maskeleme iĢleminden sonra oluĢan görüntü
5.2.2. Vektör Maskeleri OluĢturma
Görüntü iĢleme yazılımı uygulamasında vektör nesnesi ile maskeleme yapıldığında
alttaki nesnenin sadece vektör nesnesi içinde kalan kısımları gözükür. Maskeleme iĢlemi
yapıldıktan sonra katmanlar panelinde vektör nesnesinin küçük bir önizlemesi oluĢur. Maske
uygulanan vektör nesnesinin bilgilendirme ve düzenleme iĢlemi Özellik denetçisi yardımı ile
görüntülenir.
Bir vektörü maske olarak kullanmak için,
Maske olmasını istediğiniz vektör Ģekli seçiniz.
71
Resim 5.5: Vektör maskeleme için eklenmiĢ nesneler
Vektör nesneleri “Düzenle / Kes (Ctrl+X)” komutu ile kesiniz.
Maskelemek istediğiniz nesneyi seçiniz.
“Düzenle / Maske Olarak YapıĢtır (Ctrl+Alt+V)” veya “DeğiĢtir / Maske /
Maske Olarak YapıĢtır (Ctrl+Alt+V)” komutunu seçiniz.
Resim 5.6: Vektör maskeleme iĢlemi uyguadıktan sonra oluĢan görüntü
5.3. Katman Panelini Kullanarak Maskeleme Yapma
BoĢ, saydam bir bitmap maskesi eklemenin en hızlı yolu “Katmanlar” panelini
kullanmaktır. Katmanlar paneli nesneye bitmap araçlarıyla üzerinde çizim yaparak
özelleĢtirebileceğiniz beyaz bir maske ekler.
Katman panelini kullanarak maske eklemek için,
Maskelemek istediğiniz nesneyi seçiniz.
Katmanlar panelinin altındaki “Maske Ekle” düğmesini tıklatınız.
Resim 5.7: Katmanlar paneli
72
Görüntü iĢleme yazılımı, seçilen nesneye boĢ bir maske ekler. Katmanlar paneli,
boĢ maskeyi temsil eden bir maske küçük resmi görüntüler.
Resim 5.8: Katmanlar panelinde eklenen maske
Araçlar panelinden bir bitmap resim aracı seçiniz. Özellik denetçisindeki araç
seçeneklerini ayarlayınız.
Hâlâ seçili olan maskeyle boĢ maske üzerine çizim yapınız.
Resim 5.9: Maskeleme alanının seçilmesi
Çizim yaptığınız alanlarda alttaki maskeli nesne gizlenir.
Resim 5.10: Maskelemenin uygulanması (Siyah renk ile boyama)
73
Boya kovası aracı ile siyah-beyaz renkler arasında boyama yapınız. Siyah
renkten beyaz renge doğru gittikçe maskelenen bölümün görünürlüğü artacaktır.
Resim 5.11: Maskelemenin uygulanması (Gri renk ile boyama)
5.4. Metni Bir Maske Olarak Kullanma
Görüntü iĢleme yazılımı uygulamasında metinler ile maskeleme yapıldığında alttaki
nesnenin sadece metnin içinde kalan kısımları gözükür. Maskeleme iĢlemi yapıldıktan sonra
katmanlar panelinde metnin bir önizlemesi oluĢur. Maske uygulanan vektör nesnesinin
bilgilendirme ve düzenleme iĢlemi Özellik denetçisi yardımı ile görüntülenir.
Bir metni maske olarak kullanmak için,
Maske olmasını istediğiniz metni seçiniz.
Resim 5.12: Maskeleme yapılacak metin
“Düzenle / Kes (Ctrl+X)” komutunu seçiniz.
Maskelemek istediğiniz nesneyi seçiniz.
“Düzenle / Maske Olarak YapıĢtır (Ctrl+Alt+V)” veya “DeğiĢtir / Maske /
Maske Olarak YapıĢtır (Ctrl + Alt + V)” komutunu seçiniz.
Resim 5.12: Metin maskelemesi yapılmıĢ nesne
74
5.5. Metin Dilimi OluĢturma
Görüntü iĢleme yazılımı ile oluĢturduğunuz çalıĢmalarınızı dıĢa aktardığınızda
metinler grafiğe dönüĢür. Bu durum istenmeyen bir durumdur. Çünkü grafik olan metinlerin
düzenlemesi uzun zaman alır. Metin özelliğini kaybetmediği zaman düzenleme yapmak daha
kolay olacaktır.
Metinler görüntü iĢleme yazılımı metin aracını kullanarak oluĢturulabileceğiniz gibi
Not defteri gibi kelime editör programları kullanılarak *.txt dosyaları oluĢturularak belge
içerisine yerleĢtirilebilir ya da kelime editör programları kullanılarak zengin metin biçimi
(*.rtf) oluĢturularak belge içerisine “Dosya / Ġçe Aktar... (Ctrl + R)” komutunu kullanılarak
yerleĢtirebilirsiniz.
Metin dilimi eklemek için,
ÇalıĢma alanına metin ekleyeceğiniz yere bir dilim ekleyiniz.
Resim 5.13: Metin alanı için dilimin oluĢturulması
Dilim özellik denetçisinden Tür seçeneklerinden HTML seçeneğini tıklayınız.
Resim 5.14: Dilimin türünün değiĢtirilmesi
75
Dilim özellik denetçisinden “Düzenle…” komutunu seçiniz.
Resim 5.15: Dilim metninin oluĢturulması
“HTML Dilimini Düzenle” iletiĢim penceresine içerisine metin yazınız ve
onaylayınız.
BaĢlıklar için metin baĢına <b> ve sonuna </b> etiketlerini ekleyerek
baĢlığı koyu yazabilirsiniz.
<p> etiketi ile paragraf belirleyebilirsiniz.
<br> etiketi ile satırbaĢı yapabilirsiniz.
Diğer HTML etiketleri ile metni düzenleyebilirsiniz.
Resim 5.16: HTML dilimini düzenle iletiĢim penceresi
“Dosya / Tarayıcıda Önizleme (F12)” komutu ile Tarayıcıda önizleme yapınız.
ÇalıĢmanızı dıĢa aktardığınız zaman dilim metin olarak çalıĢacaktır.
76
Resim 5.17: Tarayıcıda önizleme
5.6. Açılır Menü Ekleme
Açılır menüler, kullanıcı dilim veya sıcak nokta gibi tetikleyici bir web nesnesini
tıklattığında ya da iĢaretçiyi üzerine taĢıdığında bir tarayıcı içinde görüntülenir.
Her açılır menü öğesi bir HTML veya görüntü hücresi olarak görüntülenir.
Hücrenin bir Yukarıda durumu, bir Üzerinde durumu ve her iki durumda da
metni vardır.
URL bağlarını, gezinme için açılır menü öğelerine ekleyebilir ve açılır
menülerde istediğiniz kadar çok alt menü düzeyleri oluĢturabilirsiniz.
Sekmelerin herhangi birini veya tümünü kullanabilir ve sekme ayarlarını
istediğiniz zaman düzenleyebilirsiniz.
Bir tarayıcıda önizlemesini görüntüleyebileceğiniz bir menü seçeneği
oluĢturmak için “Ġçerikler” sekmesinde en azından bir menü öğesi eklemeniz
gerekir.
77
Bir açılır menünün önizlemesini görüntülemek için F12'ye basarak tarayıcıda
görüntülemelisiniz. Açılır menüler görüntü iĢleme yazılımı çalıĢma alanında
görüntülenmez.
Açılır menü eklemek için,
Açılır menü için tetikleyici alan olan bir sıcak nokta veya dilim seçin. Sıcak
noktaları önceden hazırladığınız bir nesne üzerine ekleyebilirsiniz.
Resim 5.18: Açılır menü için sıcak noktanın eklenmesi
“DeğiĢtir / Açılır Menü / Açılır Menü Ekle” komutunu veya dilimin ortasındaki
davranıĢ tutamacını tıklayınız ve “Açılır Menü Ekle” komutunu seçiniz.
Ekrana gelen “Açılır Menü Düzenleyici” iletiĢim penceresinden;
Ġçerik sekmesini tıklayınız ve ardından “Menü Ekle” komutunu
tıklayınız.
Resim 5.19: Açılır menü düzenleyici iletiĢim penceresinden menü eklenmesi
Her hücreyi çift tıklatınız ve uygun Metin, Bağ ve Hedef bilgilerini
giriniz veya seçiniz. Penceredeki son satıra içerik girdiğinizde görüntü
iĢleme yazılımı otomatik olarak bu satır altına boĢ bir satır ekler.
78
Resim 5.20: Açılır menü düzenleyici iletiĢim penceresinde içeriğin eklenmesi
Tüm menü öğelerini ekleyene kadar 3. ve 4. adımları tekrarlayınız. Bir
menü öğesini silmek için “Menüyü Sil” düğmesini tıklatınız.
Resim 5.21: Açılır menü düzenleyici iletiĢim penceresinden menü silinmesi
Görünüm sekmesini seçiniz ve menü görünümünü ayarlayınız.
79
Resim 5.22: Açılır menü düzenleyici görünüm sekmesi
GeliĢmiĢ sekmesini tıklayınız ve menü ilgili geliĢmiĢ ayarları
yapınız.
Resim 5.22: Açılır menü düzenleyici geliĢmiĢ sekmesi
o Hücre girintisi ile menü metinlerinin girintisini ayarlayabilirsiniz.
o Hücre aralığı ile menüler arası boĢluğu ayarlayabilirsiniz.
o Hücre gecikmesi ile menünün ekranda kalma süresini
ayarlayabilirsiniz.
80
Konum sekmesini tıkayınız ve menünün konumunu ayarlayınız.
Resim 5.23: Açılır menü düzenleyici konum sekmesi
“Bitti” komutunu tıklatınız ve menüyü tamamlayınız. ÇalıĢma alanında,
üzerinde açılır menüyü oluĢturduğunuz sıcak nokta veya dilim, açılır
menünün üst düzeyinin bir ana hattına eklenen bir mavi davranıĢ çizgisi
görüntüler.
Resim 5.24: TamamlanmıĢ açılır menü
Tarayıcıda önizleme ile menüyü görüntüleyiniz.
Resim 5.25: Açılır menünün tarayıca önizleme ile görüntülenmesi
Açılır menüyü “Dosya / DıĢa Aktar (Ctrl + Shift + R)” komutunu kullanarak
menüyü dıĢa aktarınız. “DıĢa Aktar” seçeneklerinde “HTML ve Görüntüler”i
seçiniz.
81
Resim 5.26: Açılır menünün dıĢa aktarılması
DıĢa aktarmadan sonra görüntü iĢleme yazılımı HTML doyası, resim dosyası ve
script doyasını otomatik olarak oluĢturur. HTML dosyasını web editörüne
aktararak kullanabilirsiniz.
Resim 5.27: Açılır menü dosyaları
5.7. Açılır Menüyü Düzenleme
Görüntü iĢleme yazılımı oluĢturulan açılır menüleri tekrar düzenlemenize olanak
sağlar. Menü seçim aracı ile çift tıklayarak “Açılır Menü Düzenleyici” iletiĢim
penceresinden tekrar düzenleyebilirsiniz.
82
UYGULAMA FAALĠYETĠ
Maskeleme ve açılır menülerle ile ilgili aĢağıdaki uygulamayı yapınız.
ĠĢlem Basamakları Öneriler
Kayıtlı bir bitmap resmi açınız.
“Dosya / Aç (Ctrl + O)”
komutunu kullanabilirsiniz.
Bitmap resim üzerine vektör nesneleri çiziniz.
“Araçlar” panelinden vektör
araçlarını kullanabilirsiniz.
Bitmap resim üzerine metin ekleyiniz.
“Araçlar” panelinden metin
aracını kullanabilirsiniz.
UYGULAMA FAALĠYETĠ
83
Vektör nesnesi ve metin maskelemesi
uygulayınız.
Vektör nesnelerini ve metni
seçebilirsiniz.
“Düzenle / Kes (Ctrl + X)”
komutunu kullanabilirsiniz.
Bitmap resmi seçebilirsiniz.
“Düzenle / Maske olarak yapıĢtır
veya DeğiĢtir / Maske / Maske
Olarak YapıĢtır (Ctrl + Alt + V)”
komutunu kullanabilirsiniz.
Resmin boĢluklarını kırpınız. Araçlar panelinden kırpma
aracını kullanabilirsiniz.
Metin üzerine açılır menü ekleyiniz.
Metin üzerine Sıcak Nokta
ekleyebilirsiniz.
Sıcak nokta tutmacından Açılır
Menü Ekle ya da DeğiĢtir / Açılır
Menü / Açılır Menü Ekle
komutunu kullanabilirsiniz.
Açılır menüye alt menüleri ekleyiniz.
“Açılır Menü Düzenleyici”sini
kullanabilirsiniz.
Açılır menü görünümü ayarlayınız. “Açılır Menü Düzenleyici”sini
kullanabilirsiniz.
84
Açılır menü geliĢmiĢ özelliklerini ayarlayınız.
“Açılır Menü Düzenleyici”sini
kullanabilirsiniz.
Açılır menü konumunu ayarlayınız.
“Açılır Menü Düzenleyici”sini
kullanabilirsiniz.
85
ÇalıĢmanızı tarayıcıda önizleme ile
görüntüleyiniz.
“Dosya / Tarayıcıda önizleme
(F12)” komutunu
kullanabilirsiniz.
ÇalıĢmanızı dıĢa aktarınız.
“Dosya / DıĢa Aktar (Ctrl + Shift
+ R)” komutunu kullanabilirsiniz.
DıĢa Aktar formatını “HTML ve
Görüntüler”i seçebilirsiniz.
86
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. ġablon oluĢturabildiniz mi?
2. Bitmap maskeleme yapabildiniz mi?
3. Vektör maskeleme yapabildiniz mi?
4. Katman panelini kullanarak maskeleme yapabildiniz mi?
5. Metni maske olarak kullanabildiniz mi?
6. Metin dilimi oluĢturabildiniz mi?
7. Açılır menü ekleyebildiniz mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme”ye geçiniz.
87
ÖLÇME VE DEĞERLENDĠRME
AĢağıdaki cümlelerin baĢında boĢ bırakılan parantezlere, cümlelerde verilen
bilgiler doğru ise D, yanlıĢ ise Y yazınız.
1. ( ) Görüntü iĢleme yazılımında Ģablonların kullanımı zaman tasarrufu sağlar.
2. ( ) Görüntü iĢleme yazılımı hazır Ģablonlara sahip değildir.
3. ( ) Görüntü iĢleme yazılımı Ģablonları PNG formatı ile kaydeder.
4. ( ) Maskeler, bir nesnenin ya da görüntünün belirli bölümlerini gizler veya gösterir.
5. ( ) Maske oluĢturulduktan sonra maskenin konumu ayarlanabilir.
6. ( ) Katmanlar panelinden maske eklenemez.
7. ( ) Metinler maske olarak kullanılabilir.
8. ( ) Görüntü iĢleme yazılımında oluĢturulan metinlerin hepsi dıĢa aktarılınca metin
özelliğini kaybeder.
9. ( ) Görüntü iĢleme yazılımı açılır menüler için script dosyasını otomatik olarak
oluĢturur.
10. ( ) Açılır menüler oluĢturulduktan sonra düzenlemez.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise “Modül Değerlendirme”ye geçiniz.
ÖLÇME VE DEĞERLENDĠRME
88
MODÜL DEĞERLENDĠRME AĢağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği iĢaretleyiniz.
1. AĢağıdakilerden hangisi Görüntü iĢleme yazılımına ait bir sembol türü değildir?
A) Düğme
B) Grafik
C) Animasyon
D) Film
2. AĢağıdakilerden hangisi bir grafiği sembole dönüĢtürmek için kullanılan tuĢ ya da
tuĢlardır?
A) F8
B) Ctrl + F8
C) Ctrl + Shift + F8
D) Ctrl + Alt + F8
3. AĢağıdakilerden hangisi düğmenin herhangi bir etkileĢimde olmadığı durumu ifade
eder?
A) Yukarı
B) Üzerinde
C) AĢağı
D) AĢağıdayken üzerinde
4. AĢağıdakilerden hangisi düğmenin bağlantısının açılacağı sayfanın Ģeklini belirler?
A) Bağ
B) Alt
C) Hedef
D) Metin
5. AĢağıdaki hedef seçeneklerinden hangisi düğmeye tıklandığında bağlantıyı aynı
pencerede açar?
A) _blank
B) _self
C) _parent
D) _top
6. Görüntü iĢleme yazılımı aĢağıdaki sıcak nokta araçlarından hangisine sahip değildir?
A) Dikdörtgen Sıcak Nokta aracı
B) Oval Sıcak Nokta aracı
C) Daire Sıcak Nokta aracı
D) Çokgen Sıcak Nokta aracı
MODÜL DEĞERLENDĠRME
89
7. AĢağıdakilerden hangisi “Sıcak Nokta” eklemek için kullanılan araçtır?
A)
B)
C)
D)
8. AĢağıdakilerden hangisi ile etkin bölgeden baĢka bir sayfaya bağlantı verilebilir?
A) Alt
B) Tür
C) Hedef
D) Bağ
9. DönüĢümlü resimlere ait resimler hangi panelde saklanır?
A) Katmanlar
B) Durumlar
C) Stiller
D) Sayfalar
10. Durumlar paneli hangi tuĢ ya da tuĢlar kullanılarak aktif hâle getirilir?
A) F2
B) Alt + F2
C) Shift + F2
D) Ctrl + F2
11. Tam ekran modundan çıkmak için hangi tuĢ kullanılır?
A) Alt
B) Shift
C) Ctrl
D) Tab
12. Görüntü iĢleme yazılımı çalıĢmaları dıĢa aktarılmadan önce hangi formatta
kaydedilmelidir?
A) JPEG
B) GIF
C) PNG
D) TIFF
13. “En ĠyileĢtir” paneli hangi tuĢ ya da tuĢlar yardımıyla aktif hâle getirilir?
A) F6
B) Ctrl + F6
C) Alt + F6
D) Shift + F6
90
14. DıĢa Aktar dosya formatı hangi panelden seçilir?
A) Katmanlar
B) Stiller
C) En iyileĢtir
D) Bilgi
15. Tarayıcıda önizleme için hangi tuĢ kullanılır?
A) F1
B) F10
C) F11
D) F12
16. “DıĢa Aktar” iletiĢim penceresi hangi tuĢlar yardımıyla açılır?
A) Ctrl + R
B) Ctrl + Shift + R
C) Ctrl + Alt + R
D) Shift + R
17. “Slayt Gösterisi OluĢtur” komutu hangi menüde yer alır?
A) Dosya
B) DeğiĢtir
C) Komutlar
D) Pencere
18. Animasyonlu GIF’e ait değiĢen görüntüler hangi panelde tutulur?
A) Durumlar
B) Katmanlar
C) Stiller
D) Sayfalar
19. Soğan zarı ile ilgili aĢağıdakilerden hangisi yanlıĢtır?
A) Tüm durumlar aynı anda görüntülenebilir.
B) Seçilen durum dıĢındaki durumlarda düzenleme yapılmaz.
C) Seçilen durum haricindeki durumlar içindeki nesneler soluk hâlde
görülür.
D) Ġstenilen aralıktaki durumlar görüntülenebilir.
20. “Animasyonu Canlandır” komutunu aktif hâle getirmek için aĢağıdaki tuĢ ya da
tuĢlardan hangisi kullanılır?
A) F8
B) Ctrl + Shift + F8
C) Alt+ Shift + F8
D) Ctrl + Alt + F8
91
21. AĢağıdakilerden hangisi Ģablonlar için söylenemez?
A) ġablonlar zaman tasarrufu sağlar.
B) ġablonlar PNG formatında kaydedilir.
C) ġablonlar düzenlenemez.
D) Görüntü iĢleme yazılımı hazır Ģablonlara sahiptir.
22. AĢağıdakilerden hangisi maske olarak eklenemez?
A) Vektörler
B) Bitmap resimleri
C) Metinler
D) Katmanlar
23. Maske Olarak YapıĢtır komutu için hangi tuĢlar kullanılır?
A) Ctrl + Shift + V
B) Ctrl + Alt + V
C) Shift + Alt + V
D) Ctrl V
24. Açılır menülerle ilgili hangisi yanlıĢtır?
A) Menü bağı eklenebilir.
B) Açılır menüler düzenlenebilir.
C) Görüntü iĢleme yazılımı önizleme penceresinde görüntülenir.
D) Sıcak nokta ya da dilimlere açılır menü eklenir.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki modüle geçmek için öğretmeninize baĢvurunuz.
92
CEVAP ANAHTARLARI
ÖĞRENME FAALĠYETĠ-1’ĠN CEVAP ANAHTARI
1 C
2 D
3 C
4 C
5 D
6 B
7 A
8 Doğru
9 Doğru
10 YanlıĢ
ÖĞRENME FAALĠYETĠ-2’NĠN CEVAP ANAHTARI
1 YanlıĢ
2 Doğru
3 Doğru
4 YanlıĢ
5 Doğru
6 Doğru
7 Doğru
8 YanlıĢ
ÖĞRENME FAALĠYETĠ-3’ÜN CEVAP ANAHTARI
1 Doğru
2 Doğru
3 YanlıĢ
4 Doğru
5 YanlıĢ
6 YanlıĢ
7 Doğru
8 YanlıĢ
CEVAP ANAHTARLARI
93
ÖĞRENME FAALĠYETĠ-4’ÜN CEVAP ANAHTARI
1 Doğru
2 YanlıĢ
3 Doğru
4 YanlıĢ
5 YanlıĢ
6 YanlıĢ
7 YanlıĢ
8 Doğru
9 Doğru
10 Doğru
ÖĞRENME FAALĠYETĠ-5’ĠN CEVAP ANAHTARI
1 Doğru
2 YanlıĢ
3 Doğru
4 Doğru
5 Doğru
6 YanlıĢ
7 Doğru
8 YanlıĢ
9 Doğru
10 YanlıĢ
94
MODÜL DEĞERLENDĠRMENĠN CEVAP ANAHTARI
1 D
2 A
3 A
4 C
5 B
6 B
7 A
8 D
9 B
10 C
11 B
12 C
13 A
14 C
15 D
16 B
17 C
18 A
19 B
20 C
21 C
22 D
23 B
24 C
95
KAYNAKÇA GÜRKAN Osman, Macromedia Fireworks 8, Nirvana Yayınları
SCHULZE Pati, Macromedia Fireworks 8 Kaynağından Eğitim, Medyasoft
Yayınları
KAYNAKÇA
Top Related