Banner
description
Transcript of Banner
![Page 1: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/1.jpg)
ใบความรู้เรื่อง การสร้าง แบนเนอร์ หรือส่วนหัวของเว็บไซต์ ขั้นตอนการสร้าง 1. ให้เปิดโปรแกรม Adobe Photoshop CS ข้ึนมาโดยดับเบิลคลิกที่หน้าจอ Desktop ที่ไอคอน
2. จะเข้าสู่โปรแกรม Adobe Photoshop ดังภาพ
3. เริ่มสร้างส่วนหัวของเว็บไซต์ โดยคลิกที่ เมนู File > New จากนั้นก าหนดขนาด ดังนี้
จะก าหนดขนาดตามภาพด้านล่าง
![Page 2: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/2.jpg)
4. จะได้ขนาดดังภาพ
5. ไล่สีพื้นหลังตามต้องการ มีวิธีการดังนี้ 5.1 คลิกที่ 5.2 คลิกเลือกสีพื้นหน้าและพื้นหลังตามต้องการ และความเหมาะสม
5.3 คลิกที่กล่องเครื่องมือ เพื่อไล่สี
![Page 3: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/3.jpg)
5.4 คลิกเลือกลักษณะการไล่สี
5.5 น าเมาส์ไปลากบริเวณพื้นงานโดยก่อนที่จะลากให้เราเลือกลักษณะการไล่สีพื้นหลังก่อนน่ะครับ
5.6 ในตัวอย่างนี้ขอเลือกแบบที่ 1 จะได้ดังภาพ
![Page 4: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/4.jpg)
6. น ารูปภาพที่เกี่ยวข้องกับเว็บไซต์ของนักเรียนมาใส่ โดยให้นักเรียนไปหาจากอินเตอร์เน็ตแล้วบันทึกไว้ใน เครื่องคอมพิวเตอร์ เช่น ตัวอย่าง ท าเว็บไซต์เรื่อง สุนัขแสนรู้ มีวิธีการดังนี้ 6.1 เปิดไฟล์รูปภาพข้ึน เลือก เมนู File > Open
จากนั้นเลือกรูปภาพที่ต้องการ
จะได้ดังภาพ
![Page 5: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/5.jpg)
6.2 กด ctrl และตัวอักษร A เพื่อเลือกทั้งหมด จะได้ดังภาพ
6.3 คลิกที่กล่องเครื่องมือ เพื่อเคลื่อนย้าย โดยลากรูปมาใส่ในพื้นงานของเราดังภาพ
จะได้ภาพที่ใหญ่เกินไปให้ย่อขยายโดยกด ctrl และตัวอักษร T จะย่อขยายดังภาพ พอได้ขนาดแล้ว Enter
![Page 6: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/6.jpg)
6.4 ท าภาพให้กลมกลืนกับภาพพื้นหลัง น าเมาส์ไปกดที่ Add layer mash
6.5 น าเมาส์ไปเลือก
แล้วท าการไล่ระดับเหมือนสีพื้นหลัง โดยสีพื้นจะต้องเป็น
จะได้ดังภาพ
![Page 7: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/7.jpg)
7. ใส่รูปภาพที่เกี่ยวข้องเพิ่มอีกตามความเหมาะสม ดังภาพ
8. การใส่ขอบและเงารูปภาพ 8.1 คลิกเลเยอร์รูปที่ต้องการ ดังภาพ
8.2 คลิกเลือก Add a layer style เลือก Stroke ดังภาพ
![Page 8: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/8.jpg)
จะปรากฏหน้าจอนี้ข้ึนมาดังภาพ
ท าการก าหนดค่าต่าง ๆ ตามความเหมาะสม
คลิกเลือกสีที่ต้องการให้มีขอบเงาในที่นี้เป็นสีขาว พร้อมก าหนดขนาดเงา 8.3 การใส่ขอบและเงาพื้นหลัง
![Page 9: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/9.jpg)
8.4 ให้ท าจนครบทุกภาพที่น าเข้ามาจะได้ดังภาพ
9. ใส่ข้อความ ดังนี้ 9.1 คลิกที่ตัว T แล้วน าไปคลิกที่ แผ่นงานบริเวณที่ต้องการ เลือก Font เป็นภาษาไทยที่ข้ึนต้นด้วยตัวเลข หรือลงท้ายด้วย New หรือ UPC ดังภาพ
ก าหนดสีข้อความ จากนั้นพิมพ์ข้อความที่ต้องการแล้วใส่เงาหรือตกแต่ง ท าเหมือนกับรูปภาพ
จะได้ผลลัพธ์ดังนี้
![Page 10: Banner](https://reader033.fdocuments.net/reader033/viewer/2022052906/558e3def1a28ab92068b45c5/html5/thumbnails/10.jpg)
9.2 จากนั้นพิมพ์ช่ือสกุลผู้จัดท า ด้านล่าง ดังนี้
10. การบันงาน มี 2 แบบ คือ 10.1 บันทึกเพื่อน ามาแก้ไข Format จะเป็น Photoshop ดังนี้
10.2 บันทึกเพื่อน ามาใช้งาน (น าไปสร้างเว็บไซต์) จะเป็น JPEG ดังนี ้
10.3 จะได้ไฟล์รูปภาพ ช่ือ Top.jpg