SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
กราฟิกเพื่อการศึกษา
กราฟกเพื่อการศึกษา                                                                                      1



                                  งานกราฟกเพื่อการศึกษา
ประเภทของภาพกราฟก
ภาพแบบ Vector
          ภาพแบบ Vector เปนภาพที่สรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสีของ
เสนนั้นๆ ซึ่งสรางจากการคํานวณทางคณิตศาสตร เมื่อมีการขยายภาพภาพจะไมสูญเสียความละเอียด ยกตัวอยาง
เชน ภาพ Clipart ที่มีใหใชของไมโครซอฟทออฟฟศ
          โปรแกรมที่ใชสรางภาพกราฟกแบบเวคเตอร เชน Adobe illustrator, CorelDraw, Macromedia
Freehand เปนตน
          ตัวอยางภาพแบบ Vector




ภาพแบบ Bitmap
           ภาพแบบ Bitmap หรืออาจจะเรียกวาภาพแบบราสเตอร (Raster) เปนภาพที่เกิดจากจุดสีที่เรียกวา pixels
ซึ่งประกอบกันเปนรูปรางบนพื้นที่ที่มีลักษณะเปนตาราง(กริด) แตละพิกเซลจะมีคาของตําแหนงและคาสีของตัวเอง
ภาพหนึ่งภาพจะประกอบดวยพิกเซลหลายๆ พิกเซลผสมกัน ทําใหเมื่อมีการขยายภาพจะทําใหภาพแตกเปนกรอบ
สี่เหลี่ยมเล็กๆ หลายๆ จุด
           ตัวอยางภาพแบบ Bitmap




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                          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
กราฟกเพื่อการศึกษา                                                                                     3



    2. San Serif เปนตัวอักษรไมมีหัว ไดรับความนิยมในการออกแบบเปนอยางมากเพราะดูเรียบงาย ทันสมัย
       มักจะใชวางเปนเนื้อหาใหอานเพราะมีรูปรางที่อานงาย เชน DS Single, Impact




    3. Script หรือตัวอักษรที่เลียนแบบลายมือ ตัวเขียน ตัวอักษรชนิดนี้ใหความรูสึกไมเปนทางการ และไมนิยม
       ใชในการออกแบบมากนัก เพราะอานลําบากเมื่อมีจํานวนมาก เชน DS Freehand




คําแนะนํา การใชขนาดและรูปแบบของตัวอักษรในการนําเสนอ
        ตัวอักษรไทย
            • ฟอนตที่อานไดงาย และมีขนาดที่เหมาะสม
            • ควรใช Font 36 เปนอยางต่ํา

        ตัวอักษรภาษาอังกฤษ
            • ตัวอักษรเปนแบบตัวพิมพเล็ก ยกเวนตัวอักษรนํา
            • ไมใชรูปแบบตัวพิมพใหญทั้งหมด




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                           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
กราฟกเพื่อการศึกษา                                                                                     5



        งานออกแบบมัลติมเดีย (Multimedia Design)
                       ี
         งานออกแบบมัลติมีเดียเปนงานที่ประกอบจากสื่อหลายสื่อ ทั้งรูปภาพ ภาพเคลื่อนไหว เสียงเพลง เสียง
ประกอบ หรือการโตตอบกับผูใช(Interactive) โปรแกรมที่นิยมใชในการออกแบบงานมัลติมีเดีย เชน Macromedia
Director, Macromedia Flash, 3DMAX




        งานภาพยนตร (Movie)
        งานภาพยนตรมีพื้นฐานจากงานออกแบบงานกราฟกเหมือนกัน เพราะเปนงานที่เกี่ยวกับการจัดวางภาพ
ใหสวยงาม และสื่อความหมายใหตรงกับเรื่องราวที่แตงขึ้น โปรแกรมที่นิยมใชในงานภาพยนตร เชน Adobe
Premiere, Adobe After effects




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                       6



การสรางพื้นหลังสําหรับโปรแกรม Microsoft PowerPoint
                 Microsoft PowerPoint เปนโปรแกรมที่ชวยในการสรางสรรคงานที่ใชในการนําเสนอผลงาน
        (Presentation) เชน การทําสไลด, การจัดทําแผนใส, การจัดพิมพเอกสารประกอบการบรรยาย เปนตน
        โดยมีรูปแบบสําเร็จใหเราเลือกใชไดมากมายตามลักษณะที่จะนําเสนออีกทั้งการปรับแตงก็ทําไดโดยงาย
        และยังสามารถสรางชิ้นงานเพื่อไปแสดงในอินเตอรเน็ตไดอีกดวย
                สําหรับเอกสารประกอบการสอนรายวิชา 059700 ฉบับนี้จัดทําขึ้นเพื่อนําเสนอเนื้อหาในสวนของ
        การสรางพื้นหลังใหกับโปรแกรม Microsoft PowerPoint ดวยตัวของผูเรียนเองโดยใชโปรแกรม Adobe
        Photoshop ซึ่งผูเรียนสามารถออกแบบพื้นหลังใหเหมาะสมกับงานที่เราตองการนําเสนอ ตามหลักการ
        ออกแบบบนจอคอมพิวเตอร



หลักการออกแบบบนจอคอมพิวเตอร (ถนอมพร เลาหจรัสแสง,2549)
คุณลักษณะของสื่อนําเสนอทางคอมพิวเตอร
             • สามารถแสดงรายละเอียดของเนื้อหาลักษณะมัลติมีเดีย
             • สามารถทําการผลิตไดดวยตนเอง ไดงานที่ดูดี ดวยวิธีการที่คอนขางงาย
                                   
             • การนําเสนอเนื้อหามีความยืดหยุน
             • สามารถจัดเตรียมลําดับเนื้อหาและผลิตไวลวงหนาชวยทําใหการเสนอเนื้อหาไดถูกตอง
               ตามลําดับ และชวยประหยัดเวลาในการบรรยาย
             • สามารถนําไปใชรวมกับสื่อประเภทอื่นได เชน อธิบายรวมกับเอกสารสิ่งพิมพที่แจกใหผูฟง

             • การแกไข อัพเดต ทําไดงายและสะดวก


การออกแบบบนจอคอมพิวเตอร
        ก. การรวบรวมองคประกอบ
             • คํานึงถึงความคมชัดของสิ่งที่นําเสนอบนจอภาพ
             • มีการนําทางที่ดี การใชปุม และ ลิงค
             • เรียบเรียงขอความเนื้อหาใหพอดีกับเนื้อที่บนจอภาพ


                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                         7



        ข. การจัดองคประกอบ
             • จัดวางขอความ ภาพ ปุมนําทาง (ถามี)ในตําแหนงที่เหมาะสมเพื่อใหผูเรียนสามารถควบคุมการ
               เรียนไดสะดวก
             • ปรับแนวองคประกอบตางๆ และควรใหมีความชิดใกลขององคประกอบที่เกี่ยวของกัน


        ค. การเลือกพื้นหลังและรูปแบบ
             • ใชสีออนเปนพื้นหลัง เพื่อไมรบกวนสายตาในการอานขอความ เชน การเลือกใช Template จาก
               โปรแกรม PowerPoint ควรเลือกใชตนแบบที่เรียบงายเพื่อไมดูรกเกินไป เมื่อใสภาพและเนื้อหา
               บทเรียนลงไป
             • ถาตองการออกแบบเองโดยไมใชตนแบบ ใหแบงเนื้อหาบนจอภาพในการจัดวางขอความและ
               ภาพในแตละหนา และตองใชรูปแบบเดียวกันเพื่อความคงตัวของการนําเสนอตลอดบทเรียน


        ง. การตรวจสอบและปรับปรุง
             • ตรวจสอบโดยการลองใชสิ่งที่ออกแบบนั้น ทั้งนี้เนื่องจากทุกสิ่งตองมีความสัมพันธเกี่ยวของกันซึ่ง
               เปนสวนสําคัญของการออกแบบ
             • สังเกตดูผูเรียนวาสามารถเรียนจากบทเรียนนั้นไดโดยงายและสะดวกหรือไม ควรมีจุดใดที่ควร
               ปรับปรุง



คําแนะนําอื่นๆ
        ก. การใชขนาดและรูปแบบของตัวอักษรในการนําเสนอ
             ตัวอักษรไทย
                      • ฟอนตท่อานไดงาย และมีขนาดที่เหมาะสม
                               ี
                      • ควรใช Font 36 เปนอยางต่ํา
             ตัวอักษรภาษาอังกฤษ
                      • ตัวอักษรเปนแบบตัวพิมพเล็ก ยกเวนตัวอักษรนํา
                      • ไมใชรูปแบบตัวพิมพใหญทั้งหมด


                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                            8



        ข. ควรกําหนดหัวเรื่อง (Title) ไวทุกครั้งเพื่อชวยใหผูฟงการบรรยายเขาใจและทราบวาเนื้อหาที่จะเสนอนั้น
        เปนเรื่องเกี่ยวกับอะไร พรอมที่จะติดตามเนื้อหาตอไป
        ค. ไมสมควรใสขอความยาวๆ (ควรจะมีประมาณ 6 บรรทัดตอ 1 จอ)
        ง. ควรใชภาพที่เหมาะสมกับกลุมเปาหมาย



แหลงอางอิงขอมูล
กิดานันท มลิทอง. (2548). เทคโนโลยีและการสื่อสารเพื่อการศึกษา. กรุงเทพฯ : โรงพิมพอรุณการพิมพ.
ถนอมพร เลาหจรัสแสง. (ม.ป.ป.). เอกสารประกอบการสอนรายวิชา 059758 คอมพิวเตอรกับการศึกษา.
          สาขาวิชาเทคโนโลยีทางการศึกษา คณะศึกษาศาสตร มหาวิทยาลัยเชียงใหม.
วงศประชา จันทรสมวงศและมานิตา เจริญปรุ. (2545). คัมภีร Photoshop 7&ImageReady 7. กรุงเทพฯ : บริษัท
          โปรวิชั่น จํากัด.
โสรชัย นันทวัชรวิบูลย. (2537). สูเสนทางกราฟกดีไซเนอร. กรุงเทพฯ : บริษัท พิมพดี จํากัด.




                                    รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                      9



โปรแกรม Photoshop CS2




          Photoshop เปนโปรแกรมสําหรับสรางและตกแตงภาพ จัดการกับไฟลภาพที่ใชในงานประเภทตางๆ ทั้งรูป
ที่จะนําไปผานกระบวนการพิมพ และรูปที่นําไปใชในเว็บเพจหรือสงผานสื่ออิเล็กทรอนิกส สามารถแกไข และสราง
เอฟเฟคตพิเศษตางๆ มีเครื่องมือที่มีประสิทธิภาพและสามารถบันทึกขั้นตอนที่ตองทําซ้ําๆ ไวเรียกใชภายหลังได
ตลอดจนมีปลั๊กอินที่ชวยใหการทํางานที่ซับซอนสําเร็จลงไดอยางรวดเร็ว
          Photoshop เปนโปรแกรมของบริษท Adobe ซึ่งเปนผูพัฒนาซอฟแวรดานกราฟกและอุตสาหกรรมการ
                                            ั
พิมพ ตัวอยางของงานประเภทตางๆ ที่สามารถใชโปรแกรม Photoshop ชวยจัดการได เชน
              • แกไขภาพถายที่บกพรองหรือมีตําหนิ เชน ปรับสีท่เพี้ยน ปรับแสงเงา
                                                                  ี
              • ตกแตงภาพ เชน ตัดสวนที่ไมตองการออกไป ปรับภาพใหเบลอหรือคมชัด
              • ตัดตอภาพ เชน ยายตัวคนจากภาพถายบนทะเลไปยืนอยูบนภูเขา
              • สรางภาพกราฟกซึ่งผสมผสานระหวางภาพถาย ขอความและภาพวัตถุหรือเอฟเฟคตพิเศษที่
                  สรางขึ้นใน Photoshop เพื่อใขในงานผลิตสื่อโฆษณา ทําปกหนังสือหรือนิตยสาร หรือใชตกแตง
                  เว็บเพจ




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                            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
กราฟกเพื่อการศึกษา                                                                          11



Step 1 การสราง Title จากโปรแกรม Adobe Photoshop
        1.เปดโปรแกรม Photoshop โดยไปที่ Start Programs Adobe Photoshop หลังจากเปดโปรแกรม
        แลวใหสรางไฟลงานชิ้นใหมโดยไปที่ เมนู File New
        2.จะปรากฏหนาตาง ใหกําหนดชื่อและขนาดของไฟล ดังรูป




        3.เลือกสี Background จากเครื่องมือ Swatch ดังรูป




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                            12



        4.เทสีโดยใชเครื่องมือ Gradient Tool แลวลากเมาสจากดานบนลงดานลาง




        5.จะไดสี Background ดังรูป




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                     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
กราฟกเพื่อการศึกษา                                                                      14



        10.สรางพื้นหลังสําหรับใสตัวหนังสือ โดยใชเครื่องมือ Rectangular Marquee Tool




        11.เทสีโดยใชเครื่องมือ Paint Bucket Tool




        12.ปรับความสวางของสีขาว โดยลด Opacity = 70 % ดังรูป




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                   15



        13.พิมพตัวหนังสือโดยใช เครื่องมือ Horizontal Type Tool




        14.เพิ่มความคมชัดและลูกเลนใหกับตัวหนังสือ โดยเลือกที่ Add a layer style Blending Options…




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                               16



        15.หลังจากนั้นจะปรากฏหนาตาง Layer Style เลือกดังรูป




        16.ตกแตง Background เพิ่มเติม เชน เพิ่มรูปภาพ CD หรือ ลายเสน เปนตน




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                             17



        17.Save ไฟลชิ้นงาน โดยเลือก File Save As โดยเลือก
                      • Save ชนิดของไฟลแบบ PSD เพื่อนําไฟลกลับมาแกไขไดอีก
                      • Save ชนิดของไฟลแบบ JPEG เพื่อนําไฟลไปใชงานจริง




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                             18



Step 2 การสราง Header จากโปรแกรม Adobe Photoshop
        1.เปดโปรแกรม Photoshop โดยไปที่ Start Programs Adobe Photoshop หลังจากเปดโปรแกรม
        แลวใหสรางไฟลงานชิ้นใหมโดยไปที่ เมนู File New
        2.จะปรากฏหนาตาง ใหกําหนดชื่อและขนาดของไฟล ดังรูป




        3.กําหนดขนาดของ Header = 80 pixel หลังจากนั้นสราง Layer ใหมแลวตั้งชื่อ head ดังรูป




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                          19



        4.สราง Selection โดยใชเครื่องมือ Rectangular Marquee Tool




        5.เลือกสีจากหนาตาง Swatches




        6.เทสีลงใน Layer ที่ช่อ head โดยใชเครื่องมือ Gradient Tool ดังรูป
                              ื




                                    รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                    20



        7.เทสีขาวโดยคลิกเครื่องมือ Layer Mask ดังรูป




        8.เลือกสีจากเครื่องมือ Gradient Tool แลวทําการเทสีโดยลากจากขวามาซาย




        9.พิมพตัวหนังสือโดยใชเครื่องมือ Horizontal Type Tool แลวพิมพ >Multimedia




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                                     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
กราฟกเพื่อการศึกษา                                                                                22



        14.วาดเสนตรงโดยใชเครื่องมือ Single Row Marquee Tool แลวเทสีใหกับเสนโดยใชเครื่องมือ
        Edit Stroke กําหนดขนาดและสีดงรูป ั




        15.ลดความสวางของเสนตรงโดยลดคา Opaity ดังรูป




                                   รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                             23



        16.Save ไฟลชิ้นงาน โดยเลือก File Save As โดยเลือก
                      • Save ชนิดของไฟลแบบ PSD เพื่อนําไฟลกลับมาแกไขไดอีก
                      • Save ชนิดของไฟลแบบ JPEG เพื่อนําไฟลไปใชงานจริง




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                       24



Step 3 การนําภาพพื้นหลังมาใสในโปรแกรม PowerPoint
        1.เปดโปรแกรม Microsoft PowerPoint โดยไปที่ Start Programs Microsoft PowerPoint




        2.เลือกเมนู รูปแบบ พื้นหลัง




                                 รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                                              25




        3.จะปรากฏหนาตางพื้นหลัง เลือกเติมลักษณะพิเศษดังรูป




        4.จะปรากฏหนาตางเติมลักษณะพิเศษ คลิก เลือกรูปภาพ แลวจะปรากฏหนาตางใหเลือกรูปภาพที่
        ตองการจะนํามาทําเปนภาพพื้นหลัง




                                  รายวิชา 059700 Educational Technology
กราฟกเพื่อการศึกษา                                                        26




        5.หลังจากนั้นคลิกตกลง แลวคลิกเลือกนําไปใช ดังรูป




        6.จะไดภาพพื้นหลังดังรูป




                                   รายวิชา 059700 Educational Technology

Contenu connexe

Tendances

ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกjumjim2012
 
รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6Khon Kaen University
 
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกบทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกKruOrraphan Kongmun
 
โครงงานคอมพิวเตอร์Photoshop cc2014 1/2
โครงงานคอมพิวเตอร์Photoshop cc2014 1/2โครงงานคอมพิวเตอร์Photoshop cc2014 1/2
โครงงานคอมพิวเตอร์Photoshop cc2014 1/2ยิ้ม' เเฉ่ง
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์apichaya413
 
โครงงานคอมพิวเตอร์ 612/2557
โครงงานคอมพิวเตอร์ 612/2557โครงงานคอมพิวเตอร์ 612/2557
โครงงานคอมพิวเตอร์ 612/2557Pisit Ausa
 
ใบความรู้ที่ 1 ประวัติความเป็นมาphotoshop
ใบความรู้ที่ 1 ประวัติความเป็นมาphotoshopใบความรู้ที่ 1 ประวัติความเป็นมาphotoshop
ใบความรู้ที่ 1 ประวัติความเป็นมาphotoshopNoofang DarkAnegl
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5Aungkana Na Na
 
ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3
ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3
ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3Inam Chatsanova
 
Photoshop
PhotoshopPhotoshop
PhotoshopBua Rom
 
ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์
ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์
ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์ณัฐพล บัวพันธ์
 
ใบงานที่ 1.1
ใบงานที่ 1.1ใบงานที่ 1.1
ใบงานที่ 1.1Wachi Kook
 
องประกอบของโปรแกรม Photoshop
องประกอบของโปรแกรม Photoshopองประกอบของโปรแกรม Photoshop
องประกอบของโปรแกรม Photoshopอ้าย ปุ้ย
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้องChamp Wachwittayakhang
 

Tendances (20)

การออกแบบทำไวนิล
การออกแบบทำไวนิลการออกแบบทำไวนิล
การออกแบบทำไวนิล
 
การสร้างปกสมุดโรงเรียน
การสร้างปกสมุดโรงเรียนการสร้างปกสมุดโรงเรียน
การสร้างปกสมุดโรงเรียน
 
Graphic
GraphicGraphic
Graphic
 
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
 
รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6
 
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกบทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
 
โครงงานคอมพิวเตอร์Photoshop cc2014 1/2
โครงงานคอมพิวเตอร์Photoshop cc2014 1/2โครงงานคอมพิวเตอร์Photoshop cc2014 1/2
โครงงานคอมพิวเตอร์Photoshop cc2014 1/2
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
โครงงานคอมพิวเตอร์ 612/2557
โครงงานคอมพิวเตอร์ 612/2557โครงงานคอมพิวเตอร์ 612/2557
โครงงานคอมพิวเตอร์ 612/2557
 
ใบความรู้ที่ 1 ประวัติความเป็นมาphotoshop
ใบความรู้ที่ 1 ประวัติความเป็นมาphotoshopใบความรู้ที่ 1 ประวัติความเป็นมาphotoshop
ใบความรู้ที่ 1 ประวัติความเป็นมาphotoshop
 
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
 
Paint
PaintPaint
Paint
 
ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3
ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3
ความรู้เบื้อต้นเกี่ยวกับ Photoshop Cs3
 
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครูAdobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
 
DIA - Diagram
DIA - DiagramDIA - Diagram
DIA - Diagram
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์
ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์
ใบความรู้ที่ 1 รู้จักกับโปรแกรมเพนท์
 
ใบงานที่ 1.1
ใบงานที่ 1.1ใบงานที่ 1.1
ใบงานที่ 1.1
 
องประกอบของโปรแกรม Photoshop
องประกอบของโปรแกรม Photoshopองประกอบของโปรแกรม Photoshop
องประกอบของโปรแกรม Photoshop
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
 

En vedette

Word2007 moce
Word2007 moceWord2007 moce
Word2007 moce520147141
 
คู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรมคู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรมPiyaboon Nilkaew
 
คู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรมคู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรมPiyaboon Nilkaew
 
รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8
รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8
รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8Nattapon
 
กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...
กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...
กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...SKETCHUP HOME
 
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUpคู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUpSKETCHUP HOME
 

En vedette (7)

Word2007 moce
Word2007 moceWord2007 moce
Word2007 moce
 
Auto cad all
Auto cad allAuto cad all
Auto cad all
 
คู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรมคู่มือ 3D Max กับงานสถาปัตยกรรม
คู่มือ 3D Max กับงานสถาปัตยกรรม
 
คู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรมคู่มือ Revit สำหรับงานสถาปัตยกรรม
คู่มือ Revit สำหรับงานสถาปัตยกรรม
 
รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8
รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8
รายงานการวิจัยวิเคราะห์ผู้เรียนเป็นรายบุคคล ม.5/8
 
กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...
กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...
กระบวนการทำงานแบบ EASY BIM (ฺBuilding Information Modeling) ด้วยโปรแกรม Sketc...
 
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUpคู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
คู่มือ Dynamic Component และการจัดการ Component ขั้นสูงในโปรแกรม SketchUp
 

Similaire à กราฟิกเพื่อการศึกษา

แผนFlashหน่วย1
แผนFlashหน่วย1แผนFlashหน่วย1
แผนFlashหน่วย1Junya Punngam
 
การใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงาน
การใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงานการใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงาน
การใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงานcroowut
 
9749740330264
97497403302649749740330264
9749740330264CUPress
 
คู่มือการใช้ Marvin
คู่มือการใช้ Marvinคู่มือการใช้ Marvin
คู่มือการใช้ Marvinkruood
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointcar_net
 
Presentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอมPresentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอมluckana9
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointsuwanna5
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointnuting
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointsommabat
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointphuttarak
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointplernlypim
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointrawikan
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointae2201
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpointchaimoung
 
ประเภทของโครงงาน แบ งได เป_น 5 ประเภท
ประเภทของโครงงาน แบ งได เป_น 5 ประเภทประเภทของโครงงาน แบ งได เป_น 5 ประเภท
ประเภทของโครงงาน แบ งได เป_น 5 ประเภทสุชาติ องค์มิ้น
 

Similaire à กราฟิกเพื่อการศึกษา (20)

แผนFlashหน่วย1
แผนFlashหน่วย1แผนFlashหน่วย1
แผนFlashหน่วย1
 
การใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงาน
การใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงานการใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงาน
การใช้เทคโนโลยีสารสนเทคโนโลยีในการนำเสนอผลงาน
 
9749740330264
97497403302649749740330264
9749740330264
 
คู่มือการใช้ Marvin
คู่มือการใช้ Marvinคู่มือการใช้ Marvin
คู่มือการใช้ Marvin
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
บทท 8
บทท   8บทท   8
บทท 8
 
Presentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอมPresentation powerpoint(การนำเสนอ)คอม
Presentation powerpoint(การนำเสนอ)คอม
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation powerpoint
Presentation powerpointPresentation powerpoint
Presentation powerpoint
 
Presentation-การนำเสนอ
Presentation-การนำเสนอPresentation-การนำเสนอ
Presentation-การนำเสนอ
 
Marwin
MarwinMarwin
Marwin
 
Marwin
MarwinMarwin
Marwin
 
ประเภทของโครงงาน แบ งได เป_น 5 ประเภท
ประเภทของโครงงาน แบ งได เป_น 5 ประเภทประเภทของโครงงาน แบ งได เป_น 5 ประเภท
ประเภทของโครงงาน แบ งได เป_น 5 ประเภท
 

Plus de Jiraprapa Suwannajak

พื้นที่ผิวและปริมาตร
พื้นที่ผิวและปริมาตรพื้นที่ผิวและปริมาตร
พื้นที่ผิวและปริมาตรJiraprapa Suwannajak
 
เลขยกกำลังและลอการิทึม
เลขยกกำลังและลอการิทึมเลขยกกำลังและลอการิทึม
เลขยกกำลังและลอการิทึมJiraprapa Suwannajak
 
ความสัมพันธ์และฟังก์ชัน
ความสัมพันธ์และฟังก์ชันความสัมพันธ์และฟังก์ชัน
ความสัมพันธ์และฟังก์ชันJiraprapa Suwannajak
 
งาน เศรษฐกิจพอเพียง
งาน เศรษฐกิจพอเพียงงาน เศรษฐกิจพอเพียง
งาน เศรษฐกิจพอเพียงJiraprapa Suwannajak
 
วงกลมหนึ่งหน่วย
วงกลมหนึ่งหน่วยวงกลมหนึ่งหน่วย
วงกลมหนึ่งหน่วยJiraprapa Suwannajak
 
เศรษฐกิจพอเพียง
เศรษฐกิจพอเพียงเศรษฐกิจพอเพียง
เศรษฐกิจพอเพียงJiraprapa Suwannajak
 

Plus de Jiraprapa Suwannajak (20)

พื้นที่ผิวและปริมาตร
พื้นที่ผิวและปริมาตรพื้นที่ผิวและปริมาตร
พื้นที่ผิวและปริมาตร
 
ภาคตัดกรวย
ภาคตัดกรวยภาคตัดกรวย
ภาคตัดกรวย
 
เมทริกซ์...
เมทริกซ์...เมทริกซ์...
เมทริกซ์...
 
รากที่สอง..
รากที่สอง..รากที่สอง..
รากที่สอง..
 
อสมการ
อสมการอสมการ
อสมการ
 
เศษส่วน
เศษส่วนเศษส่วน
เศษส่วน
 
เลขยกกำลังและลอการิทึม
เลขยกกำลังและลอการิทึมเลขยกกำลังและลอการิทึม
เลขยกกำลังและลอการิทึม
 
ลอการิทึม
ลอการิทึมลอการิทึม
ลอการิทึม
 
ลอการิทึม..[1]
ลอการิทึม..[1]ลอการิทึม..[1]
ลอการิทึม..[1]
 
ตรีโกณมิต..[1]
ตรีโกณมิต..[1]ตรีโกณมิต..[1]
ตรีโกณมิต..[1]
 
ความสัมพันธ์และฟังก์ชัน
ความสัมพันธ์และฟังก์ชันความสัมพันธ์และฟังก์ชัน
ความสัมพันธ์และฟังก์ชัน
 
ตรรกศาสตร์
ตรรกศาสตร์ตรรกศาสตร์
ตรรกศาสตร์
 
งาน เศรษฐกิจพอเพียง
งาน เศรษฐกิจพอเพียงงาน เศรษฐกิจพอเพียง
งาน เศรษฐกิจพอเพียง
 
วงกลมวงรี
วงกลมวงรีวงกลมวงรี
วงกลมวงรี
 
กลุ่ม4
กลุ่ม4กลุ่ม4
กลุ่ม4
 
วงกลมหนึ่งหน่วย
วงกลมหนึ่งหน่วยวงกลมหนึ่งหน่วย
วงกลมหนึ่งหน่วย
 
ปรัชญาเศร..
ปรัชญาเศร..ปรัชญาเศร..
ปรัชญาเศร..
 
เศรษฐกิจพอเพียง
เศรษฐกิจพอเพียงเศรษฐกิจพอเพียง
เศรษฐกิจพอเพียง
 
เศรษฐกิจ..[1]
 เศรษฐกิจ..[1] เศรษฐกิจ..[1]
เศรษฐกิจ..[1]
 
สมการตรีโกณ
สมการตรีโกณสมการตรีโกณ
สมการตรีโกณ
 

กราฟิกเพื่อการศึกษา

  • 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