บทนำ
การสร้างเว็บเพจเป็นงานหนึ่งที่จะต้องใช้ภาพกราฟิกในการตกแต่งชิ้นงานให้สวยงามน่าสนใจยิ่งขึ้น โปรแกรม Adobe ImageReady 7.0 เป็นโปรแกรมหนึ่งที่สนับสนุนงานด้านเว็บเพจโดยสามารถสร้างภาพเคลื่อนไหว ปุ่ม Button ที่ใช้ได้ตอบกับผู้ใช้ในลักษณะต่างๆ เช่น แบบ Image map, Slice และแบบ Rollover เป็นต้น
Ø การเข้า/ออกโปรแกรม Adobe ImageReady 7.0
1. คลิกที่เมนู star -> Program -> Adobe ImageReady 7.0 หรือ
2. เข้าโปรแกรมโดยผ่านโปรแกรม Adobe Photoshop 7.0 โดยคลิกที่เครื่องมือ Jump to ImageReady ที่กล่องเครื่องมือ
3. ถ้าต้องการกลับไปที่โปรแกรม Adobe Photoshop 7.0 คลิกที่เครื่องมือ Jump to Photoshop ที่กล่องเครื่องมือ
การออกจากโปรแกรม Adobe ImageReady 7.0
มีวีการออกจากโปรแกรม Adobe ImageReady 7.0 2วิธีคือ
1. คลิกที่ปุ่ม Close ที่มุมขวาบนของหน้าต่างหลักหรือ
2. คลิกที่เมนู File -> Exit
Ø ส่วนประกอบของโปรแกรม Adobe ImageReady 7.0
ส่วนประกอบของโปรแกรม Adobe ImageReady 7.0 จะคล้ายกับโปรแกรม Adobe Photoshop 7.0 ซึ่งมีรายละเอียดดังนี้
ไตเติลบาร์
ไตเติลบาร์มีหน้าที่แสดงชื่อโปรแกรม ซึ่งมุมด้านขวาจะมีปุ่ม ย่อ / ขยาย และปุ่มออกจากโปรแกรม
เมนูบาร์
เป็นเครื่องมือที่เก็บรวบรวมคำสั่งไว้เป็นหมวดหมู่ เพื่อใช้จัดการกับรูปภาพ และปรับค่าต่างๆ ซึ่งประกอบด้วย
· เมนู File มีหน้าที่จัดการเกี่ยวกับการสร้าง การเปิด การบันทึกและการตั้งค่าต่างๆ
· เมนู Edit มีหน้าที่เกี่ยวกับการยกเลิก การคิดลอก การปรับเปลี่ยนต่างๆ
· เมนู Image มีหน้าที่เกี่ยวกับการปรับภาพให้มีลักษณะสีต่างๆ และเปลี่ยนโหมดภาพ
· เมนู Layer มีหน้าที่จัดการ Layer
· เมนู Slice มีหน้าที่เกี่ยวกับ Slice
· เมนู Select ทีหน้าที่เกี่ยวกับการเลือกรูปภาพที่จะทำการแก้ไขปรับเปลี่ยน
· เมนู Filter มีหน้าที่เกี่ยวกับการใส่ลักษณะต่างๆ ให้กับภาพ
· เมนู View มีหน้าที่เกี่ยวกับการกำหนดมุมมองแบบต่างๆ
· เมนู Window มีหน้าที่เปิด/ปิด พาเล็ตต่างๆ
· เมนู Help มีหน้าที่แนะนำการใช้เครื่องมือต่างๆ
ออปชั่นบาร์
เป็นส่วนที่ใช้ปรับรูปแบบของเครื่องมือต่างๆ ซึ่งออปชั่นบาร์จะเปลี่ยนไปตามเครื่องมือที่เลือกใช้
พาเล็ตต่างๆ
เป็นหน้าต่างที่ใช้สำหรับประกอบการทำงานต่างๆ ซึ่งแต่ละพาเล็ตมีหน้าที่การทำงานที่แตกต่างกัน เช่น พาเล็ต Animation ใช้สร้างภาพเคลื่อนไหว, พาเล็ต Rollover ใช้สร้างปุ่ม Button ที่มีลักษณะเปลี่ยนไปตามเหตุการณ์การใช้เมาส์, พาเล็ต Image Map ใช้สร้างลิงก์ข้อมูลไปไฟล์อื่นที่ต้องการ เป็นต้น
Ø การสร้าง Image Map
เครื่องมือ Image Map เป็นเครื่องมือที่ใช้กับงานด้านเว็บเพจโดยจะใช้สร้างลิงก์ในบริเวณที่ต้องการโดยไม่ต้องแบ่งรูปออกเป็นส่วนๆ ซึ่งสามารถเลือกบริเวณที่ต้องการได้หลายรูปแบบ
การบันทึก Image Map
มีขั้นตอนการบันทึกดังนี้
1. คลิกที่เมนู File -> Save Optimized As จะปรากฏหน้าต่างการบันทึกข้อมูล
2. คลิกที่ปุ่ม Save
Ø การสร้าง Slice
เป็นเครื่องมือที่ใช้แบ่งภาพออกเป็นส่วนๆ โดยแต่ละส่วนจะบันทึกเป็น 1 ไฟล์ ซึ่งจะมีประโยชน์เมื่อนำรูปไปใช้กับเว็บเพจจะทำให้การโหลดภาพเร็วขึ้นเนื่องจากไฟล์มีขนาดเล็กลงและยังสามารถกำหนดการลิงก์ให้กับรูปภาพได้ ซึ่งมีขั้นตอนดังนี้
1. เปิดไฟล์รูปภาพที่ต้องการ
2. คลิกที่เครื่องมือ Slice
3. คลิกเมาส์ด้านซ้ายค้างไว้แล้วลากไปบริเวณที่ต้องแบ่งออกเป็นส่วน
4. ถ้าต้องการปรับเปลี่ยนขนาดของ Slice แต่ละส่วนคลิกเมาส์ด้านซ้ายค้างไว้ที่เครื่องมือ Slice จะปรากฏเครื่องมือในกลุ่มให้คลิกที่เครื่องมือ Slice Select Tool
5. นำเมาส์ไปคลิก Slice ที่ต้องการแก้ไข จากนั้นคลิกเมาส์ด้านซ้ายค้างไว้แล้วย่อ/ขยายตามต้องการ
การสร้างลิงก์ด้วยพาเล็ต Slice
การสร้างลิงก์ให้กับภาพจะมีขั้นตอนคล้ายกับการสร้างลิงก์ด้วยเครื่องมือ Image Map ซึ่งมีขั้นตอนดังนี้
1. คลิกที่เมนู Window -> Slice เพื่อเปิดหน้าต่าง Slice
2. คลิกที่ Slice ที่ต้องการสร้างลิงก์จากตัวอย่างก่อนหน้า
3. สร้างลิงก์ที่พาเล็ต Slice
Ø การสร้างภาพเคลื่อนไหวด้วยพาเล็ต Animation
การสร้างภาพเคลื่อนไหว (Animation) เป็นการเพิ่มสีสันให้กับเว็บเพจซึ่งไฟล์ที่สร้างจากโปรแกรม AdobeImageReady 7.0 จะเป็นไฟล์นามสกุล .gif โดยสามารถสร้างได้ 4 แบบ คือ
1. แบบเฟรมต่อเฟรม
2. แบบเคลื่อนที่วัตถุ
3. แบบเปลี่ยนความโปร่งแสง
4. แบบเปลี่ยนเอฟเฟ็กต์
ตัวอย่างการสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
การสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรมจะเป็นการสร้างความเปลี่ยนแปลงทีละเฟรม โดยเปลี่ยนแปลงทีละน้อย เมื่อมองภาพขณะที่ภาพเคลื่อนไหวไปแต่ละเฟรมอย่างรวดเร็วจะทำให้รู้สึกว่าภาพเคลื่อนไหวที่ได้ ซึ่งมีขั้นตอนการทำดังนี้
1. คลิกที่เมนู Window -> Animation เพื่อเปิดพาเล็ต Animation
2. สร้างไฟล์ใหม่ขึ้นมา จากนั้นวาดรูปหมูรูปที่ 1 ลงไป
3. คลิกที่ปุ่ม Duplicates Current Frame ที่พาเล็ต Animation จะสังเกตเห็นเฟรมเพิ่มขึ้นอีก 1 เฟรม ซึ่งมีรูปแบบเหมือนกับเฟรมที่ 1
4. คลิกที่ Layer 1 ในพาเล็ต Layer จากนั้นปรับเปลี่ยนหมูในเฟรมที่ 2
5. หมูรูปที่ 3 และรูปที่ 4 ทำตามข้อที่ 3-4 โดยเปลี่ยนแปลงรูปแบบตามลักษณะที่กำหนดจะได้หมู 4 รูปตามต้องการ
6. เมื่อวาดหมูทั้ง 4 รูปแล้วจะสังเกตเห็นว่าแต่ละเฟรมมีแต่รูปหมูตัวที่ 4 ซึ่งจะทำให้ภาพไม่สามารถเคลื่อนไหวได้เนื่องจากเป็นรูปเดียวกัน ดังนั้นเพื่อทำภาพเคลื่อนไหวจะต้องทำแต่ละเฟรมแสดงรูปหมูที่แตกต่างกัน โดยคลิกที่เฟรมที่ 1 จากนั้นคลิกที่รูปลูกกระตาให้เปลี่ยนเป็นรูปที่ไม่มีลูกกระตา
7. ใน Layer ที่ 1-3 เพื่อไม่ให้แสดงรูปหมูรูปอื่นๆ
8. คลิกที่เฟรมที่ 2 จากนั้นคลิกที่รูปลูกกระตาให้เปลี่ยนเป็นรูปที่ไม่มีลูกกระตาใน Layer ที่ 0,2-3
9. คลิกที่เฟรมที่ 3 จากนั้นคลิกที่รูปลูกกระตาให้เปลี่ยนเป็นรูปที่ไม่มีลูกกระตาใน Layer ที่ 0,1-3
10. คลิกที่เฟรมที่ 4 จากนั้นคลิกที่รูปลูกกระตาให้เปลี่ยนเป็นรูปที่ไม่มีลูกกระตาใน Layer ที่ 0-2
11. ทดสอบภาพเคลื่อนไหวที่สร้างโดยคลิกปุ่ม Play ในพาเล็ต Animation เมื่อต้องการหยุดให้คลิกที่ปุ่ม Stop
12. บันทึกไฟล์เป็นนามสกุล .gif
ตัวอย่างการสร้างภาพเคลื่อไหวแบบเคลื่อนที่วัตถุ
การสร้างภาพเคลื่อนไหวแบบเคลื่อนที่วัตถุจะใช้เครื่องมือ Tweens ในการสร้างซึ่งจะต้องกำหนดตำแหน่งวัตถุเริ่มต้นในเฟรมที่ 1 และกำหนดตำแหน่งวัตถุสิ้นสุดในเฟรมที่ 2 ยกตัวอย่างเช่น การเคลื่อนที่รูปหมูจากฝั่งซ้ายไปฝั่งขวามือ ซึ่งมีขั้นตอนดังนี้
1. สร้างไฟล์ใหม่ขึ้นจากนั้นใส่สีพื้นตามต้องการ
2. คลิกที่ปุ่ม Create a New Layer วาดรูปหมูที่ต้องการเคลื่อนย้ายในตำแหน่งเริ่มต้นคือด้านซ้ายลงไปในพื้นที่การทำงาน
3. คลิกที่ปุ่ม Duplicates Current Frame ที่พาเล็ต Animation จะสังเกตเห็นเฟรมเพิ่มขึ้นอีก 1 คือเฟรมที่ 2
4. คลิกที่เฟรมที่ 2 จากนั้นคลิกเมาส์ด้านซ้ายค้างไว้ที่รูปหมูแล้วลากมาวางในตำแหน่งสิ้นสุดคือด้านขวาของหน้าต่างการทำงาน
5. คลิกที่เฟรมที่ 1 จากนั้นคลิกที่เครื่องมือ Tweens Animations Frames ในพาเล็ต Animation จะปรากฏหน้าต่าง
Tween With กำหนดเฟรมที่ต้องการสร้างการเคลื่อนไหวร่วมกับเฟรมปัจจุบันประกอบด้วย
Selection สร้างภาพเคลื่อนไหวตามเฟรมที่เลือกไว้
Next Frame สร้างภาพเคลื่อนไหวระหว่างเฟรมปัจจุบันกับเฟรมถัดไป
Previous Frame สร้างภาพเคลื่อนไหวระหว่างเฟรมปัจจุบันกับเฟรมก่อนหน้า
First Frame สร้างภาพเคลื่อนไหวระหว่างเฟรมสุดท้ายกับเฟรมแรก (ใช้ในกรณีที่อยู่เฟรมสุดท้าย)
Last Frame สร้างภาพเคลื่อนไหวระหว่างเฟรมแรกกับเฟรมสุดท้าย (ใช้ในกรณีที่อยู่เฟรมแรก)
Frames to Add กำหนดจำนวนเฟรมระหว่างกลางที่ต้องการสร้าง
Layers ประกอบด้วย
All Layers เลือกกระทำกับทุกเลเยอร์
Selected Layers เลือกกระทำกับเลเยอร์ที่เลือกเท่านั้น
Parameters รูปแบบการสร้างภาพเคลื่อนไหว ประกอบด้วย
Position แบบเคลื่อนย้ายวัตถุ
Opacity แบบเปลี่ยนความโปร่งแสง
Effects แบบเปลี่ยนเอฟเฟ็กต์
6. กำหนด Tween With เป็น Next Frames
7. กำหนดจำนวนเฟรมที่ต้องการสร้างที่ตัวเลือก Frames to Add เป็น 5 เฟรม
8. คลิกเลือกที่ตัวเลือก All Layers
9. เลือกรูปแบบเป็น Position จากนั้นคลิกที่ปุ่ม OK
10. ทดสอบภาพเคลื่อนไหวที่สร้างโดยคลิกที่ปุ่ม Play ในพาเล็ต Animation เมื่อต้องการหยุดเล่นคลิดที่ปุ่ม Stop
ตัวอย่างการสร้างภาพเคลื่อนไหวแบบเปลี่ยนความโปร่งแสง
ยกตัวอย่างรูปภาพตามตัวอย่างข้างต้น โดยมีขั้นตอนดังนี้
1. สร้างไฟล์ใหม่ขึ้น จากนั้นใส่สีพื้นตามต้องการ
2. คลิกที่ปุ่ม Create a New Layer ในพาเล็ต Layer วาดรูปหมูลงบนตำแหน่งที่ต้องการ
3. คลิกที่ปุ่ม Duplicates Current Frame ที่พาเล็ต Animation จะสังเกตเห็นเฟรมเพิ่มขึ้นอีก 1 คือเฟรมที่ 2
4. คลิกเฟรมที่ 2 จากนั้นปรับ Opacity ที่พาเล็ต Layer ใวห้มีค่าเป็น 0%
5. คลิกที่เฟรมที่ 1 จากนั้นคลิกที่เครื่องมือ Tweens Animations Frames ในพาเล็ต Animation
6. กำหนด Tween With เป็น Next Frames
7. กำหนดจำนวนเฟรมที่ต้องการสร้างที่ตัวเลือก Frames to Add เป็น 5 เฟรม
8. คลิกเลือกที่ตัวเลือก All Layers
9. เลือกรูปแบบเป็น Position จากนั้นคลิกที่ปุ่ม OK
10. ทดสอบภาพเคลื่อนไหวที่สร้างโดยคลิกที่ปุ่ม Play ในพาเล็ต Animation เมื่อต้องการหยุดเล่นคลิดที่ปุ่ม Stop
ตัวอย่างการสร้างภาพเคลื่อนไหวแบบเปลี่ยนเอฟเฟ็กต์
ยกตัวอย่างรูปภาพตามตัวอย่างข้างต้น โดยมีขั้นตอนดังนี้
1. สร้างไฟล์ใหม่ขึ้น จากนั้นใส่สีพื้นตามต้องการ
2. คลิกที่ปุ่ม Create a New Layer ในพาเล็ต Layer วาดรูปหมูลงบนตำแหน่งที่ต้องการ
3. คลิกที่ปุ่ม Duplicates Current Frame ที่พาเล็ต Animation จะสังเกตเห็นเฟรมเพิ่มขึ้นอีก 1 คือเฟรมที่ 2
4. คลิกที่เฟรมที่ 2 จากนั้นคลิกที่ปุ่ม Add a Layer Style ที่พาเล็ต Layer เลือกเอฟเฟ็กต์ที่ต้องการ เช่น Bevel and Emboss
5. คลิกที่เฟรมที่ 1 จากนั้นคลิกที่เครื่องมือ Tweens Animations Frames ในพาเล็ต Animation
6. กำหนด With เป็น Next Frames
7. กำหนดจำนวนเฟรมที่ต้องการสร้างที่ตัวเลือก Frames to Add เป็น 5 เฟรม
8. คลิกเลือกที่ตัวเลือก All Layers
9. เลือกรูปแบบเป็น Effect จากนั้นคลิกที่ปุ่ม OK
10. 10. ทดสอบภาพเคลื่อนไหวที่สร้างโดยคลิกที่ปุ่ม Play ในพาเล็ต Animation เมื่อต้องการหยุดเล่นคลิดที่ปุ่ม Stop
Ø การสร้างเงื่อนไขการเคลื่อนไหวด้วยพาเล็ต
เป็นการสร้างปุ่มที่ใช้คลิกลิงก์ไปเว็บเพจอื่นๆ โดยลักษณะของปุ่มของปุ่มจะเปลี่ยนไปตามที่กำหนดคือเมื่อมองปกติจะเป็นรูปหนึ่ง แต่เมื่อนำเมาส์วางหรือลากผ่านจะเป็นอีกรูปหนึ่งและเมื่อคลิกจะกลายเป็นอีกรูปหนึ่ง ซึ่งมีขั้นตอนดังนี้
1. เปิดไฟล์รูปภาพที่ต้องการ
2. คลิกที่เครื่องมือ Rounded Rectangle Tool จากนั้นคลิกที่เมาส์ด้านซ้ายค้างไว้แล้วลากไปบนพื้นที่ที่ต้องการสร้างปุ่ม Button
3. คลิกที่ปุ่ม Create Rollover State
4. คลิกที่รูปแบบการมองปกติที่พาเล็ต Rollover จากนั้นคลิกเลือกรูปแบบตามต้องการที่พาเล็ต Styles
5. คลิกที่รูปแบบเมื่อลากเมาส์ผ่านที่พาเล็ต Rollover จากนั้นคลิกเลือกรูปแบบตามต้องการที่พาเล็ต Styles
6. คลิกที่ปุ่ม Create Rollover State
7. คลิกที่ปุ่ม Create Rollover State
8. ปรับ Opacity ประมาณ 50% เพื่อให้ปุ่มเมื่อคลิกเมาส์เสร็จเป็นสีจางลง
9. ทดสอบการทำงานผ่านบราวเซอร์โดยคลิกที่ปุ่ม Internet Explorer จะปรากฏหน้าต่างเว็บเพจที่สร้างทดลองคลิกที่ปุ่ม Button ที่สร้าง
10. บันทึกไฟล์ข้อมูลเป็นนามสกุล *.html
