banner

1. ใบความรู้เรื่อง การสร้าง แบนเนอร์ หรือส่วนหัวของเว็บไซต์
ขั้นตอนการสร้าง
1. ให้เปิดโปรแกรม Adobe Photoshop CS ขึ้นมาโดยดับเบิลคลิกที่หน้าจอ Desktop ที่ไอคอน
2. จะเข้าสู่โปรแกรม Adobe Photoshop ดังภาพ
3. เริ่มสร้างส่วนหัวของเว็บไซต์ โดยคลิกที่ เมนู File > New จากนั้นกาหนดขนาด ดังนี้
จะกาหนดขนาดตามภาพด้านล่าง

2. 4. จะได้ขนาดดังภาพ
5. ไล่สีพื้นหลังตามต้องการ มีวิธีการดังนี้
5.1 คลิกที่
5.2 คลิกเลือกสีพื้นหน้าและพื้นหลังตามต้องการ และความเหมาะสม
5.3 คลิกที่กล่องเครื่องมือ เพื่อไล่สี

3. 5.4 คลิกเลือกลักษณะการไล่สี
5.5 นาเมาส์ไปลากบริเวณพื้นงานโดยก่อนที่จะลากให้เราเลือกลักษณะการไล่สีพื้นหลังก่อนน่ะครับ
5.6 ในตัวอย่างนี้ขอเลือกแบบที่ 1 จะได้ดังภาพ

4. 6. นารูปภาพที่เกี่ยวข้องกับเว็บไซต์ของนักเรียนมาใส่ โดยให้นักเรียนไปหาจากอินเตอร์เน็ตแล้วบันทึกไว้ใน
เครื่องคอมพิวเตอร์ เช่น ตัวอย่าง ทาเว็บไซต์เรื่อง สุนัขแสนรู้ มีวิธีการดังนี้
6.1 เปิดไฟล์รูปภาพขึ้น เลือก เมนู File > Open
จากนั้นเลือกรูปภาพที่ต้องการ
จะได้ดังภาพ

5. 6.2 กด ctrl และตัวอักษร A เพื่อเลือกทั้งหมด จะได้ดังภาพ
6.3 คลิกที่กล่องเครื่องมือ เพื่อเคลื่อนย้าย โดยลากรูปมาใส่ในพื้นงานของเราดังภาพ
จะได้ภาพที่ใหญ่เกินไปให้ย่อขยายโดยกด ctrl และตัวอักษร T จะย่อขยายดังภาพ พอได้ขนาดแล้ว Enter

6. 6.4 ทาภาพให้กลมกลืนกับภาพพื้นหลัง นาเมาส์ไปกดที่ Add layer mash
6.5 นาเมาส์ไปเลือก
แล้วทาการไล่ระดับเหมือนสีพื้นหลัง โดยสีพื้นจะต้องเป็น
จะได้ดังภาพ

7. 7. ใส่รูปภาพที่เกี่ยวข้องเพิ่มอีกตามความเหมาะสมดังภาพ
8. การใส่ขอบและเงารูปภาพ
8.1 คลิกเลเยอร์รูปที่ต้องการ ดังภาพ
8.2 คลิกเลือก Add a layer style เลือก Stroke ดังภาพ

8. จะปรากฏหน้าจอนี้ขึ้นมาดังภาพ
ทาการกาหนดค่าต่าง ๆ ตามความเหมาะสม
คลิกเลือกสีที่ต้องการให้มีขอบเงาในที่นี้เป็นสีขาว พร้อมกาหนดขนาดเงา
8.3 การใส่ขอบและเงาพื้นหลัง

9. 8.4 ให้ทาจนครบทุกภาพที่นาเข้ามาจะได้ดังภาพ
9. ใส่ข้อความ ดังนี้
9.1 คลิกที่ตัว T แล้วนาไปคลิกที่ แผ่นงานบริเวณที่ต้องการ เลือก Font เป็นภาษาไทยที่ขึ้นต้นด้วยตัวเลข
หรือลงท้ายด้วย New หรือ UPC ดังภาพ
กาหนดสีข้อความ จากนั้นพิมพ์ข้อความที่ต้องการแล้วใส่เงาหรือตกแต่ง ทาเหมือนกับรูปภาพ
จะได้ผลลัพธ์ดังนี้

10. 9.2 จากนั้นพิมพ์ชื่อสกุลผู้จัดทา ด้านล่าง ดังนี้
10. การบันงาน มี 2 แบบ คือ
10.1 บันทึกเพื่อนามาแก้ไข Format จะเป็น Photoshop ดังนี้
10.2 บันทึกเพื่อนามาใช้งาน (นาไปสร้างเว็บไซต์) จะเป็นJPEG ดังนี้
10.3 จะได้ไฟล์รูปภาพ ชื่อ Top.jpg