0 syllabus
TRANSCRIPT
โครงสร�างหลกส�ตรหน�วยการเร�ยนร��โครงสร�างหลกส�ตรหน�วยการเร�ยนร��
การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�สการออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส(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วด)
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 5
โครงสร(างรายว"ชาการออกแบบงานกราฟ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
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 6
ล9าดบท�V ชUVอหน�วยการเร�ยร�� มาตฐานและ
ตวช�Tวด สาระส9าคญ เวลา(ชVวโมง)
นT9าหนกคะแนน
เส�น Paths• การแก�ไขเส�น Path• การท9างานของ Layout• เรUVองของตวอกษร
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 7
แผนการจ�ดการเร-ยนร�(ท-. 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นการจดองค�ประกอบ โดยใช�หลกการและว:ธ�การต�างๆ ให�เ
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 8
ก:ดม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าเสนอ
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 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 ด�วยด:นสอส�ไม�
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 10
การว�ดและประเม"นผลการเร-ยนร�(
เป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อง
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 11
แผนการจ�ดการเร-ยนร�(ท-. 2กล5�มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� รายว:ชา การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส ชTน ม .3 ภาคเร�ยนท�V ปcการศPกษา ชUVอหน�วยการเร�ยนร�� GIMP กบงานออกแบบกราฟ�ก เวลา 17 . ช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/3 ใช*เทคโนโลย�สารสนเทศน�าเสนองานในร8ปแบบท��เหมาะสมกบล�กษณะงาน• การเลUอกซอฟต�แวร�ท�Vเหมาะสมกบลกษณะของงาน• การใช�ซอฟต�แวร�และอ5ปกรณ�ด:จ:ทลมาช�วยในการน9าเสนองาน
ง.3.1 ม.3/4 ใช*คอมพ�วเตอร"ช�วยสร*างช�-นงานจาก จ�นตนาการหร/องานท��ท�าในช�ว�ตประจ�าว�นตามหล�กการท�าโครงงานอย�างม�จ�ตส�าน4กและความร�บผ�ดชอบ
• การใช�คอมพ:วเตอร�ช�วยสร�างงานตาม หลกการท9าโครงงานโดยม�การอ�างอ:ง แหล�งข�อม�ล ใช�ทรพยากรอย�างค5�มค�า ไม�คดลอกผลงานผ��อUVน ใช�ค9าส5ภาพ และไม�สร�างความเส�ยหายต�อผ��อUVน
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 12
สาระส าค�ญความร�(ความเข(าใจคงทน
ก�อนท�Vจะท9าการตกแต�งภาพเพUVอการออกแบบกราฟ�ก นกเร�ยนต�องร��จกการท9างานของโปรแกรม GIMP ในส�วนต�างๆตTงแต� การเลUอกค5ณลกษณะของเครUVองคอมพ:วเตอร�ท�Vเหมาะสมในการต:ดตTงโปรแกรม GIMP และค9าสVงเบUTอนต�น เครUVองมUอทาส� เครUVองมUอเลUอกพUTนท�V การสร�างข�อความตกแต�งภาพ
ท�กษะ/กระบวนการการค:ด สงเกต และอธ:บายความหมายของโปรแกรม GIMP ใช�ในการตกแต�งภาพ
ค�ณล�กษณะนกเร�ยนใฝvเร�ยนร�� ม�ความซUVอสตย�ส5จร:ต ม�ว:นย และจ:ตสาธารณะ
สาระการเร-ยนร�(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
แนวการให(คะแนน
เกณฑ�การประเม:นระดบค5ณภาพ
4 3 2 1ใบงานท�V 3 ท9าได�ถ�กต�อง และม�
การใช�ร�ปทรงหลายร� ป แ บ บ ม� ก า ร ต ดส�วนตรงกลาง
ท9าได�ถ�กต�อง และม�การใช�ร�ปทรงหลายร�ปแบบไม�ม�การตดส�วนตรงกลาง
ท9าได�ถ�กต�อง และม�การใช�ร�ปทรงหลายร�ปแบบ
ท9าได�ถ�กต�อง และม�การใช�ร�ปทรงเด�ยว
ใบงานท�V 4 จดองค�ประกอบได�สมบ� รณ� เลU อกต วอกษรเหมาะสม ใช�ส�
จดองค�ประกอบได�สมบ� รณ� เลU อกต วอกษรไม�เหมาะสม
จดองค�ประกอบได�สมบ� รณ� เลU อกต วอกษรไม�เหมาะสม
จดองค�ประกอบไม�สมบ� รณ� เ ลU อกต วอกษรไม�เหมาะสม
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 13
เกณฑ�การประเม:นระดบค5ณภาพ
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
ก"จกรรมการเร-ยนร�(ก"จกรรมน าส�Aการเร-ยน
คร�ผ��สอนแสดง ภาพท�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าตามแนวค:ดของแต�ละคน
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 14
การว�ดและประเม"นผลการเร-ยนร�(
เปzาหมาย หลกฐาน ว:ธ�วด เครUVองมUอวดความร��
• ใช�ซอฟต�แวร�ในการท9างาน
อธ:บายความหมาย และค5ณลกษณะของโปรแกรม GIMP
การเข�ยนสะท�อนการเร�ยนร��
อตนย (เข�ยนบรรยาย)
• ใช�เทคโนโลย�สารสนเทศน9าเสนองานในร�ปแบบท�Vเหมาะสมกบลกษณะงาน
• ใช�คอมพ:วเตอร�ช�วยสร�างช:Tนงานจาก จ:นตนาการหรUองานท�Vท9าในช�ว:ตประจ9าวนตามหลกการท9าโครงงานอย�างม�จ:ตส9านPกและความรบผ:ดชอบ
อธ:บายและท9าการต:ดตTงโปรแกรม GIMP และท9าการตกแต�งภาพ
อธ:บายและท9าการออกแบบการจดวางภาพตามจ:นตนาการ
การปฏ:บต:สะท�อนการเร�ยนร��
การปฏ:บต:สะท�อนการเร�ยนร��
อตนย (ตกแต�งภาพ)
อตนย (ตกแต�งภาพ)
ค5ณลกษณะ• ใฝvเร�ยนร�� จดท9าบนทPกการค�นคว�า การเข�ยนสะท�อนการ
เร�ยนร��บนทPกต�อเนUVอง
• ซUVอสตย�ส5จร:ต จดท9าบนทPกการปฏ:บต:ท�Vได�รบมอบหมาย
การเข�ยนสะท�อนการเร�ยนร��
บนทPกต�อเนUVอง
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 15
แผนการจ�ดการเร-ยนร�(ท-. 3กล5�มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� รายว:ชา การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส ชTน ม .3 ภาคเร�ยนท�V ปcการศPกษา ชUVอหน�วยการเร�ยนร�� Inkscape กบงานออกแบบกราฟ�ก เวลา 16 . ช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/3 ใช*เทคโนโลย�สารสนเทศน�าเสนองานในร8ปแบบท��เหมาะสมกบล�กษณะงาน• การเลUอกซอฟต�แวร�ท�Vเหมาะสมกบลกษณะของงาน• การใช�ซอฟต�แวร�และอ5ปกรณ�ด:จ:ทลมาช�วยในการน9าเสนองาน
ง.3.1 ม.3/4 ใช*คอมพ�วเตอร"ช�วยสร*างช�-นงานจาก จ�นตนาการหร/องานท��ท�าในช�ว�ตประจ�าว�นตามหล�กการท�าโครงงานอย�างม�จ�ตส�าน4กและความร�บผ�ดชอบ
• การใช�คอมพ:วเตอร�ช�วยสร�างงานตาม หลกการท9าโครงงานโดยม�การอ�างอ:ง แหล�งข�อม�ล ใช�ทรพยากรอย�างค5�มค�า ไม�คดลอกผลงานผ��อUVน ใช�ค9าส5ภาพ และไม�สร�างความเส�ยหายต�อผ��อUVน
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 16
สาระส าค�ญความร�(ความเข(าใจคงทน
ในส�วนการจดวางองค�ประกอบของงานออกแบบกราฟ�กนTน ส:Vงท�Vนกเร�ยนต�องร��ว�าโปรแกรมโอเพนซอร�ส Inkscape ม�ความสามารถในการจดการเลเยอร� การวาดเส�น การวาดร�ปทรงต�างๆ การก9าหนดส�ให�กบร�ปร�างร�ปทรง และการสร�างตวอกษร การจดการกบตวอกษรในร�ปแบบต�างๆ
ท�กษะ/กระบวนการการค:ด สงเกต และอธ:บายความหมาย ความสามารถของโปรแกรมโอเพนซอร�ส Inkscape
ในการสร�างร�ปร�างร�ปทรง เส�น Path การจดการตวอกษร
ค�ณล�กษณะนกเร�ยนใฝvเร�ยนร�� ม�ความซUVอสตย�ส5จร:ต ม�ว:นย และจ:ตสาธารณะ
สาระการเร-ยนร�(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
แนวการให(คะแนน
เกณฑ�การประเม:นระดบค5ณภาพ
4 3 2 1ใบงานท�V 5 ก9าหนดขนาดได�ถ�ก
ต�อง ม�ร�ปดาวครบ และต9าแหน�งถ�กต�อง
ก9าหนดขนาดได�ถ�กต�อง ม�ร�ปดาวครบ แต�ต9 าแหน� ง ไม�ถ� กต�อง
ก9าหนดขนาดได�ถ�กต�อง ม�ร�ปดาวไม�ครบ แต�ต9 าแหน� ง ไม�ถ� กต�อง
ก9าหนดขนาดไม�ถ�กต�อง ม�ร�ปดาวไม�ครบ แต�ต9 าแหน� ง ไม�ถ� กต�อง
ใบงานท�V 6 ร� ป ท ร ง ถ� ก ต� อ ง ม� ร� ป ท ร ง ถ� ก ต� อ ง ม� ร� ป ท ร ง ถ� ก ต� อ ง ม� ร�ปทรงถ�กต�องไม�ม�
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 17
เกณฑ�การประเม:นระดบค5ณภาพ
4 3 2 1ข� อความบางส� วนซ�อนและม�แสงเงาครบ
ข� อความบางส� วนซ�อนและไม�ม�แสงเงา
ข�อความไม�ซ�อนและไม�ม�แสงเงา
ข�อความไม�ซ�อนและไม�ม�แสงเงา
ส�.อ อ�ปกรณ4 และแหลAงการเร-ยนร�(1. เครUVองคอมพ:วเตอร�2. โปรแกรม Inkscape3. ระบบอ:นเตอร�เนjต4. หนงสUอ “ การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร�ส” จดท9าโดย SIPA
ก"จกรรมการเร-ยนร�(ก"จกรรมน าส�Aการเร-ยน
คร�ผ��สอนแสดง ภาพท�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าตามแนวค:ดของแต�ละคน
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 18
การว�ดและประเม"นผลการเร-ยนร�(
เปzาหมาย หลกฐาน ว:ธ�วด เครUVองมUอวดความร��
• ใช�ซอฟต�แวร�ในการท9างาน
อธ:บายความหมาย และค5ณลกษณะของโปรแกรม Inkscape
การเข�ยนสะท�อนการเร�ยนร��
อตนย (เข�ยนบรรยาย)
• ใช�เทคโนโลย�สารสนเทศน9าเสนองานในร�ปแบบท�Vเหมาะสมกบลกษณะงาน
• ใช�คอมพ:วเตอร�ช�วยสร�างช:Tนงานจาก จ:นตนาการหรUองานท�Vท9าในช�ว:ตประจ9าวนตามหลกการท9าโครงงานอย�างม�จ:ตส9านPกและความรบผ:ดชอบ
อธ:บายและท9าการต:ดตTงโปรแกรม Inkscape และท9าการตกแต�งภาพ
อธ:บายและท9าการออกแบบปzายสต:กเกอร�ตามจ:นตนาการ
การปฏ:บต:สะท�อนการเร�ยนร��
การปฏ:บต:สะท�อนการเร�ยนร��
อตนย (ตกแต�งภาพ)
อตนย (ตกแต�งภาพ)
ค5ณลกษณะ• ใฝvเร�ยนร�� จดท9าบนทPกการค�นคว�า การเข�ยนสะท�อนการ
เร�ยนร��บนทPกต�อเนUVอง
• ซUVอสตย�ส5จร:ต จดท9าบนทPกการปฏ:บต:ท�Vได�รบมอบหมาย
การเข�ยนสะท�อนการเร�ยนร��
บนทPกต�อเนUVอง
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 19
ภาคผนวก
ใบงานท�� 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)
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 20
ขTนตอนท�V 2 สร�างขอบเขตหรUอร�ปร�างตามต�องการ
ขTนตอนท�V 3 ให�เลUอกลกษณะหวแปรง และส�ของ Foreground
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 21
ขTนตอนท�V 4 เร�ยกใช�ค9าสVง Stork Selection จาก <Menu Bar> Edit -> Stroke Selection.
ขTนตอนท�V 5 เลUอกร�ปแบบการต�เส�น และปรบค�าต�างๆ เสรjจแล�วคล:กเลUอก Stroke
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 22
ใบงานท�� 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
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 23
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อเลเยอร�ได�
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 24
8. ตวอย�างการเลUอกแบบต�างๆ
9. ต�อไปเปWนตวอย�างการไล�ค�าส�ให�พUTนหลงด�วยค9าสVง Gradient tool เร:Vมจากคล:กเลUอกเลเยอร�ของพUTนหลง แล�วเลUอกค9าสVง Gradient tool ปรบค�าต�าง
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 25
10. การเพ:Vมข�อความ เลUอกค9าสVง Text Tool เลUอกแบบตวอกษร ส� ขนาด
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 26
11. คล:กยงต9าแหน�งท�Vต�องการว�างข�อความ จะม�หน�าต�างให�กรอกข�อความ และสามารถปรบค�าตวอกษรได�
12. การวางภาพสามารถปรบความเข�มของภาพได�จากค�า Opacity ของเลเยอร�
13. ในการแต�งภาพสามารถเลUอกใช�ค9าสVง Filter เพUVอท9าให�ภาพด�แปลกออกไปได� ท9าได�โดยคล:กเลUอกเลเยอร�ท�Vต�องการ แล�วเลUอกค9าสVง Filter เลUอกร�ปแบบท�Vต�องการ ม�ตวอย�างค9าสVงดงร�ป
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 27
14. ส5ดท�ายท9าการบนทPกไฟล� และตวอย�างภาพส5ดท�าย
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 28
ใบงานท�� 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นจร:ง
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 29
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
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 30
ใน 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
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 31
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าหนด
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 32
ใบงานท�� 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)
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 33
ข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ดท�าย
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส
ส�าน�กงานส�งเสร�มอ�ตสาหกรรมซอฟต"แวร"แห�งชาต� (องค"การมหาชน) 34
กล��มสาระการเร�ยนร�� การงานอาช�พและเทคโนโลย� การออกแบบงานกราฟ�กด�วยโปรแกรมโอเพนซอร ส