Fireworks ile PNG-8 Alpha Channel Export
DERS ADI
:
Fireworks ile PNG-8 Alpha Channel Export
DERS KODU
:
Fireworks ile PNG-8 Alpha Channel Export
MARKA
:
Fireworks ile PNG-8 Alpha Channel Export
İÇERİK
:
Fireworks ile PNG-8 Alpha Channel Export
DOSYA
:
Açıklama
:
Fireworks ile PNG-8 Alpha Channel Export

Selamlar,

Bugünkü dersimizde Fireworks ile Png-8 Alpha Channel Export yapmanın önemli noktalarını kavrayacağız. Bir önceki Photoshop dersimde ön hazırlıklarını yapmış olduğumuz bir materyali açarak derse başlayacağız. (Alttaki linkten edinebilirsiniz)

Photoshop programı'nın File Menüsü altındaki 'Save for web' komutu ile Png-8 Export yapabilsek de bazı durumlarda bu Export sonuçları tam Türkçe olarak belirteyim ki 'çakılıp, kalıyor'. Photoshop ile yapılmış Png-8 Exportlar özellikle Png-24 formatını desteklemeyen, sadece Png-8 kullanmakta ısrarlı oyun edit dosyalarında yahut eski browserlarda (png-24 transparency alanını desteklemiyorlar + dosya boyutları da hatırı sayılır oranda artış gösteriyor.) istenen sonuçları bir türlü veremiyordu. Web üzerinde yaptığım araştırmalar ve oluşturduğum karşılaştırmalı testler bana son aşamada Export yaparken kesinlikle tek bir programı gösteriyordu = FIREWORKS. Bu durumda gelin şimdi nelere dikkat etmemiz gerekiyor bir inceleyelim.

Materyal İndir

Fireworks programımızı açıp File Menüsü'nden 'Open' komutunu veriyoruz,

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_0082.jpg

Bir '.psd' uzantılı çalışmayı seçiyoruz. Bu derste sırf ülkemizde değil, tüm dünyada sürekli meydana gelen futboldaki şiddeti protesto için Diyarbakırspor logosunu uygun gördüm. (Önceki derste de Bursaspor idi.)

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_159.jpg

'.psd' uzantılı çalışmamızı açtıktan sonra File Menüsü altındaki 'Export Wizard...' komutuna tıklıyoruz,

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_271.jpg

Sırada gelecek olan üç küçük diyalog kutusuna bu şekilde tıklayıp 'Continue' deyip geçin. (Çok önemli değil)

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_290.jpg
http://www.tuncolcay.com/ders/fworks/fireworks_png_export_315.jpg
http://www.tuncolcay.com/ders/fworks/fireworks_png_export_331.jpg

Export penceresi geldiğinde sırasıyla; Options bölümü altında Format'tan, Png-8'i seçiyoruz,

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_399.jpg

Şimdi alttaki fotoğrafı dikkatlice inceleyerek Format'ı Png-8 yaptıktan sonra (İşaret-1) yine sırasıyla; öncelikle sağ yanda duran '128' yazan değeri '256' ya çeviriyoruz. (İşaret-2) Daha sonra sağ altta bulunan 'No Transparency' açılır kutucuğa tıklayarak 'Alpha Transparency' seçeneğini aktif hale getiriyoruz. (İşaret-3)

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_490.jpg

İşlemlerin sonuna yaklaşıyoruz. Alpha Transparency'i aktif ettikten sonra 'Matte' seçeneğine tıklıyoruz (İşaret-1) ve açılan renk kutucuğunda üstte 'No Color' temsil eden ikona tıklıyoruz. (İşaret-2). Son yapmamız gereken 'Export...' düğmesine basmak. (İşaret-3)

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_566.jpg

Açılan kayıt kutucuğunda Dosya adı '.png' uzantılı olarak otomatik gelecektir. Export yazan yerin karşısına dikkat edin, 'Images Only' yazmalı. Bu yaptığımız Export'un sadece '.png' uzantılı çalışma olarak gönderilmesini sağlar.

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_669.jpg

Evet işin bundan sonrası artık kontrol üzerine. İsterseniz dersi burada kesebilirsiniz. Çeşitli kontrol etme yöntemlerimiz var. Birincisi bu öğrendiğimiz yöntem, png-24, normal gif ile aynı dosyayı export ederek web browserlarda bunları incelemek. Basit bir örnek aşağıdaki görüntüde yer alıyor,

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_1891.jpg

İkinci bir yöntem ise oyun editleme araçlarını kullanarak bunu yapabiliriz. Ben ikinci yöntemi üstünkörü hızlıca gösterip sizlere hızlı bir test sunmak istiyorum. (Video görüntülerinde çok daha ayrıntılı seyredebilirsiniz.) Game Graphic Studio isimli bir programı açıyoruz.

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_1454.jpg

Bu programda yapmış olduğumuz Png-8 dosyamızı açıyoruz ve sağ yandaki Alpha Kanalı kontrol etme düğmesine basıyoruz.

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_1854.jpg

Alpha Kanal tüm hatlarıyla karşımızda olacaktır.

http://www.tuncolcay.com/ders/fworks/fireworks_png_export_1890.jpg

Bir sonraki derste görüşmek üzere. Tüm okurlara sevgiler ve saygılar...

Tunç Y. OLÇAY

Flag Counter