SlideShare a Scribd company logo
การออกแบบและพัฒนาสื่ อประสม

                                                     โดย
                                     ศุภกฤษฏ์ ิ นวฒนากูล
                                                 ิ ั
                           สาขาวิชาเทคโนโลยี สารสนเทศ
    สํานักวิชาเทคโนโลยีสงคม มหาวิทยาลัยเทคโนโลยีสุรนารี
                        ั

1
วตถุประสงค
    วัตถประสงค์

    เมื่อจบบทเรี ยนนี้ นักศึกษาสามารถ
          เข้าใจขั้นตอนการวางแผนและออกแบบสื่ อประสม
             ้
          สามารถออกแบบสื่ อประสมได้อย่างถูกต้องและเหมาะสม




2
เนอหา
    เนื้อหา

     การวางแผนและการออกแบบสื่ อประสม
     วิธีการออกแบบ
     การออกแบบสวนตดตอกบผู ช
     การออกแบบส่ วนติดต่อกับผ้ใช้
     การออกแบบสื่ อต่าง ๆ
     การทดสอบสื่ อประสม
     การสงมอบสอประสม
     การส่ งมอบสื่ อประสม
     ลิขสิ ทธิ์

3
การวางแผนและการออกแบบสืื่ อป
                           ประสม
    หลักในการออกแบบสื่ อประสม
      มีการออกแบบกราฟิ กที่ดี ออกแบบภาพ จัดวางองค์ประกอบให้
      สวยงาม และสื่ อความหมาย
      มีเนื้อหาและโครงสร้างงานที่ดี (คล้ายการออกแบบ Site map)
      ใช้งานง่ายสะดวก มีระบบ Navigator หรื อระบบนําทางในการใช้
                                 a gato
      งานที่ดี
      มการใชเสยงอยางเหมาะสม
      มีการใช้เสี ยงอย่างเหมาะสม
      ในกรณี ที่มีภาพเคลื่อนไหว จะต้องมีการออกแบบภาพให้เข้ากับเรื่ องราว
      ไดด
      ไ ้ี
4
กระบวนการวางแผนและการจัดทําเอกสารต่าง ๆ เป็ นส่ วนสําคัญ
    ของขั้ นตอนการออกแบบสืื่ อป
           ั                  ประสม
    เอกสารที่ได้จากการออกแบบ
       Storyboard
       Flowchart
       Scripts



5
Storyboard

    Storyboard คือ การสร้างภาพให้เห็นลําดับขั้นตอนตามเนื้อเรื่ องที่
    ต้องการ โดยเฉพาะการสร้างภาพเคลื่อนไหว
    รายละเอียดที่ควรมีใน Storyboard
       ภาพร่ าง
       คําอธิบายแต่ละสื่ อที่ใช้ (ข้อความ รู ปภาพ ภาพเคลื่อนไหว เสี ยง วีดิโอ)
       เวลาที่ใช้
       หลายเลขหน้าจอ
       การเปลี่ยนภาพ (Transition)
       เครื่ องมือหรื อโปรแกรมที่ใช้
       งบประมาณ
       ระบบนําทาง (Navigation)
6      คําอธิบายเพิ่มเติม (Comments)
ตวอยาง
       ตัวอย่าง Storyboard

                                          Multimedia Storyboard
    Project Name :............................................ Page Number............... of ..........
                   :                                                  Number
    Prepared by :............................................... Scene Number............................

    Desc.of
    Desc of Text :
                 :.............................................. Transition :
                                                                            :...................................
    Desc.of Graphic :......................................... Transition :...................................
    Desc.of Animation :...................................... Transition :...................................
    Desc.of Audio :............................................. Transition :...................................
    Desc.of Video :............................................. Transition :...................................

    Time Required :............................................
             q
    Notes :...............................................................................................................
    ......................................................................................................
    ......................................................................................................
    ......................................................................................................
7
ตวอยาง
    ตัวอย่าง Storyboard


    ภาพ




    คาอธบายภาพ
    คําอธิบายภาพ
    เนื้อหา ขอความ
    เสียงประกอบ
       ี ป
8
Flowcharts

       ใช้ในการอธิบายกระบวนการที่ตองมีการตัดสิ นใจ หรื อมีทางเลือก
                                  ้
       ตัวอย่าง Flowcharts
                              Main Menu
                              M i M



    Training module 1      Training module 2       Training module 3



     Flash movie 1           Flash movie 2           Flash movie 3

9
Scripts

      เป็ นส่ วนหนึ่งที่สาคัญของกระบวนการวางแผนการพัฒนาสื่ อประสม
                         ํ
      เป็ นแบบร่ าง (blueprints) ที่สมบูรณ์ท่ีสุดของกระบวนการพัฒนา
      สื่ อประสม
      ประกอบด้วยข้อความและคําบรรยาย
      S i t จะช่่วยให้ทีมพัฒนาสืื่ อประสมได้เ้ ข้าใ
      Scripts              ใ ้               ไ ้ ใจตรงกัน และพัฒนา
      สื่ อประสมไปในทิศทางเดียวกัน



10
วธการออกแบบ
     วิธีการออกแบบ

      การกําหนดวัตถุประสงค์
         How ้ ้ ้ ประสมอย่างไร
         Ho : ผูใช้ใช้ส่ื อป        ่ ไ
         Why : ทําไมผูใช้ถึงต้องใช้ส่ื อประสมนี้
                             ้
         What : ผูใช้ใช้อะไรจากสื่ อประสม
                        ้
         What medium and platform : อะไรที่ผใชใชในการ  อะไรทผู ้ ช้ใช้ในการ
         เข้าถึงสื่ อประสม
         What types of features : คณลักษณะประเภทใดที่ให้
                                                 คุณลกษณะประเภทใดทให
         ประโยชน์แก่ผใช้สูงสุ ด
                          ู้

11
กลุ่มผูใช้ (Audience)
            ้
       Who : ใครคือกลุ่มผูฟัง
                          ้
       Age : ช่วงอายุของกลุ่มผูฟัง
                               ้
       What gender : เพศของกลุ่มผูฟัง      ้
       How computer literate : ความชํานาญในการใช้ความชานาญในการใช
       คอมพิวเตอร์
       interests : อะไรทีี่กลุ่มผูใช้โดยทวไปให้ความสนใจเปนพเศษ
                        ไ          ้ ้       ั่ ไปใ ้      ใ ป็ ิ
       beliefs : อะไรที่กลุ่มผูใช้โดยทัวไปให้ความเชื่อถือ
                                 ้       ่
       values : อะไรที่คุณค่าที่กลุ่มผูใช้โดยทัวไปจะได้รับ
                                       ้          ่
12
วิธีการนําเสนอสื่ อ
        รู ปแบบคอมพิวเตอร์ของกลุ่มผูใช้
                                    ้
        หน่วยประมวลผล (Processor)
        Bandwidth
        หนวยความจา
        หน่วยความจํา (Memory)
        สื่ อที่ใช้เก็บ (Storage)




13
การออกแบบส่่ วนติิดต่่อกับผูใช้้
                              ั ้

       Consistency
       Color Scheme : M
       C l S h        Monochromatic color
                           h    ti    l
       scheme
       Layout
       Navigation
       Transitions
       Unity
       U it
       Timingg
14
การออกแบบสอตาง
     การออกแบบสื่ อต่าง ๆ

       Text
       Graphics
       Animation
       Sound
       Video



15
ตัวอย่างการใช้ T
                Text
 Serif Fonts           Sans Serif Fonts

 Times New Roman       Monotype Corsiva
 Bookman Old Style     Arial Narrow
 Garamond              Arial Black
 Tahoma                Impact
 Georgia
      i                Comic S
                       C i Sans MS
 Verdana               Haettenschweiler

16
ตัวอย่างการใช้สีขอความกับพื้ืนหลัง
               ้ ้
          ◌ฺ Black text on a White background
              offers th greatest contrast.
               ff    the    t t     t   t

     It is easy to read        If there is enough
                                    contrast,
 dark text on a light
                              light text on a dark
                                    te t
       background
                             background will work.
          There is not enough contrast between
         the text color and the background color.
               This text is difficult to read.
17
การทดสอบสอประสม
     การทดสอบสื่ อประสม

      Design
      Content
      C t t
      Multimedia elements
      Programming code
      User interface
      Method of navigation
      Interactivity

18
การสงมอบสอประสม
     การส่ งมอบสื่ อประสม

     • Storage and distribution media : magnetic
       tape, magnetic disks, magneto-optical disks,
       CD-ROM, DVD, laser disk, Web server
     • Packaging and delivery




19
ลิขสิ ทธิ์
     ลขสทธ

     •   Copyright laws : Art forms and electronic art
         forms T be sure to read th agreement
         f      To b        t      d the         t
         carefully
     •   Can
         C use some elements royalty-free
                          l      t       lt f




20

More Related Content

What's hot

Scratch คู่มือ
Scratch คู่มือScratch คู่มือ
Scratch คู่มือ
Chatchai PI
 
Scratch Learning Tools for Kids
Scratch Learning Tools for KidsScratch Learning Tools for Kids
Scratch Learning Tools for Kids
Boonlert Aroonpiboon
 
Scratch final
Scratch finalScratch final
Scratch final
Siratcha Wongkom
 
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกjumjim2012
 
ใบความรู้ หน่วยที่ 1 com graphic
ใบความรู้ หน่วยที่ 1 com graphicใบความรู้ หน่วยที่ 1 com graphic
ใบความรู้ หน่วยที่ 1 com graphicjumjim2012
 
สร้างนิทานด้วยโปรแกรม Scratch
สร้างนิทานด้วยโปรแกรม Scratchสร้างนิทานด้วยโปรแกรม Scratch
สร้างนิทานด้วยโปรแกรม ScratchNannapas Siriwongboonmee
 
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
Royphim Namsongwong
 
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกบทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
KruOrraphan Kongmun
 
หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3arachaporn
 
พื้นฐานการเลือกสีและรหัสสี
พื้นฐานการเลือกสีและรหัสสีพื้นฐานการเลือกสีและรหัสสี
พื้นฐานการเลือกสีและรหัสสี
Pitchayanida Khumwichai
 

What's hot (10)

Scratch คู่มือ
Scratch คู่มือScratch คู่มือ
Scratch คู่มือ
 
Scratch Learning Tools for Kids
Scratch Learning Tools for KidsScratch Learning Tools for Kids
Scratch Learning Tools for Kids
 
Scratch final
Scratch finalScratch final
Scratch final
 
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
 
ใบความรู้ หน่วยที่ 1 com graphic
ใบความรู้ หน่วยที่ 1 com graphicใบความรู้ หน่วยที่ 1 com graphic
ใบความรู้ หน่วยที่ 1 com graphic
 
สร้างนิทานด้วยโปรแกรม Scratch
สร้างนิทานด้วยโปรแกรม Scratchสร้างนิทานด้วยโปรแกรม Scratch
สร้างนิทานด้วยโปรแกรม Scratch
 
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
 
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกบทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
 
หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3หน่วยการเรียนรู้ที่ 3
หน่วยการเรียนรู้ที่ 3
 
พื้นฐานการเลือกสีและรหัสสี
พื้นฐานการเลือกสีและรหัสสีพื้นฐานการเลือกสีและรหัสสี
พื้นฐานการเลือกสีและรหัสสี
 

Viewers also liked

การขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ตการขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ตtelecentreacademy
 
คู่มือถ่ายภาพ
คู่มือถ่ายภาพคู่มือถ่ายภาพ
คู่มือถ่ายภาพtelecentreacademy
 
คู่มือการออกแบบ
คู่มือการออกแบบคู่มือการออกแบบ
คู่มือการออกแบบtelecentreacademy
 
เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010
เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010
เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010
สิทธันต์ สุขสุวรรณ
 
ตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศ
ตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศ
ตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศcodexstudio
 
การออกแบบบริการ (Service design)
การออกแบบบริการ (Service design) การออกแบบบริการ (Service design)
การออกแบบบริการ (Service design)
Dr.Krisada [Hua] RMUTT
 

Viewers also liked (6)

การขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ตการขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ต
 
คู่มือถ่ายภาพ
คู่มือถ่ายภาพคู่มือถ่ายภาพ
คู่มือถ่ายภาพ
 
คู่มือการออกแบบ
คู่มือการออกแบบคู่มือการออกแบบ
คู่มือการออกแบบ
 
เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010
เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010
เทคนิคการ สร้างอนิเมชั่นPowerpoint 2010
 
ตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศ
ตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศ
ตัวอย่าง การออกแบบระบบการเรียนการสอนรายวิชาการวิเคราะห์ทรัพยากรสารสนเทศ
 
การออกแบบบริการ (Service design)
การออกแบบบริการ (Service design) การออกแบบบริการ (Service design)
การออกแบบบริการ (Service design)
 

Similar to การออกแบบและพัฒนาสื่อประสม

Multimedia for Education1
Multimedia for Education1Multimedia for Education1
Multimedia for Education1
Suphol Sutthiyutthasenee
 
ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์watnawong
 
01 intro computergraphic
01 intro computergraphic01 intro computergraphic
01 intro computergraphic
pisandesign
 
Presentation3 howto
Presentation3 howtoPresentation3 howto
Presentation3 howto
PooncharatKuntanat1
 
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์Umaporn Maneesatjang
 
ใบงานที่ 3
ใบงานที่ 3ใบงานที่ 3
ใบงานที่ 3natnardtaya
 
ใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงาน
ใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงานใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงาน
ใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงานPuifai Sineenart Phromnin
 
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกวาสนา ใจสุยะ
 
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์sa_jaimun
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Suthida23
 
ใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละออง
ใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละอองใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละออง
ใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละออง
อองเอง จ้า
 
การนำเสนองานด้วยเทคโนโลยีสารสานเทศ
การนำเสนองานด้วยเทคโนโลยีสารสานเทศการนำเสนองานด้วยเทคโนโลยีสารสานเทศ
การนำเสนองานด้วยเทคโนโลยีสารสานเทศYongyut Nintakan
 
งานคอมเรื่อง กราฟฟิค ดรีม
งานคอมเรื่อง กราฟฟิค ดรีมงานคอมเรื่อง กราฟฟิค ดรีม
งานคอมเรื่อง กราฟฟิค ดรีมKittitud SaLad
 
โครงงานคอม 5
โครงงานคอม 5โครงงานคอม 5
โครงงานคอม 5wipawanmmiiww
 

Similar to การออกแบบและพัฒนาสื่อประสม (20)

Multimedia for Education1
Multimedia for Education1Multimedia for Education1
Multimedia for Education1
 
ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์ประเภทของโครงงานคอมพิวเตอร์
ประเภทของโครงงานคอมพิวเตอร์
 
01 intro computergraphic
01 intro computergraphic01 intro computergraphic
01 intro computergraphic
 
Presentation3 howto
Presentation3 howtoPresentation3 howto
Presentation3 howto
 
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 เรื่อง โครงงานประเภทการพัฒนาโปรแกรมประยุกต์
 
ใบงานที่ 3
ใบงานที่ 3ใบงานที่ 3
ใบงานที่ 3
 
08
0808
08
 
ใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงาน
ใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงานใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงาน
ใบงานที่ 3 เรื่อง ขอบข่ายและประเภทของโครงงาน
 
ใบงานที่3
ใบงานที่3ใบงานที่3
ใบงานที่3
 
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
 
Storyboard
StoryboardStoryboard
Storyboard
 
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
ใบความรู้ 1.2ประเภทของโครงงานคอมพิวเตอร์
 
3.3
3.33.3
3.3
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละออง
ใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละอองใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละออง
ใบความรู้ ประเภทของโครงงานคอมพิวเตอร์ โดยครูละออง
 
การนำเสนองานด้วยเทคโนโลยีสารสานเทศ
การนำเสนองานด้วยเทคโนโลยีสารสานเทศการนำเสนองานด้วยเทคโนโลยีสารสานเทศ
การนำเสนองานด้วยเทคโนโลยีสารสานเทศ
 
งานคอมเรื่อง กราฟฟิค ดรีม
งานคอมเรื่อง กราฟฟิค ดรีมงานคอมเรื่อง กราฟฟิค ดรีม
งานคอมเรื่อง กราฟฟิค ดรีม
 
โครงงานคอม 5
โครงงานคอม 5โครงงานคอม 5
โครงงานคอม 5
 

More from telecentreacademy

การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์telecentreacademy
 
หลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชน
หลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชนหลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชน
หลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชนtelecentreacademy
 
การขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ตการขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ตtelecentreacademy
 
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์telecentreacademy
 
Gimp11
Gimp11Gimp11
Gimp12
Gimp12Gimp12
Gimp02
Gimp02Gimp02
Gimp15
Gimp15Gimp15
Gimp14
Gimp14Gimp14
Gimp13
Gimp13Gimp13
Gimp11
Gimp11Gimp11
Gimp09
Gimp09Gimp09
Gimp08
Gimp08Gimp08
Gimp07
Gimp07Gimp07
Gimp06
Gimp06Gimp06
Gimp05
Gimp05Gimp05
Gimp04
Gimp04Gimp04
Gimp03
Gimp03Gimp03
Gimp10
Gimp10Gimp10

More from telecentreacademy (20)

การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
 
หลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชน
หลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชนหลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชน
หลักการทำบัญชีชุมชน และการเป็นผู้ประกอบการชุมชน
 
การขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ตการขายสินค้าทางอินเตอร์เน็ต
การขายสินค้าทางอินเตอร์เน็ต
 
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
การประชาสัมพันธ์สินค้าผ่านเว็บไซต์
 
Packaging design
Packaging designPackaging design
Packaging design
 
Gimp11
Gimp11Gimp11
Gimp11
 
Gimp12
Gimp12Gimp12
Gimp12
 
Gimp02
Gimp02Gimp02
Gimp02
 
Gimp15
Gimp15Gimp15
Gimp15
 
Gimp14
Gimp14Gimp14
Gimp14
 
Gimp13
Gimp13Gimp13
Gimp13
 
Gimp11
Gimp11Gimp11
Gimp11
 
Gimp09
Gimp09Gimp09
Gimp09
 
Gimp08
Gimp08Gimp08
Gimp08
 
Gimp07
Gimp07Gimp07
Gimp07
 
Gimp06
Gimp06Gimp06
Gimp06
 
Gimp05
Gimp05Gimp05
Gimp05
 
Gimp04
Gimp04Gimp04
Gimp04
 
Gimp03
Gimp03Gimp03
Gimp03
 
Gimp10
Gimp10Gimp10
Gimp10
 

Recently uploaded

เรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdf
เรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdfเรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdf
เรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdf
ssuser0ffe4b
 
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกันbio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
CholapruekSangkamane1
 
ส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docx
ส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docxส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docx
ส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docx
ArnonTonsaipet
 
ภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติ
ภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติ
ภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติ
Faculty of BuddhismMahachulalongkornrajavidyalaya Roi Et Buddhist College
 
Artificial Intelligence in Education2.pdf
Artificial Intelligence in Education2.pdfArtificial Intelligence in Education2.pdf
Artificial Intelligence in Education2.pdf
Prachyanun Nilsook
 
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdfความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
Pattie Pattie
 

Recently uploaded (6)

เรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdf
เรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdfเรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdf
เรียนภาษาจีนด้วยตนเอง ฟรี ๒๔ ชั่วโมง.pdf
 
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกันbio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
 
ส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docx
ส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docxส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docx
ส่วนหน้า สมฐ. วิทยาศาสตร์ ม.1 เล่ม 1.docx
 
ภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติ
ภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติ
ภาษาอังกฤษ สำหรับนักวิปัสสนา เพื่อฝึกปฎิบัติ
 
Artificial Intelligence in Education2.pdf
Artificial Intelligence in Education2.pdfArtificial Intelligence in Education2.pdf
Artificial Intelligence in Education2.pdf
 
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdfความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
 

การออกแบบและพัฒนาสื่อประสม

  • 1. การออกแบบและพัฒนาสื่ อประสม โดย ศุภกฤษฏ์ ิ นวฒนากูล ิ ั สาขาวิชาเทคโนโลยี สารสนเทศ สํานักวิชาเทคโนโลยีสงคม มหาวิทยาลัยเทคโนโลยีสุรนารี ั 1
  • 2. วตถุประสงค วัตถประสงค์ เมื่อจบบทเรี ยนนี้ นักศึกษาสามารถ เข้าใจขั้นตอนการวางแผนและออกแบบสื่ อประสม ้ สามารถออกแบบสื่ อประสมได้อย่างถูกต้องและเหมาะสม 2
  • 3. เนอหา เนื้อหา การวางแผนและการออกแบบสื่ อประสม วิธีการออกแบบ การออกแบบสวนตดตอกบผู ช การออกแบบส่ วนติดต่อกับผ้ใช้ การออกแบบสื่ อต่าง ๆ การทดสอบสื่ อประสม การสงมอบสอประสม การส่ งมอบสื่ อประสม ลิขสิ ทธิ์ 3
  • 4. การวางแผนและการออกแบบสืื่ อป ประสม หลักในการออกแบบสื่ อประสม มีการออกแบบกราฟิ กที่ดี ออกแบบภาพ จัดวางองค์ประกอบให้ สวยงาม และสื่ อความหมาย มีเนื้อหาและโครงสร้างงานที่ดี (คล้ายการออกแบบ Site map) ใช้งานง่ายสะดวก มีระบบ Navigator หรื อระบบนําทางในการใช้ a gato งานที่ดี มการใชเสยงอยางเหมาะสม มีการใช้เสี ยงอย่างเหมาะสม ในกรณี ที่มีภาพเคลื่อนไหว จะต้องมีการออกแบบภาพให้เข้ากับเรื่ องราว ไดด ไ ้ี 4
  • 5. กระบวนการวางแผนและการจัดทําเอกสารต่าง ๆ เป็ นส่ วนสําคัญ ของขั้ นตอนการออกแบบสืื่ อป ั ประสม เอกสารที่ได้จากการออกแบบ Storyboard Flowchart Scripts 5
  • 6. Storyboard Storyboard คือ การสร้างภาพให้เห็นลําดับขั้นตอนตามเนื้อเรื่ องที่ ต้องการ โดยเฉพาะการสร้างภาพเคลื่อนไหว รายละเอียดที่ควรมีใน Storyboard ภาพร่ าง คําอธิบายแต่ละสื่ อที่ใช้ (ข้อความ รู ปภาพ ภาพเคลื่อนไหว เสี ยง วีดิโอ) เวลาที่ใช้ หลายเลขหน้าจอ การเปลี่ยนภาพ (Transition) เครื่ องมือหรื อโปรแกรมที่ใช้ งบประมาณ ระบบนําทาง (Navigation) 6 คําอธิบายเพิ่มเติม (Comments)
  • 7. ตวอยาง ตัวอย่าง Storyboard Multimedia Storyboard Project Name :............................................ Page Number............... of .......... : Number Prepared by :............................................... Scene Number............................ Desc.of Desc of Text : :.............................................. Transition : :................................... Desc.of Graphic :......................................... Transition :................................... Desc.of Animation :...................................... Transition :................................... Desc.of Audio :............................................. Transition :................................... Desc.of Video :............................................. Transition :................................... Time Required :............................................ q Notes :............................................................................................................... ...................................................................................................... ...................................................................................................... ...................................................................................................... 7
  • 8. ตวอยาง ตัวอย่าง Storyboard ภาพ คาอธบายภาพ คําอธิบายภาพ เนื้อหา ขอความ เสียงประกอบ ี ป 8
  • 9. Flowcharts ใช้ในการอธิบายกระบวนการที่ตองมีการตัดสิ นใจ หรื อมีทางเลือก ้ ตัวอย่าง Flowcharts Main Menu M i M Training module 1 Training module 2 Training module 3 Flash movie 1 Flash movie 2 Flash movie 3 9
  • 10. Scripts เป็ นส่ วนหนึ่งที่สาคัญของกระบวนการวางแผนการพัฒนาสื่ อประสม ํ เป็ นแบบร่ าง (blueprints) ที่สมบูรณ์ท่ีสุดของกระบวนการพัฒนา สื่ อประสม ประกอบด้วยข้อความและคําบรรยาย S i t จะช่่วยให้ทีมพัฒนาสืื่ อประสมได้เ้ ข้าใ Scripts ใ ้ ไ ้ ใจตรงกัน และพัฒนา สื่ อประสมไปในทิศทางเดียวกัน 10
  • 11. วธการออกแบบ วิธีการออกแบบ การกําหนดวัตถุประสงค์ How ้ ้ ้ ประสมอย่างไร Ho : ผูใช้ใช้ส่ื อป ่ ไ Why : ทําไมผูใช้ถึงต้องใช้ส่ื อประสมนี้ ้ What : ผูใช้ใช้อะไรจากสื่ อประสม ้ What medium and platform : อะไรที่ผใชใชในการ อะไรทผู ้ ช้ใช้ในการ เข้าถึงสื่ อประสม What types of features : คณลักษณะประเภทใดที่ให้ คุณลกษณะประเภทใดทให ประโยชน์แก่ผใช้สูงสุ ด ู้ 11
  • 12. กลุ่มผูใช้ (Audience) ้ Who : ใครคือกลุ่มผูฟัง ้ Age : ช่วงอายุของกลุ่มผูฟัง ้ What gender : เพศของกลุ่มผูฟัง ้ How computer literate : ความชํานาญในการใช้ความชานาญในการใช คอมพิวเตอร์ interests : อะไรทีี่กลุ่มผูใช้โดยทวไปให้ความสนใจเปนพเศษ ไ ้ ้ ั่ ไปใ ้ ใ ป็ ิ beliefs : อะไรที่กลุ่มผูใช้โดยทัวไปให้ความเชื่อถือ ้ ่ values : อะไรที่คุณค่าที่กลุ่มผูใช้โดยทัวไปจะได้รับ ้ ่ 12
  • 13. วิธีการนําเสนอสื่ อ รู ปแบบคอมพิวเตอร์ของกลุ่มผูใช้ ้ หน่วยประมวลผล (Processor) Bandwidth หนวยความจา หน่วยความจํา (Memory) สื่ อที่ใช้เก็บ (Storage) 13
  • 14. การออกแบบส่่ วนติิดต่่อกับผูใช้้ ั ้ Consistency Color Scheme : M C l S h Monochromatic color h ti l scheme Layout Navigation Transitions Unity U it Timingg 14
  • 15. การออกแบบสอตาง การออกแบบสื่ อต่าง ๆ Text Graphics Animation Sound Video 15
  • 16. ตัวอย่างการใช้ T Text Serif Fonts Sans Serif Fonts Times New Roman Monotype Corsiva Bookman Old Style Arial Narrow Garamond Arial Black Tahoma Impact Georgia i Comic S C i Sans MS Verdana Haettenschweiler 16
  • 17. ตัวอย่างการใช้สีขอความกับพื้ืนหลัง ้ ้ ◌ฺ Black text on a White background offers th greatest contrast. ff the t t t t It is easy to read If there is enough contrast, dark text on a light light text on a dark te t background background will work. There is not enough contrast between the text color and the background color. This text is difficult to read. 17
  • 18. การทดสอบสอประสม การทดสอบสื่ อประสม Design Content C t t Multimedia elements Programming code User interface Method of navigation Interactivity 18
  • 19. การสงมอบสอประสม การส่ งมอบสื่ อประสม • Storage and distribution media : magnetic tape, magnetic disks, magneto-optical disks, CD-ROM, DVD, laser disk, Web server • Packaging and delivery 19
  • 20. ลิขสิ ทธิ์ ลขสทธ • Copyright laws : Art forms and electronic art forms T be sure to read th agreement f To b t d the t carefully • Can C use some elements royalty-free l t lt f 20