วันอังคารที่ 22 กุมภาพันธ์ พ.ศ. 2554
วันอาทิตย์ที่ 20 กุมภาพันธ์ พ.ศ. 2554
ไตเติ้ลรายการตลกหกฉาก
1. ชื่อเรื่อง ตลกหกฉาก
2.ข้อมูล เป็นรายการตลกคอมมาดี้
จุดแข็ง รายการได้เข้าร่วมรับรางวัลระดับโลก
จุดอ่อน ไม่คอยทำการประชาสัมพันธ์ และยังไม่เป็นที่รู้จัก
3.วัตถุประสงค์ เพื่อประชาสัมพันธ์ให้กลุ่มเป้าหมายทราบและเข้าชมรายการมากๆ
4.กลุ่มเป้าหมาย อายุ 15-50 ปี
5. Concept ตลก ฮา คอมมาดี้
6. M/T สดใส กวน กวน น่ารัก
วันจันทร์ที่ 7 กุมภาพันธ์ พ.ศ. 2554
เอ็ม อรรถพล_ตลกหกฉาก (5/9)
รายการ................. ตลกหกฉาก
แนว......................ตลก
Concept.............ฮา+มุข
M/T ................มัน/ตื่นเต้น
Laout...............หลายตัวรวมกัน
รูปภาพ............รูปภาพของตัวตลกแต่ละตัว
Color..............หลากสีสัน
Logo...............ช่อง 5 และ เลข 6
Banner วง slur
เน้น..................อักษร
วง....................slur
แนว.................อินดี้
Concept.........อาร์ต..อาร์ต
M/T.............น้ำเงิน+สีสัน
Laout...........หลายตัวรวมกัน
Logo............ โค๊ก กสิกรไท Rbac มิตซู ปตท โรงพยาบาลเวชธานี กระทิงแดง สสส.
เน้น...................รูปภาพ
เน้น................ตัวอักษร
วันอังคารที่ 1 กุมภาพันธ์ พ.ศ. 2554
วิธีทำ Banner
การทำแบนเนอร์โฆษณาเป็นเรื่องที่ไม่ได้ยากเหมือนที่หลายท่านคิดไว้ Macromedia Fireworks เป็นทางเลือกที่ช่วยให้งานแอนิเมชันเสร็จรวดเร็วโดยไม่กี่ขั้นตอน
Macromedia Fireworks เป็นหนึ่งในโปรแกรมกราฟิกชั้นนำที่ไว้สำหรับงานบนเว็บโดยเฉพาะ งานแอนิเมชันที่นิยมทำกันก็มีอยู่ 2 แบบ คือเป็น Gif Animation หรือ Shockwave Flash ซึ่งในบทความนี้เราเน้นเฉพาะการสร้างแบนเนอร์โฆษณาที่เป็น Gif Animation โดยเนื้อหาจะเริ่มต้นตั้งแต่การกำหนดขนาดมาตรฐานจน ถึงขั้นตอนสุดท้ายในการผลิตแบนเนอร์เพื่อนำไปใช้งานจริงบนเว็บไซต์
ขนาดและมาตรฐานของแบนเนอร์โฆษณา
สำหรับขนาดของแบนเนอร์ที่มีใช้กันมากในปัจจุบัน จะมีอยู่ทั้งหมด 3 แบบด้วยกันคือ
1. 468 x 60 (Standard Size)
2. 234 x 30 (Medium Size)
3. 88 x 31 (icon size)
แต่ถ้าไปเยี่ยมชมเว็บไซต์ ในเมืองไทย อาจเห็นขนาดของแบนเนอร์ที่มีความหลากหลาย ขึ้นกับรูปแบบของเว็บไซต์นั้นๆ ซึ่งอยากแนะนำว่าการทำแบนเนอร์โฆษณา ก็อย่าให้มีขนาดผิดแปลกจากมาตรฐานนักนะครับ เพราะจะยุ่งยากในการปรับเปลี่ยนเวลาที่ต้องแลกลิงก์กับคนอื่น และอีกจุดหนึ่งก็คือ ความละเอียดสำหรับการทำแบนเนอร์สำหรับงานบนเว็บทั่วไปจะอยู่ที่ 72 dpi ครับ
ความรู้เบื้องต้นในการใช้งานเฟรม
ก่อนเข้าถึงเนื้อหาอยากให้เพื่อนๆ ได้รู้จักกับเฟรม กันก่อน สำหรับการทำแอนิเมชัน ใน Fireworks เราจะใช้เฟรมเป็นเครื่องมือหลักในการพัฒนา โดยกดเลือกไปที่เมนู Window>Frame จะได้หน้าต่างดังรูป
ในที่นี้ได้แบ่งส่วนของหน้าต่างเฟรมเป็น 4 กลุ่ม
1. กดที่ปุ่มด้านบนขวาสุด เมื่อกดแล้วจะมีเมนูให้เลือกใช้ได้ 5 เมนูด้วยกัน ได้แก่
* Add Frame
* Duplicate Frame
* Delete Frame
* Copy to Frame
* Distribute to Frame
ใน 3 เมนูแรกเป็นการใช้งานปกติที่พบในโปรแกรมทั่วไปที่มีไว้จัดการแบบเดียวกับที่จัดการจัดการกับเลเยอร์ คือ การเพิ่ม ทำซ้ำ และลบเฟรม สำหรับ Copy to Frame เราจะใช้งานเมื่อเราต้องการเพิ่มออปเจ็กต์ใดๆ จากเฟรมหนึ่งๆ ไปไว้ในเฟรมที่เราต้องการ และท้ายสุด Distribute to Frame เป็นการนำออบเจ็กต์หลายชิ้นในเฟรมหนึ่ง ไปวางแยกไว้เป็นชิ้นในเฟรมอิสระของแต่ละออบเจ็กต์
2) แถบย่อยของหน้าต่างเฟรม จะมีการเรียงลำดับถ้าคุณดับเบิ้ลคลิกที่แถบย่อย คุณสามารถกำหนดค่า Delay ของแต่ละช่วงได้ว่าจะเป็นเท่าไร ถ้าคุณมีเฟรมอยู่หลายเฟรมที่ต้องการปรับค่าความ Delay พร้อมกันหลายๆ เฟรม คุณก็สามารถทำได้โดยทำ Multiple selection จากนั้นจึงดับเบิ้ลคลิกที่แถบที่ได้เลือกไว้ การกำหนดค่า Delay ก็จะครอบคลุมทุกๆ เฟรม ที่คุณได้เลือกไว้ เมื่อกำหนดค่าแล้วตัวเลขจะเขียนไว้ที่ข้างขวาของชื่อเฟรม ดังรูป
3) ปุ่มซ้ายสุดด้านล่าง เป็นปุ่มที่ช่วยให้เราทำงานแอนิเมชันได้ง่ายขึ้น โดย Fireworks สร้างเงาในแต่ละเฟรมเทียบกับเฟรมปัจจุบันที่เราอยู่ ถ้าเราเลือกเมนูย่อยอื่นที่ไม่ใช่ No Onion Skinning อีกปุ่มถัดมาเป็นการกำหนดจำนวนรอบของแอนิเมชันที่ต้องการให้มีการเล่นซ้ำ โดยคุณสามารถกำหนดจำนวนรอบได้ตามที่ต้องการ
4) ปุ่มทั้ง 3 ที่อยู่ด้านล่างขวา คือ การทำ Distribute to Frame Add new Frame และการ Delete Frame ซึ่งเป็นปุ่มที่มีอยู่ในเมนูส่วนที่ 1 เช่นกัน
ขั้นตอนการทำแบนเนอร์โฆษณา
ตัวอย่างวันนี้ เราจะมาลองทำแบนเนอร์ให้กับเว็บไซต์ AMAZON.COM กัน โดยขั้นตอนการทำแบนเนอร์มีดังนี้
โจทย์และข้อกำหนด
เริ่มแรกสุดเราต้องเข้าใจโจทย์ของเราก่อน จะได้ไม่ผิดพลาดในการดำเนินเรื่อง
1. ลดราคาหนังสือ The Brand New Kid 50% off จากราคาป้าย
2. ฟรีค่าบริการขนส่งสินค้า
3. ระยะเวลา 15 วัน ตั้งแต่วันที่ 1-15 พฤศจิกายน
วางโครงเรื่อง
เรื่องนี้สำคัญมาก คุณต้องแน่ใจว่าแอนิเมชันที่จะมาทำเป็นแบนเนอร์ไม่สั้นไม่ยาวเกิน เนื้อหาต้องกระชับ ไม่ควรใช้รูปภาพที่หลากหลายนัก เพราะจะมีผลกับขนาดไฟล์ ดังนั้นขอกำหนดโครงร่างดังนี้
Shot 1: Did you know your kid enough?
Shot 2: รูปหนังสือ
Shot 3: 50% off + free Shipping
Shot 4: Logo AMAZON.COM + รูป Shopping cart
เตรียมรูปภาพ
ในขั้นตอนต่อไป เราก็ต้องจัดหารูปภาพที่จะนำมาใช้งานกัน ในที่นี้ได้เตรียมรูปไว้แล้ว โดยมี Logo ของ AMAZON.COM รูปของหนังสือที่ทำการลดราคา และรูปของ Shopping cart ตามรูปข้างล่าง
ขั้นตอนการทำแบนเนอร์
1.เลือกไปที่ File>New กำหนดขนาดของพื้นที่โดยให้ Width 468 pixels และ Height 60 pixels ที่ความละเอียด 72 dpi
2.เริ่มต้นด้วยการพิมพ์ข้อความ "Did you know your kid enough?" เสร็จแล้วกด Insert> Convert to Symbol หรือ F8 เลือกกราฟิก เพื่อเปลี่ยนเท็กซ์ให้เป็นออบเจ็กต์
3.เลื่อนเท็กซ์ออบเจ็กต์ไปไว้ที่ตำแหน่งแรกที่ต้องการวางไว้ (ซ้ายสุด) จากนั้นกด Edit -> Duplicate หรือ CTRL+ALT+D เพื่อ Duplicate เท็กซ์ออบเจ็กต์ ให้เลื่อนไปที่ตำแหน่งกลางของพื้นที่แบนเนอร์ เพื่อเป็นปลายทางของข้อความ จากนั้นเลือกออบเจ็กต์ทั้ง 2 และทำ Tweening เท็กซ์ออบเจ็กต์ เพื่อให้ข้อความเคลื่อนจากซ้ายไปขวา โดยกด Modify >Symbol>Tween Instances
4) กดที่ไอคอนล่างขวาอันที่ 2 เพื่อสร้างเฟรม ขึ้นมาใหม่ (เฟรม 5) แล้วลากรูปหนังสือ ที่เตรียมไว้ ทำให้เป็น Symbol โดยกด F8 คราวนี้เราจะ Fade in และ Fade out รูปหนังสือนี้ ให้กดที่ Duplicate Frame ขึ้นมาอีก 2 เฟรม (เฟรม 6 และ เฟรม 7) ให้เลือกไปที่หน้าต่าง Object เพื่อปรับ Opacity ของหนังสือ และเลื่อนรูปหนังสือจากล่างขึ้นบน โดยกำหนดค่าดังนี้
* ที่เฟรม 4 ปรับค่า Opacity ที่หน้าต่าง Object เป็น 20
* ที่เฟรม 5 ปรับค่า Opacity ที่หน้าต่าง Object เป็น 60
* ที่เฟรม 6 ปรับค่า Opacity ที่หน้าต่าง Object เป็น 100
5) กดที่ไอคอนล่างขวาอันที่ 2 เพื่อสร้าง เฟรม ขึ้นมาใหม่ (เฟรม 8) และเขียนข้อความว่า 50% off + Free Shipping ในที่นี้ต้องการเพียงให้ข้อความสีส้มกระพริบสัก 1/2 วินาที ดังนั้นหลังจากที่เราเขียนข้อความนี้แล้วให้ดับเบิลคลิ้กไปที่เฟรม 8 ด้วยเพื่อกำหนดค่ากำหนดค่า Delay เป็น 50/100 วินาที
6. ขั้นตอนต่อไปเราจะทำแอนิเมชันของรถเข็น (Shopping Cart) และ Logo AMAZON.COM โดยที่เราจะ zoom in วัตถุให้ย่อรูปจากใหญ่ไปเล็ก โดยเริ่มจากกดที่ไอคอนล่างขวาอันที่ 2 เพื่อสร้าง เฟรมขึ้นมาใหม่ (เฟรม 9) แล้วลากรูปโลโก้ AMAZON.COM และรถเข็น ที่เตรียมไว้ ทำให้เป็น symbol โดยกด F8 คราวนี้เราจะทำการ Zoom in รูปหนังสือนี้ ให้กดที่ Duplicate เฟรม ขึ้นมาอีก 2 เฟรม (เฟรม 10 และ เฟรม 11) ให้เลือกไปที่ทูลเครื่องมือใน Fireworks เพื่อปรับขนาดของรูปจากใหญ่จนมีขนาดดังรูป สำหรับเฟรมที่ 9 10 และ 11 ตามลำดับ
7. ทดสอบดูแอนิเมชันที่ทำเสร็จ โดยกด ที่ด้านล่างขวาของ Status bar ที่มีกรอบสีดำครอบอยู่
8. ถัดมาคือการ Optimize โดยเลือกไปที่หน้าต่าง Optimize จากนั้นเลือก Optimize เป็น Gif Animation ดังรูป
และ ท้ายสุดคือการ Export ให้เลือกไปที่ File>Export จากนั้นเป็นอันเสร็จสมบูรณ์ในการทำแบนเนอร์โฆษณา
Macromedia Fireworks เป็นหนึ่งในโปรแกรมกราฟิกชั้นนำที่ไว้สำหรับงานบนเว็บโดยเฉพาะ งานแอนิเมชันที่นิยมทำกันก็มีอยู่ 2 แบบ คือเป็น Gif Animation หรือ Shockwave Flash ซึ่งในบทความนี้เราเน้นเฉพาะการสร้างแบนเนอร์โฆษณาที่เป็น Gif Animation โดยเนื้อหาจะเริ่มต้นตั้งแต่การกำหนดขนาดมาตรฐานจน ถึงขั้นตอนสุดท้ายในการผลิตแบนเนอร์เพื่อนำไปใช้งานจริงบนเว็บไซต์
ขนาดและมาตรฐานของแบนเนอร์โฆษณา
สำหรับขนาดของแบนเนอร์ที่มีใช้กันมากในปัจจุบัน จะมีอยู่ทั้งหมด 3 แบบด้วยกันคือ
1. 468 x 60 (Standard Size)
2. 234 x 30 (Medium Size)
3. 88 x 31 (icon size)
แต่ถ้าไปเยี่ยมชมเว็บไซต์ ในเมืองไทย อาจเห็นขนาดของแบนเนอร์ที่มีความหลากหลาย ขึ้นกับรูปแบบของเว็บไซต์นั้นๆ ซึ่งอยากแนะนำว่าการทำแบนเนอร์โฆษณา ก็อย่าให้มีขนาดผิดแปลกจากมาตรฐานนักนะครับ เพราะจะยุ่งยากในการปรับเปลี่ยนเวลาที่ต้องแลกลิงก์กับคนอื่น และอีกจุดหนึ่งก็คือ ความละเอียดสำหรับการทำแบนเนอร์สำหรับงานบนเว็บทั่วไปจะอยู่ที่ 72 dpi ครับ
ความรู้เบื้องต้นในการใช้งานเฟรม
ก่อนเข้าถึงเนื้อหาอยากให้เพื่อนๆ ได้รู้จักกับเฟรม กันก่อน สำหรับการทำแอนิเมชัน ใน Fireworks เราจะใช้เฟรมเป็นเครื่องมือหลักในการพัฒนา โดยกดเลือกไปที่เมนู Window>Frame จะได้หน้าต่างดังรูป
ในที่นี้ได้แบ่งส่วนของหน้าต่างเฟรมเป็น 4 กลุ่ม
1. กดที่ปุ่มด้านบนขวาสุด เมื่อกดแล้วจะมีเมนูให้เลือกใช้ได้ 5 เมนูด้วยกัน ได้แก่
* Add Frame
* Duplicate Frame
* Delete Frame
* Copy to Frame
* Distribute to Frame
ใน 3 เมนูแรกเป็นการใช้งานปกติที่พบในโปรแกรมทั่วไปที่มีไว้จัดการแบบเดียวกับที่จัดการจัดการกับเลเยอร์ คือ การเพิ่ม ทำซ้ำ และลบเฟรม สำหรับ Copy to Frame เราจะใช้งานเมื่อเราต้องการเพิ่มออปเจ็กต์ใดๆ จากเฟรมหนึ่งๆ ไปไว้ในเฟรมที่เราต้องการ และท้ายสุด Distribute to Frame เป็นการนำออบเจ็กต์หลายชิ้นในเฟรมหนึ่ง ไปวางแยกไว้เป็นชิ้นในเฟรมอิสระของแต่ละออบเจ็กต์
2) แถบย่อยของหน้าต่างเฟรม จะมีการเรียงลำดับถ้าคุณดับเบิ้ลคลิกที่แถบย่อย คุณสามารถกำหนดค่า Delay ของแต่ละช่วงได้ว่าจะเป็นเท่าไร ถ้าคุณมีเฟรมอยู่หลายเฟรมที่ต้องการปรับค่าความ Delay พร้อมกันหลายๆ เฟรม คุณก็สามารถทำได้โดยทำ Multiple selection จากนั้นจึงดับเบิ้ลคลิกที่แถบที่ได้เลือกไว้ การกำหนดค่า Delay ก็จะครอบคลุมทุกๆ เฟรม ที่คุณได้เลือกไว้ เมื่อกำหนดค่าแล้วตัวเลขจะเขียนไว้ที่ข้างขวาของชื่อเฟรม ดังรูป
3) ปุ่มซ้ายสุดด้านล่าง เป็นปุ่มที่ช่วยให้เราทำงานแอนิเมชันได้ง่ายขึ้น โดย Fireworks สร้างเงาในแต่ละเฟรมเทียบกับเฟรมปัจจุบันที่เราอยู่ ถ้าเราเลือกเมนูย่อยอื่นที่ไม่ใช่ No Onion Skinning อีกปุ่มถัดมาเป็นการกำหนดจำนวนรอบของแอนิเมชันที่ต้องการให้มีการเล่นซ้ำ โดยคุณสามารถกำหนดจำนวนรอบได้ตามที่ต้องการ
4) ปุ่มทั้ง 3 ที่อยู่ด้านล่างขวา คือ การทำ Distribute to Frame Add new Frame และการ Delete Frame ซึ่งเป็นปุ่มที่มีอยู่ในเมนูส่วนที่ 1 เช่นกัน
ขั้นตอนการทำแบนเนอร์โฆษณา
ตัวอย่างวันนี้ เราจะมาลองทำแบนเนอร์ให้กับเว็บไซต์ AMAZON.COM กัน โดยขั้นตอนการทำแบนเนอร์มีดังนี้
โจทย์และข้อกำหนด
เริ่มแรกสุดเราต้องเข้าใจโจทย์ของเราก่อน จะได้ไม่ผิดพลาดในการดำเนินเรื่อง
1. ลดราคาหนังสือ The Brand New Kid 50% off จากราคาป้าย
2. ฟรีค่าบริการขนส่งสินค้า
3. ระยะเวลา 15 วัน ตั้งแต่วันที่ 1-15 พฤศจิกายน
วางโครงเรื่อง
เรื่องนี้สำคัญมาก คุณต้องแน่ใจว่าแอนิเมชันที่จะมาทำเป็นแบนเนอร์ไม่สั้นไม่ยาวเกิน เนื้อหาต้องกระชับ ไม่ควรใช้รูปภาพที่หลากหลายนัก เพราะจะมีผลกับขนาดไฟล์ ดังนั้นขอกำหนดโครงร่างดังนี้
Shot 1: Did you know your kid enough?
Shot 2: รูปหนังสือ
Shot 3: 50% off + free Shipping
Shot 4: Logo AMAZON.COM + รูป Shopping cart
เตรียมรูปภาพ
ในขั้นตอนต่อไป เราก็ต้องจัดหารูปภาพที่จะนำมาใช้งานกัน ในที่นี้ได้เตรียมรูปไว้แล้ว โดยมี Logo ของ AMAZON.COM รูปของหนังสือที่ทำการลดราคา และรูปของ Shopping cart ตามรูปข้างล่าง
ขั้นตอนการทำแบนเนอร์
1.เลือกไปที่ File>New กำหนดขนาดของพื้นที่โดยให้ Width 468 pixels และ Height 60 pixels ที่ความละเอียด 72 dpi
2.เริ่มต้นด้วยการพิมพ์ข้อความ "Did you know your kid enough?" เสร็จแล้วกด Insert> Convert to Symbol หรือ F8 เลือกกราฟิก เพื่อเปลี่ยนเท็กซ์ให้เป็นออบเจ็กต์
3.เลื่อนเท็กซ์ออบเจ็กต์ไปไว้ที่ตำแหน่งแรกที่ต้องการวางไว้ (ซ้ายสุด) จากนั้นกด Edit -> Duplicate หรือ CTRL+ALT+D เพื่อ Duplicate เท็กซ์ออบเจ็กต์ ให้เลื่อนไปที่ตำแหน่งกลางของพื้นที่แบนเนอร์ เพื่อเป็นปลายทางของข้อความ จากนั้นเลือกออบเจ็กต์ทั้ง 2 และทำ Tweening เท็กซ์ออบเจ็กต์ เพื่อให้ข้อความเคลื่อนจากซ้ายไปขวา โดยกด Modify >Symbol>Tween Instances
4) กดที่ไอคอนล่างขวาอันที่ 2 เพื่อสร้างเฟรม ขึ้นมาใหม่ (เฟรม 5) แล้วลากรูปหนังสือ ที่เตรียมไว้ ทำให้เป็น Symbol โดยกด F8 คราวนี้เราจะ Fade in และ Fade out รูปหนังสือนี้ ให้กดที่ Duplicate Frame ขึ้นมาอีก 2 เฟรม (เฟรม 6 และ เฟรม 7) ให้เลือกไปที่หน้าต่าง Object เพื่อปรับ Opacity ของหนังสือ และเลื่อนรูปหนังสือจากล่างขึ้นบน โดยกำหนดค่าดังนี้
* ที่เฟรม 4 ปรับค่า Opacity ที่หน้าต่าง Object เป็น 20
* ที่เฟรม 5 ปรับค่า Opacity ที่หน้าต่าง Object เป็น 60
* ที่เฟรม 6 ปรับค่า Opacity ที่หน้าต่าง Object เป็น 100
5) กดที่ไอคอนล่างขวาอันที่ 2 เพื่อสร้าง เฟรม ขึ้นมาใหม่ (เฟรม 8) และเขียนข้อความว่า 50% off + Free Shipping ในที่นี้ต้องการเพียงให้ข้อความสีส้มกระพริบสัก 1/2 วินาที ดังนั้นหลังจากที่เราเขียนข้อความนี้แล้วให้ดับเบิลคลิ้กไปที่เฟรม 8 ด้วยเพื่อกำหนดค่ากำหนดค่า Delay เป็น 50/100 วินาที
6. ขั้นตอนต่อไปเราจะทำแอนิเมชันของรถเข็น (Shopping Cart) และ Logo AMAZON.COM โดยที่เราจะ zoom in วัตถุให้ย่อรูปจากใหญ่ไปเล็ก โดยเริ่มจากกดที่ไอคอนล่างขวาอันที่ 2 เพื่อสร้าง เฟรมขึ้นมาใหม่ (เฟรม 9) แล้วลากรูปโลโก้ AMAZON.COM และรถเข็น ที่เตรียมไว้ ทำให้เป็น symbol โดยกด F8 คราวนี้เราจะทำการ Zoom in รูปหนังสือนี้ ให้กดที่ Duplicate เฟรม ขึ้นมาอีก 2 เฟรม (เฟรม 10 และ เฟรม 11) ให้เลือกไปที่ทูลเครื่องมือใน Fireworks เพื่อปรับขนาดของรูปจากใหญ่จนมีขนาดดังรูป สำหรับเฟรมที่ 9 10 และ 11 ตามลำดับ
7. ทดสอบดูแอนิเมชันที่ทำเสร็จ โดยกด ที่ด้านล่างขวาของ Status bar ที่มีกรอบสีดำครอบอยู่
8. ถัดมาคือการ Optimize โดยเลือกไปที่หน้าต่าง Optimize จากนั้นเลือก Optimize เป็น Gif Animation ดังรูป
และ ท้ายสุดคือการ Export ให้เลือกไปที่ File>Export จากนั้นเป็นอันเสร็จสมบูรณ์ในการทำแบนเนอร์โฆษณา
สมัครสมาชิก:
บทความ (Atom)