SlideShare a Scribd company logo
1 of 108
Download to read offline
สารบัญ

บทที่ 1 เว็บกราฟก .................................................................................................................. 1
  ไฟลสกุล GIF (Graphics Interlace File) ................................................................................. 2
      การบีบอัดภาพ................................................................................................................. 2
      Transparent .................................................................................................................. 2
      Interlaced ..................................................................................................................... 3
      การเลือกใชภาพฟอรแมต GIF............................................................................................. 3
  ไฟลสกุล JPG (Joint Photographer’s Experts Group) .............................................................. 3
      การเลือกใชภาพฟอรแมต JPEG........................................................................................... 3
  ไฟลสกุล PNG (Portable Network Graphics) .......................................................................... 4
  ภาพแบบเวกเตอรและบิตแมป (Vector & Bitmap) ..................................................................... 4
      ภาพกราฟกแบบเวอรเตอร (Vector) ..................................................................................... 4
      ภาพกราฟกแบบบิตแมป (Bitmap) ....................................................................................... 4
  พิกเซล (Pixel) ................................................................................................................... 5
  ระบบสีของคอมพิวเตอร ........................................................................................................ 5
      Indexed Color................................................................................................................ 6
  ระบบสีทางการพิมพ ............................................................................................................. 6
  ชื่อไฟลภาพ ....................................................................................................................... 6
  รูปภาพดิจทัล ..................................................................................................................... 6
              ิ
      มาตรฐานรูปแบบการนําเสนอภาพ ........................................................................................ 7
บทที่ 2 เตรียมภาพใชงาน......................................................................................................... 8
  ภาพถูกใจกับ Scanner ......................................................................................................... 8
      หลักการสแกนภาพ........................................................................................................... 8
  ภาพทันใจดวยกลองถายภาพดิจิทล ......................................................................................... 9
                                            ั
  การจับภาพดวยเทคนิค Screen Capture .................................................................................10
      การจับจอภาพโดยใชความสามารถ Clipboard .......................................................................10
      การจับจอภาพดวยโปรแกรม ScreenPrint 32 ........................................................................12
         การจับภาพบางสวนของจอภาพไวใน Clipboard .................................................................13
  การเซฟภาพ (Save) จากหนาเว็บเพจ .....................................................................................14
      รูปภาพที่เปนภาพชิ้นๆ ที่เรียกวา Clipart ...............................................................................14
      รูปภาพที่นํามาใชแสดงผลเปนพื้นของเว็บ ที่เรียกวา Background ..............................................14
บทที่ 3 Image Viewers .........................................................................................................15
  การดาวนโหลด ..................................................................................................................15
  การเรียกใชงานโปรแกรม......................................................................................................15
  แสดงภาพ 1 ภาพตอ 1 จอ ...................................................................................................16
  การแสดงภาพหลายภาพใน 1 จอ (Thumbnail View Mode)........................................................17
  นําเสนอภาพแบบ Slide Show...............................................................................................17
  พิมพภาพ (Contact Sheet)..................................................................................................18
  สรางคลังภาพสําหรับนําเสนอบนเว็บ .......................................................................................19
บทที่ 4 Adobe PhotoShop .....................................................................................................20
  การเรียกใชโปรแกรม ...........................................................................................................20
      แถบชื่อเรื่อง (Title Bar) ...................................................................................................21
      แถบเครื่องมือ .................................................................................................................21
      Option Bar ...................................................................................................................22
      Status Bar....................................................................................................................22
      Palettes .......................................................................................................................23
  หนวยวัด ...........................................................................................................................24
  ภาษาไทยกับ PhotoShop ....................................................................................................24
  จัดการไฟลภาพ .................................................................................................................25
      เปดไฟลภาพ (Open File).................................................................................................25
      การสรางงานใหม (New File).............................................................................................25
      ตรวจสอบขนาดของจอภาพทีใชงาน ....................................................................................26
                                         ่
         ตัวอยางขนาดของภาพกราฟก.........................................................................................26
      จัดเก็บภาพ (Save File) ...................................................................................................27
         การจัดเก็บภาพ (Save File) สําหรับภาพตนฉบับ .................................................................27
         การจัดเก็บภาพ (Save) ภาพในฟอรแมต JPG .....................................................................28
การจัดเก็บภาพ (Save) ภาพในฟอรแมต GIF87..................................................................28
         การจัดเก็บภาพ (Save) ภาพในฟอรแมต GIF89 - Transparent .............................................29
         คําสั่ง Save for Web....................................................................................................31
  มุมมองของหนาตางภาพ ......................................................................................................31
  ลําดับขั้นตอนสําคัญการออกแบบงานกราฟก .............................................................................32
  โหมดภาพ ........................................................................................................................33
  ความละเอียดของภาพ .........................................................................................................33
  ขนาดของภาพ ...................................................................................................................33
บทที่ 5 File Browser .............................................................................................................34
      เปดไฟล........................................................................................................................35
      ลบไฟล .........................................................................................................................35
      หมุนภาพ.......................................................................................................................35
      เปลี่ยนชื่อไฟลภาพ..........................................................................................................36
         ตัวอยางรูปแบบของการระบุชอไฟลใหม ............................................................................36
                                            ื่
      การใหลาดับความสําคัญของภาพ........................................................................................36
                ํ
บทที่ 6 ขอบเขตภาพ (Selection) .............................................................................................37
  การเลือกภาพหรือสวนของภาพ (Selection) .............................................................................37
      เครื่องมือ Marquee .........................................................................................................37
      การยกเลิก Selection .......................................................................................................37
         คากําหนดของ Marquee ...............................................................................................38
      เครื่องมือ Lasso..............................................................................................................40
      เครื่องมือ Magic Wand ....................................................................................................41
  ยายตําแหนง Selection .......................................................................................................41
  ขอบ Selection ใหโคงมน ....................................................................................................41
  กรอบ Selection.................................................................................................................41
  ขยาย Selection.................................................................................................................42
  ยอ Selection ....................................................................................................................42
  บันทึก Selection................................................................................................................42
  เรียกใชงาน Selection .........................................................................................................42
  สลับ Selection ..................................................................................................................42
  ซอน Selection..................................................................................................................43
  จัดแตงภาพดวย Selection ...................................................................................................43
      ยายภาพ .......................................................................................................................43
      คัดลอกภาพ...................................................................................................................43
      ตัดบางสวนของภาพ ........................................................................................................43
      ขยายพื้นที่ของหนาตางภาพ ..............................................................................................44
      หมุนภาพ/พลิก หรือกลับภาพ.............................................................................................44
  การยกเลิกคําสังการทํางาน (Undo)........................................................................................45
                    ่
บทที่ 7 เลเยอร .....................................................................................................................46
  Layer Palette ...................................................................................................................46
  สรางเลเยอรใหม ................................................................................................................46
      เลเยอรใหมจากไฟลภาพอื่น ..............................................................................................47
  เลือกเลเยอร......................................................................................................................48
  ลบเลเยอร ........................................................................................................................49
  ยายชั้นเลเยอร ...................................................................................................................49
  ล็อกเลเยอร.......................................................................................................................49
  เชื่อมเลเยอร .....................................................................................................................50
  รวมเลเยอร........................................................................................................................50
      กลุมเลเยอร ...................................................................................................................50
บทที่ 8 ปรับแตงภาพ..............................................................................................................51
      การปรับความสวาง-มืดของภาพ..........................................................................................51
         ตัวอยางการปรับความมืด/สวางของภาพ............................................................................52
      การดึงสีออก ..................................................................................................................52
      การปรับแตงโทนสี ...........................................................................................................53
      การแทนทีสีในภาพดวยสีใหม .............................................................................................53
                  ่
      การกลับสี ......................................................................................................................53
      ใสลักษณะพิเศษของสีใหกับภาพ........................................................................................53
เครื่องมือปรับแตงภาพ .........................................................................................................54
      Rubber Stamp ..............................................................................................................54
          Pattern Stamp...........................................................................................................54
      Smudge Tool................................................................................................................55
      Blur Tool......................................................................................................................55
      Shapen Tool.................................................................................................................55
      Dodge Tool ..................................................................................................................55
      Burn Tool.....................................................................................................................55
      Sponge Tool.................................................................................................................55
บทที่ 9 ฟลเตอร (Filter) .........................................................................................................56
  กลุมคําสั่งฟลเตอร ..............................................................................................................56
  Plug-ins...........................................................................................................................56
  การยกเลิกฟลเตอร .............................................................................................................56
บทที่ 10 Animations GIF .......................................................................................................57
บทที่ 11 PhotoShop Action ...................................................................................................58
  Action สําหรับยอขนาดภาพ .................................................................................................58
      ขั้นบันทึก Action ............................................................................................................58
      ขั้นบันทึกผลของ Action...................................................................................................59
      ขั้นตรวจสอบคาบันทึกของ Action ......................................................................................59
  การใชงาน Action เพื่อยอภาพหลายๆ ภาพพรอมๆ กัน ................................................................59
  การบันทึก Action เปนไฟล...................................................................................................60
  การติดตั้ง Action ...............................................................................................................61
บทที่ 12 Image Metadata .....................................................................................................62
  การกําหนด Metadata ใหกับรูปภาพ.......................................................................................62
  การคนรูปภาพจาก Metadata ................................................................................................63
บทที่ 13 สรางสรรคงานกราฟก .................................................................................................64
  ปุม แบนเนอร กรอบลักษณะตางๆ...........................................................................................64
      ปุมอยางงาย...................................................................................................................64
      ปุมวงกลม......................................................................................................................64
      ปุมรูปทรงอิสระ ...............................................................................................................64
      ปุมเกลียวบิด ..................................................................................................................65
      Chrome Bar..................................................................................................................66
      ปุมเจล..........................................................................................................................67
  เสนกราฟก ........................................................................................................................67
      เสนกราฟกแบบระบุขนาด ..................................................................................................67
      เสนกราฟกยึดหดไดในแนวนอน..........................................................................................68
      เสนกราฟกจาก Brush ......................................................................................................69
  แตงภาพดวย Selection .......................................................................................................70
      ลบพื้นภาพ กรณีที่ภาพมีพื้นเปนลวดลาย ..............................................................................70
      ลบพื้นภาพ กรณีที่สีพื้นเปนสีสีเดียว .....................................................................................70
      เปลี่ยนสีพื้นของภาพ ........................................................................................................71
      ภาพเกาเปนภาพใหม .......................................................................................................72
      เงาวัตถุ .........................................................................................................................73
      เงาของวัตถุหลายชิ้น........................................................................................................75
      ซอนภาพดวยเทคนิค Masking & Gradient ..........................................................................76
      การลบพื้นของภาพ กรณีทภาพมีพื้นเปนลวดลายดวยคําสั่ง Filter ...............................................76
                                       ี่
      แปลงภาพขาวดําเปนภาพสีแบบ Sepia ................................................................................77
      แปลงภาพขาวดําเปนภาพสีดวยเทคนิคซอนสีภาพ ..................................................................78
                                          
      เปลี่ยนภาพสีเปนภาพวาดลายเสน .......................................................................................78
      ใส Effect ใหกับภาพ .......................................................................................................78
      Barcode .......................................................................................................................79
      ไฟฟาในอากาศ ..............................................................................................................79
      ภาพลักษณะเคลื่อนไหว....................................................................................................80
      ภาพ Sketch ..................................................................................................................81
      ภาพสามมิตแบบ Sphere ..................................................................................................81
                    ิ
      ลายเสนแบบกราฟกสดใส .................................................................................................82
      เปลวไฟ ........................................................................................................................82
ลายน้ํา..........................................................................................................................83
   ลายเสน ........................................................................................................................83
   วัตถุ 3 มิติ .....................................................................................................................84
   ลูกบอลกลมสามมิติ .........................................................................................................84
ขอบภาพลักษณะตางๆ.........................................................................................................85
   ภาพขอบฟุง ...................................................................................................................85
   กรอบภาพแบบกลม, วงรี ...................................................................................................86
   กรอบภาพแบบมุมมน .......................................................................................................86
   กรอบภาพรูปทรงอิสระ......................................................................................................86
   กรอบภาพดวย Polygonal Lasso ........................................................................................87
ภาพ Background ..............................................................................................................87
   Pattern ลายเสน .............................................................................................................87
   Pattern ลักษณะตางๆ......................................................................................................88
   Pattern จากรูปภาพ.........................................................................................................88
   Background แบบผิวขรุขระ...............................................................................................88
   Background ลายเมฆ ......................................................................................................89
   Background แบบผิวลายไม ..............................................................................................89
   ลวดลายสี่เหลียมสําหรับพื้นเว็บ ..........................................................................................89
                    ่
   Background แบบ Star....................................................................................................90
   ลายแผนฟลมดิจิทัลเรื่อง Matrix.........................................................................................90
   Background ทองฟา .......................................................................................................91
   ลวดลายแบบจุด ..............................................................................................................91
ขอความกราฟกสวยนาสนใจ .................................................................................................92
   การลบขอความ...............................................................................................................93
   การใสลกษณะพิเศษใหกบขอความ .....................................................................................93
            ั                     ั
   ตัวอักษรซูม ...................................................................................................................93
   ขอความลายเสน .............................................................................................................94
   ขอความจากรูปภาพ .........................................................................................................95
   ตัวอักษรไฟ ...................................................................................................................95
สรางรูปทรงอิสระดวย Pen ....................................................................................................96
   วาดตนคริสตมาส.............................................................................................................96
   ปรับแตงรูปทรงที่วาดดวย Pen ...........................................................................................96
   รูปทรงอิสระ ...................................................................................................................97
   รูปทรงอิสระ 2 ................................................................................................................98
   สราง Path จากภาพตนฉบับ ..............................................................................................99
การตัดภาพ ..................................................................................................................... 100
Interfaces Design........................................................................................................... 101
   กรอบเมนู .................................................................................................................... 101
   วงแหวน...................................................................................................................... 101
Color Animation ............................................................................................................. 102
Text Zoom .................................................................................................................... 104
1




                                                                     บทที่ 1 เว็บกราฟก


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




หนาเว็บที่มีแตเนื้อหาขอความ                        หนาเว็บที่มีภาพประกอบ



        คอมพิวเตอรกราฟก คือ กราฟกที่นําคอมพิวเตอรมาดําเนินการ              ตั้งแตการเตรียมการ   ออกแบบ
นําเสนอ ใชงาน ดังนั้นงานกราฟก จึงมีความสําคัญ คือ
           •     เปนสื่อกลางในการสื่อความหมาย
           •     เกิดการเรียนรู การศึกษา
           •     เกิดความนาสนใจ ประทับใจ และนาเชื่อถือ
           •     กระตุนความคิด
           •     กอใหเกิดความคิดสรางสรรค
           •     สงเสริมความกาวหนาทางความคิด
          การทําภาพกราฟกเพื่อใชในงานเว็บ เปนรูปแบบหนึ่งของงานคอมพิวเตอรกราฟก มีหลักการเฉพาะ
แตกตางไปจากงานสื่อสิ่งพิมพ ทั้งเรื่องความละเอียดของภาพ (Resolution) ทีใชเพียง 72 dpi หรือจํานวนสี
                                                                        ่
ที่ใชแสดงผล เปนตน ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช PhotoShop สรางกราฟกในงานเว็บ จึงเปน
เนื้อหาที่นาสนใจสําหรับผูที่สนใจพัฒนาเว็บไซต
                          
       ภาพกราฟก หรือรูปกราฟกทีนามาใชในการทําเว็บเพจ หรือนํามาใชในอินเทอรเน็ต จะตองเปนไฟล
                                  ่ ํ
ลักษณะเฉพาะ ปจจุบันนิยมใชกัน 3 ฟอรแมต คือ
           1. ไฟลฟอรแมต JPEG (Joint Photographer’s Experts Group File)

           2. ไฟลฟอรแมต GIF (Graphics Interlace File)

           3. ไฟลฟอรแมต PNG (Portable Network Graphics)
2


ไฟลสกุล GIF (Graphics Interlace File)
         ภาพกราฟกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเปนไฟลภาพสําหรับการเผยแพรผาน
อินเทอรเน็ตตั้งแตยคแรก เนื่องจากมีลักษณะเดน คือ
                    ุ
        •   สามารถใชงานขามระบบ (Cross Platform) หมายความวา คอมพิวเตอรทกระบบ ไมวาจะใช
                                                                          ุ
            Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได
        •   มีขนาดไฟลต่ํา จากเทคโนโลยีการบีบอัดภาพ ทําใหสามารถสงไฟลภาพไดรวดเร็ว
        •   สามารถทําพื้นของภาพใหเปนพื้นแบบโปรงใสได (Transparent)
        •   มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Interlace
        •   มีโปรแกรมสนับสนุนการสรางจํานวนมาก
        •   เรียกดูไดกับ Graphics Browser ทุกตัว
        •   ความสามารถดานการนําเสนอแบบภาพเคลื่อนไหว (GIF Animation)




        อยางไรก็ตามไฟลชนิดนี้ก็มีจดดอยในเรื่องของการแสดงสี ซึ่งแสดงไดเพียง 256
                                    ุ                                                     สี   ทําให
การนําเสนอภาพถาย หรือภาพที่ตองการความคมชัดหรือภาพสดใส จะตองอาศัยฟอรแมตอื่น

        ไฟล .GIF มี 2 รูปแบบ ไดแก
        •   GIF87 พัฒนาขึ้นในป ค.ศ. 1987
         เปนไฟลกราฟกรุนแรกที่สนับสนุนการนําเสนอบนอินเทอรเน็ต   เปนไฟลทมีขนาดเล็กและแสดงผลสี
                                                                             ่ี
ไดเพียง 256 สี และกําหนดใหแสดงผลแบบโครงรางได (Interlace)

        •   GIF89A พัฒนาขึ้นในป ค.ศ. 1989
        เปนไฟลกราฟกที่พัฒนาตอจาก  GIF87     โดยเพิ่มความสามารถการแสดงผลแบบพื้นโปรงใส
(Transparent) และการสรางภาพเคลื่อนไหว (GIF Animation) ซึ่งเปนไฟลกราฟกที่มความสามารถพิเศษ
                                                                             ี
โดยนําเอาไฟลภาพหลายๆ ไฟลมารวมกันและนําเสนอภาพเหลานั้นโดยอาศัยการหนวงเวลา มีการใสรูปแบบ
การนําเสนอลักษณะตางๆ (Effects)

การบีบอัดภาพ
          เทคนิคการบีบอัดภาพสกุล GIF เปนเทคนิคการบีบอัดคงสัญญาณ LZW (Lempel-Ziv-Welch)
Lossless compression โดยขอมูลเดิมจะถูกสรางขึ้นใหมดวยวิธสราง Index สีจากสีทซ้ําๆ และใกลเคียงกัน
                                                           ี                   ี่
โดยจะ Scan แนวตั้งของภาพทั้งหมด และ Scan แนวนอนของภาพทั้งหมด และเปรียบเทียบวาแนวใดได
ขอมูลที่จะบันทึกเปนไฟลนอยกวากัน
       LZW เปนชื่อยอของนักวิจัยชาวอิสราเอล Abraham Lempel และ Jacob Zif ซึ่งไดเผยแพรผลงานไว
ในเอกสารของ IEEE ภายใตชอเรียก LZ77 และ LZ78
                          ื่

Transparent
          คุณสมบัติของไฟลนี้ในดาน Transparent หรือความโปรงแสงของภาพนับเปนคุณสมบัตที่เดนมาก
                                                                                     ิ
ซึ่งเปนคุณลักษณะของภาพที่มีการดรอป (Drop) การแสดงสีที่ตองการ มักจะเปนสีพื้น เพื่อใหสที่เลือก
                                                                                         ี
โปรงใส และแสดงผลตามสีพนของเบราวเซอร
                           ื้
3



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




        การแสดงผลภาพปกติ                            การแสดงผลภาพแบบ Interlace

การเลือกใชภาพฟอรแมต GIF
      ภาพที่เหมาะตอการบันทึกในรูปแบบ GIF คือภาพที่มีสีไมมากนัก ภาพขนาดใหญและมีสทึบ เชน
                                                                                    ี
ภาพจากคลิปอารตของ Microsoft Office ภาพวาดลายเสน ภาพตราสัญลักษณ ขอความกราฟก เปนตน




ไฟลสกุล JPG (Joint Photographer’s Experts Group)
        เนื่องจากไฟลภาพสกุล GIF แสดงผลไดเพียง 256 สี จึงมีการพัฒนาไฟลภาพสกุล JPEG เพื่อ
สนับสนุนสีไดถง 24 bit และคุณสมบัติอื่นๆ อีกคือ
               ึ
        •   สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุกระบบ ไมวาจะ
            ใช Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได
        •   สามารถกําหนดคาการบีบไฟลไดตามทีตองการ ดวยเทคนิคการบีบอัดคงสัญญาณหลัก (Lossy
                                             ่
            compression) โดยนําบางสวนของภาพที่ซาซอนออกไป คงไวเฉพาะขอมูลสําคัญเทานั้น
                                                 ้ํ
        •   มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Progressive คลาย Interlaced
        •   มีโปรแกรมสนับสนุนการสรางจํานวนมาก
        •   เรียกดูไดกับ Graphics Browser ทุกตัว
        •   อยางไรก็ตามไฟลภาพสกุลนีก็มีจุดดอย คือ
                                     ้
            o พื้นของภาพโปรงใสไมได
            o ถามีการบันทึกซ้ําหลายๆ ครั้ง จะทําใหคุณภาพของภาพลดลงไปดวย

การเลือกใชภาพฟอรแมต JPEG
           ภาพที่เหมาะตอการบันทึกในรูปแบบ JPEG คือภาพถาย ภาพที่วาดดวยดินสอสี ถายสี หรือระบาย
ดวยสีน้ํา และภาพอื่นๆ ที่มีการเปลี่ยนแปลงระหวางสี
4


ไฟลสกุล PNG (Portable Network Graphics)
        ไฟลสกุลลาสุดที่นําจุดเดนของไฟล GIF และ JPEG มาพัฒนารวมกัน ทําใหภาพในสกุลนีแสดงผลสี
                                                                                        ้
ไดมากกวา 256 สี และยังสามารถทําพื้นภาพใหโปรงใสได จึงเปนไฟลภาพที่ไดรับความนิยมมากในปจจุบัน
ดวยอีกสกุลหนึง คุณสมบัติของภาพคือ
              ่
        •   สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุกระบบ ไมวาจะ
            ใช Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได
        •   ขนาดไฟลเล็ก ดวยเทคนิคการบีบอัดคงสัญญาณ LZW
        •   สามารถทําภาพโปรงใสจากสีพื้น 256 ระดับ
        •   แสดงภาพแบบสอดประสานเชนเดียวกับ GIF โดยมีความคมชัดที่ดีกวา
        •   มีคุณสมบัติ Gamma ทําใหภาพสามารถปรับตัวเองไดตามจอภาพ และปรับระดับความสวางที่
            แทจริงตามทีควรจะเปน
                        ่

ภาพแบบเวกเตอรและบิตแมป (Vector & Bitmap)
         การสรางงานกราฟกดวยคอมพิวเตอร มีหลักการสรางภาพ 2 ลักษณะใหญๆ ไดแก ภาพกราฟกแบบ
เวอรเตอร และบิตแมป

ภาพกราฟกแบบเวอรเตอร (Vector)
        เปนภาพทีสรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสีของเสนนั้นๆ ซึ่งสราง
                 ่
จากการคํานวณทางคณิตศาสตร เชน ภาพของคน ก็จะถูกสรางดวยจุดของเสนหลายๆ จุด เปนลักษณะของ
โครงราง (Outline) และสีของคนก็เกิดจากสีของเสนโครงรางนั้นๆ กับพื้นที่ผวภายในนั่นเอง เมื่อมีการแกไข
                                                                        ิ
ภาพ ก็จะเปนการแกไขคุณสมบัติของเสน ทําใหภาพไมสูญเสียความละเอียด เมื่อมีการขยายภาพนั่นเอง
        ภาพแบบ Vector ที่หลายๆ ทานคุนเคยก็คอ ภาพ .wmf ซึ่งเปน clipart ของ Microsoft Office
                                             ื
นั่นเอง นอกจากนี้คุณจะสามารถพบภาพฟอรแมตนี้ไดกับภาพในโปรแกรม Adobe Illustrator หรือ
Macromedia Freehand จะสังเกตไดงายวาภาพลักษณะนี้ จะมีจดจับ (Handle) ชวยใหการแกไข ยอขยาย
                                                        ุ
ขนาด หมุนภาพ ทําไดงาย สะดวก และรวดเร็ว
                    




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


พิกเซล (Pixel)
        พิกเซล (Pixel) เปนคําผสมของคําวา Picture กับคําวา Element หรือหนวยพื้นฐานของภาพ
เทียบไดกับ “จุดภาพ” 1 จุด แตละพิกเซลเปรียบไดกับสี่เหลี่ยมเล็กๆ ทีบรรจุคาสี โดยถูกกําหนดตําแหนงไว
                                                                    ่
บนเสนกริดของแนวแกน x และแกน y หรือในตารางเมตริกซสี่เหลียม ภาพบิตแมปจะประกอบดวยพิกเซล
                                                                 ่
หลายๆ พิกเซล




        จํานวนพิกเซลของภาพแตละภาพ จะเรียกวา ความละเอียด หรือ Resolution โดยจะเทียบจํานวน
พิกเซลกับความยาวตอนิว ดังนั้นจะมีหนวยเปนพิกเซลตอนิ้ว (ppi: pixels per inch) หรือจุดตอนิ้ว (dpi; dot
                     ้
per inch) ภาพขนาดเทานั้นแตมีความละเอียดตางกัน แสดงวาจํานวนพิกเซลตางกัน และขนาดของจุดพิกเซล
ก็ตางกันดวย
   




        เปรียบเทียบความละเอียดภาพ 72 dpi กับ 300 dpi

ระบบสีของคอมพิวเตอร
        ระบบสีของคอมพิวเตอร รวมถึงจอโทรทัศน เกิดจากการเปลงแสงสีหลัก 3 สี (เชนเดียวกับแมสี) คือ
สีแดง (Red) สีเขียว (Green) และ สีน้ําเงิน (Blue) เรียกรวมกันวา RGB โดยมีลักษณะการแสดงผล คือ ถาไม
มีแสดงผลสีใดเลยบนจอภาพจะแสดงเปน “สีดา” หากสีทุกสีแสดงผลพรอมกัน จะเห็นสีบนจอภาพเปน
                                               ํ
“สีขาว” สวนสีอื่นๆ เกิดจากการแสดงสีหลายๆ สี แตมคาแตกตางกัน การแสดงผลลักษณะนี้ เรียกวา
                                                          ี
การแสดงสีระบบ Additive




      การเกิดของสีตางๆ โดยแมสท้งสามสี มาจากคาความหนาแนนของแมสีทแตกตางกัน โดยมีคา
                                 ี ั                              ี่
ความหนาแนนตั้งแต 0 ถึง 255 เชนสีเหลืองสด เกิดจากสีแดงความหนาแนน 255 ผสมกับสีเขียว
ความหนาแนน 255 และสีน้ําเงินความหนาแนน 76 เปนตน
6


Indexed Color
         Indexed Color เปนโหมดสีทนิยมใชกับภาพ GIF โดยมีการเก็บสีเปนแผงสี (Color Palette) ไมเกิน
                                       ี่
256 สี จากปกติทสีในโหมด RGB จะเก็บคาสีไดเปนลานๆ สี ในการแสดงภาพคอมพิวเตอรจะใชการประมาณ
                    ี่
คาทีใกลเคียงที่สด หรือเลียนสีทดที่สด เพื่อนําเสนอภาพใหออกมาในผลที่ใกลเคียงความเปนจริง จํานวนสี
     ่            ุ             ี่ ี ุ
ของแผงสี สามารถกําหนดไดอิสระ เชนบางภาพอาจจะใชสีเพียง 12 สีก็ได ยิ่งจํานวนสีในแผงสีมีนอยเทาใด
ขนาดไฟลภาพก็จะเล็กลงไปดวย




ระบบสีทางการพิมพ
         ระบบสี Subtractive มีลักษณะที่ตรงขามกับ Additive โดยสีแตละสีจะไดจากการลบสีตางๆ ออกไป
                                                                                           
จากระบบ ดังนั้น หากไมมีการแสดงสีใดๆ จะแสดงผลเปนสีขาว ขณะที่การแสดงสีทุกสี จะปรากฏเปนสีดํา
และสีหลัก หรือแมสีของระบบนี้ จะประกอบดวย สีฟา (Cyan) สีมวงแดง (Magenta) และสีเหลือง (Yellow)
หรือระบบ CMY เปนระบบสีทใชกับงานสิ่งพิมพ ซึ่งมักจะรวมเอาสีดํา มาเปนแมสดวย จึงเรียกวาระบบ CMYK
                            ี่                                            ี
(Cyan, Magenta, Yellow, blacK) ในการพิมพ 4 สี ภาพสีจะถูกแปลงออกเปนคาตางๆ ของทั้ง 4 สี และคา
เหลานั้นจะถูกแทนดวยจุดเล็กๆ ซึ่งสามารถเห็นไดชดเจนถาใชแวนขยายสอง
                                                ั




ชื่อไฟลภาพ
        ภาพทีใชในการพัฒนาเว็บไซต มีหลักการตั้งชื่อที่แตกตางจากปกติ โดยมีหลักดังนี้
             ่
        •   ประกอบดวยตัวอักษรภาษาอังกฤษตัวพิมพเล็ก ผสมตัวเลขเทานั้น หามมีชองวาง หรือ
                                                                              
            เครื่องหมายใดๆ ยกเวน Dash (-) โดยหลีกเลี่ยงการใชเครืองหมาย underscore “_” เพราะจะ
                                                                  ่
            สรางปญหาเมือเปนสวนหนึ่งของ URL
                         ่
        •   หากเปนชุดของภาพ ใหระบุ Series ดวยตัวเลขในรูปแบบ xxx
        •   สวนขยายของไฟล จะระบุอัตโนมัติตามฟอรแมตของภาพทีเลือกใช
                                                             ่

รูปภาพดิจิทัล
        การนําเสนอรูปภาพเพื่อประกอบการนําเสนอในลักษณะตางๆ โดยภาพที่ไดมานั้นมีทั้งจากภาพทีถาย
                                                                                           ่
ดวยกลองถายภาพระบบดิจทล (Digital Camera) ภาพจากเครื่องกราดภาพ (Scanner) ซึ่งมีความแตกตางทั้ง
                       ิ ั
ในดานความละเอียด (Resolution) ขนาดภาพ (Image Size) และแนวของภาพ (Orientation) เมื่อมีการนํา
ภาพไปใชในลักษณะตางๆ จึงควรมีการเตรียมภาพใหเหมาะสมกับรูปแบบการนําเสนอ เพื่อใหการแสดงผล
สามารถแสดงไดรวดเร็ว, การเก็บบันทึกประหยัดพื้นที่ของสื่อบันทึก
7



มาตรฐานรูปแบบการนําเสนอภาพ
            ภาพ       ภาพ     ภาพ                Presentation       Database      Website      Preview
          ตนฉบับ      สื่อ  สําหรับ
                   สิ่งพิมพ Digital
                             Archive
Format     JPEG,      TIFF    JPEG                    JPEG             JPEG         PNG,        PNG,
            TIFF                                                                    JPEG,       JPEG,
                                                                                     GIF         GIF
Resolution     Up to     Up to        72 dpi          72 dpi          72 dpi        72 dpi      72 dpi
             350 dpi    350 dpi
Size           Up to     Up to       Up to           Up to           ≈ 300 ×       ≈ 300 ×     ≈ 100 ×
              1840 ×    1840 ×      1024 ×         1024 × 768       250 pixels       250         100
               1232      1232      768 pixels        pixels                         pixels      pixels
               pixels    pixels
From          Digital                                    Image Editor
             Camera,
             Scanner
Folder       original     DTP        archive         present        database         web       preview
File Name    ตามจริง                   เปลี่ยนตามขอกําหนด โดยแยกเปนโฟลเดอรเฉพาะ


Format          รูปแบบของไฟลภาพที่ใชในการจัดเก็บภาพ โดยปกติไฟลภาพจะมีขนาดโตมาก การเลือก
                รูปแบบที่เหมาะสมตอการนําเสนอจะชวยใหภาพมีขนาด (File Size) เล็กลง โดยคงความ
                คมชัดไวในระดับดี อันเปนการประหยัดพื้นที่ของสื่อบันทึกขอมูลไดเปนอยางดี
TIFF            รูปแบบของการจัดเก็บภาพแบบ Tagged-Image File Format ซึ่งเปนรูปแบบที่ใชเก็บภาพ
                พรอมรายละเอียดตางๆ เชน เลเยอร (Layer), Annotation, โหมดภาพทั้งระบบ CMYK,
                RGB, Lab Color ตลอดจนขอมูลประกอบอื่นๆ ตามตนฉบับเดิมของภาพ จึงเปนรูปแบบที่
                เหมาะสมตอการเก็บบันทึกภาพตนฉบับ และภาพสําหรับใชประกอบการสรางสื่อสิ่งพิมพ
                สวนขยายของไฟลรูปแบบนี้คอ .tif
                                              ื
Resolution      ภาพจากกลองบันทึกภาพระบบดิจทัล และเครื่องกราดภาพ จะเปนภาพแบบบิตแมป
                                                  ิ
                (Bitmap) ซึ่งมีความสัมพันธกบความละเอียดของภาพ ดังนันการกําหนดความละเอียดของ
                                                ั                          ้
                ภาพที่เหมาะสม จะเปนการชวยประหยัดพื้นทีของสื่อบันทึกไดเปนอยางดี หนวยของความ
                                                            ่
                ละเอียดเรียกวา จุดตอนิ้ว (Dot per Inch หรือ Pixel per Inch) ทั้งนี้ภาพตนฉบับที่ไดจาก
                เครื่องกราดภาพ ควรกําหนดความละเอียดไวที่ 300 dpi ไวกอน แลวคอยทําการเปลียน     ่
                ความละเอียดใหเหมาะสมตอไปดังรายการที่กาหนด   ํ
Size            หมายถึงขนาดของภาพที่วดในหนวย Pixel ประกอบดวยคาความกวาง (Width) และความ
                                            ั
                ยาว (Height) ของภาพ ขนาดของภาพมีสวนสัมพันธกับการนําภาพไปใชงาน โดยภาพ
                ตนฉบับทั้งจากกลองบันทึกภาพระบบดิจิทล และเครื่องกราดภาพ ควรกําหนดขนาดภาพให
                                                         ั
                โตเปนพิเศษ เพื่อใชเปนภาพตนฉบับ ทั้งนี้ไมควรต่ํากวา 1024 × 768 pixels และปรับ
                ลดลงตามลักษณะการนําไปใชที่กําหนดในรายการขางตน
From            หมายถึงการไดมาของภาพ อันประกอบดวยภาพจากกลองบันทึกภาพดิจทัล และภาพจากิ
                เครื่องกราดภาพ
                •   ในกรณีทใชกลองบันทึกภาพดิจิทัล ควรกําหนด Image Size ของภาพใหมากกวา
                           ี่
                    1024 × 768 pixels แบบ Fine Image
                •  ภาพจากเครื่องกราดภาพ ควรกําหนด Image Size ของภาพใหมากกวา 1024 × 768
                   pixels หรือกําหนด % ของการสแกนภาพไวประมาณ 150 – 250% ของภาพถาย
                   ตนฉบับ และกําหนดความละเอียด (Resolution) ของภาพไวที่ 300 dpi
Folder          การตั้งชื่อโฟลเดอรสาหรับแยกประเภทของภาพตามรูปแบบการใชงาน
                                    ํ
8



                                                 บทที่ 2 เตรียมภาพใชงาน


        การสรางภาพนอกจากใชภาพที่มีอยูเดิม หรือการสรางใหมดวยโปรแกรมกราฟก ยังสามารถเตรียม
ภาพจากแหลงขอมูลอื่นไดเชน ภาพถายทีผานเครื่องกราดภาพ (Scanner) หรือภาพจากกลองถายภาพ
                                      ่
ระบบดิจิทล (Digital Camera)
         ั

ภาพถูกใจกับ Scanner
          “วันปใหมไปเทียวภาคเหนือ ถายภาพสวยๆ มาเยอะมาก วันเกิดปนี้ รวมกลุมกับเพื่อนชมบรรยากาศ
                         ่
ริมน้ํา ไดภาพนาประทับใจ วันลอยกระทง กระทงลอยเปนสายสวยสด เก็บบันทึกไวในภาพถายเรียบรอยแลว”
ภาพสวยๆ ตางๆ เหลานี้อยากเผยแพรผานเครือขายอินเทอรเน็ต ไมใชเรื่องยาก ดวยความสามารถของอุปกรณ
ที่ชื่อ “สแกนเนอร (Scanner)” ทําใหการเปลี่ยนภาพถายเปนภาพดิจทัล เปนเรื่องงายเหมือนปอกกลวยเขา
                                                                  ิ
ปาก
          สแกนเนอร เปนอุปกรณตอเชื่อมคอมพิวเตอรแบบกราฟก ที่มีหนาที่
ในการเปลี่ยนแปลงภาพตนฉบับ (รูปถาย ตัวอักษรบนหนากระดาษ ภาพวาด)
ใหเปนขอมูลดิจิทัล       เพื่อใหคอมพิวเตอรสามารถนําขอมูลดังกลาวมาใช
ประโยชนในการแสดงผลที่หนาจอ ทําใหสามารถแกไข ตกแตงเพิ่มเติม และ
จัดเก็บขอมูลได ในปจจุบนสแกนเนอรแบงได 2 รูปแบบคือ
                         ั
        •   แบบใสกระดาษแลวกระดาษจะเลื่อนผานหัวสแกนเอง           เรียกวา
            Sheet - Fed Scanner
        •   แบบวางกระดาษแลวใหหัวสแกนเลื่อนอานขอมูลจากกระดาษ โดยกลไกการทํางานคลายๆ กับ
            เครื่องถายเอกสาร เรียกวา Flatbed Scanner
        แมวาสแกนเนอรจะมีหลากหลายรุน หลากหลายยีหอ แตการใชงานไมแตกตางกันมากนัก ความรูใน
                                                         ่
การใชสแกนเนอรรุนหนึ่ง ก็สามารถนําไปประยุกตใชกับรุนอืน ยี่หออื่นไดเชนกัน โดยมีหลักการสแกนพื้นฐาน
                                                           ่
ดังนี้
        •   เลือกโหมดภาพที่เหมาะสม – โดยปกติสแกนเนอรจะตรวจสอบประเภทของขอมูลที่จะสแกนโดย
            อัตโนมัติ ดังนั้นหากนําเอกสารเนื้อหาหนังสือไปสแกน โปรแกรมจะกําหนดโหมดเปนขาวดํา
            หรือลายเสน แตถานําภาพถายไปสแกน ก็จะใชโหมดสี อยางไรก็ตามผูใชก็สามารถกําหนดหรือ
                                                                           
            เปลี่ยนแปลงโหมดใหเหมาะสมกับการใชงานไดเชนกัน
        •   กําหนดความละเอียดใหเหมาะสมกับลักษณะการนําไปใชงาน – ความละเอียดของภาพ หรือ
            Resolution ไมควรกําหนดไวสูงเกินไป โดยเฉพาะถาตองการนํามาใชงานกับเว็บเพจ เพราะทํา
            ใหเสียเวลาสแกนนานเกินไป รวมทั้งเสียพื้นที่ในการจัดเก็บภาพ
        •   กําหนดขนาดของภาพใหเหมาะสม - ขนาดของภาพ (Size) สําหรับการทําเว็บ ควรกําหนดให
            เทากับภาพตนฉบับ เพื่อไมใหเกิดปญหาภาพเบลอในขั้นตอนการตกแตงดวยโปรแกรมแตงภาพ

หลักการสแกนภาพ
         1. เตรียมภาพตนฉบับ ไดทั้งขอความ, ภาพขาวดํา และภาพสี (สแกนเนอรบางรุนสามารถ
            สแกนวัตถุ 3 มิติได เชน กระปอง, นาฬิกา ฯลฯ
         2. เรียกโปรแกรมสแกนภาพ ตัวอยางโปรแกรมสแกนของสแกนเนอรรุน Lexmark X1100
9


            3.   นําภาพหรือวัตถุทตองการสแกน วางบนกระจกของสแกนเนอร ปดฝาของเครื่องกราดภาพ
                                 ี่
                 เพื่อปองกันแสงภายนอก




            4. ตั้งคาการสแกนภาพ เชน โหมดภาพ, ขนาดภาพ และความละเอียด
                     •   ภาพทีตองการนําไปใชในงานพิมพ ควรกําหนดความละเอียด 150 – 300 จุดตอนิ้ว
                              ่
                     •      ภาพทีตองการใชในการสรางเอกสารเว็บ ควรกําหนดความละเอียด 72 จุดตอนิ้ว
                                 ่
            5.   คลิกปุมเริ่มสแกน (แสดงดวยคําวา Preview หรือ Start Scan เปนตน) ชวงนี้จะใชเวลา
                 พอสมควรสําหรับสแกนเนอรบางรุน ทั้งนี้ระหวางทีสแกนเนอรทางาน ไมควรขยับภาพหรือ
                                                                 ่           ํ
                 วัตถุ
            6.   เมื่อเครื่องสแกนภาพตนฉบับ ภาพจะปรากฏบนหนาตางโปรแกรม ผูใชสามารถกําหนดหรือ
                                                                                 
                 เลือกขอบเขตที่ตองการได หลังจากนั้นคลิกปุม Final หรือ Save (ตามแตระบบ)
            7.   โปรแกรมจะแปลงสัญญาณแลวสงภาพไปปรากฏบนหนาตางทํางานของโปรแกรมกราฟก
                 หรือบันทึกเปนไฟลภาพ (ตามแตระบบ)
                 •   การบันทึกไฟล มีหลักพิจารณาดังนี้
                     o หากตองการนําภาพนั้นไปใชเปนภาพตนฉบับสําหรับงานสิ่งพิมพ และมีพื้นที่ของ
                        ฮารดดิสกเหลือจํานวนมาก แนะนําใหบันทึกไฟลภาพดวยฟอรแมต TIF เนื่องจาก
                        จะไดไฟลภาพที่มีความสมบูรณครบถวน
                     o ถาตองการภาพเพื่อประกอบเอกสารเว็บโดยเฉพาะ            สามารถเลือกฟอรแมตเปน
                        JPEG ไดเลย ซึ่งจะชวยประหยัดพื้นที่ของฮารดดิสกได

ภาพทันใจดวยกลองถายภาพดิจิทัล
        กลองถายภาพดิจิทล นับเปนอุปกรณอิเล็กทรอนิกสที่ไดรับความนิยมอยางสูงในปจจุบัน เนื่องจากมี
                            ั
ขนาดเล็ก กะทัดรัด พกพาไดสะดวก โอนถายเขาสูคอมพิวเตอรไดทันที เผยแพรผานอินเทอรเน็ตไดรวดเร็ว
โดยอุปกรณตวเล็กชิ้นนี้จะทํางานดวยตัวสรางประจุไฟฟาที่เรียกวา CCD (Charge Coupled Device) ภายใน
             ั
ตัวกลอง ผานการกระตุนดวยแสงที่ผานเขามาทางเลนส และสงผลใหเกิดภาพบนสื่อบันทึกภายในกลอง เชน
                                  
Memory Stick, Memory Card สําหรับทานทีสนใจอุปกรณไฮเทคชิ้นนี้ และอยากไดเปนเจาของ มี
                                                  ่
หลักพิจารณาดังนี้
        • ดูงบในกระเปา - กอนซื้อก็คงตองดูงบประมาณในกระเปากอน ปจจุบันราคาอุปกรณนี้อยูในชวง
5,000 – 50,000 บาท เพราะฉะนั้นจากงบประมาณทีทานมี ก็คงจะชวยใหพิจารณาไดงาย
                                              ่
         • จุดประสงคในการใชงาน – สําหรับทานทีมงบพอประมาณ ก็คงมาดูที่จุดประสงคในการใชงาน
                                                       ่ ี
สําหรับทานที่นามาใชกับงานพัฒนาเว็บไซต เลือกไดงายมากเลย เพราะเลือกไดทกรุน แลวแตกาลังทรัพย
                  ํ                                                          ุ              ํ
เนื่องจากกลองตัวนี้พัฒนาขึ้นมาเพื่อสนับสนุนงานเว็บเปนหลัก  แตถาทานตองการใชเพื่อบันทึกภาพแทน
กลองจริง หรือใชเก็บภาพสําหรับใชในงานสิงพิมพ ก็คงตองเตรียมงบใหสูงขึ้นสักนิด เพื่อเลือกกลองที่มี
                                             ่
คุณภาพที่ดทสด เทาที่กําลังทรัพยจะเอื้ออํานวย
           ี ี่ ุ
         • ความละเอียดของภาพ – ความละเอียดของภาพ เปนคุณสมบัตชนิดหนึ่งที่ทาใหราคากลองนี้
                                                                         ิ            ํ
แตกตางกันออกไป อยางที่ไดกลาวไวแลวภาพสําหรับงานเว็บตองการความละเอียดเพียง 72 จุดตอนิ้ว แตถา
ทานตองการใชภาพถายกับงานสิ่งพิมพ ก็ควรดูกลองฯ ทีรอบรับไดมากกวา 150 จุดตอนิ้ว (ประมาณ 2 ลาน
                                                     ่
พิกเซลขึ้นไป)
       • คุณสมบัติเฉพาะอื่นๆ – กลองแตละรุน แตละยี่หอ มีคุณสมบัติเฉพาะแตกตางกันออกไป ดังนั้น
หากมีงบประมาณที่เพียงพอ ลองพิจารณาองคประกอบนี้ดวย เพื่อใหตรงกับความตองการของทานมากทีสุด
                                                                                         ่

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



        •   ใชแฟลซใหเหมาะสม เพื่อใหไดภาพที่สวางคมชัด
        •   ไมถายภาพสะทอน หรือผานกระจก
        เมื่อไดภาพทีตองการ
                      ่           สามารถโอนเขาสูคอมพิวเตอรไดสะดวกเชนกัน        (แมวาจะตองพกพา
อุปกรณเสริมอีกหลายชิ้น) แมวาแตละรุน แตละยี่หอจะมีวิธีการที่แตกตางกันออกไป เชนบางรุนบันทึกลง
แผนดิสก 3.5 นิ้วก็สามารถนําแผนดิสกมาใสใน Disk Drive แลวเรียกใชงานไดทันที สําหรับปจจุบันนิยมถาย
โอนผาน USB Port ซึ่งตองอาศัยโปรแกรมเฉพาะ (Driver) ซึ่งใชงานไดงายและสะดวก อยางไรก็ตามคงไม
สามารถแนะนําในเอกสารนี้ได แตผูเขียนหวังวาคงไมยากเกินไปสําหรับผูสนใจที่จะศึกษาจากเอกสารคูมือที่
                                                                                                   
แนบมากับกลองที่ทานซื้อ
                    
         สําหรับโลกดิจทัลในอนาคตเราคงเห็นอุปกรณนําเขาขอมูลทันสมัยอีกหลายลักษณะ อยางเชนการนํา
                       ิ
กลองดิจิทลมาผสมรวมกับโทรศัพทมือถือ (ออกเผยแพรและคนไทยใชกนหลายทานแลว) ซึ่งเปนเทคโนโลยี
           ั                                                     ั
ที่นาสนใจ นาติดตามตอไป

การจับภาพดวยเทคนิค Screen Capture
         หลายๆ คนคงชอบเลนเกม หรือเลนอินเทอรเน็ต โดยเฉพาะการเขาไปยังเว็บไซตตางๆ สิงหนึ่งที่คด
                                                                                       ่         ิ
เหมือนกัน ก็คือ รูปภาพจากเกม หรืออินเทอรเน็ตสวยมาก อยากนํามาเก็บไวในเครื่องตัวเอง เพื่อวาตอไป
สามารถนําไปใชงานตางๆ ได เชน นําไปประกอบเมื่อตองทํารายงาน พิมพ ส.ค.ส. สวยๆ หรือใชในงาน
นําเสนอจาก PowerPoint และบางทานอาจจะตองรับผิดชอบผลิตสิ่งพิมพใหกับหนวยงาน โดยนํารูปภาพจาก
หนาจอโปรแกรมตางๆ มาใชประกอบในเอกสาร วิธีการพิมพงานโดยเวนที่วาง แลวนํารูปภาพ หรือรูปถายมา
                                                                     
แปะ คุณคงจะเคยทํามาแลวใชไหมครับ วิธลาสมัยแลวครับ ในยุคคอมพิวเตอรระบบ Windows มีวิธีทสะดวก
                                         ี                                                 ี่
รวดเร็ว และสวยงามกวาครับ ซึ่งรูจกกันโดยวิธี การจับจอภาพ (Screen Capture)
                                  ั
        ดวยความสามารถจับจอภาพ (Screen Capture) ไมวาคุณอยากไดรูปอะไร ภาพไหน บนจอภาพ
โปรแกรมแบบไหน เพียงแตขอใหแสดงผลบนจอภาพผานระบบ Windows ได คุณก็สามารถนําภาพนันมาใช      ้
งานไดสะดวก รวดเร็ว จะนํามาใชทันที หรือเก็บเปนไฟลรูปภาพก็ได ตามแตคุณตองการ สําหรับเทคนิควิธีใน
การจับจอภาพมีหลากหลายวิธี หลายรูปแบบ แตสามารถแบงเปนประเภทใหญๆ ได 2 ลักษณะ คือ
        •   การจับจอภาพโดยใชความสามารถ Clipboard ของโปรแกรม Windows
        •   การจับจอภาพโดยใชโปรแกรมจับจอภาพเฉพาะ เชน SnagIT, ScreenPrint, Quick Screen
            Capture

การจับจอภาพโดยใชความสามารถ Clipboard
        การจับจอภาพโดยใชความสามารถของ Clipboard เปนวิธีที่นิยมสะดวกที่สด เพราะ Windows
                                                                         ุ
เตรียมความสามารถนีใหโดยตรง ไมตองอาศัยโปรแกรมพิเศษใดๆ นอกจากโปรแกรม PaintBrush
                  ้
        •   เปดโปรแกรมทีตองการจับจอภาพ เชน เกม, อินเทอรเน็ต, Microsoft Word
                         ่
        •   เรียกหนาจอทีตองการจับภาพ
                         ่
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop
Web Graphic with Adobe Photoshop

More Related Content

More from Boonlert Aroonpiboon (20)

Excel quiz
Excel quizExcel quiz
Excel quiz
 
Scival for Research Performance
Scival for Research PerformanceScival for Research Performance
Scival for Research Performance
 
20190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-420190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-4
 
20190409 social-media-backup
20190409 social-media-backup20190409 social-media-backup
20190409 social-media-backup
 
20190220 open-library
20190220 open-library20190220 open-library
20190220 open-library
 
20190220 digital-archives
20190220 digital-archives20190220 digital-archives
20190220 digital-archives
 
OER KKU Library
OER KKU LibraryOER KKU Library
OER KKU Library
 
Museum digital-code
Museum digital-codeMuseum digital-code
Museum digital-code
 
OER MOOC - Success Story
OER MOOC - Success StoryOER MOOC - Success Story
OER MOOC - Success Story
 
LAM Code of conduct
LAM Code of conductLAM Code of conduct
LAM Code of conduct
 
RLPD - OER MOOC
RLPD - OER MOOCRLPD - OER MOOC
RLPD - OER MOOC
 
New Technology for Information Services
New Technology for Information ServicesNew Technology for Information Services
New Technology for Information Services
 
New Technology for Information Services
New Technology for Information ServicesNew Technology for Information Services
New Technology for Information Services
 
digital law for GLAM
digital law for GLAMdigital law for GLAM
digital law for GLAM
 
20180919 digital-collections
20180919 digital-collections20180919 digital-collections
20180919 digital-collections
 
Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)
 
20180828 digital-archives
20180828 digital-archives20180828 digital-archives
20180828 digital-archives
 
Local Wisdom Information : How to
Local Wisdom Information : How toLocal Wisdom Information : How to
Local Wisdom Information : How to
 
201403 etda-library-settup
201403 etda-library-settup201403 etda-library-settup
201403 etda-library-settup
 
201403 etda-library
201403 etda-library201403 etda-library
201403 etda-library
 

Web Graphic with Adobe Photoshop

  • 1. สารบัญ บทที่ 1 เว็บกราฟก .................................................................................................................. 1 ไฟลสกุล GIF (Graphics Interlace File) ................................................................................. 2 การบีบอัดภาพ................................................................................................................. 2 Transparent .................................................................................................................. 2 Interlaced ..................................................................................................................... 3 การเลือกใชภาพฟอรแมต GIF............................................................................................. 3 ไฟลสกุล JPG (Joint Photographer’s Experts Group) .............................................................. 3 การเลือกใชภาพฟอรแมต JPEG........................................................................................... 3 ไฟลสกุล PNG (Portable Network Graphics) .......................................................................... 4 ภาพแบบเวกเตอรและบิตแมป (Vector & Bitmap) ..................................................................... 4 ภาพกราฟกแบบเวอรเตอร (Vector) ..................................................................................... 4 ภาพกราฟกแบบบิตแมป (Bitmap) ....................................................................................... 4 พิกเซล (Pixel) ................................................................................................................... 5 ระบบสีของคอมพิวเตอร ........................................................................................................ 5 Indexed Color................................................................................................................ 6 ระบบสีทางการพิมพ ............................................................................................................. 6 ชื่อไฟลภาพ ....................................................................................................................... 6 รูปภาพดิจทัล ..................................................................................................................... 6 ิ มาตรฐานรูปแบบการนําเสนอภาพ ........................................................................................ 7 บทที่ 2 เตรียมภาพใชงาน......................................................................................................... 8 ภาพถูกใจกับ Scanner ......................................................................................................... 8 หลักการสแกนภาพ........................................................................................................... 8 ภาพทันใจดวยกลองถายภาพดิจิทล ......................................................................................... 9 ั การจับภาพดวยเทคนิค Screen Capture .................................................................................10 การจับจอภาพโดยใชความสามารถ Clipboard .......................................................................10 การจับจอภาพดวยโปรแกรม ScreenPrint 32 ........................................................................12 การจับภาพบางสวนของจอภาพไวใน Clipboard .................................................................13 การเซฟภาพ (Save) จากหนาเว็บเพจ .....................................................................................14 รูปภาพที่เปนภาพชิ้นๆ ที่เรียกวา Clipart ...............................................................................14 รูปภาพที่นํามาใชแสดงผลเปนพื้นของเว็บ ที่เรียกวา Background ..............................................14 บทที่ 3 Image Viewers .........................................................................................................15 การดาวนโหลด ..................................................................................................................15 การเรียกใชงานโปรแกรม......................................................................................................15 แสดงภาพ 1 ภาพตอ 1 จอ ...................................................................................................16 การแสดงภาพหลายภาพใน 1 จอ (Thumbnail View Mode)........................................................17 นําเสนอภาพแบบ Slide Show...............................................................................................17 พิมพภาพ (Contact Sheet)..................................................................................................18 สรางคลังภาพสําหรับนําเสนอบนเว็บ .......................................................................................19 บทที่ 4 Adobe PhotoShop .....................................................................................................20 การเรียกใชโปรแกรม ...........................................................................................................20 แถบชื่อเรื่อง (Title Bar) ...................................................................................................21 แถบเครื่องมือ .................................................................................................................21 Option Bar ...................................................................................................................22 Status Bar....................................................................................................................22 Palettes .......................................................................................................................23 หนวยวัด ...........................................................................................................................24 ภาษาไทยกับ PhotoShop ....................................................................................................24 จัดการไฟลภาพ .................................................................................................................25 เปดไฟลภาพ (Open File).................................................................................................25 การสรางงานใหม (New File).............................................................................................25 ตรวจสอบขนาดของจอภาพทีใชงาน ....................................................................................26 ่ ตัวอยางขนาดของภาพกราฟก.........................................................................................26 จัดเก็บภาพ (Save File) ...................................................................................................27 การจัดเก็บภาพ (Save File) สําหรับภาพตนฉบับ .................................................................27 การจัดเก็บภาพ (Save) ภาพในฟอรแมต JPG .....................................................................28
  • 2. การจัดเก็บภาพ (Save) ภาพในฟอรแมต GIF87..................................................................28 การจัดเก็บภาพ (Save) ภาพในฟอรแมต GIF89 - Transparent .............................................29 คําสั่ง Save for Web....................................................................................................31 มุมมองของหนาตางภาพ ......................................................................................................31 ลําดับขั้นตอนสําคัญการออกแบบงานกราฟก .............................................................................32 โหมดภาพ ........................................................................................................................33 ความละเอียดของภาพ .........................................................................................................33 ขนาดของภาพ ...................................................................................................................33 บทที่ 5 File Browser .............................................................................................................34 เปดไฟล........................................................................................................................35 ลบไฟล .........................................................................................................................35 หมุนภาพ.......................................................................................................................35 เปลี่ยนชื่อไฟลภาพ..........................................................................................................36 ตัวอยางรูปแบบของการระบุชอไฟลใหม ............................................................................36 ื่ การใหลาดับความสําคัญของภาพ........................................................................................36 ํ บทที่ 6 ขอบเขตภาพ (Selection) .............................................................................................37 การเลือกภาพหรือสวนของภาพ (Selection) .............................................................................37 เครื่องมือ Marquee .........................................................................................................37 การยกเลิก Selection .......................................................................................................37 คากําหนดของ Marquee ...............................................................................................38 เครื่องมือ Lasso..............................................................................................................40 เครื่องมือ Magic Wand ....................................................................................................41 ยายตําแหนง Selection .......................................................................................................41 ขอบ Selection ใหโคงมน ....................................................................................................41 กรอบ Selection.................................................................................................................41 ขยาย Selection.................................................................................................................42 ยอ Selection ....................................................................................................................42 บันทึก Selection................................................................................................................42 เรียกใชงาน Selection .........................................................................................................42 สลับ Selection ..................................................................................................................42 ซอน Selection..................................................................................................................43 จัดแตงภาพดวย Selection ...................................................................................................43 ยายภาพ .......................................................................................................................43 คัดลอกภาพ...................................................................................................................43 ตัดบางสวนของภาพ ........................................................................................................43 ขยายพื้นที่ของหนาตางภาพ ..............................................................................................44 หมุนภาพ/พลิก หรือกลับภาพ.............................................................................................44 การยกเลิกคําสังการทํางาน (Undo)........................................................................................45 ่ บทที่ 7 เลเยอร .....................................................................................................................46 Layer Palette ...................................................................................................................46 สรางเลเยอรใหม ................................................................................................................46 เลเยอรใหมจากไฟลภาพอื่น ..............................................................................................47 เลือกเลเยอร......................................................................................................................48 ลบเลเยอร ........................................................................................................................49 ยายชั้นเลเยอร ...................................................................................................................49 ล็อกเลเยอร.......................................................................................................................49 เชื่อมเลเยอร .....................................................................................................................50 รวมเลเยอร........................................................................................................................50 กลุมเลเยอร ...................................................................................................................50 บทที่ 8 ปรับแตงภาพ..............................................................................................................51 การปรับความสวาง-มืดของภาพ..........................................................................................51 ตัวอยางการปรับความมืด/สวางของภาพ............................................................................52 การดึงสีออก ..................................................................................................................52 การปรับแตงโทนสี ...........................................................................................................53 การแทนทีสีในภาพดวยสีใหม .............................................................................................53 ่ การกลับสี ......................................................................................................................53 ใสลักษณะพิเศษของสีใหกับภาพ........................................................................................53
  • 3. เครื่องมือปรับแตงภาพ .........................................................................................................54 Rubber Stamp ..............................................................................................................54 Pattern Stamp...........................................................................................................54 Smudge Tool................................................................................................................55 Blur Tool......................................................................................................................55 Shapen Tool.................................................................................................................55 Dodge Tool ..................................................................................................................55 Burn Tool.....................................................................................................................55 Sponge Tool.................................................................................................................55 บทที่ 9 ฟลเตอร (Filter) .........................................................................................................56 กลุมคําสั่งฟลเตอร ..............................................................................................................56 Plug-ins...........................................................................................................................56 การยกเลิกฟลเตอร .............................................................................................................56 บทที่ 10 Animations GIF .......................................................................................................57 บทที่ 11 PhotoShop Action ...................................................................................................58 Action สําหรับยอขนาดภาพ .................................................................................................58 ขั้นบันทึก Action ............................................................................................................58 ขั้นบันทึกผลของ Action...................................................................................................59 ขั้นตรวจสอบคาบันทึกของ Action ......................................................................................59 การใชงาน Action เพื่อยอภาพหลายๆ ภาพพรอมๆ กัน ................................................................59 การบันทึก Action เปนไฟล...................................................................................................60 การติดตั้ง Action ...............................................................................................................61 บทที่ 12 Image Metadata .....................................................................................................62 การกําหนด Metadata ใหกับรูปภาพ.......................................................................................62 การคนรูปภาพจาก Metadata ................................................................................................63 บทที่ 13 สรางสรรคงานกราฟก .................................................................................................64 ปุม แบนเนอร กรอบลักษณะตางๆ...........................................................................................64 ปุมอยางงาย...................................................................................................................64 ปุมวงกลม......................................................................................................................64 ปุมรูปทรงอิสระ ...............................................................................................................64 ปุมเกลียวบิด ..................................................................................................................65 Chrome Bar..................................................................................................................66 ปุมเจล..........................................................................................................................67 เสนกราฟก ........................................................................................................................67 เสนกราฟกแบบระบุขนาด ..................................................................................................67 เสนกราฟกยึดหดไดในแนวนอน..........................................................................................68 เสนกราฟกจาก Brush ......................................................................................................69 แตงภาพดวย Selection .......................................................................................................70 ลบพื้นภาพ กรณีที่ภาพมีพื้นเปนลวดลาย ..............................................................................70 ลบพื้นภาพ กรณีที่สีพื้นเปนสีสีเดียว .....................................................................................70 เปลี่ยนสีพื้นของภาพ ........................................................................................................71 ภาพเกาเปนภาพใหม .......................................................................................................72 เงาวัตถุ .........................................................................................................................73 เงาของวัตถุหลายชิ้น........................................................................................................75 ซอนภาพดวยเทคนิค Masking & Gradient ..........................................................................76 การลบพื้นของภาพ กรณีทภาพมีพื้นเปนลวดลายดวยคําสั่ง Filter ...............................................76 ี่ แปลงภาพขาวดําเปนภาพสีแบบ Sepia ................................................................................77 แปลงภาพขาวดําเปนภาพสีดวยเทคนิคซอนสีภาพ ..................................................................78  เปลี่ยนภาพสีเปนภาพวาดลายเสน .......................................................................................78 ใส Effect ใหกับภาพ .......................................................................................................78 Barcode .......................................................................................................................79 ไฟฟาในอากาศ ..............................................................................................................79 ภาพลักษณะเคลื่อนไหว....................................................................................................80 ภาพ Sketch ..................................................................................................................81 ภาพสามมิตแบบ Sphere ..................................................................................................81 ิ ลายเสนแบบกราฟกสดใส .................................................................................................82 เปลวไฟ ........................................................................................................................82
  • 4. ลายน้ํา..........................................................................................................................83 ลายเสน ........................................................................................................................83 วัตถุ 3 มิติ .....................................................................................................................84 ลูกบอลกลมสามมิติ .........................................................................................................84 ขอบภาพลักษณะตางๆ.........................................................................................................85 ภาพขอบฟุง ...................................................................................................................85 กรอบภาพแบบกลม, วงรี ...................................................................................................86 กรอบภาพแบบมุมมน .......................................................................................................86 กรอบภาพรูปทรงอิสระ......................................................................................................86 กรอบภาพดวย Polygonal Lasso ........................................................................................87 ภาพ Background ..............................................................................................................87 Pattern ลายเสน .............................................................................................................87 Pattern ลักษณะตางๆ......................................................................................................88 Pattern จากรูปภาพ.........................................................................................................88 Background แบบผิวขรุขระ...............................................................................................88 Background ลายเมฆ ......................................................................................................89 Background แบบผิวลายไม ..............................................................................................89 ลวดลายสี่เหลียมสําหรับพื้นเว็บ ..........................................................................................89 ่ Background แบบ Star....................................................................................................90 ลายแผนฟลมดิจิทัลเรื่อง Matrix.........................................................................................90 Background ทองฟา .......................................................................................................91 ลวดลายแบบจุด ..............................................................................................................91 ขอความกราฟกสวยนาสนใจ .................................................................................................92 การลบขอความ...............................................................................................................93 การใสลกษณะพิเศษใหกบขอความ .....................................................................................93 ั ั ตัวอักษรซูม ...................................................................................................................93 ขอความลายเสน .............................................................................................................94 ขอความจากรูปภาพ .........................................................................................................95 ตัวอักษรไฟ ...................................................................................................................95 สรางรูปทรงอิสระดวย Pen ....................................................................................................96 วาดตนคริสตมาส.............................................................................................................96 ปรับแตงรูปทรงที่วาดดวย Pen ...........................................................................................96 รูปทรงอิสระ ...................................................................................................................97 รูปทรงอิสระ 2 ................................................................................................................98 สราง Path จากภาพตนฉบับ ..............................................................................................99 การตัดภาพ ..................................................................................................................... 100 Interfaces Design........................................................................................................... 101 กรอบเมนู .................................................................................................................... 101 วงแหวน...................................................................................................................... 101 Color Animation ............................................................................................................. 102 Text Zoom .................................................................................................................... 104
  • 5. 1 บทที่ 1 เว็บกราฟก เว็บไซต สื่อนําเสนอที่มีอทธิพลสูงมากสื่อหนึ่งของโลกยุคไซเบอร ิ เนนการนําเสนอทั้งขอความ ภาพนิ่ง ภาพเคลื่อนไหว เสียง ภาพยนตร องคกรตางๆ สถานศึกษา บุคคลที่ตองการเผยแพรผลงาน ตางให ความสนใจกับการนําเสนอขอมูล ผลงานในรูปของสื่อชนิดนีมากขึ้นทุกวัน อยางไรก็ตามองคประกอบสําคัญใน ้ การทําเว็บใหดนาสนใจ นอกจากขอความทีมีคุณคา ก็คงหนีไมพนรูปภาพที่นํามาตกแตง ซึ่งผูพัฒนาหลายๆ ู ่ คน บางก็นําภาพสําเร็จมาใชงาน บางก็นําภาพจากเว็บอื่นๆ ที่ดสวยงามมาใช และก็มีไมนอยทีสรางภาพเอง ู ่ โดยอาศัยโปรแกรมกราฟกตางๆ เชน PhotoShop, PhotoImpact, Paint Shop เปนตน หนาเว็บที่มีแตเนื้อหาขอความ หนาเว็บที่มีภาพประกอบ คอมพิวเตอรกราฟก คือ กราฟกที่นําคอมพิวเตอรมาดําเนินการ ตั้งแตการเตรียมการ ออกแบบ นําเสนอ ใชงาน ดังนั้นงานกราฟก จึงมีความสําคัญ คือ • เปนสื่อกลางในการสื่อความหมาย • เกิดการเรียนรู การศึกษา • เกิดความนาสนใจ ประทับใจ และนาเชื่อถือ • กระตุนความคิด • กอใหเกิดความคิดสรางสรรค • สงเสริมความกาวหนาทางความคิด การทําภาพกราฟกเพื่อใชในงานเว็บ เปนรูปแบบหนึ่งของงานคอมพิวเตอรกราฟก มีหลักการเฉพาะ แตกตางไปจากงานสื่อสิ่งพิมพ ทั้งเรื่องความละเอียดของภาพ (Resolution) ทีใชเพียง 72 dpi หรือจํานวนสี ่ ที่ใชแสดงผล เปนตน ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช PhotoShop สรางกราฟกในงานเว็บ จึงเปน เนื้อหาที่นาสนใจสําหรับผูที่สนใจพัฒนาเว็บไซต  ภาพกราฟก หรือรูปกราฟกทีนามาใชในการทําเว็บเพจ หรือนํามาใชในอินเทอรเน็ต จะตองเปนไฟล ่ ํ ลักษณะเฉพาะ ปจจุบันนิยมใชกัน 3 ฟอรแมต คือ 1. ไฟลฟอรแมต JPEG (Joint Photographer’s Experts Group File) 2. ไฟลฟอรแมต GIF (Graphics Interlace File) 3. ไฟลฟอรแมต PNG (Portable Network Graphics)
  • 6. 2 ไฟลสกุล GIF (Graphics Interlace File) ภาพกราฟกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเปนไฟลภาพสําหรับการเผยแพรผาน อินเทอรเน็ตตั้งแตยคแรก เนื่องจากมีลักษณะเดน คือ ุ • สามารถใชงานขามระบบ (Cross Platform) หมายความวา คอมพิวเตอรทกระบบ ไมวาจะใช ุ Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได • มีขนาดไฟลต่ํา จากเทคโนโลยีการบีบอัดภาพ ทําใหสามารถสงไฟลภาพไดรวดเร็ว • สามารถทําพื้นของภาพใหเปนพื้นแบบโปรงใสได (Transparent) • มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Interlace • มีโปรแกรมสนับสนุนการสรางจํานวนมาก • เรียกดูไดกับ Graphics Browser ทุกตัว • ความสามารถดานการนําเสนอแบบภาพเคลื่อนไหว (GIF Animation) อยางไรก็ตามไฟลชนิดนี้ก็มีจดดอยในเรื่องของการแสดงสี ซึ่งแสดงไดเพียง 256 ุ สี ทําให การนําเสนอภาพถาย หรือภาพที่ตองการความคมชัดหรือภาพสดใส จะตองอาศัยฟอรแมตอื่น ไฟล .GIF มี 2 รูปแบบ ไดแก • GIF87 พัฒนาขึ้นในป ค.ศ. 1987 เปนไฟลกราฟกรุนแรกที่สนับสนุนการนําเสนอบนอินเทอรเน็ต เปนไฟลทมีขนาดเล็กและแสดงผลสี ่ี ไดเพียง 256 สี และกําหนดใหแสดงผลแบบโครงรางได (Interlace) • GIF89A พัฒนาขึ้นในป ค.ศ. 1989 เปนไฟลกราฟกที่พัฒนาตอจาก GIF87 โดยเพิ่มความสามารถการแสดงผลแบบพื้นโปรงใส (Transparent) และการสรางภาพเคลื่อนไหว (GIF Animation) ซึ่งเปนไฟลกราฟกที่มความสามารถพิเศษ ี โดยนําเอาไฟลภาพหลายๆ ไฟลมารวมกันและนําเสนอภาพเหลานั้นโดยอาศัยการหนวงเวลา มีการใสรูปแบบ การนําเสนอลักษณะตางๆ (Effects) การบีบอัดภาพ เทคนิคการบีบอัดภาพสกุล GIF เปนเทคนิคการบีบอัดคงสัญญาณ LZW (Lempel-Ziv-Welch) Lossless compression โดยขอมูลเดิมจะถูกสรางขึ้นใหมดวยวิธสราง Index สีจากสีทซ้ําๆ และใกลเคียงกัน ี ี่ โดยจะ Scan แนวตั้งของภาพทั้งหมด และ Scan แนวนอนของภาพทั้งหมด และเปรียบเทียบวาแนวใดได ขอมูลที่จะบันทึกเปนไฟลนอยกวากัน LZW เปนชื่อยอของนักวิจัยชาวอิสราเอล Abraham Lempel และ Jacob Zif ซึ่งไดเผยแพรผลงานไว ในเอกสารของ IEEE ภายใตชอเรียก LZ77 และ LZ78 ื่ Transparent คุณสมบัติของไฟลนี้ในดาน Transparent หรือความโปรงแสงของภาพนับเปนคุณสมบัตที่เดนมาก ิ ซึ่งเปนคุณลักษณะของภาพที่มีการดรอป (Drop) การแสดงสีที่ตองการ มักจะเปนสีพื้น เพื่อใหสที่เลือก ี โปรงใส และแสดงผลตามสีพนของเบราวเซอร ื้
  • 7. 3 Interlaced เปนคุณสมบัตที่เกี่ยวกับการแสดงผล เนื่องจากเปนการแสดงผลแบบโครงราง และคอยๆ แสดงแบบ ิ ละเอียด โดยใชหลักการแทรกสอดของเสนสี โดยปกติการแสดงผลภาพบนอินเทอรเน็ต จะแสดงผลไลจาก ขอบบนของภาพจนถึงขอบลาง ซึ่งมักจะแสดงผลชามาก เพราะตองรอใหแตละสวนแสดงผลครบทุก ความละเอียด แตดวยเทคนิคการแทรกสอด ภาพจะแสดงแบบเต็มรูป แตแสดงผลแบบหยาบๆ คลายๆ กับ การแสดงผลแบบเบลอ แลวคอยๆ ชัดเจนขึ้นตามเวลา ทําใหผใชเห็นภาพโครงรางกอน หากไมพอใจจะดูก็ ู สามารถขามการแสดงผลไปไดเลยทันที เทคนิคนี้จะอาศัยการแสดงผลของเสนสีทีละเสนใหแสดงผล แทรกสอดกันไปเรื่อยๆ จนครบทุกเสน การแสดงผลภาพปกติ การแสดงผลภาพแบบ Interlace การเลือกใชภาพฟอรแมต GIF ภาพที่เหมาะตอการบันทึกในรูปแบบ GIF คือภาพที่มีสีไมมากนัก ภาพขนาดใหญและมีสทึบ เชน ี ภาพจากคลิปอารตของ Microsoft Office ภาพวาดลายเสน ภาพตราสัญลักษณ ขอความกราฟก เปนตน ไฟลสกุล JPG (Joint Photographer’s Experts Group) เนื่องจากไฟลภาพสกุล GIF แสดงผลไดเพียง 256 สี จึงมีการพัฒนาไฟลภาพสกุล JPEG เพื่อ สนับสนุนสีไดถง 24 bit และคุณสมบัติอื่นๆ อีกคือ ึ • สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุกระบบ ไมวาจะ ใช Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได • สามารถกําหนดคาการบีบไฟลไดตามทีตองการ ดวยเทคนิคการบีบอัดคงสัญญาณหลัก (Lossy ่ compression) โดยนําบางสวนของภาพที่ซาซอนออกไป คงไวเฉพาะขอมูลสําคัญเทานั้น ้ํ • มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Progressive คลาย Interlaced • มีโปรแกรมสนับสนุนการสรางจํานวนมาก • เรียกดูไดกับ Graphics Browser ทุกตัว • อยางไรก็ตามไฟลภาพสกุลนีก็มีจุดดอย คือ ้ o พื้นของภาพโปรงใสไมได o ถามีการบันทึกซ้ําหลายๆ ครั้ง จะทําใหคุณภาพของภาพลดลงไปดวย การเลือกใชภาพฟอรแมต JPEG ภาพที่เหมาะตอการบันทึกในรูปแบบ JPEG คือภาพถาย ภาพที่วาดดวยดินสอสี ถายสี หรือระบาย ดวยสีน้ํา และภาพอื่นๆ ที่มีการเปลี่ยนแปลงระหวางสี
  • 8. 4 ไฟลสกุล PNG (Portable Network Graphics) ไฟลสกุลลาสุดที่นําจุดเดนของไฟล GIF และ JPEG มาพัฒนารวมกัน ทําใหภาพในสกุลนีแสดงผลสี ้ ไดมากกวา 256 สี และยังสามารถทําพื้นภาพใหโปรงใสได จึงเปนไฟลภาพที่ไดรับความนิยมมากในปจจุบัน ดวยอีกสกุลหนึง คุณสมบัติของภาพคือ ่ • สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุกระบบ ไมวาจะ ใช Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได • ขนาดไฟลเล็ก ดวยเทคนิคการบีบอัดคงสัญญาณ LZW • สามารถทําภาพโปรงใสจากสีพื้น 256 ระดับ • แสดงภาพแบบสอดประสานเชนเดียวกับ GIF โดยมีความคมชัดที่ดีกวา • มีคุณสมบัติ Gamma ทําใหภาพสามารถปรับตัวเองไดตามจอภาพ และปรับระดับความสวางที่ แทจริงตามทีควรจะเปน ่ ภาพแบบเวกเตอรและบิตแมป (Vector & Bitmap) การสรางงานกราฟกดวยคอมพิวเตอร มีหลักการสรางภาพ 2 ลักษณะใหญๆ ไดแก ภาพกราฟกแบบ เวอรเตอร และบิตแมป ภาพกราฟกแบบเวอรเตอร (Vector) เปนภาพทีสรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสีของเสนนั้นๆ ซึ่งสราง ่ จากการคํานวณทางคณิตศาสตร เชน ภาพของคน ก็จะถูกสรางดวยจุดของเสนหลายๆ จุด เปนลักษณะของ โครงราง (Outline) และสีของคนก็เกิดจากสีของเสนโครงรางนั้นๆ กับพื้นที่ผวภายในนั่นเอง เมื่อมีการแกไข ิ ภาพ ก็จะเปนการแกไขคุณสมบัติของเสน ทําใหภาพไมสูญเสียความละเอียด เมื่อมีการขยายภาพนั่นเอง ภาพแบบ Vector ที่หลายๆ ทานคุนเคยก็คอ ภาพ .wmf ซึ่งเปน clipart ของ Microsoft Office ื นั่นเอง นอกจากนี้คุณจะสามารถพบภาพฟอรแมตนี้ไดกับภาพในโปรแกรม Adobe Illustrator หรือ Macromedia Freehand จะสังเกตไดงายวาภาพลักษณะนี้ จะมีจดจับ (Handle) ชวยใหการแกไข ยอขยาย ุ ขนาด หมุนภาพ ทําไดงาย สะดวก และรวดเร็ว  ภาพกราฟกแบบบิตแมป (Bitmap) ภาพแบบ Bitmap หรืออาจจะเรียกวาภาพแบบราสเตอร (Raster) เปนภาพที่เกิดจากจุดสีที่เรียกวา pixels ซึ่งประกอบกันเปนรูปรางบนพื้นทีที่มลักษณะเปนเสนตาราง (กริด) แตละพิกเซลจะมีคาของตําแหนง ่ ี และคาสีของตัวเอง ภาพหนึ่งภาพ จะประกอบดวยพิกเซลหลายๆ พิกเซลผสมกัน แตเนืองจากพิกเซลมีขนาด ่ เล็กมาก จึงเห็นภาพมีความละเอียดสวยงาม ไมเห็นลักษณะของกรอบสี่เหลี่ยม จึงเปนภาพที่เหมาะสมตอการ แสดงภาพที่มีเฉด และสีสนจํานวนมาก เชนภาพถาย หรือภาพวาด ั ภาพแบบ Bitmap เปนภาพทีขึ้นอยูกับความละเอียด หรือความคมชัด (Resolution) ซึ่งก็คือ จํานวน ่ พิกเซลที่แนนอนในการแสดงภาพ ดังนั้นเมื่อมีการขยายภาพ จะเกิดปญหาคือ เห็นเปนกรอบสี่เหลียมเล็กๆ ่ หลายๆ จุด ประกอบกัน เพราะกริดของภาพมีขนาดทีแนนอนนั่นเอง ่
  • 9. 5 พิกเซล (Pixel) พิกเซล (Pixel) เปนคําผสมของคําวา Picture กับคําวา Element หรือหนวยพื้นฐานของภาพ เทียบไดกับ “จุดภาพ” 1 จุด แตละพิกเซลเปรียบไดกับสี่เหลี่ยมเล็กๆ ทีบรรจุคาสี โดยถูกกําหนดตําแหนงไว ่ บนเสนกริดของแนวแกน x และแกน y หรือในตารางเมตริกซสี่เหลียม ภาพบิตแมปจะประกอบดวยพิกเซล ่ หลายๆ พิกเซล จํานวนพิกเซลของภาพแตละภาพ จะเรียกวา ความละเอียด หรือ Resolution โดยจะเทียบจํานวน พิกเซลกับความยาวตอนิว ดังนั้นจะมีหนวยเปนพิกเซลตอนิ้ว (ppi: pixels per inch) หรือจุดตอนิ้ว (dpi; dot ้ per inch) ภาพขนาดเทานั้นแตมีความละเอียดตางกัน แสดงวาจํานวนพิกเซลตางกัน และขนาดของจุดพิกเซล ก็ตางกันดวย  เปรียบเทียบความละเอียดภาพ 72 dpi กับ 300 dpi ระบบสีของคอมพิวเตอร ระบบสีของคอมพิวเตอร รวมถึงจอโทรทัศน เกิดจากการเปลงแสงสีหลัก 3 สี (เชนเดียวกับแมสี) คือ สีแดง (Red) สีเขียว (Green) และ สีน้ําเงิน (Blue) เรียกรวมกันวา RGB โดยมีลักษณะการแสดงผล คือ ถาไม มีแสดงผลสีใดเลยบนจอภาพจะแสดงเปน “สีดา” หากสีทุกสีแสดงผลพรอมกัน จะเห็นสีบนจอภาพเปน ํ “สีขาว” สวนสีอื่นๆ เกิดจากการแสดงสีหลายๆ สี แตมคาแตกตางกัน การแสดงผลลักษณะนี้ เรียกวา ี การแสดงสีระบบ Additive การเกิดของสีตางๆ โดยแมสท้งสามสี มาจากคาความหนาแนนของแมสีทแตกตางกัน โดยมีคา  ี ั ี่ ความหนาแนนตั้งแต 0 ถึง 255 เชนสีเหลืองสด เกิดจากสีแดงความหนาแนน 255 ผสมกับสีเขียว ความหนาแนน 255 และสีน้ําเงินความหนาแนน 76 เปนตน
  • 10. 6 Indexed Color Indexed Color เปนโหมดสีทนิยมใชกับภาพ GIF โดยมีการเก็บสีเปนแผงสี (Color Palette) ไมเกิน ี่ 256 สี จากปกติทสีในโหมด RGB จะเก็บคาสีไดเปนลานๆ สี ในการแสดงภาพคอมพิวเตอรจะใชการประมาณ ี่ คาทีใกลเคียงที่สด หรือเลียนสีทดที่สด เพื่อนําเสนอภาพใหออกมาในผลที่ใกลเคียงความเปนจริง จํานวนสี ่ ุ ี่ ี ุ ของแผงสี สามารถกําหนดไดอิสระ เชนบางภาพอาจจะใชสีเพียง 12 สีก็ได ยิ่งจํานวนสีในแผงสีมีนอยเทาใด ขนาดไฟลภาพก็จะเล็กลงไปดวย ระบบสีทางการพิมพ ระบบสี Subtractive มีลักษณะที่ตรงขามกับ Additive โดยสีแตละสีจะไดจากการลบสีตางๆ ออกไป  จากระบบ ดังนั้น หากไมมีการแสดงสีใดๆ จะแสดงผลเปนสีขาว ขณะที่การแสดงสีทุกสี จะปรากฏเปนสีดํา และสีหลัก หรือแมสีของระบบนี้ จะประกอบดวย สีฟา (Cyan) สีมวงแดง (Magenta) และสีเหลือง (Yellow) หรือระบบ CMY เปนระบบสีทใชกับงานสิ่งพิมพ ซึ่งมักจะรวมเอาสีดํา มาเปนแมสดวย จึงเรียกวาระบบ CMYK ี่ ี (Cyan, Magenta, Yellow, blacK) ในการพิมพ 4 สี ภาพสีจะถูกแปลงออกเปนคาตางๆ ของทั้ง 4 สี และคา เหลานั้นจะถูกแทนดวยจุดเล็กๆ ซึ่งสามารถเห็นไดชดเจนถาใชแวนขยายสอง ั ชื่อไฟลภาพ ภาพทีใชในการพัฒนาเว็บไซต มีหลักการตั้งชื่อที่แตกตางจากปกติ โดยมีหลักดังนี้ ่ • ประกอบดวยตัวอักษรภาษาอังกฤษตัวพิมพเล็ก ผสมตัวเลขเทานั้น หามมีชองวาง หรือ  เครื่องหมายใดๆ ยกเวน Dash (-) โดยหลีกเลี่ยงการใชเครืองหมาย underscore “_” เพราะจะ ่ สรางปญหาเมือเปนสวนหนึ่งของ URL ่ • หากเปนชุดของภาพ ใหระบุ Series ดวยตัวเลขในรูปแบบ xxx • สวนขยายของไฟล จะระบุอัตโนมัติตามฟอรแมตของภาพทีเลือกใช ่ รูปภาพดิจิทัล การนําเสนอรูปภาพเพื่อประกอบการนําเสนอในลักษณะตางๆ โดยภาพที่ไดมานั้นมีทั้งจากภาพทีถาย ่ ดวยกลองถายภาพระบบดิจทล (Digital Camera) ภาพจากเครื่องกราดภาพ (Scanner) ซึ่งมีความแตกตางทั้ง ิ ั ในดานความละเอียด (Resolution) ขนาดภาพ (Image Size) และแนวของภาพ (Orientation) เมื่อมีการนํา ภาพไปใชในลักษณะตางๆ จึงควรมีการเตรียมภาพใหเหมาะสมกับรูปแบบการนําเสนอ เพื่อใหการแสดงผล สามารถแสดงไดรวดเร็ว, การเก็บบันทึกประหยัดพื้นที่ของสื่อบันทึก
  • 11. 7 มาตรฐานรูปแบบการนําเสนอภาพ ภาพ ภาพ ภาพ Presentation Database Website Preview ตนฉบับ สื่อ สําหรับ สิ่งพิมพ Digital Archive Format JPEG, TIFF JPEG JPEG JPEG PNG, PNG, TIFF JPEG, JPEG, GIF GIF Resolution Up to Up to 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi 350 dpi 350 dpi Size Up to Up to Up to Up to ≈ 300 × ≈ 300 × ≈ 100 × 1840 × 1840 × 1024 × 1024 × 768 250 pixels 250 100 1232 1232 768 pixels pixels pixels pixels pixels pixels From Digital Image Editor Camera, Scanner Folder original DTP archive present database web preview File Name ตามจริง เปลี่ยนตามขอกําหนด โดยแยกเปนโฟลเดอรเฉพาะ Format รูปแบบของไฟลภาพที่ใชในการจัดเก็บภาพ โดยปกติไฟลภาพจะมีขนาดโตมาก การเลือก รูปแบบที่เหมาะสมตอการนําเสนอจะชวยใหภาพมีขนาด (File Size) เล็กลง โดยคงความ คมชัดไวในระดับดี อันเปนการประหยัดพื้นที่ของสื่อบันทึกขอมูลไดเปนอยางดี TIFF รูปแบบของการจัดเก็บภาพแบบ Tagged-Image File Format ซึ่งเปนรูปแบบที่ใชเก็บภาพ พรอมรายละเอียดตางๆ เชน เลเยอร (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนขอมูลประกอบอื่นๆ ตามตนฉบับเดิมของภาพ จึงเปนรูปแบบที่ เหมาะสมตอการเก็บบันทึกภาพตนฉบับ และภาพสําหรับใชประกอบการสรางสื่อสิ่งพิมพ สวนขยายของไฟลรูปแบบนี้คอ .tif ื Resolution ภาพจากกลองบันทึกภาพระบบดิจทัล และเครื่องกราดภาพ จะเปนภาพแบบบิตแมป ิ (Bitmap) ซึ่งมีความสัมพันธกบความละเอียดของภาพ ดังนันการกําหนดความละเอียดของ ั ้ ภาพที่เหมาะสม จะเปนการชวยประหยัดพื้นทีของสื่อบันทึกไดเปนอยางดี หนวยของความ ่ ละเอียดเรียกวา จุดตอนิ้ว (Dot per Inch หรือ Pixel per Inch) ทั้งนี้ภาพตนฉบับที่ไดจาก เครื่องกราดภาพ ควรกําหนดความละเอียดไวที่ 300 dpi ไวกอน แลวคอยทําการเปลียน ่ ความละเอียดใหเหมาะสมตอไปดังรายการที่กาหนด ํ Size หมายถึงขนาดของภาพที่วดในหนวย Pixel ประกอบดวยคาความกวาง (Width) และความ ั ยาว (Height) ของภาพ ขนาดของภาพมีสวนสัมพันธกับการนําภาพไปใชงาน โดยภาพ ตนฉบับทั้งจากกลองบันทึกภาพระบบดิจิทล และเครื่องกราดภาพ ควรกําหนดขนาดภาพให ั โตเปนพิเศษ เพื่อใชเปนภาพตนฉบับ ทั้งนี้ไมควรต่ํากวา 1024 × 768 pixels และปรับ ลดลงตามลักษณะการนําไปใชที่กําหนดในรายการขางตน From หมายถึงการไดมาของภาพ อันประกอบดวยภาพจากกลองบันทึกภาพดิจทัล และภาพจากิ เครื่องกราดภาพ • ในกรณีทใชกลองบันทึกภาพดิจิทัล ควรกําหนด Image Size ของภาพใหมากกวา ี่ 1024 × 768 pixels แบบ Fine Image • ภาพจากเครื่องกราดภาพ ควรกําหนด Image Size ของภาพใหมากกวา 1024 × 768 pixels หรือกําหนด % ของการสแกนภาพไวประมาณ 150 – 250% ของภาพถาย ตนฉบับ และกําหนดความละเอียด (Resolution) ของภาพไวที่ 300 dpi Folder การตั้งชื่อโฟลเดอรสาหรับแยกประเภทของภาพตามรูปแบบการใชงาน ํ
  • 12. 8 บทที่ 2 เตรียมภาพใชงาน การสรางภาพนอกจากใชภาพที่มีอยูเดิม หรือการสรางใหมดวยโปรแกรมกราฟก ยังสามารถเตรียม ภาพจากแหลงขอมูลอื่นไดเชน ภาพถายทีผานเครื่องกราดภาพ (Scanner) หรือภาพจากกลองถายภาพ ่ ระบบดิจิทล (Digital Camera) ั ภาพถูกใจกับ Scanner “วันปใหมไปเทียวภาคเหนือ ถายภาพสวยๆ มาเยอะมาก วันเกิดปนี้ รวมกลุมกับเพื่อนชมบรรยากาศ ่ ริมน้ํา ไดภาพนาประทับใจ วันลอยกระทง กระทงลอยเปนสายสวยสด เก็บบันทึกไวในภาพถายเรียบรอยแลว” ภาพสวยๆ ตางๆ เหลานี้อยากเผยแพรผานเครือขายอินเทอรเน็ต ไมใชเรื่องยาก ดวยความสามารถของอุปกรณ ที่ชื่อ “สแกนเนอร (Scanner)” ทําใหการเปลี่ยนภาพถายเปนภาพดิจทัล เปนเรื่องงายเหมือนปอกกลวยเขา ิ ปาก สแกนเนอร เปนอุปกรณตอเชื่อมคอมพิวเตอรแบบกราฟก ที่มีหนาที่ ในการเปลี่ยนแปลงภาพตนฉบับ (รูปถาย ตัวอักษรบนหนากระดาษ ภาพวาด) ใหเปนขอมูลดิจิทัล เพื่อใหคอมพิวเตอรสามารถนําขอมูลดังกลาวมาใช ประโยชนในการแสดงผลที่หนาจอ ทําใหสามารถแกไข ตกแตงเพิ่มเติม และ จัดเก็บขอมูลได ในปจจุบนสแกนเนอรแบงได 2 รูปแบบคือ ั • แบบใสกระดาษแลวกระดาษจะเลื่อนผานหัวสแกนเอง เรียกวา Sheet - Fed Scanner • แบบวางกระดาษแลวใหหัวสแกนเลื่อนอานขอมูลจากกระดาษ โดยกลไกการทํางานคลายๆ กับ เครื่องถายเอกสาร เรียกวา Flatbed Scanner แมวาสแกนเนอรจะมีหลากหลายรุน หลากหลายยีหอ แตการใชงานไมแตกตางกันมากนัก ความรูใน ่ การใชสแกนเนอรรุนหนึ่ง ก็สามารถนําไปประยุกตใชกับรุนอืน ยี่หออื่นไดเชนกัน โดยมีหลักการสแกนพื้นฐาน ่ ดังนี้ • เลือกโหมดภาพที่เหมาะสม – โดยปกติสแกนเนอรจะตรวจสอบประเภทของขอมูลที่จะสแกนโดย อัตโนมัติ ดังนั้นหากนําเอกสารเนื้อหาหนังสือไปสแกน โปรแกรมจะกําหนดโหมดเปนขาวดํา หรือลายเสน แตถานําภาพถายไปสแกน ก็จะใชโหมดสี อยางไรก็ตามผูใชก็สามารถกําหนดหรือ  เปลี่ยนแปลงโหมดใหเหมาะสมกับการใชงานไดเชนกัน • กําหนดความละเอียดใหเหมาะสมกับลักษณะการนําไปใชงาน – ความละเอียดของภาพ หรือ Resolution ไมควรกําหนดไวสูงเกินไป โดยเฉพาะถาตองการนํามาใชงานกับเว็บเพจ เพราะทํา ใหเสียเวลาสแกนนานเกินไป รวมทั้งเสียพื้นที่ในการจัดเก็บภาพ • กําหนดขนาดของภาพใหเหมาะสม - ขนาดของภาพ (Size) สําหรับการทําเว็บ ควรกําหนดให เทากับภาพตนฉบับ เพื่อไมใหเกิดปญหาภาพเบลอในขั้นตอนการตกแตงดวยโปรแกรมแตงภาพ หลักการสแกนภาพ 1. เตรียมภาพตนฉบับ ไดทั้งขอความ, ภาพขาวดํา และภาพสี (สแกนเนอรบางรุนสามารถ สแกนวัตถุ 3 มิติได เชน กระปอง, นาฬิกา ฯลฯ 2. เรียกโปรแกรมสแกนภาพ ตัวอยางโปรแกรมสแกนของสแกนเนอรรุน Lexmark X1100
  • 13. 9 3. นําภาพหรือวัตถุทตองการสแกน วางบนกระจกของสแกนเนอร ปดฝาของเครื่องกราดภาพ ี่ เพื่อปองกันแสงภายนอก 4. ตั้งคาการสแกนภาพ เชน โหมดภาพ, ขนาดภาพ และความละเอียด • ภาพทีตองการนําไปใชในงานพิมพ ควรกําหนดความละเอียด 150 – 300 จุดตอนิ้ว ่ • ภาพทีตองการใชในการสรางเอกสารเว็บ ควรกําหนดความละเอียด 72 จุดตอนิ้ว ่ 5. คลิกปุมเริ่มสแกน (แสดงดวยคําวา Preview หรือ Start Scan เปนตน) ชวงนี้จะใชเวลา พอสมควรสําหรับสแกนเนอรบางรุน ทั้งนี้ระหวางทีสแกนเนอรทางาน ไมควรขยับภาพหรือ ่ ํ วัตถุ 6. เมื่อเครื่องสแกนภาพตนฉบับ ภาพจะปรากฏบนหนาตางโปรแกรม ผูใชสามารถกําหนดหรือ  เลือกขอบเขตที่ตองการได หลังจากนั้นคลิกปุม Final หรือ Save (ตามแตระบบ) 7. โปรแกรมจะแปลงสัญญาณแลวสงภาพไปปรากฏบนหนาตางทํางานของโปรแกรมกราฟก หรือบันทึกเปนไฟลภาพ (ตามแตระบบ) • การบันทึกไฟล มีหลักพิจารณาดังนี้ o หากตองการนําภาพนั้นไปใชเปนภาพตนฉบับสําหรับงานสิ่งพิมพ และมีพื้นที่ของ ฮารดดิสกเหลือจํานวนมาก แนะนําใหบันทึกไฟลภาพดวยฟอรแมต TIF เนื่องจาก จะไดไฟลภาพที่มีความสมบูรณครบถวน o ถาตองการภาพเพื่อประกอบเอกสารเว็บโดยเฉพาะ สามารถเลือกฟอรแมตเปน JPEG ไดเลย ซึ่งจะชวยประหยัดพื้นที่ของฮารดดิสกได ภาพทันใจดวยกลองถายภาพดิจิทัล กลองถายภาพดิจิทล นับเปนอุปกรณอิเล็กทรอนิกสที่ไดรับความนิยมอยางสูงในปจจุบัน เนื่องจากมี ั ขนาดเล็ก กะทัดรัด พกพาไดสะดวก โอนถายเขาสูคอมพิวเตอรไดทันที เผยแพรผานอินเทอรเน็ตไดรวดเร็ว โดยอุปกรณตวเล็กชิ้นนี้จะทํางานดวยตัวสรางประจุไฟฟาที่เรียกวา CCD (Charge Coupled Device) ภายใน ั ตัวกลอง ผานการกระตุนดวยแสงที่ผานเขามาทางเลนส และสงผลใหเกิดภาพบนสื่อบันทึกภายในกลอง เชน   Memory Stick, Memory Card สําหรับทานทีสนใจอุปกรณไฮเทคชิ้นนี้ และอยากไดเปนเจาของ มี ่ หลักพิจารณาดังนี้ • ดูงบในกระเปา - กอนซื้อก็คงตองดูงบประมาณในกระเปากอน ปจจุบันราคาอุปกรณนี้อยูในชวง 5,000 – 50,000 บาท เพราะฉะนั้นจากงบประมาณทีทานมี ก็คงจะชวยใหพิจารณาไดงาย ่ • จุดประสงคในการใชงาน – สําหรับทานทีมงบพอประมาณ ก็คงมาดูที่จุดประสงคในการใชงาน ่ ี สําหรับทานที่นามาใชกับงานพัฒนาเว็บไซต เลือกไดงายมากเลย เพราะเลือกไดทกรุน แลวแตกาลังทรัพย ํ ุ ํ เนื่องจากกลองตัวนี้พัฒนาขึ้นมาเพื่อสนับสนุนงานเว็บเปนหลัก แตถาทานตองการใชเพื่อบันทึกภาพแทน กลองจริง หรือใชเก็บภาพสําหรับใชในงานสิงพิมพ ก็คงตองเตรียมงบใหสูงขึ้นสักนิด เพื่อเลือกกลองที่มี ่ คุณภาพที่ดทสด เทาที่กําลังทรัพยจะเอื้ออํานวย ี ี่ ุ • ความละเอียดของภาพ – ความละเอียดของภาพ เปนคุณสมบัตชนิดหนึ่งที่ทาใหราคากลองนี้ ิ ํ แตกตางกันออกไป อยางที่ไดกลาวไวแลวภาพสําหรับงานเว็บตองการความละเอียดเพียง 72 จุดตอนิ้ว แตถา ทานตองการใชภาพถายกับงานสิ่งพิมพ ก็ควรดูกลองฯ ทีรอบรับไดมากกวา 150 จุดตอนิ้ว (ประมาณ 2 ลาน ่ พิกเซลขึ้นไป) • คุณสมบัติเฉพาะอื่นๆ – กลองแตละรุน แตละยี่หอ มีคุณสมบัติเฉพาะแตกตางกันออกไป ดังนั้น หากมีงบประมาณที่เพียงพอ ลองพิจารณาองคประกอบนี้ดวย เพื่อใหตรงกับความตองการของทานมากทีสุด  ่ หลักการถายภาพ ไมยากเลยครับ เหมือนๆ กับการถายดวยกลองธรรมดาทัวไป แถมอาจจะงายและ ่ สะดวกกวาดวยซ้ํา เพราะมีฟงกชันควบคุมการถายภาพ ทั้งภาพขาวดํา ภาพสี ภาพ Sepia โหมดการซูม ทั้งนี้ หลักการใชงานแมจะตางรุน ตางยี่หอ แตก็ไมสรางปญหามากนัก สําหรับเทคนิคการถายภาพมีดังนี้ • โดยมากกลองดิจทล จะมีจอภาพ LCD สําหรับแสดงผลภาพทั้งขณะถาย หลังถาย ซึ่ง ิ ั การทํางานสวนนี้จะทําใหแบตเตอรรีถูกใชงานมาก ดังนั้นหากมีชองเลนสมองถายภาพ ควรปด ่ จอภาพ LCD แลวใชชองมองภาพในการถายภาพแทน • ไมควรถายภาพในสถานที่ที่มแสงจามาก ี
  • 14. 10 • ใชแฟลซใหเหมาะสม เพื่อใหไดภาพที่สวางคมชัด • ไมถายภาพสะทอน หรือผานกระจก เมื่อไดภาพทีตองการ ่  สามารถโอนเขาสูคอมพิวเตอรไดสะดวกเชนกัน (แมวาจะตองพกพา อุปกรณเสริมอีกหลายชิ้น) แมวาแตละรุน แตละยี่หอจะมีวิธีการที่แตกตางกันออกไป เชนบางรุนบันทึกลง แผนดิสก 3.5 นิ้วก็สามารถนําแผนดิสกมาใสใน Disk Drive แลวเรียกใชงานไดทันที สําหรับปจจุบันนิยมถาย โอนผาน USB Port ซึ่งตองอาศัยโปรแกรมเฉพาะ (Driver) ซึ่งใชงานไดงายและสะดวก อยางไรก็ตามคงไม สามารถแนะนําในเอกสารนี้ได แตผูเขียนหวังวาคงไมยากเกินไปสําหรับผูสนใจที่จะศึกษาจากเอกสารคูมือที่   แนบมากับกลองที่ทานซื้อ  สําหรับโลกดิจทัลในอนาคตเราคงเห็นอุปกรณนําเขาขอมูลทันสมัยอีกหลายลักษณะ อยางเชนการนํา ิ กลองดิจิทลมาผสมรวมกับโทรศัพทมือถือ (ออกเผยแพรและคนไทยใชกนหลายทานแลว) ซึ่งเปนเทคโนโลยี ั ั ที่นาสนใจ นาติดตามตอไป การจับภาพดวยเทคนิค Screen Capture หลายๆ คนคงชอบเลนเกม หรือเลนอินเทอรเน็ต โดยเฉพาะการเขาไปยังเว็บไซตตางๆ สิงหนึ่งที่คด ่ ิ เหมือนกัน ก็คือ รูปภาพจากเกม หรืออินเทอรเน็ตสวยมาก อยากนํามาเก็บไวในเครื่องตัวเอง เพื่อวาตอไป สามารถนําไปใชงานตางๆ ได เชน นําไปประกอบเมื่อตองทํารายงาน พิมพ ส.ค.ส. สวยๆ หรือใชในงาน นําเสนอจาก PowerPoint และบางทานอาจจะตองรับผิดชอบผลิตสิ่งพิมพใหกับหนวยงาน โดยนํารูปภาพจาก หนาจอโปรแกรมตางๆ มาใชประกอบในเอกสาร วิธีการพิมพงานโดยเวนที่วาง แลวนํารูปภาพ หรือรูปถายมา  แปะ คุณคงจะเคยทํามาแลวใชไหมครับ วิธลาสมัยแลวครับ ในยุคคอมพิวเตอรระบบ Windows มีวิธีทสะดวก ี ี่ รวดเร็ว และสวยงามกวาครับ ซึ่งรูจกกันโดยวิธี การจับจอภาพ (Screen Capture) ั ดวยความสามารถจับจอภาพ (Screen Capture) ไมวาคุณอยากไดรูปอะไร ภาพไหน บนจอภาพ โปรแกรมแบบไหน เพียงแตขอใหแสดงผลบนจอภาพผานระบบ Windows ได คุณก็สามารถนําภาพนันมาใช ้ งานไดสะดวก รวดเร็ว จะนํามาใชทันที หรือเก็บเปนไฟลรูปภาพก็ได ตามแตคุณตองการ สําหรับเทคนิควิธีใน การจับจอภาพมีหลากหลายวิธี หลายรูปแบบ แตสามารถแบงเปนประเภทใหญๆ ได 2 ลักษณะ คือ • การจับจอภาพโดยใชความสามารถ Clipboard ของโปรแกรม Windows • การจับจอภาพโดยใชโปรแกรมจับจอภาพเฉพาะ เชน SnagIT, ScreenPrint, Quick Screen Capture การจับจอภาพโดยใชความสามารถ Clipboard การจับจอภาพโดยใชความสามารถของ Clipboard เปนวิธีที่นิยมสะดวกที่สด เพราะ Windows ุ เตรียมความสามารถนีใหโดยตรง ไมตองอาศัยโปรแกรมพิเศษใดๆ นอกจากโปรแกรม PaintBrush ้ • เปดโปรแกรมทีตองการจับจอภาพ เชน เกม, อินเทอรเน็ต, Microsoft Word ่ • เรียกหนาจอทีตองการจับภาพ ่