คอมพิวเตอร์กราฟิกประยุกต์

ปกรณกฤช กนทะเลศ ครผสอน รร.พานพทยาคม โครงการ MOU รวมกบ มหาวทยาลยพะเยา :Page | 1


เอกสารหลกสตรรายวชา

คอมพวเตอรกราฟกประยกต

ชนมธยมศกษาตอนปลาย (ม. 4-6)

กลมสาระการเรยนร การงานอาชพและเทคโนโลย

โรงเรยนสงเมนชนปถมภ

ส านกงานเขตพนทการศกษาแพร เขต 2

ส านกงานคณะกรรมการการศกษาขนพนฐาน

กระทรวงศกษาธการ


สารบญ

หนา

ตารางสรปสาระและมาตรฐานการเรยนร ชนมธยมศกษาตอนปลาย (ม. 4-6)

กลมสาระการเรยนร การงานอาชพและเทคโนโลย..................................................................

1

ชนมธยมศกษาตอนปลาย (ม. 4-6) รายวชา ง30226 คอมพวเตอรกราฟกประยกต

กลมสาระการเรยนร การงานอาชพและเทคโนโลย..................................................................

1

แบบการวเคราะหเพอจดท าค าอธบายรายวชา ง30226 คอมพวเตอรกราฟกประยกต

กลมสาระการเรยนร การงานอาชพและเทคโนโลย ชนมธยมศกษาตอนปลาย (ม. 4-6) ภาค

เรยนท 1..........................................................................................................................

2

การวางแผนออกแบบหนวยการเรยนรองมาตรฐาน................................................................. 2

ค าอธบายรายวชา.................................................................................................................. 6

แบบบนทกโครงสรางรายวชา.................................................................................................. 7

ตารางวเคราะหการเกบคะแนนวชา ง30226 คอมพวเตอรกราฟกประยกต

ชนมธยมศกษาปตอนปลาย (ม.4-6) โรงเรยนสงเมนชนปถมภ................................................

9

หนวยการเรยนรท 1

แผนการจดการเรยนรท 1 แผนการสอนท 1 เรอง การสรางภาพพาโนรามา.................... 10

แผนการจดการเรยนรท 1 แผนการสอนท 2 เรอง การตอภาพ Perspective.................... 14

แผนการจดการเรยนรท 1 แผนการสอนท 3 เรอง การสรางการดอวยพร........................ 18

แผนการจดการเรยนรท 1 แผนการสอนท 4 เรอง การสรางโปสเตอร.............................. 22

ใบความรท 1.1 การสรางภาพพาโนรามา................................................................ 26

ใบความรท 1.2 การตอภาพ Perspective.............................................................. 31

ใบความรท 1.3 การดอวยพร......................................................................................... 38

ใบความรท 1.4 การท า Poster....................................................................................... 49

ใบงานท 1.1 การสรางภาพพาโนรามา.................................................................... 57

ใบงานท 1.2 การตอภาพ Perspective.................................................................. 58

ใบงานท 1.3 การดอวยพร............................................................................................. 59

ใบงานท 1.4 Poster......................................................................................................... 60

แบบทดสอบ กอนเรยน/หลงเรยน.................................................................................... 61


สารบญ (ตอ)

หนา


แผนการจดการเรยนรท 2 แผนการสอนท 1 เรอง การใชเอฟเฟกตตกแตง แกไข

ภาพบคคล.....................................................................................................................

66

ใบความรท 2.1 การตกแตงใบหนา.................................................................................. 70

ใบความรท 2.2 การเปลยนสรมฝปาก............................................................................. 76

ใบงานท 2.1 การตกแตงใบหนา...................................................................................... 81

ใบงานท 2.2 การเปลยนสรมฝปาก................................................................................. 82



แผนการจดการเรยนรท 3 แผนการสอนท 1 เรอง การวาดการตน.................................. 86

แผนการจดการเรยนรท 3 แผนการสอนท 2 เรอง การสรางภาพพนหลง........................ 90

แผนการจดการเรยนรท 3 แผนการสอนท 3 เรอง การสรางอกษรประดษฐ.................... 94

แผนการจดการเรยนรท 3 แผนการสอนท 4 เรอง การสรางภาพพนหลงเรองแสง.......... 98

แผนการจดการเรยนรท 3 แผนการสอนท 5 เรอง การสราง Icon................................... 102

ใบความรท 3.1 การวาดการตน...................................................................................... 106

ใบความรท 3.2 การสรางภาพพนหลง........................................................................... 116

ใบความรท 3.3 อกษรประดษฐ....................................................................................... 129

ใบความรท 3.4 ภาพพนหลงเรองแสง............................................................................. 149

ใบความรท 3.5 การสราง Icon ทรงกลม........................................................................ 162

ใบงานท 3.1 การวาดการตน........................................................................................... 172

ใบงานท 3.2 การสรางภาพพนหลง................................................................................ 173

ใบงานท 3.3 อกษรประดษฐ........................................................................................... 174

ใบงานท 3.4 ภาพพนหลงเรองแสง.................................................................................. 175

ใบงานท 3.5 การสราง Icon ทรงกลม............................................................................ 176



แผนการจดการเรยนรท 4 แผนการสอนท 1 เรอง การสรางภาพเคลอนไหว.................... 184

ใบความรท 4.1 พนฐานการสรางภาพเคลอนไหว............................................................. 188

ใบความรท 4.2 การท าภาพ loading แบบ facebook...................................................... 194


สารบญ (ตอ)

หนา

ใบงานท 4.1 พนฐานการสรางภาพเคลอนไหว................................................................. 208

ใบงานท 4.2 การท าภาพ loading.................................................................................. 209



แผนการจดการเรยนรท 5 แผนการสอนท 1 เรอง เวบไซต สวนประกอบของเวบไซต

และการเผยแพร.............................................................................................................

214

แผนการจดการเรยนรท 5 แผนการสอนท 2 เรอง หลกการออกแบบเวบไซต.................. 218

แผนการจดการเรยนรท 5 แผนการสอนท 3 เรอง การสรางปม (Button)

ส าหรบเวบเพจ...............................................................................................................

222

แผนการจดการเรยนรท 5 แผนการสอนท 4 เรอง การตดแยกภาพเพอน าไปประกอบ

เปนเวบเพจ....................................................................................................................

226

ใบความรท 5.1 เวบไซต สวนประกอบของเวบไซต และการเผยแพร................................ 230

ใบความรท 5.2 หลกการออกแบบเวบเพจ...................................................................... 236

ใบความรท 5.3 การสรางปม (Button) ส าหรบเวบเพจ.................................................. 246

ใบความรท 5.4 การตดแยกภาพเพอน าไปประกอบเปนเวบไซต...................................... 253

ใบงานท 5.1 เวบไซต สวนประกอบของเวบไซต และการเผยแพร.................................. 262

ใบงานท 5.2 ฝกปฏบตการออกแบบเวบไซต................................................................... 264

ใบงานท 5.3 การสรางปม (Button) ส าหรบเวบเพจ....................................................... 266



แผนการจดการเรยนรท 6 แผนการสอนท 1 เรอง การออกแบบสอสงพมพ.................... 272

ใบความรท 6.1 การผลตสอและสงพมพ........................................................................ 276

ใบความรท 6.2 การออกแบบสงพมพ............................................................................. 287

ใบงานท 6.1 การผลตสอและสงพมพ............................................................................. 297

ใบงานท 6.2 การออกแบบสงพมพ................................................................................. 298



ตารางสรปสาระและมาตรฐานการเรยนร

ชนมธยมศกษาตอนปลาย (ม. 4-6) กลมสาระการเรยนร การงานอาชพและเทคโนโลย

สาระ มาตรฐานการเรยนร ตวชวด

สาระท 3 เทคโนโลยสารสนเทศ

และการสอสาร

1. การผสมภาพ

2. การตกแตง ปรบแกภาพ

3. การสรางภาพใหม

4. การสรางภาพเคลอนไหว

5. การออกแบบเวบไซต

6. การออกแบบสอสงพมพ

มาตรฐาน ง 3.1 เขาใจ เหนคณคา

และใชกระบวนการเทคโนโลย

สารสนเทศในการสบคนขอมล การ

เรยนร การสอสาร การแกปญหา

การท างาน และอาชพอยางม

ประสทธภาพ ประสทธผล และม

คณธรรม

ม 4-6 /5 แกปญหาดวย

กระบวนการเทคโนโลยสารสนเทศ

อยางมประสทธภาพ

ม 4-6 /11 ใชเทคโนโลยสารสนเทศ

น าเสนองานในรปแบบทเหมาะสม

ตรงตามวตถประสงคของงาน

ชนมธยมศกษาตอนปลาย (ม. 4-6)

รายวชา ง30226 คอมพวเตอรกราฟกประยกต


ภาคเรยนท 1 - 2

สาระ / มาตรฐาน ตวชวด

สาระท 3

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใช

กระบวนการเทคโนโลยสารสนเทศในการสบคน

ขอมล การเรยนร การสอสาร การแกปญหา การ

ท างาน และอาชพอยางมประสทธภาพ

ประสทธผล และมคณธรรม

ม 4-6 /5 แกปญหาดวยกระบวนการเทคโนโลยสารสนเทศ

อยางมประสทธภาพ

ม 4-6 /11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบท

เหมาะสมตรงตามวตถประสงคของงาน


แบบการวเคราะหเพอจดท าค าอธบายรายวชา

ง30226 คอมพวเตอรกราฟกประยกต

กลมสาระการเรยนร การงานอาชพและเทคโนโลย ชนมธยมศกษาตอนปลาย (ม. 4-6) ภาคเรยนท 1

ผลการเรยนร (รายวชาเพมเตม) สาระการเรยนรแกนกลาง / ทองถน

ความร ทกษะ / กระบวนการ คณลกษณะอนพงประสงค

1. มความรในการสรางภาพใหมโดย

การใชบางสวนจากภาพอน และการ

ใชเอฟเฟกตในการผสมภาพ

1. การท าภาพพาโนรามา

2. การตดตอภาพแบบ perspective

3. การตดตอเพอท าการดอวยพร

4. การตดตอเพอท าโปสเตอรโฆษณา

- ฝกปฏบตการท าภาพพาโนรามา

- ฝกปฏบตการตดตอภาพ perspective

- ฝกปฏบตการท าการดอวยพร

- ฝกปฏบตการท าโปสเตอรโฆษณา

- ความมงมนในการท างาน

- ความรเรมสรางสรรค

- ใฝเรยนร

2. มความรในการปรบแตงภาพ แกไข

ภาพ

การตกแตงภาพบคคล

- ฝกปฏบตการตกแตงภาพบคคล - ความมงมนในการท างาน



3. มความรในการใชเครองมอพนฐาน

ของโปรแกรมคอมพวเตอรกราฟกใน

การรงสรรคภาพใหม

1. การวาดการตน

2. การสรางภาพพนหลง

3. การสรางอกษรประดษฐ

4. การสรางภาพพนหลงแบบภาพ

เรองแสง

5. การสรางภาพ Icon

- ฝกปฏบตการวาดการตน

- ฝกปฏบตการสรางภาพพนหลง

- ฝกปฏบตการสรางอกษรประดษฐ

- ฝกปฏบตการสรางภาพพนหลงแบบ


- ฝกปฏบตการสรางภาพ Icon




4. มความรในการท าภาพเคลอนไหว

เบองตน

ความรพนฐานในการสราง

ภาพเคลอนไหวดวยโปรแกรม

คอมพวเตอร

- ฝกปฏบตการสรางภาพเคลอนไหว - ความมงมนในการท างาน




ผลการเรยนร (รายวชาเพมเตม) สาระการเรยนรแกนกลาง / ทองถน

ความร ทกษะ / กระบวนการ คณลกษณะอนพงประสงค

5. มความรในการออกแบบงาน

กราฟกส าหรบเวบไซต

1. ความรเบองตนในการสรางเวบไซต


3. การสรางปมส าหรบเวบเพจ

4. การจดแยกภาพเพอน าไปสรางเวบ

เพจ

- ฝกปฏบตการสรางปมส าหรบเวบไซต

- ฝกปฏบตการเตรยมไฟลเพอสราง

เวบไซต




6. มความรในการออกแบบสอ

สงพมพ

ความรพนฐานของงานผลตสอสงพมพ

และการออกแบบสงพมพดวย

โปรแกรมคอมพวเตอร

เรยนรหลกการส าคญในการออกแบบ

สอสงพมพ และฝกปฏบตสรางสอ

สงพมพ



การวางแผนออกแบบหนวยการเรยนรองมาตรฐาน

ผลการเรยนร

ความคดรวบยอด

สาระการเรยนร

น าไปส

ชนงาน/

ภาระงาน

แนวการจดกจกรรม

การเรยนร สมรรถนะส าคญ คณลกษณะ

อนพงประสงค

1. มความรในการสราง

ภาพใหมโดยการใช

บางสวนจากภาพอน และ

การใชเอฟเฟกตในการผสม

ภาพ

ผเรยนจะไดท าการสราง

ภาพใหมโดยการใช

บางสวนจากภาพอนมาตอ

เขาดวยกนเพอสรางเปน

ภาพใหม

ดงนนจะไดเรยนรการตด

1. การท าภาพพาโนรามา

2. การตดตอภาพแบบ

perspective

3. การตดตอเพอท าการดอวยพร

4. การตดตอเพอท าโปสเตอร

โฆษณา

1. ความสามารถ

ในการสอสาร


ในการคด


ในการใช


- ความมงมนใน

การท างาน

- ความรเรม

สรางสรรค

แบบฝกหด 1. ศกษาใบความร

2. ฝกปฏบตตามคร

3. ปฏบตดวยตนเอง

4. พดน าเสนอผลงาน

หนาชนเรยน





น าไปส

ชนงาน/





ภาพ และตอภาพ ดวย

เทคนคทหลากหลาย

เทคโนโลย

2. มความรในการใชเอฟ

เฟกตตกแตง แกไข ภาพ

บคคล

ผเรยนจะไดท าการใช

เอฟเฟกตทมอยมากกวา 1

อยางรวมกนในการตกแตง

แกไขความผดพลาดท

ปรากฎบนภาพเพอใหได

ภาพตามจนตนาการ

การตกแตงภาพบคคล 1. ความสามารถ

















3. มความรในการใช

เครองมอพนฐานของ


กราฟกในการรงสรรคภาพ

ใหม


กราฟกมเครองมออ านวย

ความสะดวกมากมายให

เลอกใช ผเรยนจะไดใช

เครองมอพนฐานทมอย

อยางนอย 2 อยางรวมกน

เพอสรางชนงานขนมาโดย

ไมตองอาศยภาพตนแบบ

1. การวาดการตน

2. การสรางภาพพนหลง

3. การสรางอกษรประดษฐ

4. การสรางภาพพนหลงแบบภาพ


5. การสรางภาพ Icon


















4. มความรในการท า ผเรยนจะไดท าการใช ความรพนฐานในการสราง 1. ความสามารถ - ใฝเรยนร แบบฝกหด 1. ศกษาใบความร





น าไปส

ชนงาน/





ภาพเคลอนไหว เอฟเฟกตดานการสราง

เคลอนไหวในการสราง

ภาพเคลอนไหวทตนเอง

ตองการ

ภาพเคลอนไหวดวยโปรแกรม
















5. มความรในการออกแบบ

งานกราฟกส าหรบเวบไซต

1. ความรเบองตนในการสราง

เวบไซต


3. การสรางปมส าหรบเวบเพจ

4. การจดแยกภาพเพอน าไปสราง

เวบเพจ


















6. มความรในการออกแบบ

สอสงพมพ

ความรพนฐานของงานผลตสอ

สงพมพ และการออกแบบสงพมพ

ดวยโปรแกรมคอมพวเตอร




















น าไปส

ชนงาน/








ค าอธบายรายวชา

รหสวชา ง30226 คอมพวเตอรกราฟกประยกต

กลมสาระการเรยนร การงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4-6

เวลา 40 ชวโมง จ านวน 1 หนวยกต ภาคเรยนท 1

ค าอธบายรายวชา

ศกษาความรเกยวกบการใชเอฟเฟกตทมอยในการรงสรรคภาพใหม การสรางภาพใหมโดยการใช

บางสวนจากภาพอน การตกแตงภาพตามจนตนาการและความคดสรางสรรค การสรางเอฟเฟกตส าหรบงาน

คอมพวเตอรกราฟก และ การท าใหภาพเคลอนไหว โดยใชเทคนคทหลากหลาย

ปฏบตการสรางงานดวยโปรแกรมคอมพวเตอรกราฟก โดยใชเครองมอมาสราง ตกแตง สรางสรรค

ผลงานคอมพวเตอรกราฟก สามารถแกไขภาพโดยการใชโปรแกรมคอมพวเตอรกราฟกตามจนตนาการและ

ความคดสรางสรรค สามารถน าเอาคอมพวเตอรกราฟกไปประยกตใชกบงานดานตางๆ ไดจรงอยางถกตอง

เหมาะสม มทกษะกระบวนการจดการโดยใชกระบวนการเรยนรจากการปฏบต

เพอใหมทกษะในการท างาน มความมงมนในการท างาน ใฝเรยนร มความคดรเรมสรางสรรค มความ

รบผดชอบ มความสามารถในการใชเทคโนโลย

รหสตวชวด

ง 3.1 ม 4-6 /5

ง 3.1 ม 4-6 /11


1. มความรในการสรางภาพใหมโดยการใชบางสวนจากภาพอน และการใชเอฟเฟกตในการผสมภาพ

2. มความรในการใชเอฟเฟกตตกแตง แกไข ภาพบคคล

3. มความรในการใชเครองมอพนฐานของโปรแกรมคอมพวเตอรกราฟกในการรงสรรคภาพใหม

4. มความรในการท าภาพเคลอนไหว

5. มความรในการออกแบบงานกราฟกส าหรบเวบไซต

6. มความรในการออกแบบสอสงพมพ

รวม 6 ผลการเรยนร


แบบบนทกโครงสรางรายวชา

โครงสรางรายวชา ง30226 คอมพวเตอรกราฟกประยกต


ชนมธยมศกษาปท 4-6 เวลาเรยน 2 ชวโมง จ านวน 1 หนวยกต

ล าดบ

ท ชอหนวยการเรยนร

มาตรฐานการ

เรยนร /

ตวชวด

สาระส าคญ เวลา

(ชวโมง)

น าหนก

คะแนน

1 การสรางภาพใหม

โดยการใชบางสวน

จากภาพอน และการ

ใชเอฟเฟกตในการ

ผสมภาพ

ง 3.1

ม 4-6 /5,

ม 4-6 /11

ผเรยนจะไดเรยนรและฝกฝนเทคนค

การตดภาพ และตอภาพ เพอสราง

ภาพใหมโดยการใชบางสวนจาก

ภาพอนมาผสมเขาดวยกน โดยม

บทเรยนทเปนกรณศกษาซงเปนท

นยมใชกนมากในการผสมภาพให

ผเรยนไดศกษาและฝกปฏบต

7

20

2 การใชเอฟเฟกต

ตกแตง แกไข ภาพ

บคคล

ง 3.1

ม 4-6 /5,

ม 4-6 /11

ผเรยนจะไดท าการใชเอฟเฟกตทม

อยมากกวา 1 อยางรวมกนในการ

ตกแตง แกไขภาพ โดยมบทเรยนท

เปนกรณศกษาแกไขภาพบคคลเปน

เทคนคทใชทงในรานถายภาพ ราน

สงพมพทองถนและสงพมพสากล

4 10

3 การใชเครองมอ

พนฐานของ

โปรแกรม

คอมพวเตอรกราฟก

ในการรงสรรคภาพ

ใหม

ง 3.1

ม 4-6 /5,

ม 4-6 /11

โปรแกรมคอมพวเตอรกราฟกม

เคร องมออ านวยความสะดวก

มากมายใหเลอกใช

ผเรยนจะไดใชเครองมอพนฐานท

มอยอยางนอย 2 อยางรวมกนเพอ

สรางชนงานขนมาโดยไมตองอาศย

ภาพตนแบบ

9 25


ล าดบ

ท ชอหนวยการเรยนร

มาตรฐานการ

เรยนร /

ตวชวด

สาระส าคญ เวลา

(ชวโมง)

น าหนก

คะแนน

4 การท า

ภาพเคลอนไหว

ง 3.1

ม 4-6 /5,

ม 4-6 /11

ผเรยนจะไดเรยนรหลกการในการ

สรางภาพเคลอนไหวดวยโปรแกรม

คอมพวเตอร และไดเรยนรและฝก

ปฏบตในการสรางภาพเคลอนไหว

ส าหรบเวบไซต ซงในหนวยความร

ไดน าเสนอการท า loading

animation

4 10

5 การออกแบบงาน

กราฟกส าหรบ

เวบไซต

ง 3.1

ม 4-6 /5,

ม 4-6 /11

หลกการในการออกแบบเวบไซต

ซงประกอบดวย layout ชดส การ

น าภาพไปใชในการประกอบเปนเวบ

เพจ และตวอยางการใช filter ชวย

ในการผสมภาพใหเขากนมากขน

8 20

6 การออกแบบสอ

สงพมพ

ง 3.1

ม 4-6 /5,

ม 4-6 /11

กระบวนการท างานดานการผลต

ส งพมพ ส งท นกออกแบบตอง

ทราบ และ แนวปฏบตในการสราง

ไฟลส งพมพท นกออกแบบตอง

ปฏบตตาม

4 15

สอบกลางภาค 2

สอบปลายภาค 2

รวมตลอดภาคเรยน 40 100


ตารางวเคราะหการเกบคะแนนวชา ง30226 คอมพวเตอรกราฟกประยกต

ชนมธยมศกษาตอนปลาย (ม.4-6) โรงเรยนสงเมนชนปถมภ

ผลการเรยนรทคาดหวง T K P A รวมคะแนน

1. มความรในการสรางภาพใหมโดยการใชบางสวน

จากภาพอน และการใชเอฟเฟกตในการผสมภาพ

7

3 15 2 20

2. มความรในการใชเอฟเฟกตตกแตง แกไข ภาพ

บคคล

4 3 6 1 10

3. มความรในการใชเครองมอพนฐานของโปรแกรม

คอมพวเตอรกราฟกในการรงสรรคภาพใหม

9 3 20 2 25

4. การท าภาพเคลอนไหว 4 3 6 1 10

5. มความรในการออกแบบงานกราฟกส าหรบ

เวบไซต

8 3 15 2 20

6. มความรในการออกแบบสอสงพมพ 4 3 10 2 15

สอบกลางภาค/ปลายภาค 4

รวม 40 18 72 10 100

T = เวลาเรยน

K = ดานความร

P = ดานทกษะกระบวนการ (การปฏบตงาน ผลงาน)

A = ดานคณลกษณะ (รกชาต ศาสน กษตรย, มวนย, ใฝเรยนร, มงมนในการท างาน)

การประเมนผล

ผลการเรยนรทประเมนกอนวดผลกลางภาค คอ 1,2 = 20+10 คะแนน

ผลการเรยนรทประเมนผลกลางภาค คอ 3 = 25 คะแนน

ผลการเรยนรทประเมนหลงวดผลกลางภาค คอ 4,5 = 10+20 คะแนน

ผลการเรยนรทประเมนผลปลายภาค คอ 6 = 15 คะแนน


แผนการจดการเรยนรท 1

กลมสาระ การงานอาชพและเทคโนโลย ชนมธยมศกษาปท 4 ภาคเรยนท ปการศกษา

หนวยท 1 การสรางภาพใหมโดยการใชบางสวนจากภาพอน และการใชเอฟ

เฟกตในการผสมภาพ

เวลา 7 ชวโมง

แผนการสอนท 1 เรอง การสรางภาพพาโนรามา

วนท เดอน พ.ศ. เวลา 2 ชวโมง/คาบ

ผสอน

มาตรฐาน ง3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมล การเรยนร

การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม

ผลการเรยนร ง 3.1

ม 4-6 /5 แกปญหาดวยกระบวนการเทคโนโลยสารสนเทศอยางมประสทธภาพ

ม 4-6 /11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสมตรงตามวตถประสงคของงาน

จดประสงคการเรยนร

ดานความร

1. เพอใหมความรเกยวกบเทคนคการตดภาพ ตอภาพ ดวยเครองมอ Photomerge และสามารถวจารณ

ผลลพธทได

ดานทกษะ/กระบวนการ

1. สามารถเรยกใชเครองมอ Photomerge ในการตดและตอภาพ ได และสามารถก าหนดตวเลอกไดอยาง

ถกตอง

ดานคณลกษณะ

1. มวนย

2. ใฝเรยนร

3. มงมนในการท างาน

สาระส าคญ

การตด และ ตอภาพ เปนกจกรรมส าคญอยางหนงของงานคอมพวเตอรกราฟก เพราะในทกชนงาน

จะตองมการตดภาพ และตอภาพเสมอ

เครองมอ photomerge ถอเปนเครองมอส าเรจรปในการตด-ตอภาพ ทมคณภาพท photoshop เตรยมไว

ใหใช แตทงนกลไกการท างานภายในของ photomerge กคอ “Layer mask”

ในบทเรยนน ผเรยนจะไดทดลองใช ศกษา และ วจารณผลลพธทไดจากเครองมอ Photomerge



1. ทดลองใช ศกษาเครองมอ Photomerge

2. วจารณผลลพธทไดจากเครองมอ Photomerge

กจกรรมการเรยนร

1. ขนน า

1. ครเกรนน าถงความส าคญของการตด ตอภาพ ในงานคอมพวเตอรกราฟก และ แนะน าเครองมอ

photomerge

2. ขนสอน

1. ครสาธตการใชเครองมอ photomerge ตามใบความร 1.1 พรอมกบใหนกเรยนปฏบตตาม

2. นกเรยนท างานตามขอท 1 ในใบงานท 1.1

3. นกเรยนคดลอกภาพบนอนเทอรเนต เพอท างานตามขอท 2 ในใบงานท 1.1

4. นกเรยนสรปผลการท าใบงาน 1.1

3.ขนสรป

1. ครนดหมายเรองทจะเรยนในครงตอไป

สอการเรยนร

1. ใบความรท 1.1

2. ใบงานท 1.1

3. จอ LCD Projector

4. เครองคอมพวเตอร

5. อนเทอรเนต

การวดผลและประเมนผล

การวดผล

จดประสงคการเรยนร วธการวด เครองมอ แหลงขอมล/ชนงาน

1. เพอใหมความรเกยวกบเทคนค

การตดภาพ ตอภาพ ดวย

เครองมอ Photomerge และ

สามารถวจารณผลลพธทได

-การตอบค าถาม

-ค าถามในใบงาน

-ใบความร

-ใบงาน

2. สามารถเรยกใชเครองมอ

Photomerge ในการตดและตอ

ภาพ ได และสามารถก าหนด

ตวเลอกไดอยางถกตอง

-ตรวจใบงาน

-สงเกตการท างาน



-ใบงาน



3. มวนย ใฝเรยนร มงมนในการ

ท างาน

-เขาหองเรยนตรง

เวลา

- มปฏสมพนธ

ระหวางเรยน

-ตอบค าถามทกขอ

- สงงานตรงเวลา

-การสงเกตการณ

ผเรยน

เกณฑการประเมน

ประเดนการ

ประเมน

ระดบคณภาพ

4 (ดมาก) 3 (ด) 2 (พอใช) 1 (ปรบปรง)


ความร และความ

สามารถในการปฏบต

ไดจากการท าใบงาน

ท าใบงานถกตอง

รอยละ 80 ขนไป


รอยละ 70 – 79


รอยละ 50 – 69


ต ากวารอยละ 50


คณลกษณะการม

วนย ใฝเรยนร

มงมนในการท างาน


เวลา






เวลา



-ตอบค าถามเกอบ

ทกขอ


-เขาหองเรยน


ระหวางเรยนบาง

-ตอบค าถามบาง

ขอ

- สงงานภายใน

เวลา

-ไมเขาหองเรยน

- ไมมปฏสมพนธ


-ไมท าใบงาน

เกณฑการตดสน

- รายบคคล นกเรยนมผลการเรยนรไมต ากวาระดบ 2 จงถอวาผาน


บนทกหลงการสอน

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 2 เรอง การตอภาพ Perspective


ผสอน








2. เพอใหมความรเกยวกบเทคนคการตอภาพ ดวยเครองมอ Vanishing Point


2. สามารถเรยกใชเครองมอ Vanishing Point ในการตอภาพ ได และสามารถปรบแตงตวเลอกเพอใหไดตาม

ตองการ


4. มวนย






เครองมอ Vanishing Point เปนเครองมอส าเรจรปอนหนงในการตด-ตอภาพเพอสรางภาพทเปน

perspective ท photoshop เตรยมไวใหใช แตทงนกลไกการท างานภายในของ photomerge กคอ “Transform”

การกบการตดภาพ

ในบทเรยนน ผเรยนจะไดศกษา ทดลองปฎบต และวจารณผลลพธทไดจากเครองมอ Vanishing Point



3. ศกษา ทดลองใชเครองมอ Vanishing Point

4. ใชเครองมอ Vanishing Point เพอใหไดผลลพธตามตองการ


1. ขนน า

2. ครเกรนน าถงความส าคญของการตด ตอภาพ ในงานคอมพวเตอรกราฟก แนะน าเรองภาพ

perspective และ แนะน าเครองมอ Vanishing Point

3. ขนสอน

5. ครสาธตการใชเครองมอ Vanishing Point ตามใบความร 1.2 พรอมกบใหนกเรยนปฏบตตาม

6. นกเรยนท างานตามในใบงานท 1.2

3. ขนสรป











การตอภาพ ดวยเครองมอ

Vanishing Point

-การตอบค าถาม



-ใบงาน

2. สามารถใชเครองมอ Vanishing

Point ในการตอภาพได และ

สามารถปรบแตงตวเลอกเพอให

ไดตามตองการ





-ใบงาน


ท างาน


เวลา





ผเรยน






ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 3 เรอง การสรางการดอวยพร


ผสอน








3. เพอใหมความรเกยวกบเทคนคการตดภาพ ตอภาพ ดวยเครองมอพนฐาน


3. สามารถใชเครองมอพนฐานในการตดและตอภาพ เพอใหไดชนงานตามความตองการได


7. มวนย






ในโปรแกรม photoshop มเครองมอพนฐานดานส การเลอกพนท การใชภาพส าเรจรป การสราง effect

ให layer ทหลากหลาย แตในการสรางงานหนงชนขนมา กไมจ าเปนทจะตองใชเครองมอทงหมด ซงขนอยกบ

เปาหมายของงานชนนน

ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการตดตอภาพ และ ปฏบตตดตอภาพตามจนตนาการดวย

ตนเองเพอใหเกดความช านาญมากยงขน



5. ทดลองปฏบตการตด-ตอภาพ ดวยเครองมอพนฐาน

6. ปฏบตตดตอภาพตามจนตนาการดวยตนเอง


1. ขนน า

3. ครเกรนน าถงความส าคญของการตด ตอภาพ ในงานคอมพวเตอรกราฟก และ ทบทวนเครองมอ

พนฐานทตองใช ไดแก Gradient Path LayerStyle Shape Selection และ Text

4. ขนสอน

7. ครสาธตการตด-ตอภาพ ตามใบความร 1.3 พรอมกบใหนกเรยนปฏบตตาม

8. นกเรยนท างานตามขอท 1 ในใบงานท 1.3

9. นกเรยนจดกลมท าตามขอ 2 ในใบงาน 1.3

10. นกเรยนน าเสนอผลงานกลม

3.ขนสรป






13. เครองคอมพวเตอร 14. อนเทอรเนต






เครองมอพนฐาน


-โจทยในใบงาน


-ใบงาน

2. สามารถใชเครองมอพนฐานใน

การตดและตอภาพ เพอใหได

ชนงานตามความตองการได





-ใบงาน


ท างาน


เวลา


ผเรยน









ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา





ผลงานกลม ใหคะแนนเรยงล าดบตามคณภาพของงานหรอเทคนคทแตละกลมใช



- รายกลม นกเรยนมผลการเรยนรไมต ากวาระดบ 2 จงถอวาผาน



....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 4 เรอง การสรางโปสเตอร


ผสอน








4. เพอใหมความรเกยวกบเทคนคการตดภาพ ตอภาพ ดวยเครองมอพนฐาน


4. สามารถใชเครองมอพนฐานในการตดและตอภาพ เพอใหไดชนงานตามความตองการได


10. มวนย









ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการตดตอภาพดวยเทคนคทเพมเตมจากการดอวยพร และ

ปฏบตตดตอภาพตามจนตนาการดวยตนเองเพอใหเกดความช านาญมากยงขน



7. ทดลองปฏบตการตด-ตอภาพ ดวยเครองมอพนฐาน

8. ปฏบตตดตอภาพตามจนตนาการดวยตนเอง


1. ขนน า

4. ครเกรนน าถงความส าคญของการตด ตอภาพ ในงานคอมพวเตอรกราฟก และ ทบทวนเครองมอ

พนฐานทตองใช ไดแก Gradient Path LayerStyle Shape Selection Text และ Filter

5. ขนสอน

11. ครสาธตการตด-ตอภาพ ตามใบความร 1.4 พรอมกบใหนกเรยนปฏบตตาม

12. นกเรยนท างานตามใบงานท 1.4

3.ขนสรป






18. เครองคอมพวเตอร 19. อนเทอรเนต










-ใบงาน


การตดและตอภาพ เพอใหได

ชนงานตามความตองการได





-ใบงาน


ท างาน


เวลา




ผเรยน







ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )


ใบความรท 1.1 การสรางภาพพาโนรามา

การตด ตอ ภาพ เปนทกษะทส าคญอยางหนงส าหรบงานคอมพวเตอรกราฟก ดงนนในหนวย

การเรยนรนผเรยนจะไดเรยนรการใชเครองมอในโปรแกรม photoshop ในการตดตอภาพทมออาชพใชกน ซงหาก

ศกษาจนจบหนวยการเรยนรนแลวผเรยนจะพบวาคณภาพของผลงานนนไมไดขนอยกบเครองมอ หรอเทคนควธ

แตขนอยกบความละเอยดในการก าหนดคาทจ าเปนในการใชเครองมอตางๆ ซงหากผเรยนก าหนดคาจ าเปน

แตกตางไปกจะท าใหไดชนงานใหมทแตกตางทอาจจะดกวาหรอแยกวากได

ในใบความรนจะเปนการเรยนรวธการตด ตอ ภาพ เพอสรางภาพพาโนรามาโดยใชเครองมอ

ธรรมดาทมอยแลวใน Photoshop ซงเปนวธการตอภาพทงายแตไดคณภาพทดมากผลทไดจะไดภาพใหมท

ประสานกนอยางลงตวไมมรอยตอ วธการสรางมดงน

ผลลพธทได : ภาพหนงภาพทเกดจากการน าภาพหลายๆ ภาพมาตอเขาดวยกน

ภาพตนฉบบทใช :

วธท า

1. รวมภาพทจะท าตอกนไวใน folder เดยวกนและไวในต าแหนงทคนหางาย ดงภาพตวอยาง


2. เปดโปรแกรม Photoshop

3. คลกทเมน File -> Automate -> Photomerge

4. เมอปรากฏหนาตางของ Photomerge ใหท าการเลอกรปแบบ(layout) ทเหมาะสมกบภาพถาย ซงส าหรบ

ตวอยางขอเลอก Layout แบบ Reposition Only แลวคลกปม Browse เพอเลอกไฟลทงหมดใน Folder ทเตรยม

ภาพไว

5. คลกทตวเลอก Blend Image together ดานลาง เพอใหโปรแกรมจดการรอยตอระหวางภาพใหเนยนขน

จากนนคลกทปม OK

6. รอใหโปรแกรม photoshop ประมวลผลจนเสรจ


7. เมอโปรแกรมประมวลผลเสรจแลวจะไดผลลพธเปนภาพใหม แตขอบของภาพจะไมเรยบเสมอกน ใหใชค าสง

Crop Tool(C) เพอตดพนทไมไมตองการออก


8. ผลลพธทได

9. บนทกรปภาพผลลพธไว โดยเลอกระดบคณภาพทสงสด

10. ทดสอบผลลพธของการเลอก Layout แบบตางๆ

10.1 layout แบบ Perspective ส าหรบภาพพาโนรามาทเนนมมมองของภาพ


10.2 layout แบบ Cylindrical ส าหรบการเรยงภาพทถายมาลกษณะเปนวงกลม

11. เบองหลงของ photomerge คอ mask layer และ Transform โดยสามารถดไดจาก layer panel


ใบความรท 1.2 การตอภาพ Perspective

ภาพ perspective คอภาพทมจดรวมสายตา ท าใหไดภาพเสมอนกบมองเหนดวยตาจรงๆ คอ

ของทอยใกลกจะเหนใหญกวาของทอยไกล และการมองเหนดานจ านวน 2 ดานขนไปพรอมกน (ภาพ 2 หรอ 3

มต) ท าใหมความรสกวาเปนภาพ 3 มต เชน ถาไปยนอยกลางถนน แลวมองไปไกลขางหนา เราจะเหนถนนจะ

คอยเลกลง เสาไฟฟากสนเลกลง ถามตนไมเปนทวขางทางกจะเตยลง แลวกจะวงไปรวมกนทจดสดสายตา หรอ

ถาใครอยใกลเสนทางรถไฟกจะเหนไดชดเจน รางรถไฟจะไปรวมกนทจดจดเดยว ไมหมอนทนอนขวางรบราง

เหลกกจะสนเขา และรวมกนทจดรวมสายตา ซงพอจะสรปลกษณะของภาพ PERSPECTIVE ไดดงน

1. วตถ หรอสงของทมขนาดเทากนเมอยไกลตวออกไปจะม

ขนาดเลกลง

2. ระยะทเทากนเมออยไกลตวออกไปจะมระยะทถขนเรอย ๆ

จนรวมเปนจดเดยวกน

3. เสน หรอสงของทคขนานกนเมอไกลออกไปจะพงเขาหากน

4. วตถ หรอสงของตาง ๆ เมออย ไกลตวออกไป จะม

รายละเอยดและความชดเจนลดลงไปตามล าดบ

จดรวมสายตา (Vanishing Point) คอ จดก าเหนดขององคประกอบของภาพ เสนตรงทลากออก

จากจดก าเหนดคอเสนบอกความเปลยนแปลงของขนาดวตถ โดยใน 1 ภาพสามารถมจดรวมสายตาไดหลายจด

Vanishing Point ในโปรแกรม photoshop เปนค าสงทใชปรบแตงรปภาพใหลกษณะแบบ

Perspective โดยสามารถก าหนดพนทใหมมตเหมอนมองเหนดวยตาจรงๆ แลวน าภาพอนมาตกแตงบนรปทสราง

แสตมปภาพ หรอ ระบายสในพนททก าหนดไดอยางรวดเรว


ผลลพธทตองการ: ภาพถายธรรมดาถกจดใหแนบเขากบภาพถาย perspective

ภาพตนฉบบ: ภาพ perspective และ ภาพอน

วธท า

1. เปดภาพเกาอซงเปนภาพทจะน ามาใชส าหรบวางลงบนภาพ perspective แลวเลอกพนททงภาพโดยกด

คย Ctrl+A แลวกดคย Ctrl+C เพอกอบปภาพไปไวทคลปบอรด

2. เปดไฟลภาพหนงสอเปนไฟลภาพทจะน ามาใชค าสง Vanishing Point เพอจะสรางพนทวางภาพแบบ

perspective บนปกหนงสอ

3. อยทไฟลภาพหนงสอ แลวเลอกค าสง Filter > Vanishing Point จะปรากฏไดอะลอกบอกซทใชส าหรบ

สรางและปรบแตงคาของ Vanishing Point ซงจะมพนทการท างาน ภาพตวอยาง และเครองมอตางๆ ดงน


เครองมอใน Vanishing Point ประกอบดวย

Edit Plane tool ใชส าหรบเลอก, แกไข, ยาย และปรบขนาด plane (พนททวาดไว)

Create Plane tool ใชส าหรบสรางพนท plane โดยการคลกสรางจด (node) เปนพนทสเหลยมของพนท

ทเปนคาเรมตน และใชปรบแตงรปทรงของ Plane ได

Marquee tool สราง Selection ภายในพนท plane เพอใชจดวางภาพ หรอใชโคลนภาพ

Stamp tool ใชส าหรบแสตมปหรอโคลนภาพจากตนฉบบทเลอก ลงภายในพนทของ plane (ไมสามารถ

โคลนจากภาพอนได)

Brush tool ใชระบายสลงบนพนท plane ทสรางไว

Transform tool ใชส าหรบปรบยอ-ขยาย, หมน และยายภาพหรอวตถทอยใน Selection (ท าหนาท

เหมอนเครองมอ Free Transform)

Eyedropper tool ใชส าหรบเลอกสบนภาพตวอยาง เพอใชระบายในจดอน

Measure tool ใชวดระยะและมมของพนท plane (มใน Photoshop CS3 รน Extended)

Zoom tool ใชปรบยอ-ขยายมมมองภาพตวอยาง

Hand tool ใชเลอนไปยงต าแหนงตางๆ บนภาพตวอยาง

เมน

ออปชนเครองมอทเลอก

แถบอธบายเครองมอ ภาพตวอยาง

เครองมอ

Plane หรอพนท

Node จดของ Plane

ยอ-ขยาย ภาพตวอยาง


4. คลกเลอก Create Plane tool ( ) ส าหรบสราง plane ใหม

5. คลกจด (node) 4 จด ทละจดทมมทงสของปกหนงสอเพอสรางเปนพนผวของ plane ผลคอจะไดเสน

โครงรางสน าเงนเปนรปสเหลยม ทงนสามารถกดคย BkSp ลบทงได กรณทก าหนดจดผด แลวเรมสราง

จดพนทใหม

6. ตอ plane ใหครอบคลมสนหนงสอ โดยการกดคย Ctrl คางไว แลวคลกเมาสทจด node ทกงกลาง เมาส

พอยเตอรจะเปลยนรป ลกศรสขาว

7. คลกลากลกศรเพอขยายพนทของ plane ใหครอบคลมสนหนงสอ

กด Ctrl คางไวแลวแลวเลอนเมาสไปวาง

ทจดปรบ

คลกจดโหนดทง 4 ดาน

พนทของ plane จะเปนโครงเสนสน าเงน

คลกลากตามแนวเพอขยาย

พนทไปดานขาง


8. ปลอยปม Ctrl เรากจะได plane ครอบคลมดานทงสองของหนงสอ

9. เราสามารถ ยอ-ขยาย พนทในลกษณะของ perspective ใหพอดกบรปทรง โดยการคลกเมาสไปทจดของ

node ใดๆ แลวลากซาย-ขวา หรอ บน-ลาง

10. เมอได plane สมบรณตามตองการแลว กท าการน าภาพเกาอทคดลอกไวในคลปบอรดมาวางบน plane

โดยการกด Ctrl และ V กจะปรากฎภาพ แตยงไมเปน perspective

11. คลกลากรปภาพทไดจากขนท 10 เขาไปในพนทของ plane (เสนโครงรางสน าเงน) แลวรปภาพนนจะถก

ปรบใหเปน perspective โดยอตโนมต (เครองมอจะเปลยนเปน Marquee tool โดยอตโนมต)

อาจกดคย Ctrl+T เพอปรบยอ-ขยายรปภาพนนได เหมอนใชเครองมอ Free Transform ทใชยอ

ขยายรปทวๆ ไป (ถารปมขนาดใหญกวากรอบคณจะมองไมเหนจดส าหรบปรบขนาดภาพซงคณ

จะตองเลอนภาพใหเหนมมหรอดานกอน จงจะปรบได)

แลวจดวางภาพใหเหมาะสมกบ plane

คลกลากภาพเขามาใน

บรเวณพนทของ plane ท

สรางไว

กด Ctrl+V เพอวางภาพทกอป

ปไวจากขนตอนท 1


12. คลกปม ok ออกจากค าสง

เมอคลกปม ok แลวคณจะไดภาพทกอปปไวนน วางอยบนรปทรงของอกภาพหนงทใชค าสง Vanishing

Point โดยภาพจะหกงอไปตามพนทของ plane ทสรางไวดงภาพ

13. การท าภาพ perspective ดวยวธการนจะท าไดเพยงครงเดยว ไมสามารถแกไขได หากท าครบ 12 ขน

แลว


ใบความรท 1.3 การดอวยพร

การดอวยพร มวธการท าเชนเดยวกบ banner หรอ poster จะตางกนตรงทขนาดของไฟลภาพท

ไมตองใหญเทา poster และความคมชดของภาพทน ามาสรางเปนการดอวยพรกไมตองมความละเอยดสง

ผลงานทออกมาจะสวยงามหรอไมกขนอยกบการเขากบของสทเลอกใช การเชอมตอของรอยตอระหวางภาพ ซง

ทงสองประเดนนจะตองอาศยการฝกฝนจนเกดความเคยชน

การสรางไฟลภาพใหมจะท าเมอตองการพนทวางส าหรบออกแบบชนงาน ซงอาจจะเทส พมพ

ขอความ หรอน าภาพถายจากไฟลอนๆ มาวางซอนกนโดยไฟลใหมทสรางจะตองก าหนดคณสมบตตางๆดงน

ขนตอนท 1 วาดรปสเหลยมผนผา ใชเครองมอ Rectangle Tool (U) ดงรป

7. คลกปม ok กจะไดไฟลใหมตามท

ก าหนด

6. เลอกสพนหลงเปน white

1. ตงชอไฟล

2. เลอกประเภทงานจาก Preset

5. ก าหนดโหมดสเปน RGB Color

3. ก าหนดขนาดภาพ

4. ก าหนด Resolution เปน 72

pixels/inch


ก าหนด layer style ดงรป

Gradient Overlay ใชส าหรบการใสส สามารถไลสในโทนตางๆ ทตองการ หรอสามารถเลอกไลสตาม

ความตอง

การก าหนด styles เปน Radial เพอใชในการก าหนดสโดยการไลเฉดสจากขางนอกในลกษณะเปนวงกลม

ดงรป

6.ก าหนด Angle เปน -35 3.คลกเลอก styles ทตองการ

4. ดบเบลคลก Effects

7.คลก OK

5.ก าหนด Style เปน Radial

1.คลกเครองมอ

2.คลกเครองมอ styles


ขนตอนท 2 วาดรป (ภเขา) การใช Pen Tool (P) ตามทแสดง

หมายเหต หากวาดไมเหมอนกบรปขางตนสามารถปรบแตงรปโดย การปรบเปลยนความโคงของเสนทวาดโดย

กด Ctrl + จดทไดวาดไว

2. วาดรปภเขาดงภาพ


3. ดบเบลคลก Effects


ก าหนด layer style ดวย Inner Glow เพอเปนการท าใหรอบๆดานในของรปมเงาปรากฏขน ดงรป

12.ก าหนด Angle เปน -49

9. ก าหนด Blend Mode เปน Normal

14.คลก Gradient 13.ก าหนด Scale เปน 100

11.ก าหนด Style เปน Linear

10.ก าหนด Opacity เปน

100%

7.ก าหนด Opacity

เปน 45

6.คลกเลอก Screen

8. เลอก Gradient

Overlay

5.เลอก Inner

Glow

4. จะปรากฏหนาตาง Layer Style


ผลลพธทไดพนทดานลางทสรางเปนภเขาจะมเงาปรากฎทขอบเสน

15.ก าหนด Gradient Typeเปน

Solid

18.คลก ok

16.ก าหนดสดงรป

17. คลก ok

จะปรากฏหนาตาง Gradient Editor


ขนตอนท 3 เลอกเครองมอ Custom Shape Tool (U) ในแถบเครองมอ ท าตามขนตอนดงรป

ลากเพอวาดตนไมมสดงรปจะปรากฎภาพตนไมอยบน layer ใหม

กอบป ตนไม ใหไดจ านวนเทาทตองการ (จ านวน layer กจะเพมขนตาม) และท าการยายต าแหนง หรอ

เปลยนขนาดของตนไมตามตองการ (โดยใช Free Transform (Ctrl+T)) และสามารถเปลยนสของตนไม ดง

รป

วาดตนไมดงรป

5.เลอกตนไมท

ตองการ 2. คลก

Shape

4.เลอก

Nature

3.คลก

เครองหมาย

1. คลกเครองมอ

หรอกดปม <U> บน

คยบอรด


ขนตอนท 4 วาดเกลดหมะ การใชเครองมอ Custom Shape Tool (U) วาดเกลดหมะใหมขนาด

แตกตางกน เปนจ านวนมากดงรป

วาดและกอปป จ านวน layer

จะเพมตามจ านวนตนไม


วาดรปภเขา ใชเครองมอ Pen Tool (P) วาดรปภเขาพรอมกบลงสดงรป

ขนตอนท 5 เลอกรปแลวใชเลอกเครองมอ Elliptical Marquee Tool เปนเครองมอ ทใชส าหรบสราง

Selection แบบวงกลมจงเหมาะทจะน าไปใชเลอก หรอตดภาพทเปนรปวงกลม หรอวงร

- เลอกเปดรปมาอก 1 รป ( File > Open… > เลอกรปทตองการ > Open )

3. แครกเมาสคลมพนทสวนท

ตองการ

2. เลอก Feather เปน 45 PX


2. วาดรปภเขาขนอก 2

ลกดงภาพ



ขนตอนท 6 เขยนขอความ โดย เลอกเครองมอ Horizontal Type Tool ( T ) เปนเครองมอทใชส าหรบเขยน

ขอความ

จากนนกก าหนด style ใหกบขอความทเขยน โดยใช style ส าเรจรปจาก style panel ดานขวามอ

2.ก าหนดขนาดตวอกษรตามตองการ

3. เขยนขอความท

ตองการ

1.เลอกเครองมอ

4. ลากภาพมาวางทบบนภาพการด

อวยพร แลวปรบขนาดตามตองการ


สรางขอความทเปนแนวโคงมน

11. คลกเลอก

10 .เขยนขอความตาม

ตองการ (ท าตาม

ขนตอนท 1-3)

13. เลอก style เปน

Flag

12.ปรากฏหนาตาง Warp

Text

14. คลก

OK

9. เลอก style ตาม

ตองการ


ไดการดอวยพรปใหมทเราสามารถสรางขนเองได


ใบความรท 1.4 การท า Poster

เปดโปรแกรม Adobe Photoshop CS3 ขนมาแลว ใหท าการสรางหนากระดาษ โดยไปท File > New จะปรากฏ

บลอกนขนมา ใหตงคาตามรป

ขนตอนท 1

1.สรางพนหลง โดย ใชเครองมอ Gradient Tool (เครองมอส าหรบไลระดบส ) เลอกสทตองการจากนนให

คลกเมาสคางแลวลากทศทางของสทตองการ


1.1 ใหน ารปภาพทตองการจะใชท าโปสเตอรเขามา โดย File > Open จากนนเลอกรปภาพทตองการ


การน าภาพมาวางกบพนหลง

2. เมอเราน าภาพทตองการมาแลว ใหใชเครองมอ Move Tool เพอเอาภาพทตองการมาใสกบพน

หลง โดยการคลกทภาพทตองการแลวลากมาวางกบพนหลง


2.1 ท าการขยายภาพใหมขนาดใหญขน โดยเลอกท Layer ภาพทตองการจะขยายกอน แลวไปทแถบ

Edit > Free Transform หรอ Ctrl+T ใหขยายภาพตามทตองการ แลวกด Enter


3. เมอขยายภาพไดตามทตองการแลว ใหเลอกเครองมอ Eraser Tool ลบขอบของรปภาพเพอให รปภาพ

มความกลมกลนกบพนหลง

- เมอเลอกเครองมอไดแลว ใหคลกขวาทรปเพอปรบขนาดของ Eraser Tool เพอใหงายตอการลบขอบของ

ภาพ

เลอก Layer ภาพทตองการกอนท าการขยายทกครง


จะไดผลลพธดงภาพ


4. ขนตอนนจะเปนการตกแตงโดยเพมขอความเขาไป ใหเลอก เครองมอ Horizontal Type Tool

ใหพมพขอความทตองการลงไป


4.1 เมอพมพขอความทตองการแลว จะมาท าการปรบตวอกษรใหโคงเขากบรปโลก โดยไปท

Warp Text > Arch ท าการปรบรปแบบตามทตองการทชอง Bend ใหปรบเปน +32% หรอตามททาน

ตองการ



5. ท าใหตวอกษรมมตมากขน ไปท Add a layer style > Blending Options…

- ท าการปรบคาตางๆ ดงนเพอใหไดขอความทมมตสวยงาม โดยตกเครองหมายถกชองทตองการ ดง

ภาพ




6. ใหตกแตงโดยเพมขอความทตองการเขาไปใหสวยงาม Horizontal Type Tool ผลลพธทไดขนอยกบ

ความคดสรางสรรค


ใบงานท 1.1 การสรางภาพพาโนรามา

1. ใหนกเรยนสรางภาพพาโนรามา ทง 5 แบบ โดยใชไฟลประกอบใบความร แลวตอบค าถาม

1.1 การสรางภาพพาโนรามาดวย layout แบบใดทใหภาพผลลพธทสวยทสด เพราะเหตใด

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

1.2 การสรางภาพพาโนรามาดวย layout แบบใดทใหภาพผลลพธทแยทสด เพราะเหตใด

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

1.3 การสรางภาพพาโนรามาดวย layout แบบใดทใชเวลานานทสด เพราะเหตใด

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

1.4 การสรางภาพพาโนรามาดวย layout แบบใดทอนญาตใหเราปรบแตงการตอภาพได

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

2. ใหนกเรยนสรางภาพพาโนรามา ทง 5 แบบ โดยใชไฟลจ านวน 4 ไฟลทไมเกยวของกน แลวตอบค าถาม

2.1 การสรางภาพพาโนรามาดวย layout แบบใดทใหภาพผลลพธทสวยทสด เพราะเหตใด

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

2.2 การสรางภาพพาโนรามาดวย layout แบบใดทใหภาพผลลพธทแยทสด เพราะเหตใด

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

2.3 การสรางภาพพาโนรามาดวย layout แบบใดทใชเวลานานทสด เพราะเหตใด

……………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………

2.4 การสรางภาพพาโนรามาดวย layout แบบใดทอนญาตใหเราปรบแตงการตอภาพได

……………………………………………………………………………………………………………………………………………………


ใบงานท 1.2 การตอภาพ Perspective

ใหนกเรยนท าปายฉลากขางกลองกระดาษ ดวยภาพเสอ ดงน

1. ท าปายเสอเตมพนทฝาดานบนของกลองเพยงดานเดยว

2. ท าปายเสอเตมพนทฝาดานขางทงสองดาน

3. ท าปายเสอเตมพนทฝาดานบน และ ดานขางทงสองดาน

4. ท าปายเสอคาดกลางพนทฝาดานบนของกลองเพยงดานเดยว

5. ท าปายเสอคาดกลางพนทฝาดานขางทงสองดาน

6. ท าปายเสอคาดกลางพนทฝาดานบน และ ดานขางหนงดาน

(แนวทางการท าแบบฝกหด ขอ 1-3 เปนการฝกท าโดยใชทกษะตามใบความร ขอ 4-6 ตองท า plane

ใหเตมพนทกอนแลวคอยลดขนาดของ plane ลง จงจะได plane ทสมมาตรกบกลอง)


ใบงานท 1.3 การดอวยพร

1. ใหนกเรยนสราง banner อวยพรวนเกดใหแกตวเองโดยประยกตใชความรจากใบความร โดยใหมรายละเอยด

ดงน

1. ไฟลขนาด 400 x 250 px

2. ใหมรปภเขาสงชนสลบกบภเขาลกเตยๆ

3. ใหใช shape ทมอยใน photoshop จ านวน 3 แบบมาประกอบ

4. ใหใชภาพอนๆ ตามตองการจ านวน 1 ภาพมาประกอบ

5. พมพขอความโคงไปตามระดบของภเขาลกเตยพรอมกบก าหนด style ให

2. ใหนกเรยนจดกลมเพอสรางการดอวยพรใหแกอาจารยผสอนตามจตนาการโดยใชภาพทหาไดทวไป แลว

น าเสนอหนาชนเรยน


ใบงานท 1.4 Poster

ใหนกเรยนสราง Poster ลดโลกรอน มา คนละ 1 Poster

1. ใหนกเรยนน ารปภาพทก าหนดใหมาท า Poster ของตวเอง อยางนอย 3 รป

2. ใหนกเรยนสรางพนหลงของ Poster โดยใชเครองมอ Gradient Tool ในการสราง

3. ใหนกเรยนสรางขอความเกยวกบการรณรงคลดโลกรอน พรอมกบตกแตงขอความใหสวยงาม


แบบทดสอบ กอนเรยน/หลงเรยน


หนวยท 1 การสรางภาพใหมโดยการใชบางสวนจากภาพอน และการใชเอฟเฟกตในการผสมภาพ

ใหนกเรยนเลอกค าตอบทถกตอง

1. ภาพพาโนรามา เปนภาพแบบใด

ก. ภาพแนวตงและยาว

ข. ภาพแนวเฉยง

ค. ภาพแนวนอนยาว

ง. ถกทกขอ

2. ภาพขนาดใดทเปนภาพพาโนรามา

ก. 800x800

ข. 1280x800

ค. 1980x1080

ง. 2500x1000

3. ภาพพาโนรามามขอดอยางไร

ก. มมมองของภาพกวางมากขน

ข. มมมองของภาพแคบกวาเดม

ค. ไดภาพทแปลกใหมกวาเดม

ง. ถกทงขอ ก และ ค

4. ค าสง Blend Image together เพอใหโปรแกรมท าอะไร

ก. เพอใหโปรแกรมจดการรอยตอระหวางภาพใหเนยนขน

ข. เพอใหโปรแกรมจดการสสนของภาพ

ค. เพอใหโปรแกรมจดการตอกนเปนวงกลม

ง. ผดทกขอ

5. ภาพแตละสวนเผอเนอทตรงรอยตอของภาพใหมรายละเอยดซ ากนประมาณกเปอรเซน

ก. 20-25%

ข. 25-30%

ค. 35-40%

ง. 40-50%


6. ค าสงใดทใชในการตดภาพทตองการใหเปนภาพพาโนรามา

ก. Crop Stamp Tool

ข. Crop Tool

ค. Clone Stamp Tool

ง. Clone Tool

7. ถารอยตอระหวางภาพยงปรากฎอยจะตองแกไขโดยใชเครองมอใด

ก. Crop Stamp Tool

ข. Crop Tool

ค. Clone Stamp Tool

ง. Clone Tool

8. ถาตองการเรยงภาพทถายมาลกษณะเปนวงกลมจะใชโหมดใด

ก. Perspective

ข. Reposition Only

ค. Cylindrical

ง. Interactive Layout

9. ใหเรยนล าดบการท าภาพพาโนรามา

ก. Photoshop ขนมา คลกทเมน File > Photomerge > Automate

ข. Photoshop ขนมา คลกทเมน File > Automate > Photomerge

ค. Photoshop ขนมา คลกทเมน Photomerge > File > Automate

ง. Photoshop ขนมา คลกทเมน Automate > File > Photomerge

10. ถาจะน ารปมาท าเปนภาพพาโนรามาตองถายภาพมาอยางไร

ก. ถายรปตามใจชอบ

ข. ถายรปเปนชอตไมจ าเปนตองตอกน

ค. ถายรปมาเปนชอตโดยตองมาสวนเหลอมล ากน


11. การปรบคา Style โดยเลอก Gradient Overlay คอ ?

ก. ใชส าหรบการใสส สามารถไลสในโทนตางๆ

ข. เปนอปกรณทใชลบสวนตางๆของภาพทเราไมตองการ

ค. ใชส าหรบปรบความคมชดของภาพ

ง. เปนการท าใหรอบๆดานในของรปมเงาปรากฏขน


12. การปรบคา Style โดยเลอก Inner Glow คอ ?

ก. ใชส าหรบการใสส สามารถไลสในโทนตางๆ

ข. เปนอปกรณทใชลบสวนตางๆของภาพทเราไมตองการ

ค. ใชส าหรบปรบความคมชดของภาพ

ง. เปนการท าใหรอบๆดานในของรปมเงาปรากฏขน

13. การ Save งานภาพจาก Photoshop เพอสามารถแกไขไดอก ควร Save เปนนามสกลใด

ก. jpeg

ข. psd

ค. swf

ง. ไดทง 3 รปแบบ

14. เครองมอ Type Tool ทใชพมพขอความคอ

ก. Move Tool

ข. Crop Tool

ค. Brush Tool

ง. Horizontal Type Tool

15. ในการ Copy ไฟลแบบงายๆสามารถใชวธใด

ก. กด Ctrl + V

ข. กด Ctrl + C

ค. กด Shift + C

ง. กด Shift + V

16. ถาหากตองการใหขอบ ภาพทน ามาใชม ความ ฟง ของภาพ ควรใชค าสงอะไร

ก. Layer

ข. Feather

ค. Color

ง. History

17. Icon เครองมอ Custom Shape Tool คอ

ก.

ข.

ค.

ง.


18. การใชเครองมอ Custom Shape Tool เพอ

ก. เปนเครองมอทใชส าหรบเขยนขอความ

ข. ใชส าหรบสราง Selection แบบสเหลยม

ค. ใชส าหรบสราง Selection แบบวงกลม

ง. เปนเครองมอทใชในการวาดรปทรงตางๆ

19. Icon เครองมอ Horizontal Type Tool คอ

ก.

ข.

ค.

ง.

20. Icon เครองมอ Rectangle Tool คอ

ก.

ข.

ค.

ง.

21. เราใชเครองมอใดในการสรางภาพแบบ perspective ได

ก. trasform

ข. photomerge

ค. Vanishing Point

ง. ถกทง ก และ ค

22. Vanishing Point คออะไร

ก. จดรวมสายตา

ข. เครองมอการสรางภาพแบบ perspective

ค. จดศนยกลางการเกด effect

ง. ถกทง ก และ ข

23. เราสามารถสราง perspective ไดกมต

ก. 1

ข. 2

ค. 3

ง. 4


24. เราสามารถ undo การสรางภาพ perspective ดวย vanishing point ไดหรอไม

ก. ได

ข. ไมได

ค. ขนอยกบความสามารถของผใช

ง. มเทคนคพเศษทท าได

25. รปภาพตนแบบส าหรบการสรางภาพ perspective ดวย vanishing point จะตองเปนอยางไร

ก. เปนภาพอะไรกได

ข. เปนภาพ perspective อยแลวแตตองเปนสไมฉดฉาด

ค. เปนภาพอะไรกไดขอใหเปนภาพสเดยว

ง. ถกทง ข และ ค

26. เครองมอใดสามารถใชเพอท าใหภาพของ 2 layer กลมกลนกน

ก. Erase Tool

ข. Layer Mask

ค. Layer Style


เฉลย

ขอ 1 2 3 4 5 6 7 8 9 10

ตอบ ค ง ง ก ก ข ค ค ข ค

ขอ 11 12 13 14 15 16 17 18 19 20

ตอบ ก ง ข ง ข ข ค ง ข ง

ขอ 21 22 23 24 25 26 27 28 29 30

ตอบ ก ง ค ข ข ง




หนวยท 2 การใชเอฟเฟกตตกแตง แกไข ภาพบคคล เวลา 4 ชวโมง

แผนการสอนท 1 เรอง การใชเอฟเฟกตตกแตง แกไข ภาพบคคล


ผสอน








1. เพอใหมความรเกยวกบเทคนคการตกแตง แกไข ภาพบคคล ดวยเครองมอพนฐาน


1. สามารถใชเครองมอพนฐานในการตกแตง แกไข ภาพบคคล ดวยเครองมอพนฐาน เพอใหไดชนงานตาม

ความตองการได


1. มวนย




การตกแตง แกไข ภาพบคคล ดวยเครองมอพนฐาน เปนกจกรรมส าคญอยางหนงของงานคอมพวเตอร

กราฟก เพราะในทกชนงานจะตองมการตกแตง แกไข ภาพบคคลเสมอๆ ดวยเครองมอพนฐานภาพ

ในโปรแกรม photoshop มเครองมอพนฐานดานส การเลอกพนท การคดลอกภาพ การสราง effect ให

layer ทหลากหลาย แตในการสรางงานหนงชนขนมา กไมจ าเปนทจะตองใชเครองมอทงหมด ซงขนอยกบ


ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการตกแตง แกไข ภาพบคคล และ ปฏบต ตกแตง แกไข ภาพ

บคคล ตามจนตนาการดวยตนเองเพอใหเกดความช านาญมากยงขน



1. ทดลองปฏบตการตกแตง แกไข ภาพบคคล ดวยเครองมอพนฐาน

2. ปฏบตตกแตง แกไข ภาพบคคล ตามจนตนาการดวยตนเอง


1. ขนน า

1. ครเกรนน าถงความส าคญของการตกแตง แกไข ภาพบคคลดวยโปรแกรมคอมพวเตอร โดย

ยกตวอยางการท างานในรานถายรป และโรงพมพในทองถน

2. ขนสอน

1. คาบท 1 ครสาธตการตกแตง แกไข ภาพบคคลตามใบความร 2.1 พรอมกบใหนกเรยนปฏบตตาม

แลวนกเรยนท างานตามใบงานท 2.1

2. คาบท 2 ครสาธตการตกแตง แกไข ภาพบคคลตามใบความร 2.2พรอมกบใหนกเรยนปฏบตตาม

แลวนกเรยนท างานตามใบงานท 2.2

3. ขนสรป

1. ทายคาบครและนกเรยนรวมกนสรปรายการเครองมอทใช และจดประสงคของการใชเครองมอ



1. ใบความรท 2.1 และ 2.2









การตกแตง แกไข ภาพบคคลดวย





-ใบงาน


การตกแตง แกไข ภาพบคคล





-ใบงาน



เพอใหไดชนงานตามความ

ตองการได


ท างาน


เวลา






ผเรยน



ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )


ใบความรท 2.1 การตกแตงใบหนา

ในใบความรนจะเปนการเรยนรวธการตกแตงใบหนา การลบสว ลบรวรอย เปนเทคนคทรานถายรปใช

ตกแตงภาพเพอใหไดภาพทดดขน ซงมวธท าดงน

วธท า

1. เมอเปดโปรแกรม Photoshop ใหเปดภาพทตองการจะตกแตงมา

2. จะท าการลบสวโดยใชเครองมอ Healing Brush Tool เลอกอนทสอง


- เมอเลอกเครองมอไดแลว ใหกด Alt ขางไว แลวคลกเมาสตรงใบหนาทไมมสว 1 ครง เพอจะเอาจด

จากทเราคลกมาลบรอยสว

- ตอไปใหท าการลบสวโดยคลกเมาสตรงรอยสวทตองการจะลบ คอยๆ ลบทละจด จนไดผลลพธท

ตองการ

- เมอลบรอยสวแลวจะไดผลลพธดงน

เมอกด Alt คางไวจะเปนดงรป

คอยๆ ลบรอยสวทละจด


3. เมอท าการลบสวบนใบหนาเปนทนาพอใจแลว ขนตอนตอไปคอ ตกแตงใบหนาใหดเนยนขน โดยใช

เครองมอ Magnetic Lasso Tool เพอเลอกสวนของใบหนาทตองการจะตกแตง


- เมอเลอกสวนของใบหนาแลว จะไดผลลพธดงน

4. เมอท าการเลอกสวนของใบหนาทตองการจะตกแตงแลว ใหเลอกเครองมอ Dodge Tool ใหปรบ

Soft Round 100 pixels เมอท าการปรบแลว ใหคลกทสวนใบหนาทตองการจะปรบใหสผวสวางขนหรอ

ขาวขน จนเปนทนาพอใจ


5. ใหเลอกเครองมอ Blur Tool เพอจะท าการเบลอใหใบหนาดเนยนขน

- คลกเมาสทใบหนาทตองการจะท าใหเนยนขน จนเปนทนาพอใจ ดงรป

- เมอท าการเบลอเพอใหใบหนาดเนยนขนแลวใหกด M บนคยบอรด และคลกทรป จะไดผลลพธ ดงน


6. ใหท าการบนทกภาพ

- การบนทกรปภาพใหเลอกบนทกเปนนามสกล .PSD กบ .JPEG

.PSD คอไฟล Photoshop ซงท าใหสามารกลบมาแกไขได

.JPEG คอไฟลทพรอมน าไปใชงาน

File > Save As… เลอกนามสกลของภาพทตองการบนทก

ผลลพธภาพ กอน และหลง การตกแตง

ใบความรท 2.2 การเปลยนสรมฝปาก

1. เมอเปดภาพขนมา ใหท าการกอปปเลเยอร เพราะจะไมแตะตองภาพตนฉบบเดดขาด จะใชวธลากเลเยอรมาท

ปม Create a new layer หรอใชคยลด Ctrl + J กได


2. ท าการเลอกสวนของรมฝปาก โดยใชเครองมอ Quick Selection (คยลด W ) จาก Toolbox ทออฟชนบาร ให

คลกเลอก Auto-Enhance

- จากนนเลอนเครองมอ Quick Selection มาไวทบรเวณปาก แลวคลกเมาสคางไว จากนนใหลากคลมใน

สวนทตองการ

- กด Alt คางไว เครองมอ Quick Selection จะเปลยนจากเครองหมายบวก เปนเครองหมายลบ แลวท า

การลบใหสวนเกนออกจนพอดกบรปปาก ดงภาพ


3. เลอกค าสง Curves โดยคลกปม Create new fill or adjustment layer


4. ทชอง Channel RGB เราอาจเลอน Curves ขนหรอลง เพอปรบความสวางหรอความเขมของสรมฝปากตามท

ตองการ

- ทชอง Channel ใหเลอก Red ใหปรบเสนขนเพอใหรมฝปากมสสดขน

ปรบขนหรอลง ตามความตองการ

ปรบขนแลวสงเกตสรมฝปากจะเขมขน


- ทชอง Channel ลองปรบ Green , Blue ตามล าดบ จนไดผลลพธทตองการ ดงรป

5. เมอไดโทนสทตองการแลว กลบมาทชอง Channel RGB เพมความสวางของโทนสตามตองการ

เลอนไปดานซายเพอ ปรบความสวางใหรมฝปาก


6. ไปท พาเนล Layers เปลยน Blend Mode เปน Soft Light แลวลด Opacity ลงตามความเหมาะสม

และท าการ Save

ภาพกอน และหลงการตกแตง


ใบงานท 2.1 การตกแตงใบหนา

1. ถาตองการจะลบรวรอย หรอสว บนใบหนาจะใชเครองมอใด

..................................................................................................................................................

............................................................................................................................................

...............................................................................................................................................

เมอเลอกเครองมอ ใหกด Alt ขางไว แลวคลกเมาสตรงใบหนาทไมมสว 1 ครง เพออะไร

..................................................................................................................................................

............................................................................................................................................

...............................................................................................................................................

2. ถาจะท าการเลอกสวนของใบหนาเพอจะตกแตงจะใชเครองมอใด

..................................................................................................................................................

............................................................................................................................................

...............................................................................................................................................

เมอท าการเลอกสวนของใบหนาทตองการจะตกแตงแลว จะเลอกเครองมอใดเพอใหสผวสวางขนหรอ

ขาวขน

..................................................................................................................................................

............................................................................................................................................

...............................................................................................................................................

เครองมอ Blur Tool เมอใชแลวจะใหผลลพธอยางไร

..................................................................................................................................................

............................................................................................................................................

...............................................................................................................................................


ใบงานท 2.2 การเปลยนสรมฝปาก

1. จงบอกวธกอปปเลเยอร

...............................................................................................................................................

...............................................................................................................................................

...............................................................................................................................................

ถาจะท าการเลอกสวนของรมฝปาก จะใชเครองมอใด

...............................................................................................................................................

...............................................................................................................................................

...............................................................................................................................................

2. เมอใชเครองมอ Quick Selection แลวกด Alt คางไวจะเปลยนแปลงอยางไร และใชเพออะไร

...............................................................................................................................................

..................................................................................................................................................

............................................................................................................................................

3. ทชอง Channel RGB เลอน Curves ขนหรอลง จะใหผลลพธอยางไร

...............................................................................................................................................

...............................................................................................................................................

...............................................................................................................................................




หนวยท 2 การใชเอฟเฟกตตกแตง แกไข ภาพบคคล


1. การปรบคา Opacity จะมผลตอภาพอยางไร

ก. ท าใหขอบภาพฟงเบลอ

ข. ท าใหตวภาพฟงเบอล

ค. ท าใหภาพเขม-จาง จนมองทะลไปยง layer ดานลาง

ง. ท าใหภาพมขอบ

2. เครองมอใดใชคดลอกสทมอยไปใชในบรเวณอน

ก. Select tool

ข. Dodge tool

ค. Clone stamp tool

ง. Eyedropper tool

3. Dodge tool มผลตอการแกไขภาพใบหนาบคคลอยางไร

ก. ท าใหผวหนาดเนยนใสขน

ข. ท าใหใบหนาดสวางสดใสมากขน

ค. ใชลบสวออกจากใบหนา

ง. ใชลบลอยแผลทขนาดใหญกวาเมดสวใหหายไป

4. Blur tool มผลตอการแกไขภาพใบหนาบคคลอยางไร






5. Healing Brush Tool มผลตอการแกไขภาพใบหนาบคคลอยางไร





6. Patch Tool มผลตอการแกไขภาพใบหนาบคคลอยางไร





7. ความสวยงามบนใบหนาขนอยกบปจจยใด

ก. ใชเครองมอทเหมาะสมกบงาน

ข. ความใสใจในการเลอกส และ พนท

ค. ความปราณตในการระบายส และขนาดของหวแปรง


8. เครองมอใดใชในการเปลยนสได

ก. Curve

ข. Hue/Saturation

ค. Layer Style > Overlay color


9. เครองมอใดใชในการเลอกเฉพาะสทตองการโดยไมสนใจวาจะอยบรเวณเดยวกนหรอไม

ก. Magic Wand Tool

ข. Select > Color range

ค. Selective Color



10. Blend mode ของ layer จะถกใชในกรณใด

ก. ผสมภาพสอง layer เขาหากน

ข. ตดภาพจาก layer หนงโดยใชขอบเขตจากอก layer หนง

ค. ถกทงขอ ก และ ข

ง. ผดทงขอ ก และ ข

เฉลย

ขอ 1 2 3 4 5 6 7 8 9 10

ตอบ ค ค ข ก ค ง ง ง ง ก




หนวยท 3 การใชเครองมอพนฐานของโปรแกรมคอมพวเตอรกราฟกในการ

รงสรรคภาพใหม


แผนการสอนท 1 เรอง การวาดการตน


ผสอน








1. เพอใหมความรเกยวกบการสรางภาพใหมดวยเครองมอพนฐาน


1. สามารถใชเครองมอพนฐานในการสรางภาพใหมตามความตองการได


1. มวนย




การสรางภาพตามจตนาการเปนกจกรรมส าคญ เพราะภาพบางอยางหาไดยากในชวตประจ าวน ดงนน

การใชโปรแกรมคอมพวเตอรกราฟกสรางงานทตองการขนมา จงเปนทนยมใชในงานออกแบบตางๆ ไมวาจะเปน

บตรเชญ โปสเตอร หรอเวบไซต




ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการสรางภาพใหม และ ปฏบตการการสรางภาพตาม

จนตนาการดวยตนเองเพอใหเกดความช านาญมากยงขน



1. ทดลองปฏบตการสรางภาพใหม ดวยเครองมอพนฐาน

2. ปฏบตการสรางภาพใหม ตามจนตนาการดวยตนเอง


1. ขนน า

1. ครเกรนน าถงความส าคญของการสรางภาพใหม โดยใชโปรแกรมคอมพวเตอรกราฟก โดยยกตว

ชนงาน เชน เวบไซต หรอโปสเตอรทผเรยนสามารถพบเหนไดทวไป

2. แนะน ารายชอเครองมอพนฐานทตองใช ไดแก Gradient Path LayerStyle Shape Selection

2. ขนสอน

1. ครสาธตการสรางภาพใหม ตามใบความร 3.1 พรอมกบใหนกเรยนปฏบตตาม

2. นกเรยนฝกปฏบตตามใบงานท 3.1

3. ขนสรป

1. ครและนกเรยนรวมกนสรปรายการเครองมอทใชและวธการใชงานตามเปาหมายของชนงาน











การสรางภาพใหม ดวยเครองมอ

พนฐาน




-ใบงาน


การสรางภาพใหมตามความ

ตองการ





-ใบงาน


ท างาน


เวลา



ผเรยน








ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 2 เรอง การสรางภาพพนหลง


ผสอน








1. เพอใหมความรเกยวกบการสรางภาพพนหลงลายเสนดวยเครองมอพนฐาน


1. สามารถใชเครองมอพนฐานในการสรางภาพพนหลงลายเสนตามความตองการได


1. มวนย




การสรางภาพพนหลงตามจตนาการเปนกจกรรมส าคญ เพราะชวยใหภาพหลกมความสวยงาม และม

เสรมความเดนชดใหแกภาพพนหนา ดงนนการใชโปรแกรมคอมพวเตอรกราฟกสรางภาพพนหลงตามตองการ

ขนมา จงเปนทนยมใชในงานออกแบบตางๆ ไมวาจะเปนบตรเชญ โปสเตอร หรอเวบไซต


ให layer และ การสรางลายเสน ทหลากหลาย แตในการสรางงานหนงชนขนมากไมจ าเปนทจะตองใชเครองมอ

ทงหมด ซงขนอยกบเปาหมายของงานชนนน

ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการสรางภาพพนหลง และ ปฏบตการการสรางภาพตาม

จนตนาการดวยตนเองเพอใหเกดความช านาญมากยงขน



1. ทดลองปฏบตการสรางภาพพนหลง ดวยเครองมอพนฐาน

2. ปฏบตการสรางภาพพนหลงตามจนตนาการดวยตนเอง


1. ขนน า

1. ครเกรนน าถงความส าคญของภาพพนหลง โดยยกตวชนงาน เชน เวบไซต หรอโปสเตอรทผเรยน

สามารถพบเหนไดทวไป

2. แนะน ารายชอเครองมอพนฐานทตองใช เชน Path Shape Selection Filter และTransform

2. ขนสอน

1. ครสาธตการสรางภาพพนหลง ตามใบความร 3.2 พรอมกบใหนกเรยนปฏบตตาม


3. ขนสรป

1. ครและนกเรยนรวมกนสรปรายการเครองมอ และ filter ทใชและวธการใชงานตามเปาหมายของ

ชนงาน











การสรางภาพพนหลง ดวย





-ใบงาน


การสรางภาพพนหลงตามความ

ตองการ





-ใบงาน


ท างาน


เวลา


ผเรยน









ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 3 เรอง การสรางอกษรประดษฐ


ผสอน








1. เพอใหมความรเกยวกบการสรางอกษรประดษฐ


1. สามารถใชเครองมอพนฐานในการสรางอกษรประดษฐตามความตองการได


1. มวนย




การสรางตวอกษรทมสสนและเอฟเฟกตทท าใหสวยงาม สดใสเกนธรรมดา กเปนกจกรรมส าคญอยาง

หนงในการสรางงานกราฟก ดงนนการใชโปรแกรมคอมพวเตอรกราฟกสรางอกษรประดษฐตามตองการขนมาจง

เปนทนยมใชในงานออกแบบตางๆ ไมวาจะเปนบตรเชญ โปสเตอร หรอเวบไซต

ในโปรแกรม photoshop มเครองมอพนฐานดานส ตวอกษร path และ filter ทชวยใหเราสามารถสราง

ตวอกษรประดษฐหลากหลายรปแบบ แตในการสรางงานหนงชนขนมากไมจ าเปนทจะตองใชเครองมอทงหมด ซง

ขนอยกบเปาหมายของงานชนนน

ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการสรางตวอกษรประดษฐ และ ปฏบตการการสรางตวอกษร

ประดษฐตามจนตนาการดวยตนเองเพอใหเกดความช านาญมากยงขน



1. ทดลองปฏบตการสรางตวอกษรประดษฐ ดวยเครองมอพนฐาน

2. ปฏบตการสรางตวอกษรประดษฐตามจนตนาการดวยตนเอง


1. ขนน า

1. ครเกรนน าถงความแตกตางของความงามของชนงานทใชตวอกษรธรรมดา และ ตวอกษรประดษฐ

เชน เวบไซต หรอโปสเตอรทผเรยนสามารถพบเหนไดทวไป

2. แนะน ารายชอเครองมอพนฐานทตองใช เชน Path Shape Text Selection Filter เปนตน

2. ขนสอน

1. ครสาธตการสรางตวอกษรประดษฐ ตามใบความร 3.3 พรอมกบใหนกเรยนปฏบตตาม


3. ขนสรป


ชนงาน











การสรางตวอกษรประดษฐดวย





-ใบงาน


การสรางตวอกษรประดษฐตาม

ความตองการ





-ใบงาน


ท างาน


เวลา



ผเรยน








ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 4 เรอง การสรางภาพพนหลงเรองแสง


ผสอน








1. เพอใหมความรเกยวกบการสรางภาพพนหลงเรองแสงดวยเครองมอพนฐาน


1. สามารถใชเครองมอพนฐานในการสรางภาพพนหลงเรองแสงตามความตองการได


1. มวนย




การสรางภาพพนหลงตามจตนาการเปนกจกรรมส าคญ เพราะชวยใหภาพหลกมความสวยงาม และม

เสรมความเดนชดใหแกภาพพนหนา ดงนนการใชโปรแกรมคอมพวเตอรกราฟกสรางภาพพนหลงตามตองการ

ขนมา จงเปนทนยมใชในงานออกแบบตางๆ ไมวาจะเปนบตรเชญ โปสเตอร หรอเวบไซต


ให layer และ การสรางการเรองแสงทหลากหลาย แตในการสรางงานหนงชนขนมากไมจ าเปนทจะตองใช

เครองมอทงหมด ซงขนอยกบเปาหมายของงานชนนน

ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการสรางภาพพนหลงเรองแสง และ ปฏบตการการสรางภาพ

เรองแสงตามจนตนาการดวยตนเองเพอใหเกดความช านาญมากยงขน



1. ทดลองปฏบตการสรางภาพพนหลงเรองแสง ดวยเครองมอพนฐาน

2. ปฏบตการสรางภาพพนหลงเรองแสงตามจนตนาการดวยตนเอง


1. ขนน า

1. ครเกรนน าถงความส าคญของภาพพนหลง โดยยกตวชนงาน เชน เวบไซต หรอโปสเตอรทผเรยน

สามารถพบเหนไดทวไป

2. แนะน ารายชอเครองมอพนฐานทตองใช เชน Path Gradient Selection Filter

2. ขนสอน

1. ครสาธตการสรางภาพพนหลง ตามใบความร 3.4 พรอมกบใหนกเรยนปฏบตตาม


3. นกเรยนแยกกลมปฏบตตามใบงานท 3.4 แลวน าเสนอผลงานหนาชนเรยน

3. ขนสรป


ชนงาน











การสรางภาพพนหลงเรองแสง

ดวยเครองมอพนฐาน




-ใบงาน


การสรางภาพพนหลงเรองแสง

ตามความตองการ





-ใบงาน

3. มวนย ใฝเรยนร มงมนในการ -เขาหองเรยนตรง -การสงเกตการณ ผเรยน



ท างาน

เวลา







ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา





ผลงานกลม ใหคะแนนเรยงล าดบตามความสวยงาน หรอ เทคนคทใช หรอประเดนอนทครเหน

ควร






....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )







แผนการสอนท 5 เรอง การสราง Icon


ผสอน








1. เพอใหมความรเกยวกบการสรางภาพ Icon ส าหรบเวบไซตหรองานอนๆ


1. สามารถใชเครองมอพนฐานในการสราง Icon ตามความตองการได


1. มวนย




การสราง Icon เปนกจกรรมส าคญ เพราะเรามกจะพบเหน Icon สวยๆ ในเวบไซต หรอในสอโฆษณา

ตางๆ เพอเสรมความเดนชด และความสวยงามใหแกชนงาน ดงนนการใชโปรแกรมคอมพวเตอรกราฟก Icon

ตามตองการขนมา จงเปนทนยมใชในงานออกแบบตางๆ ไมวาจะเปนบตรเชญ โปสเตอร หรอเวบไซต


ให layer และ การสรางการรปทรงส าเรจรปทหลากหลาย แตในการสรางงานหนงชนขนมากไมจ าเปนทจะตองใช

เครองมอทงหมด ซงขนอยกบเปาหมายของงานชนนน

ในบทเรยนน ผเรยนจะไดทดลองปฏบตในการสราง Icon และ ปฏบตการการสราง Icon ตามจนตนาการ

ดวยตนเองเพอใหเกดความช านาญมากยงขน



1. ทดลองปฏบตการสราง Icon ดวยเครองมอพนฐาน

2. ปฏบตการสราง Icon ตามจนตนาการดวยตนเอง


1. ขนน า

1. แนะน ารายชอเครองมอพนฐานทตองใช เชน Path Gradient Selection Filter เปนตน

2. ขนสอน

1. ครสาธตการสรางภาพ Icon ตามใบความร 3.5 พรอมกบใหนกเรยนปฏบตตาม



3. ขนสรป


ชนงาน











การสราง Icon ดวยเครองมอ

พนฐาน




-ใบงาน


การสราง Icon ตามความตองการ





-ใบงาน


ท างาน


เวลา



ผเรยน








ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา





ผลงานกลม ใหคะแนนเรยงล าดบตามความสวยงาน หรอ เทคนคทใช หรอประเดนอนทครเหน

ควร






....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )


ใบความรท 3.1 การวาดการตน

ในหนวยการเรยนรนจะเนนการใชเครองมอพนฐานทมมากบโปรแกรม photoshop เพอรงสรรค

สงใหมๆ โดยความรทไดจากหนวยการเรยนรนสามารถน าไปประยกตไดหลากหลายไมวาจะเปนการสรางภาพ

เพอใชส าหรบการท าเวบไซต หรอปายโฆษณา

ภาพการตนคอภาพทไมใชความเปนจรง ดงนนการใชรปทรง สสน และ ลวดลายสามารถเลอกใช

ไดตามจตนาการ ขอใหผลงานทไดมความสวยงาม สดใส กเพยงพอแลว

ในบทเรยนนจะเปนการฝกใชเครองมอพนฐาน การใชสและการสรางแสง เงาขนพนฐาน เพอ

สรางตวการตนทรปทรงใกลเคยงรปทรงเรขาคณต

ผลลพธทตองการ : ตวการตนทใกลเคยงรปทรงเรขาคณต ทมการแตงแสงและเงาไมมากนก

วธท า:

1. เปดโปรแกรม Adobe Photoshop CS3

2. ท าการสราง File เอกสารงานใหม

2.1) คลกทเมน File > New

2.2) ก าหนดรายระเอยดของ File ทเราจะสราง

Name = ก าหนดชอ File ทเราจะสราง

Width = ก าหนดความกวางของ File

Height = ก าหนดความสงของ File

Resolution = ก าหนดความละเอยดของภาพ


Color Mode = เลอกโหมดสของภาพ

Background Content = เลอกลกษณะของพนหลง ซงมอย 3 แบบ คอ

- White : ใหพนหลงมสขาว

- Background Color : ใหพนหลงเปนสตามทก าหนด

- Transparent : ใหพนหลงเปนแบบโปรงใส

File ภาพ ทไดเมอสรางเสรจ โดยพนหลงก าหนดเปนแบบ Transparent

3. สรางภาพการตน ในสวนของพนหลงบรเวณใบหนา เพราะนาจะเปน layer ลางสด

2) คลกเลอกเครองมอ Ellipse Tool ท Toolbox

1) ก าหนดสใหเปนสด า

3) ในสวนของ Options Bar ใหคลกเลอกรปสเหลยมและรปวงกลม


File ภาพ ทไดหลงจากสรางรปภาพในสวนทเปนพนหลงสด า

หมายเหต...การเรยงล าดบภาพหนา-หลง ของแตละ Layer สามารถท าไดเมอใดกไดโดยการคลกสลบ

Layer ในสวนพาแนล Layer

4. สรางภาพการตน ในสวนทเปนพนหลงของปากและคางสครม

4.1 คลกเพอท าการสราง Layer ใหม ในสวนของพาแนล Layer

4.2 ก าหนดสใหเปนสครม

4.3 คลกเลอกเครองมอ Ellipse Tool ท Toolbox

4.4 ในสวนของ Options Bar ดานลางเมน ใหคลกเลอกรปสเหลยมเพอเปนการวาดเพอระบายส และ รป

วงกลม เพอเปนการยนยนการวาดทรงกลม แลววาดรปทรงคลายคาง ดงภาพ

ภาพทไดหลงจากการสราง Layer และสามารถเปลยน

ชอของ Layer โดยดบเบลคลกท Layer โดยจะท าการ

สราง Layer ทกชนสวนของรปภาพ เพอใหงายตอการ

แกไขภาพ


File ภาพ ทไดหลงจากสรางรปภาพในสวนทเปนพนหลงปากและคางสครม

5. ปรบแตงรปทรงของปากและคางสครม

5.1 คลกเลอก Layer ปากและคางสครม

5.2 คลกเลอกเมน Edit > Transform > Warp

หมายเหต...สามารถปรบเปลยนการหมนของรปภาพไดโดยการคลกเลอกเมน Edit >Free Transform


File ภาพ ทไดหลงจากการปรบแตงรปทรงในสวนของปากและคางสครม

6. สรางภาพการตน ในสวนทเปนพนหลงดวงตาสครม

6.1 ท าการสราง Layer ใหม ส าหรบรปภาพในสวนทเปนพนหลงตวงตาสครม

6.2 คลกเลอกเครองมอ Ellipse Tool ในสวน Toolbox

6.3 ก าหนดสใหเปนสครม เพอใชสรางรปภาพในสวนทเปนพนหลงดวงตาสครม

6.4 ในสวนของ Options Bar ใหคลกเลอกรปสเหลยมและรปวงกลม แลววาดลงลเพอสรางพนดวงตา

File ภาพ ทไดหลงจากสรางรปภาพในสวนทเปนพนหลงของดวงตาสครม

6.5 ท าการ Copy Layer ดวงตาซายเพอสรางในสวนทเปนพนหลงของดวงตาขางขวา โดยการลาก Layer

มาใสท Create a new layer


6.6 หากไมเหนดวงตาดานขวาปรากฎ (เพราะต าแหนงไปทบกบดวงตาดานซาย) กใหใช Move Tool ลาก

ดวงตาขางขวาขยบไปดานขวาพอประมาณ กจะไดผลลพธดงภาพ

File ภาพ ทไดหลงจากท าการ Copy Layer ในสวนทเปนพนหลงของตาสครม

7. สรางภาพการตน ในสวนทเปนดวงตา

7.1 ท าการสราง Layer ใหม ส าหรบรปภาพในสวนทเปนดวงตาสขาว


7.3 ก าหนดสใหเปนขาว เพอใชสรางรปภาพในสวนทเปนดวงตาสขาว

7.4 ในสวนของ Options Bar ใหคลกเลอกรปสเหลยมและรปวงกลม

7.5 ท าการสราง Layer ใหม ส าหรบรปภาพดวงตาสขาว แลววาดดวงตาสขาวขางซาย

7.6 ท าการสราง Layer ใหม ท าการสรางภาพดวงตาสด าขางซาย

7.7 ใส แสง เงาใหกบดวงตาสด า โดยการเลอกท layer ดวงตาสด าขางซาย

7.8 คลกรปสราง effect > Drop Shadow.. แลว

- ก าหนด blend mode เปน normal หรอ Multiply

- Opacity เทากบ 75

- Angle เทากบ 120


7.9 อาจตกแตงเพมเตมดวยการใชเครองมอ Brush Tool ระบายส หรอ Transform เพอใหดวงตาเอยงตาม

ตองการ

7.10 ท าการ Copy Layer ดวงตาสขาวและสด า ขางซาย เพอใหไดรปภาพดวงตาขางขวา

8. สรางภาพการตน ในสวนทเปนห

8.1 ท าการสราง Layer ใหม ส าหรบรปภาพในสวนทเปนห


8.3 ก าหนดสใหเปนสด า เพอใชสรางรปภาพในสวนทเปนห

8.4 ในสวนของ Options Bar ใหคลกเลอกรปสเหลยมและรป

วงกลม


8.5 ท าการ Copy Layer ในสวนทรปภาพห เพอใหไดรปภาพหอก 1 ขาง

***หมายเหต...สามารถปรบเปลยนทศทางของรปภาพห โดยการใชเรองมอ Free Transform ได

9. สรางภาพการตน ในสวนทเปนจมก

9.1 ท าการสราง Layer ใหม ส าหรบรปภาพในสวนทเปนจมก


9.3 ก าหนดสใหเปนสด า เพอใชสรางรปภาพในสวนทเปนจมก

9.5 ตกแตงจมกใหเปนประกาย


วงกลม

คลกเลอกเครองมอ Brush Tool ในสวนของ Toolbox และก าหนดสให

เปนสขาว


***หมายเหต...หรอสรางจมกโดยการคดลอก layer ทเปนดวงตา แลว transform ใหอยในแนวนอน

10. สรางภาพการตน ในสวนทเปนปาก

10.1 ท าการสราง Layer ใหม ส าหรบรปภาพในสวนทเปนปาก


10.3 ก าหนดสใหเปนสด า เพอใชสรางรปภาพในสวนทเปนปาก

10.5 ท าการปรบเปลยนรปทรงและตกแตงปากใหสวยงามดวยการเตมลกยม โดยใชเครองมอ

เครองมอ Brush Tool ในสวนของ Toolbox และ Transform

10.6 ท าการสราง Layer ใหม ส าหรบรปภาพในสวนทเปนลน

10.7 ก าหนดสใหเปนสแดง เพอใชสรางรปภาพในสวนทเปนลน

10.8 ใชเครองมอ Brush Tool ในสวนของ Toolbox และ Transform ในการสรางรปภาพลน


วงกลม


File ภาพ ทสรางเสรจสมบรณ

11. ท าการ Save File รปภาพทสรางเสรจสมบรณ

11.1 ก าหนดรายละเอยดในการจดเกบ File

- เลอก Drive หรอ Folder ทตองการจดเกบ File

- File Name : ก าหนดชอทตองการจะ Save

- Format : ก าหนดนามสกล File ถาตองการบนทกเพอใชในการแกไขครงตอไป

ใหบนทกเปนไฟลนามสกล .psd แตถาตองการบนทกเพอน าไฟลไปใช

งานใหบนทกเปนไฟลนามสกล .gif , jpg หรอ png

11.2 คลกปม Save


ใบความรท 3.2 การสรางภาพพนหลง

ภาพพนหลงเปนภาพทใชเนน เสรมใหภาพเบองหนาโดดเดน ดงนน การท าภาพพนหลงนนก

จะตองดศกษาการจดองคประกอบเมอไปรวมเขากบภาพเบองหนาแลวจดเดนของภาพพนหลงจะตองไมซอนทบ

กบภาพพนหนา

แตหลายครงภาพพนหลงไดชวยใหภาพพนหนามความนาสนใจมากกวาตอนทไมมภาพพนหลง

เชน ภาพดานซายเมอเปลยนภาพพนหลงใหมกท าใหภาพมความนาสนใจมากขน ซงสรปไดวาความสวยงามไมได

ขนอยกบการใชเอฟเฟกตขนสงเสมอไปแตจะตองอาศยความปราณต การเลอกชดสทเขากน และการวาง

ต าแหนงทเหมาะสม

ตามความเหนของผเขยนเหนวาภาพพนหลงททมองคประกอบใกลเคยงเรขาคณตนน จะเหมาะ

กบภาพเบองหนาทไมมรปทรงแนนอน และในทางกลบกนภาพเบองหนาทมรปทรงเรขาคณตกบเหมาะสมกบภาพ

พนหลงทไมมรปทรง

ในบทเรยนนผเรยนจะไดเรยนรวธการท าภาพพนหลงทคลายเสนตรง หรอทรงเรขาคณต

เนองจากมการดดรปทรงไมมาก ผเรยนจะไดเหนวาความสวยงามทเกดขนไมไดขนอยกบการใชเอฟเฟกตขนสง

เพยงอยางเดยว แตจะตองอาศยความปราณต การเขากนของชดส และการวางต าแหนงทเหมาะสม


ผลลพธทตองการ: ภาพพนหลงทสรางจากรปทรงเรขาคณต ทใชไมเนนการสรางแสง เงาใหส

เครองมอทใช :

- Polygonal Lasso Tool

- Paint Bucket Tool

- Brush Tool

วธท า

1. เปดโปรแกรม Photoshop CS3 จากนนเลอกเมน File New…

2. ตงชอไฟลภาพ , ก าหนดขนาด และเลอกสพนหลงเปนสขาว จากนนใหกด OK

3. คลกปม Create a new layer เพอสราง Layer ขนมาใหม


4. ดบเบลคลกทชอ Layer1 ใหเปลยนชอเปน Line แลวกด Enter

5. คลกเลอกเครองมอ Polygonal Lasso Tool

6. ใชเครองมอวาดใหเปนรปสามเหลยม ดงรป

7. เลอกเครองมอ Paint Bucket Tool จากนนคลกเลอกสทตองการ (จากภาพขอเลอกใชสเขยว)


8. คลกเทสลงไปในเสนประรปสามเหลยม

9. เลอกเมน Select Deselect

10. ตอไปเราจะมาเปลยนแปลงรปสามเหลยมใหมความโคง โดยการเลอกเมน Filter Distort

Shear…

11. ปรบความโคงตามทตองการ จากนนกด OK


12. เลอก Edit Free Transform เพอปรบขนาดและหมนภาพ หรอจะกด Ctrl + T กได

13. หมนภาพแลวจดวางในต าแหนงทตองการ จากนนกด Enter


14. ท าการ Copy เลเยอรทชอวา Line โดยการคลกคางไวแลวลากลงมาวางตรงเครองมอ Create a new

layer

15. จะไดผลลพธ ดงรป

16. จากผลลพธขอท 15 เมอมการ Copy เลเยอร ภาพเสนโคงสเขยวจะถกวางซอนกนไว ใหคลกทภาพ

เสนโคงแลวลากมาวางไวขางๆกน ดงรป

17. เลอกเมน Edit Transform Flip Vertical

คลกตรงนแลวลากขนไปวางไวขางๆ


18. จะไดผลลพธ ดงรป

19. กด Ctrl + T เพอปรบขนาด จากนนเลอกปรบคาความโปรงใสตรงค าวา Fill เปน 50%

20. สราง Layer เพมขนมาอก 1 เลเยอร แลวเปลยนชอเปน Line2


21. ใชเครองมอ Polygonal Lasso Tool สรางรปสามเหลยมขนมาอก 1 รป แลวลงสใหเรยบรอย

22. เลอกเมน Filter Distort Shear… แลวปรบความโคง ดงรป

23. กด Ctrl + T เพอน ามาจดวางแลวใหปรบคาความโปรงใสเปน 80%


24. สราง Layer ขนมาใหม แลวตงชอวา circle

25. เลอกใชเครองมอ Brush Tool

26. เปลยนรปรางของเครองมอเปน Assorted Brushes จากนนกด OK


27. เลอกแบบ Brush ดงรป

28. เลอกสของ Brush จากนนน ามาตกแตงตามทตองการ


29. หากตองการเปลยนขนาดของ Brush ใหคลกขวาแลวปรบขนาดตามทตองการ

30. สราง Layer ขนมา แลวตงชอวา flower

31. เลอก Brush ทมชอวา Special Effect Brushes


32. เลอก Brush แลวเลอกสทตองการ


33. เตมดอกไมใหไดผลดงภาพ



ใบความรท 3.3 อกษรประดษฐ

ตวอกษรหรอตวหนงสอทสวยงามนน กเปนทนยมใชในงานออกแบบ ไมวาจะเปนตวอกษร

แปลกๆ ทสวยงามกวา Cordia New หรอตวอกษรธรรมดาแตมการตกแตงสสน ลวดลายและลกเลนอนเขาไป

ในการสรางเอฟเฟกตนนสงส าคญคอความใสใจในรายละเอยดเพอทจะไดผลงานทสวยงามปราณต

ในบทเรยนนผเรยนจะไดเรยนรการสรางอกษรประดษฐหลากหลายเอฟเฟกตเพอจะไดเปน

แนวทางส าหรบประดษฐตวอกษรทแปลกใหมได

ตวอกษรเปลวไฟ

วธท า

1. ท าการพมพตวอกษรโดยใชเครองมอ Horizontal Type Tool ท Toolbox

เครองมอ Horizontal Type Tool

***หมายเหต...หลงจากทสรางตวตวอกษรแลว File ทไดกจะเปน File ตวอกษร ดงนนจงตองท าใหเปน

File ภาพ โดยการคลกขวาท Layer ตวอกษร > คลกเลอก เลอกค าสง Rasterize Type

2. ท าการใส Effect ใหกบตวอกษร

1) คลกท Filter ในสวนของ Options Bar > Blur > Gussian Blur ปรบคา Radius ใหขอบตวหนงสอเบลอ

เลกนอย ดงภาพ


2) ท าการหมนตวอกษร โดยคลกท Images ในสวนของ Options Bar > Rotate Canvas >

90 CW

3) คลกท Filter ในสวนของ Options Bar > Stylize > Wind ใหท าการปรบคาตางๆ เพอใหตวอกษรขาด

หายเหมอนถกไฟใหมไป ดงภาพ (ทตองหมนภาพกอนเพราะ Wind ไมม direction แบบบน-ลาง) หากเสนฟงส

ขาวนอยเกนไปกใหท า Wind ไปเรอยๆ (หรอกด Ctrl+F) จนกวาจะไดการฟงทพอใจ

4) ท าการหมนกลบมาทเดมโดยคลกทค าสง Images ในสวนของ Options Bar >

Rotate Canvas > 90 CCW


5) ใส Effect ท าไฟใหเคลอนไหวโดยคลกทค าสง Filter > Distort > Ripple โดยปรบคา Amount ประมาณ

70% (ขนอยกบความตองการ)

6) ท าการสราง Layer ใหมเพอจะสรางเชดสเปนไฟลก

7) สรางพนทส าหรบท าเชดส โดยใช Rectangular Marquee tool แลวเลอกพนทใหคลอบคลม

ตวหนงสอ


8) ท าการก าหนด Foreground และ Background ท Toolbox ใหเปนสแดงและเหลองเพอเลยนแบบสของ

เปลวไฟ

ดบเบลคลก หลงจากนนก าหนดใหเปนสแดงและสเหลอง

9) ใชเครองมอ Gradient Tool ท Toolbox ไลเฉดแบบ Foreground to Background > หลงจากนนใหไลเฉด

สลงบนสวนท Selection

คลกเลอกเครองมอ Gradient Tool

ในสวนของ Options Bar ใหคลกเลอกดงน

ท าการสรางเชดสดงภาพ


10) ก าหนดให layer ใหมนเปนท าการดบเบลคลกท Layer ทสรางขนมาใหม > ก าหนด Blend Mode ให

เปน Overlay


ทงนสามารถลองเปลยน blend mode เปนอยางอนเพอจะไดสสนเปลวไฟทแปลกใหม เชน Soft light หรอ

Color burn


หมะบนตวอกษร


2. ท าการพมพตวอกษรโดยใชเครองมอ Horizontal Type Tool ท Toolbox

3. ท าการใส Effect หมะลงบนตวอกษร

1) ดบเบลคลกท Layer ตวอกษร > ท าการตงคา Bevel and Emboss เพอท าใหตวอกษรดนนขน และ

Stroke เพอสรางเสนขอบตวหนงสอ ดงภาพ


File ภาพ ทไดหลงจากท าการตงคา Bevel and Emboss และ Stroke

2) ท าการสราง Layer ใหม

3) ดบเบลคลก Layer ทสรางขนมาใหม > ท าการตงคา Inter Glow และ Bevel and Emboss ดงภาพ

เพอเปนการตงคาเงา การยกนน ของหมะไวลวงหนา ดงนนตวอกษรหรอรปทรงทจะเตมใน layer นกจะมลกษณะ

คลายหมะ แตสามารถกลบมาแกไขหลกจากท าขนท 4 กได


4) คลกเลอกเครองมอ Brush Tool ท Toolbox แลวก าหนดใหเปนสขาว

เลอกเครองมอ Brush Tool แลวก าหนดใหเปนสขาว

5) ท าการระบายลงบนตวอกษร

File ภาพ ทเสรจสมบรณจากการสรางหมะลงบนตวอกษร


ตวอกษรใหเหมอนเนยแขง


2. ท าการพมพตวอกษรสเหมอนเนยแขงโดยใชเครองมอ Horizontal Type Tool ท Toolbox

***หมายเหต...หลงจากทสรางตวตวอกษรแลว File ทไดกจะเปน File ตวอกษร ดงนนจงตองท าใหเปน

File ภาพ โดยการคลกขวาท Layer ตวอกษร > คลกเลอก เลอกค าสง Rasterize Type


1) คลกเลอก Elliptical Marquee Tool เพอลบพนทตามขอบของขอความ เพอใหมลวดลายคลายถกหน

แทะ ไดตามชอบใจ

2) ท าการก าหนด Foreground และ Background ท Toolbox ใหเปนสสมและสเหลอง



3) ดบเบลคลกท Layer แลวท าการตงคา Gradient Overlay(เชดสบนตวหนงสอ) , Bevel and Emboss

(อกษรนน) และ Drop Shadow(สรางเงา) ดงภาพ

4) สรางรอยเจาะตรงกลาง โดยการท าสราง layer ใหม


5) คลกเลอกเครองมอ Elliptical Marquee Tool ท Toolbox จากนนวาดรปวงกลมหลายๆรปบนตวอกษร

โดยการกด Shift คางไว

6) เตมสลงในพนทรอยเจาะ โดยเมน Edit > Fill หรอ กด Shift + Backspace ท Keyboard หลงจากนนตง

คา Use ใหเปน Color แลวเลอกสสม

7) ดบเบลคลกท Layer ทสรางขนมาใหม และท าการตงคา Inner Shadow เพอสรางเงาด าในหลมเจาะ

ดงภาพ


สรางเลอดบนตวอกษร


2. ท าการก าหนด Background ใหเปนสด า โดยการใชเครองมอ Paint Bucket Tool เพราะสด าจะท าใหสแดงซง

เปนเลอดเดนชด


คลกเลอกเครองมอ Paint Bucket Tool

3. ท าการพมพตวอกษรสขาวโดยใชเครองมอ Horizontal Type Tool ท Toolbox



1) ดบเบลคลกทไฟลตวษร และท าการตงคา Bevel and Emboss ดงภาพ

จะไดผลลพธ ดงน

2) ท าการสราง Layer ใหมโดยการคดลอกจาก layer ตวอกษรสขาว (ตอนนจะ

ม 2 layer ดานบนเปนสขาว และดานลางกเปนสขาว)

3) คลกท Layer บน แลวเปลยนตวอกษรใหเปนสแดง ตอน layer บนเปนสแดง ลางเปนสขาว


4) เปลยน File ใหเปน File ภาพ โดยการคลกขวาท Layer ตวอกษร > คลกเลอก เลอกค าสง Rasterize

Type

5) คลกเลอกเครองมอ Eraser Tool แลวลบพนทบางสวนของตวอกษรสแดงเพอใหทะลเหนตวอกษรส

ขาวดานลาง ตามความตองการ

6) คลกเลอกเครองมอ Smudge Tool ท Toolbox แลวคลกลากลงบรเวณรอยตอสแดงกบสขาวเพอท า

เลอดหยดบนรปภาพ

เครองมอ Smudge


สรางตวอกษรหลากสสน

1. ท าการสราง File เอกสารงานใหมขนาด 1600x1200pixels

2. ท าการก าหนด Background ไลเฉดสมวงด า โดยใหรหสส #392354 และ #593b70

3. เรยกใชเครองมอ Ellipse Tool ก าหนดตวเลอกเปนการสราง Path จากนน สรางวงกลมขนมา

4. ใช Pen Tool (P) เพอตดบางสวนของ path ออกเพอจะไดกลายเปนอกษร C โดยการ เพม anchor point

จ านวน 2 จด แลวท าการลบเสนทตอระหวาง 2 จดออกไป


5. สรางตวอกษรตามแนว path โดย

1) การก าหนดขนาดของ Brush Tool ใหปน 80px สขาว

2) สราง layer อนใหม

3) ท าการ stroke path จะไดผลดงภาพ

4) ใหคงเสน path ไว ส าหรบท าสอนตอไป

6. ตกแตงลวดลายเพมเตม โดยการท าซ าขอ 4 และ 5 เพอใหไดผลลพธเปนล าดบขนดงน

1600 pixels wide and 1200


ผลลพธจะเปนตวอกษร C ทม 5 แถบส แตละแถบส จะอยคนละ layer

7. ระบายสใหแตละแถบส โดยเรมจากสขาวลางสดใหเปลยนเปนสมวง โดยก าหนด layer style ดงภาพ

8. หากผลลพธแตกตางไปมากกใหไปก าหนดตวเลอก Blending Option ดงน


9. ใสสใหแถบสทเหลอ ดงน


10. ใชวธการเดมเพอสรางเสนโคงตามความยาว ดงน


11. ตกแตงความงามไปเรอยๆ

12. หากใชวธการเดยวกนสรางเปนขอความแลวตกแตง กจะสามารถสรางภาพดงตวอยางนได


ใบความรท 3.4 ภาพพนหลงเรองแสง

การสรางวตถเรองแสงนนใชเครองมอไมมากนก และใชสทไมมากเชนกน ทงนการทจะไดภาพท

สวยงามจะขนอยกบ การเขากนของสทเลอกทงในเรองของสและระดบความเขมของส การจดวางต าแหนงของ

องคประกอบตางๆ ซงเทคนคเหลานมกถกใชในการสรางปายโฆษณาตางๆ ไมวาจะเปน banner หรอ โปสเตอร

ในใบความรนผเรยนจะไดเรยนรเทคนคในการท าพนเรองแสงทใชมากกวา 1 สผสมกน และการ

สรางเสนโคงอสระทเรองแสง

ผลลพธทตองการ ภาพพนหลงเรองแสงพรอมเสนเรองแสง

เครองมอทใช Pen Tool , Brush Tool, Layer Style , Clouds, Chrome

วธท า

1. สรางไฟลภาพขนาด 500x500 px

2. สรางสพนหลงแบบไลระดบสแบบรศม (Gradient Tool) โดยก าหนดรายละเอยด

- Foreground color รหสส #922f00

- Background color รหสส #000000

- ไลระดบสแบบ Foreground to Background

- เลอก Radial Gradient

- ลาก cursor เพอสราง gradient ตามแนวเสนสขาว จะไดผลลพธดงภาพ


3. ในบทเรยนนตองการใหตรงกลางแสงสน าตาลมสสวางมากกวาน จงใชวธคดลอกเลเยอร

background ขนมาอกหนงอนไวดานบน แลวก าหนด blending เปน Color Dodge และ opacity เปน

30%

blending mode มหลายแบบใหเลอก ซง darkening lightening colorizing ones inverting

Overlay หรอ Color กสามรถใชไดเชนกน แตส าหรบตวอยางน Color Dodgeจะใหแสงสวางทสวยกวา

4. สรางพนผว (Texture) คลายควนบางๆ โดยการสราง layer ขนมาใหมดานบนเพอเตยมพนท จากนน

ก าหนดสแลว Foreground Color เปน #ffffff Blackground Color เปน #000000 จากนนเลอก Filter

> Render > Clouds (โดยสามารถเลอกรปแบบเมฆไดตามใจชอบ)


5. จากนนเพมดดแปลงใหคลายควนมากยงขนโดยการเลอก Filter > Sketch > Chrome โดยก าหด

detail เปน 4 และ smoothness เปน 7


6. ออกจากหนาจอ Chrome แลวก าหนดคา Blend mode และ opacity ของ layer ควน เปน Overlay

และ 30% ตามล าดบ จะไดผลลพธตามภาพ

7. ตบแตงเพมเตมดวยเฉดแสงสฟาทมมซายบน เฉชแสงสเหลอทมมซายลาง และ เฉดแสงสมวงทมม

ขวาลาง โดยการ

1. สราง layer ใหมดานบน

2. ก าหนด Foreground color เปน #401dcd และ Background Color เปน สขาว

3. แลวท า gradient จากมมซายบนไปมมขวาลาง จะไดผลลพธดงภาพ


4. ก าหนด Blend mode เปน Color และ opacity เปน 60% จะไดผลดงภาพ

วธการสรางสเหลองและสมวงกเชนเดยวกนตางกนทมมการวาง gradient และอาจเลอกใช

Blend mode อน และ opacity อนกได

8. ขนตอนตอไปการสรางเสนโคงอสระแบบเรองแสง โดยการใช Path Tool เพอสรางแนวของเสน

โคงใหไดดงรป


9. ระบายสขาวตามแนว path นเรากจะไดเสนสขาวขนมา วธการโดยก าหนด Foreground Color เปนส

ขาว

10. เลอก Brush Tool แลวก าหนดรปลกษณของ brush โดยใหมความหนา 4px ความเขม 100% ดงภาพ

11. ก าหนดคณสมบต Shape Dynamics ของ brush ใหเลอกเฉพาะ Pen Pressure และ เลอก

Smoothing ดงรป

12. ระบายสตามแนวของ path โดยการ ปด panel ของขอ 11 แลวสราง layer ขนใหม แลวกลบไปเลอก

path Tool อกครงหนง(cursor จะเปลยนเปนรป path tool) จากนนคลกขวาแลวเลอก Stroke Path…


13. ใน pop-up widow ใหเลอกตามภาพ แลวกด OK

14. จะปรากฎแนวเสนสขาวตาม Foreground Color อยใตเสน path ดงภาพ

15. หากตองการซอนเสน path ไวกอนกใหกดปม ESC 2 ครง แตหากตองการลบ path ทงใหกด Del 2

ครงแทน


16. กจะไดแนวเสนแสงสขาวดงภาพ

17. ขนตอนนจะเปนการท าใหเสนสขาวนเรองแสงสสมออนๆ โดยการเลอกทเมน Layer > Layer Style

> Drop shadow จะไดหนาตางปรบแตงคาดงรป ใหท าการปรบแตงคา Blending Options: Default ,

Drop shadow , Outer Glow , Color Overlay ดงภาพ


18. จะไดเสนเรองแสงดงรป

19. จากนนกเลอก path tool เพอสรางเสนเรองแสงท 2 ดงภาพ


20. ก าหนดขนาด brush 6px เพอใหเสนใหญขน และเลอกสแดง #ff553c

21. ท าการ Stroke Path ตามขนตอน 10-15 กจะไดเสนแสงดงภาพ

22. จากนนท าการก าหนด layer style ตามขนตอน 17 กจะไดผลลพธดงภาพ


23. ถงขนตอนนดแลวกนาจะเปนผลงานทใชได แตในบทเรยนนขอเพมเตมเสนแสงอก 3 เสนดงภาพ (ม

สองเสนทใชการคดลอก layer แลวจดต าแหนงใหเหมาะสม)

24. เพอใหเสนเรองแสงไมแขงกระดางจนเกนไปใหท าการแตมจดสขาวเลกๆ ลงไปแลวท า layer Style

เชนเดมกได จะไดผลดงภาพ


25. จากนนกใสขอความลงไป พรอมทงก าหนด layer style และเรยงล าดบ layer ใหม กจะไดผลดงภาพ

สงส าคญอยทการเขากบของส ต าแหนงทเหมาะสม ซงในเรองการวางต าแหนงทเหมาะสมนน

ควรใชหลกพนทเกาชองในการชวยจดต าแหนงทเหมาะสม


ใบความรท 3.5 การสราง Icon ทรงกลม

Icon คอภาพขนาดเลกๆ ส าหรบใชในเวบเพจ เพอเปน hyperlink หรอเปนภาพประกอบในสวน

ตางๆ ลกษณะของ Icon คอเปนไฟลขนาดเลกแตมความละเอยด มสสนสดใส มเสนขอบทชดเจน

ซงการท า Icon มเคลดลบในการงายคอ เลอกใชสทสดใส และ สรางไฟลขนาดใหญกวาขนาดใช

งานจรง เมอเสรจแลวจงท าการยอขนาดไฟลใหเทากบของจรงภายหลง

ในบทเรยนนผเรยนจะไดเหนตวอยางของการใชส ล าดบการท าเอฟเฟกตเพอใหไดผลลพธ ซงถอ

วาเปนวธการทนาสนใจ

ผลลพธทตองการ ภาพผลไมสเขยวสดใส

วธท า

1. สรางไฟลใหมขนาด 640x480px ความละเอยด 300 dpi

2. สรางรปวงกลมขนาดตามตองการดวย Elliptical Marquee Tool

3. ก าหนดระบายสแบบ gradient สหนารหส #88cc33 สหลงรหส #005522 เลอกวธระบายแบบ

Foreground to Background

4. ท าใหการไลระดบสสวยมากขนโดยการใช layer style ก าหนดให Inner Shadow มรายละเอยดคอ Blend

Mode เปน Multiply คา Opacity เทากบ 75% คา Angle เทากบ -90 degrees คา Distance เทากบ 45

pixels และคา Size เทากบ 80 pixels.


5. ท าผวแอปเปล เรมจาก Filter > Render > Clouds แลว Filter > Distort > Spherize (ท าใหโคงนน) โดย

ก าหนดคา Amount เปน 100% และ Mode เปน Normal จากนน ก าหนด Blending ของ layer เปน Soft

Light จะไดผลลพธดงภาพ

6. เพมลกษณะผวโดยแตมจดสเขยวออนรหสส #ccdd99 ครงแรงตงขนาด brush 5px ใหทวพนท (จดละ 1

คลก) ครงทสอง brush ขนาด 3px ใหทวพนท


7. ท าใหแตมสกลนกลบพนสเขยว และนนตามลกแอปเปล เรมจาก Filter > Blur > Motion Blur ก าหนดคา

Angle เปน 90 degrees และคา Distance เปน 3 pixels จากนน Filter > Distort > Spherize ก าหนดคา

Amount เปน 100 และคา Mode เปน Normal สดทาย ก าหนด Blending Mode เปน Overlay และ

Opacity เปน 50% จะไดผลตามล าดบภาพทแสดง

8. ท าจกดานบน โดยการ

1) สรางพนทวงรสขาวขนาดเทาความกวางทงหมดของจกดานบน


2) สรางวงรสด าเพอแสดงเงาในหลมของจกบน

3) ควบคมการกระจายของเงาทจะเกดขนตอไปใหอยในเฉพาะบรเวณสขาว โดยการท า Clipping Mask

ระหวาง layer 5 และ 6 (กด Alt คางไวแลวคลกทเสนแบงระหวาง layer 5 และ 6) จะไดผลลพธดง

ภาพ

9. แตงสของหลม โดยขนตอนนตองใสใจเปนพเศษเพราะจะมบางขนตอนทเราไมเหนผลลพธ

1) ก าหนด Blending ของสขาว (เลเยอร 5) เปน Multiply


2) ท าเงาด าใหเบลอ โดย Filter >Blur > Gaussian แลวก าหนดคา radius เทากบ 17 pixels แลวก าหนด

Blending ของ layer เปน 75%

หากขอบจกดานบนยงมรอยตะเขบชดกใหท า Gaussian blue จนกวาจะไมเหนรอยตะเขบ

10. ท าแสงสะทอนใหขอบหลมดานหนา โดยการ

1) ใช Ellipse Marquee Tool สรางวงกลมใหขอบลางของวงกลมเลยปากหลม

2) ใช Ellipse Marquee Tool สรางวงลเพอลบพนททถกเลอกไวใหเหลอเปนรปพระจนทรเสยว


3) ใหเหลอเฉพาะพนทดานลาง

4) สราง layer ใหม แลวท าการระบายสขาว

5) ยกเลกการเลอก แลวเลอก Filter > Blur > Gaussian Blur ก าหนดคา Radius เปน 15 pixels

6) ด าเนนการดงขอ 1) – 5) อกครงเพอท าเงาสะทอนไฟทขอบดานบน เพอใหไดผลลพธดงภาพ

11. ท าใหผลสกมากกวาโดยการแตมสแสดลงไป ดงน

1) ใช Elliptical Marquee Tool สรางพนทวงกลมใหครอบคลมพนทแสดงการสกของผลไม

2) สราง layer ใหม


3) เทสแสด รหส #ffbe00

4) ยกเลกการ selection

5) จ ากดพนทการ Blur ภายในพนทของผลไม โดยการกด Ctrl แลว Click ท layer1

6) เลอก Filter > Blur > Gaussian Blur แลวก าหนดคา Radius เปน 50 pixels จะไดผลดงภาพ

7) หากสยงดแขงเกนไปหรอแสดงการสกไดไมถงใจ กลองปรบ Blending Mode หรอ ยกเลกการ Blur

แลวท าใหม หรอท า layer สทสดกวา หรอ ออนกวานมาซอนทบเพอใหพนทการสกขยายมากกวาน

12. ปรบแสงดานขางขวาโดยการระบายสขาวตามแนวขอบดานขวา แลว Blur ใหดสวยงาม วธการ

1) เลอกพนทผลไม

2) ระบายสขาวทงวงกลม

3) ใหแนใจวา Ellipse Marquee Tool ถกเลอกอย แลวขยบ selection ไปทางซายสก 10 px (กดลกศร

ซาย 10 ครง)


4) กดปม Del ผลไมจะถกแสดงออกมา

5) เลอกพนทผลไมอกครงหนง นนท าใหพนทสขาวเหลอเพยงรปพระจนทรเสยวอยดานขวาของผลไม

6) เลอก Filter > Blur > Gaussian Blur แลวก าหนดคา Radius เปน 7 pixels จะไดผลดงภาพ

7) ลบเงาสวนเกนบรเวณดานลางโดยใช Eraser Tool ขนาด 270 pixels และคา Hardness เปน0%

13. ปรบรปทรงใหเปนแอปเปล โดยการ

1) Merge Layer ทงหมด

2) Edit > Transform > Wrap

3) ดดใหเปนรปทรงแอปเปล


14. บนทกเปนรปแบบส าหรบเวบ

1) แปลงเปน Smart Object โดยคลกขวาบนรปแลวเลอก

2) ท าการ transform ใหภาพมขนาดเลกลง Edit > Free Transform ในระหวาง transform ใหกด Shift

คางไวเพอเปนการรกษาสดสวนใหคงท

3) ยอใหมขนาดเลกตามตองการ ในตวอยางนยอใหเหลอ 80x79px

4) Crop ขนาดของภาพใหพอดกบผลลพธ

5) ท า layer background ใหโปรงใส หรอลบ background layer ทง จะไดผลลพธดงน


6) เลอก File >Save for Web and Devices

7) ก าหนดประเภทไฟลเปน PNG-24


ใบงานท 3.1 การวาดการตน

ใหนกเรยนท าการวาดภาพใหเหมอนหรอใกลเคยงกบตนฉบบทงสองภาพน (มกกเมาน.jpg และ อะตอม.jpg)

(มกกเมาน : 1.ใหท าการสรางรปทรงวงรทมสดาน ใหครบกอน หากท าไมไดใหเปดภาพนเปน layer ดานลาง แลว

ลอกแบบตาม 2. การไลระดบสใหใช gradient overlay แทน drop shadow

อะตอม : เงาทคอและแขนซายใหใช selection เลอกพนทแลวคอยระบายสเทาทบ 2.เปลวไฟเปนการทาสสม

เหลอง ขาว ตามล าดบ)


ใบงานท 3.2 การสรางภาพพนหลง

ใหนกเรยนท าภาพพนหลงใหแตละภาพพนหนาดงน (ปายโรงเรยน .jpg และ สญลกษณโรงเรยน.jpg) โดยใช

ความรในการท าภาพรปทรงเลขาคณต การใสเอฟเฟกตให layer การ transform


ใบงานท 3.3 อกษรประดษฐ

ใหนกเรยนสรางตวอกษรประดษฐทมลกษณะดงน

1. ตวอกษรไฟลก จนตวอกษรใกลจะหมด

(ปรบ blur และ wind ใหมากขน)

2. ตวอกษรมหมะปกคลม โดยใชเอฟเฟกตตวหนงสอโคงมนจากตวอกษรไฟลก

3. ตวอกษรทมหญาปกคลม โดยใชเอฟเฟกตจากตวอกษรหมะ

(ระบายสเขยวดวยเอฟเฟกตปกต แลวใช brush รปหญามาตกแตงใหเปนสนามหญา)

4. ตกตาหมะทก าลงละเหดเปนไอ

(1.ท าวงกลม 2 อนซอนกนเหมอนตกตาหมะ 2.ใชเอฟเฟกตจากตวอกษรไฟลกเพอใหเกดการ

ระเหดขนทองฟา 3.ไอระเหดหากจะใหสวยตองไลระดบสจากสขาวเปนสฟา)


ใบงานท 3.4 ภาพพนหลงเรองแสง

1. ใหนกเรยนน าไฟล “บทท4ใบงาน.psd” มาปรบเปลยนล าดบ layer และ เปลยนต าแหนงของภาพใน layer

เพอใหไดภาพทแตกตางออกไป

(เปนขนตอนของการฝกทบทวนเพอใหเกดความเขาใจในผลของ effect ตางๆ เมอมการจดเรยงตวใหม และ ฝก

การจดวางองคประกอบของสงตางๆ ทท าใหเกดภาพทสวยงาม)

2. ใหนกเรยนแยกกลม เพอน าไฟล “บทท4ใบงาน.psd” น ามาปรบแกในรปแบบทแตกตางออกไป แลวน าเสนอ


(เปนขนตอนของการทดลองใชเครองมอทคนเคยในการสรางผลงานทแตกตางออกไปตามจตนาการ ดงนนจงอาจ

เกดปญหาบาง จงตองใชการรวมกลมกนเพอชวยกนแกปญหาดงกลาว)


ใบงานท 3.5 การสราง Icon ทรงกลม

1. ใหนกเรยนศกษาเนอหาในใบความรท 3.5 อกครงซงภาพผลลพธอยท “บทท5apple.psd” แลวรวมกลมเพอท า

การปรบแตงเพมเตมใหไดผลลพธดงภาพน

ซงมรายละเอยดเพมเตมจากใบความรดงน

1. มกานสน าตาล (รหส #884411) ดานบนสะทอนแสงเลกนอย

2. มพนหลงสเขยวแบบไลเฉดส จาก (#338833 ไป #004400)

3. มเงาทกนเพอบดบงกนทแหลม

4. มแสงสะทอนพนทคลายสเหลยมจ านวน 4 อน

2. ใหนกเรยนน าเสนอผลงานทไดและวธการ เครองมอทใช หนาชนเรยน




หนวยท 3 การใชเครองมอพนฐานของโปรแกรมคอมพวเตอรกราฟกในการรงสรรคภาพใหม


1. ขอใดคอวธการสราง Layer ในโปรแกรม Adobe Photoshop CS3

ก. คลกทเมน Layer > New > Layer

ข.

ค. ถกทงขอ ก และ ข

ง. ไมมขอใดถก

2. ขอใดคอลกษณะของ Background ในโปรแกรม Adobe Photoshop CS3

ก. White

ข. Background Color

ค. Transparent


3. การตองการใหลกษณะของ Background เปนแบบโปรงใส ควรก าหนดเปนแบบใด

ก. White

ข. Background Color

ค. Transparent


4. เครองมอใดทใชในการวาดรปวงกลม

ก. Ellipse Tool

ข. Ractangle Tool

ค. Line Tool

ง. Polygon Tool

5. จากรป หมายเลขใดใชในการสราง Effect ใหกบรปภาพ

ก. หมายเลข 1 ข. หมายเลข 2 ค. หมายเลข 3 ง. หมายเลข 4

คลกทรป

4 3 2 1


6. หากตองการปรบแตงรปทรงของรปภาพ สามารถปรบแตงไดโดยวธใด

ก. คลกทเมน Edit > Free Transform > Scale

ข. คลกทเมน Edit > Free Transform > Rotate

ค. คลกทเมน Edit > Free Transform > Warp


7. จากภาพทวงกลมสแดง หลงจากทวาดภาพแลวภาพจะมลกษณะใด

ก. ภาพทไดจะเปนรปวงกลม มสพนหลงและมสเสนขอบ

ข. ภาพทไดจะเปนรปวงกลม มสพนหลงและไมมเสนขอบ

ค. ภาพทไดจะเปนรปสเหลยม มสพนหลงและมเสนขอบ

ง. ภาพทไดจะเปนรปสเหลยม มสพนหลงและไมมเสนขอบ

8. จากรปทวงกลมสแดง คอเครองมอใด

ก. Slice Tool

ข. Pencil Tool

ค. Brush Tool

ง. Lasso Tool

9. การ Copy Layer สามารถท าไดโดยวธใด

ก. คลกขวาท Layer ทตองการ Copy > เลอก Layer Properties

ข. คลกขวาท Layer ทตองการ Copy > เลอก Duplicate Layer

ค. คลกขวาท Layer ทตองการ Copy > เลอก Resterize Layer

ง. คลกขวาท Layer ทตองการ Copy > เลอก Enable Layer Mask

10. หากตองการบนทก File เพอใชในการแกไขครงตอไป ควรบนทก File ดวยนามสกลใด

ก. นามสกล .psd

ข. นามสกล .jpg

ค. นามสกล .gif

ง. นามสกล .png


11. ถาตองการสรางเลเยอรใหม จะตองเลอกปมเครองมอใด?

ก. ข. ค. ง.

12. จากขนตอนการสรางโครงรางเพอใหเปนรปสามเหลยม ดงภาพ

นกเรยนควรใชเครองมอใดในการสราง?

ก. ข. ค. ง.

13. จากภาพขอ 2 ถานกเรยนเลอกค าสงเมน Select Deselect อยากทราบวาผลลพธทจะเกดขนกบ

“เสนประรปสามเหลยม” ในภาพ จะเปนอยางไร?

ก. เกดเสนประรปสามเหลยมเพมขนมา

ข. จากรปสามเหลยมกลายเปนรปสเหลยม

ค. เสนประรปสามเหลยมจะหายไป

ง. ไมมขอถก

14. จากบทเรยน ถาตองการใหรปภาพมความโคง ควรเลอกค าสงใด?

ก. Filter Artistic Dry Brush…

ข. Filter Blur Blur

ค. Filter Distort Shear…

ง. Filter Texture Grain…

15. เมนค าสง Edit Free Transform ใชเพอปรบขนาดและหมนภาพ ถาหากตองการใชคยลด จะตองใชปม

ค าสงใดบาง?

ก. Ctrl + A

ข. Ctrl + C

ค. Ctrl + T

ง. Ctrl + Z


16. จากบทเรยน ถาตองการ Copy เลเยอร จะตองคลกลากเลเยอรดงกลาวมาวางไวทปมค าสงใด?

ก.

ข.

ค.

ง.

17. จากขนตอนดงภาพน

ถาเลอกเมนค าสง Edit Transform Flip Vertical จะเกดผลลพธใด?

ก. เสนโคงสเขยวจะพลกกลบไปอกดาน

ข. เสนโคงสเขยวจะลดเหลอเพยงเสนเดยว

ค. เสนโคงสเขยวจะเพมขนมาอกหนงเสน

ง. เสนโคงสเขยวจะมขนาดเลกลง

18. จากขนตอนดงภาพน

เครองมอค าสง Fill ถาหากปรบเปน 50% ดงภาพ จะเกดผลลพธใด?

ก. ภาพจะมสออนลงจากเดม

ข. ภาพจะมสเขมขนจากเดม

ค. ถกทง A และ B

ง. ไมมขอใดถก


19. เครองมอทมชอวา Brush Tool คอเครองมอตวใด?

ก. ข. ค. ง. ไมมขอใดถก

20. ขนตอนการบนทกรปภาพ(Save) สามารถใชคยลดปมใดบาง?

ก. Ctrl + A ข. Ctrl + V ค. Ctrl + S ง. Ctrl + X

21. เครองมอทใชในการพมพตวอกษรเรยกวาเครองมออะไร

ก. Gradient Tool

ข. Blur Tool

ค. Horizontal Type Tool

ง. Dodge Tool

22. การท าให File ตวอกษรเปน File ภาพ สามารถท าไดโดยวธใด

ก. คลกขวาท Layer ตวอกษร > เลอก Layer Properties

ข. คลกขวาท Layer ตวอกษร > เลอก Duplicate Layer

ค. คลกขวาท Layer ตวอกษร > เลอก Resterize Layer

ง. คลกขวาท Layer ตวอกษร > เลอก Enable Layer Mask

23. การคลกทเมน Images > Rotate Canvas > 90 CW จะท าใหตวอกษรมลกษณะอยางไร

ก. ข.

ค. ง.

24. หากตองการท าการ Selection รปภาพ ควรจะเลอกใชเครองมอใด

ก. Gradient Tool

ข. Horizontal Type Tool

ค. Dodge Tool

ง. Rectangular Marquee tool

25. เครองมอ Gradient Tool คอเครองมออะไร

ก. เครองมอทใชในการวาดเสน ค. เครองมอทใชในการวาดรปสเหลยม

ข. เครองมอทใชในการไลเฉดส ง. เครองมอทใชในการวาดรปวงกลม


26. หากตองการลบภาพ ควรจะเลอกใชเครองมอใด

ก. Eraser Tool

ข. Rubber Tool

ค. Horizontal Type Tool

ง. Gradient Tool


ก. Erase Tool

ข. Layer Mask

ค. Layer Style



ก. Filter

ข. Layer Mask

ค. Path Tool



ก. Layer Opacity

ข. Filter > Blur

ค. Path Tool

ง. Marquee Tool

30. หากตองการใช Filter> Stylize > Wind ในทศทางลางขนบนกบ layer ทเกบขอมลราสเตอรจะตองท าอยางไร

ก. เรยกใช filter ไดทนทโดยไมตองท าอะไร

ข. ตอง Transform ภาพกอน เพราะใครๆ กท าแบบน

ค. ตอง Transform ภาพกอน เพราะ Wind ไมมทศทางแบบลาง-บน



เฉลย

ขอ 1 2 3 4 5 6 7 8 9 10

ตอบ ค ง ค ก ก ง ข ค ข ก

ขอ 11 12 13 14 15 16 17 18 19 20

ตอบ ง ข ค ค ค ง ก ก ข ค

ขอ 21 22 23 24 25 26 27 28 29 30

ตอบ ค ค ก ง ข ก ง ข ก ค




หนวยท 4 การท าภาพเคลอนไหว เวลา 4 ชวโมง

แผนการสอนท 1 เรอง การสรางภาพเคลอนไหว


ผสอน








1. เพอใหมความรเกยวกบการใชโปรแกรมคอมพวเตอรกราฟกในการสรางภาพเคลอนไหว


1. สามารถใชเครองมอส าหรบสรางภาพเคลอนไหว เพอใหไดชนงานตามความตองการได


1. มวนย




ภาพเคลอนไหวถกน าไปใชในการสรางโฆษณามากมายทงในโทรทศน และแบนเนอรเวบไซต โดยการ

สรางภาพเคลอนไหวนนสามารถท าไดจากหลายโปรแกรม ส าหรบบทเรยนนจะไดแนะน าการสรางภาพเคลอน

ไหวดวยโปรแกรม photoshop

ในบทเรยนน ผเรยนจะไดศกษา เรยนรชดเครองมอในการสรางภาพเคลอนไหวของโปรแกรม photoshop

และจะไดทดลองปฏบตในการสรางภาพเคลอนไหวดวยตนเองเพอใหเกดความช านาญมากยงขน


1. ศกษา เรยนรชดเครองมอในการสรางภาพเคลอนไหว

2. ปฏบตสรางภาพเคลอนไหวดวยตนเอง



1. ขนน า

1. ครยกตวอยางภาพเคลอนไหวใหนกเรยนไดด

2. ขนสอน

1. คาบท 1 ครแนะน าการใชชดเครองมอในการสรางภาพเคลอนไหว และกระบวนการในการสราง

ภาพเคลอนไหวตามใบความร 4.1 พรอมกบใหนกเรยนปฏบตตาม แลวนกเรยนท างานตามใบงานท

4.1

2. คาบท 2 ครสาธตการสรางภาพเคลอนไหวตามใบความร 4.2 พรอมกบใหนกเรยนปฏบตตาม แลว

นกเรยนท างานตามใบงานท 4.2

3. ขนสรป





2. ใบงานท 4.1 และ 4.2







การสรางภาพเคลอนไหว





-ใบงาน


การสรางภาพเคลอนไหวตาม

ความตองการได





-ใบงาน


ท างาน


เวลา





ผเรยน






ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา









....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )


ใบความรท 4.1 พนฐานการสรางภาพเคลอนไหว

หลกการท างานของภาพเคลอนไหว คอการแสดงภาพทละเฟรมโดยแตละเฟรมมการ

เปลยนแปลงขอความ รปภาพ และต าแหนง ขอมลทแตกตางกน ซงเมอแสดงผลในเวลาทก าหนดกจะท าใหเรา

มองเหนเปนภาพเคลอนไหวได ภาพเคลอนไหวในลกษณะนเรยกวา Frame-by-Frame นนคอเราตองก าหนดภาพ

และขอความในแตละเฟรมเอง แตคณสามารถทจะสรางภาพเคลอนไหวแบบ Tween เพยงก าหนดต าแหนงเรมตน

และต าแหนงสดทาย สวนเฟรมตรงกลางโปรแกรมจะท าการสรางขนมาโดยอตโนมต

ภาพเคลอนไหวนยมน ามาใชเปนปายโฆษณาในเวบหรอทเรยกวา Banner ปมกดและ

ภาพประกอบตางๆ เพอชวยใหเพมความนาสนใจใหกบเวบเพจ เชน การตน หรอขอความสนๆทสามารถ

เคลอนไหวได เปนตน

หนาจอส าหรบการสรางภาพเคลอนไหว

พาเลต Animation เปนเครองมอส าคญส าหรบการสรางภาพเคลอนไหว ภายในพาเลตประกอบ

ไปดวยเฟรมยอยๆทมหมายเลขก ากบ โดยแตละเฟรมจะแสดงการเปลยนแปลงของภาพในแตละขณะ การเปดพา

เลต Animation ท าไดโดยเลอกค าสง Window > Animation

กอนทจะเรมสรางภาพการเคลอนไหว จะตองเตรยมขอมลของภาพไวใหพรอม ดงตวอยางเราได

สรางไฟลทจะน ามาท าแบนเนอร ทประกอบไปดวยขอความและรปภาพ โดยแยกเปนเลเยอรๆ ไวแลว จากนนก

สามารถน ามาก าหนดการเคลอนไหวได โดยเปดพาเลต Animation และพาเลต Layers ขนมาเตรยมพรอม

ขนตอนในการใช animation panel ในการสรางภาพเคลอนไหวมดงน

1. เตรยมขอมลภาพใหพรอม

กอนทจะเรมสรางภาพการเคลอนไหว จะตองเตรยมขอมลทประกอบไปดวยขอความและรปภาพ

ไวใหพรอม โดยภาพทกการเคลอนไหวจะตองแยกอยตาง layer กน

เฟรมทก าลงเลอก

ควบคมการเลน สรางภาพเคลอนไหวแบบ Tween Copy Frame

ปมควบคมการเลนวน

ชวงเวลาแสดงภาพของแตละเฟรม


2. สรางเฟรมการเคลอนไหว

ดงทกลาวไวกอนแลววาการท างานของภาพเคลอนไหวเปนแบบลกษณะเฟรมตอเฟรม ฉะนนเรา

ตองก าหนดกอนวาจะใหมการท างานกเฟรม โดยปกตโปรแกรมจะเรมใหท 1 เฟรมแรก จากนนจงเพมจ านวน

เฟรมในพาเลต Animation ขนมาเองตามตองการ

วธการสรางเฟรมใหม โดยการใหคลกเฟรมทมอยกอนแลว แลวคลกปม Duplicates selected

frames กจะไดเฟรมใหมขนมาอกหนงเฟรม

3. ก าหนดภาพใหกบเฟรม

การท าภาพเคลอนไหวแบบเฟรม เราตองก าหนดเนอหาลงไปในแตละเฟรมวาตองการใหเฟรม

ไหนแสดงอะไรบาง โดยใชพาเลต Animation และพาเลต Layers รวมกนดงน

1. คลกเลอกเฟรมเปาหมาย

2. คลกเลอก layer ใหรปตาปรากฎ เพอแสดงถงการเลอก layer ไปใสในเฟรม

3. หากตองการมากกวา 1 layer กใหคลกรปตาใหปรากฎหลายๆ layer


4. หากตองการลบ layer ออก กใหคลกทรปตาของ layer ใหหายไป

5. วธการเลอก layer ของแตละเฟรมเปนดงน

เฟรมท การเลอก layer รปภาพบนเฟรม

1

2


4. การก าหนดการซ ากนของ layer ในแตละเฟรม

จากหวขอทผานมาจะเหนวา เมอตองการซอน/แสดงเลเยอรในเฟรมตางๆ กจะตองคลกเขาไปท

เฟรมเหลานนทละเฟรม แลวจงเลอกซอนหรอแสดงเลเยอร ซงท าใหเกดความไมสะดวก เพราะตองเลอก layer

ใหทละเฟรม แมแต layer ทตองแสดงทกๆ เฟรมกตองเลอกใหม

โปรแกรมยงมค าสงในกลม Unify ทจะชวยใหก าหนดสถานะการซอน/แสดงเลเยอร รวมทง

ต าแหนงของภาพ และเลเยอรสไตลใหกบทกๆเฟรมในคราวเดยวกนได ดวยเครองมอทอยดานบนของ layer

panel ดงน

Unify layer position ใหต าแหนงภาพในเลเยอรตรงกนทกๆเฟรม

Unify layer visibility ใหซอน/แสดงเลเยอรนนในทกๆเฟรม

Unify layer style ใหใชเลเยอรสไตลแบบเดยวกนทกๆเฟรม

วธการใชงาน ใหเลอก layer ทตองการใหปรากฎทกเฟรมแลวคลกปม Unify layer visibility หรอ

เลอก layerทม style ทตองการใชในทกเฟรมแลวคลกปม Unify layer style

5. ตงเวลาในการแสดงใหแกเฟรมและทดสอบภาพเคลอนไหว

การตงเวลาท าไดโดยคลกทแถบบอกเวลาทอยดานลางของเฟรม แลวเลอกเวลาทตองการ หาก

ตองการตงเวลาของทกเฟรมเทากนกใหเลอกทกเฟรมกอน โดยการกดแปน Shift คางไวแลวคลกเฟรมแรก คลก

เฟรมสดทาย จากนนปลอยแปน shift แลวจงท าการคลกแถบบอกเวลาเพอตงเวลา


จากนนคลกทปม Play เพอทดสอบการท างานของภาพเคลอนไหว และคลกทปม Stop เมอ

ตองการหยด

6. บนทกเปนไฟลภาพเคลอนไหว

เลอกเมน File > Save for Web & Devices… แลวท าการเลอก save เปน gif


การสรางภาพเคลอนไหวแบบ Tween

การสรางภาพเคลอนไหวแบบ Tween เปนการสรางภาพเคลอนไหวทงายทสดเพยงแคสรางเฟรม

เรมตนและเฟรมสดทายตามทตองการ แลวสงใหโปรแกรมสรางเฟรมทอยระหวางกลางใหอตโนมต วธการใช

งานเปนดงน

1. เลอก layer ทเกบภาพเรมตนของการเคลอนไหวไวทเฟรมท 1

2. เลอก layer ทเกบภาพสดทายของการเคลอนไหวไวทเฟรมท 2

3. คลกเลอกทงสองเฟรม

4. ตงเวลาส าหรบเฟรมทงสอง เพอทจะใดใชคาเดยวกนกบเฟรมทจะเกดใหม (หรออาจไปตง

ภายหลง)

5. กดปม Tween ทอยดานลางของ Animation panel

6. ก าหนดจ านวนเฟรมระหวางกลางในกรอบโตตอบตามตองการ



ใบความรท 4.2 การท าภาพ loading แบบ facebook

เวบไซตทวไปมกนยมใชภาพเคลอนไหวเพอท าใหเวบเพจนนมความนาสนใจมากกวาใชภาพนง โดยหลาย

เวบไซตกใชภาพเคลอนไหวในการสอสารใหผใชเวบเพจทราบวาเวบเพจก าลงท างานอย โดยใชภาพทรจกกน

ทวไปวา loading animation

ในใบความรนผเรยนจะไดเรยนรการท าภาพเคลอนไหวภาพเคลอนไหวแบบ gif (นามสกล .gif) ดวย

โปรแกรม photoshop เพอสราง loading animation เชนเดยวกนแบบท facebook ใชในการสอสารวาก าลงโหลด

ขอมล

ผลลพธทตองการ

ภาพเคลอนไหวแสดงสถานะการก าลงท างาน แบบ facebook

หลกการ

สรางภาพนงหลายๆ ส เพอท าใหภาพเคลอนไหวตอเนอง ซงความยากอยทการเตรยมภาพทม

รปทรงเดมๆ แตใหมสทแตกตางกนใหไดมากทสด

วธการ

1. เปดโปรแกรม Photoshop CS3 จากนนไปทเมน File New..

2. ก าหนดคณสมบตของไฟล

2.1 ตงชอ ก าหนดขนาด ของภาพใหเหมาะกบเวบเพจทจะน าไปใช หากไมแนใจใหก าหนดใหใหญกวา

ขนาดทตองการไวกอน

2.2 ก าหนดพนหลงเปน Transparent(วางเปลา) เพอทภาพเคลอนไหวใชพนหลงของเวบเพจ

2.3 กด OK


3. จะไดพนทตาราง ดงรป

4. เลอกเครองมอ Rectangular Marquee Tool จากนนคลกลากใหเปนรปเสนประสเหลยมดงรป

5. คลกเลอกเครองมอ เพอเลอกสของแทงสเหลยม จะไดหนาตางขนมาดงรป


6. เมอเลอกสทตองการเสรจแลว ใหกด OK

7. เลอกเครองมอ Paint Bucket Tool เมอคลกเลอกแลวใหน าไปคลกเทสลงในพนทเสนประทวาดไว

กอนหนาน

8. เลอกเครองมอ Rectangular Marquee Tool แลวคลกขวาเลอก Deselect เพอเอาเสนประทอย

รอบๆแทงสเหลยมออก

9. ดบเบลคลกตรงชอเลเยอรทชอวา Layer1 จากนนเปลยนชอเปน T1 แลวกดปม Enter

10. เปลยนคา Fill เปน 50%


11. คลกเลเยอรชอ T1 คางไวแลวลากมาทเครองมอ create a new layer

12. จะไดเลเยอรเพมมาใหมอกหนงเลเยอร

13. เปลยนคา Fill ของเลเยอร T1 copy เปน 100%

14. คลกลากเลเยอรชอวา T1 copy ลงมา เพอ copy เลเยอร ท 3 จะไดดงรป

15. เลอกเครองมอ Move Tool จากนนดบเบลคลกชอเลเยอรทชอวา T1 copy 2 เพอเปลยนชอเปน T2


16. คลกลากแทงสเปลยมออกมาวางขางๆ จะไดแทงสเหลยม 2 แทง

17. กด Ctrl + T เพอปรบเปลยนขนาดแทงสเหลยมอนท 2 และเมอปรบขนาดเสรจแลวใหกดปม Enter



19. คลกลากเลเยอร T2 ลงมา เพอท าการ copy เลเยอร จะไดดงรป



21. คลกลากเลเยอร T2 copy ลงมา เพอ copy เลเยอร

22. ดบเบลคลกเลเยอร T2 copy 2 แลวเปลยนชอเปน T3

23. คลกลากแทงสเหลยมอนกลางมาวางไวขางๆ ดงรป


24. กด Ctrl + T เพอปรบขนาดแทงสเหลยม จากนนกดปม Enter


26. คลกลากเลเยอร T3 ลงมา เพอ copy เลเยอร



เราจะไดแทงสเหลยมพนผาจ านวน 3 แทง ทมขนาดแตกตางกน แตละแทงจะม 2 ส จงท าให

เกด layer จ านวน 6 layer

28. ขนตอไปเราจะมาท าภาพเคลอนไหวกน โดยจะใชเครองมอ Animation ซงสามารถเรยกใชงานได ดงน

เลอกเมน Window Animation จะไดเครองมอ Animation panel นออกมาใชงาน

29. เลอกเฟรมท 1 แลวคลกเลอก layer T1 เทานน ดงภาพ

30. สรางเฟรมท 2 โดยท าตามขนตอน ดงรป


31. เลอกเฟรมท 2 แลวคลกเลอก layer T1 copy จะไดผลลพธดงรป

32. เพมเฟรมท 3 แลวคลกเครองหมายรปตาเลเยอรเฉพาะ T1 และ T2

33. เพมเฟรมท 4 แลวตกเครองหมายรปตาทเลเยอร T1 T2 และ T2 copy

1. กดปมตรงน

2.จะไดเฟรมเพมมาอกหนงเฟรม


34. เพมเฟรมท 5 แลวตกเครองหมายรปตาทเลเยอร T1 T2 T2copy และ T3

35. เพมเฟรมท 6 แลวตกเครองหมายรปตาทเลเยอร T1 T2 T3 และT3copy (เอา T2 copy ออก เลอก T3

copy เขามาแทน)


36. คลกเฟรมท 1 หนงครงแลวกดปม Shift คางไว จากนนไปคลกทเฟรมท 5 จะไดผลลพธ ดงรป

37. คลกเลอกเวลาในการเคลอนไหวท 0.2

38. คลกเฟรมท 6 แลวเลอกคลกปม Tween ดงรป


39. ตงคาตามรป จากนนกด OK

40. จะไดผลลพธดงรป คอ frame ทยอนกลบจาก 6 ไปหา 1


41. เลอกเมน File Save for Web & Devices…

42. เลอก Save

43. เลอกทเกบรปภาพ ตงชอ และเลอกไฟลเปนนามสกล gif เทานน จากนนกด Save เปนอนเสรจสน

ขนตอนทงหมด


ใบงานท 4.1 พนฐานการสรางภาพเคลอนไหว

1. ใหนกเรยนทบทวนวธการสรางภาพเคลอนไหว แลวทดลองท าภาพเคลอนไหวงายๆ แลวตอบค าถาม

ตอไปน

1.1 วธสลบระหวาง Time line Animation และ Frame Animation คอ ……………………………………………………

……………………………………………………………………………………………………………………………………………………………

1.2 เมอเลอกเฟรมทตดกนจ านวน 5 เฟรมเรยบรอยแลว หากตองการยกเลกการเลอกเฉพาะเฟรมท 3

ออกจะมวธการใด……………………………………………………………………………………………………………………………..

1.3 ผลของ Unify layer position เปนอยางไร……………………………………………….………………………………………….

1.4 ผลของ Unify layer visibility เปนอยางไร………………………………………………………………………………………….

1.5 ผลของ Unify layer style เปนอยางไร……………………………………………………………………………….……………..

1.6 หากตองการตงเวลาใหเฟรมแตกตางไปจากตวเลอกเวลาทมอยแลวจะตองท าอยางไร…………………

……………………………………………………………………………………………………………………………………………………………

2. ใหนกเรยนสรางภาพเคลอนไหวโดยใช Tween แลวตอบค าถามตอไปน

2.1 หากภาพเรมตนและภาพปลายทางมรปทรงเหมอนกนแตสไมเหมอนกน แลวเฟรมทเกดจาก Tween

จะมลกษณะอยางไร…………………………………………………………………….……………………………………….

…………………………………………………………………………………………………………………………………………….………………

………………………………………………………………………………………………………………………………………………………..

2.2 หากภาพเรมตนและภาพปลายทางมรปทรงไมเหมอนกนแตสเหมอนกน แลวเฟรมทเกดจาก Tween

จะมลกษณะอยางไร………………………………………………………………………………………………………………

………………………………………………………………………………………….…………………………………………………………………

………………………………………………………………………….……………………………………………………………………………

2.3 หากภาพเรมตนและภาพปลายทางมรปทรงและสไมเหมอนกนแลว เฟรมทเกดจาก Tween จะม

ลกษณะอยางไร……………………………………………………………………………………………………………………….………..

…………………………………………………………………………………………………………………………………………….………………

………………………………………………………………………………………………………………………………………………………..


ใบงานท 4.2 การท าภาพ loading

ใหนกเรยนค าภาพเคลอนไหวตามภาพทก าหนดใหตอไปน ส าหรบแสดงสถานะ loading บนเวบ (นกเรยนดภาพ

ไดจากไฟล loading.gif)

(เปนภาพเคลอนไหวทใชวตถจ านวน 8 อนๆ ละ 4 ส จงมทงหมด 32 layer)




หนวยท 4 การสรางภาพเคลอนไหว


1. จากบทเรยน เครองมอ Rectangular Marquee Tool หนาทของเครองมอนคออะไร?

จ. ตดภาพใหมขนาดเปนรปสเหลยม

ฉ. เปนแบบรางในการสรางรปสเหลยม

ช. ถกทกขอ

ซ. ผดทกขอ

2. จากบทเรยน เครองมอ Move Tool หนาทของเครองมอนคออะไร?

ก. เคลอนยายภาพ

ข. ปรบขนาดของภาพ

ค. ตดภาพ

ง. ระบายสภาพ

3. การเรยกใชเครองมอในการสรางภาพเคลอนไหว นกเรยนจะตองเรยกใชเมนค าสงใด?

ก. Window Actions

ข. Window Animation

ค. Window Character

ง. Window Histogram


4. จากขนตอนดงภาพ

ถาหากเราตกเครองหมาย “รปดวงตา” ออกไป จะเกดผลลพธใด?

ก. เกดรปภาพใหมขนมา

ข. รปภาพจะเปลยนส

ค. รปภาพจะเปลยนขนาด

ง. รปภาพจะหายไป


ถาหากนกเรยนคลกใชเครองมอ จะเกดผลลพธใด?

ก. จ านวนเฟรมจะลดลง

ข. จ านวนเฟรมจะเพมขน

ค. ถกทกขอ




จ านวนตวเลขทมใหเลอก หนาทของค าสงนคออะไร?

ก. ก าหนดความเรวในการเคลอนไหวของภาพ

ข. ก าหนดระยะเวลาในการลบภาพ


ง. ผดถกขอ

7. ค าสง Tween มประโยชนอยางไร

ก. ก าหนดเวลาอตโนมต

ข. สรางเฟรมอตมต

ค. สรางเฟรมและภาพในเฟรมอตโนมต

ง. สรางภาพอตโนมต

8. ภาพเคลอนไหวทสรางจาก photoshop เกดขนไดอยางไร

ก. การเปลยนต าแหนงของภาพหนงภาพ

ข. การเปลยนการแสดงภาพจากภาพหนงไปอกภาพหนง

ค. ขอ ก และ ข ถก

ง. ขอ ก และ ข ผด

9. เครองมอใดชวยก าหนดภาพใน layer ใดๆ ปรากฎในทกๆ frame

ก. Unify layer position

ข. Unify layer visibility

ค. Unify layer style

ง. ขอ ก และ ค ถก


10. จ านวน frame มผลตอเรองใด

ก. ความหยาบของภาพ

ข. การกระตกของภาพ

ค. ความหลากหลายของจ านวนสทใชได

ง. ความราบลนของการเคลอนไหว

เฉลย

ขอ 1 2 3 4 5 6 7 8 9 10

ตอบ ข ก ข ง ข ก ค ข ข ง




หนวยท 5 การออกแบบงานกราฟกส าหรบเวบไซต เวลา 8 ชวโมง

แผนการสอนท 1 เรอง เวบไซต สวนประกอบของเวบไซต และการเผยแพร


ผสอน








1. เพอใหมความรเกยวกบเวบไซต สวนประกอบของเวบไซต และการเผยแพร


1. สามารถศกษา วเคราะห วจารณรปแบบของเวบเพจได

2. เลอกผใหบรการเผยแพรเวบไซตทเหมาะสมกบเวบไซตได


1. มวนย




การออกแบบเวบไซตแมมวธการทหลากหลาย แตการออกแบบดวยโปรแกรม photoshop กเปนวธการท

ไดรบความนยม เพราะสามารถสรางหนาเวบเพจทสวยงามและมโครงรางทลงตวได

ในบทเรยนนจะเนนเกยวกบพนฐานทวไปส าหรบการสรางเวบไซต และขนตอนหลงการออกแบบเวบไซต เพอท

ผเรยนจะไดมความรตงแตการออกแบบแลวไปสนสดทการเผยแพรเวบไซตบนอนเทอรเนต


1. ความรทวไปเกยวกบการสรางเวบไซต และการเผยแพรเวบไซต

2. ปฏบตการศกษาคนควาเวบไซตตามคณสมบตทตองการ



1. ขนน า

1. แนะน าความส าคญของการมเวบไซตในแตละองคกร และอธบายขนตอนคราวๆ กวาจะไดเวบไซต

2. ขนสอน

1. ครอธบายความร ตามใบความร 5.1



3. ขนสรป

1. ครและนกเรยนรวมกนสรปขนตอนการสรางเวบไซตและการเลอกผใหบรการเผยแพร











1. เพอใหมความรเกยวกบเวบไซต

สวนประกอบของเวบไซต และ

การเผยแพร




-ใบงาน

2. สามารถศกษา วเคราะห

วจารณรปแบบของเวบเพจได

และ เลอกผใหบรการเผยแพร

เวบไซตทเหมาะสมกบเวบไซตได





-ใบงาน


ท างาน


เวลา






ผเรยน




ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา





ผลงานกลม ใหคะแนนเรยงล าดบตามการใหเหตผลประกอบ หรอประเดนอนทครเหนควร






....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )





แผนการสอนท 2 เรอง หลกการออกแบบเวบไซต


ผสอน








1. เพอใหมความรเกยวกบการออกแบบเวบไซต


1. สามารถออกแบบเวบเพจตามขอก าหนดได

2. สามารถปรบแตงเวบเพจตามจนตนาการได


1. มวนย






ในบทเรยนนจะเนนเกยวกบหลกการและขนตอนปฏบตในการออกแบบเวบเพจ เพอทผเรยนจะไดน าความรไปใช

ในการออกแบบเวบเพจอนๆ ได


1. หลกการออกแบบเวบเพจ

2. ปฏบตการสรางเวบเพจตามคณสมบตทตองการ



1. ขนน า

1. อธบายขนตอนคราวๆ ในการออกแบบเวบเพจ

2. ขนสอน

1. ครอธบายความรตามใบความร 5.2 พรอมทงปฏบตเพอเปนตวอยางประกอบ



3. ขนสรป

1. ครและนกเรยนรวมกนสรปขนตอน และเทคนคทเกยวของในการสรางเวบเพจ











1. เพอใหมความรเกยวกบการ

สรางเวบเพจ




-ใบงาน

2. สามารถออกแบบเวบเพจตาม

ขอก าหนด และ สามารถปรบแตง

เวบเพจตามจนตนาการได





-ใบงาน


ท างาน


เวลา





ผเรยน






ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา





ผลงานกลม ใหคะแนนเรยงล าดบตามความสวยงาม หรอประเดนอนทครเหนควร






....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )





แผนการสอนท 3 เรอง การสรางปม (Button) ส าหรบเวบเพจ


ผสอน








1. เพอใหมความรเกยวกบการสรางปมส าหรบเวบเพจ


1. สามารถสรางปมตามขอก าหนดได

2. สามารถสรางปมตามจนตนาการได


1. มวนย






ในบทเรยนนจะเนนเกยวกบวธการในการสรางปม(button) ส าหรบใชในเวบเพจทงโดยการใชรปแบบปมส าเรจรป

และการประดษฐขนเองโดยใชเครองมอพนฐาน เพอทผเรยนจะไดน าความรไปใชในการสรางปมรปทรงและสสน

สวยงามแบบ อนๆ ไดตามจนตนาการ



1. วธการในการสรางปม

2. ปฏบตการสรางปมตามคณสมบตทตองการ

3. ปฏบตการสรางปมตามจนตนาการ


1. ขนน า

1. อธบายขนตอนคราวๆ ในการสรางปม

2. ขนสอน

1. ครอธบายความรตามใบความร 5.3 พรอมทงปฏบตเพอเปนตวอยางประกอบ และใหนกเรยน

ทดลองปฏบตตาม



3. ขนสรป

1. ครและนกเรยนรวมกนสรปขนตอน และเทคนคทเกยวของในการสรางปม











1. เพอใหมความรเกยวกบการ

สรางปมส าหรบเวบเพจ




-ใบงาน

2. สามารถสรางปมตาม

ขอก าหนดได และ สามารถสราง

ปมตามจนตนาการได





-ใบงาน


ท างาน


เวลา


ผเรยน









ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา











....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )





แผนการสอนท 4 เรอง การตดแยกภาพเพอน าไปประกอบเปนเวบเพจ


ผสอน








1. เพอใหมความรเกยวกบการตดแยกภาพเพอน าไปสรางเวบเพจ


1. สามารถตดแยกภาพได และ น าภาพทแยกไดไปประกอบเปนเวบเพจใหมได


1. มวนย






ในบทเรยนนจะเนนเกยวกบวธการตดแยกภาพออกเปนชนเลกๆ ซงเปนกระบวนการสดทายทตองท าในโปรแกรม

photoshop กอนทจะเขาสการใชโปรแกรม Dreamweaver


1. วธการในตดแยกไฟลภาพ

2. ปฏบตการตดแยกไฟลภาพ


3. ปฏบตการน าไฟลภาพไปสรางเวบเพจใหม


1. ขนน า

1. อธบายขนตอนคราวๆ ในการตดแยกไฟลภาพ

2. ขนสอน

1. ครอธบายความรตามใบความร 5.4 พรอมทงปฏบตเพอเปนตวอยางประกอบ และใหนกเรยนปฏบต

ตาม



3. ขนสรป

1. ครและนกเรยนรวมกนสรปขนตอน และเทคนคทเกยวของในการตดแยกภาพและการสรางเวบเพจ










1. เพอใหมความรเกยวกบการตด

แยกภาพเพอน าไปสรางเวบเพจ




-ใบงาน

2. สามารถตดแยกภาพได และ

น าภาพทแยกไดไปประกอบเปน

เวบเพจใหมได





-ใบงาน


ท างาน


เวลา



ผเรยน








ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา











....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )


ใบความรท 5.1 เวบไซต สวนประกอบของเวบไซต และการเผยแพร

โปรแกรม Photoshop เปนเครองมอทไดรบความนยมอยางมากโปรแกรมหนงในการออกแบบเวบเพจ

ตงแตสรางรปลกษณพนฐานของทกเวบเพจในเวบไซต (website template) พนทแสดงขอมล ปม เมน แบนเนอร

เปนตน

ในเบองตนกอนทเราจะท าการออกแบบเวบไซต ควรท าความรจกกบบทบาทหนาทของเวบไซตและ

สวนประกอบอนๆ กอนเพอจะไดออกแบบไดไมผดจดประสงค โดยเวบไซต และสวนประกอบมความส าคญและ

คณลกษณะ ดงน

อนเทอรเนต (Internet) หมายถง เครอขายคอมพวเตอรขนาดใหญ ทมการเชอมตอระหวางเครอขาย

หลายๆ เครอขายทวโลก ผใชเครอขายนสามารถสอสารถงกนไดในหลายๆ ทาง อาทเชน อเมล เวบบอรด และ

สามารถสบคนขอมลและขาวสารตางๆ รวมทงคดลอกแฟมขอมลและโปรแกรมมาใชได

เวลดไวดเวบ (World Wide Web : WWW: W3) หรอทเรยกกนสนๆ วา "เวบ" คอ พนททเกบขอมล

ขาวสารทอยบนอนเทอรเนต โดยการเขาถงนนจะตองระบ URL ซงประกอบดวย http://www.xxxx.xxx ค าวา

เวลดไวดเวบมกจะใชสบสนกบค าวา อนเทอรเนต โดยจรงๆ แลวเวลดไวดเวบเปนเพยงแคบรการหนงบน

อนเทอรเนต

โดเมนเนม (domain name) คอ ชอของเวบไซต ในแงมมของการบรหารจดการตดตง(hosting) โดยจะ

ม www. น าหนา เชน www.google.co.th www.ict.up.ac.th เปนตน

http://www.google.co.th/

http://www.ict.up.ac.th/


เวบไซต (web site) ในภาษาองกฤษ มการสะกดค าวา เวบไซตหลายแบบ ไดแก Web site, website

และ web site ค าวา "Web" เปนค านามเฉพาะ ยอมาจากค าวา "World Wide Web" ดงนนจงใชค าวา "Web site"

ซงสามารถเหนไดทวไปตามสอมวลชน และพจนานกรมภาษาองกฤษ และภายหลงไดม ค าวา "web site" และ

"website"(เวบไซด) เกดขนตามมา

เวบไซต หมายถง หนาเวบเพจหลายหนาทอยดวยกนภายในเวลดไวดเวบซงเชอมโยงกนผานทางไฮเปอร

ลงก จดท าขนเพอน าเสนอขอมลผานคอมพวเตอร เวบไซตโดยทวไปจะใหบรการตอผใชฟร แตในขณะเดยวกน

บางเวบไซตจ าเปนตองมการสมครสมาชกและเสยคาบรการเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทาง

วชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตางๆ การเรยกดเวบไซตโดยทวไปนยมเรยกดผานซอฟตแวรเวบ

เบราวเซอร

เวบเพจ (web page) คอ หนาเวบ 1 หนาของเวบไซต ทแสดงเนอหา เอกสาร ขอมล ซงปรากฎใน

หนาตางของ browser ซงในหนงเวบเพจอาจประกอบดวยขอความ รปภาพ ไฟลเสยง ภาพเคลอนไหว วดโอ

รวมกน กไดและมความยาวไดไมจ ากดขนอยกบความตองการ

เพจ (page) คอ หนวยในการนบเวบเพจ หรอ ค ายอแทน เวบเพจ


logo Main menu

Main menu banner

ไซตแมป (site map) คอ แผนผงของเวบเพจทอยในเวบไซต ทจดท าในเปนเวบเพจหนงทท าหนาท

แสดงเพจทงหมดทอยในเวบไซต ตวอยางจากภาพดานลางเปนแผนผงเวบเพจของเวบไซตกระทรวงไอซท

โฮมเพจ (home page) คอ เวบเพจทคนเขาชมเวบไซตจะพบกอนเปนอบดบแรก โดยโฮมเพจมกจะตง

ชอไฟลเปน index.html หรอ index.php หรอ index.aspx

ไฮเปอรลงค (hyper link) คอ จดเชอมโยงจากหนาเวบเพจหนงไปยงเวบเพจอน หรอไปยงเวบไซตอน

สงเกตไดจาก เคอรเซอรจะเปลยนเปนรปมอ ซงเราสามารถสรางลงคทเปนขอความ รปภาพ กได

โลโก (logo) คอ รปภาพ หรอ ภาพของสญลกษณ ประจ าตวองคกร

แบนเนอร (banner) คอ รปภาพทเนนประโยชนเพอการโฆษณา หรอเรยกอกอยางวาปายโฆษณา

เมนหลก (main menu) คอ ลงคทเนนประโยชนเพอบอกกลมเวบเพจในเวบไซต หรอ หวเรองส าคญใน

เวบไซต เปรยบเทยบไดกบสารบญหนงสอ โดยทวไปมกจะจดกลมและตงชอตามประโยชนทผเขาชมจะไดรบจาก

เวบไซต


เมนยอย (sub menu) คอ สารบญยอยของเมนหลก บางเวบไซตกจดท าเมนยอยในลกษณะของ

rollover menu (แสดงใหเหนเมอคลกทเมนหลก) ดงภาพ

สวนทาย (footer) คอ สวนปดทายเวบเพจ มจดประสงคเพอแสดงการสนสดเนอหาของเวบเพจ หรอ

แสดงความเปนเจาของเนอหา หรอแสดงขอมลอนๆ ตามตองการ

การเผยแพรเวบไซต (registration and hosting) คอ การสงเวบไซตของเราไปอยบนเวลดไวดเวบ โดย

อพโหลด(upload) เวบไซตไปฝากไวกบผใหบรการใหเชาพนทหรอทเรยกวา web hosting เพอทคนอนๆ ใน

เครอขายอนเทอรเนตจะเขามาชมเวบไซตของเราได ในการเผยแพรเวบไซตม 2 ขนตอนหลก คอ 1) การจด

ทะเบยนโดเมนเนม หรอเรยกวา จดโดเมน และ 2) การเชาพนทบนเวลดไวดเวบ หรอเรยกวา โฮสตง

ปจจบนการด าเนนการทง 2 ขนจะมทงทตองเสยคาบรการและไมเสยคาบรการ การเลอกเสยคาบรการ

จะไดโดเมนตามทเราตองการและไดพนททเปนเฉพาะของตนเอง ซงการด าเนนทง 2 ขนตอนไมวาจะเสยหรอไม

เสยคาบรการ เราจะตองใชบรการจากผท าธรกจใหบรการดานน ซงมใหเลอกมากมาย โดยสามารถสบคนดวย

“web hosting” บน search engine ดงภาพ กจะพบกบเวบไซตของผท าธรกจใหบรการจดโดเมนและโฮสตง

Main menu sub menu


ซงเราสามารถทจะเลอกผใหบรการทมคาบรการทถกทสดแตใหบรการทดทสด ขอคดในการเลอกใช

บรการคอ ควรเลอกบรการทใหปรมาณการบสงขอมลทมากทสด หรอ ไมจ ากดปรมาณการรบสงขอมลกยงด

ตวอยางเชน ปรมาณการรบสงขอมลท 50 Gigabyte ตอเดอน

หมายความวาเวบไซตของเราจะถกจ ากดการเขาชมไดเพยง 50 Gb ตอเดอน วธการนบคอ น าเนอทรวม

ของเวบเพจทถกเขาชมแตละครงมารวมสะสมไว หากเกน 50 Gb กจะถกตดการเขาชม เชนหากเวบไซตมเพยง 1

เวบเพจซงมขนาดของทงภาพและขอความรวมกนเปน 1 Mb เมอเวบเพจนถกเขาชม 1 ครงกจะมปรมาณการ

รบสงขอมล 1 Mb แลว ดงนนเวบเพจนจะถกเขาชมได ไมเกน 51,200 (50*1024) ครงในหนงเดอน คดเปน 1,706

ครงตอวน หรอ 71 ครงตอชวโมง หรอ 1.2 ครงตอนาท


ใบความรท 5.2 หลกการออกแบบเวบเพจ

โปรแกรม Photoshop เปนเครองมอทไดรบความนยมอยางมากโปรแกรมหนงในการออกแบบเวบเพจ

โดยมกถกใชตงแตการสรางรปลกษณพนฐานของทกเวบเพจในเวบไซต (website template) พนทแสดงขอมล

ปม เมน แบนเนอร เปนตน

โดยในใบความรน นกเรยนจะไดเรยนรหลกการออกแบบเวบไซต พรอมทง เรยนรวธการใชงานโปรแกรม

photoshop ดงน

1. ก าหนดเปาหมายของเวบไซต และรวบรวมขอมลเบองตน

นกเรยนจะตองก าหนดใหไดวาจะท าเวบไซตเพอประโยชนอนใด มขอมลมากนอยเพยงใดทจะตอง

น าเสนอ และขอมลทน าเสนอนนอยในรปแบบไฟลประเภทใด

2. ก าหนดโครงรางการแบงสวนหนาเวบเพจ

การจดแบงพนท (layout) ใหมจ านวนพนทเพยงพอ และเหมาะสมกบกบองคประกอบทตองการแสดง

เชน จากภาพประกอบจะมการแบงพนทส าหรบ สญลกษณขององคกร(Logo) เมนหลก(Menu) bannerของแตละ

เมนหลก(Header Panel) เมนยอย(Submenu) และ พนทแสดงเนอหา (Content) ในสดสวนทเหมาะสม

อกทงจะตองใชพนททงหมดไมกวางเกนไปจนท าใหผใชเวบตงความละเอยดหนาจอหยาบเกนไป ซงจาก

ตวอยางก าหนดใหไมเกน 1000 พกเซล เพราะจาก http://truehits.net/ จะเหนวาคนสวนใหญตงคาความละเอยด

หนาจอไวท 1024 * 786 พกเซล

http://truehits.net/


ในการปฏบต เมอเราสรางไฟลภาพใหมขนมา เราจะตองก าหนดขนาดภาพไมเกนความละเอยดหนาจอ

โดยความสงของไฟลจะตองลบพนทส าหรบการแสดงเมนบารของบราวเซอรออกดวย หรอจะเลอก preset ท

photoshop มไวให

ในกรอบสแดงคอพนทของเมนของ browser ทเราจะตองค านวณ

เพอตดออกจาก resolution

ใหท าการทดสอบของของเวบเพจโดยการบนทกไฟลดวยเมน File > Save for Web & Device… แลวเลอก

ประเภทไฟลเปน GIF หรอ PNG-24(เหมาะส าหรบท าภาพโปรงใส) กได แลวจากนนใหเปดภาพทบนทกไวดวย

browser


เราจะเหนไดวาขนาดภาพทเลอกนนพอดกบ browser หรอไม โดยจากตวอยางดานบนจะเหนไดวาขนาด

ภาพ 1152 x 864 pixel ทเลอกไวนนเมอไปปรากฎบน browser แลวมความสงเกนพนทแสดงผล กท าเชนนไป

เรอยๆ จนกวาจะไดขนาดทตองการ

จากนนกเรมท าการจดแบงพนทเปนสวนๆ ดงภาพตนแบบ โดยสามารถใชเสนไกดชวยก าหนดระยะ หรอ

สราง selection เพอแบงพนทกได โดยวธการแบงสวนเวบเพจโดยใชเสนไกดและ selection เปนดงน

กรณเสนไกด

การสรางเสนโดยคลกทแถบไมบรรทด

ดานบนกรณตองการเสนไกดแนวนอน หรอ ท

แถบไมบรรทดดานซายกรณตองการเสนไกด

แนวตง แลวลากเมาสไปทพนทท างานกจะปรากฎ

เสนไกดใหเหน จากนนกลากไปทยงบรเวณท

ตองการแลวปลอยเมาส

การยายต าแหนงเสน ใหใชเครองมอ

ในการเลอกแลวยายต าแหนงเสนไกด

กรณใช selection

เมอสราง selection แลว ทหนาจอ info ดง

ดานขวามอของภาพจะแสดงขนาด width(w) และ

height(H) ของ selection ใหทราบ หากขนาดของ

selection ไมเปนทถกใจกใหสราง selection ใหม

หรอปรบแก select เดมโดยใชเมน Edit >

transform เพอลากเปลยนขนาดตามตองการ

ในการก าหนด layout นกเรยนตองสราง layer ใหแกแตละพนทเพอใหเกดความสะดวกในการปรบเปลยน

แตละพนทโดยไมกระทบกบพนทสวนอนๆ ดงภาพดานซาย

เราตองวางแผนส าหรบในขนตอนตอๆ ไป เพราะเราจะมจ านวน layer มากขน โดยเฉพาะ header และ

submenu ซงจะตองมจ านวนเทากบ เมน ดงนนเราควรจดกลม layer เปนกลมตามหนาทของ layer โดยใชเมน

Layer > Group Layer ดงภาพตวอยางดานขวา


3. จดท ารายละเอยดแบบงายๆ ส าหรบแตละสวน

ในขนนจะเนนการใชเทคนคเบองตนเพอใหเหนการใชส และ การจดระเบยงของแตละพนท ดงน

3.1 เลอกชดสทจะใชในเวบเพจ

ในงานออกแบบนนการใชสถอเปนสงส าคญ เพราะสสามารถบอกถงอารมณของเวบ ชวย

ถายทอดและเสรมใหเนอหาและรปภาพดดยงขน แตละโทนสจะมความหมายและอารมณตางกนไป ในการเลอก

สเราสามารถหาขอมลไดจากแหลงขอมลทสอนเรองทฤษฎของสและการจบคส หรอจะศกษาจากเวบไซตทม

การจบคสทเขากนไดดไวแลว เชน www.colorschemer.com ซงถอวาเปนเวบไซต

โดยเราจะตองจ ารหสส เชน #56a3fc เปนตน ของสทเราจะใชทงหมด เพราะเมอเวลาปฏบตงานเราจะได

น ารหสสปอนลงในหนาตาง Color Picker ไดเลย แลวเราสามารถจดเกบสทใชนไวใน Swatches ได วธการดงน

http://www.colorschemer.com/


1) เปดหนาตาง Color Picker ในมมมองแบบ Only

Web Colors

2) กรอกรหสสลงในชองเลอกส

3) บนทกคาสไวใช

4) ตงชอใหส

5) จะปรากฎสทบนทกใน Swatches

3.2 จดท ารายละเอยดในแตละพนทชดเจนขน

ในขนตอนนเปนการจ าลองรายละเอยดในแตละพนทเพอใหเหนวามการใชพนทจรงประมาณ

เทาใด แตส าหรบเมนหลก และ เมนยอย ควรจะตองใสรายละเอยดใหหมด เพอจะไดทราบวาเมนหลก และ เมน

ยอย ใชพนทกวาง ยาวเทาใด สวนขอความในพนท content นนไมจ าเปนตองใส เพราะจะตองไปท าในโปรแกรม

Dreamweaver

1 2

3


ทงนหากขนาดพนททก าหนดไวในขนตอนท 2 แคบหรอกวางเกนไป กปรบใหเหมาะสมในขนตอนน และ

อกประการคอเมอมรายละเอยดมากขนกเปนผลใหจ านวน layer เพมมากขนตามจงจะตองตงชอและจดกลมให

เหมาะสมดวย

3.3 ลงจดเดนของแตละพนท

จากภาพจะใชเทคนคการสรางภาพประกอบ banner

และการก าหนดขนาดและสตวอกษรทแตกตางเพอสราง

จดเดนในแตละพนท

ขนตอนท 2 และ 3 นนกเรยนสามารถปรบเปลยนไดเรอยๆ หากเหนวาเวบเพจยงไมลงตว ทงน

การปรบไดอยางยดหยนกขนอยกบการแยก layer ขององคประกอบตางๆ อยางด

4. ปรบแตงรปลกษณการแสดงผล(Style) โดยละเอยด

เปนการปรบแตงใหเกดความงาม ความปราณตทเพมขน ใหมสสนและรปทรงสวยงาม เนนใหเนอหาและ

รปภาพทจะปรากฎมความนาสนใจ เชน

- การเพมกนแหลมใหแก banner โดย

การขยาย selection

- การใ ช เสนประแทนเสนทบข น

ระหวางเมนหลก และสวนอน

- ใช Filter >Blur >Rradial blue.. เพอ

ตกแตง banner

- เพมความหนาของเสนแบงระหวาง

sub menu และ content

เปนตน

ซงจะท าใหเราไดภาพทดดมากขน


หรอจะท าการเปลยนพนหลงเปนหลายๆ แบบเพอคนหาเวบเพจทถกใจมากทสด

backgound ท fill ดวย pattern

backgound ท fill ดวย gradient

backgound ท เปนภาพสวยๆ อน ซงจะตองใช

เทคนคการตกแตงภาพเพอใหภาพพนหลกมโทน

สทเขากบชดสทเลอกไว และไมเดนเกนเวบเพจ

pattern ลายจดสามารถท าไดโดยการสรางไฟล

ภาพขนาด 4 x 5 pixel แลวระบายสเทาและด า

จากนนท าการสราง pattern โดยการเลอกทงพนท

โดยกดปม CTRL รวมกบ A จากนนเลอกเมน Edit >

Define Pattern แลวตงชอให pattern น


ในการใชงาน pattern นใหใชกบ Layer style ดงน

1) เลอก layer ทเปน background ของเวบเพจ

2) เมน Layer > Layer Style > Blending option…

3) เลอก Pattern Overlay ดานซายมอ

4) เลอก pattern ทตองการ

5) ปรบแตงตวเลอกเพมเตม เชน blending mode

Opacity หรอ Scale

การใชภาพอนมาเปนภาพพนหลงจะตองใชเทคนคการตกแตงหลายขนตอนเพอจะไดภาพพนหลงทมโทน

สเขากบชดสทเลอกและทส าคญชวยท าใหขอมลเดน ไมใชพนหลงเดนกวาขอมล เชนจากขอมลทน าเสนอในใบ

ความรนจะมล าดบวธการ ดงน

1) เลอกภาพพนหลงทตองการ

2) ปรบต าแหนงของภาพพนหลงใหเหมาะกบเวบไซต

กอนปรบ หลงปรบ


กอนปรบภาพจะเหนเสนแบงระหวางแมน ากบภเขาไมเดนชด และ เมฆทมมซายบนจากภาพกเดนเกนไป

จงปรบต าแหนงใหเสนแบงแมน าขนมาอยในแนวเดยวกบเสนแบง banner กบ submenu

3) ลดรายละเอยด หรอ ความ

เดนชดของทะเล ลง โดยใช Blur(

โดยใช หรอ Filter>Blur ก

ได) หรอ ใช layer ทระบายสแบบ

gradient มาoverlay ซอนทบ

ดานบนกได

4) ลดความความสวางขอพนท

อนนอกเหนอจาก banner โดย

การ

- สราง layer ใหมไวดานบน

- ใช Eliptical marquee เลอก

พนททตองการใหสวาง

- แลว invert selection เพอ

กลบไปเลอกพนททตองการให

เปนสด า


- fill ส ดวยสด า

- ท า Gaussian blur สก 3

คร ง เพ อ ใหมการไลระดบสท

นมนวน โดยแตละครงก าหนด

Radius เปนล าดบดงน 80px, 120

px และ 160 px ตามล าดบ

5. ตดแบงภาพเพอส าหรบน าไปประกอบเปนเวบเพจ

ขนตอนนถอเปนขนตอนสดทายของการออกแบบเวบเพจดวย photoshop ซงในขนตอนนผเรยนจะตอง

ท าการบนทกไฟลขอมลเปนรปแบบทเหมาะสม และ ท าการตดแบงภาพออกเปนสวนๆ ซงจะกลาวโดยละเอยดใน

ใบความรตอไป


ใบความรท 5.3 การสรางปม (Button) ส าหรบเวบเพจ

เวบไซตทสวยงามมกมปมกดทมสสนสดใส ปมรปแบบทสวยงามทพบเหนไดบนหลายๆ เวบเพจ

กสามารถสรางขนไดโดยใชโปรแกรม Photoshop โดยการมปมสวยๆ ไวใชบนเวบเพจ กสามารถสรางสรรคให

เวบเพจมความแปลกใหมและนาสนใจมากกวาการใชขอความแบบธรรมดา นอกจากนยงสามารถน าไปใชรวมกบ

รปภาพได

ดงนนในใบความรนผเรยนจะไดเรยนรวธการท าปมส าหรบไวใชบนเวบเพจ โดยผเรยนสามารถท

จะเรยกใชรปแบบปมส าเรจรปทมมาพรอมกบโปรแกรม photoshop หรอ สามารถสรางขนมาเองไดตามความ

ตองการ การสรางปมแตละแบบ มวธการดงน

การสรางปมจากเครองมอส าเรจรป (style)

ซงในหวขอนจะสรางปม โดยใช Style ส าเรจรปทมอยใน Photoshop โดยมวธการสรางปมตาม

ขนตอนตอไปน

1. สรางหนากระดาษขนมาใหม

2. เรยกพาเลตขนมาใชงานโดยคลกเมนค าสง Window เลอกค าสง Styles

3. เมอปรากฏพาเลต Styles แลวใหคลกรปแบบของสไตลทตองการเปดขนมาใชงาน

4. สรางปมในรปแบบทตองการ โดยคลกเลอกเครองมอ Shape Tool เพอสรางปมตามทตองการ

บนหนากระดาษ โดยเลอกออปชน (Shape Layers) บน Toolbox

5. คลกปมเลอกสไตลบน Option bar หรอเลอกสไตลไดจากพาเลต Styles โดยเลอกรปแบบตามท

ตองการ

6. เมอสรางปมบนหนากระดาษท าการ จะเหนวารปแบบของสไตลทเลอกจะปรากฏบนปม หรอถา

สรางปมในรปแบบทตองการไดแลวจะเปลยนเปนรปแบบอน ๆ ใหคลกเมาสเพอเลอกปมนน


7. จากนนคลกสไตลในรปแบบอน ๆ ตามตองการ

8. เมอไดปมเปนทพอใจแลว ใหสงเกตท layer panel จะเหนไดวาปมทเราสรางจาก style นน คอ ชด

ของค าสงส าเรจรปในการปรบ style ของ layer

6

5

4


เราสามารถท าการปรบเปลยนคา Inner Shadow หรอ Inner Glow หรอ อนๆ ไดเพอใหไดปมทม

ความพเศษมากกวาเดม

การสรางปมจากเครองมอพนฐาน

ผลลพธทตองการ: ปมรปทรงกลมหลากส ดงภาพ

วธท า:

1. สราง layer ใหมบน layer ทท าหนาทเปน background เพราะปมจะอยบน background

2. เลอกสส าหรบรปวงกลม เปนสน าเงน

3. ใชเครองมอ วาดรปวงกลม กจะไดวงกลมสน าเงนลวน (การใช ellipse จะเปนการสราง Mask

Layer สวนการใช marquee จะเปนการสรางภาพ)

4. ท าเอฟเฟคตเรองแสง โดยใช Layer Style > Bevel and Emboss แลวก าหนดเฉพาะ size เทากบ 100

ผลจากขอ 3 ผลจากขอ 4 (เฉพาะวงกลม)


5. ท าใหลกบอลเรองแสงโดยการท าใหเหมอนมแสงสวางสองมาจากมมซายบน โดยวธการสราง layer

แสงสขาวระบายใหทวพนทวงกลมจากระยะขอบ 4 px แลวคอยลบแสงในบรเวณอบแสงออก

ภายหลง วธการโดย

5.1 เลอกพนททงหมดของวงกลม โดยการกดคย Ctrl

แลวคลกบนเลเยอร

5.2 เลอกเมน Select>>Modify>>Contract ลด

ขนาด selection ลง 4 พกเซล

5.3 สราง layer ใหมแลวเตมสขาวส าหรบเปน

แสงสวงลงไป โดยยงคงตองใหเสน selection คางอย

กอน

5.3 ลบพนทสขาวในบรเวณอบแสงของวงกลม

โดยการใช selection เดม (เพราะไดสดสวนกบรป

วงกลมอยแลว) โดยการ เลอก Select>Transform แลว

คลกลากเลอนลงมายงบรเวณจดอบแสง

5.4 เมอยาย selection ออกไปแลวกกดคย

Enter เพอยกเลก transform

5.5 ปรบแตง selection ใหมความฟงกระจาย

โดยเลอก Select >Refine Edge แลวก าหนดคา feather

เทากบ 11

5.6 เลอก layer ทเปนสขาว แลวใช selection

จากขอ 5.5 ลบสขาวออก กจะท าใหสน าเงนเดมปรากฎ

ใหเหน

5.7 ลบสขาวออกเรอยๆจนไดเงาทพอใจ


6. ท าปายขอความพนสด าโคงนนรบกบทรงกลม

6.1 ไปท layer วงกลมสน าเงน แลว กด Ctrl พรอมคลกท layer เพอสราง selection ขนาด

เทากบวงกลมสน าเงน

6.2 สราง selection สเหลยมขอบมนตามทรงกลม โดยการ

5.กดคย Ctrl+T และคลกปม เพอ

transform แบบ Warp แลวปรบปรงทรงใหโคงตามวงกลม

4.ใชเครองมอ เพอเทสด า

2.วาด Selection ลงบนพนทดานบนเพอลบ selection ดานบนทง

3.วาด Selection ลงบนพนทดานลางวงกลม กจะเหลอ selection เฉพาะตรงกลางวงกลม

6.ก าหนดสไตลตามตองการ

1).เลอกเครองมอสราง Selection รปสเหลยมแบบตดพนทออก


7. สรางขอความบนปม

8. คดลอกขอมลเพอสรางปมอนตอๆ ไป

8.1 รวมกลม layer ทงหมดเปน group เดยวกน ตงแตวงกลมสน าเงน จนถงตวอกษร โดยการ

กดปม Shift คางไวแลวคลกเลอก layer ทตองการรวมเปนกลมเดยวกนใหหมด แลวเลอกเมน Layer >

Group Layer

8.2 กอปปใหครบตามจ านวนปมทตองการ

8.3 ณ ขณะนแมเราจะมจ านวน group ตามจ านวนปมทตองการ แตทหนาจอยงไมปรากฎใหเหน

ชดเจนเพราะปมทงหมดซอนทบกนอย ใหเลอก group ทตองการยายทอยแลวใชเครองมอ คลกลากจด

ต าแหนงของปมแตละกรปเรยงกนดงรป

ใชเครองมอ Type พมพขอความบนปม หรอ ท า path ใหโคงตามรปทรงกอนแลวพมพขอความ


9. เปลยนสและขอความบนปมใหแตกตางกน

โดยการเปลยนขอมลเฉพาะ layer สพนหลงและขอความ ของแตละ group ใหแตกตางกน

โดยการดบเบลคลกเขาไปเปลยนส จะท าใหแตละปมมสทเปลยนแปลงไปตามทเลอก

10. บนทกเปนรปแบบทเหมาะสมกบเวบไซต

ดบเบลคลกเขาไปเปลยนส

เลอกค าสง File>>Save for

Web & Devices

เพอบนทกไปใชงานบนเวบเพจ


ใบความรท 5.4 การตดแยกภาพเพอน าไปประกอบเปนเวบไซต

การตดภาพ ถอวาเปนขนตอนสดทายของการออกแบบเวบไซตดวย photoshop เพอทจะไดไฟลภาพ

ผลลพธไปใชในการสรางเวบไซตดวยโปรแกรม Dreamweaver ประโยชนของการตดแยกภาพ คอ

1. เวบเพจถกโหลดเรวขน เพราะการโหลดภาพขนาดใหญจะใชเวลานานเนองจากตองโหลดขอมลใหได

จ านวน byte ครบถวนกอน browser จงจะแสดงรปได ดงนนเราจงใชการแบงภาพใหญ 1 ภาพออกเปนภาพเลก

หลายๆ ภาพ เพอทจะไดแสดงภาพเลกๆ ทละภาพตอกนไปเรอยๆ จนครบเปนภาพใหญ ซง Google Map กใช

วธการแบงแผนทใหญออกเปนชนสเหลยมเลกๆ ดงลกศรช

2. บางบรเวณของภาพเมอน าไปประกอบเปนเวบดวยโปรแกรม Dreamweaver แลวจ าเปนตองใชงาน

แตกตางกน ตางชวงเวลากน หรอ บางเวบเพจกใชบางสวนของภาพทท าขน เชน ขอความใน main menu จากใบ

ความรท 2 จะตองแยกออกเปนสวนเลกๆ ตามจ านวนรายการเมน เพราะ แตละเมนจะเปน ไฮเปอรลงคไปยงเวบ

เพจปลายทางทตางกน หรอจะตองแยกเพราะตองการท า rollover menu เปนตน

ดงนนในใบความรนจะเปนการเรยนรวธการตดแยกภาพเวบเพจใหญออกเปนภาพเลกๆ โดยจะทบทวน

ตงแตการน าภาพหลายๆ ภาพมาประกอบกนเปนไฟลเวบไฟลเดยวจนไปถงการตดแยกภาพ ดงน

1. รวบรวมภาพส าหรบท าเปนเวบไซตใหเรยบรอย

2. เขาสโปรแกรม Photoshop

3. สราง layer ใหมส าหรบรวมภาพจากขอ 1 เพอท า banner โดยก าหนดความสงตามตองการ แตความ

กวางไมควรเกน 1000 px


4. จะได Layer ใหมขนาดตามทก าหนดไวขนมาดงภาพ

5. จากนนเรมตกแตง banner เชน การท าสพน

6. การลากวางภาพทเตรยมไวมาประกอบกน banner ทสมบรณ

1

2


7. ท าการตกแตงตามตองการ เมอท าการตกแตงเสรจสนแลวกท าการ Merge Layer แลวบนทก banner น

เปนไฟล jpg เพอน าไปใชในขนตอนตอไป (หากตองการจะกลบมาแกไขภายหลงกบนทกเปนไฟล psd ไว

กอน)

8. ตอไปเปนการสรางตวเวบ โดยการสรางไฟลใหมทมขนาดของ Layer เทากบ 1000x400 pixels ดงรป

แลวกด OK

จากภาพ เราจะไดไฟลขนาด 2.5 Mb ซงถอวามขนาดใหญ

1

2


9. จะได Layer ใหมขนมาดงน

10. น า banner ทบนทกไวมาใสไวรวมกน โดยการเปดไฟล banner ขนมาจะปรากฏเปนภาพ ใหมทซอนทบ

กนอย

11. ใชเครองมอ Move tool คลกลากรปภาพ Banner ไปวางไวบนไฟลทสรางใหมจากขนตอนท 10 แลว

เลอกวางในต าแหนงทตองการบน Layer ทตองการสราง เวบไซต ดงรป


12. แลวน าสวนตางๆทออกแบบไวเพอตองการน ามาสรางเวบไซตมาประกอบเขาดวยกนใน Layer ทสรางไว

เพอสรางเวบไซต เมอเสรจแลวจะไดรปแบบออกมาดงรป

13. ตงแตขนตอนนเปนตนไปจะเปนขนตอนของการตดแยกภาพ โดยเรมตงแตการวางแนวตด ซงแนวตดจะใช

เสนไกด ซงจากภาพตวอยางยงไมสามารถสรางเสนไกลไดเพราะยงไมม Ruler ปรากฎ จงตองเรยก ruler

ออกมากอน โดยคลกท view > Rulers แลวโปรแกรมจะปรากฏเสนไมบรรทดออกมา

14. สรางเสนไกดโดยการใหน าลกศรไปชตรงเสนไมบรรทดแลวลากออกมาบนรปภาพ กจะไดเสนไกดขนมา

โดยอตโนมต จากนนกสรางเสนไกดเพอแบงภาพออกเปนสวนๆ ตามตองการ ดงรป

1


15. ลงมอท าการตดแยกพภาพ โดยใชเครองมอ ทชอวา Slice Tool


16. ลาก Slice Tool แบบทะแยงมมเพอใหรวดเรวในการตดแตละสวนของเวบไซต ตามกรอบของเสน Extras

ทก าหนดไว

จะเหนไดวาขอจ ากดของการแยกภาพคอภาพจะถกแยกออกเปนทรงสเหลยมเทานนไมสามารถท าการ

แยกภาพเปนทรงอนๆ ทไมใชสเหลยม

พนททจะถกตดแยกออกจะมเสนกรอบสน าตาลลอมรอบ พรอมทงทมมซายบนของพนทจะมเลขล าดบท

ของชนสวนก ากบอย พนหลงสน าเงนหลงตวเลขล าดบบงชวาเปนชนสวนทผใชก าหนดขนเอง สวนพนหลงสเทา

บงชวาเปนการตดโดยอตโนมตของโปรแกรม โดยคาดเดาจากการแบงสวนทผใชก าหนดไว


17. ท าใหครบตามทตองการ ดงรป

จากภาพมทงหมด 9 ภาพยอย ซงมเฉพาะภาพท 02 ทเราปลอยใหโปรแกรมก าหนดให สวนภาพยอยท

เหลอเราลงมอลาก slice tool เอง

18. จากนนท าการบนทกไฟลยอยๆ ทง 9 โดยการเลอกเมน File > Save for Web & Devices...

19. โปรแกรมจะปากฎหนาตางใหมขนมา ใหก าหนดประเภทของไฟลเปนแบบ GIF แลวกด Save


20. โปรแกรมจะปรากฏหนาตางใหมขนมาอกสอบถามวธการบนทกภาพ โดยมตวเลอก 3 แบบ คอ

1) HTML and Homepage (*.html) เปนการบนทกภาพยอยทงหมดและโครงรางของเวบเพจ

2) Image Only (*.gif) เปนการบนทกเฉพาะภาพยอยทงหมด

3) HTML Only (*.htm) เปนการบนทกเฉพาะโครงรางของเวบเพจ

ในบทเรยนนใหท าเลอกตวเลอกท 1 เพอสรางทงภาพและโครงรางของเวบเพจ

21. จะไดผลลพธออกมาคอ ม folder ชอ images ปรากฎขนภายในทอยทระบไวในขนตอนกอนหนา โดยใน

folder นจะประกอบดวยรปภาพยอยทงหมดทเราไดตดแยกไว พรอมทงมไฟลเวบเพจหนงไฟลทน าไปใช

ไดทนท

เนอหาในไฟล html ทไดนจะเปนค าสง HTML ในการสรางเวบเพจ ซงจะมการก าหนดชองใสรปภาพได

พอดกบขนาดของภาพท

ขอมลใน html ซงจะมการก าหนดชองใสรปภาพท

มขนาดเทากบรปทถกตดแยก


ใบงานท 5.1 เวบไซต สวนประกอบของเวบไซต และการเผยแพร

กจกรรมท 1 คนหา และ น าเสนอเวบไซตทมคณสมบตตามก าหนด

1. ใหนกเรยนบอกความแตกตาง และ ความเกยวของกนของ Internet และ World Wide Web

ความแตกตาง คอ……………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

ความเกยวของกน คอ...…………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

(internet คอ เครอขายของเครองคอมพวเตอร WWW คอเนอท harddisk ของคอมพวเตอรในเครอขาย)

2. ใหนกเรยนบอกความเกยวของกนของ website webpage และ homepage

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

(1 เวบไซตประกอบดวย หลายเวบเพจ เวบเพจทผเขาชมเวบไซตพบเปนเวบแรกเรยกวา homepage )

3. ใหนกเรยนคนหาตวอยางเวบเพจทมการแยกแสดง logo banner และ menu ออกจากกน จ านวน 2

เวบไซต

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

(เชน http://psd.tutsplus.com/ ทแยกทงสามสวนออกจากกน)

http://psd.tutsplus.com/


4. ใหนกเรยนคนหาตวอยางเวบเพจทมการแสดง logo banner และ menu ปนกน จ านวน 2 เวบไซต

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

(เชน http://www.mict.go.th ท เมน logo banner อยในภาพเดยวกน)

5. ใหนกเรยนคนหาตวอยางเวบเพจทใช sub menu แบบ rollover จ านวน 2 เวบไซต

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

(เชน http://www.mict.go.th ท sub menu จะถกแสดงใหเหนเมอ main menu ถกคลก)

กจกรรมท 2 คนหาและน าเสนอผใหบรการเผยแพรเวบไซตทดทสด

ใหนกเรยนแบงกลมเพอคนหาผใหบรการเผยแพรเวบไซตทดทสดส าหรบเวบไซตของโรงเรยน แลว

น าเสนอหนาชนเรยน

(ใหนสตไดฝกการวเคราะห วจารณผใหบรการ hosting ทเหมาะ โดยนสตจะไดท าความเขาใจในขอ

ก าหนดการ hosting ไดมากขน)


ใบงานท 5.2 ฝกปฏบตการออกแบบเวบไซต

ใหนกเรยนออกแบบเวบไซตตามทปรากฎในใบความร ตามขนตอนทระบ แลวตอบค าถามในแตละ

ขนตอน

ขนท 1. ก าหนดขนาดไฟลและทดสอบเพอใหขนาดทเหมาะสมกบ browser

ค าถาม: นกเรยนใชไฟลภาพขนาดเทาใด เพราะเหตใด…………………………………………………………………………….

………………………………………………………………………………………………………………………………………………………………….………

ขนท 2. จดแบงพนทโดยใชเสนไกด ส าหรบ logo เมนหลก banner เมนยอย และ พนทแสดงผล โดย

Logo ขนาด 100x100px , menu สง 65px , banner สง 140px , sub menu กวาง 280px

ค าถาม: การลบเสนไกดทไมตองการใชเครองมอใด และมขนตอนการใชอยางไร ………………………………….

…………………………………………………………………………………………………………………………………………………………………….….

ขนท 3. แบง layer ส าหรบพนทแตละสวน

ค าถาม: นกเรยนสราง layer จ านวนเทาใด แตละ layer เกบภาพอะไร……………………………………………………

……………………………………………………………………………………………………………………………………………………………….........………

ขนท 4. ก าหนดสแตละพนทใหใกลเคยงภาพประกอบในใบความร ในขนตอน 3.2

ค าถาม: รหสสของ main menu คอ........................................................

รหสสของ banner คอ...............................................................

รหสสของ sub menu คอ...........................................................

รหสสของ content คอ...............................................................

ขนท 5. กรอกขอความใน logo main menu banner submenu ใหเหมอนกบภาพประกอบใบความรขอ 3.2 และ

3.3

ค าถาม: ขอความ About และ and then some plan ควรอยใน layer เดยวกนหรอไม เพราะเหตใด

.......................................................................................................................................................

ขนท 6. หาภาพอนจากเวบไซตมาใชแทนภาพเครองบนกระดาษ แลวปรบความสวางเฉพาะบรเวณภาพกบ

ขอความ About

ค าถาม: นกเรยนใชวการใดในการปรบความสวางเฉพาะจด.....................................................

.......................................................................................................................................................

ขนท 7. เพมรปทรงสามเหลยมให banner

ขนท 8. ใชการสรางเงา การไลระดบส และฟวเตอรอนๆ อก 5 ประการเพอปรบใหเวบเพจมสสนสดใส

ค าถาม: นกเรยนมความตองตกแตงเวบเปนอยางไร และใชเครองมออะไร


ล าด

บ

ความตองการ เครองมอ รายละเอยด

เชน ท ำให banner โปรงใส Layer Opacity 65 %

1

2

3

4

5

ขนท 9. น าภาพประกอบดงแสดงมาท าเปนภาพพนหลง พรอมทงตกแตงภาพใหไดตามขนตอนท 4 โดยเนนให

ภาพ blur นอยๆ ส าหรบบรเวณทแสดง banner สวนบรเวณอนให blur มากๆ จนถงสด า

ค าถาม: นกเรยนมล าดบขนตอนการตกแตงภาพอยางไร แลวแตกตางจากใบความรอยางไร

ล าด

บ

ความตองการ เครองมอ รายละเอยด ขอแตกตางจาก

ใบความร

เชน เพมเรอบนเสน

ขอบน ำ

brush หว 5px วำดพอใหเหน

เปนเรอระยะไกล

สงใหม

1

2

3

4

5

ขนท 10. ใหรวมกลมกบเพอนๆ ในการปรบแตงภาพตามความสนใจของกลม แลวเตรยมน าเสนอผลงานหนาชน

เรยน


ใบงานท 5.3 การสรางปม (Button) ส าหรบเวบเพจ

1. ใหนกเรยนใชหลกการสรางปมส าหรบเวบเพจตามใบความร เพอสรางปมทรงสเหลยม และ รปดาว แทนปม

ทรงกลม พรอมบนทกรายละเอยดการใชงานทส าคญลงในตารางดานลาง

ขนท ความตองการ เครองมอทใช รายละเอยดการปรบแตง

1 สรำงทรงส เหล

ยม

Ellipse

marquee

ก ำหนดคำ round เพอใหขอบโคง 2 px

2

3

4

5

6

7

8

9

10

2. ใหนกเรยนรวมกลมกนเพอปรบแตงปมทรงแปลกๆ ใหสวยงามสดใส แลวน าเสนอหนาชนเรยน


ใบงานท 5.4 การตดแยกภาพเพอน าไปประกอบเปนเวบไซต

1. ใหนกเรยนศกษาการตดแยกภาพของไฟลเวบเพจตอไปน (4_green.psd) แลวตอบค าถาม

เราจะมวธการพสจนทราบไดอยางไรวามการตดแยกภาพยอยเปนจ านวนเทาใด.......................

...............................................................................................................................................

(save เพอดจ านวนไฟลภาพ หากเปดไฟลขนมาแลวเสน slice ไมปรากฎใหไปทเมน view > show

>slice)

ผลทไดจากการตดแบง 19,20,22,25,28 จะเปนเชนไร...........................................................

...............................................................................................................................................

(ตดรปและbannerได แต ตดขอความตามแนวดงซงไมเหมาะสม)

ใหนกเรยนตดแยงภาพในบรเวณ 19,20,22,25,28 ใหมเพอใหไดรปและ banner อยางเดม แต

ขอความใหแบงตามแนวนอน...................................................................................................

...............................................................................................................................................

(ลบเฉพาะ slice เดมโดยใชเครองมอ Slice Select Tool เลอก แลวกดปม del จากนนกสราง

Slice ใหมตามตองการ)


2. ใหนกเรยนแบงกลมเพอ slice แบงสวนภาพของ 3 ไฟลตอไปน(4_green, 4_black,4_car)แลวคดเลอก

ภาพยอยทไดมาสรางเปนเวบเพจใหม จากนนน าเสนอผลงานหนาชนเรยน

(เปนการฝกทกษะการตด ยกเลก แกไขการแยกภาพเพอใหไดเฉพาะภาพทตองการ และการการ

ฝกรวมสรางจตนาการในการสรางเวบเพจใหม ทงนนกเรยนสามารถใชความรจากหนวยการเรยนรอนท

ไดเรยนรมาแลวรวมดวยกได)




หนวยท 5 การออกแบบเวบไซต


1. อนเทอรเนต ตางจาก เวบไซต อยางไร

ก. อนเทอรเนต กคอเวบไซต

ข. อนเทอรเนตคอบรการทอยบนเครอขายเวบไซต

ค. เวบไซตคอบรการทอยบนอนเทอรเนต


2. อนเทอรเนต คออะไร

ก. เวบไซต

ข. บรการ

ค. เครอขายคอมพวเตอร


3. Home page และ web page ตางกนอยางไร

ก. ไมแตกตางกน

ข. Web page มความหมายกวางกวา home page

ค. Home page คอ web page แรกทผเขาเวบไซตจะไดพบเหน

ง. web page คอ Home page แรกทผเขาเวบไซตจะไดพบเหน

4. การเผยแพรเวบไซต มศพทเฉพาะวา

ก. Hosting และ จดทะเบยน domain

ข. Publishing

ค. Creating



5. เราควรก าหนดความกวางของเวบเพจเทาใด

ก. 1000 px

ข. ใหพอดกบขอมลทตองแสดงโดยไมตองสนใจขนาด

ค. เลอกขนาดใดกไดทคนสวนใหญสามารถเหนไดเหมอนๆ กน

ง. เลอกเทากบเวบไซตโรงเรยน

6. ภาพส าหรบใชบนเวบเพจควรมลกษณะอยางไร

ก. นามสกล .tiff เพราะมความคมชดมากทสด

ข. นามสกล .gif เทานน เพราะมขนาดไฟลเลกทสด

ค. ไมจ ากดนามสกล ขนอยกบความพอใจ แตจะใหดไมควรใชนามสกลทท าใหไฟลมขนาดใหญ

ง. ไมจ ากดนามสกล ขนอยกบระดบความคมชดทตองการ แตจะใหดไมควรใชนามสกลทท าใหไฟลม

ขนาดใหญ

7. การ slice ภาพส าหรบใชบนเวบเพจนนมขอดอยางไร

ก. ได html ไฟลทมขนาดพอดกบทกภาพท slice

ข. ได html ตามขอ ก และไดประเภทไฟลทเหมาะกบเวบดวย

ค. หากมประสบการณในการท าเวบกไมจ าเปนตองใชเพราะจะเพมความยงยากมากขน


8. เพราะเหตใดเราจงก าหนดความกวางเปนหนวย pixel

ก. ทจรงจะใชหนวยวดใดกไดขนอยกบความพอใจ

ข. เพอใหสมพนธกบหนวยวดขนาดของจอภาพทใชเขาเวบไซต

ค. เพอใหสมพนธกบหนวยวดของเครองพมพทใชพมพหนาเวบเพจ

ง. ขอ ข และ ค ถก

9. ภาพทใชเปนพนหลงควรมคณสมบตอยางไร

จ. ใหเหนรายละเอยดชดเจนเพราะจะท าใหเวบเพจสวยงามขน

ก. ใหเหนรายละเอยดเลอนลางเพราะจะไดไมเดนกวาภาพพนหนา

ข. อยางไรกได แตตองท าใหขอมลบนเวบเพจนาสนใจมากขน เดนกวาภาพพนหลง



เฉลย

ขอ 1 2 3 4 5 6 7 8 9 10

ตอบ ค ค ค ก ค ง ข ข ค




หนวยท 6 การออกแบบสอสงพมพ เวลา 4 ชวโมง

แผนการสอนท 1 เรอง การออกแบบสอสงพมพ


ผสอน








1. เพอใหมความรเกยวกบงานผลตสงพมพทนกออกแบบตองทราบ


1. สามารถออกแบบสงพมพตามขอก าหนดได


1. มวนย




ในบทเรยนน ผเรยนจะไดเรยนรงานผลตสงพมพ และขนตอนการผลตสงพมพตงแต การผลตไฟล

ตนฉบบ การเลอกกระดาษ การพมพ และ งานหลงพมพ เพอเปนความรใหครอบคลมกระบวนการทงหมด

เพอทจะไดเปนฐานความรในการเรยนหรอการปฏบตงานขนสงกวาน


1. ศกษา เรยนรการผลตสอสงพมพ

2. ขอควรปฏบตในการสรางไฟลตนฉบบ



1. ขนน า

1. ครยกตวอยางสงพมพรปแบบตางๆ ท photoshop สามารถท าได และสงพมพท photoshop ไม

เหมาะสมกบการผลต

2. ขนสอน

1. คาบท 1 ครแนะน ารายละเอยดในการผลตสงพมพตามใบความร 6.1 แลวนกเรยนรวมกลมเพอ

ท างานตามใบงานท 6.1 พรอมน าเสนอหนาชนเรยน

2. คาบท 2 ครสาธตการสรางภาพไฟลตนฉบบสงพมพตามใบความร 6.2 พรอมกบใหนกเรยนปฏบต

ตาม แลวนกเรยนท างานตามใบงานท 6.2 ทงทเปนงานเดยวและงานกลม

3.ขนสรป




2. ใบงานท 6.1 และ 6.2






1. เพอใหมความรเกยวกบงาน

ผลตสงพมพทนกออกแบบตอง

ทราบ




-ใบงาน

2. สามารถออกแบบสงพมพตาม

ขอก าหนดได





-ใบงาน


ท างาน


เวลา





ผเรยน






ประเมน










รอยละ 70 – 79


รอยละ 50 – 69








เวลา






เวลา




ทกขอ






ขอ


เวลา











....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

....................................................................................................................................................................

ลงชอ..................................................ผสอน

( )


ใบความรท 6.1 การผลตสอและสงพมพ

หนวยความรนมงหวงใหผเรยนไดรบทราบกระบวนการของการผลตสอและสงพมพตงแตเรมตน

จนถงขนตอนสดทายพอสงเขป เพอทผเรยนจะไดมพนฐานความรในการศกษาในระดบอดมศกษา หรอ เปนฐาน

ในการพฒนาประสบการณในการประกอบอาชพดานน

กระบวนการในการผลตสอสงพมพนนมหลากหลายขนตอนโดยเฉพาะสงพมพทเปนปายโฆษณา

ขนาดใหญจะมประเดนรายละเอยดและขนตอนวธมากเพอใหไดผลงานทสวยงามสมราคา ในบทเรยนนขอ

แบงกลมงานในการผลตสอสงพมพออกเปน 2 กลมตามล าดบการเกดกอน-หลง ดงน

1. งานผลตตนฉบบสงพมพ ประกอบดวย

1) การออกแบบโครงราง(Layout/Artwork) ขอมลและลวดลายสสน ทน าเสนอ

2) ก าหนดขนาดชนงาน เลอกกระดาษ/ไวนล และระบบการพมพ

3) การลงมอสรางตนฉบบทเหมาะกบขนาดชนงานและระบบการพมพ โดยใชโปรแกรม


4) การตรวจสอบความถกตองของตนฉบบขนสดทาย

5) การเตรยมไฟลตนฉบบเพอสงตอใหโรงพมพ

2. งานพมพ ซงเปนหนาทของโรงพมพ โดยประกอบดวย

1) การตรวจสอบคณสมบตของไฟลตนฉบบทรบเขามา

2) การเตรยมระบบการพมพ ตามความตองการของลกคาขอ 1.2 ประกอบดวย ประกอบ

แบบ แยกส ปรฟ ฟลม เพลต

3) พมพ ซงมระบบงานพมพใหเลอกหลายแบบ เชน ออฟเซต เลดเดอรเพรส เฟลกโซก

ราฟ กราววร ฉลลายผา หรอ ดจตอล

4) งานหลงพมพ ไดแก ตด พบ ปม ปะ เขาเลม ประกบ เปนตน

ในบทเรยนนจะเลอกกลาวถงรายละเอยดดานงานพมพทนกออกแบบจ าเปนตองรเพอทผเรยนจะ

ไดมความรในการเลอกใชสอสงพมพและ คณภาพของชนงานตรงกบความตองการมากทสด


ชนดของกระดาษส าหรบงานสงพมพ

ประกอบดวย 12 ชนด ดงน

1. กระดาษปรฟ (Newsprint)

2. กระดาษแบงค (Bank Paper)

3. กระดาษปอนด (Bond Paper)

เนอกระดาษ ท าจากเยอเคมทผานการฟอกและอาจมสวนผสมของเยอทมาจากเศษผา ผวไมเรยบ

สวยงามปานกลาง

ส มสขาว

น าหนก อยระหวาง 60 – 100 กรม/ตารางเมตร

การใชงาน ความสวยงามปานกลาง พมพสเดยวหรอหลายสกได

4. กระดาษอารต (Art Paper)

เนอกระดาษ ท าจากเยอเคม (เยอทผลตโดยใชสารเคม) และเคลอบผวใหเรยบดานเดยวหรอทงสอง

ดาน การเคลอบอาจจะเคลอบมนเงาหรอแบบดานกได

ส มสขาว


การใชงาน งานพมพทตองการความสวยงาม งานพมพสอดส เชนแคตตาลอก โบรชวร

เนอกระดาษ เยอบดทมเสนใยสนมกใชเยอกระดาษใชแลวมาผสมดวย ความแขงแรงนอย

ส สอมเหลอง

น าหนก 40 – 52 กรม/ตารางเมตร

การใชงาน งานพมพหนงสอพมพ และเอกสารทไมตองการคณภาพมาก

เนอกระดาษ กระดาษบางไมเคลอบผว

ส สใหเลอกหลายส

น าหนก ไมเกน 50 กรม/ตารางเมตร

การใชงาน พมพแบบฟอรมตาง ๆ ทมส าเนาหลายชน


5. กระดาษฟอกขาว (Woodfree Paper)

เนอกระดาษ ท าจากเยอเคม (เยอทผลตโดยใชสารเคม) และฟอกใหขาว เปนกระดาษ

ทมคณภาพและมความหนาแนนสง การดดซมนอย

ส ขาว

น าหนก -

การใชงาน งานพมพหนงสอ กระดาษพมพเขยน

6. กระดาษเหนยว (Kraft Paper) เปนกระดาษท มสเปน น าหนก ใชส าหรบ

เนอกระดาษ ท าจากเยอซลเฟต (เยอใยยาวทผลตโดยใชสารซลเฟต)จงมความเหนยว

เปนพเศษ

ส สน าตาล


การใชงาน ท าสงพมพบรรจภณฑ กระดาษหอของ ถงกระดาษ

7. กระดาษการด (Card Board)

เนอกระดาษ ความหนาและแขงแรงประกอบดวยชนของกระดาษหลายชน บางชนดมผวเคลอบมนเรยบ

ทมชอเรยกวากระดาษอารตการด

ส ชนนอกสองดานมกเปนสขาว แตกมการดสตาง ๆ ใหเลอกใช


การใชงาน ส าหรบท าปกหนงสอ บรรจภณฑทมราคา เชนกลองเครองส าอาง

8. กระดาษกลอง (Box Paper) เปนกระดาษท ม น าหนกกระดาษกลองอย ใชส าหรบ ฯลฯ

เนอกระดาษ ท าจากเยอบด และมกน าเยอจากกระดาษใชแลวมาผสม ผวดานหนงมกจะประกบ

ดวยชนของกระดาษขาวซงอาจมผวเคลอบมนหรอไมกไดเพอความสวยงามและพมพ

ภาพลงไปได หากเปนกระดาษไมเคลอบ จะเรยก กระดาษกลองขาว หากเปนกระดาษ

เคลอบผวมน จะเรยก กระดาษกลองแปง

ส สคล าไปทางเทาหรอน าตาล

น าหนก ระหวาง 180 – 600 กรม/ตารางเมตร

การใชงาน ท าสงพมพบรรจภณฑ เชน กลอง ปายแขง


9. กระดาษแขง (Hard Board) เปนกระดาษ น าหนกม ใชท า

เนอกระดาษ หลายชนแขงหนาท าจากเยอไมบดและเยอกระดาษเกา มผวขรขระ มค าเรยกกระดาษ

ชนดนอกวา กระดาษจวปง

ส สคล า

น าหนก ตงแต 430 กรม/ตารางเมตรขนไป

การใชงาน ใสในของปกหนงสอ ฐานปฏทนตงโตะ บรรจภณฑตาง ๆ

10. กระดาษแฟนซ (Fancy Paper) ประโยชนส าหรบกระดาษชนดนสามารถ

เนอกระดาษ เปนค าเรยกโดยรวมส าหรบกระดาษทมรปรางลกษณะของเนอและผวกระดาษทตาง

จากกระดาษใชงานทวไป บางชนดมการผสมเยอทตางออกไป บางชนดมผวเปนลาย

ตามแบบบนลกกลงหรอตะแกรงทกดทบในขนตอนการผลต มทงกระดาษบางและ

หนา

ส มสสนใหเลอกหลากหลาย

น าหนก -

การใชงาน น าไปใชแทนกระดาษทใชอยทวไป ตงแตนามบตร หวจดหมาย ไปจนถงกลองบรรจ

ภณฑ

11. กระดาษอน ๆ นอกจากกระดาษชนดตาง ๆ ทเอยมาขางตนแลว ยงมกระดาษชนดอน ๆ อก เชน

กระดาษถนอมสายตา กระดาษกนปลอม (Security Paper) กระดาษเอนซอาร (Carbonless Paper)

กระดาษสงเคราะห กระดาษสตกเกอร ฯลฯ

12. ไวนล (Vinyl) ไมใชกระดาษแตเปนแผนพลาสตกพเศษทไดมาจากการผสมของ

UPVC(Unplastizide Poly Vinyl choride) กบสารเพมความทนทานตอสภาวะอากาศ ตอแรงกระแทก

ตอแสงแดด เปนตน

ไวนลมขนาดหนากวางตงแต 90, 110, 123, 132, 150, 160, 180, 202, 220, 240, 250,

260, 280 และ 320 เซนตเมตร

ปกตปายทแขวนตามหนารานคาจะมขนาด 1x3 เมตร ปายโครงไมทตดขางถนนขนาด

1.2x2.4 เมตร และปายบลบอรดขนาดใหญทตดขางถนนนนเปนการตดภาพเปนสวนๆ ตามขนาด

ของไวนลแลวพมพ เสรจแลวกตอพนไวนลเขาดวยกนดวยกาวรอน


มาตรฐานขนาดของกระดาษส าหรบสอสงพมพ

เนองจากมการใชกระดาษกนอยางกวางขวาง จงมมาตรฐาน ISO ทก าหนดขนาดกระดาษรมให

เปนระบบมาตรฐานทมสดสวนของความกวางและความยาวภายหลงจากการตดแบงครงตองคงทในอตราสวน

ความกวางตอความยาว เทากบ 1 ตอ 1.414 เสมอ

ขนาดของกระดาษตามมาตรฐาน เรยกวา กระดาษชด A ซงทกคนรจกกระดาษขนาด A4 ทใชอยาง

แพรหลายในส านกงานและสถาบนการศกษา ในมาตรฐานนมการแบงขนาดเรยงล าดบตามใหญทสดไปหาเลก

ทสด เปน A0 A1 A2 ไปจนถง A10 โดย A0 จะมขนาดความกวางคณความยาวเทากบ 1 ตารางเมตรพอด

โดยแตละรหสมขนาดดงน

ชอขนาด ขนาดเปนมลลเมตร ลกษณะการใชงาน

A0 841x1189

ใชส าหรบเขยนแบบแปลน A1 594x841

A2 420x594

A3 297x420

A4 210x297 กระดาษจดหมาย วารสาร บนทก

A5 148x210 กระดาษจดหมายเลก

A6 105x148 โปสการดสากล สมดพก

A7 74x105 สมดพกขนาดเลก ใบรบหนงสอ

A8 52x74 นามบตร

A9 37x52 ตวรถไฟ

A10 26x37 แสตมป


ทงนยงมมาตรฐานของขนาดกระดาษ อกหลายแบบ ไดแก

1. มาตรฐานรหสชด B มาตรฐานรหสชด B นจะเปนทคนเคยนอยกวารหสชด A วธการก าหนดขนาดใน

รหสชดนเรมโดยใหรหส B1 มขนาดอยระหวาง A0 กบ A1 และใหมระยะดานสงเทากบ 1 เมตร ท าใหดานกวาง

เทากบ 0.707 เมตร (มาจากขอก าหนด ความสงหารความกวางเทากบสแควรรทของสอง) ดงนน ขนาดของรหส

ชด B จะมดานใดดานหนง เปนครงหนง หรอหนงในส หรอหนงในแปดของ 1 เมตรไปเรอย ๆ งานทนยมใช

มาตรฐานรหสชดนคองานโปสเตอร หนงสอ (ใช B5) พาสปอรต ซองเอกสาร

2. มาตรฐานรหสชด C รหสชดนมไวใชก าหนดขนาดของซองใสเอกสาร ทเลขเดยวกน รหสของ C จะ

ใหญกวาของ A แตเลกกวาของ B ดงนน กระดาษจดหมาย A4 จะสามารถใสลงในซองขนาด C4 และซองขนาด

C4 กจะใสลงในซอง B4 ไดพอเหมาะ

3. มาตรฐานของขนาดกระดาษ ISO 216 จดเดนของมาตรฐานนคอเมอน ากระดาษทมขนาดตามท

ก าหนดไวมาพบครง ขนาดของกระดาษทพบแลวยงคงมสดสวน (อตราสวนของดานสงกบดานกวาง) เดยวกบ

ขนาดกอนพบ และหากพบครงไปอก ขนาดใหมกยงคงมสดสวนเดยวกนหมด ประโยชนทไดคอเมอน ากระดาษไป

ตดแบงไปใชงานตามมาตรฐานน จะไมเกดการเสยเศษหากมงานทตองการยอสวน เพอใหไดผลตามทหลกการท

ก าหนด ไดมการค านวณและพบวาอตราสวนความสงหารดวยความกวางจะเทากบ สแควรรทของสอง (1.4142)

และยงพบวาระยะความกวาง, ความสงของขนาดพบครงแลวจะลดลงเปน 70.7% จากเดมเสม

4. มาตรฐานขนาดกระดาษ ANSI ซงใชในทวปอเมรกาเหนอ โดยใหขนาดมาตรฐาน 8.5 x 11 นวใช

รหส ANSI A และขนาด ledger/tabloid ใชรหส ANSI B

5. มาตรฐาน JIS ของประเทศญปน

6. มาตรฐาน SIS ของประเทศสวเดน


การพมพหนงสอ

กรณการพมพหนงสอพมพ นตยสาร หรอ วรสาร ทเรยกวา “พมพหนงสอยก” นนจะใชกระดาษปรฟ

ขนาด 31x43 นว และขนาด 25x35 นว จงมผลท าใหเกดหนงสอ 8 หนายกธรรมดา และ 8 หนายกเลก

ทมาของ “หนายก” เรมจาก เมอน ากระดาษ 31x43 นว มาพบแบงครงตามดานใดดานหนงเปน 2 สวน

เทาๆ กนแลว ท าใหแตละสวนมขนาด 31 x 21.5 ซง ขนาดของกระดาษนเรยกวา ขนาดตด 2

หากพบครงอกดานเพอใหได 4 สวนเทาๆ กนแลว ท าใหแตละสวนมขนาด 15.5x21.5 นว ขนาดของ

กระดาษนเรยกวา ขนาดตด4 หรอ 1ยก

กระดาษขนาด 1ยก มาพบแบงใหไดกระดาษ 4 สวนเทาๆ กน ขนาดทเทากบ 1 สวนนจะเรยกวา ขนาด4

หนายก

หากเมอน ากระดาษขนาด 1ยก มาพบแบง 8 สวนเทาๆ กน ขนาดทเทากบ 1 สวนนจะเรยกวา ขนาด8

หนายก

หากเมอน ากระดาษขนาด 1ยก มาพบแบง 16 สวนเทาๆ กน ขนาดทเทากบ 1 สวนนจะเรยกวา ขนาด16

หนายก

เทคโนโลยการพมพและประเภทการพมพ

เทคโนโลยการพมพทใชอยเปนเบองหลงของชอการพมพแตละประเภทมรายละเอยดพอสงเขปดงน

การพมพพนนน (Relief Printing) เปนการพมพทใชหลกการใหสวนทเปนภาพบนแมพมพจะมผวนนกวา

สวนอน เพอรบหมกแลวถายลงบนวสดใชพมพ การพมพประเภทนม การพมพเลตเตอรเพรสส การพมพเฟล

กโซกราฟ

การพมพพนลก (Recess Printing) เปนการพมพทใชหลกการใหสวนทเปนภาพบนแมพมพจะมผวลกกวา

สวนอน เพอขงหมกไวแลวถายลงบนวสดใชพมพ การพมพประเภทนม การพมพกราววร การพมพแพด

การพมพพนราบ (Planographic Printing) เปนการพมพทใชหลกการน ากบน ามนไมรวมตวกน ผวของ

แมพมพชนดนจะเสมอกนหมดโดยใหสวนทเปนภาพมสภาพเปนไขมนสามารถรบหมกซงเปนน ามนเชนกน สวนท

ไมเปนภาพจะสามารถรบน าไวได ในการพมพ จะคลงแมพมพดวยเยอน า เยอน าไมถกกบไขจะไปเกาะเฉพาะสวน

ทไรภาพ แลวคลงหมกตาม หมกไมถกกบน าจะไปเกาะเฉพาะสวนทเปนภาพ เมอน าวสดใชพมพทาบบนแมพมพก

จะเกดภาพตามตองการ การพมพประเภทนม การพมพหน การพมพออฟเซท

การพมพพนฉล เปนการพมพทใชหลกการใหหมกผานทะลสวนทเปนภาพบนแมพมพไปตดอยบนวสดใช

พมพ ท าใหเกดภาพ การพมพประเภทนม การพมพโรเนยว การพมพซลคสกรน

การพมพดจตอล (Digital Printing) เปนการพมพทใชเครองพมพตอพวงกบคอมพวเตอร โดยรบ

ขอมลภาพจากคอมพวเตอรมาพมพ

การพมพแบบถายโอนความรอน (Thermal Transfer Printing) ซงใชหลกการถายความรอนจาก

หวพมพไปยงฟลมทเคลอบดวยหมกพมพท าใหหมกพมพหลดไปเกาะตดกบวสดใชพมพจนเกดเปนภาพ


การพมพแบบพนหมก/องคเจท (InkJet Printing) ซงใชหลกการพนหยดหมกเลก ๆ จากหวพนไปสราง

เปนภาพบนวสดใชพมพ

การพมพแบบไฟฟาสถตย (Electrostatic Printing) ซงใชหลกการควบคมล าแสงสรางภาพเปนประจ

ไฟฟาบนกระบอกโลหะแลวใหผงหมกไปเกาะบนกระบอกโลหะตามบรเวณทมประจอยเกดเปนภาพทถกถายทอด

ไปเกาะตดบนวสดใชพมพอกทหนง

ประเภทงานของการพมพทนกออกแบบจะตองรเพอทจะไดเรยกชอไดถกตองไมสสนปะปนกบเทคโนโลย

การพมพ ทผประกอบการโรงพมพนยมท ากนในปจจบนมดงน

การพมพออฟเซท (Offset Printing) เปนการพมพพนราบทใชหลกการน ากบน ามนไมรวมตวกน โดย

สรางเยอน าไปเกาะอยบนบรเวณไรภาพของแผนแมพมพ เมอรบหมก หมกจะไมเกาะน าแตจะไปเกาะบรเวณท

เปนภาพแลวถกถายลงบนผายางและกระดาษพมพตอไป การพมพออฟเซทสามารถผลตงานพมพทมคณภาพสง

จนถงสงมาก เครองพมพมหลายขนาด มทงเครองพมพ 1 ส 2 ส 4 ส 5 ส หรอมากกวานน ตวอยางงานพมพ

ออฟเซท เชน พมพแผนพบ พมพใบปลว พมพหนงสอ พมพวารสาร พมพนตยสาร พมพโบรชวร พมพแคต

ตาลอก บรรจภณฑกระดาษ งานพมพใชในส านกงาน ฯลฯ

การพมพเลตเตอรเพรสส (Letterpress Printing) เปนการพมพพนนนทใชแมพมพท าจากโลหะผสมหรอ

พอลเมอรอยางหนากดผวจนเหลอสวนทเปนภาพนนส าหรบรบหมกพมพแลวถายทอดลงบนวสดทใชพมพโดยใช

วธกดทบ ในยคกอนมการใชตวอกษรโลหะเปนตว ๆ มาจดเรยงเปนขอความทตองการแลวใชเปนแมพมพ การ

พมพเลตเตอรเพรสสมมาชานานเกาแกมาก ในปจจบนมการพมพประเภทนเหลออยนอย เนองจากการท า

แมพมพล าบากและภาพพมพทไดไมคอยสวยงาม ตวอยางงานพมพประเภทนคอ นามบตร แบบฟอรม ฉลาก

กลอง ปายและงานพมพอน ๆ ทไมตองการความละเอยดมาก

การพมพ(ซลค)สกรน (Silkscreen Printing) เปนการพมพพนฉลทใชหลกการพมพโดยใหหมกซมทะล

ผานผาทขงตงไว และใหทะลผานเฉพาะบรเวณทเปนภาพ สามารถพมพงานสอดสได ความละเอยดของภาพพมพ

ขนอยกบความถของเสนใยผา สามารถพมพลงบนวสดไดหลากหลากชนด ทงกระดาษ ผา ไม พลาสตก และพมพ

บนวสดทมผวโคงได ตวอยางงานพมพประเภทนคอ นามบตร บรรจภณฑตาง ๆ ปายกระดาษ/พลาสตก/โลหะ

ปายโฆษณา เสอ ผนผา ถงพลาสตก ขวด จานชาม ชนสวนอปกรณตาง ๆ

การพมพดจตอล (Digital Printing) เปนการพมพทใชเครองพมพหรอพรนเตอรตอพวงกบเครอง

คอมพวเตอร สามารถสงพมพไดโดยตรงจากเครองคอมพวเตอร เครองพมพหรอพรนเตอรทใชคอ เครองพมพ

องคเจทขนาดเลกและใหญ เครองพมพเลเซอรความเรวปกตจนถงความเรวสง เครองพมพดจตอลใชหมกประจ

ไฟฟา ตวอยางงานพมพประเภทนคอ งานพมพทมปรมาณไมมาก เชน นามบตร แผนพบ ใบปลว หนงสอ งาน

พมพทมการเปลยนภาพหรอขอความบอย ๆ เชน ไดเรคเมล งานพมพปายโฆษณาขนาดใหญ (ใชเครององคเจท

ขนาดใหญ)

การพมพเฟลกโซกราฟ (Flexography) เปนการพมพพนนนทใชแผนพอลเมอรทมความยดหยนทดเปน

แมพมพโดยกดสวนทไมรบหมกเวาลกลงไป การพมพในระบบนใชหลกการคลายกบการพมพแบบเลตเตอรเพรส


คอใชการกดทบ แตหมกทใชจะเหลวกวาและใชลกกลงทท าขนเปนพเศษท าหนาทจายหมกในปรมาณทสม าเสมอ

ใหกบแมพมพ การพมพประเภทนไดรบการพฒนาจนสามารถพมพภาพสอดสได แมคณภาพงานพมพจะยง

เทยบเทาการพมพแบบออฟเซทไมได แตกมใชในสงพมพหลาย ๆ ประเภท งานพมพประเภทนคอ กลองลกฟก

กลองกระดาษแขง ฉลาก ปาย กลองกระดาษ กระดาษช าระ ถงและซองพลาสตก และงานพมพสอดส

การพมพกราววร (Gravure) เปนการพมพพนลกทใชแมพมพทเปนรองลกส าหรบบรเวณทเปนภาพเพอ

เกบหมกแลวไวปลอยลงบนผวของชนงานพมพ คณภาพของงานพมพประเภทนอยในเกณฑทด แมพมพแบบนมก

เปนลกกลงทรงกระบอก ท าดวยโลหะใชวธกดผวทรงกระบอกเปนหลมตามบรเวณทเปนภาพ จงท ายากและใช

เวลา อกทงมคาใชจายสง จงเหมาะกบงานยาว ๆ งานพมพประเภทนคอ งานพมพประเภทซองพลาสตกใสอาหาร

และขนม และงานพมพบนพลาสตกตาง ๆ งานพมพในตางประเทศบางแหงมการพมพแมกกาซน หนงสอพมพ

และงานพมพบนกระดาษทมปรมาณพมพสง

หลกการพมพในระบบตาง ๆ มกจะเปนการพมพทละสลงบนวสดใชพมพ แมพมพทท าขนกถกท าส าหรบ

สแตละส หลกการคราว ๆ ของการพมพโดยทวไปจะมระบบปอนวสดใชพมพเขาไปในเครองพมพผานการพมพท

ละสโดยการรบโอนภาพหมกจากแมพมพซงรบหมกมาจากระบบจายหมกมากอน เมอพมพเสรจกสงวสดใชพมพ

ไปเกบพกไว เครองพมพแตละเครองอาจมหนวยพมพ 1 ส 2 ส 4 ส หรอมากกวานน การพมพหลากสจงอาจถก

น าเขาเครองพมพหลายเทยว เชนงานพมพ 4 สหนาเดยว เมอพมพบนเครองทมหนวยพมพสเดยวตองพมพ

ทงหมด 4 เทยวพมพ เครองพมพบางประเภทอาจมสวนตอทายหลงจากผานหนวยพมพแลว เชน มหนวยเคลอบ

ผวดวยน ายาเคลอบ มหนวยอบแหงเพอใหหมกแหงเรวขน มหนวยพบ หนวยตดซอย หนวยไดคท ฯลฯ เพอลด

ขนตอนการท างานหลงการพมพ เมอผานการพมพครบถวนแลว ตองรอพกใหหมกแหงสนทจงน าไปด าเนนการ

ขนตอนตอไป

ส าหรบการพมพระบบดจตอลจะไมมขบวนการท าฟลมแยกสหรอแมพมพ สามารถสงค าสงพมพโดยตรง

จากเครองคอมพวเตอรไดเลย ท าใหประหยดคาใชจายและเวลาทใชไปกบการท าแมพมพ แตมขอเสยคอ คาพมพ

ตอแผนเทยบกบการพมพแบบปกตยงสงอย หากพมพจ านวนมากจะท าใหตนทนสงกวาแบบปกต

การเตรยมไฟลกอนงานพมพ(ส าหรบโรงพมพ)

โรงพมพจะมขนตอนการจดการกบขอมลกอนการพมพ ดงน

1. การแปลงเปนขอมลดจตอล (Digitization) ในกรณทอารตเวรคมาเปนภาพลายเสน หรอภาพถาย/

ภาพวาดมาเปนฟลมสไลด/ฟลมเนกาทฟ จ าเปนตองแปลงภาพเหลานใหเปนขอมลดจตอลซงท าไดโดยใชเครอง

สแกนเนอร (Computer Scanner) และเพอใหไดภาพทดมคณภาพควรใชเครองสแกนเนอรทมคณภาพสง (High-

end Scanner) เมอไดเปนภาพดจตอลกท าการประกอบหนาในคอมพวเตอรโดยใชซอฟตแวรจดหนา เชน Adobe

Indesign,Illustrator, Pagemaker

2. การตรวจสอบไฟลขอมล (Preflight) เพอปองกนความผดพลาดทจะเกดขนในชนงานพมพอนจะ

กอใหเกดความเสยหายและสนเปลองคาใชจาย จ าเปนตองมการตรวจสอบรายละเอยดของไฟลงาน/ไฟล


อารตเวรค โดย ตรวจสอบวาไฟลภาพมครบหรอไม แบบตวอกษรถกตองหรอไม ขนาดหนาของชนงานถกตอง

หรอไม มการเผอตดตกเพยงพอหรอไม การก าหนดสถกตองหรอไม ฯลฯ

3. การท าปรฟดจตอล (Digital Proofing) กอนทจะท าเปนแมพมพจรง มกจะมการท าตวอยางงาน

พมพขนเพอตรวจดรายละเอยดตาง ๆ ตลอดจนสสนวาถกตองหรอไม การท าตวอยางหรอปรฟในขนนจะเปนการ

พมพจากเครองพมพคอมพวเตอรหรอพรนเตอร โดยทวไปจะใชพรนเตอรระบบองคเจท ( Inkjet Printer) ขนาด

ใหญและพมพตวอยางงานไดขนาดกบการจดวางหนาเหมอนบนแมพมพจรง การท าปรฟนจงเรยกการท าปรฟ

ดจตอล (Digital Proof) การท าปรฟดจตอลจะประหยดกวาการท าแมพมพจรงแลวท าปรฟจากแมพมพ หากม

การแกไขกไมตองเสยคาใชจายมาก ในปจจบนสสนบนปรฟดจตอลใกลเคยงกบการพมพบนเครองพมพ มง าน

จ านวนมากทท าแตปรฟดจตอลโดยไมท าปรฟจากแมพมพและใชปรฟดจตอลในการเปรยบเทยบสสนเวลาพมพ

งานจรง

4. การจดวางหนาส าหรบท าแมพมพ (Imposition) เนองจากแมพมพทใชพมพมกมขนาดใหญกวา

ชนงาน แมพมพหนงชดสามารถวางชนงานไดหลายชน เชนวางหนาหนงสอได 8 หนา วางฉลากได 40 ชน เปนตน

ขนตอนนจะเปนการจดวางหนาส าหรบท าแมพมพแตละชด อนงในการวางหนาหนงสอตองจดวางหนาใหถกตอง

เมอน าไปพบแลวหนาตาง ๆ จะไดเรยงอยางถกตอง ซอฟตแวรทใชในการจดวางหนาหนงสอม Prep, InPosition,

Impostrip เปนตน

5. การท าฟลมแยกส (Process Film Making) เปนการท าฟลมทแยกเปนส ๆ ส าหรบท าแมพมพชด

หนง ๆ หลกการของการท าฟลมแยกสคอ การแยกภาพในไฟลงานออกมาเปนภาพสโดด ๆ โดยมาตรฐานจะได

ภาพแมสสภาพ ซงเปนภาพสของ CMYK (Cyan Magenta Yellow Black) ไฟลงานจะถกสงเปนไฟลในรปแบบโพ

สครปต (PostScript File) แลวแปลงเปนไฟลรปแบบราสเตอร (Raster File) สงไปเครองยง/พมพฟลมทมชอ

เรยกวา เครองอมเมจเซทเตอร (Imagesetter) ซงเปนเครองพรนเตอรแบบหนงทใชล าแสงสรางภาพแบบฮาฟโทน

(Halftone) บนแผนฟลมไวแสง ไดฟลมทมภาพขาวด าตามภาพของสแตละสทแยกไว และเรยกฟลมชดนวาฟลม

แยกส

6. การท าแมพมพ (Plate Making) เมอไดฟลมแยกสกน าฟลมของแตละสมาทาบกบแมพมพทเคลอบ

ดวยสารไวแสง ท าการฉายแสง สวนทโดนแสงจะท าปฏกรยากบสารไวแสง เมอน าไปลางน ายากจะเกดภาพบน

แมพมพส าหรบใชในการพมพตอไป ในปจจบนมการสรางเครองท าแมพมพโดยตรงจากคอมพวเตอรโดยไมตอง

ท าฟลมแยกสกอน เครองดงกลาวมลกษณะการท างานคลายเครองอมเมจเซทเตอร แตเปลยนวสดทจะรบล าแสง

เพอสรางภาพจากฟลมไวแสงเปนแมพมพไวแสง เครองทใชท าแมพมพจากคอมพวเตอรในระบบออฟเซทเรยกวา

เครองเพลทเซทเตอร (Platesetter) ประโยชนทไดคอท าใหลดขนตอนและคาใชจายตลอดจนไดแมพมพทม

คณภาพคมชดขน แมนย าขน ขอเสยคอเพลทชนดนยงมราคาสงอย หากมการแกไขหรอแมพมพช ารด คาใชจาย

ในการท าแมพมพใหมจะสงกวา

7. การท าปรฟแทน/ปรฟแมพมพ (Plate Proofing) ในกรณทตองการตวอยางงานพมพทม

รายละเอยดและสสนทถกตองยงขนไวใชเปรยบเทยบกบงานในขบวนการพมพ จ าเปนตองท าตวอย างหรอปรฟ

จากแมพมพจรง ซงอาจท าโดยใชเครองปรฟทจ าลองการพมพจากเครองพมพจรงหรอใชเครองพมพจรงเลยกได


ประเภทงานทมกตองท าปรฟแทนคอ งานโบรชวร แคตตาลอก นตยสาร แผนพบบางรายการ บรรจภณฑ

กระดาษ และงานพมพทตองการคณภาพสง ฯลฯ

โปรแกรมในการออกแบบ

โปรแกรมในการออกแบบทนยมใชจะมอย 3 กลม คอ โปรแกรมส าหรบการสรางงานกราฟกแบบเวก

เตอร เชน Adobe illustrator โปรแกรมส าหรบสรางงานกราฟกแบบราสเตอร เชน Adobe Photoshop และ

โปรแกรมส าหรบงานท าหนาหนงสอ เชน Adobe InDesign

นกออกแบบควรจะใชโปรแกรมออกแบบใหตรงตามประเภทของงานกอนตงแตตน เพอปองกนไมใหเกด

ความสญเสยคณภาพของงาน การใชโปรแกรมผดประเภทจะท าใหเกดความยงยากในการท างาน และท าให

คณภาพของงานไมเปนตามความตองการ โดยแตละโปรแกรมมจดเดนดงน

Photoshop เหมาะส าหรบงานออกแบบทเนนไปทการท างานเกยวกบภาพเปนหลก เชน โปสเตอร โบรชวร

ออกแบบหนาปกหนงสอ งานโฆษณา เปนแผนๆ เปน ไมวาจะเปนภาพถายจากกลองดจตอล หรอใชประโยชน

ในการสรางภาพกราฟกทสวยงามเพอน าไปใชในโปรแกรมดานอนตอไป จงไมเหมาะกบการน ามาออกแบบ

หนงสอเปนเลมโดยตรง

Illustrator (illustrator) เหมาะส าหรบงานออกแบบภาพลายเสน เชนโลโกเวบไซต หรอภาพปกหนงสอ ม

ความสามารถคลายกบ photoshop

InDesign เหมาะส าหรบการออกแบบงานหนงสอทเปนลกษณะเลม ๆ มหลาย ๆ หนา ลกษณะการใช

งานจะเปนในลกษณะจดหนาหนงสอมากกวาการออกแบบกราฟฟค จงมกใชภาพทสรางจาก Photoshop หรอ

Illustrator

ทงนยงมโปรแกรมคอมพวเตอรอนทสามารถน ามาใชไดเชน pageMager CorelDraw เปนตน


ใบความรท 6.2 การออกแบบสงพมพ

จากใบความรท 6.1 ท าใหทราบไดวาโปรแกรม photoshop นนเหมาะส าหรบการจดท าสงพมพทไมเปน

เลม เพราะไมมความสามารถในการจดหนาตามระบบหนงสอได แต photoshop เหมาะส าหรบการท าสงพมพทไม

ตองเขาเลม ไดแก ใบปลว แผนพบ โปสเตอร เปนตน

นกออกแบบมอใหมมกท าผดพลาดในเรองตางๆ ทจะกลาวดงตอไปน เชน ไมมการเผอตดตก ใช

Resolution หรอ profile สทไมเหมาะสม ใชรปภาพประกอบทมคณภาพต า เปนตน จงเปนผลใหขนตอนการพมพ

ลาชาและทส าคญท าใหคณภาพของชนงานมสสนไมสวยเหมอนตอนออกแบบบนจอคอมพวเตอร

ในบทนจะเปนการใหความรและขอตองปฏบตทถกตองส าหรบชวงเวลาทส าคญในการใชงานโปรแกรม

photoshop ไดแก การก าหนดคณลกษณะของไฟลงาน การบรหารองคประกอบภายในไฟลงาน และ การจดท า

ไฟลผลลพธเพอสงโรงพมพ ทงนเพอทผเรยนจะไดสรางไฟลตนฉบบทโรงพมพใชไดทนทโดยคณภาพของชนงาน

เหมอนกบการออกแบบ ซงขอยกตวอยางของการผลตโปสเตอร และ แผนพบ เพอใหผเรยนไดดงน

การออกแบบโปสเตอร (poster)

โปสเตอร เปนแผนภาพขนาดใหญมจดประสงคเพอโฆษณาเชญชวน หรอ ประกาศบอกขาวสาร

โปสเตอรถกใชใหเปนประโยชนในกจกรรมนานา ประการ เชน สงเสรมการศกษา สงเสรมการทองเทยว การกฬา

และดนตร โดยเฉพาะโปสเตอรขนาดเลกใชไดทงเปนสอส าหรบการโฆษณา และเปนเครองประดบตกแตงหองมผ

นยมกนถงขนสะสมกนเหมอนกบสะสมแสตมป

โปสเตอรยงเปนประโยชนกบวงการอนๆ อกมาก เชน วงการการเมอง การกศล มลนธตาง ๆ เปนตน

เพราะโปสเตอรเปนชองทางการเผยแพรขาวสารทมประสทธภาพชองทางหนงใน ทามกลางชองทางการสอสาร

ชนดตาง ๆ ทใชกนอยในสงคมปจจบน

การท าโปสเตอรมครอบคลมทงในดานศลปะการออกแบบ เรองความคดสรางสรรค ตลอดจนเทคนค

วธการผลต เนองจากผคนยอมรบโปสเตอร ในลกษณะเปนสญลกษณแหงศลปะซงแสดงออกถงวฒนธรรม หรอ

รสนยม

รปแบบและรายละเอยดของงานพมพโปสเตอร

งานพมพโปสเตอรจะมรปรางเปนกระดาษแผนเดยว กระดาษทใชไมหนามาก การพมพบนโปสเตอรจะม

ทพมพเพยงดานเดยว

ขนาดของงานพมพโปสเตอร มหลากหลายขนาดขนอยกบความตองการผวาจางและขนอยกบขนาดของ

สอทมเพราะอาจท าใหมการเสยเศษแผนพมพ ทงนขนาดทมกจะใชกนไดแก 15”x 21”, 10.25”x 15”, 17”x

23.5”(A2), 11.75”x 17”(A3), 8.25”x 11.75”(A4) และขนาดอนๆ ตามขนาดของไวนล

กระดาษทใชส าหรบงานพมพโปสเตอร กระดาษปอนด 100 แกรมขนไป หรอ กระดาษอารตมน/ดาน 120

แกรมขนไป หรอ ไวนล


การพมพและตกแตงผวบนของงานพมพโปสเตอร สามารถใชการพมพแบบ 1ส 2ส 3ส 4ส หรอ

มากกวา โดยใชแมส 4 ส (CMYK) หรอสพเศษกได มกพมพดวยระบบออฟเซท ระบบองคเจทหรอระบบดจตอล

พมพหนาเดยว ทงนสามารถพมพโปสเตอรเคลอบ UV เคลอบพลาสตกเงา หรอเคลอบพลาสตกดาน เคลอบ

Spot UV ปมนน (Embossing) ปมทองหรอฟลม/ฟอยลสตาง ๆ (Hot Stamping) กได

องคประกอบของภาพโปสเตอรโฆษณา

สงทจะอยในโปสเตอรนน ควรมองคประกอบดงตอไปน

1. รปภาพ(Picture) รปภาพมบทบาทและความส าคญของการสอความหมายมากทสด ดงนนจะตอง

ท าใหภาพท สะดดตา นาสนใจ สอความหมาย และสรางความประทบใจใหผพบเหน

2. พาดหว (Headline) การท าโฆษณาจะตองมพาดหวเสมอ เพราะพาดหวเปนสวนทเดนทสดใน

ประเภทของขอความโฆษณามไวเพอใหสะดดตาสะดดใจชวนใหตดตามอานเรองราวตอไป ลกษณะของพาดหวท

ดควรจะมขนาดตวอกษรโตหรอเดนเปนขอความทสน กะทดรด ชวนใหนาตดตามอานตอไป

3. พาดหวรอง (Sub Headline) คอ ขอความทมความส าคญรองลงมาจากพาดหว ในกรณทพาดหว

เปนประโยคยาวๆ อาจจะตดทอนตอนใดตอนหนงลงมาใหเปนพาดหวรองกได หากตองการขอความทเนนให

ผอานทราบประโยชนเพอการจงใจซอ กควรชใหเหนวาสนคานใหประโยชนคมคาอยางไร แตถาเปนสนคาทรจก

กนดโดยทวไปอาจจะไมจ าเปนตองเนนประโยชนกได เพอใหพนทโฆษณาดโปรงตาไมรกไปดวยขอความ ซงจะด

ดกวาโฆษณาทแนนไปทงภาพดวยเรองราวตางๆ เตมพนท

ถาสนคามคณสมบตพเศษ หรอมประโยชนเหนอกวาสนคาธรรมดาโดยทวไป การเขยนขอความโฆษณา

จงควรมรายละเอยดสวนนไวดวย เพอชวยสรางความสนใจเปนพเศษแกผอาน เชน เครองดดฝน นอกจากใชดด

ฝนแลวยงสามารถใชเปาลมไดอกดวย

ขนาดตวอกษรทใชนเนองจากพาดหวรองมความส าคญนอยกวาพาดหวจงตองมขนาด สสนของตวอกษร

รองลงมาจากพาดหว ทงนอาจเนนความแตกตางดานสสน หรอ ขนาดใหเดนกวาพาดหวรอง แตไมเดนเทาพาด

หว

5. ขอความพสจนกลาวอาง (Proof) อาจเปนขอความทอางบคคลเพอชวยยนยนความนาเชอถอของ

สนคา โดยอาจใชรปภาพและตวอกษรทนาเชอถอ

ขอควรค านงในการออกแบบโปสเตอรทใชในทโลงแจง

โปสเตอรสวนมากจะน าถกใชในสถานทโลงแจง ดงนนในกรณนจะมขอคด ดงน

1. องคประกอบสวนทเปนภาพ ควรเปนภาพจ าลองของจรง ซงเมอมองเหนแลวก สามารถเขาใจไดทนท

ไมควรเปนภาพประเภทแอบสแทรค (abstract) หรอภาพทแสดงระดบความเปนศลปะมากเกนไป เพราะเปนการ

เปดโอกาสใหผด แปลความหมายของภาพไปไดนานาประการ


2. ควรเปนภาพจ าลองของจรงซงมองเหนไดชดเจนในลกษณะขยายใหญเฉพาะในสวนทเปนหวใจของ

เรองทตองการเสนอ ผดจะรสกเหมอนไดเหนภาพหางไมมากทงทความจรงแลวอาจจะอยหางภาพเปนระยะ

ทางไกล

3. การออกแบบตวอกษรควรค านงถงการอานไดงายเปนส าคญ จงควรเปนขอความทไมยาวเกนไป

เขาใจงาย โดยเฉพาะโปสเตอรทตดขางถนนไมควรใชตวอกษรทสงเกนไปหรอผอมเกนไป ไมควรทบลวดลายของ

พนหลงเพราะจะอานยาก มองไมชดเจน ควรจดชองไฟระหวางตวหนงสอและระหวางบรรทดใหเหมาะสมกบ

ขนาดโปสเตอร

4. ตวอกษรตองมการลดหลนกนตามความเหมาะสมหรอความส าคญของขอความแตไมควรม

หลากหลายแบบ และหลายขนาดเกนไป เพราะจะท าใหดยงเหยง อานยาก

5. สตวอกษรควรแตกตางจากสพนหลง โดยตวอกษรเปนสเขมสวนพนหลงเปนสออน จะดกวาใช

ตวอกษรสออนบนพนสเขม สทดทสดส าหรบการท าโปสเตอรทตองมองเหนไดในระยะไกลคอตวอกษรสด าบนพน

สเหลอง

การออกแบบแผนพบ(Folder)

แผนพบ หมายถงกระดาษพมพขอมลลงไปและมการพบเพอใหเลกลงโดยทมกพบกนจะเปนใบปลวทพบ

ตงแต 2-5 ทบ ท าใหบรรจขอมลลงในแตละสวนได แตขนาดตวอกษรกเลกลงไป

แผนพบเปนเอกสารทมกใชในการโฆษณา ประชาสมพนธ สงขอมลใหสาธารณะ ไมวาจะเปนการให

ขอมลในเชงความร หรอทางการขายสนคา หรอเพอประโยชนอน ทเนนคาใชจายตอแผนไมสงมากนก ท าใหการ

ผลตแผนพบนนอาจจะใชวธการถายเอกสาร พมพดวย หรอ การพมพออฟเซทกไดขนอยกบความตองการและ

ปรมาณท

แผนพบมลกษณะเปนใบแลวทบทบไปมาไดมากกวาหนงครง เชน พบทบ

กนไปมาเทากนทกดาน พบไมเทากนทกดาน ในปจจบนมการออกแบบใหมลกเลน

มากมาย มการท าไดคตเปนรปใหดแปลกตา ไมวาจะเปน ไดคด พอพอพ ดง ฯลฯ


การจดเรยงขอมลในแตละพบ

ขอความในหนาปกตองกระชบสอถงสงทตองการให

รบทราบ และเราใจใหอาน รายละเอยดตอไป ในหนาอน ๆ

ใหผกเรองราวและภาพอยางตอเนอง หากเปนแผนพบหลาย

ทบใหดภาพหนาทตดกนกอนคลและหลงคลใหด าเนนอยาง

สอดคลองกน หนาสดทายหรอสวนสดทายมกจะเปนสถานท

ตดตอหรอจดทใหบรการ ทงน เนองจากแผนพบมวธการพบ

หลายแบบและไมมเลขหนาก ากบเหมอนกบหนงสอทจะบงคบ

ใหผอานอานไปทละหนา ดงนนผท าแผนพบจงตองออกแบบ

จดเรยงล าดบการเสนอขอความและรปภาพในการโฆษณาให

เหมาะสมกบลกษณะของการพบนน ๆ เพราะถาออกแบบไมดแลวจะท าใหผอานเกดความสบสนใจการอานได

งาย

ขนาดแผนพบ

ขนาดแผนพบทเปนทนยมกน นอกเหนอจาก A4 พบเปน 2 พบ 3 ตอน หรอ เปนแผนพบ A4 แลวพบครง

นน กจะม ขนาดดงน

1. ขนาดกางออกเปน A3 (29.7 x 42.0 cm) พบครงส าเรจเปน A4 ( 21.0x29.7 cm)

2. ขนาดกางออก 21.0 x 20 cm (ประมาณ 2 ใน 3 ของ A4) แลวพบครงเปน 21x10 cm

3. ขนาด A4 3 ตอนยาว ( 29.7x 63.0 cm) แลวพบเหลอเปนขนาด A4 ( 21.0x29.7 cm)

ชนดกระดาษทใชท าแผนพบ

1. กรณเนนประหยด

1.1 กระดาษปอนด 60 แกรม ในการพมพขาวด า


1.2 กระดาษปอนด 70 - 100 แกรม ในการพมพ 4ส 2ดาน

2. กรณตองการคณภาพ

2.1 กระดาษอารทมน 85 - 160 แกรม สามารถทจะท าการพมพออฟเซท 4ส 2ดาน ได

2.2 กระดาษอารทการด 190 แกรมขนไป กระดาษการดจะมความหนาท าใหไมสามารถพบ

โดยใชเครองพบไดเลยทนท จะตองท าการปมรอยพบกอน แลวจงจะสามารถพบตามรอยพบได

หรอใชกระดาษการดขาว กระดาษปก กระดาษนอก กระดาษแฟนซ กระดาษชนดอนๆ กได

การเพมมลคาใหแผนพบ

1. หากตองการเพมมลคาใหแผนพบกสามารถท าการการเคลอบยว หรอเคลอบมน จะท าให

แผนพบดมนวาวขน ซงนยมใชกนในหมการทองเทยว

2. การเคลอบ ลามเนท หรอ PVC ดาน จะท าใหแผนพบดเรยบ ดาน หรขน และดมความเหนยว

และความหนาเพมมากขน จากการมชนพลาสตก มาเคลอบไวอกชนบนกระดาษ เปนลกษณะงานทเปนทนยมกน

ในหมโรงแรม

3. การปมนน ปมทอง เหมาะทจะพมพ ส าหรบแผนพบทเนน หรหรา เปนลกษณะ อารทการด

เนองจากมราคาตอหนวยสง

4. การไดคท เปนรปทรงพเศษ ตามความตองการของลกคา

5. การพมพงานสพเศษ สท 5 สท6 ใชพมพเพมส ในกรณทมสทแมพมพส CMYK ไมสามารถ

พมพออกมาไดเชน สทอง สเงน

การสรางไฟลดวยโปรแกรม photoshop

1. การตงคาไฟลเอกสาร

1.1 สรางเอกสารใหม โดยก าหนดคาในชอง Width และ Height 1) จะตองบวกระยะตดตก 2) ไมใช

ระยะทเครองพมพเขาไมถง ดงน

ทตองบวกเพมขนาดตดตกเขาไป ตด

ตกคอพนทขอบชนงานสวนหนงส าหรบการ

เจยนหรอตดใหขาดโดยเครองตดกระดาษ

ปกตมกจะเวนพนทตดตกนไว 3 มลล เมตร

ทง 4 ดานของชนงาน เพราะโรงพมพจะใช

กระดาษใหญกวาขนาดชนงานของเราสก

เลกนอยแลวเรยงซอนกนเพอสงเขาเครองตด

จากนนเครองตดกจะตดตามขนาดทไดรบแจง

เชน 80x120 ซม.และมโอกาสทกระดาษจะเรยงไมตรงกน ซงจะท าให มขอบขาวกระดาษทเปนสขาว

เหลอมล าเขามาและมบางสวนถกตดแหวง


รปบน เสนทบนอกคอคอขนาด

กระดาษทโรงพมพใช เสนทบดาน

ในคอขนาดของไฟลงานทตองการ

เสนประใหญคอพนคอขนาดไฟล

งานทเผอระยะตดตก เสนประเลก

คอขนาดสวนพนทสพาคอ พนทท

ปลอดภยกรณทเครองพมพโรงงาน

ไมสามารถพมพไดทงแผน

สวน ภาพลางเปนการเปรยบเทยบ

ทมาของภาพ www.anut.smfnew.com

1.2 ก าหนด Resolution 300 ซงทมาคอการหาคา 2 เทาของคาความละเอยดของภาพขนอยกบวสด

หรอชนดกระดาษทจะพมพ ซงมหนวยวดเปน line per inch(LPI) เชนกระดาษอารททวไปมคา LPI เทากบ 150

ดงนนภาพทจะสงกควรเปน 150×2 คาเทากบ 300 dpi ทงนการสงภาพทมความละเอยดมากเกนไปกไมไดมผลด

ตอรายละเอยดของภาพเวลาพมพ

1.3 Color Mode เปน CMYK (หามใช RGB เพราะระบบส RGB เหมาะสมกบการแสดงบนจอ หาก

น าไปใชในงานพมพจะท าใหสภาพขนมว)

1.4 Background ควรเปน Transparent หรอ White กได

เชน ตองการโปสเตอรขนาด 80x120 เซนตเมตร ก

ก าหนดคาตางๆ ดงน


2. การเตรยมพนทท างานและไฟลขอมล

การสรางแนวเพอระยะตดตก หรอ แนวการวางองคประกอบตางๆ เราสามารถใชเสนไกด หรอ

เสนกรด ได ดงน

2.1 ก าหนดเสนไกดจากขอบกระดาษในระยะทเหมาะสม หรอ แสดงตารางกรดเพอจะใหเกดความ

สะดวกในการวางต าแหนง โดยการ

1) กรณเลอกเสนไกด ใหเรยกไมบรรทดขนมาแสดง เมน View > Ruler จะปรากฎแถบไม

บรรทดทงดานบนและขางซาย ดงรป

2) ปรบแตงหนวยการวดของไมบรรทดโดย double Click ทแถบไมบรรทดขางใดขางหนง จะ

ปรากฎหนาจอก าหนด Unit & Rulers ดงรป

ใหเลอกหนวยวดทชอง Rulers และ Type

3) เมอกลบมาสหนาจอท างานใหสรางเสนไกดบอกแนวขอบเขตของพนททใชไดโดยการคลกท

ไมบรรทด แลวลากเมาสมายงพนทท างาน กจะปรากฎเสนไกดขนมา ใหลากเสนไปยง

บรเวณขอบ ใหระยะเทากบระยะทตองกนออก

4) ลากเสนไกดใหครบทง สดาน ดงรป


5) หาก วางเสนไกดผดใหใชเครองมอ เลอกเสนไกดแลวท าการลากเปลยนต าแหนง

6) ท าการลอกเสนไกดไวเพอปองกนการเพลอเลอนต าแหนงโดยไมตงใจโดยการเลอกเมน View

> Lock Guide

2.2 หากตองการใชเสนตารางกรดแทนเสนไกด สามารถท าไดโดยdouble Click ทแถบไมบรรทดขาง

ใดขาง แลวไปทตวเลอก Guides, Grid, Slices&Count

ใหปรบตวเลอกในชอง Grid โดยสามารถเลอกไดวาจะต

เสนกรดหลกทระยะเทาใด ซงจากภาพตวอยางก าหนดไวททก 10

เซนตเมตร โดยใหสรางเสนกรดยอยจ านวน 5 เสน ทงนสามารถ

ก าหนดสเสนกรด และรปแบบเสนได จะปรากฎตารางเสนกรด

ดงภาพ (หากไมปรากฎใหเลอกท View > show > Grid)

3. ระหวางลงมอสรางโปสเตอร

3.1 ไฟลรปภาพตางๆ ทน ามาใชจะตองมความละเอยด 3 ลานพกเซลขนไป เพราะไฟลขนาดเลกกวา

นจะท าใหผลงานทไมคมชดได ทงนหากน าภาพมาจากแหลงอนใหทดลองโดยการวางภาพบนพนงานตามขนาดท

ตองการแลวท าการ zoom ท 100% หากภาพไมแตกกถอวาใชการได

http://www.wacharinprint.com/home/wp-content/uploads/2011/03/NewDoc_photoshop_02.jpg


ภาพตวอยานเปรยบเทยบใหใหความแตกตางระหวางขนาดของภาพจรง(ภาพเลก) และขนาดทตองการบนชนงาน

(ภาพใหญ)

3.2 ควรแยกสวนประกอบตางๆ ออกคนละ layer เพอใหงายตอการตกแตงและเปลยนต าแหนง

3.3 เมอมจ านวน layer มากขนกควรท า Group Layer เพอจะไดเกดความสะดวกมากยงขน

3.4 การใช Font พเศษ ใหแปลงให Text Layer ใหกลายเปนภาพกราฟฟคกอน (Click ขวาท Text

Layer นน ๆ แลวเลอก Rasterize Type) แตการ Rasterize จะท าใหไมสามารถแกไขขอความตอไปได จงควรลง

มอท าเปนขนตอนสดทาย

4. การบนทกไฟลเพอสงโรงพมพ สามารถบนทกไฟลไดหลากหลายวธ ทงนใหเหมาะสมกบโรง

พมพ

4.1 หากโรงพมพมโปรแกรม photoshop ในรนเดยวกนหรอสงกวากสามารถบนทกเปน PSD และตอง

คดลอกไฟลภาพประกอบ และไฟลอกษร ไปดวย


4.2 สงในรปแบบ TIFF

4.3 สงในรปแบบ PDF/X4 เพราะ PDF ไฟลสามารถน าไปขยายใหญไดถง 300 เทาโดยความคมชด

ไมเสยหาย)

4.4 หากไฟลมขนาดใหญเชนขนาดเกน 1 GB ควรบนทกไฟลงานเปน Large Document Format(.psb)

เพราะเปนประเภทไฟลทคงคณสมบตของ Smart Object

4.5 น าไฟลทไดจากขอ 4.1 – 4.4 มาพมพตรวจสอบดวยเครองพมพองคเจตเพอตรวจสอบครง

สดทายกอนสงโรงพมพ


ใบงานท 6.1 การผลตสอและสงพมพ

1. ใหนกเรยนรวมกลมตามจ านวนทเหมาะสมเพอคนควา

1.1 กระบวนการ เครองมอ วสดอปกรณทใชในการผลตปายโฆษณาขนาดใหญทเหนตามขางถนน

1.2 กระบวนการ เครองมอ วสดอปกรณทใชในการผลตการดเชญตางๆ

2. ใหนกเรยนรวมกลมตามจ านวนทเหมาะสมเพอคนควาวาหากตองเปดกจการโรงพมพในทองถนท

นกเรยนอาศยอยนน นกเรยนจะตองจดซอเครองมออะไรบางเขาราน แลวเครองมอนนมคณสมบต

อยางไร

(ทงสองกจกรรมนมงเนนเพอใหผเรยนพยายามน าความรจากใบความรซงถอวาเปนความรทไกลตว พนวก

เขากบชวตประจ าวนใหไดมากทสด และ เพอเปนการเรมตนใหนกเรยนไดรบรถงการลงทนท าธรกจดานนให

เหมาะสมกบ)


ใบงานท 6.2 การออกแบบสงพมพ

1. ใหนสตออกแบบหนาปกหนงสอขนาด A5 โดยใหก าหนดระยะตดตก

2. ใหนสตรวมกลมเพอออกโปสเตอรเพอประชาสมพนธสนคา OTOP แลวน าเสนอผลงานหนาชนเรยน




หนวยท 6 การผลตสอสงพมพ


1. เราสามารถออกแบบสงพมพบนสอประเภทใดไดบาง

ก. กระดาษ

ข. ไวนล

ค. ผา


2. ปจจบนโรงพมพสามารถพมพสงพมพบนสอประเภทใดได

ก. กระดาษ

ข. ไวนล

ค. ผา

ง. ไมอด

3. ระยะตดตกคออะไร

ก. ความกวางบนกระดาษทจะตองถกตดทง

ข. ความกวางของใบมด

ค. ระยะหางระหวางใบมดกบกระดาษ

ง. ระยะขอบทจะตองเผอไวส าหรบใหใบมดตด

4. เราตองเวนระยะตดตกไวระยะเทาใด

ก. 2 มลลเมตร

ข. 3 มลลเมตร

ค. 2 เซนตเมตร

ง. 2 เซนตเมตร


5. เราใชวธการใดในการเผอระยะตกตก

ก. สรางขนาดของไฟลนอยกวาขนาดจรงเทากบระยะตดตก

ข. สรางขนาดของไฟลเกนกวาขนาดจรงเทากบระยะตดตก

ค. สรางขนาดของไฟลเทากบขนาดจรง

ง. สรางขนาดของไฟลเกนขนาดจรงใหมากๆ หนอยเผอพลาด

6. ขนาดกระดาษ “หนายก” เมอเทยบกบ A4 แลวเปนอยางไร

ก. หนายกจะนอยกวา A4

ข. หนายกจะมากกวา A4

ค. หนายกเปนหนวยวดทโรงพมพหนงสอพมพนยมใช


7. หากขนาดของสงพมพใหญมากๆ เราควรจะท าอยางไร

ก. ใชเครองคอมพวเตอรทมประสทธภาพสงๆ แลวสรางไฟลใหมขนาดเทาของจรง

ข. ใชเครองคอมพวเตอรตามทม แลวสรางไฟลใหใหญพอประมาณแตตองมสดสวนเทาของจรง

ค. ตงขนาดไฟลเทากบ A0 เพราะถอวาเปนมาตรฐานสากล

ง. ตงขนาดไฟลเทากบ A4 เพราะขยายภาพไดงายกวา

8. เพราะเหตใดเราจงไมก าหนดความกวางเปนหนวย pixel

ก. ทจรงจะใชหนวยวดใดกไดขนอยกบความพอใจ

ข. เพราะไมสมพนธกบหนวยวดขนาดของชนงาน

ค. เพราะใหสมพนธกบหนวยวดของเครองพมพทใชพมพ

ง. ขอ ข และ ค ถก

9. ภาพทใชควรมคณสมบตอยางไร

ก. เหนรายละเอยดชดเจน

ข. มความละเอยด 3 ลานพกเซลขนไป

ค. เปนภาพส



10. นกออกแบบควรตดตอโรงพมพกอนปฏบตงานเพราะเหตใด

ก. ตกลงคาโสหยทจะไดรบเมอเลอกโรงพมพนนๆ

ข. ตรวจสอบราคา คาใชจายในการพมพงาน

ค. ท าความเขาใจในคณลกษณะของไฟลทจะไมสรางปญหาใหโรงพมพ

ง. สอบถามประเภทของกระดาษทโรงพมพมอย

11. เหตใดไฟลตนฉบบตองตงโหมดสเปน CMYK

ก. เพราะเปนมาตรฐานสของเครองพมพ

ข. เพราะโรงพมพใชแยกเพลตส

ค. เพราะเปนมาตรฐานของจอคอมพวเตอรทโรงพมพใช


12. เราใชเครองมอใดในการก าหนดต าแหนงวดถบนไฟล

ก. Pen tool

ข. Ruler

ค. Grid

ง. Path Tool

เฉลย

ขอ 1 2 3 4 5 6 7 8 9 10

ตอบ ง ก,ข ง ข ข ค ข ข ข ค

ขอ 11 12

ตอบ ก,ข ข,ค

คอมพิวเตอร์กราฟิกประยุกต์

Education

Transcript of คอมพิวเตอร์กราฟิกประยุกต์