Fireworks programının photoshop’ a göre en büyük artılarından birisi web tasarıma olan yakınlığıdır. Bunu ilk dersimizde kısaca özetlemeye çalışmıştım. Grafik animasyon dersinde sınav sorusu olarak sorduğum fireworks ile web sitesi hazırlama konusunu bu derste işleyerek Fireworks ile ilgili anlatacağım konuları bitireceğim. 

Anlatıma başlamadan önce bu dersin önceki 10 derse göre biraz daha zor ve karışık gelebileceğini söylemeliyim. Faydalı olmaası dileğiyle, çalışmaya başlıyoruz

1. İlk olarak ders sonunda yapacağımız web sayfamızın ön izlemesini görmek içinde buraya tıklayabilirsiniz.
2. Eğer bu uygulamayı bilgisayarınızda yapmak isterseniz sınav sorusunu, kaynak dosyaları ve uygulamanın son halini buraya tıklayarak indirebilirsiniz.
3. Yukarıdaki 2 adımı geçtiyseniz ve bu satırları okuyorsanız fireworks ile web sayfası yapma konusunda hala ısrarlısınız demektir: ) 600*500 boyutlarında istediğiniz arka plan renginde bir Fireworks belgesi açınız. Açmış olduğunuz belgenin orta bölümünde aşağıda gibi bir içerik alanı oluşturunuz. Bu bölümü beyaz renkli yada daha açık renkli oluşturabiliriz. Sayfa tasarımını tamamen size bırakıyorum:) Ben ortadaki beyaz renkli içerik alanı için sayfaya uygun bir kare ekledim, eklemiş olduğum karenin köşelerini özellikler panelinden yuvarlıklık değerini 20 yaparak oval hale getirdim. Sağ kısmı sayfanın dışında kalacak şekilde belgeye ekledim. Yani karenin bir bölümü çalışma alanının dışında kaldı. Buraya kadar olan kısmın önizlemesini aşağıdan görebilirsiniz.

   

4. Sonraki adımda logoyu içerik alanın sol üst köşesine, başlığı ise içerik alanının üzerindeki boşluğa gelecek şekilde ekliyorum. Renk uyumunu yakalamak adına, logoda yer alan sarı renk ile içerik alanını belirleyen kareye 4px kalınlığında bir çerçeve kenarlığı ekliyorum. Yukarıdaki başlığıda yine aynı renk ile yazıyorum. Bu yazıya yansıma efektini nasıl vereceğinizi bilmiyorsanız Fireworks dersleri sayfasından 7 numaralı derste cd görüntüsüne yansıma efekti verdiğimiz bölüme bakabilirsiniz.
   
5. Artık ana menünün yer alacağı butonları eklemeye başlayalım. Logo nun altında yer alan boşluğa yine aynı sarı tonlarda köşeleri oval olan bir dikdörtgen ekliyoruz. Bu dikdörtgeni kopyala yapıştır yöntemiyle çoğaltarak 5 tane olacak şekilde sayfaya ekliyoruz. Web sayfamızda yer alacak alt sayfa isimlerini bu butonların üzerine ekliyoruz. Menü için eklemiş olduğunuz dikdörtgenlerin içerisini stil panelinden seçeceğiniz stillerle de doldurabilirsiniz.
   
6. Sitenin alt bölümünde bütün sayfalarda görünecek olan site tasarım şeridini ekleyip, bu bölüme istediğiniz yazıyı yazabilirsiniz. Ana araç çubuğu üzerinde ve alt bölümde yer alan web grubu araçları içerinden dikdörtgen sıcak nokta aracını seçiniz. (Aşağıdaki resimde bu aracın işaretlendiğini göreceksiniz) Bu araç seçili iken yine aşağıdaki resimde olduğu gibi butonların üzerine yaklaşık olarak aynı büyüklükte bir dikdörtgen çiziniz. Bu durumda özellikler panelinde aşağıdaki resimde görülen Bağ, alt ve hedef alanlarının aktif hale geldiğini göreceksiniz. Bu bölümde bağ alanına ilgili sayfayı ne olarak isimlendireceksiniz onun ismi . htm şeklinde dosya ismi girmelisiniz. Yukarıdaki örnek sayfa için söyleyecek olursam : ana sayfa için index.htm, resimler.htm, hakkimizda.htm, personel.htm ve iletisim.htm verilerini girebilirsiniz. Sizde web sayfanızın alt sayfalarına isim verirken Türkçe karekter kullanmamaya dikkat edin ve ana sayfasını her zaman index ismiyle kaydetmeyi unutmayın.
   
7. Sayfaya eklemiş olduğunuz bütün butonlar için yukarıdaki işlemi mutlaka peşinen yapmalısınız. Sonradan yapacağınız değişikliklerde problem yaşama ihtimalinizin yüksek olduğunu unutmayın. Artık sitenizin sabit kalacak olan bütün bölümlerini oluşturduk. Yani şu ana kadar hazırladığımız bölümler bütün alt sayfalarda sabit olarak kalacaktır. Biz bu noktadan sonra içerik için boş bıraktığımız beyaz alana istediğimiz içeriği ekleyip Dosya menüsünden dışa aktar diyerek kaydedeceğiz. Kayıt ekranında dosya adı kısmına butonlarda kullandığımız sayfa isimlerini kullanmayı unutmayın. Tek harfi bile yanlış yazsak linklerin çalışmayacağını bilmeliyiz. Dosya adı altında yer alan Dışa aktar  kısmını Html ve Görüntüler olarak seçiyoruz. Bu şekilde kaydet dediğimizde istediğimiz isimde bir htm sayfası bir tane de resim oluşturması gerekiyor. Site içeriğinin olduğu yeri temizleyerek yeni bir içerik ekleyip bu işlemi 5 defa (yada kaç tane buton kullandıysanız o sayıda) yapıyoruz.. Benim sayfamda 5 tane buton olduğu için ben beyaz alanı 5 defa değiştirerek farklı kaydet yöntemiyle 5 adet htm dosyası oluşturuyorum.
8. Bilgisayarınızda index.htm ye tıklayarak sayfanızı kontrol edebilirsiniz. Eğer bütün bağlantılarınız sorunsuz çalışıyorsa bütün bu dosyaları web servere aktararak sitenizi yayına koyabilirsiniz. Bu yöntemle 1-2 saat gibi kısa bir sürede basit bir web sayfasını kendiniz hazırlayıp, yayınlayabilirsiniz.
9. Bütün sayfaları farklı kaydederken aynı zamanda Fireworks belgesi olarak (*.png) formatında da kaydederek yedeklerini alabilirsiniz. Böylelikle küçük değişiklikler yapmak istediğinizde png formatındaki sayfayı değiştirip tekrar farklı kaydet yöntemiyle htm formatına dönüştürabilirsiniz.
10. Aşağıda yer alan yorum formu ile aklınıza takılan bölümleri paylaşabilirsiniz. İlk bölümde paylaşmış olduğum linki tekrar paylaşayım. Bu derste yapmış olduğumuz 5 safyalık web sitesinin bitmiş halini buradan görebilirsiniz.

İlk defa girdiğim Nesne Tabanlı Programlama dersi ile ilgili mevcut modüller ile birlikte internette bulduğum kaynaklarıda birleştirerek haftalık sunular hazırlamaya çalışacağım. Hazırlamış olduğum sunuları yazımın devamından her hafta indirebilirsiniz.

• 1. Hafta : Modüldeki sözel ifadeleri ve visual studio ortamını tanıtarak geçirdim, bu bölüm ile ilgili herhangi bir sunu hazırlama gereği duymadım.
• 2. Hafta : ilk c# uygulaması ve basit örnekler [26.09.2011]
• 3. Hafta : c# veri türleri ve tür dönüşümleri [03.10.2011]
• 4. Hafta : c# ta operatörler [10.10.2011]
• 5. Hafta : if else deyimi ve örnekleri [17.10.2011]
• 6. Hafta : switch case, for deyimi ve örnekleri [24.10.2011]
• 7. Hafta : while, do while deyimleri ve örnekleri [27.10.2011]
• 8. Hafta : diziler ve rastgele sayı üretme [21.11.2011]

Not [ programlama temelleri ders notları ] : Nesne tabanlı programlama dersi için hazırlamış olduğum yukarıdaki slaytları programlama temelleri dersi içinde kullanabilirsiniz. Programlama temelleri dersinde algoritme ve akış diyagramı konularından sonra yukarıdaki slaytları kullanarak c# ve visual studio ya giriş yapabilirsiniz.

Akdeniz bölgesinde (Manavgat – Antalya) hizmet veren Akdeniz eğitim ve danışmanlık web sayfası Şubat,2012 itibari ile yayına girmiştir. Antalya Mental Aritmetik , Hızlı okuma, zihinden matematiksel işlemler gibi konularda hizmet veren eğitim kurumu, çocukların matematik korkularını yenmeleri konusunda yardım ediyor.

İnternet tarayıcımın (Firefox) sık kullanılanlar bölümü her zaman beğendiğim web sayfalarının adresleri ile dolup taşmıştır. Yeni klasörler açıp bu adresleri gruplayarak sık kullandığım web adreslerini düzenlemeye çalışsam da o dağınıklığı önlemek benim için her zaman sıkıntı olmuştur. Bu duruma çözüm olarak uzun bir süre Google’ in Web Geçmişi özelliğini kullandım. Böylece internet bağlantısı olan heryerden favori sayfalarıma kolayca erişebiliyordum.

Sonrasında beğendiğim bu adresleri kendi web sayfamda paylaşmayı düşündüm. Son olarakta şimdilik test yayınına başladığım bu site ile beğendiğim web sayfalarını kaydedip aradığımda kolayca bulabileceğim bir dizin hazırlamak istedim. Siteyi hazırlamaya başlarken sadece beğendiğim sayfaları paylaşmayı düşünüyorken, sonrasında biraz daha ince eleyip pagerank, dmoz, alexa, site yaşı, özgün site içeriği gibi etkenleri göz önünde bulundurmaya karar verdim.

Böylece her geçen gün biraz daha büyük bir çöplüğe dönüşen internet dünyasında güzel zaman geçirebileceğiniz yada doğru bilgilere ulaşabileceğiniz web sayfalarını bir araya toplamak istiyorum.

Sizlerin yorum, öneri ve düşünceleriniz ile dizini daha kullanılabilir hale getirmek istiyorum. Bu nedenle 2dk ayırıp siteyi ziyaret eder ve düşüncelerinizi iletişim formu yada aşağıdaki yorum formu ile paylaşırsanız sevinirim….

Umarım beğenirsiniz.

www.internetsitesi.org

Daha önceki yıllarda Fireworks programı ile hareketli gif animasyon hazırlama konularında 2 örnek uygulama anlatımında bulunmuştum. Bu dersteki anlatımın hem cs4 programına uygun hemde Türkçe Fireworks programına göre olması nedeniyle gif animasyon yapımını bir kez daha ele almakta fayda var diye düşündüm Gif uzantılı dosyaların bir kısmı jpg yada png uzantılı dosyalarda olduğu gibi tek bir kareden oluşuyorken, bazılarında ise birden çok kareden meydana gelebilir.

Gif dosyaların mantığını çizgi filmlere benzetebiliriz. Gif dosyayı açtığımızda belirli zaman aralıkları ile farklı resimler arka arkaya görüntülenir.  Böylelikle kareler arasındaki geçişleri kısa tutarak akıcı görüntüler elde edilebilir. Öncelikle teknik olarak bu işin nasıl olduğunu anlatmaya çalışalım.

llk basit gif animasyonumuzu oluşturmak için 468 * 60 boyutlarında boş bir fireworks belgesi açalım ve arka planını siyah renk yaparak üzerine istediğimiz herhangi bir yazıyı yazalım.

Şimdi ise farklı bir belgeye geçmeden yeni bir durum (kare) oluşturacağız. Bunun için sağ bölümde yer alan durumlar panelini kullanacağız. Eğer durumlar paneli sizde aktif değilse Pencere menüsünden durumlar a tıklayarak aktif hale getirebilirsiniz. Eğer durumlar panelini aktif hale getirdiyseniz aşağıdaki resimde işaretlemiş olduğum Yeni/Çoğaltılmış durum düğmesine tıklayarak yeni bir kare ekleyin.

Yukarıdaki düğmeye tıklayarak yeni bir durum ekleriz. Eklemiş olduğumuz yeni durumla birlikte boş bir sayfa ekrana gelecektir. Buraya bir önceki durumda eklemiş olduğumuz yazıyı daha büyük puntolarla yazalım.

Son olarak belgemizde yer alan 2 durumun ekranda kalma sürelerini ayarlayacağız.

Başlangıçta 7/100 sn olan ekranda kalma sürelerini 20 olarak değiştirdikten sonra gif animasyon yapımı ile ilgili son ve en önemli adıma geçiyoruz. Bunun için sağ bölümdeki en iyileştir panelinin açık olması gerekmektedir. En iyileştir panelindeki dosya türünü mutlaka Animasyonlu Gif olarak değiştiriyoruz.

Eklemiş olduğunuz durumlarınızın önizlemesini görmek için aşağıdaki resimde işaretli olan Oynat/durdur düğmesini kullanabilirsiniz.

Son olarak belgenizi dosya menüsünden dışa aktar diyerek kaydedebilirsiniz. Artık sadece 2 kareden oluşan en basit yapıdaki animasyonumuz hazır durumda :

2 karelik animasyonumuzda 20 ms ilk kare ekranda kalıp sonrasında 2.kare ekrana gelmektedir. 20 ms ekranda kaldıktan sonra animasyon sona erdiği için tekrar en başa dönmektedir.

Son olarak internette bulduğum ve beğendiğim hareketli gif animasyon örneklerini paylaşmak istiyorum. Buradaki örnekleri yada internette bulacağınız gif dosyalarını fireworks ile açıp durumlar panelinden inceleyebilirsiniz. Böylelikle animasyonların kaç kareden oluştuğunu, önceki kare ile bir sonraki kare arasındaki farkı daha iyi gözlemleyebilirsiniz.

Hareketli Gif Örnekleri :

Hazırlamış olduğum web sayfalarımdan bir tanesi için scrollbar’ ın hemen yan tarafında sabit kalan bir reklam göstermek için internette küçük bir araştırma yaptım. Birçok forumda yer alan yazımın devamındaki kodları wordpress’ e aktardığımda ise sorunsuz bir şekilde sabit reklam gösterimini yakaladım. css ve html kodundan oluşan 2 küçük kod parçasını yazımın devamında görebilirsiniz.

Öncelikle kodları eklemeden önce ne işe yaradıklarını kısa özetlemek istiyorum.

Sitenin en sağında yer alan ve kaydırma çubuğunun hemen öncesinde yer alan büyük sütun şeklinde reklamları özellikle haber sitelerinde mutlaka görmüşsünüzdür. Kaydırma çubuyla birlikte bu reklamlarda hareket ettiği için reklam verenler tarafından sıklıkla tercih edilen etkili bir alan olarak kabul ediliyor.

Aşağıda vereceğim kodlar ile bu şekilde bir reklamı wordpress sayfanıza 2 adımda ekleyebilirsiniz.

Aslında verdiğim kodları wordpress dışındaki içerik yönetim sistemlerinde de yada diğer html, php veya asp sitelerinizde de kullanabilirsiniz.

Tek yapmanız gereken css ve html kodunu sitenizin doğru yerine eklemek olacaktır.

Ben wordpress için anlatıma geçiyorum. WordPress sitenizde aktif olarak yer alan style.css dosyanızı ve index.php dosyanızı açın.

• 1- style.css dosyası içerisine aşağıdaki kodu ekleyin.

#kayan_reklam {
position: fixed;
_position: absolute;
top:0;
_top:expression(eval(document.body.scrollTop));
right:0;
margin:5;
text-align:right;
width:160px;
}

• 2- footer.php dosyasını açıp, en üstüne aşağıdaki kodu ekleyin.

<div id=”kayan_reklam”>

Reklam kodlarınızı buraya ekleyebilirsiniz

</div>

Yukarıdaki 2 adımı gerçekleştirmeden önce her ihtimale karşılık dosyalarınızın yedeklerini almanızı tavsiye ederim.

footer.php dosyası içerisine ekleyeceğiniz reklam kodları bölümüne ister adsense kodunuzu, isterseniz grafik reklam kodunuzu ekleyip kullanabilirsiniz.

Bol kazançlar : )

Fireworks Cs4 derslerine bir süredir ara vermiştik. Bu ders ile birlikte kaldığımız yerden devam edeceğiz. 9.dersimizde Adobe Fireworks Cs4 yazılımı ile hem maskelemeyi hemde otomatik vektör maskesi özelliklerini inceleyeceğiz.

Maskelemek Nedir?

“Maskelemek Nedir?” sorusunu “fotoğrafınızın sınırlarını vektörel bir çizimle belirlemektir.” şeklide cevaplayabiliriz. Sayfanıza eklediğiniz herhangi bir fotoğrafı maskeleme yöntemi ile farklı şekillere sokabilirsiniz. Örneğin maskeleme yöntemi ile fotoğrafınızı daire, yıldız, ok, simit yada çokgen gibi vektörel bir şekile benzetebilirsiniz.

• Maskeleme işlemi için ilk olarak maskelemek istediğimiz herhangi bir fotoğrafı Firerowks programı ile açıyoruz.
• 2. adımda bu fotoğrafı nasıl bir vektörel şekle benzetmek istiyorsak o şekli fotoğrafımızın üzerine ekliyoruz. Vektörel bir şekil eklemek için Araçlar çubuğundaki vektör nesnelerini kullanabilirsiniz. Fotoğrafın üzerine maskelemek istediğiniz boyutlarda ve mutlaka beyaz renkte daire, kare, çokgen, ok,  yıldız vs çizebilirsiniz. Bu çizimin fotoğrafın üzerinde olması gerektiğini unutmayın.
• 3. ve son adımda ise belgemizde bulunan fotoğraf ile birlikte vektörel şeklimizi aynı anda seçili hale getiriyoruz. (Ctrl+A yapabilirsiniz.) Son olarak Değiştir menüsünden Maske/ Maske olarak grupla’ ya tıklıyoruz.

Maskeleme yöntemini kullanarak elde ettiğim örnekleri aşağıda görebilirsiniz.

Otomatik Vektör Maskesi

Fireworks programında otomatik vektör maskelerini kullanarak fotoğraflar arasında yumuşak geçişler sağlayıp, fotoğrafları bir bütün gibi gösterebiliriz. 3 tane fotoğrafı yan yana koyarak bir banner yapmak istediğimizi varsayalım. Ortaki fotoğrafa sağ ve sol bölümlerinden geçiş sağlamamız gerekirken, sağdaki fotoğrafa sol, soldakine ise sağ taraftan bir geçiş sağlamalıyız. Bütün bunları kolayca yapabilmek için Fireworks’ ün Otomatik vektör maskesi özelliğini ve bu menü altında yer alan 8 farklı vektör maskesi seçeneğinden birisini kullanabilirsiniz.

• Otomatik vektör maskesini kullanmak için öncelikile fotoğraflarımızı tek bir belgede topluyoruz. Ben aşağıda göründüğü gibi 3 fotoğrafı yanyana ekliyorum.

• Şimdi bu 3 fotoğrafa otomatik vektör maskesi ekleyelim. Bunun için yukarıda söylediğim menüyü takip edeceğiz. Bu 3 fotoğraftan soldaki fotoğrafı seçerek Komutlar menüsü altından Yaratıcı > Otomatik Vektör Maskesi’ ne tıklıyoruz.8 farklı alternatifin yer aldığı aşağıdaki pencere ekrana gelecektir.

• Bu seçeneklerden birisini seçerek önizlemesinde görünen efekti fotoğrafınıza uygulayabilirsiniz. Bu şekilde 3 fotoğrafı tek tek seçerek fotoğraf sağ, sol yada her iki taraflarına efekt uygulayarak aşağıdaki gibi örnekler elde edebilirsiniz. Arka plan renklerinide değiştirerek çalışmanızı renklendirmeyi unutmayın.

5 yıl; Kocaeli Üniversitesi’ nde eğitimime devam ediyorken – 2005 yada 2006 yılı olabilir – gitmiş olduğum web tasarım kursuyla başlayan, 2006 Aralık ayında kişisel web sayfamı yayına koymamla devam eden keyifli bir süreçtir. Her ne kadar 5 yılda 1 arpa boyu kadar yol olmadığıma inansamda internet aleminde kişisel bir sayfa için azımsayacak istatistikleride yakalamışlığım oldu Zaman zaman pagerank3- pagerank4 değer alan web sayfam – ki şuan pr2- dmoz kaydı almayı da başaran tek sayfam oldu : ) Son 3-4 aydır günlük 500-600 tekil ziyaretçi ortalaması ile devam eden web sayfama konuk olan tüm dostlara selam olsun…

Flash belleklerde yer alan bu virüs önce klasörlerinizin ismiyle bir kısayol oluşturuyor, sonrada dosyalarınızın yer aldığı klasörü gizli hale getiriyor. Bir süredir okulda beni zor durumda bırakan bu virüsten kurtulmanın ve dosyalarınızı kolay şekilde tekrar görünür hale getirmenin yolunu anlatmaya çalışacağım.

Öncelikle flash belleğinizi açtığınızda klasörlerinizin silindiğini ve yerlerine sadece kısayollarının geldiğini görürseniz hemen korkmayın. Çok büyük ihtimalle flash belleğinize bulaşan virüs klasörlerinizi gizli hale getirmiştir. Bunun sağlamasını yapmak içinde klasör ismini adres çubuğuna yazdığınızda klasör içeriğini görebileceksinizdir. Bu yöntemide geçici bir çözüm olarak kullanabilirsiniz.

windows xp yada windows 7 , hangi işletim sistemini kullanıyor olursanız olun ilk olarak gizli dosyaları görünür hale getirmeniz gerekiyor. Bunun için denetim masasından klasör seçeneklerini kullanabilirsiniz. Windows 7 de denetim masasında Görünüm menüsü altında Klasör seçeneklerini tıklarsanız bir pencere açılacaktır. Buradan yine görünüm sekmesine geliyoruz. Buradan hem -gizli dosya, klasör ve sürücüleri göster seçeneğini aktif hale getiriyoruz, hem de Korunan işletim sistemi dosyaları gizle seçeneği önündeki işareti kaldırıyoruz.

Gizli dosyaları görünür hale getirdikten sonra son olarak aşağıdaki ücretsiz ve küçük programı bilgisayarınıza indirerek klasör ve dosya özelliklerinde kolayca değişiklik yapabilirsiniz.

Türkçe dil desteğide olan Attribute Changer programının 6.10c versiyonunu indirmek için buraya tıklayın.

Programı bilgisayarınıza kurduktan bütün klasör ve dosyalar üzerinde sağ tıkladığınızda özniteliklerini değiştir diye yeni bir menü eklendiğini göreceksiniz. Sizde gizli olarak görünen klasörlerin üzerinde sağ tıklayıp bu menüyü seçerseniz ve açılacak olan menüden de Gizli seçeneği önündeki işareti kaldırırsanız hızlı bir şekilde dosyalarınızı görünür hale getirmiş olursunuz.

Normalde bu program olmadan da bu işlemi yapabilirsiniz ama sık sık aynı virüsle karşılaşıyorsanız bu program size zamandan tasarruf sağlayacaktır.

Aslında bu başlık altında yazacak olduğum örnekleri biz Programlama Temelleri dersinde akış diyagramları konusu altında çözüyoruz. Her sene hangi örnekleri çözelim problemi yaşamamak için bulduğum örnekleri ( tabiki sadece sorularını ) bu başlık altına ekleyeceğim. Bazıları çok basit, bazılarıda karmaşık gelebilir. Fakat aynı örneklerin hem akış diyagramlarını, hem algoritmalarını, hemde c# kodlarını yazarak derste çözebilirsiniz.

1. 255 ile 499 arasındaki sayıları ekrana yazdıran,
2. Klavyeden girilen sayının faktöriyelini alan,
3. Tabanı ve üstü girilen sayının değerini bulan,
4. Klavyeden 0 değeri girilinceye kadar kaç adet sayı girildiğini bu sayıların toplamını bulan ve ekran yazdıran,
5. Taban ve yükseklik değerleri girilen üçgenin alanını hesaplayan,
6. Klavyeden girilen sayının mutlak değerini alan,
7. Klavyeden girilen 10 sayıdan kaç tanesinin 20 olduğunu bulan,
8. 1 ile 100 arasındaki sayılardan kaç tanesinin 5 e tam bölündüğünü bulan,
9. Klavyeden girilen sayıyı, kendisi kadar ekrana yazdıran,
10. Klavyeden girilen sayıya kadar olan sayıları toplayıp sonucu ekrana yazdıran,

yukarıdaki programların algoritmasını yazınız, akış şemasını çiziniz ve c# kodlarını yazınız.

Fireworks programında resimlerinize, nesnelerinize ve katmanlarınıza uygulayabileceğiniz birbirinden güzel çok sayıda filtre bulabilirsiniz. Filtreleri biz efekt olarak tanımlayabiliriz. Uygulanan filtreler sayesinde resimlerinizi siyah beyaz hale getirebilir, resminizin tamamının yada bir bölümünün rengini değiştirebilir, resminize ve yazılara gölge ekleyebilir, resminizi bulanıklaştırabilir yada görüntüleri daha keskin hale getirebilirsiniz. Fireworks programında kullanabileceğiniz belli başlı filtreleri ve resimli örneklerini görmek için yazımın devamına bakabilirsiniz.

Öncelikle Fireworks programında kullanacağım filtrelere nasıl erişeceğimizi söyleyelim. Filtre uygulamak istediğiniz resim parçasını yada resmin tamamanı seçili hale getirdikten sonra özellikler panelinden Filtreler alanı yanındaki + işaretine tıklayarak filtre seçeneklerini görüntüleyebilirsiniz. Aynı seçenekleri üst bölümdeki filtreler menüsünden de erişebileceğinizi unutmayın.

Diğer önemli detay ise resmin tamamına bir filtre uygulayabileceğiniz gibi resmin sadece bir bölümünede filtre uygulayabiliriz. Eğer tamamına uygulayacak resmi seçili hale getirmemiz yeterlidir. Fakat sadece bir bölümüne filtre uygulayacak olursak o bölümü seçim araçlarıyla seçip ( gerekirse bu bölümü kesip ayrı bir katman haline getirebilirsiniz) daha sonra filtre uygulamamız gerekecektir. Her iki durumla ilgilide örnekleri yazımın devamında bulabilirsiniz.

Öncelikle sık kullanılabilecek filtreleri örneklendirmek istiyorum. Yani ben programdaki menü sırası yerine daha sık kullanabileceğimiz filtreleri önce anlatmayı tercih edeceğim. Bu derste kullanacağım resimlerin orjinal hallerini konuya başlamadan önce paylaşıyorum, isterseniz resimlerin üzerine tıklayarak büyütebilir ve kaydederek üzerlerinde çalışmaları tekrar edebilirsiniz.

Fireworks ile fotoğrafı siyah beyaz yapma :

Fireworks programında en sık kullanabileceğiniz filtrelerden birisi fotoğrafları siyah beyaz yapan Alfaya dönüştür filtresi olacaktır. Filtreler menüsünü özellikler panelinden erişebileceğinizi yukarıda anlatmıştım. Fotoğraf seçili durumdayken filtreler menüsüne girelim, diğer menüsü altında Alfaya dönüştür seçeneğine tıkladığınızda resminizin siyah beyaz hale dönüştüğünü göreceksiniz.

Hemen hemen bütün filtrelerde kullanabileceğiniz bir diğer yöntem ise fotoğrafın sadece bir bölümüne filtre uygulamaktır. Şimdide yukarıdaki fotoğrafın sadece bir bölümünü renkli diğer kısımlarını siyah beyaz hale getirelim. Bunun için resimdeki futbolculardan bir tanesini çokgen kement yada istediğiniz başka bir seçim aracıyla seçip ctrl+x ile kesiyoruz. Daha sonra hiçbir yere tıklamadan resmimizi yapıştırıyoruz. (Ctrl+V) Yapıştırma işleminide yaptıysanız fotoğrafınızın ilk anda olduğu gibi bir bütün halinde görünmesi gerekiyor. Tek farkı ise bizim seçtiğimiz futbolcu ve onun dışında kalan parça iki ayrı katman haline geldi. Artık biz seçtiğimiz futbolcunun dışında kalan katmana tıklayarak seçili hale getirip siyah beyaz yapıyoruz. Bu durumda sadece bizim kesip yapıştırdığımız futbolcumuzun renkli diğer futbolcuların ise siyah beyaz olması gerekmektedir.

Fireworks ‘ de renk değiştirme filtresi

Şimdide fotoğrafın bir bölümü yada tamamının rengini nasıl değiştireceğimizi görelim. Bunun için araba resmini kullanıp, arabanın rengini değiştirmeye çalışalım. Öncelikle arabamızın kaporta bölümünü seçim araçları ile seçerek yukarıdaki örnekte olduğu gibi kes ve yapıştır işlemini uygulayarak fotoğrafımızı 2 katmana dönüştürüyoruz. Daha sonra kırmızı renkli kaporta bölümünün olduğu katmanı seçerek filtreler menüsünden Renk Ayarla > Ton / Doygunluk seçeneğine tıklıyoruz. Buradaki Ton kadranını sağa sola hareket ettirerek arabanızın rengini değiştirebilirsiniz. Doygunluk ve açıklık değerlerini değiştirerekte parlaklık, matlık gibi değerlerini değiştirebilirsiniz. Benim elde ettiğim 4 farklı rengi aşağıda görebilirsiniz.

Filtreler menüsünü altında yer alan diğer seçenekleri deneyerek sizlerde fotoğraflarınızda farklı efektler oluşturabilirsiniz. Benim birkaç dakika içerisinde denediğim diğer çalışmalarım ise aşağıda.

Sizde deneme yanılma yöntemiyle filtreler menüsü altındaki diğer seçenekleri deneyip, farklı fotoğraf görüntüleri elde edebilirsiniz.

Not : Son 2 hafta içerisinde 8.ders nerede kaldı diye birçok mail aldım. Göstermiş olduğunuz ilgi için teşekkür ediyorum : ) Birbaşka derste görüşmek dileğiyle.

WordPress ile hazırladığım bazı web sayfalarında anket eklentisine ihtiyaç duyuyorum. Bu nedenle her seferinde acaba wordpress’ te yeni bir anket eklentisi hazırlandı mı diye merak edip araştırıyorum. Fakat dönüp dolaşıp wordpress’ in en popüler anket eklentisi olan wp-polls ‘ ta karar kılıyorum. Bende bu yazımda wordpress ile ilgilenen arkadaşlara wp-polls eklentisini nereden indirebileceklerini, web sayfalarına nasıl yükleyebileceklerini ve nasıl kullanabileceklerini anlatmaya çalışacağım. Bildiğiniz daha kullanışlı wp anket eklentisi varsa yorum formu ile paylaşırsanız sevinirim. Eklenti ile ilgili detayları görmek için yazımın devamına bakabilirsiniz.

1. ilk olarak eklentiyi indirebileceğiniz adresi sizlerle paylaşmak istiyorum : wp-polls
2. Eğer anket eklentisini indirdiyseniz web serverinizdeki wp-content\plugins klasörü altına eklenti klasörünü kopyalayınız.
3. web sayfanızın yönetici paneline giriş yaparak pasif durumdaki wp-polls eklentisini aktif hale getiriyoruz.
4. ilk 3 adımı doğru şekilde gerçekleştirdiysek yönetici panelinde sol alt bölümde (ayarlar) paneli altında polls diye yeni bir menü eklendiğini göreceksiniz. Bu menüyü genişleterek tamamını görünür hale getiriyoruz. Eklentinin 5alt menüsü bulunmaktadır.
5. 1-Manage Pools (Anketleri yönet),  2-Add Poll (Anket Ekle), 3-Poll Options (Anket özellikleri), 4-Polls Templates (Anket teması) ve 5-Uninstall Wp-Polls (Eklentiyi kaldır)
6. Yeni bir anket eklemek için 2.sırada yer alan add poll seçeneğine tıklayarak anket sorunuzu ve şıklarınızı yazabilirsiniz. Daha önce eklediğiniz bir anketi düzenlemek içinde 1 nolu menüde yer alan Manage Polls seçeneğini kullanabilirsiniz.
7. Anketinizi Türkçe’ leştirmek isterseniz Poll Templates bölümünde yer alan tema dosyalarını düzenleyebilirsiniz. Eğer iyi derecede kod bilginiz yoksa bu bölüme hiç dokunmamak daha doğru olabilir : )
8. Eklenti ayarlarını değiştirmek için poll options, eklentiyi tamamen sitenizden kaldırmak içinde uninstall wp-polls seçeneğine tıklayabilirsiniz.
9. Eklentinin sitenizde görünür hale gelmesi içinde bileşenler bölümünden wp-polls bileşenini sağ ve sol sütunlarınıza sürekleyip görünür hale getirebilirsiniz.
10. son olarak wp-polls eklentisini kendiniz Türkçe’ leştirmek yerine Türkçe dil dosyasını internet üzerinde bularak da bu işlemi yapabilirsiniz.

Eklenti ile ilgili sıkıntı yaşayan arkadaşlar aşağıdaki form ile mesaj gönderebilirler.

Biraz önce eklentiyi kullanmam gerekti, hemen ardından da bu yazıyı hazırlayıp sayfamda paylaşma gereği duydum. Yazıyı baştan sonra okuyup kontrol etme fırsatım yok, bu nedenle anlatımda bir hata varsa affola…