มาทำ micro banner แบบเคลื่อนไหวกัน
วิธีทำ micro banner สำหรับใช้ในการแลกลิ้งค์กันระหว่างเว็บ ซึ่ง ใช้โปรแกรมไกล้ตัวที่มีกันอยู่แล้วนั่นเอง
บทความนี้ก็หลายคนถามไถ่กันมา ว่าจะทำ gif animator นั้นทำยังไง ใช้โปรแกรมอะไร ผมก็ตอบกันไปเรื่อยๆครับว่ามันคือโปรแกรม Adobe Imageready ครับ ซึ่ง ท่านใดที่มี photoshop ในเครื่องก็จะมีเจ้าตัวนี้อยู่ด้วยครับ แต่หลายคนไม่รู้แล้วไปสรรหาโปรแกรมต่างๆนานา มาใช้กัน แต่ผมนี่แบบว่าพื้นบ้านครับ พื้นบ้าน
เราก็มาเริ่มต้นกันที่นี่เลยครับ เปิดโปรแกรมก่อน ซึ่งปรกติมันจะอยู่กับ photoshop ครับ
ของผมเวอร์ชั่นใหม่หน่อย ใครเก่ากว่านี้ก็ไม่เป็นไรครับใช้งานได้เหมือนกัน แล้วบางคนเปิดมาเนี่ย พบว่าหน้าต่างทำ animation มันหายไป วิธีเรียกมันออกมาต้องนี่เลยครับ
ต่อมาเราก็มาเริ่มสร้างกันจริงๆจังๆซะที
เลือกแบบmicro banner หรือแบบใหนก็ได้ตามแต่ใจท่านน่ะครับ แบนเนอร์มาตรฐาน ท่านสามารถหาดูได้จากบทความเก่าๆของเรานะครับว่ามีขนาดใหนบ้าง วันนี้ผมจะทำขนาดนี้ครับ
88*31 |
ที่เราจะใช้กันมี2หน้าต่างนี้ครับ 1คือหน้าต่างเพื่อดู frame ของ animator (อันบน) และสอง คืออันล่างเป็น work spaceของเราครับ
เราก็เริ่มด้วยการพิมพ์ตัวหนังสือใส่อันล่างของเราครับ(อันบนมีเพื่อดูตำแหน่งเท่านั้น)
แล้วทีนี้เราต้องการให้มันขยับจากซ้ายบนไปขวาล่างทำอย่างไรดี.... มาดูกัน เริ่มด้วยการสร้างframe ขึ้นมาอีก frame นึงครับ ด้วยการคลิกที่ปุ่มด้านขวาของปุ่ม tween (ด้านขวาของปุ่มที่ชี้ในรูปล่าง)
และทำการเลือก frame ที่สอง แล้วเลื่อนตัวหนังสือ(เลื่อนที่หน้าต่างล่าง) จะทำให้ frame ที่สองตัวหนังสือย้ายตำแหน่งแล้วครับ(ขออภัย shot นี้ไม่มีรูป หึๆๆ)
ต่อมา ถ้ามันกระโดดไปมาๆ มันก็ไม่สวย เราจะมาทำให้มันค่อยเลื่อนด้วย tween ครับ คลิก ดังรูปบน
แล้วให้เราใส่จำนวน frame ที่เราต้องการให้มันค่อยๆเลื่อน ยิ่งเราใส่เยอะยิ่งเนียน แต่ก็จะทำให้ไฟล์ใหญ่ขึ้นเป็นเงาตามตัวด้วยครับ ซึ่งเราใส่เป็น 5 ก็จะได้ผลดังนี้
เอาล่ะ เราก็มาลองของกัน
พอใจหรือยังครับ ถ้ายังไม่พอ อยากจะสร้างการเคลื่อนใหวของวัตถุชิ้นถัดไป ให้เราสร้าง Layer ก่อนครับ
ซึ่ง Layer เนี่ยอธิบายให้เห็นภาพมันคือแผ่นใสครับ เรามีแผ่นใสสองแผ่นซ้อนกัน ซึ่งอันนึงมี 4 เหลี่ยม อีกอันมีวงกลม เรามาซ้อนเราก็จะได้ 4เหลี่ยมและวงกลมในแผ่นเดียวกัน พอจะเข้าใจใหมครับ
เมื่อเราสร้างแล้วเราก็ใส่วัตถุอีกชิ้นลงไปเลยครับ มันจะซ้อนกันดังรูป ไม่ต้องหลัว เรื่องนี้ไม่ยาก
ให้เราเลือก frame ที่เราต้องการแก้ไขครับ แล้วไปจิ้มที่ลูกตา ในส่วนของ layer ถ้าไม่มีลูกตา เราก็จะมองไม่เห็น Layer นั้นๆครับ
ต้องลองเองนะครับจึงจะเข้าใจและเห็นภาพครับ ต่อมาถ้าเรารู้สึกว่าเร็วไปก็ปรับเวลาด้วยการ
เอาล่ะครับ เมื่อปรับแต่งกันมันส์มือดีแล้ว เราก็จะมา เซฟออกมาดูกัน ขั้นตอนนี้หลายคนจะผิดเพราะไปเลือก save แต่ความจริงต้อง save optimized as นะครับ save เฉยๆมันจะกลายเป็นไฟล์ที่เปิดกับโปรแกรม(เพื่อแก้ไข)ครับ
ตั้งชื่อมันซะหน่อย
แล้วกดเซฟเป็นอันเรียบร้อย สำหรับคนทำครั้งแรกให้ค่อยๆทำแล้วเซฟออกมาดูนะครับ อย่าพึ่งบรรเลงไอเดียออกมาหมดสมอง ไม่งั้นเดี๋ยวมันผิดพลาดแล้วจะมึนแตกครับ
ส่วนเรื่องการออกแบบอันนี้มันขึ้นกับเทคนิคส่วนบุคคลแล้วล่ะครับ ว่าใครจะคิดออกแบบออกมาเป็นยังไง แต่อย่าลืมนะครับ ทำไปทำมา นี่ล่อไปครึ่งเม็ก มันก็ไม่ใหวนะครับมันจะอลังการเกิน ยังนั้นคงต้องหันไปใช้ flash แทนน่ะครับ อ้อไม่ต้องถามผมเรื่อง Flash เพราะผมไม่เป็น 55555
แล้วการคำนวนเวลาการโหลดนะครับ คือว่าคนที่ใช้เน็ตแบบ dail up (ที่ต่อแล้วมีเสียง ตู๊ ตี่ ตู๊ ตี่ นั่นอ่ะ) จะโหลดเว็บด้วยความเร็วประมาณ 5Kb ต่อวินาทีครับ แล้วถ้าท่านทำใหญ่ซะ 500Kb ก็คิดเองแล้วกันนะครับ อ้อ แล้วอย่าลืมว่าทั้งหน้าเว็บไม่ได้มีรูปเดียว อืม..... นั่นล่ะ ตายพอดี
ถ้ามีคำถามข้อสงสัย ไปถามไถ่กันได้ในกระดานข่าวเลยนะครับ พร้อมที่จะตอบทุกข้อสงสัยที่ค้างคาครับ " สังคมออนไลน์ไปกับ MeeWebFree"
Keyword : micro banner,banner, link exchange, gif,gif animation
