อะโดบี ไฟร์เวิร์ค (Adobe Fireworks)


	อะโดบี ไฟร์เวิร์ค (Adobe Fireworks)

ปรับปรุง : 2554-03-28 (เริ่มหาความหมาย)

Adobe Fireworks คือ โปรแกรมสำหรับตัดต่อภาพแล้วนำไปใช้ในเว็บเพจ พัฒนาขึ้นโดยบริษัท แมโครมีเดีย (ปัจจุบันควบรวมกิจการกับ อะโดบีซิสเต็มส์) โดยสามารถลดขนาดไฟล์ สร้างภาพเคลื่อนไหว เมนูลอย งานที่สร้างขึ้นเป็นการรวมงานแบบเวกเตอร์ ตัวอักษร ภาพ และงานพัฒนาเว็บไซต์ไว้ในโปรแกรมเดียว ซึ่งเดิมต้องใช้ Illustrator + PhotoShop + ImageReady แต่การรวมความสามารถจากหลายโปรแกรม ทำให้กลายเป็นโปรแกรมที่ไม่มีความโดดเด่นเฉพาะด้าน สำหรับสกุลของแฟ้มที่บันทึกด้วย Fireworks คือ PNG (Portable Network Graphic)

รุ่นปัจจุบันของโปรแกรม คือ Adobe Fireworks CS4 หรือ รุ่น 10

21 มี.ค.54 เริ่มเรียนรู้การใช้ fireworks วาดภาพแบบ Vector สามารถเปิดแฟ้ม .ai หรือ .eps ได้ ซึ่งแตกต่างกับ Adobe Illustrator คือ แฟ้มที่ได้จาก Fireworks จะเป็น .PNG (Portable Network Graphics) สำหรับสกุลของแฟ้มภาพแบบ PNG เป็นรูปแบบที่พัฒนามาทดแทนแฟ้มแบบ GIF เพื่อแก้ปัญหาด้านสิทธิบัตร ปัจจุบัน PNG รุ่น 1.2 ได้รับการอนุมัติเป็นมาตรฐานของทั้ง W3C และ ISO/IEC แล้ว

ตัวอย่างนี้ ผมใช้ภาพแม่หญิงล้านนาเป็น Background แล้วใช้ Pen tool ลากเส้นและลงพื้นในแต่ละชิ้นงาน แล้วใช้ Gradient Tool ไล่สีแบบ Linear ส่วน Subselection tool ร่วมกับ Pen tool ทำให้กำหนดความโค้งของจุดได้ ต่อไปก็สามารถใช้ Pen tool สร้างงานต่าง ๆ ได้ตามจินตนาการต่อไป .. (ปัญหาของผมคือ ผมค่อยชอบงาน Graphic เท่านั้นเอง)

18 ก.พ.54 มีเพื่อนชื่อ ธรณ. สร้างงานไว้ด้วย Adobe Fireworks CS4 และใช้พัฒนาควบคู่ไปกับ Adobe Dreamweaver CS4 ซึ่งมีแนวทางการนำมาแก้ไขปรับปรุง ทั้งเปลี่ยนสี เปลี่ยนภาพ แต่ใช้ theme เดิม ดังนี้

1. เปิดแฟ้มต้นฉบับและทำงานออกแบบให้แล้วเสร็จ ตัวอย่างนี้เป็นภาพขนาด 2000 * 1000 pixels และจะเก็บในสกุล .png ซึ่งเป็นรูปแบบของ fire works ซึ่งขั้นตอนแรกมีรายละเอียดในการออกแบบ และใช้งานมากมายตามความซับซ้อนของเนื้องาน

2. จัดเก็บอีกครั้งด้วยการ save as เป็นแบบ Flattened PNG กำหนดขนาดเป็น 50% ผลคือแฟ้มนี้มีเพื่อนส่งออกไม่สามารถแก้ไขรายละเอียดได้ง่ายเหมือนต้นฉบับ และขนาดภาพคือ 1000 * 500 pixels เพื่อนำไปเป็นเว็บเพจ ซึ่งวางแผนไว้ว่าเว็บเพจกว้าง 1000 pixels และภาพถูกตัดออกเป็นชิ้นให้ download ได้อย่างรวดเร็ว แทนการใช้ภาพใหญ่เพียงภาพเดียว

3. ใช้ select tool สร้างพื้นที่ที่ต้องการตัด แล้วเลือก edit, insert, rectangular slice ผลการ slice จะเกิดขึ้นผลการตัดภาพใน web layer สำหรับเทคนิคตัดภาพนี้คล้ายกับที่เคยพบในโปรแกรม imageready แต่ปัจจุบันถูกรวมเข้าเป็นส่วนหนึ่งของ photoshop ตั้งแต่รุ่น CS2 ไปแล้ว หากจะตัดภาพทำ gif animation ก็ใช้ photoshop ได้เลย

4. ขั้นสุดท้ายส่งงานออกไปใช้ด้วยการเลือก file, export เป็น HTML and images ก็จะได้แฟ้ม html พร้อมภาพอีกหลายภาพ ที่จะไปใช้งานใน dreamweaver หรือควบคุมด้วย php ใน editor ใด ๆ ต่อไป

ตรวจสอบขนาดของแฟ้มภาพที่ได้จาก fireworks
Ellipse 2 วง ขนาดแฟ้ม 62.7 KB h:100px w:100px	Ellipse 4 วง ขนาดแฟ้ม 53.5 KB h:100px w:100px	Ellipse 2 วง ขนาดแฟ้ม 61.8 KB Blend Mode = difference

แนะนำเว็บไซต์ (Website Guides)
+ http://www.asoft1.com/adobe/products/fireworks/
+ http://th.wikipedia.org
+ http://www.thaiall.com/blog/burin/3024/