ナルト 疾風伝 ~ Hero Tomorrow

หน้าพิเศษที่เขียนขึ้นมาเพื่อสอนการทำแบนเนอร์
เผื่อว่ามีใครอยากจะช่วยทำแบนเนอร์มาแปะในบลอคนะคะ

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

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 ที่เสร็จสมบูรณ์แล้วนั่นเอง

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