Bilişim İzle | Bilişim Teknolojileri Sitesi

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

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

Fireworks Düğme (Buton) Oluşturma-1
Fireworks Düğme (Buton) Oluşturma-1

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

Fireworks Düğme (Buton) Oluşturma-2
Fireworks Düğme (Buton) Oluşturma-2

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

Fireworks Düğme (Buton) Oluşturma-3
Fireworks Düğme (Buton) Oluşturma-3

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

Fireworks Düğme (Buton) Oluşturma-4
Fireworks Düğme (Buton) Oluşturma-4

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

Fireworks Düğme (Buton) Oluşturma-5
Fireworks Düğme (Buton) Oluşturma-5

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.

Fireworks Düğme (Buton) Oluşturma-6
Fireworks Düğme (Buton) Oluşturma-6

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

Fireworks Düğme (Buton) Oluşturma-7
Fireworks Düğme (Buton) Oluşturma-7

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.

Fireworks Düğme (Buton) Oluşturma-8
Fireworks Düğme (Buton) Oluşturma-8

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.

Fireworks Dışarı Aktarma İşlemleri-1
Fireworks Dışarı Aktarma İşlemleri-1

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

Fireworks Dışarı Aktarma İşlemleri-2
Fireworks Dışarı Aktarma İşlemleri-2

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

Fireworks Dışarı Aktarma İşlemleri-3
Fireworks Dışarı Aktarma İşlemleri-3

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

Fireworks Dışarı Aktarma İşlemleri-4
Fireworks Dışarı Aktarma İşlemleri-4

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

Fireworks Dışarı Aktarma İşlemleri-5
Fireworks Dışarı Aktarma İşlemleri-5

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

Fireworks Dışarı Aktarma İşlemleri-6
Fireworks Dışarı Aktarma İşlemleri-6

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

Fireworks Dışarı Aktarma İşlemleri-7
Fireworks Dışarı Aktarma İşlemleri-7

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

Fireworks Dışarı Aktarma İşlemleri-8
Fireworks Dışarı Aktarma İşlemleri-8

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

Fireworks Dışarı Aktarma İşlemleri-9
Fireworks Dışarı Aktarma İşlemleri-9

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ı

Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması-1
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması

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

Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması-2
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması-3
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması

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.

Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması-4
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması

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

Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması-5
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması

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.

Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması-6
Fireworks Soğan Zarı (Onion Skin) Kullanma Uygulaması

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,

Fireworks Vektör Maskeleri Oluşturma-1
Fireworks Vektör Maskeleri Oluşturma-1

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

Fireworks Vektör Maskeleri Oluşturma-2
Fireworks Vektör Maskeleri Oluşturma-2

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.

Fireworks Vektör Maskeleri Oluşturma-3
Fireworks Vektör Maskeleri Oluşturma

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;

Fireworks Metni Bir Maske Olarak Kullanma-1
Fireworks Metni Bir Maske Olarak Kullanma

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.

Fireworks Metni Bir Maske Olarak Kullanma-2
Fireworks Metni Bir Maske Olarak Kullanma

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,

Fireworks Açılır Menü Ekleme-1
Fireworks Açılır Menü Ekleme

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;

Fireworks Açılır Menü Ekleme-2
Fireworks Açılır Menü Ekleme

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

Fireworks Açılır Menü Ekleme-3
Fireworks Açılır Menü Ekleme

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.

Fireworks Açılır Menü Ekleme-4
Fireworks Açılır Menü Ekleme

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.

Fireworks Açılır Menü Ekleme-5
Fireworks Açılır Menü Ekleme

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

Fireworks Açılır Menü Ekleme-6
Fireworks Açılır Menü Ekleme

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.

Fireworks Açılır Menü Ekleme-7
Fireworks Açılır Menü Ekleme

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

Fireworks Açılır Menü Ekleme-8
Fireworks Açılır Menü Ekleme

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.

Fireworks Açılır Menü Ekleme-9
Fireworks Açılır Menü Ekleme

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

Fireworks Açılır Menü Ekleme-10
Fireworks Açılır Menü Ekleme

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.

Fireworks Açılır Menü Ekleme-11
Fireworks Açılır Menü Ekleme

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

Resimler İle Web Araçları Hazırlayabilme

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

BİR YORUM YAZIN

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış.