<< Ignite Web Graphics Optimizer โปรแกรมจัดการภาพสำหรับคนทำเว็บ >> 
เขียนโดย คุณ เปิ้น
 
โปรแกรมจัดการกับภาพสำหรับคนทำเว็ป  ทำอะไรได้มั่ง..ไม่รู้ครับ  แต่ผมเอาตัดรูปเป็นส่วนๆ

http://www.ignite-it.co.uk/
Your Web Graphics Companion!

Ignite 2 is the essential web graphic tool for any web designer's tool kit!

Make great web graphics fast
Whether you want to produce fast downloading GIFs or JPEGs, make optimized animated GIFs, chop up images for use in tables or use web safe colours and more than 1300 hybrid colours web safe in your images, Ignite will do it all for you and much more.



คุณสมบัติทั่วไป
แบ่งภาพเป็นส่วนๆ  ลดขนาดไฟล์ (dimension)  จัดการเพิ่ม-ลดคุณภาพของสี  ช่วยให้การแสดงภาพหน้าเว็ปเร็วขึ้น

ถ้าบอกว่าโปรแกรมนี้สามารถทำงานได้คล้ายกับ Images Ready  เชื่อว่าหลายๆท่านคงรู้จักดี  ส่วนความสามารถจะมีขนาดไหนนั้น  คงต้องลองเองครับ

จากการทดลองใช้งาน  คิดว่าโปรแกรมนี้เป็นอีกโปรแกรมที่น่าสนใจสำหรับคนทำเว็ป  อีกทั้งขนาดโปรแกรมก็เล็กเพียง 1.12 mb เท่านั้น


รูปที่ 1. เปิดโปรแกรมขึ้นมาทุกครั้ง  จะมีหน้าต่างของ Cue card แนะนำการใช้  จะเปิดหรือปิดก็ได้



รูปที่ 2. เลือกภาพ File >> Open หรือ คลิกที่โฟลเดอร์เพื่อเลือกภาพที่ต้องการ



รูปที่ 3. คลิกขวาที่ภาพเลือก Split Images



รูปที่ 4. ตอนนี้เราจะได้กรอบ 4 กรอบภายในภาพ  หากต้องการแบ่งมากกว่านี้  ให้เลื่อนเคอร์เซอร์ไปวางที่เส้นขอบ ทั้งแนวตั้งและแนวนอน  หรือหากต้องการจัดเส้นใหม่  ให้เลื่อนเคอร์เซอร์ไปวางที่เส้น  แล้วจัดวางตามชอบใจ



รูปที่ 5. ภาพนี้เป็นการรวมกรอบ 2 กรอบเข้าด้วยกัน  คลิกกรอบที่ต้องการ  และกด Shift  คลิกอีกกรอบแล้วเลือก Join Cell จากนั้นก็ใส่ URL ที่กรอบซ้ายมือ  พร้อมทั้งชื่อของภาพ (ALT)  (จะใส่หรือไม่ก็ได้นะ)  แล้วกด Enter  ส่วนนี้ผมต้องการเอาไปทำเป็นลิงค์นะครับ  ถ้าหากไม่ต้องการทำแบบนี้ก็ข้ามไป



รูปที่ 6. ต่อไปก็เตรียมจัดการกับ Output เพื่อตั้งค่าไว้ก่อน (ตามภาพ)  เลือกฟอร์แมทของเป็นไฟล์อะไรก็ได้  ในที่นี้ผมเลือก *.gif  แล้วกำหนดที่เก็บพร้อมกับตั้งชื่อไฟล์จากนั้นกด Set



รูปที่ 7. ตอนนี้เราได้แท็ป 00.gif เพิ่มมาอีกหนึ่งแท็ป  นี้คือชื่อไฟล์ที่ผม Set ไว้  จากนั้นคลิก Finish Edit ตามภาพ



รูปที่ 8. คลิกที่แท็ป 00.gif หรือชื่อที่ตั้งไว้  แล้วเลือก Save Outputs ตามภาพ



รูปที่ 9. จากนั้นคลิกขวาที่ภาพตรงไหนก็ได้  เลือก Preview in browser



รูปที่ 10. จะเห็นตัวอย่างพร้อมขนาดภาพที่ถูกแบ่งไว้  ลิ้งค์ที่ทำไว้ไม่สามารถเปิดได้ตรงนี้นะครับ  เพราะอยู่คนละไดเรคทอรี่



รูปที่ 11. เซฟอีกครั้งจะได้ไฟล์ *.iwi เอาไว้แก้ไขในภายหลัง  ตั้งชื่อแล้วเซฟ  หากต้องการแก้ไข  ให้คลิกขวาที่ภาพแล้วเลือก Edit split



รูปที่ 12. กลับเข้าไปดูที่เก็บไฟล์ของเรา  จะเห็นชื่อไฟล์ที่ถูกแบ่งตามด้วย A1.. B1.. และไฟล์ 00.html 00.iwi  ซึ่งเราสามารถเรียกไฟล์ HTML ขึ้นมา  แล้วก็อปปี้ Source code พร้อมทั้งแก้ไข  แล้วนำไปไว้ในไฟล์ Html ที่เราเขียนไว้ได้เลย

จบแล้วครับ..  นี่เป็นเพียงตัวอย่างง่ายๆเท่านั้น  ยังมีรายละเอียดอื่นๆเกี่ยวกับการใช้งาน  ซึ่งขอไปทำความเข้าใจก่อนนะครับ.. สวัสดี

ลองสร้างไฟล์เคลื่อนไหว Animation

รูปที่ 13. คลิก T ที่ทูลบาร์  แล้วพิมพ์ข้อความที่ช่อง Text paragraph ทางซ้ายมือ  เสร็จแล้วกด Enter  ทุกค่าในช่อง Text paragraph  สามารถเปลี่ยนแปลงได้หมดนะครับ



รูปที่ 14. คลิกที่ New output เพื่อเตรียมเซฟไฟล์ไว้ก่อนครับ



รูปที่ 15. หากต้องการปรับขนาด  ให้เอาเคอร์วางที่ขอบของพื้นที่ใช้งาน  แล้วปรับทั้งแนวตั้ง-แนวนอน  หรืออาจใช้คำสั่ง Fit canvas to object



รูปที่ 16. คลิกที่ Insert rectangle เพื่อใส่กรอปสี่เหลี่ยม  และเลือก Transparent ตามภาพ



รูปที่ 17. Duplicate (ทำสำเนาครับ) หมายความว่าให้ทำสำเนามาจากเฟรมแรกครับ



รูปที่ 18. ปรับเวลาช้า-เร็วในการแสดงผลของแต่ละเฟรมครับ



รูปที่ 19. ต้องการตั้งเฟรมไหน  ให้คลิกที่เฟรมนั้น  หากต้องการกำหนดความเร็วใหม่  ก็ทำตามหัวข้อที่ผ่านมา



รูปที่ 20. Preview



รูปที่ 21. เซฟครับ  สีแดงสำหรับไฟล์ HTML  สีเหลืองสำหรับไฟล์ .iwi



รูปที่ 22. จบอีกแล้วครับ...



นอกจากตัวอย่างที่ทำขึ้นแล้ว  Ignite ยังมีความสามารถอื่นๆ  เช่นปรับลด-เพิ่มความสว่างของภาพ Resize ฯลฯ  คงต้องค้นหากันเองสำหรับผู้สนใจ..  สวัสดีครับ
 
15 กันยายน 2547