Web Sayfaları İçin Resimler Hazırlayabilme

Web Sayfaları İçin Resimler Hazırlayabilme Etkinliği

Web Sayfaları İçin Resimler Hazırlayabilme etkinliğinde İşletmelerde Beceri Eğitimi Dersi Staj Dosyası Konuları kapsamında Adobe Fireworks Arayüzü, Fireworks Araçlarını Kullanmak, Fireworks Özellikler Denetçisi (Properties) Paneli, Adobe Fireworks’te Sık Kullanılan Klavye Kısayolları, Apple Logo Çizimi Nasıl Yapılır?, Adobe Fireworks Apple Logo Çizimi, Dönüşümlü Resimler (Rollower) Uygulaması, Etkin Resim Bölgesi (Image Map) Oluşturma uygulaması, GIF Animasyonu Nasıl Oluşturulur?, Grafikleri Düğmeye Dönüştürme uygulaması gibi staj dosyasına yazılacak konuları içerir. Bu ders notunu staj defterinizi doldurmanızda yardımcı olacaktır. Yazımızın sonunda dosyaların indirme linkleri mevcuttur.

Temel Kavramlar

Piksel: Ekranda kontrol edilebilen en küçük noktalara denir.

Nokta aralığı (Dot Pitch): Bir pikseldeki renklerin (RGB) birbirine olan mesafesine denir.

Çözünürlük: Bir defa da ekranda görüntülenebilen piksel sayısına denir.

Rezolasyon: Bir resmin piksel yoğunluğu yani PPI (Pixel Per Inches) 1 inç karede bulunan piksel sayısıdır.

Görüntü Formatları

Masaüstü yayıncılıkta kullanılan yazılımlar, birbirleri ile dosya alışverişinde bulunarak çalışır. Bir resmi veya vektörel çizimi oluşturduğumuz uygulama programından bağımsız hâle getirip sayfa düzenleme programına ya da vektörel programlara aktarmak için farklı bir formatta kaydetmemiz gerekir.

Yaygın kullanılan görüntü formatlarından bazıları şunlardır:

PNG, PICT, EPS, TIFF, JPG, BMP, GIF, PSD

Adobe Fireworks Programı Arayüzü

1. Çalışma Alanı Değiştiricisi
2. Menü Çubuğu
3. Araç Çubuğu
4. Araçlar Paneli
5. Özellikler Denetçisi
6. Tuval

Araçlar Panelindeki Araç Setleri

Görüntü işleme yazılımı araçlar paneli 6 ana bölüme ayrılmıştır:

• Seç araç seti: Nesneleri seçmek için kullanılan araçlar
• Bitmap araç seti: Resim dosyaları ile çalışırken kullanılan araçlar
• Vektör araç seti: Vektörel çizimler için kullanılan araçlar
• Web araç seti: Web sayfaları geliştirirken kullanılan araçlar
• Renkler araç seti: Renk araçları
• Görünüm araç seti: Görünüm araçları

Bu araçlar paneli içinde yer alan bazı araçların altına aşağı doğru üçgen işaretleri bulunmaktadır. Bu işaretler bu araçların altında benzer araçların bulunduğunu ifade eder.

Adobe Fireworks’te Sık Kullanılan Klavye Kısayolları

F4: Panelleri gizle.

Ctrl+R: İçe Aktar.

F12: Tarayıcı üzerinden önizleme.

Shift+L: Katman Ekle

Shift+F: Durum Ekle

Ctrl+Shift+U: Sıcak Nokta Ekle.

Ctrl+Alt+R: Cetvelleri Göster.

Ctrl+Alt+G: Izgarayı Göster.

Ctrl+Alt+F: Tuvale Sığdır.

Ctrl+T: Serbest Dönüştürme.

Ctrl+Shift+T: Nümerik Dönüştürme.

Ctrl+Shift+J: Nesnelerin kesişim bölgelerini atarak birleştir.

Ctrl+Alt+U: Nesneleri toplayarak birleştir.

Ctrl+Shift+Y: Metni Yola Ekleme.

Ctrl+Shift+V: İçine yapıştır.

Ctrl+G: Nesneleri Grupla.

Ctrl+Shift+G: Grubu Çöz.

Özellikler Denetçisi (Properties) Paneli

Seçilen aracın veya nesnenin özelliklerini görüntüleyen paneldir. Herhangi bir araç ya da nesne seçili değilse sayfa (Tuval) özelliklerini görüntüler.

Seçim Araçları (Marquee Tools)

Seçim araçları resim veya grafiklerin belli bir bölgesinin seçilmesini sağlar. Seçim araçları dikdörtgen (rectangle) ve yuvarlak (oval) olmak üzere iki çeşittir.

Kırpma (Crop) Aracı

Resimlerin veya grafiklerin belli bir bölgesinin seçilmesini sağlar. Diğer bir değişle seçili bölge dışındaki alanı silmiş oluruz. Kırpma aracını kullanmak için araç kutusundan farenin sol tuşu ile simgeye tıklatılır.

Sihirli Değnek (Magic Wand) Aracı

Bitmap resimleriniz içinde benzer renkli alanları seçer.

Kement (Lasso) Aracı

Resim içinde serbest bir çizimle alan seçmemize yarar.

Lastik Damga (Rubber Stamp) Aracı

Rötuş veya görüntüdeki belirli bir alanı başka bir alana kopyalama yapmada kullanılır.

Leke (Smudge) Aracı

Üzerinden geçtiği renkleri birbirine karıştırmaya ve kenarları yumuşatmaya yarar.

Gama Ayarı

Macintosh ile tasarım yapılıyor ise resimler daha açık, Windows ile tasarım yapılıyorsa resimler biraz daha koyu yapılır.

Katmanlar

Katmanlar nesneleri oluşturabileceğiniz ve saklayabileceğiniz saydam düzlemlerdir.

Renk (Degrade) Tonlaması

Degrade aracı ile bir nesnenin dolgu rengini bir renkten bir renge kademeli olarak geçecek şekilde ayarlayabiliriz.

UYGULAMA FAALİYETLERİ

Uygulama 1: Logo Çizimi (Apple Logosu)

Adım 1: 1024×768 piksel ebatlarında, beyaz renkli tuval ile Adobe Fireworks belgesini oluşturun.

Adım 2: 500×500 boyutunda iki daire çizin. Soldaki X:100 Y:150 konumunda, sağdaki daire görselde görüldüğü üzere X:350 Y: 150 konumunda olsun.

Adım 3: İşaretçi aracını seçin ve her iki daireyi seçin, ardından panellerden yol panelini açın ve “Yolları Topla” seçimi yapın.

Adım 4: Alt seçim aracı ile elmanın üst birleşim noktasına iki defa tıklayın (noktalar görünecek) ve Yol panelinden “Noktaları Düzgünleştir” seçimini yapın.

Adım 5: Bu sefer de alt seçim aracı ile elmanın alt birleşim noktasına iki defa tıklayın (noktalar görünecek) ve Yol panelinden “Noktaları Düzgünleştir” seçimini yapın.

Adım 6: Son durumda logomuz aşağıdaki gibi olmalıdır.

Adım 7: Alt seçim aracı ile elmanın alt kısmını aşağıdaki soldaki resimdeki gibi seçiniz. Seçim işleminden sonra logomuz aşağıdaki sağ resimdeki gibi noktalı olarak görünecektir.

Adım 8: Yine alt seçim aracımızı kullanarak elmanın alt orta noktasından tutarak aşağıdaki sol resimdeki gibi aşağı doğru elmayı büyütün. İşlem bittiğinde logomuz aşağıdaki sağ resimdeki gibi olacak.

Adım 9: 450×450 boyutunda X: 700 Y: 150 konumunda beyaz bir daire ekleyin. Bu elmanın ısırık olan kısmını oluşturmamızı sağlayacaktır.

Adım 10: Alt seçim aracı ile kırmızı ok ile gösterilen noktayı biraz aşağı ve biraz ileri oynatın. İsterseniz çizdiğiniz son daireye G:427 Y:450 X:723 Y:150 değerlerini girerek de bunu yapabilirsiniz.

Adım 11: Elmayı ve ısırık için çizdiğimiz daireyi seçin ve Yol panelinden “Yolları Zımbala” seçini yapın.

Adım 12: İşlem bittiğinde logomuz aşağıdaki gibi olacaktır.

Adım 13: Katmanlar panelinden kırmızı ok ile gösterilen yerden elmayı gizleyin. Elmanın yaprağını oluşturmak için 300×300 boyutlarında kontur kalınlığı 10 olan iki tane çember çizin. Çizdiğiniz çemberleri seçip Yol panelinden “Yolları Kesiştir” seçimini yapın.

Adım 14: Kesiştirme işleminden sonra aşağıdaki gibi bir görüntü ortaya çıkacaktır.

Adım 15: Alt seçim aracı ile çizimimizin üst ve alt noktalarına basılı tutarak biraz uzatıp yaprak görünümünü almasını sağlayınız.

Adım 16: Ölçek aracı ile yaprağı biraz döndürün daha sonra yaprağımızın boyutunu G:134 Y:150 boyutunda X:475 Y:10 konumunda ve dolgusu siyah renk olacak şekilde güncelleyin. Ayrıca Katman panelinden gizlediğimiz elmayı görünür hale getirin. Son durumda logomuz aşağıdaki gibi olacaktır.

Adım 17: Hem yaprağı hem de elmayı seçip “Ctrl+G” kısayol tuşlarını kullanarak gruplayın. Daha sonra logoyu seçin ve Hizala panelinden “Tuvale Göre” seçili durumdayken “Yatay Ortayı Hizala” ve “Dikey Ortayı Hizala” seçimlerini yaparak logoyu tuvalin tam ortasına konumlandırın.

Adım 18: Tuval Boyutunu değiştirmek için tuval üzerinde boş bir yere tıklayın ve tuvalin genişliğini 750 piksel arkaplan rengini ise “Saydam” yapın.

Adım 19: Son durumda logomuz aşağıdaki olacaktır.

Adım 20: Logomuzu PNG olarak dışarıya aktarmak için En İyileştir panelinden PNG seçili iken dışarı aktar düğmesine veya “Ctrl+Shift+R” klavye kısayolunu kullanarak dışarıya aktarın. Artık logomuz kullanıma hazır duruma geldi.

Uygulama 2: Grafikleri Düğmeye Dönüştürme

1-) 800×600 boyutlarında beyaz arkaplana sahip çalışma açın.

2-) Çalışma alanınıza dosyanızdaki düğmelerden birini içeri aktarın. Aktardığınız resmin üzerine “Başla” yazın. Tuval üzerinde boş bir yere tıklayın, özellikler denetçisinden resmi tuvale sığdırın.

3-) Daha sonra resmi yazısıyla beraber seçin ve F8 tuşuna basın. Sembole dönüştür ekrana gelecektir. Adı:Başla, Türü:Düğme yapın ve tamam deyin.

4-) Artık içeri aktardığımız resim düğmeye dönüşmüş olacaktır.

5-) Düğmemize bağ, alt ve hedef bilgilerini yukarıdaki gibi doldurun.

6-) Çalışmanızı F12 ile test edin.

7-) Çalışmanızı test ettiğinizde düğmenin üzerine gelindiğinde kaybolduğunu görün.

😎 Bu sorunu çözmek için öncelikle düğmeyi düzenleyin. Bunun için düğme üzerindeki sıcak noktanın (yeşil alan) üzerine iki defa tıklayın ve düğme düzenlemeye girin. Düğmeyi ve yazıyı seçip kopyalayın (Ctrl+C).

9-) Özellikler denetçisinden durum kısmını “üzerinde” olarak seçin ve buraya kopyaladığınız düğmeyi “Ctrl+V” ile yapıştırın. Düğme üzerinde ufak düzenlemeler yapın. (Yazı rengini değiştirebilirsiniz. Ben degrade aracı ile beyaz doğrusal renk geçişi uyguladım.)

10-) Çalışmanızı F12 ile test edin.

Uygulama 3: Etkin Resim Bölgesi (Image Map) Oluşturma

Adım 1: Aşağıda verilen ölçülere uygun yeni bir belge oluşturun.

Adım 2: İçeri aktar ile aşağıdaki fotoğrafı tuval boyutuna uygun olacak şekilde yerleştirin.

Adım 3: Metin aracını kullanarak resmin üzerine aşağıdaki gibi bir bilgilendirme yazısı yazınız.

Adım 4: Web araç çubuğundan “Dikdörtgen Sıcak Nokta Ekle” aracını seçiniz. Aşağıdaki gibi denizanasının üzerine sıcak nokta ekleyiniz.

Adım 5: Sıcak nokta seçili iken özellikler denetçisindeki ayarları aşağıdaki gibi yapın.

Adım 6: Çalışmanızı F12 ile tarayıcıda test ediniz.

Uygulama 4: Dönüşümlü Resimler (Rollower) Uygulama Etkinliği

Adım 1: 2048×1152 boyutlarında beyaz arkaplan sahip bir belge oluşturun.

Adım 2: Durum 1’e aşağıdaki nesneleri çizin. İçi boş dikdörtgeni bir resim çerçevesi görünümü olsun diye ekleyeceğiz ve boyutu 800×600 olacak ve konumu X=624, Y=202. Çünkü ekleyeceğimiz resimlerin boyutları da 800×600 boyutlarında. Şimdi durum 1 deki bu çerçevenin içine bu 4 resmi aşağıdaki gibi ekleyelim.

Adım 3: Durumlar paneline gelin ve “Yeni/çoğaltılmış durum” deyip yeni bir durum ekleyin. Durum 2 boş bir sayfa olarak açılacaktır.

Adım 4: Durum 2 ye 4 resmi de üst üste gelecek şekilde çerçevenin koordinatlarına ve boyutuna uygun olacak şekilde ekleyin, yerleştirin.

Adım 5: Eklediğimiz bu 4 resmi katmanlar panelinden görebilirsiniz. Anlaşılır olması için resimlere isimlerini yazın. Daha sonra 4 resmi de katmanlar panelinden seçiniz. (CTRL veya Shift tuşları yardımı ile) Son olarak durumlar paneline tıklayın ve bu seçtiğimiz resimleri durumlara dağıt deyin.

Adım 6: 4 Resmi durumlara dağıtınca yukarıdaki gibi durum 2 de fare, durum 3 de modem, durum 4 de kulaklık ve durum 5 de aksiyon kamera resmi olacak.

Adım 7: Şimdi de durum 1 e tıklayıp düğmelere sıcak nokta aracını ile sıcak nokta ekleyin.

Adım 8: Şimdi de dilim aracı durum 1 deki çerçevemize dilim ekleyelim.

Adım 9: Durum 2-3-4-5 deki resimlere de 800×600 boyutlarında dilim ekleyin.

Adım 10: Durum 1 e gelin ve Resim 1 deki sıcak noktanın ortasındaki yuvarlağa basılı tutarak çerçevenin olduğu yere sürükleyin ve bırakın. Ekranda takas et görünecek. Resim 1 ile durum 2 deki resmi yani fareyi eşleştirdik. Tamam deyip. Aynı işlemi Resim 2 için durum 3 e, Resim 3 için durum 4 e, Resim 4 için durum 5 e takas edin.

Adım 11: Son olarak çalışmanızı kaydedip önizleme yapın veya F12 işle test edin.

Uygulama 5: GIF Animasyonu Oluşturma

GIF, Grafik Değiştirme Biçimi anlamına gelir, İngilizcesi ise Graphics Interchange Format’ın kısaltmasıdır. GIF bir dijital resim saklama biçimine verilen isimdir.

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 panelinden 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.

GIF Animasyonu Oluşturma Adımları

Resimlere durumlara dağıtırken iki farklı yol kullanabilirsiniz:

• Birinci yol farklı görüntü sayısı kadar durum ekleyip, her bir duruma ayrı ayrı görüntüler oluşturmak.
• İkinci yol olarak görüntülerin hepsini oluşturup, bütün görüntüleri seçtikten sonra durumlar panelinden “Durumlara Dağıt” komutunu kullanmak.

GIF Animasyonu Oluşturma Uygulamaları

1.Yol: Durum ekleyerek animasyonlu GIF oluşturmak;

Adım 1: Aşağıda verilen ölçülere uygun yeni bir belge oluşturun. (Beyaz arka plan G:800px Y:600Px)

Adım 2: Durumlar paneline gelin ve “Yeni/Çoğaltılmış Durum” a tıklayarak 8 adet olacak şekilde durum ekleyin. Durumların her biri şuanda boş durumdadır.

Adım 3: Şimdi 1.duruma tıklayın ve 500×500 boyutlarında bir sıcak nokta ekleyin, tuvale göre tam ortaya hizalayın ve sıcak noktamızı yanlışlıkla silmemek veya yerinden oynatmamak için katmanlar panelinden kilitleyin.  (Bu sıcak nokta bize kılavuz olması için olacak daha sonra bunu sileceğiz.)

Adım 4: Tekrar durumlar panelini açın ve birinci durumdan başlayarak sıcak noktanın etrafına 8 adet daire ekleyin.

Adım 5: Eklediğiniz 8 daireyi klavyeden “Ctrl+A” ile seçerek klavyeden “Ctrl+C” ile kopyalayın. 2.Duruma tıklayın ve “Ctrl+V” ile kopyaladığınız daireleri yapıştırın. Aynı işlemi diğer durumlar için de yapın.

Adım 6: Şimdi katmanlar paneline gidin ve çalışmanızın başında eklediğiniz sıcak noktanın kilidini açıp silin.

Adım 7: 1.Duruma tıklayın ve en üstteki daireyi silin. 2.Duruma tıklayın ve en üstteki dairenin sağ altındaki daireyi silin.

Adım 8: Silme işlemini diğer durumlar için de daireleri sırasıyla silerek uygulayın.

Adım 9: Çalışmanızı özellikler denetçisinin sağ altındaki “Oynat/Durdur” düğmesi ile test edin.

Adım 10: Animasyon çok hızlı ise durumlar panelinden durumların yanındaki “7” zaman değerini 100 olarak her bir durum için değişirin. (Toplu halde değiştirmek için tüm durumları klavyeden shift veya Ctrl yardımı ile seçin herhangi bir durumdaki 100 değerine tıklayın 50 yapın ve “Enter” tuşuna basın tüm durumlar 50 olarak bir defada değişecektir.) Not: Her bir geçiş 100/100 = 1 saniye olacaktır.

Adım 11: Çalışmanızı özellikler denetçisinin sağ üstündeki “Oynat/Durdur” düğmesi ile test edin. Geçiş süresinin yeterli olduğunu düşünmüyorsanız değişiklik yapabilirsiniz.

Adım 12: Şimdi “En İyileştir” paneline tıklayın aşağıdaki gibi “Animasyonlu GIF Web Uyumlu 128” yazan seçeneği seçin ve “Dışarı Aktar” ile çalışmanızı GIF olarak masaüstüne kaydedin.

Adım 13: GIF animasyonu dosyanızı resim göstericide veya web tarayıcısında açıp animasyonun çalışıp çalışmadığını kontrol edin.

2.Yol: “Durumlara Dağıt” komutu ile GIF oluşturmak;

Adım 1: Aşağıda verilen ölçülere uygun yeni bir belge oluşturun. (Beyaz arka plan G:800px Y:600Px)

Adım 2: Tuval üzerine aşağıdaki nesneleri çiziniz. Üçgenlerin boyutlarını Genişlik:75 Yükseklik:87 olarak belirleyiniz. Çizdiğimiz bu nesnelerin durumlar panelindeki Durum 1 de olduğunu kontrol edin.

Adım 3: Çizdiğiniz 8 nesnenin hepsini seçiniz ve durumlar panelindeki “Durumlara Dağıt” komutunu kullanın.

Adım 4: Görüntü işleme yazılımı, resimleri sırası ile durumlara dağıtacaktır. İsterseniz durumları ayrı ayrı da düzenleyebilirsiniz. (Çizdiğimiz 8 adet üçgenin her biri aşağıdaki gibi 8 adet duruma dağıtılmış olacaktır. Yani soldaki ilk üçgen Durum 1’in içinde, 2.üçgen Durum 2’nin içinde, …… olacak.) Örneğin aşağıda 5 durumdaki üçgen görünmektedir. Örneğin aşağıda 5 durumdaki üçgen görünmektedir.

Adım 5: Çalışmanızı özellikler denetçisinin sağ üstündeki “Oynat/Durdur” düğmesi ile test edin.

Adım 6: Animasyon çok yavaş ise durumlar panelinden durumların yanındaki “100” zaman değerini 50 olarak her bir durum için değişirin. (Toplu halde değiştirmek için tüm durumları klavyeden shift veya Ctrl yardımı ile seçin herhangi bir durumdaki 100 değerine tıklayın 50 yapın ve “Enter” tuşuna basın tüm durumlar 50 olarak bir defada değişecektir.) Not: Her bir geçiş 50/100 = 0,5 saniye olacaktır.

Adım 7: Çalışmanızı özellikler denetçisinin sağ üstündeki “Oynat/Durdur” düğmesi ile test edin. Geçiş süresinin yeterli olduğunu düşünmüyorsanız değişiklik yapabilirsiniz.

Adım 8: Şimdi “En İyileştir” paneline tıklayın aşağıdaki gibi “Animasyonlu GIF Web Uyumlu 128” yazan seçeneği seçin ve “Dışarı Aktar” ile çalışmanızı GIF olarak masaüstüne kaydedin.

Adım 9  : GIF animasyonu dosyanızı resim göstericide veya web tarayıcısında açıp animasyonun çalışıp çalışmadığını kontrol edin.

Web Sayfaları İçin Resimler Hazırlayabilme
İşletmelerde Mesleki Eğitim ( İşletmelerde Beceri Eğitimi ) Arşivi İçin Tıklayınız…