webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม...
Transcript of webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม...
![Page 1: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/1.jpg)
ใบความรท 4.2 การทำาภาพ loading แบบ facebookเวบไซตทวไปมกนยมใชภาพเคลอนไหวเพอทำาใหเวบเพจนนมความนา
สนใจมากกวาใชภาพนง โดยหลายเวบไซตกใชภาพเคลอนไหวในการสอสารใหผใชเวบเพจทราบวาเวบเพจกำาลงทำางานอย โดยใชภาพทรจกกนทวไปวา loading animation
ในใบความรนผเรยนจะไดเรยนรการทำาภาพเคลอนไหวภาพเคลอนไหวแบบ gif (นามสกล .gif) ดวยโปรแกรม photoshop เพอสราง loading animation เชนเดยวกนแบบท facebook ใชในการสอสารวากำาลงโหลดขอมล
ผลลพธทตองการ ภาพเคลอนไหวแสดงสถานะการกำาลงทำางาน แบบ
หลกการสรางภาพนงหลายๆ ส เพอทำาใหภาพเคลอนไหวตอเนอง ซง
ความยากอยทการเตรยมภาพทมรปทรงเดมๆ แตใหมสทแตกตางกนใหไดมากทสด
วธการ 1. เปดโปรแกรม Photoshop CS3 จากนนไปทเมน File New..2. กำาหนดคณสมบตของไฟล
2.1 ตงชอ กำาหนดขนาด ของภาพใหเหมาะกบเวบเพจทจะนำาไปใช หากไมแนใจใหกำาหนดใหใหญกวาขนาดทตองการไวกอน
![Page 2: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/2.jpg)
2.2 กำาหนดพนหลงเปน Transparent(วางเปลา) เพอทภาพเคลอนไหวใชพนหลงของเวบเพจ
2.3 กด OK
3. จะไดพนทตาราง ดงรป
4. เลอกเครองมอ Rectangular Marquee Tool จากนนคลกลากใหเปนรปเสนประสเหลยมดงรป
![Page 3: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/3.jpg)
5. คลกเลอกเครองมอ เพอเลอกสของแทงสเหลยม จะไดหนาตางขนมาดงรป
6. เมอเลอกสทตองการเสรจแลว ใหกด OK
7. เลอกเครองมอ Paint Bucket Tool เมอคลกเลอกแลวใหนำาไปคลกเทสลงในพนทเสนประทวาดไวกอนหนาน
![Page 4: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/4.jpg)
8. เลอกเครองมอ Rectangular Marquee Tool แลวคลกขวาเลอก Deselect เพอเอาเสนประทอยรอบๆแทงสเหลยมออก
9. ดบเบลคลกตรงชอเลเยอรทชอวา Layer1 จากนนเปลยนชอเปน T1 แลวกดปม Enter
10. เปลยนคา Fill เปน 50%
11. คลกเลเยอรชอ T1 คางไวแลวลากมาทเครองมอ create a new layer
12. จะไดเลเยอรเพมมาใหมอกหนงเลเยอร
13. เปลยนคา Fill ของเลเยอร T1 copy เปน 100%
![Page 5: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/5.jpg)
14. คลกลากเลเยอรชอวา T1 copy ลงมา เพอ copy เลเยอร ท 3 จะไดดงรป
15. เลอกเครองมอ Move Tool จากนนดบเบลคลกชอเลเยอรทชอวา T1 copy 2 เพอเปลยนชอเปน T2
16. คลกลากแทงสเปลยมออกมาวางขางๆ จะไดแทงสเหลยม 2 แทง
![Page 6: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/6.jpg)
17. กด Ctrl + T เพอปรบเปลยนขนาดแทงสเหลยมอนท 2 และเมอปรบขนาดเสรจแลวใหกดปม Enter
18. เปลยนคา Fill เปน 50%
19. คลกลากเลเยอร T2 ลงมา เพอทำาการ copy เลเยอร จะไดดงรป
![Page 7: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/7.jpg)
20. เปลยนคา Fill เปน 100%
21. คลกลากเลเยอร T2 copy ลงมา เพอ copy เลเยอร
![Page 8: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/8.jpg)
22. ดบเบลคลกเลเยอร T2 copy 2 แลวเปลยนชอเปน T3
23. คลกลากแทงสเหลยมอนกลางมาวางไวขางๆ ดงรป
![Page 9: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/9.jpg)
24. กด Ctrl + T เพอปรบขนาดแทงสเหลยม จากนนกดปม Enter
25. เปลยนคา Fill เปน 50%
26. คลกลากเลเยอร T3 ลงมา เพอ copy เลเยอร
![Page 10: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/10.jpg)
27. เปลยนคา Fill เปน 100%
เราจะไดแทงสเหลยมพนผาจำานวน 3 แทง ทมขนาดแตกตางกน แตละแทงจะม 2 ส จงทำาใหเกด layer จำานวน 6 layer
28. ขนตอไปเราจะมาทำาภาพเคลอนไหวกน โดยจะใชเครองมอ Animation ซงสามารถเรยกใชงานได ดงน
เลอกเมน Window Animation จะไดเครองมอ Animation panel นออกมาใชงาน
29. เลอกเฟรมท 1 แลวคลกเลอก layer T1 เทานน ดงภาพ
![Page 11: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/11.jpg)
30. สรางเฟรมท 2 โดยทำาตามขนตอน ดงรป
31. เลอกเฟรมท 2 แลวคลกเลอก layer T1 copy จะไดผลลพธดงรป
32. เพมเฟรมท 3 แลวคลกเครองหมายรปตาเลเยอรเฉพาะ T1 และ T2
1. กดปมตรง
2.จะไดเฟรมเพมมาอก
![Page 12: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/12.jpg)
33. เพมเฟรมท 4 แลวตกเครองหมายรปตาทเลเยอร T1 T2 และ T2 copy
34. เพมเฟรมท 5 แลวตกเครองหมายรปตาทเลเยอร T1 T2 T2copy และ T3
![Page 13: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/13.jpg)
35. เพมเฟรมท 6 แลวตกเครองหมายรปตาทเลเยอร T1 T2 T3 และ T3copy (เอา T2 copy ออก เลอก T3 copy เขามาแทน)
36. คลกเฟรมท 1 หนงครงแลวกดปม Shift คางไว จากนนไปคลกทเฟรมท 5 จะไดผลลพธ ดงรป
![Page 14: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/14.jpg)
37. คลกเลอกเวลาในการเคลอนไหวท 0.2
38. คลกเฟรมท 6 แลวเลอกคลกปม Tween ดงรป
39. ตงคาตามรป จากนนกด OK
![Page 15: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/15.jpg)
40. จะไดผลลพธดงรป คอ frame ทยอนกลบจาก 6 ไปหา 1
![Page 16: webkruboy.files.wordpress.com€¦ · Web view2015. 1. 14. · เปิดโปรแกรม Photoshop CS3 จากนั้นไปที่เมนู File New.. ... เลือกเครื่องมือ](https://reader035.fdocument.pub/reader035/viewer/2022071118/600e9565aeca8b777e240bd0/html5/thumbnails/16.jpg)
41. เลอกเมน File Save for Web & Devices…
42. เลอก Save
43. เลอกทเกบรปภาพ ตงชอ และเลอกไฟลเปนนามสกล gif เทานน จากนนกด Save เปนอนเสรจสนขนตอนทงหมด