0 syllabus

โครงสรางหลกสตรหนวยการเรยนร
การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส
(Graphic Design by GIMP & Inkscape)
กล5มสาระการเรยนรการงานอาชพและเทคโนโลย

หลกสตรแกนกลางการศกษาขนพนฐาน
พทธศกราช 2551

ส9านกงานสงเสร:มอ5ตสาหกรรมซอฟตแวรแหงชาต: (องคการมหาชน)
Software Industry Promotion Agency (Public Organization)

ค9าน9า

ส9านกงานสงเสร:มอ5ตสาหกรรมซอฟตแวรแหงชาต: (องคการมหาชน) มนโยบายสงเสร:มการลดการละเม:ด
ล:ขส:ทธ:J และสงเสร:มการใชงานซอฟตแวรโอเพนซอรส ใหกบหนวยงานภาครฐและสถานศPกษา จPงไดจดท9า หนวยการ
เรยนร การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส (Graphic Design by GIMP & Inkscape) ขPTนเพUVอเปWน
แนวทางในการจดการศPกษาของสถานศPกษา ในการเรยนการสอนของว:ชา ในกล5มสาระการเรยนรการงานอาชพแล
เทคโนโลย ส9าหรบชTนมธยมศPกษาตอนตน การจดท9าอางอ:งตามมาตรฐาน หลกสตรแกนกลางการศPกษาขTนพUTนฐาน
พ5ทธศกราช 2551
โครงสรางหลกสตรเลมนT จดท9าขPTนเพUVอเปWนแนวทางในการจดการเรยนการสอน อาจมสวนชวยครผสอนไดบาง
และถามสวนในผ:ดพลาดทางผจดขออภยมา ณ.ทVนT

ทมผจดท9า

สารบญ

คาอธ"บายราชว"ชา.............................................................................................................................4
โครงสร(างรายว"ชา.............................................................................................................................5
แผนการจดการเร-ยนร(ท-. 1.................................................................................................................7
แผนการจดการเร-ยนร(ท-. 2...............................................................................................................11
แผนการจดการเร-ยนร(ท-. 3...............................................................................................................15
ภาคผนวก......................................................................................................................................19
ใบงานท 1..............................................................................................................................................................19
ใบงานท 2..............................................................................................................................................................19
ใบงานท 3..............................................................................................................................................................19
ใบงานท 4..............................................................................................................................................................22
ใบงานท 5..............................................................................................................................................................28
ใบงานท 6..............................................................................................................................................................32

สานกงานสงเสรมอตสาหกรรมซอฟต"แวร"แหงชาต (องค"การมหาชน) 4

คาอธ"บายราชว"ชา
กล5มสาระการเรยนร การงานอาชพและเทคโนโลย
ชUVอรายว:ชา การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส
(Graphic Design by GIMP & Inkscape)
รหสว:ชา ง.232xx (xx อยระหวาง 41-59)
ชTน มธยมศPกษาปcทV 3
เวลาเรยน 40 ชVวโมง
จ9านวน 1.0 หนวยก:ต

ค9าอธ:บายรายว:ชา
ศกษาว"เคราะห4 ความหมาย คนควา สร5ปและอธ:บายการออกแบบงานกราฟกดวยโปรแกรมโอเพน
ซอรส ใชซอฟตแวร GIMP และ Inkscape ชวยในการออกแบบ และอธ:บายถPงค5ณลกษณะ และความเหมาะสม
ของซอฟตแวรโปรแกรม GIMP ทVใชในการตกแตงภาพ และ Inkscape ใชการจดวางรปแบบและขอความ ใช
คอมพ:วเตอรชวยสรางงานออกแบบ ตามจ:นตนาการ ไมคดลอกผลงานผอUVน ใชค9าส5ภาพ และไมสรางความเสย
หายตอผอUVน
โดยใช(กระบวนการ สรางความร ความเขาใจ ในการท9าใชงานซอฟตแวร การค:ด ว:เคราะห ในการ
ออกแบบ การฝfกทกษะปฏ:บต:งาน การแกปhญหา การท9างานกล5ม การน9าเสนอความค:ด จ:ตนาการ การเสร:ม
สรางเจตคต: และกระบวนเสร:มสรางค5ณลกษณะทVพPงประสงค
เพ.อให(ผ(เร-ยนเก"ด ความตะหนกและเหjนค5ณคาของการใชซอฟตแวรถกล:ขส:ทธ:J มทกษะในการ
ออกแบบงานกราฟก และใชซอฟตแวรชวยในการแกปhญหาการท9างาน และประกอบอาชพอยางมประส:ทธ:ภาพ
ประส:ทธ:ผล มค5ณธรรมจร:ยธรรมในการใชซอฟตแวรโอเพนซอรส สรางสรรคผลงานในการด9ารงชว:ตดวยความ
รบผ:ดชอบ

รหสตวชTวด ง 3.1 ม.2/4, ง 3.1 ม.3/3, ง 3.1 ม.3/4
(รวม 3 ตวชTวด)

กลมสาระการเรยนร การงานอาชพและเทคโนโลย การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส


โครงสร(างรายว"ชา
การออกแบบงานกราฟ7กด(วยโปรแกรมโอเพนซอร4ส
ชนมธยมศกษาป;ท-. 3 เวลา 40 ช.วโมง

ล9าดบ มาตฐานและ เวลา นT9าหนก
ชUVอหนวยการเรยร สาระส9าคญ
ทV ตวชTวด (ชVวโมง) คะแนน
1 พUTนฐานการ ง 3.1 ม.2/4 พUTนฐานการออกแบบ 6
ออกแบบ ง 3.1 ม.3/4 • องคประกอบของการ
ออกแบบ
• การจดองคประกอบ
• เรUVองพUนฐานระบบงาน
T
คอมพ:วเตอร
2 GIMP กบงาน ง 3.1 ม.2/4 GIMP กบงานออกแบบกราฟก 17
ออกแบบกราฟก ง 3.1 ม.3/3 • ความตองการระบบของ
GIMP
ง 3.1 ม.3/4 • การต:ดตTงโปรแกรม GIMP
หนาจอของโปรแกรม GIMP
•

• เครUVองมUอทาส
• เครUVองมUอเลUอกพUTนทV
• การสรางขอความตกแตงภาพ
• การท9างานกบเลเยอร
3 Inkscape กบงาน ง 3.1 ม.2/4 Inkscape กบงานออกแบบกราฟก 17
ออกแบบกราฟก ง 3.1 ม.3/3 • การต:ดตTงโปรแกรม
Inkscape
ง 3.1 ม.3/4 • หนาจอโปรแกรม Inkscape
• การใชงานค9าสVงพUTนฐานของ
Inkscape
• การสรางรปรางอ:สระหรUอ



ล9าดบ มาตฐานและ เวลา นT9าหนก
ชUVอหนวยการเรยร สาระส9าคญ
ทV ตวชTวด (ชVวโมง) คะแนน
เสน Paths
• การแกไขเสน Path
• การท9างานของ Layout
• เรUVองของตวอกษร



แผนการจดการเร-ยนร(ท-. 1
กล5มสาระการเรยนร การงานอาชพและเทคโนโลย รายว:ชา การออกแบบงานกราฟกดวยโปรแกรมโอเพน
ซอรส ชTน ม.3 ภาคเรยนทV ปcการศPกษา
ชUVอหนวยการเรยนร พUTนฐานการออกแบบ เวลา 6 . ชVวโมง
มาตรฐานการเร-ยนร(
สาระทV ๓ เทคโนโลยสารสนเทศและการสUVอสาร
มาตรฐาน ง ๓.๑ เขาใจ เหjนค5ณคา และใชกระบวนการเทคโนโลยสารสนเทศในการ สUบคน
ขอมลการเรยนร การสUVอสาร การแกปhญหา การท9างาน และอาชพอยาง
มประส:ทธ:ภาพ ประส:ทธ:ผล และมค5ณธรรม

ตวช-วด
ง.3.1 ม.2/4 ใช*ซอฟต"แวร"ในการทางาน
• ซอฟตแวรระบบประกอบดวยระบบปฏ:บต:การ โปรแกรมแปลภาษาและ
โปรแกรมอรรถประโยชน
• ซอฟตแวรประย5กตประกอบดวยซอฟตแวร ประย5กตทVวไป และซอฟตแวร
ประย5กตเฉพาะงาน
• ใชซอฟตแวรระบบชวยในการท9างาน เชนบบอด ขยาย โอนยายขอมล
ตรวจสอบ ไวรสคอมพ:วเตอร
• ใชซอฟตแวรประย5กตชวยในการท9างาน เชน ใชโปรแกรมในการค9านวณ
และ จดเรยงขอมล ใชโปรแกรมชวยคนหา ค9าศพทหรUอความหมาย ใช
โปรแกรมเพUVอ ความบนเท:ง
ง.3.1 ม.3/4 ใช*คอมพวเตอร"ชวยสร*างช-นงานจาก จนตนาการหร/องานททาในชวตประจาวนตาม
หลกการทาโครงงานอยางมจตสาน4กและความรบผดชอบ
• การใชคอมพ:วเตอรชวยสรางงานตาม หลกการท9าโครงงานโดยมการอางอ:ง
แหลงขอมล ใชทรพยากรอยางค5มคา ไมคดลอกผลงานผอUVน ใชค9าส5ภาพ
และไมสรางความเสยหายตอผอUVน

สาระสาคญ
ความร(ความเข(าใจคงทน
ในการออกแบบกราฟก มพUT น ฐานสองประการ อยางแรกจะเปW น องคประกอบของการ
ออกแบบ ความหมายและค5ณลกษณะของ จ5ด , เสน, รปรางและรปทรง, มวลและปร:มาตร, ลกษณะ
พUTนผ:ว, ส และแบบตวอกษร สวนทVสองเปWนการจดองคประกอบ โดยใชหลกการและว:ธการตางๆ ใหเ



ก: ด ม5มมอง และความลงตวของงานออกแบบ รวมถP ง ความหมายและค5 ณ ลกษณะของภาพแบบ
Bitmap และ Vector คาความละเอยดของภาพ ทVใชงานบนระบบคอมพ:วเตอร

ทกษะ/กระบวนการ
การค:ด สงเกต และอธ:บายความหมายและองคประกอบของการออกแบบกราฟก เลUอกระบบ
คอมพ:วเตอรมาชวยในการออกแบบ

คณลกษณะ
นกเรยนใฝvเรยนร มความซUVอสตยส5จร:ต มว:นย และจ:ตสาธารณะ

สาระการเร-ยนร(
1. องคประกอบพUTนฐานของการออกแบบกราฟก
2. การจดองคประกอบของการออกแบบกราฟก
3. พUTนฐานของระบบประเภทของรปภาพ และความละเอยด บนระบบคอมพ:วเตอร

ช"นงาน/ภาระงานท-.ผ(เร-ยนปฏ"บต"
1. เขยนอธ:บาย ถPงการสUVอความหมายขององคประกอบของการออกแบบบกราฟก
2. ใบงานทV 1 (วาดรปองคประกอบตางๆของการออกแบบกราฟก ลงบนกระดาษ A4 ดวย
ด:นสอ)
3. ใบงานทV 2 (ออกแบบสUVอประชาสมพนธหรUอ หวขออ:สระ ลงบนกระดาษ A4 ดวยสไม)

แนวการให(คะแนน

ระดบค5ณภาพ
เกณฑการประเม:น
4 3 2 1
วาดรปองคประกอบ ค ร บ ท5 ก อ ง ค ค ร บ ท5 ก อ ง ค ค ร บ ท5 ก อ ง ค ไ ม ค ร บ ท5 ก อ ง ค
ตางๆของการ ประกอบ ลายเสน ประกอบ ลายเสน ประกอบ ลายเสน ประกอบ ลายเสน
ออกแบบกราฟก นT9าหนกคงทV จดวาด นT9 า หนกไมคงทV จด นT9 า หนกไมคงทV จด นT9 า หนกไมคงทV จด
เปWนระเบยบ วาดเปWนระเบยบ วาดไมเปWนระเบยบ วาดไมเปWนระเบยบ
อ อ ก แ บ บ สUV อ จดองคประกอบได จดองคประกอบได จดองคประกอบได จดองคประกอบไม
ประชาสมพนธหรUอ สมบรณ เลU อ กตว สมบรณ เลU อ กตว สมบรณ เลU อ กตว สมบรณ เลU อ กตว
หวขออ:สระ อกษรเหมาะสม ใชส อกษรไมเหมาะสม อกษรไมเหมาะสม อกษรไมเหมาะสม
เหมาะสมกบส:VงทVน9า ใชสเหมาะสมกบส:V ง ใชสไมเหมาะสมกบ ใชสไมเหมาะสมกบ
เสนอ ทVน9าเสนอ ส:VงทVน9าเสนอ ส:VงทVน9าเสนอ



ส.อ อปกรณ4 และแหลAงการเร-ยนร(
1. กระดาษ A4
2. ด:นสอ
3. ด:นสอสไม
4. หนงสUอ “การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส” จดท9าโดย SIPA

ก"จกรรมการเร-ยนร(
ก"จกรรมนาสAการเร-ยน
ครผสอนแสดง งานดานการออกแบบกราฟก และรวมกบนกเรยนอภ:ปราย ถPงการออกแบบ
ความรสPกจากส ตวอกษร รแบบการจดองคประกอบ ใหผเรยนบอกองคประกอบของการออกแบบ
และการจดองคประกอบของการออกแบบ จากงานทVครผสอนแสดงใหด

ก"จกรรมพฒนา
1. ครผสอน สร5ปองคประกอบของการออกแบบ จากทVรวมกนอภ:ปราย
2. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงความหมาย และการสUVอความหมายขององคประกอบ
ของการออกแบบ
3. ใหนกเรยนฝfกฝนส:VงทVเรยนโดยให บอกองคประกอบของการออกแบบกราฟก และวาดรปองค
ประกอบตางๆ ลงบนกระดาษ A4
4. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงความหมาย และการสUVอความหมายของรปแบบการ
จดองคประกอบของการออกแบบ
5. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงความหมาย ความแตกตาง ความละเอยดของภาพ
Bitmap และ Vector ในระบบคอมพ:วเตอร

ก"จกรรมรวบยอด
ครผสอนสร5ปองคประกอบ และการจดองคประกอบของการออกแบบกราฟก และใหนกเรยน
ค:ดว:เคราะห และออกแบบ การน9าเสนอหรUอประชาสมพนธภม:ปhญหาในทองถ:Vน หรUอสถานทVส9าคญใน
ทองถ:Vน ลงบนกระดาษ A4 ดวยด:นสอสไม



การวดและประเม"นผลการเร-ยนร(

เปzาหมาย หลกฐาน ว:ธวด เครUVองมUอวด
ความร
•ใชซอฟตแวรในการท9า อธ:บายพUนฐานของระบบ
T การเขยนสะทอนการ อตนย
งาน รปภาพในระบบคอมพ:วเตอร เรยนร (เขยนบรรยาย)
• ใชคอมพ:วเตอรชวย อธ:บายองคประกอบ และการ การเขยนสะทอนการ อตนย
สรางช:Tนงานจาก จดองคประกอบของการ เรยนร (วาดภาพ)
จ:นตนาการหรUองานทV ออกแบบกราฟก
ท9าในชว:ตประจ9าวน
ตามหลกการท9าโครง
งานอยางมจ:ตส9านPก
และความรบผ:ดชอบ
ค5ณลกษณะ
• ใฝvเรยนร จดท9าบนทPกการคนควา การเขยนสะทอนการ บนทPกตอเนUVอง
เรยนร
• ซUVอสตยส5จร:ต จดท9าบนทPกการปฏ:บต:ทVไดรบ การเขยนสะทอนการ บนทPกตอเนUVอง
มอบหมาย เรยนร



ชUVอหนวยการเรยนร GIMP กบงานออกแบบกราฟก เวลา 17 . ชVวโมง

ตวช-วด
ง.3.1 ม.3/3 ใช*เทคโนโลยสารสนเทศนาเสนองานในร8ปแบบทเหมาะสมกบลกษณะงาน
• การเลUอกซอฟตแวรทVเหมาะสมกบลกษณะของงาน
• การใชซอฟตแวรและอ5ปกรณด:จ:ทลมาชวยในการน9าเสนองาน



กอนทVจ ะท9า การตกแตงภาพเพUV อ การออกแบบกราฟก นกเรยนตองรจกการท9 า งานของ
โปรแกรม GIMP ในสวนตางๆตTงแต การเลUอกค5ณลกษณะของเครUVองคอมพ:วเตอรทVเหมาะสมในการต:ด
ตTงโปรแกรม GIMP และค9าสVงเบUTอนตน เครUVองมUอทาส เครUVองมUอเลUอกพUTนทV การสรางขอความตกแตง
ภาพ

การค:ด สงเกต และอธ:บายความหมายของโปรแกรม GIMP ใชในการตกแตงภาพ

1. ความหมาย และความสามารถของโปรแกรม GIMP
2. รปแบบและหนาจอของโปรแกรม GIMP
3. การใชงานกล5มเครUVองมUอทาส และกล5มเครUVองมUอเลUอกพUTนทV
4. การประย5กตใชงานเลเยอร และการสรางขอความตกแตงภาพ

1. เขยนอธ:บาย สร5ปความหมาย และส:ทธ:การใชงานโปรแกรมโอเพนซอรส GIMP
2. ท9าใบงานทV 3 หลงจากจบการใชงานกล5มเครUองมUอทาส และกล5มเครUองมUอเลUอกพUTนทV
V V
3. จดบนทPกการคนควา และการปฎ:บต:งานทVรบมอบหมาย และท9าใบงานทV 4


4 3 2 1
ใบงานทV 3 ท9า ไดถกตอง และม ท9า ไดถกตอง และม ท9า ไดถกตอง และม ท9า ไดถกตอง และม
การใชรปทรงหลาย การใชรปทรงหลาย การใชรปทรงหลาย การใชรปทรงเดยว
รปแบบมการตด รปแบบไมมการตด รปแบบ
สวนตรงกลาง สวนตรงกลาง
ใบงานทV 4 จดองคประกอบได จดองคประกอบได จดองคประกอบได จดองคประกอบไม
สมบรณ เลU อ กตว สมบรณ เลU อ กตว สมบรณ เลU อ กตว สมบรณ เลU อ กตว
อกษรเหมาะสม ใชส อกษรไมเหมาะสม อกษรไมเหมาะสม อกษรไมเหมาะสม



4 3 2 1
เหมาะสมกบส:VงทVน9า ใชสเหมาะสมกบส:V ง ใชสไมเหมาะสมกบ ใชสไมเหมาะสมกบ
เสนอ ทVน9าเสนอ ส:VงทVน9าเสนอ ส:VงทVน9าเสนอ

1. เครUVองคอมพ:วเตอร
2. โปรแกรม GIMP
3. ระบบอ:นเตอรเนjต
4. หนงสUอ “ การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส” จดท9าโดย SIPA

ครผสอนแสดง ภาพทVผานการตกแตงดวยว:ธตางๆ และรวมกบนกเรยนอภ:ปราย วาสวนใด
ของภาพทVมการตกแตง และท9าการตกแตงดวยว:ธการอยางไรบาง

1. ครผสอน สร5ปความหมายและค9าจ9ากดความของโปรแกรม GIMP
2. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงความหมาย และการท9างานของเครUองมUอตางๆของ
V
โปรแกรม GIMP
3. ใหนกเรยนฝfกฝนส:VงทVเรยนโดยการเร:Vมทดลองต:ดตTงโปรแกรม
4. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงการใชประโยชนของค9าสVงตางๆ
5. ใหนกเรยนฝfกฝน และจดบนทPกการใชงานเครUองมUอตางๆ และท9าใบงานทV 3
V

ครผสอนสร5ปความหมายและการท9างานของเครUVองตางๆของโปรแกรม GIMP และอธ:บายใบ
งานทV 4 แลวใหผเรยนท9าตามแนวค:ดของแตละคน




ความร
•ใชซอฟตแวรในการท9า อธ:บายความหมาย และ การเขยนสะทอนการ อตนย
งาน ค5ณลกษณะของโปรแกรม เรยนร (เขยนบรรยาย)
GIMP
• ใชเทคโนโลยสารสน อธ:บายและท9าการต:ดตTง การปฏ:บต:สะทอน อตนย
เทศน9าเสนองานในรป โปรแกรม GIMP และท9าการ การเรยนร (ตกแตงภาพ)
แบบทVเหมาะสมกบ ตกแตงภาพ
ลกษณะงาน
• ใชคอมพ:วเตอรชวย
สรางช:Tนงานจาก อธ:บายและท9าการออกแบบ การปฏ:บต:สะทอน อตนย
จ:นตนาการหรUองานทV การจดวางภาพตามจ:นตนาการ การเรยนร (ตกแตงภาพ)
เรยนร



ชUVอหนวยการเรยนร Inkscape กบงานออกแบบกราฟก เวลา 16 . ชVวโมง

ตวช-วด
ง.3.1 ม.3/3 ใช*เทคโนโลยสารสนเทศนาเสนองานในร8ปแบบทเหมาะสมกบลกษณะงาน
• การเลUอกซอฟตแวรทVเหมาะสมกบลกษณะของงาน
• การใชซอฟตแวรและอ5ปกรณด:จ:ทลมาชวยในการน9าเสนองาน



ในสวนการจดวางองคประกอบของงานออกแบบกราฟกนTน ส:VงทVนกเรยนตองรวาโปรแกรมโอ
เพนซอรส Inkscape มความสามารถในการจดการเลเยอร การวาดเสน การวาดรปทรงตางๆ การ
ก9าหนดสใหกบรปรางรปทรง และการสรางตวอกษร การจดการกบตวอกษรในรปแบบตางๆ

การค:ด สงเกต และอธ:บายความหมาย ความสามารถของโปรแกรมโอเพนซอรส Inkscape
ในการสรางรปรางรปทรง เสน Path การจดการตวอกษร


1. การต:ดตTงโปรแกรม ความหมาย และความสามารถของโปรแกรม Inkscape
2. รปแบบและหนาจอของโปรแกรม Inkscape การใชงานค9าสVงพUนฐาน T
3. การใชงานกล5มเครUVองมUอสรางรปทรง และกล5มเครUVองมUอสรางเสน Path
4. การประย5กตใชงานเลเยอร และการสรางและจดการตวอกษร

1. เขยนอธ:บาย สร5ปความหมาย และส:ทธ:การใชงานโปรแกรมโอเพนซอรส Inkscape
2. ท9าใบงานทV 5 หลงจากจบการสรางรปรางอ:สระหรUอเสน Path
3. จดบนทPกการคนควา และการปฎ:บต:งานทVรบมอบหมาย และท9าใบงานทV 6 หลงจบหนวยการ
เรยนรททV 3


4 3 2 1
ใบงานทV 5 ก9 า หนดขนาดไดถก ก9 า หนดขนาดไดถก ก9 า หนดขนาดไดถก ก9 า หนดขนาดไมถก
ตอง มรปดาวครบ ตอง มรปดาวครบ ตอง มรปดาวไมครบ ตอง มรปดาวไมครบ
และต9าแหนงถกตอง แตต9 า แหนงไมถก แตต9 า แหนงไมถก แตต9 า แหนงไมถก
ตอง ตอง ตอง
ใบงานทV 6 รปทรงถกตองม รปทรงถกตองม รปทรงถกตองม รปทรงถกตองไมม



4 3 2 1
ขอความบางสวน ขอความบางสวน ขอความไมซอนและ ขอความไมซอนและ
ซอนและมแสงเงา ซอนและไมมแสงเงา ไมมแสงเงา ไมมแสงเงา
ครบ

1. เครUVองคอมพ:วเตอร
2. โปรแกรม Inkscape
3. ระบบอ:นเตอรเนjต
4. หนงสUอ “ การออกแบบงานกราฟกดวยโปรแกรมโอเพนซอรส” จดท9าโดย SIPA

ครผสอนแสดง ภาพทVผานการตกแตงดวยว:ธตางๆ และรวมกบนกเรยนอภ:ปราย วาสวนใด
ของภาพทVมการตกแตง และท9าการตกแตงดวยว:ธการอยางไรบาง

1. ครผสอน สร5ปความหมายและค9าจ9ากดความของโปรแกรม Inkscape
2. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงความหมาย และการท9างานของเครUองมUอตางๆของ
V
โปรแกรม Inkscape
3. ใหนกเรยนฝfกฝนส:VงทVเรยนโดยการเร:Vมทดลองต:ดตTงโปรแกรม
4. ใหความรเช:งอภ:ปรายรวมกบนกเรยนถPงการใชประโยชนของค9าสVงตางๆ
5. ใหนกเรยนฝfกฝน และจดบนทPกการใชงานเครUองมUอตางๆ และท9าใบงานทV 5
V

ครผสอนสร5ปความหมายและการท9างานของเครUVองตางๆของโปรแกรม Inkscape และอธ:บาย
ใบงานทV 6 แลวใหผเรยนท9าตามแนวค:ดของแตละคน




ความร
•ใชซอฟตแวรในการท9า อธ:บายความหมาย และ การเขยนสะทอนการ อตนย
งาน ค5ณลกษณะของโปรแกรม เรยนร (เขยนบรรยาย)
Inkscape
• ใชเทคโนโลยสารสน อธ:บายและท9าการต:ดตTง การปฏ:บต:สะทอน อตนย
เทศน9าเสนองานในรป โปรแกรม Inkscape และ การเรยนร (ตกแตงภาพ)
แบบทVเหมาะสมกบ ท9าการตกแตงภาพ
ลกษณะงาน
• ใชคอมพ:วเตอรชวย
สรางช:Tนงานจาก อธ:บายและท9าการออกแบบ การปฏ:บต:สะทอน อตนย
จ:นตนาการหรUองานทV ปzายสต:กเกอรตามจ:นตนาการ การเรยนร (ตกแตงภาพ)
เรยนร



ภาคผนวก

ใบงานท 1
วาดองคประกอบของการออกแบบกราฟก ลงกระดาษ A4

ออกแบบการน9าเสนอผล:ตภณฑ หรUอสถานทVส9าคญในช5มชน ลงกระดาษ A4 ใชด:นสอสไม

โปรแกรม GIMP เปWนทVใชส9าหรบตกแตงหรUอจดการภาพ ไมใชโปรแกรมวาดรปเปWนหลก จPงไมมเครUองV
มUอในการวาดรปสVเหลVยม หรUอรปหลายเหลVยม หรUอรปทรงตางๆ แตโปรแกรม GIMP กjมค9าสVงทVสามารถสราง
รปทรงได โดยการใชค9าสVงเกVยวกบการเลUอกพUนทV แลวเต:มเสนหรUอสใหกบพUTนทVทVเลUอก
T

ขTนตอนทV 1 กอนทVจะตเสนหรUอระบายส ตองท9าการเลUอกขอบเขตหรUอรปแบบทVตองการโดยใชเครUVองมUอ
ในกล5มเลUอกพUTน (Selection tools)



ขTนตอนทV 2 สรางขอบเขตหรUอรปรางตามตองการ

ขTนตอนทV 3 ใหเลUอกลกษณะหวแปรง และสของ Foreground



ขTนตอนทV 4 เรยกใชค9าสVง Stork Selection จาก <Menu Bar> Edit -> Stroke Selection.

ขTนตอนทV 5 เลUอกรปแบบการตเสน และปรบคาตางๆ เสรjจแลวคล:กเลUอก Stroke



เปWนการรวบรวมภาพตางๆ มาไวในภาพเดยว หรUอการสรางเลเยอร ภาพตางๆสามารถดาวนโหลดได
จาก http://www.geekphilosopher.com
1. สรางงานใหมขนาด 500 x 500 พ:กเซล

2. เทสพUTนหลงเพUVอใหเหjนขอบเขตของภาพดวยค9าสVง Tools | Paint Tools | Bucket Fill

3. เปดรปใหมขPTน File > Open สามารถเปดไดมากกวาหนPVงไฟล เลUอกแลวคล:ก Open



4. ท9าการเลUอกสวนตางๆ ในภาพทVเปดใหมแลวน9ามาวางบนไฟลแรกทVเทสไวโดยใช Selection Tools

5. ท9าการ coppy ภาพไปวางทVไฟลรวมรวบ Edit > coppy และ Ecit > paste ภาพทVน9ามาอาจมขนาด
ใหญกวาพUนทVของเราใหท9าการยอเลเยอร
T

6. ภาพทVวางจะยอขนาดลงดงตวอยางกอนและหลงยอเลเยอร

7. เมUอวางดใหแนใจวาอยบนเลเยอร เมUVอเราใชค9าสVง Edit > Paste โปรแกรมจะท9ากาแปะภาพและ
เลเยอรอยในสถานะ Floating Selection (Pasted Layer) ตองกด Enter ทVคยบอรสองครTง และ
สามารถคล:กเปลVยนชUVอเลเยอรได



8. ตวอยางการเลUอกแบบตางๆ

9. ตอไปเปWนตวอยางการไลคาสใหพUTนหลงดวยค9าสVง Gradient tool เร:Vมจากคล:กเลUอกเลเยอรของพUTน
หลง แลวเลUอกค9าสVง Gradient tool ปรบคาตาง



10. การเพ:Vมขอความ เลUอกค9าสVง Text Tool เลUอกแบบตวอกษร ส ขนาด



11. คล:กยงต9าแหนงทVตองการวางขอความ จะมหนาตางใหกรอกขอความ และสามารถปรบคาตวอกษรได

12. การวางภาพสามารถปรบความเขมของภาพไดจากคา Opacity ของเลเยอร

13. ในการแตงภาพสามารถเลUอกใชค9าสVง Filter เพUVอท9าใหภาพดแปลกออกไปได ท9าไดโดยคล:กเลUอก
เลเยอรทVตองการ แลวเลUอกค9าสVง Filter เลUอกรปแบบทVตองการ มตวอยางค9าสVงดงรป



14. ส5ดทายท9าการบนทPกไฟล และตวอยางภาพส5ดทาย



ทVมา http://tavmjong.free.fr/INKSCAPE/MANUAL/html/AShortExampleEU.html ธงสหภาพ
ย5โรป ในการวาดรปธงจะมความซบซอนมากขPTนและครอบคล5มการใช Star Tool เพUVอวาดดาวและใช Guide
Lines เพUVอใหไดต9าแหนง, การท9าส9าเนาหรUอโคลนของวตถ5, และแมนย9าในการยายส9าเนาเหลานTนไปยงต9าแหนง
ทVถกตอง

ธงของสหภาพย5โรป
ขTนตอนคUอ
 ก9าหนดคาส9าหรบการวาดภาพขTนพUTนฐาน (ขนาดธง, ตาราง, สพUนหลง)
T
 เพ:Vม Guide Lines
 วาดดาวหนPVงดวง
 วาดดาวและต9าแหนงทVซT9ากน
ขนตอน การวาดธงสหภาพยโรป
1. ตงคAาการวาดภาพ
เร:Vมตน Inkscape. ขนาดหนากระดาษจะตองมการก9าหนดใหมสดสวนทVถกตองส9าหรบธงสหภาพย5โรป
ซPVงมอตราสวน 3 ตอ 2 ของความกวางตอความสง เราจะใช 270X180 พ:กเซล
วาดรปสVเหลVยมส9าหรบพUTนหลงธงทVครอบคล5มทTงหนา ถดไปใช Fill and Stoke dialog (Object →
Fill and Stroke... (Shift + Ctrl + F)) เพUVอตTงก9าหนดสของพUTนหลงเปWน RGB ส : 0, 51, 153
ตรวจสอบดวา Alpha มคา 255 และความทPบ Master opacity 100%
2. เพ".ม Guide Lines
ส9าหรบการวางดาวจะงายทVส5ด ในการวาดดาวครTงแรกทVศนยของธง (ทV 135, 90) จากนTนจะสามารถ
ใชการยายต9าแหนงยายดาวไปยงต9าแหนงส5ดทายทVก9าหนด เสน Guide จะเปWนเสนทVเหมUอนเสนตาราง
จะไมไดเปWนสวนหนPVงของการวาดภาพทVเก:ดขPTนจร:ง



Guide Line dialog

Guide Line สามารถเปดและปดโดยใช Guide Line ( ไอคอน ) ใน Snap Bar หรUอภายใตแทjบ
Guides ใ น ก า ร โ ต ต อ บ ค5 ณ ส ม บ ต: เ อ ก ส า ร Document Properties dialog (File →
Document Properties ... (Shift + Ctrl + D)
เพ:VมทTงแนวนอน Guide Line ทV y = 90 px และแนวตTง Guide Line ทV x = 135 px
3. วาดดาว
ตองวาดดาวหาแฉก และคดลอกเปWน 12 ดวง เพUVอหลกเหลVยงการวาดดาวเปWนสเดยวกบพUTนหลงให
ยกเล:กการเลUอกพUนหลงและเลUอกสใหมกอน
T
a. เลอก Star tool และตงคAาพาราม"เตอร4
ในการวาดดาวใหเลUอก Star tool (แปzนพ:มพลด *) ใน Tool Box

The Star Tool-Tool Controls



ใน Tool Controls ตTงคาม5ม(Corners) เปWน 5 เลUอกไอคอนสตาร ( ) เพUVอใชการวาดภาพ
ของดาว Spoke Ratio คUออตราสวนของรศมของจ5ดดานในส5ดกบรศมของจ5ดนอกส5ดของดาว
(R2/R1) ส9าหรบคาปกต:ดาวหาแฉกควรจะมคา 0.382

ขนาดสตาร
b. วาดดาว
รศมทVก9าหนด (R1) ของดาวบนธงสหภาพย5โรปเปW น 1 / 18 ของความสงของธง, หรUอ 10
พ:กเซลทVมขนาดธง เร:Vมตนดวยคล:กเมาสทVจดตดของ Guide Lines คล:กลากขPTน 10 พ:กเซล
5
ปรบสของดาวใหเปWนคา RGB เทากบ (255, 204, 0) ตรวจสอบใหแนใจ Alpha (A) คUอ 255
และความทPบ Master 100%

After the first star has been drawn and the color adjusted



4. ทาซาและย(ายไปยงตาแหนAงท-.กาหนดทง 12 ดาว
a. Clone ดาว
คล:กทVไอคอนทTง ใน Command Bar หรUอใช Edit → Clone → Create Clone
(Alt + D) เพUVอเปWนการคดลอกดาว
b. วางตาแหนAงดาวท-.คดลอก
เลU อ ก Move tab ใน Transform dialog หรU อ (Object → Transform... (Shift +
Ctrl + M)) ในการยายต9าแหนงดาวทVโคลนไปยงต9าแหนง 12 นาฬ:กา ใหตTงคา Vertical (Y)
เปWน 60 พ:กเซล

The Transform dialog ตTงคาเพUVอยายดาวโคลนครTงแรกในสถานทV

ท9าการเลUอกดาวทVโคลนไว แลวก9า หนดคา คราวนTยาย Clone 60 พ:กเซลลง (-60) ท9าซT9า
ท:ศทางส9าหรบแนวนอน x) ( ส9าหรบดาวสวนทVเหลUอของใหใชแปดแบบเรยงสบเปลVยนของ x
(Y) = ± 30 และ y (x) = ± 52 พ:กเซล กjจะไดต9าแหนงตามทVก9าหนด



สต:กเกอรกบขอบพบ เขยนโดย ryanlerch สามารถดตนฉบบไดทV
http://ryanler.wordpress.com/2007/05/23/inkscape-sticker-with-folded-edge-tutorial/

ขTนตอนทV 1
1. วาดวงกลมดวยเครUVองมUอ circle tool
2. การใชเครUVองมUอ Path tool, วาดรปทรงทVตดวงกลมส9าหรบ "ปzายสต:กเกอร"
3. เลUอกเสน Path และวงกลมและ Path > Division และตTงคาสของเสน Path ทTงสองตามรป

1. เลUอก"ปzายสต:กเกอร" (สวนทVเปWนสด9า) และกดพล:กแนวตTง (Flip Vertical)
2. จากนTนกดพล:กแนวนอน (Flip Horizontal)



1. เลUอกสวนหลกของสต:กเกอร (สวนทVเปWนสฟzา) Right Click > Duplicate แลวเปลVยนส (เปWนสชมพ)
2. ท9าอกครTงและเปลVยนสไปเปWนสอUVนทVแตกตางกนอกครTง (เลUอกเปWนสเขยว)
3. เลUอกสวนทVเปWนสเขยว และใชแปzนลกศรเพUVอขยบใหเลUVอมกนน:ดหนอย
4. จากนTนใหเลUอกทTงวตถ5สเขยวและชมพและเลUอกเสน Path > Difference
5. การเปลVยนสของเสนทางทVเหลUอเปWนสด9า
6. เปด Stroke/Fill dialog และปรบคาความโปรงใสและเบลอ

1. Duplicate สวนสด9าวตถ5"แผนปzายสต:กเกอร" และเปลVยนส
2. เลUอกสวนสด9า (อยใตทVสรางใหม) และปรบคาความเบลอและความโปรงใส
3. Duplicate สวนหลก (สวนสฟzา) ของสต:กเกอรซT9าอกครTง
4. กด CTRL + A เพUVอเลUอกทTงหมดแลวเลUอก Object> Clip> Set
5. เพ:Vมขอความ เปWนขTนตอนส5ดทาย


0 syllabus

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie 0 syllabus

Ähnlich wie 0 syllabus (20)

Mehr von korakate

Mehr von korakate (20)

0 syllabus