วิธีใช้ 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. จบอีกแล้วครับ
โปรแกรมจัดการกับภาพสำหรับคนทำเว็ป ทำอะไรได้มั่ง ไม่รู้ครับ แต่ผมเอาตัดรูปเป็นส่วนๆ
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. จบอีกแล้วครับ
0 ความคิดเห็น:
แสดงความคิดเห็น