ใบความรท 4.2 การทำาภาพ loading แบบ facebookเวบไซตทวไปมกนยมใชภาพเคลอนไหวเพอทำาใหเวบเพจนนมความนา
สนใจมากกวาใชภาพนง โดยหลายเวบไซตกใชภาพเคลอนไหวในการสอสารใหผใชเวบเพจทราบวาเวบเพจกำาลงทำางานอย โดยใชภาพทรจกกนทวไปวา loading animation
ในใบความรนผเรยนจะไดเรยนรการทำาภาพเคลอนไหวภาพเคลอนไหวแบบ gif (นามสกล .gif) ดวยโปรแกรม photoshop เพอสราง loading animation เชนเดยวกนแบบท facebook ใชในการสอสารวากำาลงโหลดขอมล
ผลลพธทตองการ ภาพเคลอนไหวแสดงสถานะการกำาลงทำางาน แบบ
หลกการสรางภาพนงหลายๆ ส เพอทำาใหภาพเคลอนไหวตอเนอง ซง
ความยากอยทการเตรยมภาพทมรปทรงเดมๆ แตใหมสทแตกตางกนใหไดมากทสด
วธการ 1. เปดโปรแกรม Photoshop CS3 จากนนไปทเมน File New..2. กำาหนดคณสมบตของไฟล
2.1 ตงชอ กำาหนดขนาด ของภาพใหเหมาะกบเวบเพจทจะนำาไปใช หากไมแนใจใหกำาหนดใหใหญกวาขนาดทตองการไวกอน
2.2 กำาหนดพนหลงเปน Transparent(วางเปลา) เพอทภาพเคลอนไหวใชพนหลงของเวบเพจ
2.3 กด OK
3. จะไดพนทตาราง ดงรป
4. เลอกเครองมอ Rectangular Marquee Tool จากนนคลกลากใหเปนรปเสนประสเหลยมดงรป
5. คลกเลอกเครองมอ เพอเลอกสของแทงสเหลยม จะไดหนาตางขนมาดงรป
6. เมอเลอกสทตองการเสรจแลว ใหกด OK
7. เลอกเครองมอ Paint Bucket Tool เมอคลกเลอกแลวใหนำาไปคลกเทสลงในพนทเสนประทวาดไวกอนหนาน
8. เลอกเครองมอ Rectangular Marquee Tool แลวคลกขวาเลอก Deselect เพอเอาเสนประทอยรอบๆแทงสเหลยมออก
9. ดบเบลคลกตรงชอเลเยอรทชอวา Layer1 จากนนเปลยนชอเปน T1 แลวกดปม Enter
10. เปลยนคา Fill เปน 50%
11. คลกเลเยอรชอ T1 คางไวแลวลากมาทเครองมอ create a new layer
12. จะไดเลเยอรเพมมาใหมอกหนงเลเยอร
13. เปลยนคา Fill ของเลเยอร T1 copy เปน 100%
14. คลกลากเลเยอรชอวา T1 copy ลงมา เพอ copy เลเยอร ท 3 จะไดดงรป
15. เลอกเครองมอ Move Tool จากนนดบเบลคลกชอเลเยอรทชอวา T1 copy 2 เพอเปลยนชอเปน T2
16. คลกลากแทงสเปลยมออกมาวางขางๆ จะไดแทงสเหลยม 2 แทง
17. กด Ctrl + T เพอปรบเปลยนขนาดแทงสเหลยมอนท 2 และเมอปรบขนาดเสรจแลวใหกดปม Enter
18. เปลยนคา Fill เปน 50%
19. คลกลากเลเยอร T2 ลงมา เพอทำาการ copy เลเยอร จะไดดงรป
20. เปลยนคา Fill เปน 100%
21. คลกลากเลเยอร T2 copy ลงมา เพอ copy เลเยอร
22. ดบเบลคลกเลเยอร T2 copy 2 แลวเปลยนชอเปน T3
23. คลกลากแทงสเหลยมอนกลางมาวางไวขางๆ ดงรป
24. กด Ctrl + T เพอปรบขนาดแทงสเหลยม จากนนกดปม Enter
25. เปลยนคา Fill เปน 50%
26. คลกลากเลเยอร T3 ลงมา เพอ copy เลเยอร
27. เปลยนคา Fill เปน 100%
เราจะไดแทงสเหลยมพนผาจำานวน 3 แทง ทมขนาดแตกตางกน แตละแทงจะม 2 ส จงทำาใหเกด layer จำานวน 6 layer
28. ขนตอไปเราจะมาทำาภาพเคลอนไหวกน โดยจะใชเครองมอ Animation ซงสามารถเรยกใชงานได ดงน
เลอกเมน Window Animation จะไดเครองมอ Animation panel นออกมาใชงาน
29. เลอกเฟรมท 1 แลวคลกเลอก layer T1 เทานน ดงภาพ
30. สรางเฟรมท 2 โดยทำาตามขนตอน ดงรป
31. เลอกเฟรมท 2 แลวคลกเลอก layer T1 copy จะไดผลลพธดงรป
32. เพมเฟรมท 3 แลวคลกเครองหมายรปตาเลเยอรเฉพาะ T1 และ T2
1. กดปมตรง
2.จะไดเฟรมเพมมาอก
33. เพมเฟรมท 4 แลวตกเครองหมายรปตาทเลเยอร T1 T2 และ T2 copy
34. เพมเฟรมท 5 แลวตกเครองหมายรปตาทเลเยอร T1 T2 T2copy และ T3
35. เพมเฟรมท 6 แลวตกเครองหมายรปตาทเลเยอร T1 T2 T3 และ T3copy (เอา T2 copy ออก เลอก T3 copy เขามาแทน)
36. คลกเฟรมท 1 หนงครงแลวกดปม Shift คางไว จากนนไปคลกทเฟรมท 5 จะไดผลลพธ ดงรป
37. คลกเลอกเวลาในการเคลอนไหวท 0.2
38. คลกเฟรมท 6 แลวเลอกคลกปม Tween ดงรป
39. ตงคาตามรป จากนนกด OK
40. จะไดผลลพธดงรป คอ frame ทยอนกลบจาก 6 ไปหา 1
41. เลอกเมน File Save for Web & Devices…
42. เลอก Save
43. เลอกทเกบรปภาพ ตงชอ และเลอกไฟลเปนนามสกล gif เทานน จากนนกด Save เปนอนเสรจสนขนตอนทงหมด
Recommended
