banner

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

2. จะเข้าสู่โปรแกรม Adobe Photoshop ดังภาพ

3. เริ่มสร้างส่วนหัวของเว็บไซต์ โดยคลิกที่ เมนู File > New จากนั้นก าหนดขนาด ดังนี้

จะก าหนดขนาดตามภาพด้านล่าง

4. จะได้ขนาดดังภาพ

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

5.3 คลิกที่กล่องเครื่องมือ เพื่อไล่สี

5.4 คลิกเลือกลักษณะการไล่สี

5.5 น าเมาส์ไปลากบริเวณพื้นงานโดยก่อนที่จะลากให้เราเลือกลักษณะการไล่สีพื้นหลังก่อนน่ะครับ

5.6 ในตัวอย่างนี้ขอเลือกแบบที่ 1 จะได้ดังภาพ

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

จากนั้นเลือกรูปภาพที่ต้องการ

จะได้ดังภาพ

6.2 กด ctrl และตัวอักษร A เพื่อเลือกทั้งหมด จะได้ดังภาพ

6.3 คลิกที่กล่องเครื่องมือ เพื่อเคลื่อนย้าย โดยลากรูปมาใส่ในพื้นงานของเราดังภาพ

จะได้ภาพที่ใหญ่เกินไปให้ย่อขยายโดยกด ctrl และตัวอักษร T จะย่อขยายดังภาพ พอได้ขนาดแล้ว Enter

6.4 ท าภาพให้กลมกลืนกับภาพพื้นหลัง น าเมาส์ไปกดที่ Add layer mash

6.5 น าเมาส์ไปเลือก

แล้วท าการไล่ระดับเหมือนสีพื้นหลัง โดยสีพื้นจะต้องเป็น

จะได้ดังภาพ

7. ใส่รูปภาพที่เกี่ยวข้องเพิ่มอีกตามความเหมาะสม ดังภาพ

8. การใส่ขอบและเงารูปภาพ 8.1 คลิกเลเยอร์รูปที่ต้องการ ดังภาพ

8.2 คลิกเลือก Add a layer style เลือก Stroke ดังภาพ

จะปรากฏหน้าจอนี้ข้ึนมาดังภาพ

ท าการก าหนดค่าต่าง ๆ ตามความเหมาะสม

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

8.4 ให้ท าจนครบทุกภาพที่น าเข้ามาจะได้ดังภาพ

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

ก าหนดสีข้อความ จากนั้นพิมพ์ข้อความที่ต้องการแล้วใส่เงาหรือตกแต่ง ท าเหมือนกับรูปภาพ

จะได้ผลลัพธ์ดังนี้

9.2 จากนั้นพิมพ์ช่ือสกุลผู้จัดท า ด้านล่าง ดังนี้

10. การบันงาน มี 2 แบบ คือ 10.1 บันทึกเพื่อน ามาแก้ไข Format จะเป็น Photoshop ดังนี้

10.2 บันทึกเพื่อน ามาใช้งาน (น าไปสร้างเว็บไซต์) จะเป็น JPEG ดังนี ้

10.3 จะได้ไฟล์รูปภาพ ช่ือ Top.jpg