วันพุธที่ 31 กรกฎาคม พ.ศ. 2556

วิธีทำภาพเคลื่อนไหว ติดในบล็อก/ Animation Landing Page Blogger move

วิธีทำภาพเคลื่อนไหว ติดในบล็อก/ Animation Landing Page Blogger move

Photobucket


เราเคยเข้าไปในเว็บเห็นรูปกระพริบไปกระพริบมา ชาวเราขาบล็อกก็อยากจะทำสร้างสีสันให้บล็อกเรากันซักหน่อย ถึงเป็นน้องน้อย บล็อก Blog ก็ไม่ยอมน้อยหน้า นะจะบอกให้ และที่สำคัญมันสามารถจะเพิ่ม ลิงก์ที่เราต้องต้องจะส่งไปได้ด้วย ซึ่งสามารถเอามาทำเป็นโฆษณาโปรโมทเพื่อการบริการลูกค้าได้แน่นอน 
ขั้นแรก

1.เตรียมภาพที่เราต้องการจะนำมาออกแบบภาพเคลื่อนไหว


2.เปิดใช้โปรแกรม Photoshop > File > New > ตั้งขนาด 300 X 300 pixels > OK




3.เลือก File Place  ปรับขนาดภาพให้เท่ากับขนาดที่เตรียมไว้ ภาพที่ 1
เลือก File Place  ปรับขนาดภาพให้เท่ากับขนาดที่เตรียมไว้ ภาพที่ 2
เลือก File Place  ปรับขนาดภาพให้เท่ากับขนาดที่เตรียมไว้ ภาพที่ 3


4.คลิกที่ Create a New Layer อยู่มุมซ้ายด้านล่างเพื่อสร้าง Layer รอใส่ข้อมูล



5.คลิกเลือก Horizontal Type Tool (T) เพื่อสร้างตัวอักษร


6.เอาเคอเซอร์ไปไว้ตรงพื้นที่ที่ต้องการใส่ตัวอักษรและพิมพ์ เราสามารถปรับลักษณะตัวอักษร สี ขนาด ได้
( ยิ่ง Layer มาก ก็สามารถปรับแต่งให้เคลื่อนไหวได้มาก)



7.เมื่อได้ข้อมูลพร้อมแล้ว ให้เราคลิกที่ Window> เลือก Animation ระบบจะสร้าง Animation Frame ไว้ให้เราปรับแต่งภาพเคลื่อนไหว


8.คลิก duplicate selected frames เพื่อสร้าง Frame สำหรับทำภาพเครื่อนไหว



9.ปรับแต่งการแสดงผลของภาพแต่ละภาพ


10.เลือกแสดงผลโดยคลิกที่เครื่องหมายรูปตาของเฟรมแต่ละเฟรม


11.เมื่อปรับแต่งเสร็จเรียบร้อยให้คลิกที่ File > Save for Web & Devices


12.เลือก Save เป็นไฟล์ GIF


13.Save as type เป็น HTML and Images



14.จากนั้นเข้าไปที่เว็บฝากไฟล์ฟรี Photopbucket.com ซึ่งเราสามารถ Log In โดยใช้ Facebook cและ Twitter ด้วย 15คลิก Upload Picture เลือกไฟล์ภาพ Html ที่เราทำไว้ คลิก Open จากนั้นคลิก Save and continue to my album


16.คลิก คัดลอก HTML Code


17.รูปแบบ Code Html จะเป็นแบบนี้ค่ะ ให้เราเปลี่ยน Html เป็นหน้าที่เราต้องการจะส่งไป


18.จากนั้นเข้าไปที่ บัญชี Blogger ที่เราต้องการจะวาง คลิก Design



19.คลิก Add a Gadget > HTML/JavaScript > ใส่ Code ในหน้าต่าง Configure HTML/JavaScript



20.คลิก SAVE > คลิก Save ที่หน้า Design > View Blog สำเร็จแล้ว เข้าไปดูของจริงได้ที่นี่ค่ะ http://umstyle.blogspot.com/



ไม่มีความคิดเห็น:

แสดงความคิดเห็น