การสร้างแบนเนอร์ สวยๆ bykruwi

2เอกสารประกอบการเรยี นเลม่ ที่
เอกสารประกอบการเรยี น เรอ่ื ง “Web design and Development ”

วิชา Web Design and Development 1

รหัสวิชา ง30241 ระดับชั้นมัธยมศึกษาปีท่ี 4

เลม่ ท่ี 2

Banner และ Button สวยดว้ ย Photoshop

วิลาวัลย์ นาคภพ

ครูชานาญการ

รหสั วชิ า ง30241 โรงเรยี นบรรพตพสิ ัยพิทยาคม

สานกั งานเขตพน้ื ท่ีการศึกษามัธยมศึกษาเขต 42
สานกั งานคณะกรรมการการศกึ ษาขนั้ พน้ื ฐาน
กระทรวงศกึ ษาธกิ าร

ชอ่ื วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

2

(แผนประจาหนว่ ยการเรียนที่ 2)
หน่วยการเรียนท่ี 2

ชอ่ื เรือ่ ง Banner และ Button สวย ดว้ ย Photoshop เวลาเรยี นจานวน 5 ช่ัวโมง

หวั เรื่อง/สาระ
1. ประเภทของกราฟิก กราฟกิ ในงานเว็บไซต์
2. การสร้าง Navigation Bar and button ดว้ ย Photoshop หรอื Flash Intro Banner
3. การสรา้ ง Web Photo Gallery

แนวคิด หรือสาระสาคญั
1. ประเภทของกราฟกิ กราฟกิ ในงานเวบ็ ไซต์
2. การสรา้ ง Navigation Bar and button ด้วย Photoshop หรอื Flash Intro Banner
3. การสร้าง Web Photo Gallery

จดุ ประสงค์การเรียนรู้ หรือวัตถุประสงคเ์ ชงิ พฤติกรรม
หลังจากศึกษาเนื้อหาในหน่วยการเรยี นรู้น้แี ลว้ นกั เรียนมความสามารถ ดงั นี้

1. นกั เรยี นสามารถบอกความหมายประเภทของกราฟกิ ได้
2. นักเรยี นสามารถสรา้ ง Banner ไดอ้ ย่างต้ังใจ
3. นักเรยี นสามารถสร้างและอธบิ ายขน้ั ตอนการสรา้ ง Web Photo Gallery

รหัสวชิ า ง30241 ช่ือวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

3

หนว่ ยการเรยี นที่ 2 (เนือ้ หาและกจิ กรรมการเรียน)

กิจกรรมท่ี 1.1 ประเภทของกราฟกิ เวลาเรียนจานวน 10 นาที

ในการใบงานที่ 1.1 ประเภทของกราฟิก การทาใบงานให้นักเรียนศกึ ษาเน้ือหาเอกสาร
ประกอบการเรยี นเล่มท่ี 2 เรื่อง Banner และ Button สวย ด้วย Photoshop ศึกษาเน้ือหาในหวั ข้อ
เรอ่ื ง ประเภทของกราฟกิ

ในสว่ นของเนื้อหา เอกสารประกอบการเรยี นเล่มท่ี 2 เรอื่ ง Banner และ Button สวย ดว้ ย
Photoshop จะอธบิ ายและให้นกั เรียนได้รูจ้ กั และเข้าใจ ประเภทของกราฟิกแบบต่างๆ และเนอ้ื หา
อื่นๆ ทีเ่ ก่ยี วข้อง

จากการศึกษาเอกสารประกอบการเรียนเล่มท่ี 2 เรื่อง Banner และ Button สวย ด้วย
Photoshop ระหว่างการศึกษาแตล่ ะกิจกรรมนักเรียนทุกคนปรกึ ษาและแสดงความคิดเห็นเก่ียวกบั
ประเภทของเว็บไซต์และร่วมกนั สรุปหลงั จาการทากจิ กรรม

รหัสวชิ า ง30241 ชื่อวชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”

4

ใบงานที่ 1

เรื่อง ประเภทของกราฟกิ

ใช้เวลา.........10..........นาที คะแนนเต็ม..........8............คะแนน

ใหน้ ักเรียนบอกความหมายของกราฟกิ ตามท่ีกาหนดให้ได้

1. ไฟล์ภาพประเภท .JPG เป็นอย่างไรมลี กั ษณะอย่างไร
ตอบ ............................................................................................................................. ...........
....................................................................................................................... .........................

2. ไฟล์ภาพประเภท .PNG เปน็ อย่างไรมีลักษณะอย่างไร
ตอบ ............................................................................................................................. ...........
............................................................................................................................. ...................
............................................................................................................... .................................
ไฟล์ภาพประเภท .GIF เป็นอย่างไรมลี กั ษณะอย่างไร
ตอบ ............................................................................................................................. ............
..................................................................................................................................................
............................................................................................................................. .....................
............................................................................................................................. .....................

3. ไฟลป์ ระเภทมวู ี .SWF เป็นอย่างไรมลี ักษณะอย่างไร
ตอบ ........................................................................................................................................
............................................................................................................................. .....................
..............................................................................................................................................

รหสั วชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เรอื่ ง “Web design and Development ”

5

แนวคาตอบ ใบงานท่ี 1

เรือ่ ง ประเภทของกราฟิก

ใช้เวลา.........10..........นาที คะแนนเต็ม..........8............คะแนน

ใหน้ กั เรียนบอกความหมายของกราฟิกตามท่ีกาหนดให้ได้

4. ไฟลภ์ าพประเภท .JPG เปน็ อย่างไรมลี กั ษณะอย่างไร
ตอบ รปู ภาพท่ัวไป สว่ นใหญ่จะได้จากภาพที่ถ่ายมาจากกล้องดจิ ิตอล กล้องมอื ถอื มขี นาด
ใหญ่และความละเอียดสูงมาก การนามาใช้ในเวบ็ เพจเราจะตอ้ งนามาลดขนาด

5. ไฟลภ์ าพประเภท .PNG เป็นอยา่ งไรมลี ักษณะอย่างไร
ตอบ สามารถแสดงผลได้ในระบบสเี ตม็ พกิ ดั (True Color) มขี นาดไฟลเ์ ลก็ และควบคุม
คุณภาพไดต้ ามท่ีต้องการ จะเปน็ ได้ทั้งภาพถา่ ยหรือภาพกราฟกิ ที่วาดขน้ึ กาหนดให้พืน้ ที่
ภาพโปรง่ ใสได้ (Transparent)

6. ไฟล์ภาพประเภท .GIF เปน็ อย่างไรมลี กั ษณะอย่างไร
ตอบ จะเป็นไฟลภ์ าพกราฟกิ ที่ สร้างหรือวาดขึ้นมาใหม่นยิ มนามาทาปุ่มกด, แถบเมน,ู ปา้ ย
แบนเนอร์ หรือป้ายโฆษณา และทาเป็นภาพเคล่อื นไหว (Animation) เพื่อสลับการแสดงผล
ภาพหรอื ข้อความให้สวยงาม ไฟลก์ ็มีขนาดเล็กแสดงผลได้รวดเร็วกาหนดความโปรง่ ใสใน
ภาพได้(Transparent)

7. ไฟลป์ ระเภทมูวี .SWF เปน็ อย่างไรมลี กั ษณะอย่างไร
ตอบ เปน็ ไฟลแ์ อนิเมชัน่ (Animation) ทีส่ ร้างด้วยโปรแกรม Flash สร้างเปน็ หนา้ เปดิ
เวบ็ ไซต์สวยๆ หรือใชเ้ ปิดไฟล์วิดีโอนยิ มมากในการทาเว็บไซตท์ ีผ่ า่ นมา เพราะทาใหเ้ วบ็ ไซต์มี
ชีวิตชวี า

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่ือง “Web design and Development ”

หนว่ ยการเรยี นท่ี 2 6

กิจกรรมท่ี 1.2 การสรา้ งแบนเนอรแ์ ละปุ่มเมนู เวลาเรียนจานวน 40 นาที

ในการใบงานท่ี 1.2 การสร้างแบนเนอร์และปมุ่ เมนู การทาใบงานใหน้ กั เรียนศกึ ษาเนื้อหา
เอกสารประกอบการเรยี นเล่มที่ 2 เร่อื ง Banner และ Button สวย ด้วย Photoshop ศกึ ษาเน้ือหา
ในหวั ข้อเรื่อง การสร้างแบนเนอร์และปุ่มเมนู

ในสว่ นของเน้ือหา เอกสารประกอบการเรยี นเล่มท่ี 2 เรอ่ื ง Banner และ Button สวย ดว้ ย
Photoshop จะอธบิ ายและให้นักเรียนได้รู้จักและเขา้ ใจพร้อมกับวธิ กี ารออกแบบรวมถึงการสรา้ ง
แบนเนอร์และป่มุ เมนู แบบต่างๆ และเนื้อหาอื่นๆ ทเี่ กย่ี วข้อง

จากการศึกษาเอกสารประกอบการเรียนเล่มท่ี 2 เรื่อง Banner และ Button สวย ดว้ ย
Photoshop ระหวา่ งการศกึ ษาแต่ละกิจกรรมนักเรียนทุกคนปรกึ ษาและแสดงความคิดเหน็ เกีย่ วกบั
ประเภทของเวบ็ ไซต์และร่วมกนั สรุปหลงั จาการทากิจกรรม

รหสั วชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เรอ่ื ง “Web design and Development ”

ใบงานท่ี 2 7

เรื่อง การสรา้ งแบนเนอร์และปมุ่ เมนู

ใชเ้ วลา.........40..........นาที คะแนนเต็ม..........9............คะแนน

ใหน้ ักเรียนสร้าง แบนเนอร์ และปมุ่ เมนตู ามขนาดและจานวนทก่ี าหนดให้

1. ใหน้ กั เรยี นสรา้ งแบนเนอร์ ขนาดกว้าง 960 สงู 200 pixels ความละเอยี ด 72 pixels
โหมด RGB Color ช่ือและรูปภาพแบนเนอร์ของตวั นกั เรยี นเอง แลว้ บันทึกไฟล์เป็นนามสกลุ
.JPG (ออกแบบสตี ามใจชอบ)

ตอบ

2. ใหน้ ักเรยี นสร้างปุ่มเมนู ขนาดกว้าง 220 สูง 50 pixels ความละเอยี ด 72 pixels
โหมด RGB Color จานวน 4 ปุ่ม ดงั น้ี (การออกแบบสีและรปู แบบตามทนี่ ักเรยี นชอบ)
1. ปมุ่ home
2. ป่มุ Asean
3. ปุ่ม เศรษฐกิจพอเพยี ง
4. ปุม่ อาหาร

ตอบ

รหัสวชิ า ง30241 ชื่อวชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

แนวคาตอบ ใบงานท่ี 2 8

เรอ่ื ง การสร้างแบนเนอรแ์ ละปมุ่ เมนู

ใช้เวลา.........40..........นาที คะแนนเต็ม..........9............คะแนน

ใหน้ กั เรียนสร้าง แบนเนอร์ และปุ่มเมนตู ามขนาดและจานวนท่ีกาหนดให้

1. ใหน้ ักเรียนสร้างแบนเนอร์ ขนาดกวา้ ง 960 สูง 200 pixels ความละเอียด 72 pixels
โหมด RGB Color ช่ือและรปู ภาพแบนเนอร์ของตัวนักเรียนเอง แลว้ บนั ทกึ ไฟลเ์ ปน็ นามสกลุ
.JPG (ออกแบบสตี ามใจชอบ)

ตอบ

2. ให้นักเรยี นสร้างปุม่ เมนู ขนาดกวา้ ง 220 สูง 50 pixels ความละเอียด 72 pixels
โหมด RGB Color จานวน 4 ปุ่ม ดังน้ี (การออกแบบสีและรูปแบบตามทนี่ ักเรยี นชอบ)
1. ปมุ่ home
2. ป่มุ Asean
3. ปุม่ เศรษฐกจิ พอเพียง
4. ปุ่ม อาหาร

แนวคาตอบ

รหสั วชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เรอื่ ง “Web design and Development ”

9

(เนอ้ื หาและกจิ กรรมการเรียน)

หนว่ ยการเรียนท่ี 2

กิจกรรมท่ี 1.3 การสร้าง Web Photo Gallery เวลาเรียนจานวน 20 นาที

ในการใบงานท่ี 1.3 การสรา้ ง Web Photo Gallery การทาใบงานให้นกั เรียนศึกษาเนื้อหา
เอกสารประกอบการเรียนเล่มที่ 2 เรื่อง Banner และ Button สวย ดว้ ย Photoshop ศกึ ษาเนื้อหา
ในหัวข้อเร่อื ง การสร้าง Web Photo Gallery

ในส่วนของเน้ือหา เอกสารประกอบการเรียนเล่มท่ี 2 เร่อื ง Banner และ Button สวย ดว้ ย
Photoshop จะอธบิ ายและให้นักเรียนได้รู้จักและเข้าใจพรอ้ มกับวิธีการออกแบบรวมถึงการสรา้ งการ
สรา้ ง Web Photo Gallery แบบตา่ งๆ และเนือ้ หาอ่นื ๆ ท่ีเกย่ี วข้อง

จากการศึกษาเอกสารประกอบการเรยี นเลม่ ที่ 2 เร่ือง Banner และ Button สวย ดว้ ย
Photoshop ระหว่างการศกึ ษาแตล่ ะกจิ กรรมนักเรยี นทุกคนปรึกษาและแสดงความคิดเห็นเกย่ี วกับ
ประเภทของเว็บไซต์และรว่ มกันสรปุ หลงั จาการทากจิ กรรม

รหสั วชิ า ง30241 ชื่อวิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

แนวคาตอบ ใบงานท่ี 3 10

เรอื่ ง การสร้าง Web Photo Gallery

ใช้เวลา..........20.........นาที คะแนนเต็ม.........10.............คะแนน

ให้นักเรยี นสรา้ ง web photo Gallery พร้อมทง้ั อธบิ ายขั้นตอน

ให้นกั เรยี นสรา้ ง web photo Gallery หัวขอ้ “อาเซียน” โดยจะต้องมรี ูปภาพไมต่ ่ากว่า
10 ภาพ รปู แบบ Gallery แลว้ แตค่ วามชอบ สรา้ งด้วยโปรแกรม Photoshop พร้อมอธิบาย
ข้ันตอนการสร้าง

ตอบ

รหสั วชิ า ง30241 ช่ือวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

11

แนวคาตอบ ใบงานท่ี 3

เรอื่ ง การสร้าง Web Photo Gallery

ใชเ้ วลา..........20.........นาที คะแนนเต็ม.........10.............คะแนน

ให้นักเรียนสรา้ ง web photo Gallery พร้อมทงั้ อธิบายขัน้ ตอน

ให้นกั เรยี นสร้าง web photo Gallery หวั ขอ้ “อาเซียน” โดยจะต้องมรี ปู ภาพไม่ต่ากว่า
10 ภาพ รูปแบบ Gallery แลว้ แต่ความชอบ สร้างดว้ ยโปรแกรม Photoshop พรอ้ มอธิบาย
ขนั้ ตอนการสรา้ ง

ตอบ
1. เก็บภาพทีต่ ้องการทา Web Photo Gallery ไวใ้ นโฟลเ์ ดอร์เดยี วกัน
2. เข้าโปรแกรม Photoshop เวอร์ช่ัน 7- Photoshop CS3 เวอร์ช้ันสูงกว่าน้ี ของ

Photoshop ส่วนนี้ถูกตัดออกไปแล้ว เลือกคาส่ัง File เลือก Automate เลือก Web
Photo Gallery…
3. เลอื กลกั ษณะของเวบ็ เพจที่จะสร้างในช่อง Style
4. กดป่มุ ok

รหสั วชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”

12

คำชีแ้ จงสำหรบั ครู

เอกสารประกอบการเรียน เร่ือง “Web design and Development” เลม่ ที่ 2
Banner และ Button สวยด้วย Photoshop เลม่ นใ้ี ชป้ ระกอบการจดั กจิ กรรมการเรียนการสอน
ในรายวชิ าเพ่ิมเตมิ รหสั วิชา ง30241 ชอ่ื วชิ า Web design and Development นกั เรยี น
ชั้นมธั ยมศึกษาปที ี่ 4 โรงเรียนบรรพตพสิ ยั พทิ ยาคม โดยมีวิธี และ มีข้นั ตอนในการจัดกิจกรรม
การเรยี นการสอน ดงั น้ี

1. แจกเอกสารประกอบการเรยี นเรือ่ ง การสรา้ งเว็บไซต์ เลม่ ท่ี 2 Banner และ Button
สวยด้วย Photoshop ให้แก่นักเรียน

2. ช้แี จงการใชเ้ อกสารประกอบการเรยี นใหแ้ ก่นักเรยี นทราบก่อนลงมือปฏบิ ตั ิ
3. ครใู ห้นักเรยี นทาแบบทดสอบกอ่ นเรียน เพ่อื วัดความรู้พน้ื ฐานของนักเรียน
4. ครใู ห้นักเรียนศึกษาเอกสารประกอบการเรยี น เลม่ ที่ 2 Banner และ Button สวยด้วย
Photoshop ปฏบิ ตั ติ ามใบความรู้ ใบงาน และแบบฝึกหดั ตามลาดับ
5. ครูให้นักเรียนทาแบบทดสอบหลังเรียน เพ่อื ประเมินผลว่านกั เรยี นมคี วามรู้ความเข้าใจ
มากข้ึนเพยี งใด
6. ครูสังเกตพฤติกรรมคุณลักษณะท่ีพงึ ประสงค์ และบันทึกผล
7. ครตู รวจและบันทึกผลการทางานของนกั เรียนลงในแบบเก็บคะแนน
8. ครูแจง้ คะแนนใหน้ ักเรียนทราบ ให้คาแนะนาเพ่ิมเตมิ และรับฟังข้อเสนอแนะจาก
นักเรยี น
9. คะแนนจากการทาแบบฝึกหดั และใบงานสามารถนาไปประเมินเพ่ือเปน็ คะแนนวดั ผล

ระหว่างเรยี น (E1) คะแนนสอบหลงั เรียนทฤษฎี และปฏบิ ัติ (E2)

รหัสวชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เร่ือง “Web design and Development ”

13

คำชีแ้ จงสำหรบั นกั เรียน

เอกสารประกอบการเรียน เร่ือง “Web design and Development” เล่มที่ 2
Banner และ Button สวยด้วย Photoshop เลม่ นใ้ี ช้ประกอบการจัดกิจกรรมการเรียนการสอน ใน
รายวิชาเพิม่ เตมิ รหัสวชิ า ง30241
ชอื่ วิชา Web design and Development นักเรยี นชน้ั มัธยมศึกษาปีท่ี 4 โรงเรยี นบรรพตพสิ ัยพทิ ยาคม
ใหน้ กั เรียนเรยี นรดู้ ้วยตนเอง มีกิจกรรมใหน้ กั เรยี นปฏิบตั ิ มีคาอธบิ ายตามขนั้ ตอน ดงั น้ี

1. อ่านและทาความเข้าใจคาชแ้ี จงในการใชเ้ อกสารประกอบการเรียน
2. ศกึ ษาผลการเรยี นรแู้ ละจุดประสงค์ เพ่ือให้ทราบวา่ เมื่อจบบทเรียนแลว้ นักเรียน
สามารถเรยี นรอู้ ะไรบ้าง
3. ทาแบบทดสอบก่อนเรียน แล้วตรวจคาตอบที่เฉลยไว้ เพอื่ ให้ร้วู า่ นกั เรียนมีความรู้
พ้นื ฐานเกยี่ วกบั เรื่องท่ีศกึ ษามามากน้อยเพยี งใด
4. ศึกษาเอกสารประกอบการเรียน เล่มที่ 2 Banner และ Button สวยด้วย
Photoshop ปฏบิ ตั ติ ามใบความรู้ ใบงาน และแบบฝึกหดั ต้ังแตห่ นา้ แรกจนถึงหนา้ สดุ ท้าย
5. สง่ ผลการทากิจกรรมการเรียนรู้เพอ่ื ให้ครูตรวจและบนั ทึกผล
6. เมื่อทาแบบฝึกหดั เรียบร้อยแล้ว ใหเ้ ก็บอุปกรณ์ใหอ้ ยู่ในสภาพเรียบร้อย
7. เมือ่ นักเรยี นปฏิบัตกิ ิจกรรมการเรียนรูค้ รบทกุ ใบความรแู้ ลว้ ใหน้ กั เรียนทาแบบทดสอบ
หลงั เรยี นเพอื่ ประเมนิ ผลการเรียนรู้
8. นักเรียนรับฟังผลการทาแบบทดสอบ และข้อเสนอแนะจากครู
9. ถา้ นักเรียนและผ้สู นใจตอ้ งการเนือ้ หาเพ่ิมเตมิ จากเอกสารประกอบการสอนสามารถ
ค้นคว้าได้จากเอกสารอ้างอิงในบรรณานกุ รม

รหสั วชิ า ง30241 ช่อื วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เร่ือง “Web design and Development ”

แบบทดสอบกอ่ นเรียน เรอ่ื ง Banner และ Button สวยดว้ ย Photoshop(ทฤษฎ)ี 14

คาช้ีแจง แบบทดสอบฉบับนีเ้ ป็นแบบปรนัยเลือกตอบ 4 ตัวเลอื ก จานวน 10 ข้อ
ข้อละ 1 คะแนน รวม 10 คะแนน(ข้อสอบคู่ขนาน)

คาสง่ั ให้นักเรียนเลอื กคาตอบที่ถกู ต้องทสี่ ดุ แล้วทาเครอื่ งหมายกากบาท (X) ลงในกระดาษคาตอบ

จุดประสงค์การเรียนรู้ ข้อท่ี 1 นักเรียนสามารถบอกความหมายประเภทของกราฟิกได้
1. ข้อใดเปน็ ไฟลท์ ี่มีคุณสมบตั ิการเคลื่อนไหว (Animation)

ก. .PNG
ข. .GIF
ค. .JPG
ง. .BMP

2. แฟ้มภาพนามสกุลใดทีเ่ หมาะกบั งานด้านเวบ็ เพจ
ก. .gif ข. .jpg
ค. .Tiff ง. ถูกทง้ั ข้อ ก และ ข

3. ข้อใดไมใ่ ช่ข้อควรคานึงในการเขียนเว็บเพจ
ก. การใช้ชนดิ ของบราวเซอรท์ ่ีแตกตา่ งกนั
ข. .หนว่ ยวดั มารตรฐานของภาพบนเว็บ
ค. ความเรว็ ของเครื่องพซี ี
ง. ความละเอยี ดของภาพ

จดุ ประสงคก์ ารเรยี นรู้ ข้อท่ี 2 นักเรยี นสามารถสร้าง Banner ไดอ้ ยา่ งตั้งใจ
4.โปรแกรม Phototshop ไม่สามารถสรา้ งไฟลใ์ ดได้

ก. . gif
ข. . bmp
ค. . tif
ง. . swf
5. การแทรกองค์ประกอบของไฟลม์ ัลติมีเดียรปู แบบต่างๆ บนเว็บ สามารถเรียกใช้งานไดจ้ ากกลุ่มใด
ก. From
ข. Common
ค. Layout
ง. Script

รหสั วชิ า ง30241 ชื่อวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรอ่ื ง “Web design and Development ”

6. ข้อใดเป็นลกั ษณะความสาคญั ของการออกแบบท่ีดี 15

ก. จดั ระเบียบสาระให้มคี วามกระชบั

ข. ช่วยพัฒนาระบบส่ือสารให้มีประสทิ ธภิ าพ

ค. เปน็ งานสรา้ งสรรค์ทางสงั คม

ง. ถกู ทกุ ขอ้

จุดประสงค์การเรยี นรู้ ขอ้ ท่ี 3 นักเรียนสามารถสรา้ ง ปุม่ Menu ได้
7. ฟอรแ์ มท .PDS มลี กั ษณะอย่างไร

ก. บันทกึ คา่ สเี ปน็ โหมด CMYK แยกตา่ งหากกัน
ข. เกบ็ คุณลักษณะเกี่ยวกบั เลเยอร์ เอฟเฟ็กต์ เอาไว้
ค. มีการบีบอัด ทาให้ภาพมีขนาดเลก็
ง. สามารถนาไปใช้งานขา้ มโปรแกรมได้

8. นามสกุลท่นี ยิ มใช้ในการบันทกึ งานจากโปรแกรม Adobe Photoshop คอื อะไรเพื่อตกแต่ง
เว็บไซตค์ ือ

ก. Rpg , Rf

ข. Jpg , Rpg

ค. Abc , Gif

ง. Jpg , Gif

จดุ ประสงค์การเรียนรู้ ขอ้ ที่ 4 นกั เรยี นสามารถสรา้ งและอธบิ ายขัน้ ตอนการสร้าง Web Photo Gallery
9. การเลือกปุ่ม Web Photo Gallery ใดเพ่ือระบโุ ฟลเดอรท์ จ่ี ดั เก็บไฟล์รปู ภาพผลลัพธ์

ก. Make New Folder
ข. Browse
ค. Destination
ง. Folders

10. รปู แบบ เวบ็ Web Photo Gallery จากโปรแกรม Photoshop เลอื กทีเ่ มนูใด

ก. Styles
ข. Destination
ค. Edit
ง. Option

รหสั วชิ า ง30241 ชือ่ วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เรอ่ื ง “Web design and Development ”

กระดาษคาตอบแบบทดสอบกอ่ นเรียน เล่มท่ี 2 16

เร่ือง Banner และ Button สวยดว้ ย Photoshop

ชื่อ-นามสกุล................................................................................ช้ัน/หอ้ ง................เลขที.่ ...........

ข้อ ก ข ค ง
1
2
3
4
5
6
7
8
9
10

คะแนนสอบกอ่ นเรียนเต็ม 10 คะแนน คะแนนทไ่ี ด้ คือ ..................คะแนน

รหสั วชิ า ง30241 ชื่อวชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”

17

แบบทดสอบกจิ กรรมกอ่ นเรียน เรอ่ื ง Banner และ Button สวยดว้ ย Photoshop (ปฎบิ ตั )ิ

คาช้ีแจง คะแนนรวม 10 คะแนน ........10.........นาที คะแนนเต็ม.........10.........

คะแนน1. ใหน้ กั เรยี นสร้าง web photo Gallery พร้อมทัง้ อธิบายขัน้ ตอน

คาสง่ั ใหน้ ักเรยี นออกแบบสร้างในเครื่องคอมพวิ เตอร์และตอบคาถาม ลงในกระดาษคาตอบ

ใหน้ กั เรียนสร้าง web photo Gallery หัวข้อ “อาเภอบรรพตพสิ ัย” โดยจะต้องมีรปู ภาพไม่ต่า
กว่า 10 ภาพ รูปแบบ Gallery แล้วแต่ความชอบ สรา้ งด้วยโปรแกรม Photoshop พร้อมอธิบาย
ขัน้ ตอนการสรา้ ง

ตอบ

รหัสวชิ า ง30241 ชอื่ วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เร่ือง “Web design and Development ”

แบบทดสอบกอ่ นเรียน เรอ่ื ง Banner และ Button สวยดว้ ย Photoshop(ทฤษฎ)ี 18

คาช้ีแจง แบบทดสอบฉบับนีเ้ ป็นแบบปรนัยเลือกตอบ 4 ตัวเลอื ก จานวน 10 ข้อ
ข้อละ 1 คะแนน รวม 10 คะแนน(ข้อสอบคู่ขนาน)

คาสง่ั ให้นักเรียนเลอื กคาตอบที่ถกู ต้องทสี่ ดุ แล้วทาเครอื่ งหมายกากบาท (X) ลงในกระดาษคาตอบ

จุดประสงค์การเรียนรู้ ข้อท่ี 1 นักเรียนสามารถบอกความหมายประเภทของกราฟิกได้
1. ข้อใดเปน็ ไฟลท์ ี่มีคุณสมบตั ิการเคลื่อนไหว (Animation)

ก. .PNG
ข. .GIF
ค. .JPG
ง. .BMP

2. แฟ้มภาพนามสกุลใดทีเ่ หมาะกบั งานด้านเวบ็ เพจ
ก. .gif ข. .jpg
ค. .Tiff ง. ถูกทง้ั ข้อ ก และ ข

3. ข้อใดไมใ่ ช่ข้อควรคานึงในการเขียนเว็บเพจ
ก. การใช้ชนดิ ของบราวเซอรท์ ่ีแตกตา่ งกนั
ข. .หนว่ ยวดั มารตรฐานของภาพบนเว็บ
ค. ความเรว็ ของเครื่องพซี ี
ง. ความละเอยี ดของภาพ

จดุ ประสงคก์ ารเรยี นรู้ ข้อท่ี 2 นักเรยี นสามารถสร้าง Banner ไดอ้ ยา่ งตั้งใจ
4.โปรแกรม Phototshop ไม่สามารถสรา้ งไฟลใ์ ดได้

ก. . gif
ข. . bmp
ค. . tif
ง. . swf

5. การแทรกองค์ประกอบของไฟลม์ ัลติมีเดียรปู แบบต่างๆ บนเว็บ สามารถเรียกใช้งานไดจ้ ากกลุ่มใด
ก. From
ข. Common
ค. Layout
ง. Script

รหสั วชิ า ง30241 ชื่อวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรอ่ื ง “Web design and Development ”

6. ข้อใดเป็นลกั ษณะความสาคญั ของการออกแบบท่ีดี 19
ก. จดั ระเบียบสาระให้มคี วามกระชบั
ข. ช่วยพัฒนาระบบส่ือสารให้มีประสทิ ธภิ าพ
ค. เปน็ งานสรา้ งสรรค์ทางสงั คม
ง. ถกู ทกุ ขอ้

จุดประสงค์การเรยี นรู้ ขอ้ ท่ี 3 นักเรียนสามารถสรา้ ง ปุม่ Menu ได้
7. ฟอรแ์ มท .PDS มลี กั ษณะอย่างไร

ก. บันทกึ คา่ สเี ปน็ โหมด CMYK แยกตา่ งหากกัน
ข. เกบ็ คุณลักษณะเกี่ยวกบั เลเยอร์ เอฟเฟ็กต์ เอาไว้
ค. มีการบีบอัด ทาให้ภาพมีขนาดเลก็
ง. สามารถนาไปใช้งานขา้ มโปรแกรมได้

8. นามสกุลท่นี ยิ มใช้ในการบันทกึ งานจากโปรแกรม Adobe Photoshop คอื อะไรเพื่อตกแต่ง
เว็บไซตค์ ือ

ก. Rpg , Rf

ข. Jpg , Rpg

ค. Abc , Gif

ง. Jpg , Gif

จดุ ประสงค์การเรียนรู้ ขอ้ ที่ 4 นกั เรยี นสามารถสรา้ งและอธบิ ายขัน้ ตอนการสร้าง Web Photo Gallery
9. การเลือกปุ่ม Web Photo Gallery ใดเพ่ือระบโุ ฟลเดอรท์ จ่ี ดั เก็บไฟล์รปู ภาพผลลัพธ์

ก. Make New Folder
ข. Browse
ค. Destination
ง. Folders

10. รปู แบบ เวบ็ Web Photo Gallery จากโปรแกรม Photoshop เลอื กทีเ่ มนูใด

ก. Styles
ข. Destination
ค. Edit
ง. Option

รหสั วชิ า ง30241 ชือ่ วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เรอ่ื ง “Web design and Development ”

20

กระดาษคาตอบแบบทดสอบกอ่ นเรียน เล่มที่ 2

เร่ือง Banner และ Button สวยดว้ ย Photoshop

ชื่อ-นามสกุล................................................................................ช้ัน/หอ้ ง................เลขที.่ ...........

ข้อ ก ข ค ง
1
2
3
4
5
6
7
8
9
10

คะแนนสอบกอ่ นเรียนเต็ม 10 คะแนน คะแนนทไ่ี ด้ คือ ..................คะแนน

รหสั วชิ า ง30241 ชื่อวชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรอื่ ง “Web design and Development ”

21

แบบทดสอบกิจกรรมก่อนเรียน เรอื่ ง Banner และ Button สวยดว้ ย Photoshop (ปฎบิ ัต)ิ

คาช้ีแจง คะแนนรวม 10 คะแนน ........10.........นาที คะแนนเต็ม.........10.........

คะแนน1. ให้นักเรยี นสรา้ ง web photo Gallery พร้อมท้งั อธิบายขนั้ ตอน

คาสง่ั ใหน้ กั เรียนออกแบบสรา้ งในเครื่องคอมพวิ เตอร์และตอบคาถาม ลงในกระดาษคาตอบ

ใหน้ กั เรยี นสร้าง web photo Gallery หวั ขอ้ “อาเภอบรรพตพิสัย” โดยจะตอ้ งมรี ปู ภาพไม่ตา่
กว่า 10 ภาพ รปู แบบ Gallery แลว้ แต่ความชอบ สรา้ งดว้ ยโปรแกรม Photoshop พร้อมอธิบาย
ขั้นตอนการสร้าง

แนวคาตอบ
1. เก็บภาพท่ตี ้องการทา Web Photo Gallery ไวใ้ นโฟล์เดอร์เดียวกนั
2. เข้าโปรแกรม Photoshop เวอร์ช่ัน 7- Photoshop CS3 เวอร์ช้ันสูงกว่าน้ี ของ

Photoshop ส่วนนี้ถูกตัดออกไปแล้ว เลือกคาส่ัง File เลือก Automate เลือก Web
Photo Gallery…
3. เลอื กลกั ษณะของเวบ็ เพจท่ีจะสร้างในช่อง Style
4. กดปุม่ ok

รหัสวชิ า ง30241 ชื่อวิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

22

Banner และ Button สวยดว้ ย Photoshop

สาระสาคัญ

ในหนว่ ยน้ีเราจะเริ่มลงมือปฏิบตั สิ รา้ งและออกแบบสว่ นประกอบของเวบ็ ไซต์ เวบ็ ไซต์ที่ดึงดูด
ความสนใจนน้ั ของผ้เู ข้าชมน้ันเร่มิ ต้นด้วยความสวยสะดจุ ตา โหลดเร็ว มีความต่ืนตาตืน่ ใจ เราจึงต้อง
ออกแบบให้เว็บไซต์นน้ั มสี สี นั ด้วยความรู้ดา้ นความหมายของประเภทของภาพ เพือ่ ประโยช์ตอ่ การนาไป
สร้างเวบ็ ไซต์ ออกแบบ Banner, Menu, รวมไปถึงการสรา้ ง Web Photo Gallery ทรี่ วบรวมประมวล
ภาพให้ผ้เู ข้าชมได้เก็บรายละเอียดจากรปู ภาพ

ผลการเรยี นรู้
มคี วามรู้ความเข้าใจและสามารถใชโ้ ปรแกรม Photoshop ในการออกแบบหนา้ เว็บไซต์ได้

อย่างสรา้ งสรรค์ สามารถประยกุ ตใ์ ช้ Photoshop ในการออกแบบ สรา้ ง แบนเนอร์ ป่มุ เมนู และ Web
Photo Gallery ในการตกแต่งเวบ็ เพจได้

จดุ ประสงคก์ ารเรยี นรู้
หลังจากศึกษาเนื้อหาและกจิ กรรมในหน่วยการเรยี นรนู้ ีแ้ ล้วผู้เรยี นสามารถทาสงิ่ ต่อไปน้ีได้
1. นกั เรยี นสามารถบอกความหมายประเภทของกราฟิกได้
2. นักเรียนสามารถสรา้ ง Banner ไดอ้ ยา่ งต้ังใจ
3. นักเรยี นสามารถสรา้ งและอธิบายขนั้ ตอนการสรา้ ง Web Photo Gallery

รหัสวชิ า ง30241 ชือ่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”

23

หน่วยการเรียนรทู้ ี่ 2 Banner และ Buttonสวยดว้ ย Photoshop สาระการเรียนรทู้ ่ี 2.1 การสร้างแบนเนอร์

จดุ ประสงค์การเรยี นรู้ 1.นักเรยี นสามารถบอกความหมายประเภทขอเนงกอรรา์ ฟิกได้

การสรา้ ง Banner

รูปภาพหรือกราฟิกท่ีจะนามา ใช้งานในเว็บไซต์นั้น มีหลากหลายรูปแบบและหลายขนาด
จะมีทั้งภาพที่ถ่ายจากกล้องดิจิตอล จากโทรศัพท์มือถือหรืออุปกรณ์ถ่ายภาพอ่ืนๆ การนาภาพมาใช้
งานท่ัวไปหรือส่งออกไปใช้งานน้ันสามารถทาได้เลย แต่การนามาใช้งานกับเว็บไซต์น้ันจะต้องมีขนาด
ของภาพที่เลก็ (พกิ เซล) จะไดไ้ ม่เปลืองพื้นท่ีจัดเก็บและหน้าเว็บนน้ั จะไดไ้ ม่โหลดชา้

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

ประเภทของกราฟกิ

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

ไฟลป์ ระเภท .JPG

ไฟล์ภาพประเภท .JPG (Joint Photographer’s Experts Group) คือ รูปภาพท่ัวไป ส่วน
ใหญ่จะได้จากภาพท่ีถ่ายมาจากกล้องดิจิตอล กล้องมือถือ หรืออุปกรณ์แท็บเล็ตต่างๆ ขนาดความ
ละเอยี ดและความคมชัดของไฟล์ ก็จะข้ึนอยู่กบั ความสามารถของอุปกรณ์ทบ่ี ันทึกภาพ แตป่ ัจจุบันจะ
มีขนาดใหญ่และความละเอียดสูงมาก การนามาใช้ในเว็บเพจเราจะต้องนามาลดขนาด หรือปรับ
สัดส่วนให้เหมาะสมเพราะถ้านามาวางจากต้นฉบับ การแสดงผลจะช้าไฟล์เว็บเพจมีขนาดใหญ่ ก็ต้อง
อาศัยโปรแกรมตัดภาพลดขนาดไฟล์ หรือตัดต่อภาพได้

รหัสวชิ า ง30241 ช่ือวชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรอ่ื ง “Web design and Development ”

24

ไฟลป์ ระเภท .PNG

ไฟล์ภาพประเภท .PNG (Portable Network Graphics) สามารถแสดงผลได้ในระบบสีเต็ม
พิกัด (True Color) มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามท่ีต้องการ จะเป็นได้ท้ังภาพถ่ายหรือ
ภาพกราฟิกที่วาดขึ้น กาหนดให้พื้นท่ีภาพโปร่งใสได้ (Transparent) เหมือนไฟล์ .GIF นิยมนามาใช้
สาหรบั ภาพในอนิ เทอรเ์ นต็

ไฟล์ประเภท .GIF

ไฟล์ภาพประเภท .GIF (Graphics Interlace File) น้ันส่วนใหญ่จะเป็นไฟล์ภาพกราฟิกท่ี
สร้างหรือวาดขึ้นมาใหม่นิยมนามาทาปุ่มกด, แถบเมนู, ป้ายแบนเนอร์ หรือป้ายโฆษณา และทาเป็น
ภาพเคลื่อนไหว (Animation) เพื่อสลับการแสดงผลภาพหรือข้อความให้สวยงาม ไฟล์ก็มีขนาดเล็ก
แสดงผลไดร้ วดเร็ว เพราะความละเอียดทต่ี า่ จะแสดงได้แค่ 256 สีเท่านน้ั และกาหนดความโปร่งใสใน
ภาพได้ (Transparent)

ในปัจจุบันภาพประเภท .GIF มักนามาทา Banner Ads หรือป้ายโฆษณาแบบเคลื่อนไหว ด้วยการ
แสดงภาพหรือข้อความต่อเนื่องสลับกัน ทาให้ดูเป็นภาพเคลื่อนไหวเบื้องต้นท่ีไม่ซับซ้อนมาก และ
ขนาดของไฟล์ก็เลก็ น้อย

ไฟลป์ ระเภทมูว่ี .SWF

เป็นไฟล์แอนิเมช่ัน (Animation) ท่ีสร้างด้วยโปรแกรม Flash สร้างเป็นหน้าเปิดเว็บไซต์
สวยๆ หรือใช้เปิดไฟล์วิดีโอ เปิดเพลงผ่านเว็บไซต์ รวมถึงการทาอัลบั้มภาพผ่านเว็บไซต์ มูวี่แฟลชก็
ได้รับความนิยมมากในการทาเว็บไซต์ที่ผ่านมา เพราะทาให้เว็บไซต์มีชีวิตชีวาแต่สาหรับการทาเว็บ
แบบ Responsive Web บทบาทการนาไฟล์แบบนไ้ี ม่รองรบั การแสดงผลทุกอุปกรณ์

รหัสวชิ า ง30241 ชอื่ วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรื่อง “Web design and Development ”

25

รู้จักกบั โปรแกรมออกแบบภาพกราฟิก

โปรแกรม Adobe Photoshop CS6 จัดเป็นโปรแกรมสาหรบั ตกแตง่ ภาพกราฟกิ ทไ่ี ด้รับความ
นิยมเป็นอย่างมาก ปัจจบุ ันได้พัฒนาคณุ สมบัตขิ องโปรแกรมไวอ้ ย่างหลากหลายมีการจัดเตรียม เคร่ืองมือและ
เทคนิคพิเศษตา่ ง ๆ ให้เลือกใชง้ านได้ตามต้องการและตามความถนดั รูปแบบการใช้งานเครอื่ งมือทาไดง้ ่าย

โปรแกรมและส่วนประกอบหน้าจอโปรแกรม Adobe Photoshop CS6
การเข้าสู่โปรแกรม Photoshop

1. คลิกปุม่ Start

2. เลือก All Programs

3. คลิกเลอื กโฟลเดอร์ Adobe Master Collection CS6

4. คลิกเลอื กรายการ Adobe Photoshop CS6

รหสั วชิ า ง30241 ช่อื วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

26

โปรแกรม Adobe Photoshop CS6 จะมีท้ัง 36 bit และ 64 bit คือ Adobe Photoshop CS6
จะเปน็ 32 bit สว่ น Adobe Photoshop CS6 (64 bit) จะเป็น 64 bit ในการเลือกใช้ถา้ เคร่ืองคอมพวิ เตอร์
ของเราเปน็ เครอ่ื งแบบ 32 bit ให้ใช้ Adobe Photoshop CS6 และถา้ เครอ่ื ง 64 bit ให้ใช้ Adobe
Photoshop CS6 (64 bit)

การปิดโปรแกรม Adobe Photoshop CS 6 มดี งั น้ี

การปดิ โปรแกรม Adobe Photoshop CS 6 โดยเรยี กจากแถบเมนู
1. คลกิ ทเ่ี มนู File
2. เลือก Exit

1

2

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

27

การปิดโปรแกรม Adobe Photoshop CS 6 โดยปิดจากปุ่มควบคมุ

1. ท่ีหน้าจอโปรแกรม Adobe Photoshop CS 6

2. คลิกท่ี เป็นการปดิ โปรแกรม

รหัสวชิ า ง30241 ช่อื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เรื่อง “Web design and Development ”

ส่วนประกอบต่าง ๆ บนหน้าจอโปรแกรม 28

เม่อื เราเรม่ิ ตน้ ใช้งานโปรแกรม Adobe Photoshop CS6 หน้าจอแรกท่ีพบ
จะประกอบด้วยสว่ นประกอบตา่ ง ๆ ดังต่อไปนี้

1

2

3

45

o Menu Bar (แถบเมนูคาส่ัง) เป็นแถบแสดงรายการเมนูคาสั่ง
โดยจะแยกตามหมวดหมูก่ ารใชง้ าน

o Option Bar (แถบกาหนดรูปแบบของเคร่ืองมือ) เปน็ สว่ นทีเ่ ก็บรวบรวมรายละเอยี ดของ
เคร่อื งมอื ท่ีใช้อยูข่ ณะน้ัน

o Toolbox (กล่องเครื่องมือ) เปน็ แถบเครื่องมือทเ่ี ก็บรวบรวมเคร่ืองมอื ตา่ ง ๆ โดยจะถูก
จดั แยกเป็นหมวดหมู่ตามลกั ษณะการใชง้ าน

o Document window (พืน้ ท่ีการทางาน) เป็นบริเวณที่เราใชแ้ สดงภาพ
และตกแต่งภาพ

o Panel (พาเนล) เปน็ ส่วนควบคุมรายละเอียดปลกี ย่อยในการทางาน เชน่ การทางานของสี
การทางานของ Layer เปน็ ต้น

รหสั วชิ า ง30241 ช่อื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เร่ือง “Web design and Development ”

แถบเมนคู าสัง่ (Menu Bar) 29

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

แถบเมนคู าสง่ั ประกอบไปด้วยท้ังหมด 10 เมนูคาสัง่ โดยแสดงช่ือเมนคู าสง่ั และรูปแบบการทางาน

ดังแสดงในตาราง

เมนคู าสัง่ รปู แบบการทางาน

File สาหรับจดั การกบั ไฟลภ์ าพในลักษณะตา่ ง ๆ เชน่ สร้างไฟล์งานใหม่ เปิดไฟลภ์ าพ บนั ทกึ
ไฟลง์ าน นาเขา้ หรือสง่ ออกไฟลเ์ พอื่ ทางานในลกั ษณะอน่ื ๆ

Edit สาหรบั แก้ไขภาพ เชน่ ตัด คดั ลอก วาง รวมถึงปรบั แตง่ คา่ เบื้องต้นของโปรแกรม

Image สาหรับจัดการภาพ เช่น แก้ไขความสว่างหรอื สขี องภาพให้สมดลุ ยง่ิ ขน้ึ รวมถงึ ใช้สาหรับ
ยอ่ ขยายขนาดภาพ และกาหนดขนาดพนื้ ที่การทางานของภาพ

Layer สาหรับจัดการเก่ียวกบั เลเยอร์ เชน่ การสรา้ งเลเยอร์ใหม่ การรวมเลเยอร์
การแปลงเลเยอร์ การจัดการกับเลเยอรข์ องไฟลล์ ักษณะตา่ ง ๆ รวมถึงการจัดการ
รายละเอยี ดของภาพในเลเยอร์นนั้ ๆ

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

Select สาหรับปรับแตง่ การเลือกพ้ืนที่ บนั ทกึ และเรยี กพน้ื ทที่ ี่เลือกมาใช้งาน รวมถึงคาสง่ั
สาหรบั การเลอื กพืน้ ที่เพื่อให้ได้ผลลัพธ์ทด่ี ียง่ิ ข้นึ

Filter สาหรบั ปรับแต่งภาพให้มรี ูปแบบที่น่าสนใจย่ิงข้นึ บิด ดดั ปรับรปู ทรงรปู แบบต่าง ๆ
ใหก้ บั ภาพ

View สาหรบั เลือกรูปแบบการแสดงผล เช่น ย่อขยายภาพ แสดงไม้บรรทัด เสน้ กริด หรือเสน้ ไกด์

Window สาหรับเลอื กเปดิ ปิดพาเนล รวมถึงกาหนดรูปแบบการแสดงหนา้ ต่าง
Help ในแบบตา่ ง ๆ

ใชส้ าหรบั แสดงความชว่ ยเหลอื เกยี่ วกับการใชเ้ คร่ืองมือหรอื คาส่ัง
ในรปู แบบตา่ ง ๆ

รหัสวชิ า ง30241 ช่ือวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรียน เรอื่ ง “Web design and Development ”

แถบตวั เลอื ก (Options Bar) 30

เป็นส่วนทีใ่ ชใ้ นการปรับแต่งค่าการทางานของเครอ่ื งมอื ต่าง ๆ การกาหนดค่าในแถบ

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

กล่องเคร่อื งมอื (Toolbox)

เปน็ สว่ นที่ใชเ้ ก็บเครื่องมือพ้นื ฐานในการทางานในโปรแกรม สามารถเรียกใช้
ชดุ เครือ่ งมือย่อยโดยการคลิกรูปสามเหลยี่ มทม่ี ุมด้านล่าง ดังแสดงในภาพ

กลมุ่ คำสงั่ Selection เพอื่ เลอื กพนื ้ ที่สว่ นตำ่ งๆ
ของภำพ

กลมุ่ คำสง่ั Edit สำหรับปรับแตง่ ระบำยสี กำรลบ
บำงสว่ นของภำพ

กลมุ่ คำสง่ั เกีย่ วกบั กำรสร้ำงตวั อกั ษร วำดภำพ
คำสงั่ View ยอ่ ขยำยภำพบนหน้ำจอ
คำสงั่ เลอื กสี Foreground หรือ Background
คำสงั่ Quick mark , คำสงั่ เก่ียวกบั หน้ำจอ

เคร่อื งมอื พนื้ ฐานบนกล่องเคร่ืองมือของโปรแกรม Adobe Photoshop CS6
ได้แบง่ การทางานออกเปน็ หมวดหมู่หรือเป็นกลุม่ ย่อย ๆ ดังแสดงในตาราง

รหัสวชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”

31

กลุม่ คาส่งั ตา่ งในกลอ่ งเคร่อื งมือ (Toolbox)

กลุ่มคาส่ัง Selection เพื่อเลือกพื้นท่ีส่วนตา่ ง ๆ ของภาพ

ภาพ ชื่อเคร่ืองมือ ความหมาย

Move Tool ใช้เคล่ือนยา้ ยภาพบรเิ วณท่เี ลือกพน้ื ทห่ี รือไม่ได้
เลือกพ้นื ท่ไี ปยังตาแหนง่ ใหม่

1. Rectangular Marquee 1. เลอื กพ้ืนทแี่ บบรูปทรงส่เี หลย่ี ม
Tool 2. เลือกพนื้ ที่แบบรปู ทรงวงกลม วงรี
2. Elliptical Marquee Tool 3. เลอื กพนื้ ที่แบบเสน้ ตรงแนวนอน
3. Single Row Marquee 4. เลอื กพื้นทแ่ี บบเส้นตรงแนวตั้ง
Tool
4. Single Column 1. เลือกพน้ื ทีแ่ บบอิสระ
Marquee Tool 2. เลอื กพื้นทแี่ บบมุมเหลย่ี ม
3. เลือกพน้ื ที่แบบชิดเส้นขอบภาพ
1. Lasso Tool
2. Polygonal Lasso Tool
3. Magnetic Lasso Tool

1. Quick Selection Tool 1. เลือกพื้นที่ตามพื้นท่ีทลี่ ากเมาสผ์ า่ น

2. Magic Wand Tool 2. เลือกพนื้ ท่โี ดยยดึ ตามสที ี่มีคา่ ใกล้เคียงกัน

รหัสวชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เรื่อง “Web design and Development ”

32

ภาพ ช่ือเครอ่ื งมอื ความหมาย

1. Crop Tool 1. ใช้ตัดภาพโดยเลือกเฉพาะบริเวณท่ตี อ้ งการใช้

2. Perspective Crop Tool งาน

3. Slice Tool 2. ใชต้ ัดภาพที่มมี ุมบิดเบยี้ วให้กลายเปน็ มุมที่

4. Slice Select Tool ถกู ต้อง

3. ใช้ตัดภาพออกเป็นชนิ้ เล็ก ๆ เพอื่ นาไป ใช้

ออกแบบบนเว็บเพจ

4. ใชป้ รับแต่งขนาดของภาพทต่ี ัดออกเป็นชน้ิ เลก็

ๆ จากเคร่ืองมือ Slice Tool

1. Eyedropper Tool 1. ใช้เลอื กสีจากภาพไปใชง้ าน

2. Color Sampler Tool 2. ใช้ดูดสไี วส้ าหรบั เปรียบเทยี บค่า

3. Ruler Tool 3. ใชว้ ัดระยะห่างและกาหนดตาแหน่ง

4. Note Tool 4. ใช้เพ่ิมคาอธบิ ายใหก้ ับภาพ

กล่มุ คาสง่ั Edit สาหรบั ปรบั แต่ง ระบายสี การลบบางส่วนของภาพ

ภาพ ชือ่ เครื่องมือ ความหมาย

1. Spot Healing Brush 1. ใช้แก้ไขจดุ บกพร่องขนาดเล็กบนภาพ
Tool 2. ใชแ้ ก้ไขจดุ บกพร่องขนาดใหญ่บนภาพ
2. Healing Brush Tool 3. ใชแ้ ก้ไขพน้ื ผวิ ของภาพขนาดใหญ่
3. Patch Tool โดยการนาพืน้ ผวิ อน่ื มาแปะทับ
4. Content-Aware Move 4. ใช้ย้ายวตั ถุในภาพไปยงั ตาแหน่งใหม่ โดย
Tool เครอ่ื งมอื จะเติมสีพ้นื หลงั ใหด้ ้วย
5. ใช้แกไ้ ขภาพถ่ายตาแดง

รหัสวชิ า ง30241 ชื่อวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”

33

ภาพ ชอื่ เครือ่ งมือ ความหมาย

1. Clone Stamp Tool 1. ใชค้ ัดลอกวตั ถจุ ากจุดหนงึ่ ไปแปะทับ

2. Pattern Stamp Tool อกี จุดหน่ึง

2. ใช้ตกแต่งภาพพื้นผิวทคี่ ลกิ แทนท่ีลงไปบนภาพ

1. Eraser Tool 1. ใช้ลบพน้ื ท่ีท่ไี มต่ อ้ งการและแทนท่ีดว้ ยสีพืน้

2. Background Eraser Tool หลงั

3. Magic Eraser Tool 2. ใช้ลบภาพพน้ื หลังออกดว้ ยการคลกิ เลือกสีทจ่ี ะ

ลบและจะได้พน้ื หลงั แบบโปรง่ ใส

3. ใช้ลบสพี ื้นหลังภาพอยา่ งรวดเร็วและจะได้พ้ืน

หลังแบบโปรง่ ใส

1. Blur Tool 1. ใช้ระบายภาพใหเ้ บลอในจุดท่ีลากเมาส์

2. Sharpen Tool 2. ใชป้ รับเพ่มิ ความคมชดั ให้ภาพ

3. Smudge Tool 3. ใช้เกลีย่ สีใหก้ ลมกลืนในจดุ ท่ลี ากเมาส์

1. Dodge Tool 1. ใชเ้ พ่ิมความสวา่ งให้จดุ ทลี่ ากเมาสผ์ ่าน
2. Burn Tool 2. ใช้เพมิ่ ความมืดให้จุดที่ลากเมาสผ์ า่ น
3. Sponge Tool 3. ใช้ลดและเพมิ่ ความอ่ิมตัวของสี โดยการลาก
เมาสผ์ ่าน
1. Brush Tool
2. Pencil Tool 1. ใชส้ ร้างเสน้ หรอื ลวดลายให้กบั เสน้
3. Color Replacement 2. ใช้สรา้ งเส้นหรอื ลวดลาย แต่จะได้เส้นทีห่ ยาบ
Tool กว่า
4. Mixer Brush To 3. ใช้เปล่ียนสีภาพเปน็ สใี หม่
4. ใช้เกลย่ี สีของภาพใหก้ ลายเป็นภาพวาด

1. History Brush Tool 1. ใช้ยอ้ นกลบั การทางานคาส่ังทผี่ ิดพลาดเมื่อ
2. Art History Brush Tool ลากเมาสไ์ ปบนภาพ
2. ใชเ้ ปลยี่ นเปน็ ภาพวาดแบบง่าย ๆ เมอ่ื ลาก
1. Gradient Tool เมาส์ไปบนภาพ
2. Paint Bucket Tool
1. ใช้ลากเมาส์ไปบนภาพเพ่ือไล่เฉดสี
2. ใช้เพื่อเติมสหี รือลวดลายลงไปบนภาพ

รหสั วชิ า ง30241 ช่อื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรื่อง “Web design and Development ”
กล่มุ คาสง่ั เก่ยี วกับการสร้างตวั อกั ษร วาดภาพ
34

ภาพ ช่ือเคร่ืองมอื ความหมาย

1. Pen Tool 1. ใชส้ ร้างเส้นพาธรอบภาพโดยการลากเมาส์

2. Freeform Pen Tool กาหนดทิศทาง

3. Add Anchor Point Tool 2. ใชส้ รา้ งเสน้ พาธแบบอิสระเพอื่ ปรับแต่งใน

4. Delete Anchor Point ภายหลงั

Tool 3. ใช้เพ่มิ จดุ แองเคอรเ์ พื่อปรับแต่งรปู ทรงเสน้ พาธ

5. Convert Point Tool 4. ใชล้ บจุดแองเคอร์ที่มากเกินไป

5. ใชป้ รบั แต่งมมุ ของเสน้ พาธ

1. Horizontal Type Tool 1. ใช้สร้างขอ้ ความแบบเวคเตอรใ์ นแนวนอน

2. Vertical Type Tool 2. ใช้สร้างขอ้ ความแบบเวคเตอร์ในแนวตง้ั

3. Horizontal Type Mask 3. ใชส้ รา้ งข้อความแบบราสเตอรใ์ นแนวนอน

Tool 4. ใชส้ ร้างข้อความแบบราสเตอร์ในแนวต้ัง

4. Vertical Type Mask

Tool

1. Path Selection Tool 1. ใชย้ า้ ยตาแหนง่ หรอื ปรบั ขนาดเส้นพาธ

2. Direct Selection Tool 2. ใชค้ ลิกไปบนจุดแองเคอร์เพอ่ื ปรบั แต่งรูปทรง

เสน้ พาธ

1. Rectangle Tool 1. ใช้สรา้ งรูปทรงสีเ่ หลยี่ ม
2. Rounded Rectangle 2. ใช้สรา้ งรูปทรงสีเ่ หลีย่ มมุมโค้งมน
Tool 3. ใชส้ รา้ งรปู ทรงวงกลม วงรี
3. Ellipse Tool 4. ใช้สร้างรปู ทรงหลายเหลี่ยม รูปดาว
4. Polygon Tool 5. ใช้สร้างรูปทรงเสน้ ตรง
5. Line Tool 6. ใชส้ รา้ งรูปทรงสาเรจ็ รูป
6. Custom Shape Tool

รหสั วชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรอื่ ง “Web design and Development ”
คาส่ัง View ย่อ ขยายภาพบนหนา้ จอ
35

ภาพ ชอื่ เครอ่ื งมือ ความหมาย

1. Hand Tool 1. ใชเ้ ลอ่ื นดสู ว่ นตา่ ง ๆ ของภาพ
2. Rotate View Tool 2. ใช้หมนุ ภาพไปในทศิ ทางต่าง ๆ

Zoom Tool ใชข้ ยายดสู ่วนที่ต้องการของภาพ

คาสงั่ เลือกสี Foreground หรือ Background

ภาพ ชอื่ เคร่ืองมือ ความหมาย

Foreground/Background ใชก้ าหนดสพี ้นื หน้าและสพี นื้ หลงั

คาส่งั Quick mark , คาสงั่ เกยี่ วกับหน้าจอ

ภาพ ชื่อเครอ่ื งมอื ความหมาย

Edit in Standard Mode/ ใช้แสดงหรอื แกไ้ ขภาพในโหมดปกติและแสดงการ

Edit in Quick Mask Mode ทางานคล้ายการสรา้ งหนา้ กาก เพ่ือปิดบังพื้นที่

ส่วนทไ่ี ม่ตอ้ งการเลือกเอาไว้ โดยสามารถคลิก

เมาส์สลับโหมดไปมาได้

1. Standard Screen Mode 1. ใช้แสดงหนา้ จอแบบมาตรฐานปกติ

2. Full Screen Mode with 2. ใช้แสดงแบบเตม็ หน้าจอโดยไมม่ ีแถบชื่อเร่ือง

Menu Bar ของโปรแกรม

3. Full Screen Mode 3. ใช้แสดงแบบเต็มหนา้ จอโดยไม่มี

แถบชือ่ เร่ืองและแถบเมนคู าส่ัง

รหัสวชิ า ง30241 ชอื่ วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”
แถบช่ือเร่อื ง (Title Bar)
36
เป็นสว่ นท่ีแสดงชอ่ื ไฟลภ์ าพที่เปดิ ใชง้ านอยู่ สาหรับโปรแกรม Adobe Photoshop CS6

แถบช่ือเร่ืองจะเรยี งกันเป็นแทบ็ (Tab) ดงั แสดงในภาพ

แถบสถานะ (Status Bar)
เป็นส่วนทีแ่ สดงคุณสมบัติเกยี่ วกับภาพ เชน่ เปอรเ์ ซน็ ตใ์ นการยอ่ ขยายไฟล์ภาพ ขนาดไฟล์
ภาพ เป็นต้น ดังแสดงในภาพ

พืน้ ทใี่ ช้งาน (Working Area)
เปน็ ส่วนท่ใี ชใ้ นการสรา้ งงานกราฟกิ โดยการเปิดไฟลภ์ าพเพ่ือแก้ไขบนพืน้ ที่ใช้งาน หรอื วาด
ภาพใหม่ลงไปบนพ้นื ทีใ่ ช้งาน ดังแสดงในภาพ

รหสั วชิ า ง30241 ชื่อวชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เร่ือง “Web design and Development ”

พาเนล (Panel) 37
ใช้สาหรับจัดการกบั ภาพโดยแยกออกเป็นหมวดหมู่ เช่น พาเนลสาหรบั เลอื กสี พาเนลสาหรับ

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

หรือปดิ พาเนลไดจ้ ากเมนูคาสั่ง Window ตวั อย่างพาเนลที่นิยมใช้ มดี งั นี้

1. Navigator ใช้ปรับมมุ มองของภาพ โดยคลกิ เลอื กบรเิ วณ Zoom Slider
เพ่อื ย่อขยายมมุ มองภาพ ดงั แสดงในภาพ

2. Color ใชก้ าหนดสพี ื้นหน้า (Foreground) และสพี ื้นหลงั (Background) โดยการ
เลื่อนแถบสเี พอ่ื ปรับแต่งตามตอ้ งการ ดังแสดงในภาพ

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

รหสั วชิ า ง30241 ช่อื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เร่ือง “Web design and Development ”

4. Styles ใช้สาหรบั กาหนดการตกแตง่ รูปแบบตา่ ง ๆ ท่ีโปรแกรมกาหนดข้นึ มา เชน่ 38
การตกแต่งสีใหก้ บั รูปแบบข้อความ ดงั แสดงในภาพ

5. Adjustments ใช้ปรับแตง่ สใี หก้ บั ภาพ เพื่อแก้ไขข้อบกพร่อง
หรอื สที ผี่ ดิ เพย้ี น ดังแสดงในภาพ

6. Layers ใชค้ วบคมุ การใชง้ านเลเยอรต์ า่ ง ๆ ท่ีเกดิ จากการสรา้ งชน้ิ งาน
ดงั แสดงในภาพ

รหสั วชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

7. History ทาหน้าท่ใี นการเกบ็ รายละเอียดข้นั ตอนการทางานท้งั หมด 39
ทผี่ ่านมา เพ่ืออานวยความสะดวกเม่อื ต้องการย้อนกลับไปใชค้ าสง่ั เกา่ หรอื ย้อนดู
การทางานทผ่ี า่ นมาดังแสดงในภาพ

ดังน้ัน การเร่มิ ตน้ การใช้งานในโปรแกรม Adobe Photoshop CS6 เร่ิมจากการทาความเขา้ ใจความ
ตอ้ งการของระบบกอ่ นท่ีจะทาการตดิ ตง้ั โปรแกรม เนือ่ งจากโปรแกรมมีการพัฒนาเครื่องมือและคาสง่ั ต่าง ๆ
เพิ่มขึ้น การทาความรู้จักหน้าตาสว่ นประกอบต่าง ๆ ของโปรแกรมเพอ่ื ให้สามารถคน้ หาและเรียกใช้เครอื่ งมอื
ต่าง ๆ ได้อยา่ งรวดเร็ว ตลอดจนวิธกี ารกาหนดมมุ มองการทางานของโปรแกรม ดว้ ยกล่องเคร่ืองมือและดว้ ย
เมนูคาส่งั เพื่อใชแ้ สดงมุมมองการทางานของภาพตามความตอ้ งการ

สรปุ

ในโปรแกรม Adobe Photoshop CS6 มสี ว่ นประกอบหน้าจอโปรแกรม ได้แก่
Menu Bar (แถบเมนูคาส่ัง), Option Bar (แถบกาหนดรปู แบบของเคร่ืองมือ), Toolbox (กล่อง
เครอื่ งมอื ), Document window (พ้นื ที่การทางาน), Panel (พาเนล), แถบเมนูคาสัง่ (Menu Bar)
ชดุ คาสง่ั ที่ใช้สาหรับเรยี กคาสั่งต่าง ๆ กล่องเครื่องมือ (Toolbox)ใช้เก็บเครอ่ื งมือพื้นฐาน ซึ่งกล่อง
เครอ่ื งมือจะแบง่ 6 กลมุ่ ดงั นี้ กลมุ่ คาส่ัง Selection เพ่อื เลือกพ้ืนที่สว่ นตา่ ง ๆ ของภาพ กล่มุ คาสงั่ Edit
สาหรับปรบั แตง่ ระบายสี การลบบางสว่ นของภาพ กลมุ่ คาส่งั เกยี่ วกับการสร้างตวั อักษร วาดภาพ คาส่งั
View ยอ่ ขยายภาพบนหน้าจอ คาสัง่ เลอื กสี Foreground หรือ Background คาสั่ง Quick mark ,
คาส่ังเกย่ี วกับหน้าจอ และจะมพี าเนล (Panel) ต่าง ๆ ใช้สาหรับจัดการกบั ภาพโดยแยกออกเป็น
หมวดหมนู่ ักเรียนควรศึกษาเคร่อื งมือต่าง ๆ เพื่อการออกแบบจะง่ายขน้ึ

รหัสวชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

หนว่ ยการเรยี นรู้ท่ี 2 Banner และ Buttonสวยดว้ ย Photshop สาระการเรียนรู้ที่ 2.2 การสรา้ งปุ่มเมนู 40

จดุ ประสงค์การเรยี นรู้ 2.นักเรียนสามารถสรา้ ง Banner ได้อยา่ งตง้ั ใจ

สรา้ งปา้ ยแบนเนอร์ง่ายๆ

เว็บแบนเนอร์ (Web Banner) คือ รูปแบบการโฆษณาบนอินเทอร์เน็ต เป็นการวางภาพ
โฆษณาลงไปบนหน้าเว็บแล้วทาไฮเปอร์ลิงค์กลับไปยังเว็บที่โฆษณา เพ่ือดึงดูดผู้เข้าชมให้เข้าไปยังเว็บ
เพจหรือเว็บไซต์ท่โี ฆษณานนั้ ๆ

ภาพท่ี 1 ตวั อย่างขนาดตา่ งๆ ของพน้ื ทใ่ี นเวบ็ เพื่อนาไปออกแบบส่วนต่างๆ
ที่มา : วลิ าวลั ย์ นาคภพ, 2559.

รหัสวชิ า ง30241 ชื่อวิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

41

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

ขนั้ ตอนการสร้างหัวเวบ็ หรอื Banner ดว้ ย Photoshop

1. เข้าที่ Program Photoshop เลือก เมนู File เลือก New ( Ctrl + O )

ภาพท่ี 2 สรา้ งชน้ิ งานใหม่ เพ่ือสร้าง แบนเนอร์
ท่มี า : วิลาวลั ย์ นาคภพ, 2559.

รหัสวชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

2. กาหนดขนาดให้กับ ภาพหัวเว็บ เมนู แบนเนอร์ Footer ต่างๆ ตามขนาดที่เราต้องการ 42
จะออกแบบในที่นี้ จะกาหนดขนาดหัวเว็บเพ่ือออกแบบหัวเว็บเป็นตัวอย่างในการ
ออกแบบชิ้นต่อไป ในท่ีนี้กาหนดขนาด กว้าง 960 สูง 200 ความละเอียด 72 pixels
แล้วกด ตกลง

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

3. เร่ิมการออกแบบ เตรียมภาพ และใส่ขอ้ ความตามทเ่ี ราต้องการ

4. บันทึกแบนเนอร์ด้วย เลอื ก File เลือก save เลอื กบนั ทึกนามสกลุ เป็น
.PSD จะไดไ้ ฟล์ภาพตน้ ฉบับทสี่ ามารถแก้ไขและเพิ่มเติมได้
.JPG จะไดไ้ ฟล์ภาพที่สามารถนาไปใช้ไดม้ ีความละเอยี ดของสีมากกวา่ .GIF

ภาพท่ี 3 ข้ันตอนการออกแบบแบนเนอร์ ดว้ ยโปรแกรม Photoshop
ทมี่ า : วิลาวลั ย์ นาคภพ, 2559.
รหัสวชิ า ง30241 ช่ือวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เรอ่ื ง “Web design and Development ”

43

ขนั้ ตอนการสรา้ ง Banner ดว้ ย Aleo Flash Intro Banner Maker

1. เข้าสู่โปรแกรม Aleo Flash Intro Banner Maker เลือก Size and sound เพื่อกาหนดขนาดที่
ต้องการ จะสร้างส่วนต่างๆ ตามท่ีเราต้องการได้อย่างง่ายๆ โดยท่ีเราไม่จาเป็นต้องมีพื้นฐานใน
โปรแกรมออกแบบมากนักพร้อมกับชิ้นงานสามารถ เคลือ่ นไหวไดแ้ บบ แอนเิ มช่ัน วีดโี อ และอน่ื ๆ
ทาให้นา่ สนใจสะดวก

รหัสวชิ า ง30241 ชือ่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

44

2. ไปที่เมนดู ้านซ้ายมือ เมนู Background เพอ่ื แทรกและกาหนดภาพพ้นื หลักให้กบั งาน สามารถทา
ไดห้ ลายภาพ ภาพจะสไลดก์ รณี add หลายภาพ

ภาพท่ี 4 ขนั้ ตอนการออกแบบแบนเนอร์ ด้วยโปรแกรม Aleo Flash Intro Banner Maker
การกาหนด Size and sound และ background
ท่มี า : วลิ าวัลย์ นาคภพ, 2559.

3. ไปท่ีเมนูด้านซ้ายมือ เมนู Effect เพื่อแต่งให้มี แอนิเมช่ัน ที่น่าสนใจสวยงามแบบง่ายๆ เพียงแค่
คลกิ กรณตี อ้ งการมี Effect ให้มากกวา่ 2 แบบ ให้กด Ctrl คา้ งไวแ้ ล้วเลือก Effect แบบตา่ งๆ

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มท่ี เอกสารประกอบการเรียน เร่ือง “Web design and Development ”

4. ไปที่เมนูด้านซ้ายมือ เมนู Text image and SWF เพ่ือแทรกข้อความ ภาพ กาหรับให้เกิดการ 45
เคลอ่ื นไหว

ภาพที่ 5 ขน้ั ตอนการออกแบบแบนเนอร์ ดว้ ยโปรแกรม Aleo Flash Intro Banner Maker
การกาหนด Effect และ Text image and SWF
ท่ีมา : วิลาวลั ย์ นาคภพ, 2559.

5. ไปที่เมนูด้านซ้ายมือ เมนู Web Links เพื่อกาหนด Link เช่ือมโยงตามที่เรากาหนด ได้

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เรื่อง “Web design and Development ”

46

6. เมนูสุดท้าย Publish to Banner การนาสิ่งที่สร้างไปใช้งานในรูปแบบต่างๆ ตามท่ีเราต้องการ
โดยสามารถนาไปใชไ้ ด้ 3 รูปแบบ
- นามสกุล .swf ไฟล์ Flash แอนิเมชัน่ ท่ีสวยงาม
- นามสกุล .gif เปน็ รูปภาพท่ีมี แอนเิ มชั่น
- และรูปแบบ วดี ีโอ

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

ภาพท่ี 6 ขั้นตอนการออกแบบแบนเนอร์ ด้วยโปรแกรม Aleo Flash Intro Banner Maker
การกาหนด Web Links และ Publish to Banner
ทม่ี า : วลิ าวลั ย์ นาคภพ, 2559.

รหัสวชิ า ง30241 ชอื่ วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เรอ่ื ง “Web design and Development ”

47

การสรา้ ง MENU

ขัน้ ตอนการ menu ด้วย Photoshop

1. เขา้ ที่ Program Photoshop เลือก เมนู File เลอื ก New ( Ctrl + O )

ภาพท่ี 7 สร้างช้ินงานใหม่ เพอื่ สร้าง menu
ท่มี า : วลิ าวัลย์ นาคภพ, 2559.
2. กาหนดขนาดให้กับปุ่ม menu ต่างๆ ตามขนาดท่ีเราต้องการและตกแต่งเป็น menu

ต่างๆ หลายๆปุ่ม menu ในท่ีน้ีกาหนดขนาด กว้าง 220 สูง 50 ความละเอียด 72
pixels แล้วกด ตกลง

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

48

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

3. เริม่ การออกแบบ เตรียมภาพ และใสข่ ้อความตามทีเ่ ราต้องการ

4. บนั ทึกแบนเนอรด์ ้วย เลอื ก File เลือก save เลอื กบนั ทึกนามสกุล เปน็
.PSD จะได้ไฟล์ภาพต้นฉบบั ท่สี ามารถแกไ้ ขและเพ่มิ เตมิ ได้
.JPG จะได้ไฟล์ภาพทีส่ ามารถนาไปใชไ้ ดม้ ีความละเอยี ดของสีมากกว่า .GIF

ภาพที่ 8 ขน้ั ตอนการออกแบบ menu ดว้ ยโปรแกรม Photoshop
ทม่ี า : วิลาวัลย์ นาคภพ, 2559.

สรุป
เว็บไซตจ์ ะน่าสนใจก็ต่อเม่ือมีภาพและออกแบบภาพ เมนู แบนเนอรใ์ ห้นา่ สนใจ เวบ็ แบนเนอร์
(Web Banner) คอื รูปแบบการโฆษณาบนอินเทอร์เนต็ เป็นการวางภาพโฆษณาลงไปบนหน้า
เวบ็ แลว้ ทาไฮเปอรล์ ิงค์กลับไปยงั เว็บทโ่ี ฆษณา เพอ่ื ดงึ ดูดผู้เขา้ ชมให้เข้าไปยงั เวบ็ เพจหรือเว็บไซต์
ทโ่ี ฆษณา

รหสั วชิ า ง30241 ช่ือวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

หน่วยการเรยี นรู้ท่ี 2 Banner และ Buttonสวยดว้ ย Photoshop สาระการเรยี นรูท้ ่ี 2.3 การสรา้ ง Web Photo Gallery 49

จุดประสงค์การเรยี นรู้ 3.นักเรยี นสามารถสร้างและอธบิ ายขนั้ ตอนการสรา้ ง Web Photo Gallery

การสร้างเว็บ Photo Gallery

การสร้างเว็บ Photo Gallery ปจั จบุ นั สามารถสร้างและออกแบบได้ในหลายโปรแกรมในท่ีนี้
จะแนะนาการสร้างจาก 2 โปรแกรม ท่ีสร้างง่ายๆ คือ Photoshop และ Ncesoft Flash Gallery
Creator เวบ็ ที่มีเวบ็ Photo Gallery เป็นส่วนหน่ึงทที่ าใหเ้ ว็บของเราดนู ่าสนใจ

ภาพที่ 9 ตวั อย่าง เวบ็ Photo Gallery จากโปรแกรม Photoshop และ Ncesoft Flash Gallery
Creator

ทม่ี า : วลิ าวลั ย์ นาคภพ, 2559.

รหสั วชิ า ง30241 ชอื่ วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เรอ่ื ง “Web design and Development ”

50

สร้าง Web Photo Gallery ด้วย Photoshop

1. เกบ็ ภาพทีต่ อ้ งการทา Web Photo Gallery ไวใ้ นโฟล์เดอรเ์ ดียวกนั
2. เขา้ โปรแกรม Photoshop เวอรช์ ่ัน 7- Photoshop CS3 เวอร์ชนั้ สงู กวา่ น้ี ของ Photoshop สว่ น
น้ีถกู ตดั ออกไปแลว้ เลอื กคาสั่ง File เลอื ก Automate เลือก Web Photo Gallery…

3. เลือกลักษณะของเว็บเพจที่จะสร้างในช่อง Style โดยดูตัวอย่างจากภาพทางขวามือ ซ่ึงมีออปชั่น
แบง่ ไดเ้ ป็น 4 กลมุ่ ดังน้ี

ภาพที่ 10 ขน้ั ตอนการสร้าง Photo Gallery จากโปรแกรม Photoshop
ที่มา : วลิ าวัลย์ นาคภพ, 2559.

รหัสวชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”