E-Book โปรแกรมกราฟิก 2204-2105

2. การใชเ้ ครอื่ งมือVertical Type Mask Tool
การใส่ข้อความในรปู ภาพโดยใช้เครอ่ื งมือ Vertical Type Mask Toolเพื่อใสร่ ปู ภาพในข้อความ
ตามแนวขวางทส่ี ามารถทำได้ดังน้ี

(1) เปดิ รูปภาพที่ต้องการใส่ข้อความ

(2) คลิกเลอื กเครื่องมือ Horizontal Type Tool
(3) ปรับรปู แบบของข้อความเช่น แบบอักษร แบบตัวอักษร สี (ใหป้ รับข้อความให้มีขนาด

ใหญห่ าข้อความตัวเลก็ เกนิ ไปจะมองไม่เห็นรูปภาพในขอ้ ความโดยพิมพ์ตวั เลขเพอ่ื
กำหนดขนาดของข้อความลงไปเอง)

(4) คิดบรเิ วณพ้นื ที่วา่ งบนรปู ภาพท่ีต้องการใส่ข้อความปรากฏพน้ื ทส่ี แี ดงและปรากฏเคอ
เซอรก์ ะพริบ ให้พมิ พ์ข้อความทต่ี อ้ งการจะเปน็ พิมพ์
4.1 ในขณะที่พิมพ์ข้อความ จะมีเสน้ 1 เส้น จะเปน็ เสน้ บอกแนวบรรทัดเมื่อพิมพเ์ สรจ็
เรยี บร้อยและมกี ารยนื ยนั ข้อความ เสน้ น้จี งึ จะหายไป
4.2 เลอ่ื นตำแหน่งของข้อความชไดโ้ ดยการนำเมาสอ์ อกจากขอ้ ความเคอร์เซอร์จะ
เปล่ียนแปลงรปู เครือ่ งมอื Move ให้คลิกค้างและแดรกเมาส์เพื่อเลื่อนข้อความไปยงั
ตำแหน่งที่ต้องการ

(5) ที่แถบเคร่ืองมอื ให้คิดเคร่ืองหมายถกู เพื่อต้องการยนื ยนั การใสข่ ้อความ
(6) ข้อความทีพ่ ิมพ์กลายเป็นเส้นประ(Selection)
(7) ทำการคัดลอกโดยไปท่เี มนู Edit แล้วเลอื ก copy
(8) สร้างภาพขึ้นมาใหมโ่ ดยไปทเ่ี มนู File แล้วเลือก New..
(9) โปรแกรมจะแสดงพื้นที่ท่ีถูกคัดลอก ให้ตงั้ ช่ือของรูปภาพ
(10) กดOk
(11) วางรูปภาพที่คดั ลอกไปท่ีเมนูEditแลว้ เลือกPaste
(12) จะปรากฏรปู ภาพในข้อความที่สมบรู ณ์



วิธีแกไ้ ขสระลอยหรือจมใน Adobe Photoshop CS

โปรแกรมอะโดดีโฟโตช็อปเป็นโปรแกรมที่พัฒนามาจากภาษาอังกฤษซง่ึ อังกฤษไม่มีการใชเ้ สน้
บรรทัดเพ่ือแบ่งสระหรือวรรณยกุ ต์แบบภาษาไทยดงั นัน้ เม่ือมกี ารใช้ภาษาไทยในโปรแกรมจึงมีการ
แสดงผลไมถ่ ูกต้องซึ่งในโปรแกรมไดร้ ับรองแตกต่างของบรรทดั นี้เอาไว้

รปู ภาพแสดงการเปรียบเทยี บระหว่างสระลอยและสระจม กบั ข้อความปกติ

เมอื่ โปรแกรมไม่มกี ารจดั การบรรทัดแบบอัตโนมตั ิผู้ใช้โปรแกรมจงึ ต้องจดั ระยะหา่ งเองซ่ึงมขี นั้ ตอน
ดงั น้ี

1. เปดิ รปู ภาพที่ต้องการทดสอบคำสง่ั
2. พมิ พ์ข้อความท่ีต้องการท่ีมวี รรณยุกตซ์ ้อนทับกนั จากตัวอย่างคำว่า “น้ำท่วมกรุงเทพฯ”
3. คลิกทลี่ องวรรณยกุ ต์ท่ีลอยหรือจมแลว้ เลือกวรรณยุกต์นน้ั โดยการกด Shift ค้างแลว้ กดลูกศร

ซ้ายเพื่อหลงั ไปคุมดำตวั อกั ษรโปรแกรมจะไมแ่ สดงผลว่ามีการเลือกวรรณยุกต์(จากตัวอย่าง
ให้นำเคอรเ์ ซอร์เมอ่ื วางท่ีสระอำ กด Shift ค้างแลว้ กดลกู ศรซ้ายเพ่ือถอยหลัง 1 ครัง้ )
4. กดปมุ่ shift+Alt แลว้ กดลกู ศรลง เพอ่ื ปรับระดบั วรรณยกุ ต์ หากเผลอกด shift+Alt+ ลูกศร
ลง จนวรรณยุกต์โจมมากเกนิ ไปให้กด shift+Alt+ ลกู ศรข้ึนเพ่อื นขึ้น
5. ประมาณระยะทางดว้ ยสายตาจากน้นั กป็ ล่อยมือจากแปน้ พิมพ์แล้วคลกิ เพอ่ื ยนื ยนั แก้ไข

ขอ้ ความที่มกี ารปรบั วรรณยุกตท์ ี่สมบรู ณ์

การใชค้ ำสง่ั Warp Text

คำส่งั Warp Text เป็นการส่ังทท่ี ำใหข้ ้อความบิดเบ้ยี วซึ่งผู้ใช้สามารถกำหนดความผิดเบีย้ วของ
ตวั อกั ษรไดต้ ามความต้องการในการใชค้ ำสง่ั Warp Text ได้สามารถทำไดก้ ับเรอ่ื งเคร่อื งมือ Type
ทกุ ประเภทการใชค้ ำส่ัง Warp Text สามารถทำไดด้ งั น้ี

1. เปดิ รูปภาพท่ตี ้องการใช้คำส่ังWarp Text
2. เลอื กเครื่องมือและพิมพ์ขอ้ ความที่ต้องการ
3. คลกิ เลเยอร์ Warp Text (จากตวั อยา่ งซ่ึงเป็นชอ่ื แกงเขยี วหวาน)

4. คลกิ ท่ี เพอ่ื เรียกหนา้ ต่าง Warp Text
5. เลือกรูปแบบการบดิ เบี้ยวทีต่ ้องการ จากนน้ั ปรับความบิดเบยี้ วของข้อความ
6. คลกิ OK
7. ใช้เครื่องมือ Move เร่ืองตำแหนง่ ของขอ้ ความหรือคำสงั่ free transform (เมนEู dit เลือก

free transform หรือกดCtrl+T) เพื่อความเหมาะสมเพ่ือความเหมาะสม

รูปภาพแสดงการใชค้ ำส่ัง Warp Text

การกำหนดรปู แบบใหก้ บั ข้อความ

การกำหนดรูปแบบใหก้ บั ขอ้ ความสามารถทำได้กับเครื่องมือ Type 2 ประเภทคือ Horizontal
Type Tool และ Vertical Type Tool การกำหนดให้รูปแบบใหก้ บั ขอ้ ความสามารถทำไดด้ ังนี้

1. เปิดรูปภาพทตี่ ้องการ
2. เลอื กเคร่ืองมือ Horizontal Type Tool หรือ Vertical Type Tool (จากตวั เลอื ก

Horizontal Type Tool ) และพมิ พ์ข้อความทตี่ ้องการ(จากตวั อย่างเป็นข้อความ”นำ้ ทว่ ม
แล้ว”)
3. คลกิ เลเยอรท์ ่ีต้องการกำหนดรปู แบบข้อความ(จากตัวอย่างเปน็ ช่ือ“นำ้ ท่วมแลว้ ”)

4. คลิกท่หี นา้ ตา่ ง Styles (หากไม่ปรากฏหน้าต่างนีใ้ นโปรแกรมใหเ้ รียกหน้าตา่ งนข้ี น้ึ มาโดย
เลอื กเมนู window แลว้ เลอื ก Styles)

5. เลอื ก Styles เพมิ่ เติมโดยทำตามขั้นตอนดังน้ี

5.1 หากต้องการเลือก Styles เพม่ิ เติมใหค้ ลกิ ที่
5.2 เลือกประเภทของ Styles
5.3 คลิก OK
6. ใหเ้ ลือกStylesที่ต้องการ
7. เมอื่ เลอื กแลว้ ให้สงั เกตท่ีหน้าตา่ ง Layers ท่ี Layers ข้อความปรากฏ Effects ขึน้ มา
อัตโนมตั ิ
8. ข้อความเปลี่ยนเป็นรูปแบบท่ีเลือก



รปู ภาพแสดงการกำหนดรูปแบบให้กับขอ้ ความโดยใช้เคร่อื งมือ Horizontal Type Tool

การใช้คำส่งั Blending Options

การกำหนดรูปแบบให้กบั ขอ้ ความสามารถทำได้กับเครื่องมือ Type สองประเภทคือHorizontal
Type Tool และ Vertical Type Tool การกำหนด Blending mode สามารถทำได้ดังน้ี

1. เปิดรปู ภาพที่ต้องการใชค้ ำสง่ั
2. เลือกเครื่องมือHorizontal Type Tool หรือ Vertical Type Tool (จากตวั อยา่ งเลือก

Horizontal Type Tool) และพิมพ์ข้อความทต่ี ้องการ (จากตวั อยา่ งเป็นข้อความ“สกนี ้ำ
ทว่ ม”)
3. ใช้เครือ่ งมือ Move เล่ือนตำแหนง่ ของข้อความ หรอื ใช้คำสั่ง free transform(เมนู Edit
เลอื ก free transform หรอื กด Ctrl + T ) เพือ่ ความเหมาะสมเมื่อปรับเรียบร้อยใหก้ ดปมุ่
Enter
4. คลกิ เลเยอร์ที่ต้องการกำหนดรูปแบบข้อความ(จากตวั อยา่ งเป็นช่ือ“สกีน้ำท่วม”)
5. คลิกท่เี มนู layer เลือก layer Styles แล้วเลอื ก Blending Options…
6. ปรากฏหนา้ ตา่ ง layer Styles ปรับแต่งคา่ ต่างๆ ได้ตามต้องการแบบเดยี วกับ layer ปกติ
7. คลกิ ปุม่ OK
8. เมอื่ เลือกแลว้ ใหส้ งั เกตท่ีหนา้ ต่าง layer ที่ layer ขอ้ ความปรากฏ Effects ขึ้นมาอัตโนมัติ
9. ทำการปรบั Mode‚ Opacity และ Fill ใหเ้ หมาะสม
10. ขอ้ ความเปลี่ยนเป็นรูปแบบท่ีเลอื ก



รปู ภาพแสดงการกำหนด Blending Options ให้กบั ข้อความโดยใช้เคร่อื งมือ Horizontal Type Tool

แบบประเมนิ ผลหลงั เรียนหนว่ ยท่ี 9

คำส่ัง จงเลอื กคำตอบทถี่ กู ต้องเพียงข้อเดยี ว
1. การสร้างขอ้ ความในโปรแกรมอะโดบีโฟโตชอ็ ปท่าได้ท่ีวิธี อะไรบา้ ง

ก. 2 วธิ ี คอื Warp Text และ Blending mode
ข. 2 วิธี คอื การใสข่ ้อความในรปู ภาพ และการใสร่ ูปภาพในขอ้ ความ
ค. 2 วธิ ี คือ Horizontal Type Tool และ Vertical Type Tool
ง. 4 วิธี คอื Horizontal Type Tool, Vertical Type Tool, Horizontal Type Mask Tool
และ Vertical Type Mask Tool
2. ข้อใดไม่ใชร่ ูปแบบของเครื่องมือ Type
ก. Horizontal Type Tool
ข. Warp Text
ค. Vertical Type Tool
ง. Horizontal Type Mask Tool
3. ขอ้ ความต่อไมน่ ้กี ลา่ วถูกต้องหรอื ไม่อยา่ งไร “เครื่องมือ Type เปน็ การสร้างเลเยอรข์ ้ึนใหม่
เช่นเดียวกบั การใช้คำสั่งสรา้ งเลเยอร์ข้นึ มาใหม่"
ก. ไม่ถูกตอ้ ง เพราะเลเยอร์ท่ีสร้างจากเครื่องมือ Type เป็นเลเยอรป์ ระเภทตัวอักษรท่ีมี

ลักษณะเฉพาะ
ข. ไม่ถูกตอ้ ง เพราะเครื่องมือ Type ไม่มกี ารสรา้ งเลเยอร์
ค. ไมถ่ ูกตอ้ ง เพราะเลเยอร์ที่สรา้ งจากเคร่ืองมือ Type แตกตา่ งจากคำสั่งสรา้ งเลเยอรใ์ หม่
ง. ไม่มีข้อใดถกู
4. ข้นั ตอนใดเปน็ การยนื ยนั การใสข่ อ้ ความแนวขวาง
ก. เปดิ รปู ภาพท่ีต้องการใส่ข้อความ
ข. คลิกเลือกเครอื่ งมือ Horizontal Type Tool
ค. คลกิ เครือ่ งหมายถูกท่ีแถบเคร่ืองมือ
ง. พิมพ์ขอ้ ความท่ตี ้องการตรงตำแหน่งท่เี คอร์เซอร์กะพรบิ
5. ขอ้ ใดเปน็ วิธกี ารทำให้เสน้ บอกแนวบรรทัดหายไป
ก. ตง้ั ค่ารปู แบบขอ้ ความ
ข. ยืนยนั การใสข่ ้อความ
ค. ลบขอ้ ความท่พี ิมพ์ออก

ง. ถูกทุกขอ้
6. ข้อใดเปน็ ช่ือของเครื่องมือดังรปู

ก. เครือ่ งมือ Horizontal Type Mask Tool
ข. เครอื่ งมือ Vertical Type Mask Tool
ค. เครอื่ งมือ Warp Text
ง. เครื่องมือ Blending Options
7. การกำหนดรูปแบบให้กบั ข้อความสามารถทำได้กับเคร่ืองมอื Type ประเภทใดบา้ ง
ก. เครอื่ งมือ Horizontal Type Tool และ Vertical Type Tool
ข. เครื่องมือ Horizontal Type Mask Tool และ Vertical Type Tool
ค. เครื่องมือ Horizontal Type Mask Tool และ Vertical Type Mask Tool
ง. เครื่องมือ Type ทกุ ประเภท
8. การใช้คำส่ัง Blanding Option ใชไ้ ดก้ บั เครื่องมือ Type ประเภทใดบ้าง
ก. เคร่อื งมือ Horizontal Type Tool และ Vertical Type Tool
ข. เครอ่ื งมือ Horizontal Type Mask Tool และ Vertical Type Tool
ค. เครือ่ งมือ Horizontal Type Mask Tool และ Vertical Type Mask Tool
ง. เครือ่ งมือ Type ทกุ ประเภท
9. การใชค้ ำส่ัง Warp Text ใชไ้ ดก้ บั เคร่ืองมือ Type ประเภทใดบ้าง
ก. เคร่อื งมือ Horizontal Type Tool และ Vertical Type Tool
ข. เครอ่ื งมือ Horizontal Type Mask Tool และ Vertical Type Tool
ค. เครื่องมือ Horizontal Type Mask Tool และ Vertical Type Mask Tool
ง. เครื่องมือ Type ทกุ ประเภท
10. ข้อใดเป็นการเลือนตำแหน่งของสระทล่ี อยหรือจม
ก. กดปุ่ม Ctrl + Alt + อักษรขึน้ หรือลง
ข. กดปุ่ม Ctrl + Shift + อักษรขึน้ หรอื ลง
ค. กดป่มุ Shift + Alt + อกั ษรขนึ้ หรือลง
ง. กดปมุ่ Ctrl + Alt + Shift + อกั ษรข้ึนหรือลง

ใบงานท่ี 9.1

คำสั่ง เปดิ รปู ภาพที่กำหนดให้ แล้วใชเ้ คร่ืองมือแทรกข้อความให้เหมาะสมกับรูปภาพและปรบั รูปแบบ
ของขอ้ ความใหด้ นู า่ สนใจเช่น Layer Styles, Styles, Warp Text บนั ทึกไฟลง์ าน“ใบงานที่ 19-
1.jpg”-“ใบงานที่ 19-6.jpg”

ตารางการใหค้ ะแนน

ลำดบั ท่ี หัวข้อ คะแนน
(เต็ม 10 คะแนน)

1 ใส่ข้อความในรูปภาพได้
2 จดั ตำแหน่งข้อความได้เหมาะสมกบั รปู ภาพ
3 ปรบั แตง่ ข้อความนา่ สนใจ
4 บันทึกไฟลง์ านตามชอ่ื ในใบงาน

คะแนนเฉลย่ี

หนว่ ยการเรยี นรูท้ ี่ 10 การสรา้ งภาพเคลือ่ นไหว (Animation)

แนวคดิ
ภาพเคล่อื นไหว คอื ลำดับของภาพนง่ิ ซ่ึงถูกนำมาแสดงผลตดิ ตอ่ กันอย่างต่อเนื่องในการสรา้ ง

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

สาระการเรียนรู้
1. ความหมายของภาพเคล่อื นไหว
2. ลกั ษณะของภาพเคล่ือนไหว
3. หน้าตา่ ง Animation
4. การสร้างภาพเคลื่อนไหวโดย layer
5. การลดขนาดของภาพและสร้างข้อความดกุ๊ ดิ๊ก
6. การเพิ่มพื้นทวี่ า่ งจากรูปภาพเพอ่ื ทำข้อความกะพริบ

ผลการเรยี นรู้ทีค่ าดหวัง
1. อธิบายความหมายของภาพเคลอ่ื นไหวได้
2. อธิบายลักษณะของภาพเคล่ือนไหวได้
3. อธบิ ายหน้าตา่ งAnimationได้
4. สรา้ งภาพเคลอื่ นไหวด้วยlayerได้
5. ลดขนาดของภาพสรา้ งความดุกดกิ ได้
6. เพม่ิ พ้ืนที่วา่ งจากรูปภาพเพ่ือทำขอ้ ความกะพรบิ ได้

แบบประเมินผลกอ่ นเรียนหนว่ ยท่ี 10

คำส่ัง จงเลอื กคำตอบทถี่ กู ต้องเพียงข้อเดยี ว

1. ขอ้ ความใดกล่าวไมถ่ ูกตอ้ งเก่ยี วกบั ภาพเคล่ือนไหว

ก. ภาพเคลอ่ื นไหวทีส่ มั พนั ธ์กันสามารถสร้างความสนใจให้เพิ่มขน้ึ ได้

ข. ภาพเคล่อื นไหวเปน็ การทำภาพกราฟิกให้ดเู หมอื นมชี ีวติ

ค. ควรมีการเลือกรูปแบบของการสร้างรปู ภาพเคลอื่ นไหววัตถุใหเ้ หมาะสม

ง. GIF เปน็ ภาพท่ีต้องการความคมชดั สงู

2. ข้อใดหมายถงึ ภาพนงิ่ แต่ละภาพท่ปี รากฏบนภาพเคล่ือนไหว

ก. Frame

ข. Record

ค. Layer

ง. GIF

3. ในการสรา้ งภาพเคล่ือนไหวตอ้ งกำหนดไฟล์ให้เปน็ นามสกุลใด

ก. .jpg ข. .gif

ค. .cad ง. .pig

4. ข้อใดหมายถึงภาพเคล่อื นไหวแบบ Frame by Frame

ก. เหมาะสำหรับการสรา้ งภาพเคลอ่ื นไหวทีม่ ีความซับซ้อนมากๆ

ข. เป็นการสร้างภาพเคลื่อนไหวโดยไมส่ ามารถกำหนดการเปล่ียนแปลงได้

ค. โปรแกรมจะสร้างการเปลี่ยนแปลงระหวา่ งเฟรมให้โดยอตั โนมตั ิ

ง. มกี ารสรา้ งเฟรมเพยี ง 2 เฟรม

5. ข้อใดหมายถงึ ภาพเคล่อื นไหวแบบ Tween

ก. การกำหนดการเปลีย่ นแปลงของวตั ถุทีแ่ ตกตา่ งกันในทุก ๆ เฟรม

ข. เหมาะสำหรับการสรา้ งภาพเคล่อื นไหวท่ีมีความซับซ้อนมากๆ

ค. สามารถกำหนดการเปลีย่ นแปลงของวัตถใุ นเฟรมตา่ งๆ ได้

ง. เป็นการสรา้ งภาพเคลื่อนไหวจากเฟรมเบ้ืองตน้ และเฟรมสดุ ท้ายโดยโปรแกรมอัตโนมัติ

6.ขอ้ ใดต่อไปนกี้ ลา่ วถูกตอ้ ง

ก. การทำตวั อักษรกะพรบิ ไม่ถือเปน็ การทำแอนิเมชัน

ข. การทำตวั อักษรกะพริบเป็นการทำแอนเิ มชนั

ค. การทำตัวอักษรเล่ือนไม่ถอื เปน็ การทำแอนเิ มชนั

ง. การทำตัวอกั ษรดึกดกึ ไมถ่ ือเป็นการทำแอนิเมชนั

7. ข้อใดคือคุณสมบัติของเครื่องมือ Constrain Proportions

ก. ปรับขนาดภาพตามผู้ใช้ทตี่ ้องการไดโ้ ดยไมร่ ักษาสเกล

ข. เป็นการปรับขนาดสเกลอัตโนมัตเิ ม่ือผ้ใู ช้มีการปรบั ขนาดภาพ

ค. เปลีย่ นภาพให้ตกุ๊ ติ๊กได้อัตโนมตั ิ

ง. ทำขอ้ ความใหเ้ ป็นข้อความเล่อื น

8. ขอ้ ใดหมายถึง Width

ก. ความสูง ข. ความลึก

ค. ความกวา้ ง ง. ความชดั

9. ข้อใดหมายถึง Height

ก. ความกวา้ ง ข. ความยาว

ค. ความสูง ง. ความลึก

10. ข้อใดเป็นเคร่ืองมือในการเพมิ่ พน้ื ทรี่ ูปภาพ

ก. Canvas Size ข. Image Size

ค. Add Size ง. ไม่มขี ้อใดถกู

ความหมายของภาพเคลื่อนไหว

ภาพเคล่ือนไหว (Animation) หมายถงึ ภาพกราฟฟิกท่มี ีการทำใหด้ เู หมือนมีชีวติ เพ่ือแสดง
ขัน้ ตอนหรือปรากฏการณ์ตา่ งๆที่เกิดขนึ้ อย่างต่อเนื่องเชน่ การเคลือ่ นที่ของตวั การต์ ูน การเคลือ่ นที่
ของขอ้ ความ หรือโฆษณาท่ีใช้รปู ภาพเป็นส่ือบนอนิ เทอรเ์ น็ต เปน็ ตน้ ซงึ่ ภาพนงิ่ แตล่ ะภาพที่ปรากฏ
บนภาพเคล่อื นไหวแต่ละภาพน้ันเรียกว่าเฟรม(Frame) ท้ังนี้เพ่ือสร้างสรรคจ์ นิ ตนาการใหเ้ กดิ แรงจงู ใจ
จากผู้ชมการผลิตภาพเคลอ่ื นไหวจะต้องใชโ้ ปรแกรมทม่ี ีคุณสมบัติเฉพาะทางซ่งึ อาจมีปัญหาเกดิ ข้ึนอยู่
บา้ งเกี่ยวกับขนาดของไฟล์ท่ีต้องใชพ้ น้ื ท่ีในการจดั เก็บมากกวา่ ภาพนงิ่ หลายเทา่

รปู ภาพแสดงการเคล่อื นไหวของตัวการ์ตนู ตั้งแตเ่ ฟรมที่ 1 ถึง เฟรมที่ 28

GIF ยอ่ มาจาก Graphics Interchange Format เปน็ ภาพท่ีต้องการความคมชัดมาก จำนวน
สีและความละเอยี ดของภาพไม่สงู มากนัก (256 สี) สามารถกำหนดพื้นแบบโปรง่ ใสตอ้ งการและ
แสดงผลโครงร่างก่อน แล้วคอ่ ยแสดงผลแบบละเอียดได้ และเหมาะสมกับการนำเสนอภาพแบบ
เคลอื่ นไหวในการสร้างภาพเคล่ือนไหว ตอ้ งบนั ทึกไฟลน์ ามสกลุ .gif

ลกั ษณะของภาพเคล่อื นไหว

การเคลือ่ นไหวของรูปภาพมี 2 รูปแบบ คอื
1. การเคลื่อนไหวแบบ Frame by Frame คือ การกำหนดการเปลยี่ นแปลงของวัตถุแตกตา่ ง

กนั ในทุกๆ เฟรม เหมาะสมสำหรับการสร้างภาพเคลื่อนไหวทมี่ คี วามซบั ซ้อนมากๆ
2. การเคลื่อนไหวแบบ Tween เปน็ การสรา้ งภาพเคลอ่ื นไหวจากเฟรมเบือ้ งต้นและเฟรม

สดุ ท้ายซงึ่ โปรแกรมจะสร้างการเปลี่ยนแปลงระหวา่ งเฟรมใหอ้ ัตโนมตั ิซงึ่ หมายถงึ การสร้าง

ภาพเคลือ่ นไหวแบบ Tween จะมกี ารสรา้ งเซลลเ์ พียง 2 เฟรม คอื เฟรมเริ่มต้นและสน้ิ
สุดทา้ ย

หน้าต่างAnimation

การสรา้ งภาพเคลื่อนไหวจำเป็นต้องเรยี นรู้เกีย่ วกับหนา้ ตา่ งท่ใี ช้สร้างภาพเคลื่อนไหวเพื่อใหท้ ราบ
ถงึ ช่อื เรยี กในแต่ละสว่ นวา่ มีหน้าท่กี ารทำงานอย่างไรในการเรยี กหน้าตา่ ง Animation สามารถทำได้
ดังน้ี

1. สร้างรปู ภาพใหม่โดยเลือกเมนู fire แลว้ เลอื ก new..
2. กำหนดพน้ื ท่ตี ามรปู ภาพ แล้วกด ok
3. คดิ ทเี่ มนู window แล้วเลือก Animation
4. ปรากฏหน้าต่าง Animation ให้คลิกทีป่ ุ่ม Converts to frame animation
5. ปรากฏหน้าตา่ ง Frame animation

รายละเอยี ดของหนา้ ต่าง Frame animation

ตัวอกั ษร ช่ือเรยี ก ความหมาย
A
B Selects the first frame เลอื กเฟรมแรก
C
D Selects the previous frame เลอื กเฟรมก่อนหน้า
E
F Plays animation เลน่ ภาพเคลอ่ื นไหว
G
H Selects the next frame เลือกเฟรมถดั ไป

T Tweens animation frames ใชค้ ำสง่ั Tween

Duplicates Selected frame คัดลอกเฟรมท่เี ลอื ก

Deletes Selected frame ลบเฟรมทเี่ ลือก

Converts to timeline mode แสดงเส้นเวลา (เฉพาะ Photoshop

Extended)

Animation panel menu เมนขู องหน้าตา่ ง Animation

การสร้างภาพเคลื่อนไหวด้วยlayer

การสร้างภาพเคล่ือนไหวจากทไ่ี ด้กลา่ วไป สามารถสร้างได้ 2 รูปแบบคือ การเคล่ือนไหวแบบ
Frame by Frame และการเคลือ่ นไหวแบบ Tween ซึ่งโปรแกรมอะโดบโี ฟโพช้อป รองรบั การสรา้ ง
ภาพเคลอ่ื นไหวทั้ง 2 แบบด้วยกันเช่น

1. การสร้างภาพเคลอ่ื นไหวดว้ ย layer แบบ Frame by Frame
(1) สรา้ งรปู ภาพใหม่โดยเร่อื งเมนู fire แล้วก็เลือก new..
(2) กำหนดพนื้ ที่ตามรูปภาพ แลว้ กด ok
(3) เลือกเคร่ืองมือ Horizontal Type
(4) พื้นท่วี ่างเพื่อพิมพ์ข้อความ
(5) เลอื กเลเยอร์ข้อความที่ต้องการสรา้ งการเคลอื่ นไหว

(6) ใชเ้ ครือ่ งมือ moveเลือ่ นเฟรมแทรกขอ้ ความไวทางขวา
(7) คดั ลอกเฟรมโดยการคลกิ ทโ่ี ดยการคลิกที่ปุม่ Duplicates selected frames
(8) ท่ีเฟรมท่ี 2 ใช้เครื่องมือmove เล่ือนข้อความไวท้ างก่งึ กลาง
(9) คดั ลอกเฟรมโดยการคลกิ ท่ปี ุ่ม Duplicates selected frames
(10)ทเี่ ฟรมท่ี 3 ใชเ้ คร่ืองมือ move เลอื่ นข้อความไว้ทางซา้ ย
(11)ทดลองการเคลื่อนไหวโดยคลิกทีป่ มุ่ Plays animation
(12)ปรบั เปลยี่ นความเร็ว และการเลน่ ภาพเคลือ่ นไหวให้เหมาะสม

การบนั ทึกไฟล์ภาพเคลือ่ นไหวเพื่อนำไปใชง้ านสามารถทำไดด้ ังนี้
1. เลือกทเ่ี มนู file แลว้ เลือก Save for Web & Devices..
2. เลอื กประเภทของไฟลเ์ ปน็ GIF
3. กดปมุ่ Save
4. ปรากฏหนา้ ต่าง Save Optimized As ให้เลือกตำแหนง่ และใส่ช่อื ไฟล์ท่ีทตี่ ้องการบนั ทกึ
5. กดปมุ่ Save

รูปภาพแสดงการบนั ทกึ ไฟล์ภาพเคลื่อนไหวเพ่อื นำไปใชง้ าน

การสรา้ งภาพเคลื่อนไหวดว้ ย layer แบบ Tween

1. สรา้ งรปู ภาพใหมโ่ ดยเลอื กเมนู fire แล้วเลอื ก new..
2. กำหนดพ้ืนทตี่ ามรูปภาพ แล้วกด ok
3. เลอื กเคร่ืองมือ Horizontal Type
4. คลิกพน้ื ทีว่ ่างเพ่ือพมิ พ์ข้อความ
5. เลอื กเลเยอร์ข้อความที่ต้องการสร้างการเคลื่อนไหว

6. ใช้เครอื่ งมือ move เลอื่ นเฟรมแทรกข้อความไว้ทางขวา
7. คัดลอกเฟรมโดยการคลกิ ท่โี ดยการคลิกที่ป่มุ Duplicates selected frames
8. ท่เี ฟรมที่ 2 ใช้เครือ่ งมือ move เล่ือนข้อความไวท้ างซา้ ย
9. คลิกที่ปมุ่ Tween animation frame

10. กำหนดคา่ ต่างๆตามรูปภาพแลว้ กด ok
11. ทดลองการเคลอ่ื นไหวโดยคลิกทีป่ มุ่ Plays animation

การสร้างภาพเคลื่อนไหวแบบ Tween ซึง่ เป็นการสรา้ งภาพเคลอื่ นไหวโดยให้โปรแกรมช่วย
สรา้ งภาพระหว่างเฟรมเรม่ิ ตน้ กาแฟรมสุดทา้ ย จากตวั อยา่ งการสร้างกำหนดค่าเฟรมทตี่ ้องการเพ่ิมใน
การTween คือ 22 เฟรม เม่ือตรวจสอบเฟรมท้ังหมดจะมีเฟรมทัง้ ส้ิน 24 เฟรม ซ่ึงสองเฟรมทีเ่ พ่มิ ขึ้น
คือเฟรมเร่มิ ต้นและเฟรมสุดท้ายที่ผูใ้ ชไ้ ดส้ รา้ งขน้ึ

การลดขนาดของภาพและสรา้ งข้อความดุก๊ ดิ๊ก

1. เปดิ รปู ภาพทีต่ ้องการ
2. เลอื กเมนู Image เลือก Image Size
3. ปรากฏหน้าตา่ ง Image Size

3.1 นำเคร่ืองหมายถูก ท่หี น้าข้อความ Constrain Proportions ออก
3.2 ในกรอบ Pixel Dimensions ปรบั Width เป็น 200 Pixels
3.3 ในกรอบ Pixel Dimensions ปรบั Height เป็น 200Pixels
3.4 กด OK
4. ขนาดของภาพมีขนาดเป็น 200 Pixels x 200 Pixelsตามท่ีกำหนด

5. เลอื กเคร่ืองมือ Horizontal
6. พิมพ์ข้อความที่ต้องการ
7. คลกิ เพ่ือยนื ยันข้อความ
8. เลือกเมนู Edit เลอื ก Free Transform

9. นำเมาส์ไว้ทม่ี ุมข้อความจนเป็นรูป เอยี งข้อความตามภาพ
10. คลิก

11. คดั ลอกเฟรมโดยการคลกิ ทป่ี ุ่ม Duplicates selected frames
12. ปรากฏเฟรมที่ 2 จากน่นั คลิกเลอื กทเ่ี ฟรมท่ี2
13. เลอื กทเ่ี ลย์เยอรข์ ้องความ
14. คดั ลอกLayer ข้อความโดยเลือกเมนู Layer เลอื ก Duplicate Layer
15. กดปมุ่ OK

16. คลกิ ท่ีเฟรมท่ี2
17. คลกิ ทเี่ ลเยอร์ข้อความท่ีคดั ลอก
18. เลือกเมนู Edit เลือก Free Transform
19. นำเมาส์ไว้ทมี่ ุมข้อความจนเป็นรปู เอยี งข้อความตามภาพ
20. คลิก

21. คลิกที่เฟรมท่ี1
22. แสดงเลเยอรข์ ้อความ และซ่อนเลเยอรข์ อ้ ความท่ีคัดลอก
23. คลิกทเ่ี ฟรมท่ี2
24. ซ่อนเลเยอร์ขอ้ ความ และแสดงเลเยอรข์ ้อความที่คัดลอก
25. ปรับเวลาให้เป็น0.5 ทั้ง2เฟรม
26. ทดลองการเคล่ือนไหวโดยคลิกทปี่ ุ่ม plays animation

การเพิม่ พ้นื ทีว่ า่ งจากรปู ภาพและทำขอ้ ความกะพรบิ

1. เปิดรูปภาพที่ต้องการ
2. เลือกสีพื้นหลังท่ี Background color ท่ตี อ้ งการ (จากภาพเลือกพน้ื หลังเปน็ ทขี่ าว)
3. เลอื กเมนู Image เลอื ก Canvas Size
4. ปรากฏกล่อง Canvas Size

4.1 ต๊ิก✔️ ที่กล่อง Relative
4.2 กำหนดค่า width เป็น 5 Cm
4.3 กำหนดค่า Anchor เปน็ จุดก่ึงกลางซา้ ย(สงั เกตลกู ศรจะชไ้ี ปทางขวาหมายถงึ เพ่ิมพืน้ ที่
ความกวา้ งทางขวา 5 cm ตามค่า Width
4.4 แลว้ กดOK
5. รปู ภาพถูกเพม่ิ ข้นึ ทีท่ างขวา 5CM
6. เลอื กเครื่องมือ Vertical Type Tool
7. ปรบั ขนาด สี แบบอักษร และคลิกบนพืน้ ทว่ี ่างเพ่ือพมิ พ์ข้อความ
8. กดป่มุ เพ่อื ยนื ยันการใชข้ ้อความ
9. คัดลอกเฟรมโดยคลิกทีป่ ุ่ม Duplicates selected frames
10. คลกิ เลือกเฟรมท่ี 2

11. ท่ีเฟรมที่ 2 ใหซ้ อ่ นเลเยอร์โดยการคลกิ ท่ี ของเลเยอรข์ ้อความ
12. ปรบั เวลาใหเ้ ป็น 0.5 ทั้ง 2 เฟรม
13. ทดลองการเคล่อื นไหวโดยคลิกทีป่ ุ่ม Plays animation



การสรา้ งภาพเคลอ่ื นไหว (Animation)

แนวคิด
ภาพเคลอ่ื นไหว คือ ลำดับของภาพนงิ่ ซง่ึ ถกู นำมาแสดงผลติดตอ่ กันอย่างตอ่ เนื่องในการสร้าง

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

สาระการเรียนรู้
7. ความหมายของภาพเคลอ่ื นไหว
8. ลกั ษณะของภาพเคลือ่ นไหว
9. หน้าตา่ ง Animation
10. การสรา้ งภาพเคล่ือนไหวโดย layer
11. การลดขนาดของภาพและสร้างข้อความดกุ๊ ด๊กิ
12. การเพ่ิมพนื้ ที่วา่ งจากรูปภาพเพ่อื ทำข้อความกะพริบ

ผลการเรยี นรูท้ ่ีคาดหวัง
7. อธบิ ายความหมายของภาพเคล่อื นไหวได้
8. อธบิ ายลักษณะของภาพเคล่ือนไหวได้
9. อธบิ ายหน้าตา่ งAnimationได้
10. สร้างภาพเคล่อื นไหวดว้ ยlayerได้
11. ลดขนาดของภาพสรา้ งความดุกดิกได้
12. เพ่ิมพน้ื ทวี่ า่ งจากรูปภาพเพ่อื ทำข้อความกะพรบิ ได้

แบบประเมินผลกอ่ นเรียนหนว่ ยท่ี 10

คำส่ัง จงเลอื กคำตอบทถี่ กู ต้องเพียงข้อเดยี ว

1. ขอ้ ความใดกลา่ วไมถ่ ูกตอ้ งเก่ยี วกบั ภาพเคล่อื นไหว

ก. ภาพเคลอ่ื นไหวทีส่ มั พนั ธ์กันสามารถสรา้ งความสนใจให้เพมิ่ ขึ้นได้

ข. ภาพเคล่อื นไหวเปน็ การทำภาพกราฟิกใหด้ เู หมอื นมีชวี ิต

ค. ควรมีการเลือกรูปแบบของการสร้างรปู ภาพเคลอื่ นไหววัตถุใหเ้ หมาะสม

ง. GIF เปน็ ภาพท่ีต้องการความคมชดั สงู

2. ข้อใดหมายถงึ ภาพนงิ่ แต่ละภาพท่ปี รากฏบนภาพเคล่ือนไหว

ก. Frame

ข. Record

ค. Layer

ง. GIF

3. ในการสรา้ งภาพเคล่ือนไหวตอ้ งกำหนดไฟล์ให้เปน็ นามสกลุ ใด

ก. .jpg ข. .gif

ค. .cad ง. .pig

4. ข้อใดหมายถึงภาพเคล่อื นไหวแบบ Frame by Frame

ก. เหมาะสำหรับการสรา้ งภาพเคล่ือนไหวทม่ี ีความซับซ้อนมากๆ

ข. เปน็ การสร้างภาพเคลื่อนไหวโดยไมส่ ามารถกำหนดการเปลี่ยนแปลงได้

ค. โปรแกรมจะสร้างการเปลี่ยนแปลงระหวา่ งเฟรมให้โดยอัตโนมตั ิ

ง. มกี ารสรา้ งเฟรมเพยี ง 2 เฟรม

5. ข้อใดหมายถงึ ภาพเคล่อื นไหวแบบ Tween

ก. การกำหนดการเปลีย่ นแปลงของวตั ถุที่แตกตา่ งกันในทุก ๆ เฟรม

ข. เหมาะสำหรบั การสรา้ งภาพเคล่อื นไหวท่ีมีความซับซ้อนมากๆ

ค. สามารถกำหนดการเปลีย่ นแปลงของวัตถุในเฟรมตา่ งๆ ได้

ง. เปน็ การสรา้ งภาพเคลื่อนไหวจากเฟรมเบ้ืองตน้ และเฟรมสุดทา้ ยโดยโปรแกรมอตั โนมัติ

6.ขอ้ ใดต่อไปนกี้ ลา่ วถูกตอ้ ง

ก. การทำตวั อักษรกะพรบิ ไม่ถือเปน็ การทำแอนิเมชัน

ข. การทำตวั อักษรกะพริบเป็นการทำแอนเิ มชนั

ค. การทำตัวอักษรเล่ือนไม่ถอื เปน็ การทำแอนเิ มชนั

ง. การทำตัวอกั ษรดึกดกึ ไมถ่ ือเป็นการทำแอนิเมชนั

7. ขอ้ ใดคือคุณสมบัติของเครื่องมือ Constrain Proportions

ก. ปรับขนาดภาพตามผู้ใช้ที่ต้องการไดโ้ ดยไมร่ ักษาสเกล

ข. เป็นการปรับขนาดสเกลอัตโนมัตเิ ม่ือผ้ใู ช้มีการปรบั ขนาดภาพ

ค. เปลีย่ นภาพให้ตกุ๊ ติ๊กได้อัตโนมตั ิ

ง. ทำขอ้ ความใหเ้ ป็นข้อความเล่อื น

8. ขอ้ ใดหมายถึง Width

ก. ความสูง ข. ความลึก

ค. ความกวา้ ง ง. ความชดั

9. ข้อใดหมายถึง Height

ก. ความกวา้ ง ข. ความยาว

ค. ความสูง ง. ความลึก

10. ข้อใดเป็นเคร่ืองมือในการเพมิ่ พน้ื ทรี่ ูปภาพ

ก. Canvas Size ข. Image Size

ค. Add Size ง. ไม่มขี ้อใดถกู

ความหมายของภาพเคลื่อนไหว

ภาพเคล่ือนไหว (Animation) หมายถงึ ภาพกราฟฟกิ ท่ีมกี ารทำใหด้ เู หมือนมชี ีวติ เพ่ือแสดง
ขัน้ ตอนหรือปรากฏการณ์ตา่ งๆท่ีเกิดขนึ้ อยา่ งตอ่ เนื่องเช่น การเคลอ่ื นท่ีของตวั การ์ตนู การเคลือ่ นที่
ของขอ้ ความ หรือโฆษณาท่ีใชร้ ปู ภาพเปน็ สือ่ บนอินเทอร์เน็ต เป็นต้น ซ่ึงภาพนิง่ แต่ละภาพที่ปรากฏ
บนภาพเคล่อื นไหวแต่ละภาพนน้ั เรียกวา่ เฟรม(Frame) ท้ังนีเ้ พ่อื สร้างสรรคจ์ นิ ตนาการใหเ้ กดิ แรงจงู ใจ
จากผู้ชมการผลิตภาพเคลอ่ื นไหวจะต้องใชโ้ ปรแกรมที่มีคุณสมบตั ิเฉพาะทางซึ่งอาจมปี ญั หาเกิดขน้ึ อยู่
บา้ งเกี่ยวกับขนาดของไฟล์ท่ีต้องใชพ้ ืน้ ทใี่ นการจดั เก็บมากกว่าภาพน่ิงหลายเท่า

รปู ภาพแสดงการเคล่อื นไหวของตัวการ์ตูนตงั้ แตเ่ ฟรมที่ 1 ถึง เฟรมท่ี 28

GIF ยอ่ มาจาก Graphics Interchange Format เป็นภาพที่ต้องการความคมชัดมาก จำนวน
สแี ละความละเอยี ดของภาพไมส่ ูงมากนัก (256 สี) สามารถกำหนดพ้นื แบบโปร่งใสต้องการและ
แสดงผลโครงร่างก่อน แล้วคอ่ ยแสดงผลแบบละเอียดได้ และเหมาะสมกับการนำเสนอภาพแบบ
เคลอื่ นไหวในการสร้างภาพเคล่อื นไหว ต้องบนั ทึกไฟล์นามสกุล .gif

ลกั ษณะของภาพเคล่อื นไหว

การเคลือ่ นไหวของรูปภาพมี 2 รปู แบบ คอื
3. การเคลื่อนไหวแบบ Frame by Frame คอื การกำหนดการเปลยี่ นแปลงของวัตถุแตกตา่ ง

กนั ในทุกๆ เฟรม เหมาะสมสำหรับการสร้างภาพเคลื่อนไหวทมี่ คี วามซับซอ้ นมากๆ
4. การเคลื่อนไหวแบบ Tween เป็นการสรา้ งภาพเคลอื่ นไหวจากเฟรมเบื้องต้นและเฟรม

สดุ ท้ายซงึ่ โปรแกรมจะสร้างการเปลี่ยนแปลงระหวา่ งเฟรมใหอ้ ัตโนมตั ิซ่งึ หมายถงึ การสร้าง

ภาพเคล่ือนไหวแบบ Tween จะมกี ารสร้างเซลลเ์ พยี ง 2 เฟรม คือเฟรมเริ่มตน้ และสน้ิ
สุดท้าย

หน้าต่างAnimation

การสรา้ งภาพเคลื่อนไหวจำเป็นต้องเรยี นรเู้ ก่ียวกับหนา้ ต่างทใ่ี ช้สร้างภาพเคล่ือนไหวเพ่ือให้ทราบ
ถงึ ช่อื เรยี กในแต่ละส่วนวา่ มหี นา้ ที่การทำงานอย่างไรในการเรียกหน้าตา่ ง Animation สามารถทำได้
ดงั นี้

6. สร้างรปู ภาพใหม่โดยเลอื กเมนู fire แล้วเลอื ก new..
7. กำหนดพื้นท่ตี ามรูปภาพ แล้วกด ok
8. คิดท่ีเมนู window แลว้ เลือก Animation
9. ปรากฏหน้าตา่ ง Animation ใหค้ ลกิ ทป่ี ุ่ม Converts to frame animation
10. ปรากฏหน้าตา่ ง Frame animation

รายละเอยี ดของหนา้ ต่าง Frame animation

ตัวอกั ษร ช่ือเรยี ก ความหมาย
A
B Selects the first frame เลอื กเฟรมแรก
C
D Selects the previous frame เลอื กเฟรมก่อนหน้า
E
F Plays animation เลน่ ภาพเคลอ่ื นไหว
G
H Selects the next frame เลือกเฟรมถดั ไป

T Tweens animation frames ใชค้ ำสง่ั Tween

Duplicates Selected frame คัดลอกเฟรมท่เี ลอื ก

Deletes Selected frame ลบเฟรมทเี่ ลือก

Converts to timeline mode แสดงเส้นเวลา (เฉพาะ Photoshop

Extended)

Animation panel menu เมนขู องหน้าตา่ ง Animation

การสร้างภาพเคล่ือนไหวด้วย layer

การสร้างภาพเคล่ือนไหวจากทไ่ี ดก้ ล่าวไป สามารถสร้างได้ 2 รูปแบบคือ การเคล่ือนไหวแบบ
Frame by Frame และการเคลอื่ นไหวแบบ Tween ซึ่งโปรแกรมอะโดบีโฟโพช้อป รองรบั การสรา้ ง
ภาพเคลอ่ื นไหวทั้ง 2 แบบดว้ ยกนั เช่น

2. การสร้างภาพเคลื่อนไหวดว้ ย layer แบบ Frame by Frame
(1) สร้างรูปภาพใหม่โดยเร่อื งเมนู fire แล้วก็เลือก new..
(2) กำหนดพื้นทต่ี ามรูปภาพ แลว้ กด ok
(3) เลือกเคร่ืองมือ Horizontal Type
(4) พื้นท่วี ่างเพ่อื พมิ พ์ข้อความ
(5) เลอื กเลเยอร์ข้อความท่ีต้องการสรา้ งการเคลอื่ นไหว

(6) ใชเ้ ครือ่ งมือ moveเลือ่ นเฟรมแทรกขอ้ ความไวทางขวา
(7) คดั ลอกเฟรมโดยการคลกิ ทโ่ี ดยการคลิกที่ปุม่ Duplicates selected frames
(8) ท่ีเฟรมที่ 2 ใชเ้ คร่อื งมือmove เล่ือนข้อความไวท้ างก่งึ กลาง
(9) คดั ลอกเฟรมโดยการคลกิ ท่ปี ุ่ม Duplicates selected frames
(10)ทเี่ ฟรมท่ี 3 ใช้เคร่ืองมือ move เลอื่ นข้อความไว้ทางซา้ ย
(11)ทดลองการเคลื่อนไหวโดยคลิกทีป่ มุ่ Plays animation
(12)ปรบั เปลีย่ นความเร็ว และการเลน่ ภาพเคลือ่ นไหวให้เหมาะสม

การบนั ทึกไฟลภ์ าพเคลื่อนไหวเพื่อนำไปใช้งานสามารถทำไดด้ งั นี้
6. เลอื กทเ่ี มนู file แล้วเลอื ก Save for Web & Devices..
7. เลือกประเภทของไฟลเ์ ป็น GIF
8. กดปมุ่ Save
9. ปรากฏหนา้ ตา่ ง Save Optimized As ให้เลอื กตำแหนง่ และใสช่ ื่อไฟลท์ ่ีทต่ี ้องการบันทึก
10. กดปุ่ม Save

รปู ภาพแสดงการบนั ทกึ ไฟลภ์ าพเคล่อื นไหวเพื่อนำไปใชง้ าน

การสร้างภาพเคลื่อนไหวดว้ ย layer แบบ Tween
12. สร้างรูปภาพใหม่โดยเลือกเมนู fire แล้วเลือก new..
13. กำหนดพืน้ ท่ีตามรปู ภาพ แล้วกด ok
14. เลือกเคร่ืองมือ Horizontal Type
15. คลกิ พ้นื ท่ีวา่ งเพื่อพิมพ์ขอ้ ความ
16. เลือกเลเยอร์ขอ้ ความที่ต้องการสรา้ งการเคล่อื นไหว

17. ใช้เครอื่ งมือ move เล่ือนเฟรมแทรกขอ้ ความไวท้ างขวา
18. คดั ลอกเฟรมโดยการคลกิ ทีโ่ ดยการคลิกทปี่ ุ่ม Duplicates selected frames
19. ทเี่ ฟรมที่ 2 ใชเ้ ครื่องมือ move เลอื่ นข้อความไว้ทางซ้าย
20. คลิกทปี่ มุ่ Tween animation frame

21. กำหนดคา่ ต่างๆตามรูปภาพแลว้ กด ok
22. ทดลองการเคลอ่ื นไหวโดยคลิกทีป่ มุ่ Plays animation

การสรา้ งภาพเคลื่อนไหวแบบ Tween ซงึ่ เปน็ การสร้างภาพเคลอ่ื นไหวโดยให้โปรแกรมชว่ ย
สรา้ งภาพระหวา่ งเฟรมเรม่ิ ต้นกาแฟรมสุดท้าย จากตวั อยา่ งการสรา้ งกำหนดค่าเฟรมท่ีต้องการเพิ่มใน
การTween คอื 22 เฟรม เมื่อตรวจสอบเฟรมท้ังหมดจะมเี ฟรมทั้งสิ้น 24 เฟรม ซ่ึงสองเฟรมทเี่ พิม่ ขึ้น
คือเฟรมเร่ิมต้นและเฟรมสุดท้ายท่ีผู้ใชไ้ ด้สร้างขึ้น

การลดขนาดของภาพและสร้างขอ้ ความดุก๊ ดิ๊ก

27. เปดิ รปู ภาพทต่ี ้องการ
28. เลอื กเมนู Image เลือก Image Size
29. ปรากฏหนา้ ต่าง Image Size

29.1นำเคร่อื งหมายถูก ที่หน้าข้อความ Constrain Proportions ออก
29.2ในกรอบ Pixel Dimensions ปรับ Width เป็น 200 Pixels
29.3ในกรอบ Pixel Dimensions ปรบั Height เป็น 200Pixels
29.4กด OK
30. ขนาดของภาพมขี นาดเปน็ 200 Pixels x 200 Pixelsตามที่กำหนด

31. เลือกเครื่องมือ Horizontal
32. พิมพ์ข้อความที่ตอ้ งการ
33. คลกิ เพื่อยืนยันข้อความ
34. เลอื กเมนู Edit เลอื ก Free Transform

35. นำเมาส์ไว้ทม่ี ุมข้อความจนเป็นรูป เอยี งข้อความตามภาพ
36. คลิก

37. คัดลอกเฟรมโดยการคลกิ ทป่ี ุ่ม Duplicates selected frames
38. ปรากฏเฟรมที่ 2 จากน่นั คลิกเลอื กทเ่ี ฟรมท่ี2
39. เลือกทเ่ี ลย์เยอรข์ ้องความ
40. คดั ลอกLayer ข้อความโดยเลือกเมนู Layer เลอื ก Duplicate Layer
41. กดปมุ่ OK

42. คลกิ ท่ีเฟรมท่ี2
43. คลิกทเี่ ลเยอร์ข้อความท่ีคดั ลอก
44. เลอื กเมนู Edit เลือก Free Transform
45. นำเมาส์ไว้ทมี่ ุมข้อความจนเป็นรปู เอยี งข้อความตามภาพ
46. คลิก

47. คลิกที่เฟรมท่ี1
48. แสดงเลเยอรข์ ้อความ และซ่อนเลเยอรข์ อ้ ความท่ีคัดลอก
49. คลิกทเ่ี ฟรมท่ี2
50. ซ่อนเลเยอร์ขอ้ ความ และแสดงเลเยอรข์ ้อความที่คัดลอก
51. ปรับเวลาให้เป็น0.5 ทั้ง2เฟรม
52. ทดลองการเคล่ือนไหวโดยคลิกทปี่ ุ่ม plays animation

การเพ่ิมพ้ืนท่วี ่างจากรปู ภาพและทำขอ้ ความกะพรบิ

14. เปดิ รูปภาพทตี่ ้องการ
15. เลือกสีพ้ืนหลังท่ี Background color ทต่ี ้องการ (จากภาพเลอื กพื้นหลงั เป็นทขี่ าว)
16. เลอื กเมนู Image เลอื ก Canvas Size
17. ปรากฏกล่อง Canvas Size

4.1 ต๊กิ ✔️ ทกี่ ล่อง Relative
4.2 กำหนดคา่ width เป็น 5 Cm
4.3 กำหนดคา่ Anchor เป็นจดุ ก่ึงกลางซา้ ย(สังเกตลกู ศรจะชี้ไปทางขวาหมายถึงเพิ่มพื้นที่
ความกว้างทางขวา 5 cm ตามค่า Width
4.4 แลว้ กดOK
18. รูปภาพถกู เพ่มิ ขน้ึ ท่ีทางขวา 5CM
19. เลือกเคร่ืองมือ Vertical Type Tool
20. ปรบั ขนาด สี แบบอักษร และคลกิ บนพนื้ ท่วี า่ งเพ่ือพิมพข์ ้อความ
21. กดปมุ่ เพอ่ื ยนื ยันการใชข้ ้อความ
22. คดั ลอกเฟรมโดยคลิกทป่ี ุ่ม Duplicates selected frames
23. คลิกเลอื กเฟรมท่ี 2

24. ทีเ่ ฟรมที่ 2 ให้ซ่อนเลเยอรโ์ ดยการคลกิ ที่ ของเลเยอร์ข้อความ
25. ปรบั เวลาใหเ้ ปน็ 0.5 ทงั้ 2 เฟรม
26. ทดลองการเคลอื่ นไหวโดยคลิกทีป่ มุ่ Plays animation



แบบประเมินผลหลังเรยี นหน่วยท่ี 10

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

ก. การเคลือ่ นไหวดว้ ยภาพสองมิตแิ ละสามมิติ
ข. ลำดบั ของภาพนง่ิ ซึ่งถกู นำมาแสดงผลติดต่อกนั อย่างต่อเนื่อง
ค. ลำดบั ของตัวอักษรและภาพนิ่งซง่ึ ถกู นำมาแสดงผลติดต่อกนั อยา่ งต่อเนื่อง
ง. ถกู ทกุ ขอ้
2. ขอ้ ใดคือคำเตม็ ของตัวย่อ GIF
ก. Graphics Interchange Format
ข. Graphics International File
ค. Graphics Interest File
ง. Graphics Internet File
3. การเคลอื่ นไหวมกี ่รี ปู แบบ อะไรบา้ ง
ก. มี 1 รปู แบบ คอื การเคล่ือนไหวแบบ Frame by Frame
ข. มี 1 รูปแบบ คือ การเคลื่อนไหวแบบ Tween
ค. มี 2 รปู แบบ คือ การเคล่อื นไหวแบบ Frame by Frame และ Tween
ง. ไม่มีข้อใดถกู
4. ข้อใดคือความหมายของคำสั่ง Duplicates selected frames
ก. เลอื กเฟรมแรก
ข. เลอื กเฟรมถดั ไป
ค. คัดลอกเฟรมท่ีเลือก
ง. ลบเฟรมท่ีเลือก
5. ข้อใดเป็นขั้นตอนการ Save ไฟลภ์ าพ Animation เพ่อื ใชใ้ นเวบ็
ก. File / Save for Web & Devices... / Save
ข. File / Save for Web & Devices.../ เลอื กประเภทของไฟลเ์ ปน็ GIF I Save
ค. File/ Save for Web& Devices.../ เลือกประเภทไฟล์ GIF/Save/เลอื กตำแหนง่ และใสช่ ่อื
ไฟล์/Save
ง. ถูกทุกข้อ
ก. เป็นการสรา้ งภาพเคลื่อนไหวโดยให้โปรแกรมช่วยสรา้ งภาพจากเฟรมเรมิ่ ตน้