Resimler İle Web Araçları Hazırlayabilme
Resimler İle Web Araçları Hazırlayabilme Staj Defteri Doldurma etkinliğinde İşletmelerde Beceri Eğitimi Dersi Staj Dosyası Konuları kapsamında Adobe Fireworks programında Düğme Ekleme Oluşturma, Dışarı Aktarma İşlemleri, Soğan Zarı (Onion Skin) Kullanma, Vektör Maskeleri Oluşturma, Metni Bir Maske Olarak Kullanma, Açılır Menü Ekleme uygulama faaliyetleri gibi staj dosyasına yazılacak konuları içerir. Yazımızın sonunda dosyaların indirme linkleri mevcuttur.
Resimler İle Web Araçları Hazırlayabilme Staj Defteri Doldurma Etkinliği
Resimler İle Web Araçları Hazırlayabilme Staj Defteri Doldurma etkinliğinde İşletmelerde Beceri Eğitimi Dersi Staj Dosyası Konuları kapsamında Adobe Fireworks programında Düğme Ekleme Oluşturma, Dışarı Aktarma İşlemleri, Soğan Zarı (Onion Skin) Kullanma, Vektör Maskeleri Oluşturma, Metni Bir Maske Olarak Kullanma, Açılır Menü Ekleme uygulama faaliyetleri gibi staj dosyasına yazılacak konuları içerir. Yazımızın sonunda dosyaların indirme linkleri mevcuttur.
Uygulama Faaliyeti-1
Düğme Ekleme Oluşturma

Adım 1: “Düzenle / Ekle / Yeni Düğme (Ctrl + Shift + F8)” komutunu seçiniz.

Adım 2: Düğme düzenleyicisi başlangıçta “Yukarı” seçeneği ile açılır.

Adım 3: “Yukarı” seçeneğine düğmenizi çizin ve içine yazısını yazın. (Düğmeye stiller panelinden web düğmesi stili ekleyebilirsiniz.)

Adım 4: Yazıyı ve yuvarlak köşeli dikdörtgeni seçin ve kopyalayın.

Adım 5: Sayfada boş bir yere tıklayın. Durum açılır menüsü içinden “Üzerinde” seçeneğini seçin. Buraya kopyaladığınız düğmeyi yapıştırın. (Ctrl+V)
Adım 6: Kopyalama işleminden sonra çizim üzerinde küçük değişiklik yapabilirsiniz. Örneğin metinin rengini beyaz yapın. (Düğmenin üzerinde durumu için)
Adım 7: Diğer durumlar için de kopyala ve yapıştır yapıp küçük farklılıklar yaparak aşağı, aşağıdayken üzerinde adımları için adım 5 ve adım 6’yı tekrarlayın.

Adım 8: Sol üst köşedeki mavi oka tıklayarak düğme düzenleyicisinden çıkın. Çalışmanızı F12 ile test edin.

Adım 9: Şimdi düğmeye bir kez tıklayın. Özellikler denetçisinde Bağ yazan yere bu düğmeye tıklandığında hangi web sitesine gitmesini istiyorsanız o sitenin adresini yazın. Ben “https://www.meb.gov.tr/” yazıyorum. Alt yazan yere bu butonun açıklamasını yazın. Ben “Meb Anasayfa” yazıyorum. Son olarak Hedef yazan yere de düğmeye tıklandığında nasıl açılacağını seçin. Ben yeni pencerede açılması için “_blank” seçeneğini seçiyorum.

Adım 10: Çalışmanızı F12 ile test edin.
Uygulama Faaliyeti-2
Dışarı Aktarma İşlemleri
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.

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

Adım 2: Tuval rengini #B20000 olarak belirleyiniz.

Adım 3: Tuvalin tam ortasına boyutları ve kalınlığı yukarıdaki gibi olan bir çember çiziniz.

Adım 4: Tuvalin tam ortasına boyutları ve kalınlığı yukarıdaki gibi olan bir daire çiziniz.

Adım 5: Çember ve daireyi seçerek ikisine de degrade aracı ile yukarıdaki gibi renk geçişi uygulayın.

Adım 6: Tuval arkaplanını siyah yapın ve tuvale sığdır deyin.

Adım 7: Çalışmanın bitmiş hali yukarıdaki gibidir.

Adım 8: Şimdi en iyileştir panelini kullanıp dışarı aktarma türünü JPEG olarak seçin.

Adım 9: Son olarak “Dışarı Aktar” deyip açılan pencereden kaydedilecek yeri seçtikten sonra dosya adını yazın, “Dışa Aktar” yazan yerden Sadece Görüntüler” yazanı seçip ve kaydet düğmesine basın. Çalışmanızı JPEG formatında istediğiniz yere kaydetmiş olacaksınız.
Adım 10: En iyileştir panelini kullanarak diğer resim formatları için de dışarıya aktarma işlemini gerçekleştirin.
Uygulama Faaliyeti-3
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.
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.
Soğan Zarı (Onion Skin) Kullanma Uygulaması

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


Adım 2: Tuval üzerine yukarıdaki nesneleri çizin. Üçgenlerin boyutlarını Genişlik:75 Yükseklik:87 olarak belirleyin. 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 yukarı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 yukarıda 5. durumdaki üçgen görünmektedir.

Adım 5: “Soğan Zarı” Durumlar Panelinin sol altında bulunur. Soğan Zarına tıklayın ve açılan menüden ”Tüm durumları gösteri” seçin. Durum numaralarının sol tarafında yukarıdan aşağıya doğru bir aralık seçim okları oluşacaktır. İsterseniz bu okların bulunduğu kutucuklara fare ile tıklayarak soğan zarının gösterileceği durumları değiştirebilirsiniz.
“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.
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.
Uygulama Faaliyeti-4
Vektör Maskeleri Oluşturma
Fireworks 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 ön izlemesi 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,

Adım 1: Arkaplan olarak istediğiniz bir resim ekleyiniz. Ardından maske olmasını istediğiniz vektör şekli seçiniz.

Adım 2: Vektör nesnelerini seçin ve “Düzenle / Kes (Ctrl+X)” komutu ile kesiniz.
Adım 3: Maskelemek istediğiniz resim nesnesini seçiniz.

Adım 4: “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.
Uygulama Faaliyeti-5
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;

Adım 1: Arkaplan olarak istediğiniz bir resim ekleyiniz.Ardından maske olmasını istediğiniz metni yazıp seçiniz.
Adım 2: “Düzenle / Kes (Ctrl+X)” komutunu seçiniz.
Adım 3: Maskelemek istediğiniz nesneyi seçiniz.

Adım 4: “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.
Uygulama Faaliyeti-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.
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,

Adım 1: 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.
Adım 2: “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.
Adım 3: Ekrana gelen “Açılır Menü Düzenleyici” iletişim penceresinden;

Adım 4: İçerik sekmesini tıklayınız ve ardından “Menü Ekle” komutunu tıklayınız.

Adım 5: 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.

Adım 6: 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.

Adım 7: Görünüm sekmesini seçiniz ve menü görünümünü ayarlayınız.

Adım 8: Gelişmiş sekmesini tıklayınız ve menü ile ilgili gelişmiş ayarları yapınız.
-Hücre girintisi ile menü metinlerinin girintisini ayarlayabilirsiniz.
– Hücre aralığı ile menüler arası boşluğu ayarlayabilirsiniz.
– Hücre gecikmesi ile menünün ekranda kalma süresini ayarlayabilirsiniz.

Adım 9: Konum sekmesini tıkayınız ve menünün konumunu ayarlayınız.

Adım 10: “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.

Adım 11: Tarayıcıda önizleme ile menüyü görüntüleyiniz.

Adım 12: 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.

Adım 13: 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.
Böylelikle Resimler İle Web Araçları Hazırlayabilme isimli staj defteri doldurma konumuzun sonuna geldik. İşletmelerde Beceri Eğitimi Staj Defteri Ders Notları Arşivimizden diğer haftalara ulaşabilirsiniz…
|
Resimler İle Web Araçları Hazırlayabilme |
|
İşletmelerde Mesleki Eğitim ( İşletmelerde Beceri Eğitimi ) Arşivi İçin Tıklayınız… |
|

