35

Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ
Page 2: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

ค าน า

การจดกจกรรมการเรยนรใหกบนกเรยน จ า เปนอยางยงทครจะตองจดกจกรรมใหนกเรยนไดเกดทกษะและกระบวนการเรยนร ดงนนครจงตองคดคนและสรางนวตกรรมใหม ๆ มาประกอบการสอน เปนการเพมประสทธภาพการเรยนรของนกเรยน ชดกจกรรมการฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 ส าหรบนกเรยนชนประถมศกษาปท 6 วชาคอมพวเตอร กลมสาระการเรยนรการงานอาชพและเทคโนโลย จดท าขนเพอใชควบคกบแผนการจดการเรยนร เรองการใชคอมพวเตอรชวยสรางชนงานจากจนตนาการ มจ านวน 6 ชดกจกรรม ดงน

ชดกจกรรมท 1 เทคนคการสรางภาพกราฟก ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร ชดกจกรรมท 3 เทคนคการสรางกรอบรป ชดกจกรรมท 4 เทคนคการรทชรปภาพ ชดกจกรรมท 5 เทคนคการตดตอภาพ ชดกจกรรมท 6 เทคนคการปรบแสง แตงส

ชดกจกรรมการฝกทกษะเพอสรางสรรคผลงานจากโปรแกรม Adobe Photoshop CS6 ส าหรบนกเรยนชนประถมศกษาปท 6 วชาคอมพวเตอร กลมสาระ การเรยนรการงานอาชพและเทคโนโลย ชดกจกรรมท 2 เทคนคการออกแบบตวอกษรเลมน ประกอบดวย จดประสงคการเรยนร แบบทดสอบกอนเรยน ใบความร แบบฝกปฏบต และแบบทดสอบหลงเรยน ชวยใหนกเรยนเขาใจเนอหาไดงายและชดเจน ซงจะน าไปส การพฒนาผลสมฤทธทางการเรยนทสงขน ตลอดจนสามารถน าความร และประสบการณทไดรบไปประยกตใชกบการใชโปรแกรมอน ๆ ไดเปนอยางด

ผจดท าหวงเปนอยางยงวา ชดกจกรรมการฝกทกษะเพอสรางสรรคผลงาน ดวยโปรแกรม Adobe Photoshop CS6 ส าหรบนกเรยนชนประถมศกษาปท 6 วชาคอมพวเตอร กลมสาระการเรยนรการงานอาชพและเทคโนโลยน จะชวยพฒนาการเรยนการสอนวชาคอมพวเตอรใหกบนกเรยนไดเปนอยางดและสรางสรรค ตลอดจนผทสนใจ จะไดรบประโยชนจากชดกจกรรมน าไปประยกตสรางชนงานตอไป

ประสทธ ร าพรรณ

Page 3: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

สารบญ

เนอหา หนา ค าน า ก สารบญ ข ค าชแจงส าหรบนกเรยน 1 มาตรฐานการเรยนร / ตวชวด 2 จดประสงคการเรยนร 2 แบบทดสอบกอนเรยน 3 ใบความรท 1 การสรางตวอกษรแบบรศม 6 แบบฝกปฏบตท 1 การสรางตวอกษรแบบรศม 8 ใบความรท 2 การสรางตวอกษรน าแขง 9 แบบฝกปฏบตท 2 การสรางตวอกษรน าแขง 11 ใบความรท 3 การสรางตวอกษรตามเสน Path 12 แบบฝกปฏบตท 3 การสรางตวอกษรตามเสน Path 14 ใบความรท 4 การสรางตวอกษรวงกลม 15 แบบฝกปฏบตท 4 การสรางตวอกษรวงกลม 17 ใบความรท 5 การสรางตวอกษรแบบการตน 18 แบบฝกปฏบตท 5 การสรางตวอกษรแบบการตน 20 แบบทดสอบหลงเรยน 21 ภาคผนวก 24 กระดาษค าตอบ ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร 25 แบบบนทกคะแนน 25 เกณฑการประเมนแบบฝกปฏบต 26 เฉลยแบบทดสอบกอนเรยน 27 เฉลยแบบทดสอบหลงเรยน 28 บนทกชวยจ า 29 บรรณานกรม 30

Page 4: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

1

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

ค าชแจงส าหรบนกเรยน

การเรยนโดยใช ชดกจกรรมการฝกทกษะเพอสรางสรรคผลงานจากโปรแกรม Adobe Photoshop CS6 ส าหรบนกเรยนชนประถมศกษาปท 6 วชาคอมพวเตอร กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร ใหนกเรยนฝกปฏบตตามขนตอนดวยความมงมนและตงใจ ดงน

1. อานค าชแจงการใชชดกจกรรมใหเขาใจกอนลงมอศกษาและปฏบตกจกรรม 2. ท าแบบทดสอบกอนเรยนเพอทดสอบความรพนฐาน ตรวจค าตอบและ

บนทกผลคะแนนทได 3. ศกษาใบความรและปฏบตตามขนตอนทไดก าหนดไว 4. เมอปฏบตการฝกเทคนคตามขนตอนทไดก าหนดไวแลว ลงมอฝกทกษะ

ตามแบบฝกทกษะใหครบทกแบบฝกและสงคร เพอบนทกคะแนนทกแบบฝก 5. ท าแบบทดสอบหลงเรยน ตรวจค าตอบและบนทกผลคะแนนเพอวด

ความกาวหนาทางการเรยน 6. ประเมนผลการเรยนร

ขอควรปฏบต

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

งานผอนมาเปนของตนเอง และไมเปดเฉลยแบบทดสอบกอน จนกวานกเรยนจะท าแบบทดสอบเสรจ

Page 5: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

2

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

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

ตวชวด ป.6/2 ใชคอมพวเตอรในการคนหาขอมล ตวชวด ป.6/5 ใชคอมพวเตอรชวยสรางชนงานจากจนตนาการ หรองานทท าใน

ชวตประจ าวนอยางมจตส านก และความรบผดชอบ

1. นกเรยนมความรความเขาใจในการใชโปรแกรม Adobe Photoshop CS6 2. นกเรยนสามารถออกแบบตวอกษร ดวยโปรแกรม Abode Photoshop CS6 ได 3. นกเรยนสามารถใชเครองมอในโปรแกรม Adobe Photoshop CS6 ในการสราง

ชนงานได

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

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

เรามาเรม สรางตวอกษรกนเลย

นะครบ

Page 6: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

3

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

แบบทดสอบกอนเรยน

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร ค าชแจง ใหนกเรยนเลอกค าตอบทถกตองทสดเพยงขอเดยว (คะแนนเตม 10 คะแนน)

1. เครองมอน คอเครองมออะไร ก. Stroke (เครองมอเพมขอบของวตถ) ข. Type tool (เครองมอพมพขอความ) ค. Transform (เครองมอปรบเพมลดขนาด) ง. Selection (เครองมอเลอกสวนทตองการ)

2. เครองมอ เปนเครองมอใชท าอะไร ก. สรางเสน Path ข. วาดภาพใหวตถ ค. สรางลายเซนใหกบภาพ ง. ก าหนดเสนใหมความโคงมน

3. เครองมอ hand Tool มหนาทอะไร ก. เปนเครองมอในการเคลอนยายวตถ ข. เปนการเลอกพนทองกบคาสของรปเปนส าคญ ค. เปนการเลอกแบบสรางขอบเปนเสนตรงหลายเหลยม ง. เปนเครองมอเคลอนยายทงภาพตามทเราตองการเฉพาะจด

4. การบนทกแฟมรปภาพ ใน Photoshop CS6 เพอใชเปนตนฉบบทน ามาแกไขได ตองใชนามสกล รปแบบใด ก. .gif ข. .jpg ค. .psd ง. .bmp

Page 7: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

4

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

5. Filter Wind ปรบใหภาพมลกษณะอยางไร ก. ลมพด ข. มวนเปนวงกลม ค. ท าใหภาพเบลอ ง. ท าใหตวอกษรมขอบทหนาขน

6. เครองมอใน Adobe Photoshop CS6 ขอใดเปนเครองมอยอขยายภาพ ก. Lasso Tool ข. Move Tool ค. Zoom Tool ง. Hand Tool

7. โปรแกรม Adobe Photoshop CS6 ไมสามารถท างานใดตอไปน ก. พมพรปภาพ ข. ค านวณตวเลข ค. ตกแตงภาพกราฟก ง. พมพตวอกษรลงในภาพ

8. Layer แรกทจะเกดขนอตโนมตในการสรางชนงานชอวาอะไร ก. First Layer ข. New Layer ค. Open Layer ง. Background

9. การพมพขอความลงบน Layer ในโปรแกรม Adobe Photoshop CS6 ท าอยางไร ก. คลกบน Layer แลวพมพขอความ ข. กดปมเครองมอ Select แลวพมพขอความ ค. กดปมเครองมอ Brush tools แลวพมพขอความ ง. กดปมเครองมอ Horizontal type tool (T) แลวพมพขอความ

Page 8: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

5

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

10. เครองมอ มหนาทอะไร ก. เปนเครองมอทใชส าหรบการลบ ข. เปนการเลอกเฉพาะสทตองการในภาพ ค. เปนการเทสลงในรปภาพหรอพนททเลอก ง. เปนการไลโทนสจากสหนงไปเปนอกสหนง

Page 9: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

6

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

ใบความรท 1

การสรางตวอกษรแบบรศม

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

1. สรางไฟลภาพใหม ขนาดตามตองการลงสพนเปนสด า

2. คลกเลอกเครองมอ Type tool เพอพมพขอความ KHAOWANG SCHOOL (ตวอกษรสขาว) (พรอมกบปรบขอความเปนภาพโดยคลกขวาทเลเยอรและเลอกค าสง Rasterize Type)

3. คดลอกเลเยอรขอความ อก 1 เลเยอร โดยกด <Ctrl+J> จะไดเลเยอรขอความเพมเปนสองเลเยอร

4. คลกเลอกเลเยอรท 2 เพอท า Merge Down เลเยอรขอความกบเลเยอร background เขาดวยกน

1

2

3

4

Page 10: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

7

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

5

6

7

9 8

5. คลกเมนFilter>Distort>Polar -Coordinates และคลกเลอก Polar to Rectangular จะไดดงภาพ

6. คลกเมน Image>Image Rotation> 90๐CW เพอหมนภาพตามเขมนาฬกา

7. คลกเมน Filter>Stylize>Wind เลอก Wind, From the Right (ท าซ า 2 - 3 ครง)

8. คลกเมน Image>Image Rotation> 90๐CCW เพอหมนภาพตามเขมนาฬกา

9. คลกเมน Filter>Distort>Polar Coordinates… เลอก Rectangular to Polar จะไดแสงรศมดงภาพ

Page 11: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

8

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

แบบฝกปฏบตท 1

การสรางตวอกษรแบบรศม

ค า ช แจ ง : ใ ห น ก เ ร ยน ใ ช เ ค ร อ ง ม อ Horizontal Type Tool และ Filter Polar Coordinates ใน โปรแกรม Adobe Photoshop CS6 สร า งต วอ กษร แบบรศม ตามใบความรท 1 ใชขอความและสตามจนตนาการของนกเรยน

นกเรยนสามารถปรบล าแสงไดตามความเหมาะสมและจนตนาการของนกเรยน (แนะน าเพม Filter>Stylize> Wind ซ า 2 - 3 ครง)

Page 12: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

9

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

1

2

ใบความรท 2

การสรางตวอกษรน าแขง

การสรางตวอกษรน าแขง บางครงตวอกษรธรรมดา ๆ อาจไมดงดด จงตองม การสรางตวอกษรแบบตาง ๆ ใหเขากบงาน กจกรรม และดนาสนใจ มาดขนตอนการสรางกนเลยครบ

1. สรางไฟลภาพใหมทตองการขนมา จากนนลงสด าลงไป

2. คลกปม เพอพมพขอความ ICE ใหสตวอกษรเปนสขาว

3. คลกขวาทเลเยอร background เลอกค าสง Flatten Image เพอรวมเลเยอร

Page 13: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

10

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

4

6

5

4. คลกเครองมอ Magic Wand Tool เลอกสวนทเปนสด า จากนนคลกเมน Filter>Pixelate>Crystallize ปรบคา Cell = 10

5. ยกเลก Selection โดยกดปม (Ctrl+D)

6. คลกเมน Image>Image Rotation> 90๐CW เพอหมนภาพ

7. จากนนคลกเมน Filter>Stylize>Wind ตงคา

Method = Wind

Direction = From the Right 8. คลกเมน Image>Image Rotation>

90๐CCW กจะไดภาพตวอกษรน าแขง

7

8

Page 14: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

11

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

แบบฝกปฏบตท 2

การสรางตวอกษรน าแขง

ค าชแจง : ใหนกเรยนใชเครองมอ Type Tool และ Filter Wind ในโปรแกรม Adobe Photoshop CS6 สรางตวอกษรน าแขง ตามใบความรท 2 โดยใหฝกปฏบตตามความคดสรางสรรคของนกเรยน

Page 15: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

12

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

1

2

ใบความรท 3

การสรางตวอกษรตามเสน Path

การสรางตวอกษรตามเสน Path สามารถน าเทคนคนไปประยกตใชไดหลายรปแบบ หลายงาน ไมวาจะเปนงานปกหนงสอ ปายไวนล ฯลฯ วธการท า มขนตอนดงตอไปน

1. สรางไฟลภาพใหมตามขนาด ทตองการ

2. สรางเสน Path ดวยเครองมอ

(Pen Tool) ตามภาพ

Page 16: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

13

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

3

4

3. คลกปม (Type Tool) แลวเลอนน าเมาสมาบรเวณ เสน Path คลกเมาสทเสน Path จากนนพมพตวอกษรตามภาพ (จะมเลเยอรเพมขนมา)

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

ไมยากใชไหมครบ…!!!

Page 17: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

14

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

แบบฝกปฏบตท 3

การสรางตวอกษรตามเสน Path

ค าชแจง : ใหนกเรยนใชเครองมอ Pen Tool และ Type Tool ในโปรแกรม Adobe Photoshop CS6 สรางตวอกษรตามเสน Path ตามใบความรท 3 โดยฝกปฏบตตามความคดสรางสรรคของนกเรยน

ไมมอะไรเกน

ความสามารถ

ใชไหมครบ

Page 18: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

15

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

ใบความรท 4

การสรางตวอกษรวงกลม

การสรางตวอกษรวงกลม เพอน าไปใชในงานตาง ๆ เชน โลโก นามบตร ออกแบบตราสญลกษณตาง ๆ หรอน าไปประยกตใชในงานเวบไซต ตามความเหมาะสม เรามาดขนตอนการสรางกนเลยนะครบ

1. สรางไฟลภาพใหมและก าหนดดงน

Width = 500 Pixels

Height = 500 Pixels

Resolution = 300 2. คลกเลอกเครองมอ Custom

shape เลอก Ellipse Tool เพอสรางเสน Path แบบวงกลม

3. แดรกเมาสสรางรปรางวงกลมขนาดทตองการ (Shift+แดรกเมาส)

4. คลกปม และคลกทบรเวณเสน Path วงกลมทสรางไวเพอพมพขอความ จะไดตวอกษรโคงตามเสน

1

2

3

4

Page 19: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

16

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

8

5. ท าการคดลอกเลเยอรขอความ โดยคลกขวาทเลเยอรขอความ แลวเลอกค าสง Duplicate Layer

6. ขยายเสน Path วงกลม ใหมขนาดใหญกวาตวอกษรชดแรกดงภาพ โดยใชค าสง Ctrl+T

7. ใชค าสง Ctrl+T เพอหมนภาพ ใหตวอกษรโคงกลบลงมาดานลาง

8. ใหใชค าสงจากเมน Edit> Transform Path>Flip Horizontal เพอกลบขอความ ใหอยดานในเสน Path วงกลม แลวแกไขขอความตามทเราตองการ

โดยใชเครองมอ (Type Tool)จะไดตวอกษรโคงดงภาพ

5

6

7

Page 20: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

17

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

แบบฝกปฏบตท 4

การสรางตวอกษรวงกลม

ค าชแจง : ใหนกเรยนใชเครองมอ Custom shape และ type tool ในโปรแกรม Adobe Photoshop CS6 สรางตวอกษรวงกลม ตามใบความรท 4 โดยฝกปฏบต ตามจนตนาการของนกเรยนใหสวยงาม

ลองพยายามฝกนะครบ....เพอเพมทกษะ

และความคดสรางสรรคชนงานด ๆ ตอไป

Page 21: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

18

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

2

ใบความรท 5

การสรางตวอกษรแบบการตน

การสรางตวอกษรแบบการตน ในบางครงชวยผอนคลาย ใหอารมณความรสก เยนลง มความหวานในตว ตามไปดขนตอนการสรางกน

1. ก าหนดไฟลภาพใหม ดงน

Width = 500 Pixels

Height = 300 Pixels

Resolution = 150

2. คลกเครองมอ (Type Tool) พมพขอความและใสสตามทตองการ

3. คลกเมาสปมขวาทเลเยอรขอความ เลอกค าสง Rasterize type เพอปรบขอความใหเปนรปภาพ

4. ใชเครองมอ (Polygonal Lasso Tool) สราง Selection แตละตวอกษร และหมนตวอกษร โดยใชค าสง Ctrl+T ตามตองการใหดสวยงามตามสไตลการตน

1

3

4

Page 22: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

19

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

8

5. ท าการแดรกเมาสเลเยอรขอความมาปลอยบนปม (Create a new Layer) กจะไดเลเยอรขอความใหมขนมาอกหนงเลเยอร

6. เลเยอรขอความบนสดท าการสรางขอบขอความ โดยคลกขวาทเลเยอรและเลอก Blending Option และเลอกไปท Stroke เลอกไปท Size = 4 เตมสขอบเปนสชมพ

7. เลเยอรทสอง สรางขอบขอความ โดยคลกขวาทเลเยอรเลอก Blending Option และเลอกไปท Stroke เลอกขนาด Size = 10 เตมสขอบเปนสเหลอง พรอมกบใสเงาใหกบขอความน โดยเลอก Drop Shadow เพม และ ขนาดขอ Drop Shadow (Size = 20)

8. ไดผลลพธดงภาพ

5

7

6

Page 23: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

20

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

แบบฝกปฏบตท 5

การสรางตวอกษรแบบการตน

ค าชแจง : ใหนกเรยนใชเครองมอ Type Tool และ Polygonal Lasso Tool ในโปรแกรม Adobe Photoshop CS6 สรางตวอกษรแบบการตน ตามใบความรท 5 โดยใหฝกปฏบตตามความคดสรางสรรคของนกเรยน ใหสวยสะดดตา

ความจรงจงตงใจคอกญแจไข

สความส าเรจนะครบนกเรยน

Page 24: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

21

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

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

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร ค าชแจง ใหนกเรยนเลอกค าตอบทถกตองทสดเพยงขอเดยว (คะแนนเตม 10 คะแนน)

1. เครองมอ hand Tool มหนาทอะไร ก. เปนเครองมอในการเคลอนยายวตถ ข. เปนการเลอกพนทองกบคาสของรปเปนส าคญ ค. เปนการเลอกแบบสรางขอบเปนเสนตรงหลายเหลยม ง. เปนเครองมอเคลอนยายทงภาพตามทเราตองการเฉพาะจด

2. เครองมอน คอเครองมออะไร ก. Stroke (เครองมอเพมขอบของวตถ) ข. Type tool (เครองมอพมพขอความ) ค. Transform (เครองมอปรบเพมลดขนาด) ก. Selection (เครองมอเลอกสวนทตองการ)

3. เครองมอ เปนเครองมอใชท าอะไร ก. สรางเสน Path ข. วาดภาพใหวตถ ค. สรางลายเซนใหกบภาพ ง. ก าหนดเสนใหมความโคงมน

4. เครองมอใน Adobe Photoshop CS6 ขอใดเปนเครองมอยอขยายภาพ ก. Lasso Tool ข. Move Tool ค. Zoom Tool ง. Hand Tool

Page 25: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

22

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

5. การบนทกแฟมรปภาพ ใน Photoshop CS6 เพอใชเปนตนฉบบทน ามาแกไขได

ตองใชนามสกล รปแบบใด ก. .gif ข. .jpg ค. .psd ง. .bmp

6. Filter Wind ปรบใหภาพมลกษณะอยางไร ก. ลมพด ข. มวนเปนวงกลม ค. ท าใหภาพเบลอ ง. ท าใหตวอกษรมขอบทหนาขน

7. เครองมอ มหนาทอะไร ก. เปนเครองมอทใชส าหรบการลบ ข. เปนการเลอกเฉพาะสทตองการในภาพ ค. เปนการเทสลงในรปภาพหรอพนททเลอก ง. เปนการไลโทนสจากสหนงไปเปนอกสหนง

8. โปรแกรม Adobe Photoshop CS6 ไมสามารถท างานใดตอไปน ก. พมพรปภาพ ข. ค านวณตวเลข ค. ตกแตงภาพกราฟก ง. พมพตวอกษรลงในภาพ

9. Layer แรกทจะเกดขนอตโนมตในการสรางชนงานชอวาอะไร ก. First Layer ข. New Layer ค. Open Layer ง. Background

Page 26: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

23

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

10. การพมพขอความลงบน Layer ในโปรแกรม Adobe Photoshop CS6 ท าอยางไร

ก. คลกบน Layer แลวพมพขอความ ข. กดปมเครองมอ Select แลวพมพขอความ ค. กดปมเครองมอ Brush tools แลวพมพขอความ ง. กดปมเครองมอ Horizontal type tool (T) แลวพมพขอความ

Page 27: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

24

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

ภาคผนวก

Page 28: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

25

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

กระดาษค าตอบ ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

ชอ – สกล........................................................ชน.................เลขท................

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

ขอ ก ข ค ง ขอ ก ข ค ง

1. 1.

2. 2.

3. 3.

4. 4.

5. 5.

6. 6.

7. 7.

8. 8.

9. 9.

10. 10.

แบบบนทกคะแนน

ประเมนผล แบบฝกปฏบต คะแนน

รวม

ผลทดสอบกอนเรยน

ผลทดสอบหลงเรยน ผลการ

พฒนา 1 2 3 4 5

คะแนนเตม 10 10 10 10 10 50 10 10

คะแนนทได

Page 29: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

26

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

เกณฑการประเมนแบบฝกปฏบต ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

หวขอการประเมน ระดบคณภาพ น าหนก

คะแนน 3 2 1

1. สอดคลองกบจดประสงค

ผลงานสอดคลองและสมพนธกบทกจดประสงค

ผลงานสอดคลองและสมพนธบางจดประสงค

ผลงานไมสอดคลองกบจดประสงค 3

2. ใชเทคนคของ โปรแกรม Adobe Photoshop CS6

ใชเทคนคของโปรแกรมตามขนตอนไดครบถวน

ใชเทคนคของโปรแกรมขาดไป 1 ขนตอน

ใชเทคนคของโปรแกรมขาดมากกวา 1 ขนตอน

3

3. มความสวยงาม สสนสวยงาม เดนสะดดตา องคประกอบครบสมบรณ

สสนสวยงาม องคประกอบครบ

สสนธรรมดา

2

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

ผลงานนาสนใจแนวคดแปลกใหม ทนสมย

ผลงานมความนาสนใจ แตยงไมแปลกใหม

ผลงานไมแปลกใหม 2

เกณฑการตดสน/ระดบคณภาพ 30 คะแนน เฉลย 10 คะแนน คะแนน 8 - 10 คะแนน หมายถง ดเยยม คะแนน 4 - 7 คะแนน หมายถง ด คะแนน 1 - 3 คะแนน หมายถง ปรบปรง ผานเกณฑ 80% คะแนนรวมตองได 24 คะแนน ขนไป คะแนนงานแตละชนตองได 8 คะแนน ขนไป คะแนนรวมแบบฝกปฏบต 50 คะแนน ตองไดคะแนน 40 คะแนน ขนไป

Page 30: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

27

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

เฉลยแบบทดสอบกอนเรยน

ขอ เฉลย

1 ข

2 ก

3 ง

4 ค

5 ก

6 ค

7 ข

8 ง

9 ง

10 ข

Page 31: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

28

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

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

ขอ เฉลย

1 ง

2 ข

3 ก

4 ค

5 ค

6 ก

7 ข

8 ข

9 ง

10 ง

Page 32: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

29

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

บนทกชวยจ า

Page 33: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

30

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

บรรณานกรม

เกยรตพงษ บญจตร. คมอ Photoshop CS4 Professional Guide ฉบบสมบรณ. นนทบร : ไอดซ อนโฟ ดสทรบวเตอร เซนเตอร จ ากด. 2552.

เกยรตพงษ บญจตร. คมอPHOTOSHOP CS6 Professional Guide ฉบบสมบรณ. นนทบร : บรษท ไอดซพรเมยร จ ากด. 2555.

เกยรตพงษ บญจตร. Photoshop CC Professional Guide. กรงเทพมหานคร : บรษท ไอดซพรเมยร จ ากด. 2557.

จนตวร คลายสงข. E-Learning Courseware อเลรนนงคอรสแวรแนวคดสการปฏบต - ส าหรบการเรยนการสอนอเลรนนงในทกระดบ. กรงเทพมหานคร : จฬาลงกรณ มหาวทยาลย. 2556.

ดวงพร เกยงค า. Insight Photoshop CS5 ฉบบสมบรณ. กรงเทพมหานคร : โปรวชน. 2549.

ทศยาภรณ เกอนน. คมอ Adobe Photoshop CS6. กรงเทพมหานคร : โปรวชน. 2555. ธนชสร จตตเนอง. แตงภาพดจตอลสวยทนใจดวย Photoshop CS4. กรงเทพมหานคร :

เสรมวทย อนฟอรเมชน เทคโนโลย จ ากด. 2552. ปยะ นากสงค. ตกแตงภาพกราฟก Photoshop CS6+CC ฉบบสมบรณ. นนทบร :

รไววา. 2559. อนน วาโซะ. มอใหหดแตงภาพ Photoshop CS6. นนทบร : ไอดซฯ. 2555. อนน วาโซะ. Photoshop CC basic Retouch ฉบบมอใหมหดแตงภาพ. นนทบร :

ไอดซฯ. 2559. การใชงานของ Adobe Photoshop. (ออนไลน). https://noteswband.wordpress.

com. (สบคนเมอ 12 พฤศจกายน 2559) การไดคท. (ออนไลน). https://photohackz.com. (สบคนเมอวนท 21 มกราคม 2560) การปรบแสง. (ออนไลน). http://www.howto108.com. (สบคนเมอวนท 21 มกราคม

2560)

Page 34: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ

31

ชดกจกรรมท 2 เทคนคการออกแบบตวอกษร

การฝกทกษะเพอสรางสรรคผลงานดวยโปรแกรม Adobe Photoshop CS6 http://www.prasitramphan.wordpress.com

การเลอกพนท. (ออนไลน). https://noteswband.wordpress.com. (สบคนเมอ 27 มกราคม 2560)

การสรางกรอบรป. (ออนไลน). http://www.photoshotrich.com. (สบคนเมอ 20 มกราคม 2560)

การสรางตวอกษร. (ออนไลน). http://202.29.239.50/temp/learnphotoshop. (สบคนเมอ 29 มกราคม 2560)

ความเปนมาของ Adobe Photoshop. (ออนไลน). http://wanwisa1211.blogspot. com. (สบคนเมอ 15 พฤศจกายน 2559)

ความรเบองตนเกยวกบ Adobe Photoshop CS3. (ออนไลน).http://www. Edu- mine.com/photoshop/. (สบคนเมอ 12 พฤศจกายน 2559)

ความรพนฐานเกยวกบโปรแกรม Photoshop CS6. (ออนไลน).http://teacherjaray. blogspot.com/2014/05/blog-post.html. (สบคนเมอ 20 มกราคม 2560)

ประวตความเปนมาของ Adobe Photoshop. 2559. (ออนไลน). http://www. bombzii10.blogspot.com/2016/02/adobe-photoshop.html. (สบคนเมอ 12 พฤศจกายน 2559)

Page 35: Adobe Photoshop CS6 - WordPress.com · 2018-12-04 · 4 ชุดกิจกรรมที่ 2 เทคนิคการออกแบบตัวอักษร การฝึกทักษะเพื่อ