0 syllabus

โครงสร�างหลกส�ตรหน�วยการเร�ยนร��โครงสร�างหลกส�ตรหน�วยการเร�ยนร��

การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�สการออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส(Graphic Design by GIMP & Inkscape)(Graphic Design by GIMP & Inkscape)

กล5�มสาระการเร�ยนร��การงานอาช�พและเทคโนโลย�กล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าดบท�V ชUVอหน�วยการเร�ยร�� มาตฐานและ

ตวช�Tวด สาระส9าคญ เวลา(ชVวโมง)

นT9าหนกคะแนน

1 พUTนฐานการออกแบบ

ง 3.1 ม.2/4ง 3.1 ม.3/4

พUTนฐานการออกแบบ• องค�ประกอบของการ

ออกแบบ• การจดองค�ประกอบ• เรUVองพUTนฐานระบบงาน

คอมพ:วเตอร�

6

2 GIMP กบงานออกแบบกราฟ�ก

ง 3.1 ม.2/4ง 3.1 ม.3/3ง 3.1 ม.3/4

GIMP กบงานออกแบบกราฟ�ก• ความต�องการระบบของ

GIMP• การต:ดตTงโปรแกรม GIMP• หน�าจอของโปรแกรม GIMP• เครUVองมUอทาส�• เครUVองมUอเลUอกพUTนท�V• การสร�างข�อความตกแต�งภาพ• การท9างานกบเลเยอร�

17

3 Inkscape กบงานออกแบบกราฟ�ก

ง 3.1 ม.2/4ง 3.1 ม.3/3ง 3.1 ม.3/4

Inkscape กบงานออกแบบกราฟ�ก• การต:ดตTงโปรแกรม

Inkscape• หน�าจอโปรแกรม Inkscape• การใช�งานค9าสVงพUTนฐานของ

Inkscape• การสร�างร�ปร�างอ:สระหรUอ

17



ล9าดบท�V ชUVอหน�วยการเร�ยร�� มาตฐานและ

ตวช�Tวด สาระส9าคญ เวลา(ชVวโมง)

นT9าหนกคะแนน

เส�น 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 ก อ ง ค�ประกอบ ลายเส�นนT9าหนกคงท�V จดวาดเปWนระเบ�ยบ

ค ร บ ท5 ก อ ง ค�ประกอบ ลายเส�นนT9าหนกไม�คงท�V จดวาดเปWนระเบ�ยบ

ค ร บ ท5 ก อ ง ค�ประกอบ ลายเส�นนT9าหนกไม�คงท�V จดวาดไม�เปWนระเบ�ยบ

ไ ม� ค ร บ ท5 ก อ ง ค�ประกอบ ลายเส�นนT9าหนกไม�คงท�V จดวาดไม�เปWนระเบ�ยบ

อ อ ก แ บ บ สUV อประชาสมพนธ�หรUอ หวข�ออ:สระ

จดองค�ประกอบได�สมบ� รณ� เลU อกต วอกษรเหมาะสม ใช�ส�เหมาะสมกบส:Vงท�Vน9าเสนอ

จดองค�ประกอบได�สมบ� รณ� เลU อกต วอกษรไม�เหมาะสม ใช�ส�เหมาะสมกบส:Vงท�Vน9าเสนอ

จดองค�ประกอบได�สมบ� รณ� เลU อกต วอกษรไม�เหมาะสม ใช�ส�ไม�เหมาะสมกบส:Vงท�Vน9าเสนอ

จดองค�ประกอบไม�สมบ� รณ� เ ลU อกต วอกษรไม�เหมาะสม ใช�ส�ไม�เหมาะสมกบส:Vงท�Vน9าเสนอ



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

ก"จกรรมการเร-ยนร�(ก"จกรรมน าส�Aการเร-ยน

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

ก"จกรรมพ�ฒนา1. คร�ผ��สอน สร5ปองค�ประกอบของการออกแบบ จากท�Vร�วมกนอภ:ปราย2. ให�ความร��เช:งอภ:ปรายร�วมกบนกเร�ยนถPงความหมาย และการสUVอความหมายขององค�ประกอบ

ของการออกแบบ3. ให�นกเร�ยนฝfกฝนส:Vงท�Vเร�ยนโดยให� บอกองค�ประกอบของการออกแบบกราฟ�ก และวาดร�ปองค�

ประกอบต�างๆ ลงบนกระดาษ A44. ให�ความร��เช:งอภ:ปรายร�วมกบนกเร�ยนถPงความหมาย และการสUVอความหมายของร�ปแบบการ

จดองค�ประกอบของการออกแบบ5. ให�ความร��เช:งอภ:ปรายร�วมกบนกเร�ยนถPงความหมาย ความแตกต�าง ความละเอ�ยดของภาพ

Bitmap และ Vector ในระบบคอมพ:วเตอร�

ก"จกรรมรวบยอดคร�ผ��สอนสร5ปองค�ประกอบ และการจดองค�ประกอบของการออกแบบกราฟ�ก และให�นกเร�ยน

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



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

เปzาหมาย หลกฐาน ว:ธ�วด เครUVองมUอวดความร��

• ใช�ซอฟต�แวร�ในการท9างาน

อธ:บายพUTนฐานของระบบร�ปภาพในระบบคอมพ:วเตอร�

การเข�ยนสะท�อนการเร�ยนร��

อตนย (เข�ยนบรรยาย)

• ใช�คอมพ:วเตอร�ช�วยสร�างช:Tนงานจาก จ:นตนาการหรUองานท�Vท9าในช�ว:ตประจ9าวนตามหลกการท9าโครงงานอย�างม�จ:ตส9านPกและความรบผ:ดชอบ

อธ:บายองค�ประกอบ และการจดองค�ประกอบของการออกแบบกราฟ�ก


อตนย (วาดภาพ)

ค5ณลกษณะ• ใฝvเร�ยนร�� จดท9าบนทPกการค�นคว�า การเข�ยนสะท�อนการ

เร�ยนร��บนทPกต�อเนUVอง

• ซUVอสตย�ส5จร:ต จดท9าบนทPกการปฏ:บต:ท�Vได�รบมอบหมาย


บนทPกต�อเนUVอง



แผนการจ�ดการเร-ยนร�(ท-. 2กล5�มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� รายว:ชา การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส ชTน ม .3 ภาคเร�ยนท�V ปcการศPกษา ช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. ความหมาย และความสามารถของโปรแกรม GIMP2. ร�ปแบบและหน�าจอของโปรแกรม GIMP3. การใช�งานกล5�มเครUVองมUอทาส� และกล5�มเครUVองมUอเลUอกพUTนท�V 4. การประย5กต�ใช�งานเลเยอร� และการสร�างข�อความตกแต�งภาพ

ช"�นงาน/ภาระงานท-.ผ�(เร-ยนปฏ"บ�ต"1. เข�ยนอธ:บาย สร5ปความหมาย และส:ทธ:การใช�งานโปรแกรมโอเพนซอร�ส GIMP2. ท9าใบงานท�V 3 หลงจากจบการใช�งานกล5�มเครUVองมUอทาส� และกล5�มเครUVองมUอเลUอกพUTนท�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าเสนอ

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


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

ก"จกรรมพ�ฒนา1. คร�ผ��สอน สร5ปความหมายและค9าจ9ากดความของโปรแกรม GIMP2. ให�ความร��เช:งอภ:ปรายร�วมกบนกเร�ยนถPงความหมาย และการท9างานของเครUVองมUอต�างๆของ

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

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

งานท�V 4 แล�วให�ผ��เร�ยนท9าตามแนวค:ดของแต�ละคน






อธ:บายความหมาย และค5ณลกษณะของโปรแกรม GIMP



• ใช�เทคโนโลย�สารสนเทศน9าเสนองานในร�ปแบบท�Vเหมาะสมกบลกษณะงาน


อธ:บายและท9าการต:ดตTงโปรแกรม GIMP และท9าการตกแต�งภาพ

อธ:บายและท9าการออกแบบการจดวางภาพตามจ:นตนาการ

การปฏ:บต:สะท�อนการเร�ยนร��


อตนย (ตกแต�งภาพ)









แผนการจ�ดการเร-ยนร�(ท-. 3กล5�มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� รายว:ชา การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส ชTน ม .3 ภาคเร�ยนท�V ปcการศPกษา ชUVอหน�วยการเร�ยนร�� Inkscape กบงานออกแบบกราฟ�ก เวลา 16 . ชVวโมง








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






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

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

ในการสร�างร�ปร�างร�ปทรง เส�น Path การจดการตวอกษร


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

ช"�นงาน/ภาระงานท-.ผ�(เร-ยนปฏ"บ�ต"1. เข�ยนอธ:บาย สร5ปความหมาย และส:ทธ:การใช�งานโปรแกรมโอเพนซอร�ส Inkscape2. ท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ข� อความบางส� วนซ�อนและม�แสงเงาครบ

ข� อความบางส� วนซ�อนและไม�ม�แสงเงา

ข�อความไม�ซ�อนและไม�ม�แสงเงา

ข�อความไม�ซ�อนและไม�ม�แสงเงา

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


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

ก"จกรรมพ�ฒนา1. คร�ผ��สอน สร5ปความหมายและค9าจ9ากดความของโปรแกรม Inkscape2. ให�ความร��เช:งอภ:ปรายร�วมกบนกเร�ยนถPงความหมาย และการท9างานของเครUVองมUอต�างๆของ

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

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

ใบงานท�V 6 แล�วให�ผ��เร�ยนท9าตามแนวค:ดของแต�ละคน






อธ:บายความหมาย และค5ณลกษณะของโปรแกรม Inkscape



• ใช�เทคโนโลย�สารสนเทศน9าเสนองานในร�ปแบบท�Vเหมาะสมกบลกษณะงาน


อธ:บายและท9าการต:ดตTงโปรแกรม Inkscape และท9าการตกแต�งภาพ

อธ:บายและท9าการออกแบบปzายสต:กเกอร�ตามจ:นตนาการ












ภาคผนวก

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

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

ใบงานท�� 3โปรแกรม GIMP เปWนท�Vใช�ส9าหรบตกแต�งหรUอจดการภาพ ไม�ใช�โปรแกรมวาดร�ปเปWนหลก จPงไม�ม�เครUVอง

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

ข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



ใบงานท�� 4เป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ามาอาจม�ขนาดใหญ�กว�าพUTนท�Vของเราให�ท9าการย�อเลเยอร�

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ดท�าย



ใบงานท�� 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นฐาน (ขนาดธง, ตาราง, ส�พUTนหลง) เพ: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นจร:ง


http://tavmjong.free.fr/INKSCAPE/MANUAL/html/AShortExampleEU.html


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อกพUTนหลงและเลUอกส�ใหม�ก�อน

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จ5ดตดของ Guide Lines คล:กลากขPTน 10 พ:กเซล ปรบส�ของดาวให�เปWนค�า RGB เท�ากบ (255, 204, 0) ตรวจสอบให�แน�ใจ Alpha (A) คUอ 255 และความทPบ Master 100%

After the first star has been drawn and the color adjusted


http://translate.googleusercontent.com/translate_c?hl=th&ie=UTF-8&sl=en&tl=th&u=http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Glossary.html&prev=_t&rurl=translate.google.co.th&twu=1&usg=ALkJrhh40oy1U12mv18CoxMO7b1sCPdjxA#alpha


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าหนด



ใบงานท�� 6สต:กเกอร�กบขอบพบ เข�ยนโดย 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งสองตามร�ป

ขTนตอนท�V 2

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


http://ryanler.wordpress.com/2007/05/23/inkscape-sticker-with-folded-edge-tutorial/


ขTนตอนท�V 31. เล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 > Difference5. การเปล�Vยนส�ของเส�นทางท�VเหลUอเปWนส�ด9า 6. เป�ด Stroke/Fill dialog และปรบค�าความโปร�งใสและเบลอ

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


0 syllabus

Documents