ใบความรท 4.2 การทำาภาพ loading แบบ facebook

เวบไซตทวไปมกนยมใชภาพเคลอนไหวเพอทำาใหเวบเพจนนมความนาสนใจมากกวาใชภาพนง โดยหลายเวบไซตกใชภาพเคลอนไหวในการสอสารใหผใชเวบเพจทราบวาเวบเพจกำาลงทำางานอย โดยใชภาพทรจกกนทวไปวา loading animation

ในใบความรนผเรยนจะไดเรยนรการทำาภาพเคลอนไหวภาพเคลอนไหวแบบ gif (นามสกล .gif) ดวยโปรแกรม photoshop เพอสราง loading animation เชนเดยวกนแบบท facebook ใชในการสอสารวากำาลงโหลดขอมล

ผลลพธทตองการ ภาพเคลอนไหวแสดงสถานะการกำาลงทำางาน แบบ 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 เปนอนเสรจสนขนตอนทงหมด