Banner

Banner คืออะไร

ขึ้นกับการใช้สิ่งนี้ banner เป็นทั้งภาพกราฟฟิกที่ประกาศชื่อหรือเอกลักษณ์ของไซต์ (และมักจะวางตามด้านกว่างของเว็บ) หรือ เป็นภาพโฆษณา บางครั้ง ผู้โฆษณานับ banner ตามการ “ดู” หรือจำนวนครั้งของภาพกราฟฟิกได้รับการดาวน์โหลดตามช่วงเวลา

Banner (แบนเนอร์) สามารถหมายถึง

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

ตัวอย่าง ป้าย "Banner" สวยๆ

  

  

  

ขนาดของ Banner ทั่วๆไป - จริงๆแล้วก็ไม่ได้มีการกำหนดค่าแบบตายตัวเท่าไหร่
น่าจะขึ้นอยู่กับคนทำว่าต้องการใช้รูปขนาดไหน
แต่ขนาดทั่วๆไปที่พบเห็นขนาดเล็กๆจะมี 50x50 88x31 100x35 ไปเรื่อยๆ

สำหรับครั้งนี้จะมาสอนการทำขนาด 100x50 นะ ^^)
วิธีทำแบบแบนเนอร์นี้สามารถนำไปปรับใช้กับการทำขนาดอื่นๆได้

ขั้นที่หนึ่งเปิด โปรแกรม  Adobe Photoshop ขึ้นมา

สั่ง File > New จากนั้นก็ตั้งค่าตามรูปด้านล่างนี้

1. Width : ตรงหน้าเป็นขนาดความกว้างของรูปที่เราต้องการ ซึ่งเรากำหนดให้กว้าง 100
ด้านหลังอย่าลืมเลือกเป็น pixels ด้วยนะ เพื่อที่ขนาดรูปของเราจะได้ออกมาตรงกัน2. Height : กำหนดความสูง ของเรากำหนดให้อยู่ที่ 50 นะ (ในรูปพิมพ์พลาดเล็กน้อย)
3. Resolution : กำหนดไว้ที่ 300 เพราะรูปจะได้ยังเห็นชัดแม้เป็นภาพเล็ก4. Color Mode : เลือกเป็นโหมด RGB เพราะเราจะทำภาพสี
5. Background Contents : เลือกให้เป็น Transparent เพราะด้านหลังจะได้ทะลุได้

ขั้นตอนที่ 2
หลังจากที่เราได้งานขนาด 100x50 ออกมาแล้ว
ให้สร้างสี่เหลี่ยมขึ้นมาโดยกดเลือกใช้เครื่องมือ  จากแถบเครื่องมือ

โดยตอนที่สร้างสี่เหลี่ยมจะต้องเหลือขอบๆเอาไว้นะ (แบบในรูป)
เพราะว่าถ้าสร้างสีเหลี่ยมทั้งหมดจะทำกรอบโค้งมนไม่ได้ (ไม่รู้ทำไม)

ขั้นตอนที่ 3
เลือกกดคำสั่งจากแถบบนตามนี้ Select > Modify > Smooth
แล้วเราก็จะเจอหน้าต่างแบบนี้มาให้กำหนดค่า

อยากให้กรอบของเราโค้งมลขนาดไหนก็กำหนดเอาเลย ^^

ขั้นตอนที่ 4
หลังจากที่เส้นประของเราแสดงผลให้ดูว่ามลพอใจเราแล้ว
ก็เลือกคำสั่ง Edit > Stroke แล้วก็จะมีหน้าต่างแบบนี้มาให้เรากำหนดค่า

(1) Width : กำหนดความหนาของเส้นขอบ
(2) Color : เลือกสีที่จะทำเส้นขอบ
(3) Location : กำหนดว่าจะให้ขอบแสดงผลยังไหน ข้างใน ตรงกลาง หรือ ข้างนอก

ถ้ากำหนดค่าแบบเดียวกับในรูปด้านบนก็จะแสดงผลออกมาเป็นแบบรูปด้านล่างนี้

ขั้นตอนที่ 5
จนถึงตอนนี้เราได้กรอบมาแล้ว...ก็จะเริ่มมาทำตัวหนังสือกันบ้าง
สำหรับ ฟอนต์ ที่ใช้ทำฺ Banner นั้นจะต้องเลือกเป็นฟอนต์ประเภท Bitmap
ซึ่งสามารถหาได้จากเว็บนี้ http://www.dafont.com/bitmap.php
เลือกฟอนต์ Bitmap ที่ถูกใจมาติดตั้งใช้ในเครื่องได้เลย >__<)v

หลังจากพิมพ์คำพูดที่เราอยากได้ลงไปแล้วก็ใส่กรอบเพื่อให้มองเห็นชัดขึ้น
อันนี้เราเลือกใช้ฟอนต์ 5x5 นะ 

ขั้นตอนที่ 6 

เลือกรูปที่เราอยากใช้มาใส่ไว้ Layers ล่างสุด ตามภาพเลย

พอเอามาใส่แล้วก็จะแสดงผลตามภาพด้านล่างนี้เลย

อย่าลืมลบภาพที่เกินออกมาจากกรอบออกให้เรียบร้อยจากนั้นก็สั่ง Save
File >  Save for web > Save > จะได้ภาพออกมาเป็นนามสกุล gif 

และภาพบนนี้ก็คือหน้าตาของ Banner ที่เสร็จสมบูรณ์แล้วนั่นเอง

นี่เป็นเพียงการทำแบนเนอร์แบบง่ายๆรูปแบบนึงเท่านั้น  ความจริงแล้วมีลูกเล่นอีกเยอะมากที่เราสามารถนำมาใช้ควบคู่ไปด้วยได้
หรือบางที่อาจทำเป็นภาพเคลื่อนไหวก็ได้ ยังไงก็ลองทำกันดูแล้วกันนะ ^^