Contenu connexe Similaire à กราฟิกเพื่อการศึกษา Similaire à กราฟิกเพื่อการศึกษา (20) Plus de Jiraprapa Suwannajak Plus de Jiraprapa Suwannajak (20) กราฟิกเพื่อการศึกษา
2. กราฟกเพื่อการศึกษา 1
งานกราฟกเพื่อการศึกษา
ประเภทของภาพกราฟก
ภาพแบบ Vector
ภาพแบบ Vector เปนภาพที่สรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสีของ
เสนนั้นๆ ซึ่งสรางจากการคํานวณทางคณิตศาสตร เมื่อมีการขยายภาพภาพจะไมสูญเสียความละเอียด ยกตัวอยาง
เชน ภาพ Clipart ที่มีใหใชของไมโครซอฟทออฟฟศ
โปรแกรมที่ใชสรางภาพกราฟกแบบเวคเตอร เชน Adobe illustrator, CorelDraw, Macromedia
Freehand เปนตน
ตัวอยางภาพแบบ Vector
ภาพแบบ Bitmap
ภาพแบบ Bitmap หรืออาจจะเรียกวาภาพแบบราสเตอร (Raster) เปนภาพที่เกิดจากจุดสีที่เรียกวา pixels
ซึ่งประกอบกันเปนรูปรางบนพื้นที่ที่มีลักษณะเปนตาราง(กริด) แตละพิกเซลจะมีคาของตําแหนงและคาสีของตัวเอง
ภาพหนึ่งภาพจะประกอบดวยพิกเซลหลายๆ พิกเซลผสมกัน ทําใหเมื่อมีการขยายภาพจะทําใหภาพแตกเปนกรอบ
สี่เหลี่ยมเล็กๆ หลายๆ จุด
ตัวอยางภาพแบบ Bitmap
รายวิชา 059700 Educational Technology
3. กราฟกเพื่อการศึกษา 2
รูปแบบของไฟลภาพ
GIF
เปนรูปแบบที่มีขอจํากัดของจํานวนสีซึ่งสามารถใชไดสูงสุดเพียง 256 สี (ขนาด 8 บิต) จึงเหมาะสําหรับ
ภาพโลโก ภาพการตูน ภาพลายเสน ซึ่งมีลกษณะเปนสีทึบ ไมมีการไลระดับ และมีขอบที่คมชัด
ั
JPEG
ไฟลชนิดนี้สามารถใชสีไดถง 16.7 ลานสี (24 บิต) เหมาะสําหรับเก็บภาพถาย หรือภาพกราฟกที่ใชสี
ึ
จํานวนมาก และมีการไลสีอยางตอเนื่อง
PNG
รูปแบบการจัดเก็บภาพแบบ Portable Network Graphics ซึ่งเปนรูปแบบลาสุดในการนําเสนอภาพผาน
เว็บ เนื่องจากสามารถแสดงผลไดในระบบสีเต็มพิกัด (True Color), มีขนาดไฟลเล็ก และควบคุมคุณภาพไดตามที่
ตองการ มีการกําหนดใหพื้นภาพเปนพื้นโปรงใสได (Transparent)
TIFF
รูปแบบของการจัดเก็บภาพแบบ Tagged-Image File Format ซึ่งเปนรูปแบบที่ใชเก็บภาพพรอม
รายละเอียดตางๆ เชน เลเยอร (Layer), โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนขอมูลประกอบอื่นๆ
ตามตนฉบับเดิมของภาพ จึงเปนรูปแบบที่เหมาะสมตอการเก็บบันทึกภาพตนฉบับ และภาพสําหรับใชประกอบการ
สรางสื่อสิ่งพิมพ
ตัวอักษร
ชนิดของตัวอักษร
1. Serif หรือตัวอักษรโรมัน เปนตัวอักษรมีหว จึงมักจะใชกับงานที่เปนทางการ หรือเปนตัวหัวเรื่องมากกวาจะ
ั
เปนตัวเนื้อหาใหอาน เชน Time New Roman, MS Serif, PSL-Irene,
PSL-Chamnarn
รายวิชา 059700 Educational Technology
4. กราฟกเพื่อการศึกษา 3
2. San Serif เปนตัวอักษรไมมีหัว ไดรับความนิยมในการออกแบบเปนอยางมากเพราะดูเรียบงาย ทันสมัย
มักจะใชวางเปนเนื้อหาใหอานเพราะมีรูปรางที่อานงาย เชน DS Single, Impact
3. Script หรือตัวอักษรที่เลียนแบบลายมือ ตัวเขียน ตัวอักษรชนิดนี้ใหความรูสึกไมเปนทางการ และไมนิยม
ใชในการออกแบบมากนัก เพราะอานลําบากเมื่อมีจํานวนมาก เชน DS Freehand
คําแนะนํา การใชขนาดและรูปแบบของตัวอักษรในการนําเสนอ
ตัวอักษรไทย
• ฟอนตที่อานไดงาย และมีขนาดที่เหมาะสม
• ควรใช Font 36 เปนอยางต่ํา
ตัวอักษรภาษาอังกฤษ
• ตัวอักษรเปนแบบตัวพิมพเล็ก ยกเวนตัวอักษรนํา
• ไมใชรูปแบบตัวพิมพใหญทั้งหมด
รายวิชา 059700 Educational Technology
5. กราฟกเพื่อการศึกษา 4
กราฟกกับงานดานอื่นๆ
งานออกแบบสื่อสิ่งพิมพ (Publishing)
การออกแบบสื่อสิ่งพิมพน้นสิ่งที่ตองคํานึงถึงคือความละเอียด (Resolution) งานสิ่งพิมพโดยทั่วไปแลวจะ
ั
อยูประมาณ 150 dpi-600 dpi แตสวนใหญจะกําหนดที่ 300 dpi เปนมาตรฐาน โปรแกรมที่นิยมใชในการออกแบบ
สื่อสิ่งพิมพคือ Adobe Pagemaker, Adobe InDesign
งานออกแบบเว็บไซต (Web Design)
การออกแบบหนาตาของเว็บไซต (Website Interface Design) เปนสวนหนึ่งของการใชงานกราฟกที่จะ
ชวยใหเว็บไซตนาสนใจ โปรแกรมที่นิยมใชในการออกแบบเว็บไซต เชน Macromedia Dreamweaver, Microsoft
FrontPage
รายวิชา 059700 Educational Technology
6. กราฟกเพื่อการศึกษา 5
งานออกแบบมัลติมเดีย (Multimedia Design)
ี
งานออกแบบมัลติมีเดียเปนงานที่ประกอบจากสื่อหลายสื่อ ทั้งรูปภาพ ภาพเคลื่อนไหว เสียงเพลง เสียง
ประกอบ หรือการโตตอบกับผูใช(Interactive) โปรแกรมที่นิยมใชในการออกแบบงานมัลติมีเดีย เชน Macromedia
Director, Macromedia Flash, 3DMAX
งานภาพยนตร (Movie)
งานภาพยนตรมีพื้นฐานจากงานออกแบบงานกราฟกเหมือนกัน เพราะเปนงานที่เกี่ยวกับการจัดวางภาพ
ใหสวยงาม และสื่อความหมายใหตรงกับเรื่องราวที่แตงขึ้น โปรแกรมที่นิยมใชในงานภาพยนตร เชน Adobe
Premiere, Adobe After effects
รายวิชา 059700 Educational Technology
7. กราฟกเพื่อการศึกษา 6
การสรางพื้นหลังสําหรับโปรแกรม Microsoft PowerPoint
Microsoft PowerPoint เปนโปรแกรมที่ชวยในการสรางสรรคงานที่ใชในการนําเสนอผลงาน
(Presentation) เชน การทําสไลด, การจัดทําแผนใส, การจัดพิมพเอกสารประกอบการบรรยาย เปนตน
โดยมีรูปแบบสําเร็จใหเราเลือกใชไดมากมายตามลักษณะที่จะนําเสนออีกทั้งการปรับแตงก็ทําไดโดยงาย
และยังสามารถสรางชิ้นงานเพื่อไปแสดงในอินเตอรเน็ตไดอีกดวย
สําหรับเอกสารประกอบการสอนรายวิชา 059700 ฉบับนี้จัดทําขึ้นเพื่อนําเสนอเนื้อหาในสวนของ
การสรางพื้นหลังใหกับโปรแกรม Microsoft PowerPoint ดวยตัวของผูเรียนเองโดยใชโปรแกรม Adobe
Photoshop ซึ่งผูเรียนสามารถออกแบบพื้นหลังใหเหมาะสมกับงานที่เราตองการนําเสนอ ตามหลักการ
ออกแบบบนจอคอมพิวเตอร
หลักการออกแบบบนจอคอมพิวเตอร (ถนอมพร เลาหจรัสแสง,2549)
คุณลักษณะของสื่อนําเสนอทางคอมพิวเตอร
• สามารถแสดงรายละเอียดของเนื้อหาลักษณะมัลติมีเดีย
• สามารถทําการผลิตไดดวยตนเอง ไดงานที่ดูดี ดวยวิธีการที่คอนขางงาย
• การนําเสนอเนื้อหามีความยืดหยุน
• สามารถจัดเตรียมลําดับเนื้อหาและผลิตไวลวงหนาชวยทําใหการเสนอเนื้อหาไดถูกตอง
ตามลําดับ และชวยประหยัดเวลาในการบรรยาย
• สามารถนําไปใชรวมกับสื่อประเภทอื่นได เชน อธิบายรวมกับเอกสารสิ่งพิมพที่แจกใหผูฟง
• การแกไข อัพเดต ทําไดงายและสะดวก
การออกแบบบนจอคอมพิวเตอร
ก. การรวบรวมองคประกอบ
• คํานึงถึงความคมชัดของสิ่งที่นําเสนอบนจอภาพ
• มีการนําทางที่ดี การใชปุม และ ลิงค
• เรียบเรียงขอความเนื้อหาใหพอดีกับเนื้อที่บนจอภาพ
รายวิชา 059700 Educational Technology
8. กราฟกเพื่อการศึกษา 7
ข. การจัดองคประกอบ
• จัดวางขอความ ภาพ ปุมนําทาง (ถามี)ในตําแหนงที่เหมาะสมเพื่อใหผูเรียนสามารถควบคุมการ
เรียนไดสะดวก
• ปรับแนวองคประกอบตางๆ และควรใหมีความชิดใกลขององคประกอบที่เกี่ยวของกัน
ค. การเลือกพื้นหลังและรูปแบบ
• ใชสีออนเปนพื้นหลัง เพื่อไมรบกวนสายตาในการอานขอความ เชน การเลือกใช Template จาก
โปรแกรม PowerPoint ควรเลือกใชตนแบบที่เรียบงายเพื่อไมดูรกเกินไป เมื่อใสภาพและเนื้อหา
บทเรียนลงไป
• ถาตองการออกแบบเองโดยไมใชตนแบบ ใหแบงเนื้อหาบนจอภาพในการจัดวางขอความและ
ภาพในแตละหนา และตองใชรูปแบบเดียวกันเพื่อความคงตัวของการนําเสนอตลอดบทเรียน
ง. การตรวจสอบและปรับปรุง
• ตรวจสอบโดยการลองใชสิ่งที่ออกแบบนั้น ทั้งนี้เนื่องจากทุกสิ่งตองมีความสัมพันธเกี่ยวของกันซึ่ง
เปนสวนสําคัญของการออกแบบ
• สังเกตดูผูเรียนวาสามารถเรียนจากบทเรียนนั้นไดโดยงายและสะดวกหรือไม ควรมีจุดใดที่ควร
ปรับปรุง
คําแนะนําอื่นๆ
ก. การใชขนาดและรูปแบบของตัวอักษรในการนําเสนอ
ตัวอักษรไทย
• ฟอนตท่อานไดงาย และมีขนาดที่เหมาะสม
ี
• ควรใช Font 36 เปนอยางต่ํา
ตัวอักษรภาษาอังกฤษ
• ตัวอักษรเปนแบบตัวพิมพเล็ก ยกเวนตัวอักษรนํา
• ไมใชรูปแบบตัวพิมพใหญทั้งหมด
รายวิชา 059700 Educational Technology
9. กราฟกเพื่อการศึกษา 8
ข. ควรกําหนดหัวเรื่อง (Title) ไวทุกครั้งเพื่อชวยใหผูฟงการบรรยายเขาใจและทราบวาเนื้อหาที่จะเสนอนั้น
เปนเรื่องเกี่ยวกับอะไร พรอมที่จะติดตามเนื้อหาตอไป
ค. ไมสมควรใสขอความยาวๆ (ควรจะมีประมาณ 6 บรรทัดตอ 1 จอ)
ง. ควรใชภาพที่เหมาะสมกับกลุมเปาหมาย
แหลงอางอิงขอมูล
กิดานันท มลิทอง. (2548). เทคโนโลยีและการสื่อสารเพื่อการศึกษา. กรุงเทพฯ : โรงพิมพอรุณการพิมพ.
ถนอมพร เลาหจรัสแสง. (ม.ป.ป.). เอกสารประกอบการสอนรายวิชา 059758 คอมพิวเตอรกับการศึกษา.
สาขาวิชาเทคโนโลยีทางการศึกษา คณะศึกษาศาสตร มหาวิทยาลัยเชียงใหม.
วงศประชา จันทรสมวงศและมานิตา เจริญปรุ. (2545). คัมภีร Photoshop 7&ImageReady 7. กรุงเทพฯ : บริษัท
โปรวิชั่น จํากัด.
โสรชัย นันทวัชรวิบูลย. (2537). สูเสนทางกราฟกดีไซเนอร. กรุงเทพฯ : บริษัท พิมพดี จํากัด.
รายวิชา 059700 Educational Technology
10. กราฟกเพื่อการศึกษา 9
โปรแกรม Photoshop CS2
Photoshop เปนโปรแกรมสําหรับสรางและตกแตงภาพ จัดการกับไฟลภาพที่ใชในงานประเภทตางๆ ทั้งรูป
ที่จะนําไปผานกระบวนการพิมพ และรูปที่นําไปใชในเว็บเพจหรือสงผานสื่ออิเล็กทรอนิกส สามารถแกไข และสราง
เอฟเฟคตพิเศษตางๆ มีเครื่องมือที่มีประสิทธิภาพและสามารถบันทึกขั้นตอนที่ตองทําซ้ําๆ ไวเรียกใชภายหลังได
ตลอดจนมีปลั๊กอินที่ชวยใหการทํางานที่ซับซอนสําเร็จลงไดอยางรวดเร็ว
Photoshop เปนโปรแกรมของบริษท Adobe ซึ่งเปนผูพัฒนาซอฟแวรดานกราฟกและอุตสาหกรรมการ
ั
พิมพ ตัวอยางของงานประเภทตางๆ ที่สามารถใชโปรแกรม Photoshop ชวยจัดการได เชน
• แกไขภาพถายที่บกพรองหรือมีตําหนิ เชน ปรับสีท่เพี้ยน ปรับแสงเงา
ี
• ตกแตงภาพ เชน ตัดสวนที่ไมตองการออกไป ปรับภาพใหเบลอหรือคมชัด
• ตัดตอภาพ เชน ยายตัวคนจากภาพถายบนทะเลไปยืนอยูบนภูเขา
• สรางภาพกราฟกซึ่งผสมผสานระหวางภาพถาย ขอความและภาพวัตถุหรือเอฟเฟคตพิเศษที่
สรางขึ้นใน Photoshop เพื่อใขในงานผลิตสื่อโฆษณา ทําปกหนังสือหรือนิตยสาร หรือใชตกแตง
เว็บเพจ
รายวิชา 059700 Educational Technology
11. กราฟกเพื่อการศึกษา 10
สวนประกอบหนาจอของ Photoshop CS2
Title bar Menu bar
Options bar
Work Area
Toolbox Palette
Status bar
Title bar (ไตเติลบาร) คือ เปนสวนที่แสดงชื่อโปรแกรม
Menu bar (เมนูบาร) คือ เปนเมนูที่เก็บคําสั่งตางๆ ของโปรแกรม
Options bar (ออปชั่นบาร) คือ สวนกําหนดคุณสมบัติของเครื่องมือที่เลือกจาก Toolbox
Toolbox (กลองเครื่องมือ) คือ กลองที่เก็บเครื่องมือตางๆ ที่ใชในการสรางชิ้นงานหรือตกแตงภาพ
Status bar (แถบสถานะ) คือ สวนที่แสดงรายละเอียดตางๆ ของชิ้นงาน เชน ขนาดของไฟล เปนตน
Work Area (พื้นที่การทํางาน) คือ พื้นที่สําหรับใชงานตามขนาดที่ผูใชกําหนด เชน 800*600 พิกเซล เปนตน
Palette (พื้นที่การทํางาน) คือ เปนหนาตางที่เก็บคําสั่งหรือออปชั่นที่ใชควบคุมการทํางาน เชน กําหนดสี,
การใชงานเลเยอร เปนตน
รายวิชา 059700 Educational Technology
12. กราฟกเพื่อการศึกษา 11
Step 1 การสราง Title จากโปรแกรม Adobe Photoshop
1.เปดโปรแกรม Photoshop โดยไปที่ Start Programs Adobe Photoshop หลังจากเปดโปรแกรม
แลวใหสรางไฟลงานชิ้นใหมโดยไปที่ เมนู File New
2.จะปรากฏหนาตาง ใหกําหนดชื่อและขนาดของไฟล ดังรูป
3.เลือกสี Background จากเครื่องมือ Swatch ดังรูป
รายวิชา 059700 Educational Technology
13. กราฟกเพื่อการศึกษา 12
4.เทสีโดยใชเครื่องมือ Gradient Tool แลวลากเมาสจากดานบนลงดานลาง
5.จะไดสี Background ดังรูป
รายวิชา 059700 Educational Technology
14. กราฟกเพื่อการศึกษา 13
6.เปดไฟลรูปภาพโดยคลิกที่ File Open แลวเลือกรูปที่ตองการ
7.เลือกรูปภาพโดยใชเครื่องมือ Magic Wan Tool คลิกที่รูปภาพหลังจากนั้นคลิกเมนู Select Inverse
8.Copyภาพโดยคลิกเมนู Edit Copy แลวเปดไฟลเดิมที่ชื่อวา head ขึ้นมา นําภาพที่ Copy มาวางโดย
คลิกที่ Edit Paste
9.กําหนดขนาดของภาพโดยใชเครื่องมือ Free Transform เลือกเมนู Edit Free Transform หลังจากนั้น
ลดความสวางของภาพ โดยเลือกที่หนาตาง Layers
(Layer Style = Overlay และ Opacity = 60 %)
รายวิชา 059700 Educational Technology
15. กราฟกเพื่อการศึกษา 14
10.สรางพื้นหลังสําหรับใสตัวหนังสือ โดยใชเครื่องมือ Rectangular Marquee Tool
11.เทสีโดยใชเครื่องมือ Paint Bucket Tool
12.ปรับความสวางของสีขาว โดยลด Opacity = 70 % ดังรูป
รายวิชา 059700 Educational Technology
16. กราฟกเพื่อการศึกษา 15
13.พิมพตัวหนังสือโดยใช เครื่องมือ Horizontal Type Tool
14.เพิ่มความคมชัดและลูกเลนใหกับตัวหนังสือ โดยเลือกที่ Add a layer style Blending Options…
รายวิชา 059700 Educational Technology
17. กราฟกเพื่อการศึกษา 16
15.หลังจากนั้นจะปรากฏหนาตาง Layer Style เลือกดังรูป
16.ตกแตง Background เพิ่มเติม เชน เพิ่มรูปภาพ CD หรือ ลายเสน เปนตน
รายวิชา 059700 Educational Technology
18. กราฟกเพื่อการศึกษา 17
17.Save ไฟลชิ้นงาน โดยเลือก File Save As โดยเลือก
• Save ชนิดของไฟลแบบ PSD เพื่อนําไฟลกลับมาแกไขไดอีก
• Save ชนิดของไฟลแบบ JPEG เพื่อนําไฟลไปใชงานจริง
รายวิชา 059700 Educational Technology
19. กราฟกเพื่อการศึกษา 18
Step 2 การสราง Header จากโปรแกรม Adobe Photoshop
1.เปดโปรแกรม Photoshop โดยไปที่ Start Programs Adobe Photoshop หลังจากเปดโปรแกรม
แลวใหสรางไฟลงานชิ้นใหมโดยไปที่ เมนู File New
2.จะปรากฏหนาตาง ใหกําหนดชื่อและขนาดของไฟล ดังรูป
3.กําหนดขนาดของ Header = 80 pixel หลังจากนั้นสราง Layer ใหมแลวตั้งชื่อ head ดังรูป
รายวิชา 059700 Educational Technology
20. กราฟกเพื่อการศึกษา 19
4.สราง Selection โดยใชเครื่องมือ Rectangular Marquee Tool
5.เลือกสีจากหนาตาง Swatches
6.เทสีลงใน Layer ที่ช่อ head โดยใชเครื่องมือ Gradient Tool ดังรูป
ื
รายวิชา 059700 Educational Technology
21. กราฟกเพื่อการศึกษา 20
7.เทสีขาวโดยคลิกเครื่องมือ Layer Mask ดังรูป
8.เลือกสีจากเครื่องมือ Gradient Tool แลวทําการเทสีโดยลากจากขวามาซาย
9.พิมพตัวหนังสือโดยใชเครื่องมือ Horizontal Type Tool แลวพิมพ >Multimedia
รายวิชา 059700 Educational Technology
22. กราฟกเพื่อการศึกษา 21
10.เปดไฟลรูปภาพโดยคลิกที่ File Open แลวเลือกรูปที่ตองการ
11.เลือกรูปภาพโดยใชเครื่องมือ Magic Wan Tool คลิกที่รูปภาพหลังจากนั้นคลิกเมนู Select Inverse
12.Copyภาพโดยคลิกเมนู Edit Copy แลวเปดไฟลเดิมที่ชื่อวา head ขึ้นมา นําภาพที่ Copy มาวางโดย
คลิกที่ Edit Paste
13.กําหนดขนาดของภาพโดยใชเครื่องมือ Free Transform เลือกเมนู Edit Free Transform
รายวิชา 059700 Educational Technology
23. กราฟกเพื่อการศึกษา 22
14.วาดเสนตรงโดยใชเครื่องมือ Single Row Marquee Tool แลวเทสีใหกับเสนโดยใชเครื่องมือ
Edit Stroke กําหนดขนาดและสีดงรูป ั
15.ลดความสวางของเสนตรงโดยลดคา Opaity ดังรูป
รายวิชา 059700 Educational Technology
24. กราฟกเพื่อการศึกษา 23
16.Save ไฟลชิ้นงาน โดยเลือก File Save As โดยเลือก
• Save ชนิดของไฟลแบบ PSD เพื่อนําไฟลกลับมาแกไขไดอีก
• Save ชนิดของไฟลแบบ JPEG เพื่อนําไฟลไปใชงานจริง
รายวิชา 059700 Educational Technology
25. กราฟกเพื่อการศึกษา 24
Step 3 การนําภาพพื้นหลังมาใสในโปรแกรม PowerPoint
1.เปดโปรแกรม Microsoft PowerPoint โดยไปที่ Start Programs Microsoft PowerPoint
2.เลือกเมนู รูปแบบ พื้นหลัง
รายวิชา 059700 Educational Technology
26. กราฟกเพื่อการศึกษา 25
3.จะปรากฏหนาตางพื้นหลัง เลือกเติมลักษณะพิเศษดังรูป
4.จะปรากฏหนาตางเติมลักษณะพิเศษ คลิก เลือกรูปภาพ แลวจะปรากฏหนาตางใหเลือกรูปภาพที่
ตองการจะนํามาทําเปนภาพพื้นหลัง
รายวิชา 059700 Educational Technology
27. กราฟกเพื่อการศึกษา 26
5.หลังจากนั้นคลิกตกลง แลวคลิกเลือกนําไปใช ดังรูป
6.จะไดภาพพื้นหลังดังรูป
รายวิชา 059700 Educational Technology