การออกแบบแบนเนอร์ ส่วนหัวเว็บแบบ Responsive Design


การออกแบบแบนเนอร์ ส่วนหัวเว็บ แบบ Responsive Design การทำเว็บไซต์โดยทั่วไปมักจะออกแบบแบนเนอร์  ให้มีความกว้างตามขนาดของหน้าเว็บ   เช่น  1000 x 200 /   1000 x 300  /  1000 x 400   หรือขนาดอื่น ๆ  ก็ว่ากันไป แต่แล้ววันหนึ่ง เมื่อได้เข้าสู่เทรนด์ของ Responsive  web  ทำให้เราไม่สามารถที่จะออกแบบหัวเว็บในลักษณะนี้ได้อีกต่อไปแล้ว  เพราะถ้าออกแบบในลักษณะเดิม เมื่อเปิดดูในโมบายเว็บ แน่นอนว่าภาพมันถูกย่อส่วนลงมา ตัวหนังสือทั้งหมดก็จะเล็กลงทันที  คงถึงเวลาที่จะต้องอินเทรนด์การทำแบนเนอร์ส่วนหัวเว็บแบบ responsive กันแล้วล่ะคะ

แบนเนอร์ส่วนหัวเว็บ นี้มันก็คือ รูปภาพที่แสดงผลอยู่ด้านบนสุดของเว็บไซต์ ซึ่งเบื้องต้นจะมีรูปภาพส่วนหัวที่ออกแบบเทมเพลตเริ่มต้นที่คุณเลือกใช้งาน ระบบจะรองรับนามสกุล .JPG, .PNG, .GIF, .SWF โดย ReadyPlanet ซึ่งคุณสามารถใส่รูปภาพแบนเนอร์ที่คุณสร้างขึ้นเอง ได้จากโปรแกรมตกแต่งภาพ อย่างเช่น Photoshop, PhotoScape หรือจะเป็นเอนนิเมชั่นจาก Flash ผ่าน Program Adobe Flash

ส่วนการทำเว็บไซต์แบบ Responsive หลายท่านก็คงรู้ว่าแล้วนะคะว่ามันก็คือ การทำให้เว็บไซต์ของเรานั้นสามารถที่จะ รองรับหน้าจอ Smartphone, Tablet, และ Desktop ในเว็บไซต์เดียว  ซึ่งเป็นเทรนด์สำหรับงานเว็บดีไซน์ในช่วงนี้คะ เพราะเป้าหมายของ Responsive Design ก็คือการออกแบบเว็บให้มีความสะดวกง่ายต่อผู้ใช้มือถือเป็นหลักนั่นเองคะ

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

กรณีใช้ Flash Template (ไฟล์ภาพส่วนหัวจะต้องเป็นไฟล์นามสกุล .swf เท่านั้น)

เทมเพลตขนาด 1024×768 pixels ควรจะมีขนาดรูปส่วนหัวคือ 900×200 pixels

เทมเพลตขนาด 800×600 pixels ควรมีขนาดรูปส่วนหัวคือ 770×200 pixels

ส่วนกรณีที่ใช้  เทมเพลตธรรมดา (ไฟล์ภาพส่วนหัวจะต้องเป็นไฟล์นามสกุล .jpg, .png, .gif)

เทมเพลตแบบเต็มหน้าจอ (Fullscreen) นั้นควรจะมีขนาดรูปส่วนหัว 1004×200 pixels

เทมเพลตขนาด 1024×768 pixels ควรมีขนาดรูปส่วนหัวคือ 900×200 pixels

เทมเพลตขนาด 800×600 pixels ควรมีขนาดรูปส่วนหัวคือ 770×200 pixels

โดยมีขั้นตอนการอัพโหลดภาพแบนเนอร์ส่วนหัวดังต่อไปนี้

อัพโหลดแบนเนอร์

Log in เข้าส่วนจัดการเว็บไซต์ ที่เมนู “จัดการเว็บไซต์” คลิก “ตั้งค่าพื้นฐานเว็บไซต์”

คลิกแท็บ “จัดการภาพส่วนหัวและโลโก้” แล้วคลิก เลือกประเภทของภาพส่วนหัวที่ต้องการอัพโหลด แล้วคลิก ยืนยัน ค่ะ

กรณีเลือกใช้ภาพส่วนหัวเป็นรูปภาพ

จัดการภาพส่วนหัวรูปภาพ

คลิกเพื่อเลือก “ใช้ภาพส่วนหัวเป็นรูปภาพ”

แล้วคลิก “เลือกรูปแบบ” ที่หัวข้อ “รูปภาพส่วนหัวระบบเดิม” คลิกที่ปุ่ม “Choose File” ก็จะปรากฎหน้าต่างให้เลือกไฟล์ภาพแบนเนอร์ส่วนหัว (ไฟล์นามสกุล .jpg, .gif, .png) จากเครื่องคอมพิวเตอร์ของคุณคะ

สำหรับหัวข้อ “รูปโลโก้” สามารถใส่รูปโลโก้ที่คุณออกแบบไว้ได้ โดยการแสดงผล ของโลโก้นั้นจะทับซ้อนบนภาพแบนเนอร์ส่วนหัว หรือ จะเลือกไม่แสดงโลโก้ก็ได้คะ

คลิกปุ่ม “ตกลง” เพื่อบันทึก

กรณีเลือกใช้ภาพส่วนหัวเป็นไฟล์แฟลช

ส่วนหัวไฟล์แฟลช

คลิกเลือก “ใช้ภาพส่วนหัวเป็นไฟล์แฟลช”

แล้ว เลือกรูปแบบ ที่หัวข้อ รูปภาพส่วนสำรอง ในกรณีที่ Browser ไม่สามารถแสดง Flash ได้ ให้คลิกปุ่ม Choose File ก็จะมีหน้าต่างให้เลือกไฟล์ภาพแบนเนอร์ส่วนหัวที่เป็น ไฟล์นามสกุล .jpg, .gif, .png จากเครื่องคอมพิวเตอร์ของคุณคะ

ส่วน รูปภาพส่วนหัวระบบเดิม หัวข้อ  Flash  ให้คลิกปุ่ม Choose File จากนั้นให้เลือกไฟล์แบนเนอร์ส่วนหัวแบบแฟลช (ไฟล์นามสกุล .swf) จากเครื่องคอมพิวเตอร์ พร้อมช่องสำหรับใส่รายละเอียดความกว้าง ความสูง รวมถึงสีพื้นหลังของภาพส่วนหัวที่เลือกไว้

สำหรับหัวข้อ “รูปโลโก้” สามารถใส่รูปโลโก้ลงไปได้เลย ซึ่งการแสดงผลโลโก้จะทับซ้อนบนภาพแบนเนอร์ส่วนหัว หรือหากไม่ต้องการโลโก้ก็เลือกไม่แสดงโลโก้ ในกรณีที่ไม่ต้องการแสดงภาพโลโก้

คลิกปุ่ม “ตกลง” เพื่อบันทึก

 

แบนเนอร์ส่วนหัวเว็บแบบ Responsive เหมาะกับเว็บดีไซน์ เพราะเทมเพลตแบบนี้กำลังอินเทรนด์อยู่ในตอนนี้ เนื่องจากปัจจุบัน designer ก็พยายามทำให้มันคล้ายๆกับ app ในโทรศัพท์นั่นแหละ เพราะว่ามันคือมาตรฐานไปแล้วล่ะคะ

โดย..เจ้าน้อย..

 

 

Comments

comments


Like it? Share with your friends!

442
, 442 points

การออกแบบแบนเนอร์ ส่วนหัวเว็บแบบ Responsive Design

log in

Captcha!

reset password

Back to
log in
Choose A Format
Personality quiz
Trivia quiz
Poll
Story
List
Open List
Ranked List
Meme
Video
Audio
Image