การสร้างภาพส่วนหัวเว็บ

หลังจากที่ได้แนะนำเรื่องราวของ Google Sites ใหม่ (New Google Sites) ไปแล้ว มาวันนี้ จะได้แนะนำการจัดสภาพแวดล้อม เพื่อให้เหมาะสมกับสาระเนื้อหา หรือธีม ที่ได้ ออกแบบไว้

การปรับแต่งส่วนหัวของเว็บ

ส่วนหัวของหน้าเว็บ เป็นส่วนสำคัญ และนับเป็นสีสันของเรื่องที่กำลังนำเสนอ มีวิธีการดังนี้

1.ไปที่ https://sites.google.com/ ทำการเข้าระบบ จะเห็น Google Sites ใหม่ (New Google Sites) แสดงอยู่ใต้รายการ Google Sites แบบคลาสสิกอยู่ ดังภาพด้านบน

(หมายเหตุ สำหรับผู้ที่ใช้โดเมนเนมสถานศึกษา ตัวอย่าง https://sites.google.com/dei.ac.th ในส่วนตัวเอนหนา แสดงถึงโดเมนที่ใช้อยู่)

2. เมื่อเปิดเข้ามาจะเห็น Google Sites รูปแบบใหม่ (ตัวอย่าง ภายในพื้นที่ จะแสดง Site ที่สร้างไว้ ในที่นี้ มีอยู่ 3 Site) ทำการคลิก เลือก Sites ที่ต้องการปรับแต่ง (สมมุติ เลือก ทดสอบ)

3.การปรับแต่งส่วนหัว มีที่ต้องปรับแต่งหลายที่ อาทิ

3.1 การตั้งชื่อหน้า(ที่ปรากฏตรงส่วนหัว)

3.2 การเปลี่ยนภาพฉากหลังของส่วนหัวของหน้า

3.3 การปรับเปลี่ยนขนาดของฉากหลังของส่วนหัวของหน้า

1) เปิด Sites ที่ต้องการปรับเปลี่ยน ขึ้นมา

2) นำเมาส์มาชี้ตรงส่วนขอบล่างของฉากหลังส่วนหัวของหน้า

3) คลิกเลือกที่รายการ เปลี่ยนรูปภาพ : จะแสดงตัวเลือกให้ 2 รายการคือ

อัปโหลด เป็นการนำภาพฉากหลังที่เตรียมไว้ นำขึ้นระบบของ Sites

เลือกรูปภาพ เป็นการเลือกภาพจากแหล่งออนไลน์ ที่ Sites ทำการเชื่อมต่อไว้ แบ่งออกเป็นหลายกลุ่ม

การเปลี่ยนภาพฉากหลังของส่วนหัวของหน้า : เลือกรูปภาพ

4) วิธีเปลี่ยนรูปภาพจากการ เลือกรูปภาพ ที่เตรียมไว้

โดยการคลิกเลือกรายการ เลือกรูปภาพ... ระบบแสดงรายการให้ท่านได้เลือกใช้งาน 5 แหล่ง

แกลเลอรี่ : เป็นรูปแบบของ Google Sites เองมีภาพสำหรับวางฉากหลัง มาให้ได้ใช้มากกว่า 50 แบบ

ตาม URL : เป็นการเลือกไฟล์ภาพจากเว็บไซต์มาก่อน แล้วนำลิ้งค์ของไฟล์ภาพที่ท่านเลือกจากเว็บไซต์นำมาวางลงในช่อง ระบบจะลิ้งค์ไฟล์ภาพนำมาใช้งานใน Sites

ค้นหา : ลักษณะจะคล้ายๆกับแบบ ตาม URL แต่รูปแบบนี้เป็นการค้นหาจากตรงส่วนนี้โดยตรง ระบบจะลิ้งค์ไฟล์ภาพนำมาใช้งานใน Sites

ทำการเลือกรูป ตามที่ต้องการ เลือกแล้วคลิกที่ปุ่ม เลือก

อัลบั้มของคุณ : เป็นแหล่งเก็ไฟล์ภาพจากผลิตภัณฑ์ของ Google ที่ใช้งานอยู่ อาทิ G-mail หรือ Blogger

Google Drive (ไดร์ฟของฉัน) : เป็นแหล่งไฟล์รูปที่ท่านเก็บไว้บน Google drive ตาม Account ที่ท่านใช้

แชร์กับฉัน : เป็นแหล่งไฟล์รูป ที่มาจากการแชร์มาจาก Account อื่น

ล่าสุด : เป็นอีกเงื่อนไขของระบบที่ จะจดจำว่า ท่านได้เคยจัดการรูปจากแหล่ง หรือส่วนต่างในผลิตภัณฑ์ของ Google ให้ท่านนำมาเลือกใช้ใน Sites

แต่ถ้าเราทำการออกแบบเองล่ะ สิ่งที่ได้จะมีความโดดเด่นเพิ่มมากขึ้น แต่ในการออกแบบเอง ก็ต้องมีข้อควรระวังในหลายๆเรื่อง อาทิ ขนาดภาพที่ใช้ ต้องกำหนดขนาดที่เหมาะสม การวางไฮไลท์สำคัญของภาพ รวมถึงข้อความ เพราะหากออกแบบไม่สมดุลย์ เมื่อชมผ่านสมาร์ทโฟน สิ่งที่เป็นจุดเด่น หรือไฮไลท์ จะขาดหายไปจากจอ โดยเฉพาะออกแบบให้แสดงชื่อชุมชน จากภาพด้านล่างลองสังเกตุระยะขอบจอของ Notebook หรือ Tablet เปรียบเทียบกับขอบจอของสมาร์ทโฟน จะสังเกตุว่า พื้นที่ส่วนซ้าย ส่วนขวาของภาพที่ปรากฏในหน้าจอคอมพิวเตอร์ เมื่อมาแสดงผลบนจอสมาร์ทโฟนจะขาดหายไป หลายส่วน

แต่ถ้าเราทำการออกแบบเองล่ะ สิ่งที่ได้จะมีความโดดเด่นเพิ่มมากขึ้น แต่ในการออกแบบเอง ก็ต้องมีข้อควรระวังในหลายๆเรื่อง อาทิ ขนาดภาพที่ใช้ ต้องกำหนดขนาดที่เหมาะสม การวางไฮไลท์สำคัญของภาพ รวมถึงข้อความ เพราะหากออกแบบไม่สมดุลย์ เมื่อชมผ่านสมาร์ทโฟน สิ่งที่เป็นจุดเด่น หรือไฮไลท์ จะขาดหายไปจากจอ โดยเฉพาะออกแบบให้แสดงชื่อชุมชน จากภาพด้านล่างลองสังเกตุระยะขอบจอของ Notebook หรือ Tablet เปรียบเทียบกับขอบจอของสมาร์ทโฟน จะสังเกตุว่า พื้นที่ส่วนซ้าย ส่วนขวาของภาพที่ปรากฏในหน้าจอคอมพิวเตอร์ เมื่อมาแสดงผลบนจอสมาร์ทโฟนจะขาดหายไป หลายส่วน

วิธีการเปลี่ยนรูปภาพ จากการอัปโหลด

ในยุคแรกของ New Google Sites ท่านต้องเตรียมภาพขนาด กว้าง 1,200 pixel สูง 270 pixel (ภาพที่สร้างจะรองรับการแสดงผลในทุกอุปกรณ์)

ซึ่งเวลาแสดงผล จะปรากฏดังภาพด้านล่าง

การทำกราฟิกส่วนหัวนี้ เราสามารถออกแบบได้ ง่ายๆ ด้วยโปรแกรม Microsoft PowerPoint ก่อนการสร้างงาน ให้ทำการตั้งค่าสไลด์ก่อน โดยใช้ขนาดภาพกว้างที่ 34 CM และสูงที่ 14.2 CM ภาพที่ได้ จะมีค่าความละเอียดค่อนข้างสูง แต่ก็ส่งผลให้การโหลดแสดงผลอาจช้าลงบ้าง แต่ถ้าจะให้โหลดได้ไว ก็ลดอัตราส่วนลงมาครึ่งนึง คือ ขนาดภาพกว้างที่ 17 CM และสูงที่ 7.1 CM ก็คงพอ

สำหรับคนที่ใช้ PowerPoint ชำนาญคงเข้าใจได้ไม่ยาก แต่ถ้า อยากจะศึกษาและทำตามแบบ Step by Step ก็ ติดตามอ่านต่อเลย หรือ จะดาวน์โหลดแม่แบบตัวอย่าง จากลิ้งค์ท้ายบทความด้านล่างก่อนเพื่อเรียนรู้ตามขั้นตอน

สำหรับคนที่ใช้ไฟล์แม่แบบที่ดาวน์โหลด ก็ข้ามขั้นตอนที่ 1 - 3 ไปได้เลย

1.เมื่อเปิดโปรแกรม PowerPoint แล้ว เลือกเมนู ออกแบบ(Design)

2.ไปที่ Slide Size เพื่อทำการตั้งค่าขนาดงานที่สร้าง (ซึ่งจะมี 3 รายการให้เลือก Standard, Wide Screen และ Custom Slide Size) ทำการเลือก Custom Slide Size

3.ตั้งค่าในช่องส่วนกว้างและส่วนสูง ถ้าไม่สนใจความละเอียดสูงมากนัก ตั้งค่าที่ กว้าง 17 CM และสูง 7.1 CM แต่ถ้าชิ้นงานมีรายละเอียดมาก(แต่ต้องระวังเวลาโหลดงานจะสูงตามด้วย) ก็ตั้งค่าที่ กว้าง 34 CM และสูง 14.2 CM สำหรับตัวอย่างขั้นตอนนี้ขอตั้งค่าที่ กว้าง 17 CM และสูง 7.1 CM

4.นำภาพที่เตรียมไว้นำมาวางบนพื้นที่ทำงาน (แนะนำภาพที่นำมาใช้ควรเป็นภาพมุมกว้างๆ หรือขนาด Long Shot) ทำการปรับภาพให้เหมาะสมบนพื้นที่งาน หากภาพใหญ่กว่าก็ไม่ต้องสนใจมากนัก บริเวณภาพที่นำไปใช้จะอยู่ในกรอบของเส้นประ

5.สร้างเส้นสี สักเส้น จะสีเทา หรือสีอื่นๆ (ครึ่งหนึ่งของพื้นที่สร้างงาน) เพื่อใช้ควบคุมขอบเขตของข้อความ

6.สร้างข้อความตรงส่วนกลางพื้นที่สร้างงาน (ครึ่งหนึ่งของพื้นที่สร้างงาน) ตัวอย่าง ดูที่เส้นสีเทากลางภาพ

7.ปรับแต่งสี ขนาดของตัวอักษร ให้เหมาะสม ระมัดระวังอย่าให้ล้นจากเส้นสีที่สร้างไว้

8.ถ้าเรียบร้อยทั้งหมด ทำการลบเส้นสีที่สร้างไว้

9.นำภาพที่สร้างจาก PowerPoint ออกจากโปรแกรม เพื่อไว้ใช้งาน โดยไปที่เมนู File เลือก Save As ตั้งชื่อไฟล์ภาพด้วย แล้วทำการ save เป็นประเภท jpeg , jpg หรือ png

10.ไฟล์ภาพที่ได้ ก็พร้อมที่จะนำไปวางส่วนหัวของหน้าเว็บได้เลย