• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Graphic with Adobe Photoshop
 

Web Graphic with Adobe Photoshop

on

  • 8,626 views

สร้างสรรค์กราฟิกสำหรับเว็บด้วย Adobe Photoshop

สร้างสรรค์กราฟิกสำหรับเว็บด้วย Adobe Photoshop

Statistics

Views

Total Views
8,626
Views on SlideShare
8,577
Embed Views
49

Actions

Likes
3
Downloads
453
Comments
1

4 Embeds 49

http://www.boonlert.in.th 28
http://stks.or.th 11
http://www.thailibrary.in.th 8
http://www.stks.or.th 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Good
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Graphic with Adobe Photoshop Web Graphic with Adobe Photoshop Document Transcript

    • สารบัญ บทที่ 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 ่ • เรียกหนาจอทีตองการจับภาพ ่
    • 11 • กดปุม <PrintScreen> การกดปุมนี้จะเปนการคัดลอกจอภาพไปเก็บไวใน Clipboard o หรือกดปุม <Alt><PrintScree> เพื่อจับจอภาพที่ Active เทานั้น • เรียกโปรแกรม Paint จากคําสัง Start, Program, Accessories, Paint ่ • ขยายหนาตางการทํางานใหเต็มจอ • นําภาพที่เก็บไวใน Clipboard มาวางบนหนาตางโปรแกรม Paint ดวยคําสัง Edit, Paste ่ • เมื่อนําภาพทีจบไววางในหนาตางโปรแกรม Paint แลว เลื่อนจอภาพ เพื่อแสดงภาพที่ตองการ ่ ั  นําไปใชงาน • เมื่อปรากฏภาพที่ตองการ ใหคลิกที่ปุมเครื่องมือเลือกภาพ (Select tools) ซึ่งเปนปุม เครื่องมือสี่เหลียมเสนประปรากฏในชุดเครื่องมือของโปรแกรม Paint ่ • นําเมาสซึ่งเปนกากบาท ไปชี้ ณ ตําแหนงมุมบนซายของพื้นที่ภาพทีตองการ จากนั้นกดปุมซาย ่ ของเมาสคางไว ลากเมาสไปแนวเฉียงลงมายังมุมลางขวาของภาพ ปรากฏเปนเสนประคลุมภาพ ที่ตองการ เมื่อไดขนาดเสนประทีถูกตองใหปลอยนิ้วจากปุมซายของเมาส ่ • หากตองการนําภาพไปใชตอนนี้ ใหเลือกคําสัง Edit, Copy หรือหากตองการจัดเก็บภาพไวเปน ่ ไฟล เพื่อนําไปใชงานตอไป ใหเลือกคําสั่ง Edit, Copy to ซึงมีหลักการคลายคําสั่ง File, Save ่ เพียงแตเปนการจัดเก็บภาพเฉพาะสวนพื้นทีทระบุเทานั้น ไมจดเก็บทั้งจอ ่ ี่ ั • กรณีที่เลือกคําสั่ง Edit, Copy การนําไปใช เพียงแตเลือกคําสั่ง Edit, Paste ณ จอภาพ โปรแกรมปลายทางที่ตองการ เชน หนาจอเอกสารของ Word เปนตน
    • 12 การจับจอภาพดวยโปรแกรม ScreenPrint 32 การจับจอภาพนอกจากปุม <PrintScreen> ที่ไดแนะนําไปแลว อาจจะใชซอฟตแวรเฉพาะเชน ScreenPrint 23 ชวยเหลือ โดยสามารถดาวนโหลดซอฟแวรไดจากเว็บไซต www.download.com เมื่อติกตั้ง แลวจะปรากฏคําสั่งเรียกจากเมนู Start คือ Start, Programs, ScreenPrint32 v3 ซึ่งมีหนาตางโปรแกรม ดังนี้ กําหนดคาสําคัญ ดังนี้ เลือกปุมที่ใชควบคุมการจับจอภาพ จากรายการ Capture Key แนะนําใหเลือกใชปุม Prt-Scr (ปุม PrintScreen) เลือกรูปแบบการจับภาพ จากรายการ o Capture Full Desktop or Active Window จับทั้งจอภาพ หรือจอที่ Active อยู o Capture Active Window จับเฉพาะจอที่ Active อยู o Prompt User for Capture Area เลือกพื้นที่ไดอิสระ o Capture a Pre-Defined Area กําหนดขอบเขต (ความกวาง, ความสูง) เลือกผลลัพธของการจับจอภาพ o Print Option ตองการสั่งพิมพผลลัพธออกทางเครื่องพิมพ
    • 13 o Save Option ตองการบันทึกผลลัพธเปนไฟลภาพ • เลือกรูปแบบการตั้งชื่อไฟลภาพจากรายการ Filename • เลือกประเภทของไฟลภาพจากรายการ File Format • เลือกโฟลเดอรปลายทางจากรายการ Folder o กรณีที่ยกเลิกทังรายการ Print Option และ Save Option หมายถึงใหบันทึกผลลัพธไวใน ้ Clipboard o เมื่อกําหนดคาตางๆ เรียบรอยแลวคลิกปุม OK โปรแกรมจะถูกยอไปเก็บไวใน Taskbar โปรแกรมที่ถูกยอ การจับภาพบางสวนของจอภาพไวใน Clipboard • เปดโปรแกรม ScreenPrint หรือดับเบิลคลิกที่ไอคอนโปรแกรมบน Taskbar • กําหนดคาตางๆ ดังนี้ o เลือกรูปแบบการจับภาพเปน Prompt User for Capture Area o ยกเลิกรายการ Print Option o ยกเลิกรายการ Save Option o กดปุม OK • เปดโปรแกรม หรือหนาตางงานที่ตองการจับภาพ  • กดปุม <PrintScreen> • ใชเมาสระบายขอบเขตพื้นที่ที่ตองการจับภาพ แลวกดปุมขวาของเมาส ปรากฏคําสั่งยอย เลือก คําสั่ง Capture selected area • เปดโปรแกรมทีตองการนําภาพมาแสดงผล เชน Microsoft Word หรือ Adobe PhotoShop ่ • เปดหนาไฟลเอกสาร หรือสรางไฟลใหม • เลือกคําสั่ง Edit, Paste เพื่อนําภาพจาก Clipboard มาวาง
    • 14 การเซฟภาพ (Save) จากหนาเว็บเพจ รูปภาพที่ปรากฏในหนาจอเว็บไมวาจะผาน Netscape หรือ IE มี 2 ลักษณะคือ • รูปภาพที่เปนภาพชิ้นๆ ที่เรียกวา Clipart • รูปภาพที่นํามาใชแสดงผลเปนพื้นของเว็บ ที่เรียกวา Background ดังนั้นหากตองการจัดเก็บภาพจาก Internet เพื่อนํามาใชงาน จะตองพิจารณาวา ตองการเก็บภาพ ลักษณะอยางไร โดยมีวิธีการจัดเก็บที่แตกตางกัน รูปภาพที่เปนภาพชิ้นๆ ที่เรียกวา Clipart • เขาสูเว็บที่ตองการ • นําเมาสไปชี้ ณ รูปภาพที่ตองการ • คลิกปุมขวาของเมาส แลวเลือกคําสั่ง Save image as • กําหนดไดรฟและโฟลเดอรทตองการจัดเก็บภาพ จากกรอบโตตอบ Save as: ี่ รูปภาพที่นํามาใชแสดงผลเปนพื้นของเว็บ ที่เรียกวา Background • เขาสูเว็บที่ตองการ • นําเมาสไปชี้ ณ พื้นที่วางๆ ของพื้นเว็บ นอกพื้นที่แสดงรูปภาพ • คลิกปุมขวาของเมาส จะสังเกตไดวาเมนูคาสังเปลี่ยนไป มีคาสั่งนอยกวา และมี ํ ่ ํ • จุดสังเกตทีคําสั่ง Save background as : ่ • เลือกคําสั่ง Save background as : • กําหนดไดรฟและโฟลเดอรทตองการจัดเก็บภาพ จากกรอบโตตอบ Save as: ี่
    • 15 บทที่ 3 Image Viewers การแสดงภาพจํานวนมากที่มในคอมพิวเตอร หากตองแสดงทีละภาพ ก็คงจะทําใหยุงยาก และ ี ไมสะดวก ดวยความสามารถของซอฟตแวรกลุม Image Viewer ทีชวยในการแสดงภาพจํานวนมากใน ่  ลักษณะภาพเล็กๆ ที่เรียกวา Thumbnail ทําใหซอฟตแวรกลุมนี้ เปนซอฟตแวรที่แทบจะขาดเสียมิไดในการ ใชงานคอมพิวเตอร ชวยใหการแสดงภาพในคอมพิวเตอร มีความสะดวก รวดเร็ว โปรแกรมIrfanView เปน Free Software ที่มทั้งฟงกชนการแสดงผล (Viewer) และแปลงภาพ ี ั (Converter) ที่ทางานไดบนระบบปฏิบติการ Win9x/NT, Windows 2000, Windows XP และ Windows ํ ั 2003 สนับสนุนการนําเสนอ • ภาพนิ่ง ภาพเคลื่อนไหวหลากหลายรูปแบบ เชน AIF, ANI/CUR, ASF, AU/SND, AVI, B3D, BMP/DIB, … • ไฟลเสียงและภาพยนต ASF, AU/SND/AIF, AVI, DAT (Video CD), MID/RMI, MOV, MP3, MPG/MPEG, WAV, WMA, WMV, MOV, QTIF, Mac PICT, FLI/FLC การดาวนโหลด สามารถดาวนโหลดโปรแกรมไดจากเว็บไซต www.download.com โดยปอนคําคนคือ image viewer การเรียกใชงานโปรแกรม สามารถเรียกใชงานโปรแกรมไดทั้ง • การดับเบิลคลิกที่ไอคอนโปรแกรมบน Desktop หรือเลือกจากเมนูคําสั่ง Start, Program, IrfanView, IrfanView 3.91 • ปรากฏหนาตางโปรแกรม ดังนี้ • โดยปกติสีพื้นจอภาพโปรแกรมจะเปนสีดา ํ สามารถปรับเปลียนไดโดยเลือกคําสั่ง ่ Options, Properties คลิกเลือกบัตรรายการ Viewing ปรับเปลี่ยนคาตัวเลือกจาก รายการ
    • 16 แสดงภาพ 1 ภาพตอ 1 จอ o เลือกเมนูคําสั่ง File, Open o เลือกไดรฟ, โฟลเดอร และภาพที่ตองการเปดแสดง o เมื่อคลิกปุม Open จะปรากฏภาพ ดังนี้ o ปุมควบคุมการทํางาน • ซูมภาพ • เลื่อนดูภาพกอนหนา/ภาพถัดไป (สามารถใชปม ุ FO หรือFN) o กรณีเลื่อนดูภาพถัดไป หรือภาพกอนหนา ขนาดภาพปรับเปลี่ยน เชน ใหญเกินไป หรือเล็กไป สามารถควบคุมขนาดของภาพไดโดย ปรับขนาดจอภาพใหเหมาะสม ปรับภาพโดยการซูมใหพอดีกบขนาดจอภาพ ั เลือกคําสั่ง View, Lock Zoom
    • 17 การแสดงภาพหลายภาพใน 1 จอ (Thumbnail View Mode) o เปดโปรแกรม IrfanView o เลือกคําสั่ง File, Thumbnails ปรากฏจอภาพดังนี้ เลือกไดรฟ และโฟลเดอร แสดงภาพตัวอยาง o กําหนดขนาดของภาพไดจากคําสั่ง Options, Set Thumbnail Options o ดับเบิลคลิกที่ภาพ เพื่อเขาสูโหมด 1 ภาพตอ 1 จอภาพ นําเสนอภาพแบบ Slide Show • ทํางานในโหมด Thumbnail • เลือกภาพที่ตองการแสดง o เลือกภาพทั้งหมด กดปุม Ca o เลือกบางภาพ ใชปุม C หรือ S ชวยควบคุมการเลือกภาพ • แสดงภาพแบบ Slide show ดวยคําสั่ง File, Start Slideshow with selected thumb o ปุม <Spacebar> เลื่อนดูภาพถัดไป o ปุม <Backspace> ยอนกลับ o ปุม <Esc> ยกเลิกโหมด Slide show
    • 18 พิมพภาพ (Contact Sheet) Contact Sheet คือการนําภาพที่เลือกมาแสดงเปนภาพเล็กๆ บนกระดาษ แลวสั่งพิมพ เพื่อสะดวกตอ การสืบคน เรียกใชงานภาพ • ทํางานในโหมด Thumbnail • เลือกภาพที่ตองการแสดง • สราง Contact Sheet ดวยคําสั่ง File, Create contact sheet from selected thumb • กําหนดคา o Width, Height ความกวาง ความสูงของกระดาษ o Columns, Rows จํานวนภาพเล็กๆ ที่แสดงบนกระดาษ แถวละกี่ภาพ กี่แถวตอ หนากระดาษ • คลิกเลือกรายการ Output เปน Save all pages เพื่อบันทึกเปนไฟล contact sheet โดยเลือก ไดรฟ โฟลเดอร และรูปแบบไฟลไดตามที่ตองการ • คลิกปุม Create โปรแกรมจะสราง contact sheet เปนไฟลในโฟลเดอรทระบุ ทั้งนี้จานวนไฟลที่ ี่ ํ ได จะขึ้นอยูกับจํานวนภาพที่เลือก และคากําหนดตางๆ ชื่อไฟลจะระบุดวยชือ Sheet_xxx.xxx ่ เชน Sheet_001.tif, Sheet_002.tif เปนตน
    • 19 สรางคลังภาพสําหรับนําเสนอบนเว็บ การสรางคลังภาพจากภาพจํานวนมาก เพื่อนําเสนอบนเว็บ โปรแกรม IrfanView สามารถชวยไดดังนี้ • ทํางานในโหมด Thumbnail • เลือกภาพที่ตองการแสดง • สรางคลังภาพดวยคําสั่ง File, Save selected thumb as HTML files • กําหนดชื่อไฟลแรกของระบบ จากรายการ Main HTML file name: (แนะนําใหใช index.html) • เลือกโฟลเดอรปลายทางสําหรับเก็บคลังภาพ จากรายการ Destination folder • ระบุชื่อกํากับไฟล HTML จากรายการ Page title: • กําหนดจํานวนภาพตอแถว ไดจากรายการ Columns • คลิกปุม Export โปรแกรมจะสรางคลังภาพระบบเว็บไวในโฟลเดอรทระบุ ี่
    • 20 บทที่ 4 Adobe PhotoShop โปรแกรม Adobe PhotoShop โปรแกรมกราฟกสุดฮิตที่นิยมใชในการปรับแตงภาพ หรือสรางภาพ เพื่อนํามาใชงานในเว็บ เนื่องจากมีฟงกชันการทํางาน ที่หลากหลาย มีฟลเตอรเพื่อปรับแตงภาพทําใหงาย  ตอการปรับแตงภาพตามตองการ เดิมทีนยมใช PhotoShop เพื่องานสื่อสิ่งพิมพ (Desktop Publishing) แต ิ ปจจุบันการออกแบบเว็บ มีบทบาทในงานธุรกิจและงานการศึกษาสูงมาก จึงนํามาใชในงานนี้ดวย การเรียกใชโปรแกรม การเรียกใชงานโปรแกรมมีลักษณะคลายๆ กับการเรียกใชงานโปรแกรมอื่นๆ โดยคลิกปุมคําสั่ง Start, Program, Adobe PhotoShop 7.0 ปรากฏหนาตางโปรแกรมดังนี้ Title Bar แสดงชื่อโปรแกรม และ/หรือ ชือไฟล ตลอดจนคาเกี่ยวกับโหมดภาพ ่ Control Button ปุมควบคุมหนาตาง ประกอบดวยปุม Minimize, Maximize/Restore, Close Menu Bar แถบคําสั่งควบคุมการทํางาน Toolbox แถบเครื่องมือ Workspace หนาตางสรางงาน Palettes แผงคําสั่งงาน Option Bar แสดงชุดคําสั่งยอยของเครื่องมือที่เลือกใชงาน Status Bar แถบสถานะการทํางานตางๆ
    • 21 แถบชื่อเรื่อง (Title Bar) แถบชื่อเรื่อง เปนสวนประกอบเล็กๆ แตมความสําคัญมาก ภายในแถบนีจะแสดงขอมูลสําคัญเกี่ยวกับ ี ้ ภาพหลายขอมูล จากตัวอยาง จะแสดงใหทราบวา • ภาพที่กําลังใชงานชื่อไฟลภาพ Palm Tree.TIF • ฟอรแมตของภาพคือ TIF • โหมดภาพคือ CMYK แสดงใหทราบวาเปนภาพที่เหมาะ สําหรับการนําไปสั่งพิมพ • ขณะนี้ภาพถูกยอขนาดลงเหลือ 66.7% นอกจากนี้แถบชื่อเรื่องยังมีประโยชนตอการควบคุมหนาตางภาพ โดย • การนําเมาสไปชี้ที่ Title bar แลว Drag & Drag จะเปนการยายหนาตางภาพ • การดับเบิลคลิกที่ Title Bar จะเปนการขยายหนาตางภาพใหเต็มจอภาพ แถบเครื่องมือ แถบเครื่องมือ ประกอบดวยเครื่องหมายในการจัดการภาพมากมายหลายชิ้น และมีบางชิ้นที่มี เครื่องมือยอยซอนอยู การสรางงาน ออกแบบงานกราฟก จะตองเกี่ยวของกับเครื่องมือตางๆ ตลอดเวลา ยายตําแหนงโดย Drag & Drop ที่แถบสี เปด/ปดแถบเครื่องมือจากคําสัง Window, Tools ่ เครื่องมือที่มสญลักษณสามเหลี่ยมกํากับมุมลางขวา เชน ี ั เมื่อคลิกคางไว จะปรากฏเครื่องมือที่ซอนไว หรือจะใชเทคนิคการกดปุม A แลวคลิกสลับไปทีละ เครื่องมือก็ได
    • 22 Option Bar Option Bar เปนสวนควมคุมเสริมสําหรับเครื่องมือแตละชิ้น โดยเมื่อคลิกเครื่องมือแตละชิ้น จะ ปรากฏรายการเสริม คําสั่งยอยของเครื่องมือพิมพขอความ (Text Tool) คําสั่งยอยของเครื่องมือ Rubber Stamp Status Bar Status bar หรือแถบสถานะ ใชแสดงขอมูลประกอบการทํางาน เชน คา % ของมุมมองจอภาพ, ขนาดไฟล, คําอธิบายเทคนิคการใชเครื่องมือที่เลือกเปนตน ขอมูลที่ปรากฏใน Status bar สามารถปรับเปลี่ยนไดโดยคลิกที่ปุมควบคุมขอมูล • Document Sizes ขอมูลขนาดของไฟลภาพ โดยคาแรกจะเปนคาโดยประมาณเมื่อมีการบันทึก แบบไมมีชั้นเลเยอร คาทีสองเปนคาบันทึกเมือมีชั้นเลเยอร ่ ่ • Document Profile แสดงขอมูลชุดสี (Color Profile) ที่ใชกับภาพ ซึ่งสัมพันธกับโหมดสี • Document Dimensions ขอมูลความสูง ความกวางของภาพ • Scratch Sizes ขอมูลแสดงหนวยความจําที่ถูกใชในการสรางภาพ ตัวเลขดานซายคือ หนวยความจําที่ถูกใชไป ตัวเลขดานขวาคือหนวยความจําทั้งหมดทีระบบเตรียมไวให ถาตัวเลข ่ ดานซายมีคามากกวาตัวเลขดานขวา ประสิทธิภาพการใชโปรแกรมจะลดลงทันที  • Efficiency ประสิทธิภาพใชหนวยความจํา • Timing เวลาทีใชในการสั่งงานครั้งลาสุด สามารถ Reset คาเวลาโดยกดปุม ่ A คางไวแลว เลือกคําสั่ง Timing ซ้ําอีกครัง ้ • Current Tool แสดงชื่อเครื่องมือที่ถูกเลือกใชงาน กดปุม A คางไว แลว คลิกในแถบขอมูล ปรากฏ ขอมูล Image Size
    • 23 Palettes Palettes เปนหนาตางเล็กทีแสดงรายละเอียดของงานตางๆ เชน Layer ควบคุมชั้นงาน (เลเยอร) ่ Navigator ควบคุมมุมมองหนาตางงาน เปนตน การควบคุม Palette ใชหลักการเดียวกับการควบคุมหนาตางทั่วไป ดังนันจึงสามารถปด, ยอ, ยาย ้ ตําแหนง และปรับขนาดของ Palette ไดตลอดเวลาที่ใชงาน และหาก Palette ใด ไมไดใชงานก็ควรปดไป กอน เพื่อเพิ่มพื้นที่ใหการทํางาน การเปด/ปด Palette ใชเมนูคําสั่ง Window แลวคลิกเลือก Palette ที่ ตองการเปดใชงาน (เลือกไดตั้งแตรายการ File Browser เปนตนไป) และสามารถซอน Palette แบบชั่วคราว โดยการกดปุม ST (รวมถึงแถบเครื่องมือ และ Option Bar) คลิกเพื่อปด ใชแถบสี Drag & Drop เพื่อยายตําแหนง Palette Drag & Drop เพื่อยอ/ขยาย คลิกเพื่อยุบขนาด โดยคาติดตั้ง (Default) Palette ชุดเดียวกัน หรือสัมพันธกัน จะถูกกําหนดใหแสดงบนชุด Palette เดียวกันในลักษณะ Tab Sheet แตกสามารถแยกออกจากชุดได โดยใชหลักการ Drag & Drop ็ Palettes ที่แยกออกมาจากชุด สามารถคืนกลับไดโดยการลากกลับสูชดเดิม หรือคลิกเลือกคําสั่ง ุ Window, Workspace, Reset Palette Locations นอกจากนี้ยังสามารถยาย Palettes ตางๆ ไปใสไวใน Palette Well ซึ่งเปนสวนควบคุม Palette ที่จะปรากฏเมื่อใชงานบนจอภาพที่มความละเอียดมากกวา 800 x ี 600 pixels โดยจะปรากฏที่มมบนขวาของ Workspace ุ
    • 24 Palette แตละชิ้น จะมีคําสังยอยสําหรับควบคุมการทํางานเฉพาะ ซึ่งสามารถเปดคําสังยอยแตละ ่ ่ Palette ไดโดยคลิกที่ปุม Palette Control Menu ซึ่งแสดงดวยสัญลักษณ มุมบนขวาของ Palettes คําสั่งของ Channels คําสั่งของ Layers หนวยวัด การออกแบบงานกราฟกสําหรับเว็บ จําเปนตองคํานึงถึงขนาดของภาพที่เหมาะสมตอการไปแสดงผล บนหนาเว็บ หากใชภาพขนาดใหญเกินไป อาจจะทําใหไมไดสัดสวนทีพอเหมาะกับพื้นที่ของหนาเว็บ หรือ ่ อาจจะเกิดปญหาการเลื่อนจอภาพ และหากเล็กเกินไปก็อาจจะทําใหภาพไมสดใส สวยงาม การกําหนดขนาด ของภาพกราฟกจึงเปนสวนสําคัญกอนสรางชินงาน ้ ขนาดของภาพกราฟก สัมพันธกับมาตราหนวยวัด ปกติโปรแกรม Adobe PhotoShop จะกําหนดคา หนวยวัดเปน “เซนติเมตร” แตสําหรับงานออกแบบกราฟกสําหรับเว็บจะใชมาตราหนวยวัดเปน Pixel จึงควร ปรับแตงคาหนวยวัดกอนใชงานโปรแกรม โดยเลือกคําสั่ง Edit, Preferences, General, Units & Rulers คาทีตองปรับเปลี่ยนเปน Pixels ่ ภาษาไทยกับ PhotoShop PhotoShop มีปญหาการพิมพภาษาไทยกรณีทเลือกใชฟอนตที่ตดตั้งมากับระบบปฏิบัติการ ่ี ิ Windows ดังนั้นกอนใชงาน PhotoShop จะตองทําการติดตั้งฟอนตเฉพาะ ดังนี้ • เลือกคําสั่ง Start, Settings, Control Panel • ดับเบิลคลิกที่ Fonts • เลือกคําสั่ง Install New Fonts • เลือกไดรฟ และโฟลเดอรเก็บไฟลฟอนต แลวคลิกปุม Install ดาวนโหลดฟอนตภาษาไทยไดจากเว็บ www.nectec.or.th/courseware
    • 25 จัดการไฟลภาพ เปดไฟลภาพ (Open File) คําสั่งแรกที่มักจะใชงานสําหรับผูพัฒนามือใหม ก็คือการเปดดูภาพที่โปรแกรมเตรียมไวเปนตัวอยาง หรือเปดดูภาพอื่นๆ ซึ่งคําสั่งในการเปดไฟลภาพของ PhotoShop มีสองคําสั่ง ไดแก • คําสั่ง File, Open… จะใชในกรณีที่ตองการเปดดูไฟลภาพทุกๆ ฟอรแมต • คําสั่ง File, Open as… ใชในกรณีที่ตองการเปดดูไฟลภาพที่ตองการระบุฟอรแมตของไฟล นอกจากนี้สามารถใชวิธดับเบิลคลิกบนพื้นทีวางๆ ของ Workspace เพื่อเปนทางลัดในการเปดไฟล ี ่ ไดเชนกัน โฟลเดอรเก็บภาพตัวอยางของ PhotoShop 7.0 การสรางงานใหม (New File) สําหรับทานทีตองการสรางชิ้นงาน สามารถกระทําไดโดยเปดหนางานใหม ดวยคําสั่ง File, New… ่  ซึ่งจะปรากฏกรอบทํางาน ดังนี้ • รายการ Name ระบุชื่อไฟลภาพ (ไมจําเปนตองปอนก็ได) • Image Size - Width ความกวางของชิ้นงาน แนะนําใหใชหนวยเปน Pixel - Height ความสูงของชินงาน ้ แนะนําใหใชหนวยเปน Pixel - Resolution ความละเอียดของชิ้นงาน กําหนดเปน 72 pixel/inch - Mode โหมดการสรางงาน แนะนําใหเลือกเปน RGB Color • รายการ Contents ลักษณะของพื้นภาพ (Background) แนะนําใหใช White - White พื้นภาพเปนสีขาว - Background Color พื้นภาพใชสี Background Color - Transparent ไมมีพื้นภาพ (ภาพโปรงใส) การกําหนดคาเกี่ยวกับ Width และ Height ของภาพ จะตองสัมพันธกับ Screen Area ของจอภาพ และลักษณะ Layout ของหนาเว็บที่กําหนดไวดวยเสมอโดยปกติจอภาพ 14 นิ้ว มี Screen Area ได 3 ลักษณะ คือ 640 × 480 pixel, 800 × 600 pixel และ 1024 × 768 pixel
    • 26 ดังนั้นกอนจะสรางภาพกราฟก ควรวางแผนกอนวา เว็บที่จะนําเสนอ ตองการใหแสดงผลไดดที่สดบนี ุ จอภาพทีมี Screen Area เทาใด เชน ตองการใหเว็บที่พฒนาแสดงผลบนจอภาพขนาด 800 × 600 pixel ่ ั ภาพกราฟกทีสรางไมควรมีความยาวถึง 800 pixel เพราะโปรแกรมเบราวเซอรมีจะคากําหนดเกี่ยวกับ Margin ่ เสมอ ตลอดจนจะตองมี Scroll Bar ดังนั้นคาความยาวที่เหมาะสมสําหรับจอภาพขนาด 800 × 600 pixel คือ ไมเกิน 780 pixel เปนตน สําหรับความสูงไมมีขอกําหนดตายตัว ขึ้นอยูกับปริมาณขอมูลในหนาเว็บนั้นๆ ตรวจสอบขนาดของจอภาพที่ใชงาน • คลิกขวาบน Desktop เลือกคําสั่ง Properties เลือกบัตรรายการ Settings • ตรวจสอบจากรายการ ตัวอยางขนาดของภาพกราฟก เมนูมความกวาง <= 200 pixels ี หนาเว็บมีความกวาง 780 pixels ภาพ Title มีความกวาง <= 780 pixels ความสูง <= 120 pixels กราฟกในสวนเนื้อหา มีความกวาง <= 350 pixels แบนเนอรในการแลกลิงก มีขนาด 100 x 30 pixels
    • 27 จัดเก็บภาพ (Save File) การบันทึกภาพ หรือจัดเก็บภาพมีขอพิจารณา 2 ประเด็นคือ การบันทึกภาพตนฉบับ มีสวนขยาย เปน .psd ซึ่งภาพลักษณะนี้จะยังคงชั้นของเลเยอรไวดังเดิม และการบันทึกภาพเพื่อนําไปใชงาน โดย โปรแกรมจะรวมเลเยอรที่มทั้งหมดเปนชั้นเดียว คือชั้น Background ี ไฟลภาพตนฉบับ .psd จะมีชั้นเลเยอรครบทุกชั้น ไฟลภาพสําหรับใชงาน .jpg มีลักษณะเหมือนภาพตนฉบับ แตจะมีชั้นเลเยอรเพียงชั้นเดียว การจัดเก็บภาพ (Save File) สําหรับภาพตนฉบับ • เลือกคําสั่ง File, Save สําหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สําหรับการจัดเก็บงาน ครั้งที่สองและตองการเปลี่ยนชื่อไฟลภาพ • ปรากฏจอภาพโตตอบการทํางานดังนี้
    • 28 • เลือกไดรฟ และโฟลเดอรทตองการเก็บภาพ จากรายการ Save in: ี่  • ตั้งชื่อไฟลภาพโดยพิมพในบรรทัด File name: • เลือกประเภทของไฟลเปน Photoshop (*.PSD, *.PDD) จากรายการ Format: • คลิกปุม Save เพื่อยืนยันการจัดเก็บภาพ การจัดเก็บภาพ (Save) ภาพในฟอรแมต JPG • เลือกคําสั่ง File, Save สําหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สําหรับการจัดเก็บงาน ครั้งที่สองและตองการเปลี่ยนชื่อไฟลภาพ • เลือกไดรฟ และโฟลเดอรทตองการเก็บภาพ จากรายการ Save in: ี่  • ตั้งชื่อไฟลภาพโดยพิมพในบรรทัด File name: • เลือกประเภทของไฟลเปน JPEG (*.JPG, *.JPE) จากรายการ Format: • คลิกปุม Save เพื่อยืนยันการจัดเก็บภาพ • ปรากฏหนาตาง JPEG Options ดังนี้ • กําหนดคา Quality เพื่อควบคุมคุณภาพของภาพ ไวประมาณ 5 - 7 ไมควรกําหนดคาไวมาก เกินไปเพราะจะทําใหไฟลมีขนาดใหญ และทําใหเสียเวลานานในการโหลดภาพจากเครืองแม ่ ขาย รวมทั้งไมควรกําหนดคาไวนอยมาก เพราะจะทําใหคุณภาพของภาพต่ํา ภาพที่แสดงไม คมชัด • กําหนดคา Format Options o กรณีภาพมีขนาดโต ใหเลือก Progressive = 3 เพื่อเพิ่มคุณสมบัติ Progressive o ภาพปกติ ใหเลือกเปน Baseline Optimized การจัดเก็บภาพ (Save) ภาพในฟอรแมต GIF87 • เลือกคําสั่ง File, Save สําหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สําหรับการจัดเก็บงาน ครั้งที่สองและตองการเปลี่ยนชื่อไฟลภาพ • ปรากฏจอภาพโตตอบการทํางาน • เลือกไดรฟ และโฟลเดอรทตองการเก็บภาพ จากรายการ Save in: ี่  • ตั้งชื่อไฟลภาพโดยพิมพในบรรทัด File name: • เลือกประเภทของไฟลเปน CpmpuServe GIF (*.GIF) จากรายการ Format: • คลิกปุม Save เพื่อยืนยันการจัดเก็บภาพ • กรณีที่ภาพนั้นๆ มีหลายเลเยอรจะปรากฏกรอบโตตอบการรวมเลเยอร
    • 29 • คลิกปุม Ok เพื่อรวมเลเยอร • ปรากฏกรอบโตตอบการกําหนดคาเกี่ยวกับ Indexed Color • ตรวจสอบคาสี หรือปรับเปลียนตามที่ตองการ แลวคลิกปุม OK ่ • ปรากฏกรอบโตตอบการตั้งคุณสมบัติของภาพ • ถาภาพขนาดเล็ก ใหเลือกเปน Normal แตถาภาพมีขนาดโต ใหเลือกเปน Interlaced แลวคลิก ปุม OK การจัดเก็บภาพ (Save) ภาพในฟอรแมต GIF89 - Transparent ไฟลภาพฟอรแมต GIF89 Transparent ก็เปนอีกหนึ่งฟอรแมตที่นยมใชในการสรางเอกสารเว็บ ปกติ ิ จะใชกับภาพทีมีสีหรือความคมชัดไมมากนัก และตองการใหพื้นหลังของภาพ (Background) มีลกษณะ ่ ั โปรงใส โปรแกรม PhotoShop มีวิธีการจัดเก็บภาพใหเปนฟอรแมต GIF89 Transparent ดังนี้ • ภาพลักษณะเปนเลเยอร ควรรวมเลเยอรกอนดวยคําสั่ง Layer, Flatten Image • ใชเครื่องมือ Magic Wand คลิกที่พื้นภาพทีตองการทําใหโปรงใส จะปรากฏเสน Selection ่ โดยอัตโนมัติ (กรณีที่ตองการยกเลิกเสน Selection เพื่อเลือกใหมใหเลือกคําสั่ง Select, Deselect) • เลือกเมนูคําสั่ง Help, Export Transparent Image… • ปรากฏกรอบโตตอบเลือกรูปแบบของภาพตนฉบับ ดังนี้ o เลือกรายการ My image is on a transparent background ถาภาพทีสราง มีพื้นเปนแบบ ่ Transparent อยูแลว o เลือกรายการ I have selected the area to be made transparent เมื่อใชคําสัง ่ Selection เลือกสีทตองการกําหนดใหมีโหมดเปน Transparent แลว ี่ o เลือกรายการ I need to select the area to be made transparent เมื่อขอกลับไปกําหนด Selection เพื่อเลือกสีที่ตองการกําหนดใหมีโหมดเปน Transparent กอน
    • 30 • หากเลือกรายการ 1 หรือ 2 แลว ก็ใหคลิกปุม Next ปรากฏกรอบโตตอบ ดังนี้  • คลิกเลือกรายการ Online เพื่อกําหนด Transparent สําหรับภาพนําเสนอผานเว็บ แลวคลิกปุม Next ปรากฏกรอบโตตอบ เลือกฟอรแมตของภาพ เลือกเปน .GIF • โปรแกรมจะตรวจสภาพของรูปภาพ ใหคลิกปุม Next จากนั้นจะปรากฎกรอบโตตอบถามคาสีที่ ตองการใชงานกับภาพนั้นๆ โดยสามารถเลือกระดับคาสีไดตามตองการ เพื่อใหเหมาะสมกับภาพ นั้นๆ แลวคลิกปุม OK • ปรากฏจอภาพโตตอบ Save As เลือกไดรฟ และโฟลเดอรที่ตองการเก็บภาพ จากรายการ Save in: ตั้งชื่อไฟลภาพโดยพิมพในบรรทัด File name: เลือกประเภทของไฟลเปน CpmpuServe GIF (*.GIF) จากรายการ Format: คลิกปุม Save เพื่อยืนยันการจัดเก็บภาพ • ปรากฏกรอบโตตอบการตั้งคุณสมบัติของภาพ • ถาภาพขนาดเล็ก ใหเลือกเปน Normal แตถาภาพมีขนาดโต ใหเลือกเปน Interlaced หรือตาม ตองการ แลวคลิกปุม OK • กดปุม Finish รอสักครูโปรแกรมจะจัดเก็บภาพในฟอรแมต GIF89
    • 31 คําสั่ง Save for Web คําสั่ง Save for Web เปนคําสั่งในการจัดเก็บไฟลภาพ เชนเดียวกับคําสั่งที่กลาวมาขางตน และเปน คําสั่งใหมที่มาพรอมกับ PhotoShop ซึ่งมีจดเดนคือ ผูใชสามารถตรวจสอบขนาดไฟลภาพ (File Size) และ ุ  ความคมชัดของภาพไดโดยตรงกอนยืนยันการจัดเก็บ โดยเลือกคําสั่ง File, Save for Web…ซึ่งโปรแกรมจะ วิเคราะหลักษณะของภาพและกําหนดรายการตางๆ ที่จําเปนโดยอัตโนมัติ กรณีท่ภาพถูกแบงเปนชิ้นเล็กๆ (Slice) จะปรากฏเปนชิ้นภาพ และกํากับดวยหมายเลขบนแถบสีน้ํา ี เงิน ซึ่งจะไดไฟลภาพเปนไฟลยอยตามจํานวนชิ้น มี 5 ชิน ก็จะได 5 ไฟลภาพ แตละภาพสามารถกําหนด ้ ฟอรแมตไดอสระ โดยใชเครืองมือ Slice Selection ิ ่ คลิกเลือกภาพที่ตองการ ปรากฏตัวเลือกควบคุม  ฟอรแมตภาพ ปรับเปลี่ยนฟอรแมตภาพ มุมมองของหนาตางภาพ ภาพตางๆ ที่เปดขึ้นมา อาจจะมีขนาดโตเกินไป หรือเล็กเกินไป ทําใหการปรับแตงภาพเกิดปญหาใน การควบคุมหรือใชงานเครื่องมือ ดังนั้นคําสังควบคุมมุมมองของหนาตางภาพ จึงเปนอีกคําสั่งหนึ่งทีควรทราบ ่ ่ ดังนี้ • การดับเบิ้ลคลิกที่เครื่องมือ Hand จะเปนการปรับภาพใหมีขนาดพอดีกับจอภาพ (Fit on Screen) • การคลิกเลือกเครื่องมือ Zoom แลวนําเมาสไปคลิกทีภาพ จะเปนการขยายมุมมองของภาพ ่ • การคลิกเลือกเครื่องมือ Zoom แลวนําเมาสไปคลิกที่ภาพ พรอมๆ กับกดปุม A คางไว จะเปนการยอมุมมองของภาพ • การดับเบิ้ลคลิกที่เครื่องมือ Zoom จะเปนการปรับภาพใหมขนาด 100% ี • การปรับมุมมองภาพดวย Navigator Palette • ปรับคาจาก Status Bar
    • 32 • เลือกโหมดการแสดงจากแถบเครื่องมือ มุมมองปกติ มุมมองเต็มจอภาพ ไมมี Menu มุมมองเต็มจอภาพ และมี Menu ลําดับขั้นตอนสําคัญการออกแบบงานกราฟก การออกแบบงานกราฟกสําหรับเว็บ มีทั้งการนําภาพที่มีอยูแลวมาปรับแตง และการเริ่มตนสรางงาน  ใหม โดยแตละรูปแบบมีลําดับการทํางานทีแตกตางกันเล็กนอย เพื่อใหไดชิ้นงานที่เหมาะสมตอการนําเสนอ ่ บนเว็บที่สด ุ เปดไฟลภาพ คําสั่ง Filter ไม Mode ภาพเปน ไม เลือกไดครบ? CMYK? ใช ใช เลือก Image, Mode, RGB color ใช คําสั่ง Filter เลือก Image, Image Size เลือกไดครบ? ไม เลือกคําสั่ง Image, Mode, 8 Bits/Channel Resolution = ไม แกไขคา Resolution เปน 72pixels/inch? 72 pixels/inch ใช ปรับแตง แกไขชิ้นงาน
    • 33 โหมดภาพ ภาพทีจะในการสรางเอกสารเว็บ จะตองมีโหมดภาพเปน RGB แบบ 8 Bit/Channels การนําภาพจาก ่ แหลงอื่นมาใชงาน เชน คลังภาพ, กลองถายภาพดิจทัล, เครื่องกราดภาพ ควรตรวจสอบโหมดภาพกอนสราง ิ งาน • เปดไฟลภาพทีตองการ ่ • สังเกตจากแถบ Title ของหนาตางภาพ ซึ่งจะแสดงโหมดภาพของภาพนั้นๆ รูปแสดงภาพในโหมด CMYK รูปแสดงภาพในโหมด RGB • หากโหมดภาพที่แสดงไมใชโหมด RGB กอนปรับแตง แกไขภาพ ควรเปลี่ยนโหมดภาพกอน ดวยคําสั่ง Image, Mode, RGB Color • ภาพกราฟกในโหมด RGB แบบ 16 bit/channels ก็ตองเปลี่ยนเปน 8bit/channels ดวยคําสั่ง Image, Mode, 8 bit/Channels ความละเอียดของภาพ ภาพทีจะนํามาใชในเอกสารเว็บ จะตองมีคาความละเอียด (Resolution) เทากับ 72 pixels/inch ่ เทานั้น ดังนั้นหากภาพนั้นมีคาความละเอียดมาก จะตองปรับคากอนโดย  • เลือกเมนูคําสั่ง Image, Image Size… • ปรับคา Resolution ใหเทากับ 72 pixels/inch • โดยปกติเมื่อมีการปรับคาความละเอียดของภาพ จะสงผลตอขนาดของภาพ (pixel dimensions) ดวย ดังนั้นจะตองยกเลิกรายการเลือกของ Resample Image กอน ขนาดของภาพ เนื่องจากการนําเสนอขอมูลบนเว็บจําเปนตอง พิจารณาถึงพื้นที่นําเสนอ ความเร็วในการโหลดภาพ และแสดงผลภาพเปนหลัก ดังนั้นภาพที่นามาใชงาน ํ หากมีขนาดโตเกินไป สามารถยอ หรือปรับขนาดได ดังนี้ • เลือกเมนูคําสั่ง Image, Image Size… • ปรับคา Pixel Dimensions โดยสามารถ ปรับเพียงคาใดคาหนึ่ง อีกคาจะปรับให อัตโนมัติ แตถาตองการปรับคาเองทั้งสอง  คาจะตองยกเลิกรายการเลือกของ Constrain Proportions กอน
    • 34 บทที่ 5 File Browser File Browser ฟงกชันเล็กๆ ของ PhotoShop ทําหนาที่แสดงภาพในคอมพิวเตอรแบบ Thumbnail คลายๆ กับโปรแกรม IrfanView หรือ ACDSee สามารถเปดใชไดโดยเลือกคําสั่ง File, Browse หรือคลิกที่ปม ุ Browser บน Palette Well ปุมเรียก File Browser บน Palette Well กรณีท่จอภาพมีขนาดเล็กกวา 800 x 600 pixels จะไมมี Palette Well และหนาตางการทํางานของ ี File Browser จะแสดงผลในรูปแบบของหนาตางงาน แสดงรายละเอียดโฟลเดอร และไฟล ภาพตัวอยาง ภาพที่เลือก รายละเอียดของภาพ (Metadata) Control Menu
    • 35 เปดไฟล การเปดไฟลผาน File Browser ทําไดโดยดับเบิลคลิกทีภาพ หรือลากภาพมาวางบน Workspace ่ ของ PhotoShop ลบไฟล ลบไฟลภาพผาน File Browser มีวิธการรวดเร็วคือเลือกภาพ แลวกดปุม ี = หรือคลิกปุม Delete File บน Status bar ของ File Browser เลือกภาพได หลายๆ ภาพโดยใช ปุม S หรือ C คลิกปุม Delete File หมุนภาพ ภาพทีแสดงใน File Browser สามารถหมุนภาพไดงายดวยปุม Rotate ภาพจะหมุน 90 องศาในแนว ่ ตามเข็มนาฬิกา และหากกดปุม A คางไว แลวคลิกปุม Rotate จะหมุนภาพ 90 องศาในแนวทวนเข็ม  นาฬิกา เลือกภาพได หลายๆ ภาพโดยใช ปุม S หรือ C คลิกปุม Rotate การหมุนภาพทํามุม 180 องศาสามารถเลือกไดจากคําสั่งใน Control Menu
    • 36 เปลี่ยนชื่อไฟลภาพ คําสั่งเปลียนชือไฟล (Rename) ใชหลักการลักษณะเดียวกับการลบไฟล โดยเลือกไฟลแลวกดปุม ่ ่ @ เพื่อเปลี่ยนชื่อไฟล แตมจุดเดนที่สามารถเปลี่ยนขื่อไฟลไดพรอมๆ กันหลายไฟล ดวยวิธีการดังนี้ ี • เลือกไฟล • กดปุม Control Menu เลือกคําสั่ง Batch Rename… เลือกรูปแบบการเปลี่ยนชื่อ เลือกรูปแบบของชื่อไฟลใหม 1) เปลี่ยนเฉพาะชือไฟล ่ 2) เปลี่ยนชื่อแลวยายไฟลไป โฟลเดอรอื่น ตัวอยางรูปแบบของการระบุชื่อไฟลใหม รูปแบบที่เลือก ความหมาย Document Name + extension ใชชื่อไฟลเดิม แตใหตัวอักษรตัวแรกเปนตัวพิมพใหญ ตามดวยนามสกุลเปนตัวพิมพเล็กทั้งหมด document name + extension ใชชื่อไฟลเดิม แตใหชื่อไฟลทกไฟล ทุกตัวอักษร ุ เปนตัวพิมพเล็ก เชนเดียวกับนามสกุล 1 Digit Serial Number + Serial ใหเปลี่ยนชื่อไฟลเดิม เปนตัวเลข 1 หลักผสมกับ Letter (a, b, c,…) + extension ตัวอักษรตัวพิมพเล็ก และนามสกุลตัวพิมพเล็ก การใหลําดับความสําคัญของภาพ ภาพแตละภาพสามารถกําหนดลําดับความสําคัญ (Rank) ไดเพื่อสะดวกตอการจัดหมวดหมู หรือการ สืบคน โดยโปรแกรมใหคาลําดับความสําคัญไดต้งแต A – E การกําหนดคาลําดับความสําคัญใหกับภาพ  ั กระทําไดโดย • เลือกภาพ สามารถเลือกหลายๆ ภาพ • คลิกปุมขวาของเมาส แลวเลือก Rank ที่ตองการ • แสดงภาพจากคา Rank
    • 37 บทที่ 6 ขอบเขตภาพ (Selection) การเลือกภาพหรือสวนของภาพ (Selection) การเลือกภาพหรือสวนของภาพ นับเปนงานหลักของการปรับแตงภาพ หรือสรางภาพ โปรแกรม เตรียมเครื่องมือเลือกภาพ โดยแบงเปนชุดไดดังนี้ • ชุดกําหนดขอบเขตดวยรูปทรง เลือกจากเครื่องมือ Marquee • ชุดกําหนดขอบเขตรูปทรงอิสระ เลือกจากเครืองมือ Lasso ่ • ชุดกําหนดขอบเขตจากคาสี เลือกจากเครื่องมือ Magic Wand การสรางขอบเขตดวย Selection มีประโยชนมาก เนืองจากสามารถนําไปประยุกตใชไดทั้งการ ่ ปรับแตงแกไขภาพ การสรางภาพ เชน ตัดภาพ หรือสรางปุม กรอบภาพลักษณะตางๆ  เครื่องมือ Marquee • คลิกเลือกเครื่องมือ หรือกดปุมเมาสคางไวที่เครื่องมือ  แลวคลิกเลือกเครื่องมือยอยที่ ตองการ • นําเมาสมาชี้ทตําแหนงเริ่มตนของขอบเขต ี่ กดปุมเมาสคางไว แลวลากเมาสกําหนดขอบเขต เมื่อไดขนาดทีตองการก็ปลอยนิ้วจากเมาส ่ ทิศทางการลากเมาส ควรลากในแนวเฉียง • ขณะสราง Selection ถากดปุม  S คางไว จะเปนการสราง Selection สี่เหลียมจัตุรส หรือ ่ ั วงกลมแทจริง • ขณะสราง Selection ถากดปุม A คางไว จะเปนการสราง Selection ที่จดเริ่มตนเปนจุด ุ ศูนยกลาง ขนาดของ Selection จะขยายออกเทาๆ กันในทุกทิศทาง • การสราง Selection ของภาพทั้งภาพ (เลือกทั้งหมด) ใชคยลัด ี  Ca การยกเลิก Selection การยกเลิก Selection ใหกดปุม  Cd หรือเลือกคําสั่ง Selection, Deselect
    • 38 คากําหนดของ Marquee เครื่องมือ Marquee มีคําสั่งยอยบน Option Bar ซึ่งมีรายละเอียดดังนี้ โหมดการสราง คาความฟุงของ รูปแบบการสราง Selection ขอบ Selection • โหมดการสราง Selection a. New selection สราง Selection ใหมทุกครั้ง โดยยกเลิก Selection ที่มีอยูเดิม b. Add to selection สราง Selection ใหมรวมกับ Selection ทีมีอยูเดิม (คียลดคือ ่ ั S> ซึ่งจะมีประโยชนมากในการสรางรูปทรงแปลกๆ Selection เริ่มตน รูปสี่เหลี่ยม Selection รูปสี่เหลี่ยมชิ้นที่สอง ในโหมด Add ผลลัพธจากที่ปรากฏจากการเพิ่ม Selection นํา Selection วงรีมาผสม
    • 39 c. Subtract from selection สราง Selection โดยใชเทคนิคการหักลบออกจาก Selection ที่ มีอยูเดิม (คียลดคือ A) ั d. Intersect with selection เทคนิคการสราง Selection โดยใหปรากฏสวนที่ซ้ํากันของ Selection 2 ชินขึ้นไป ้ Selection ที่ ตองการ ใชงาน • คาความฟุงของขอบ (Feather) เปนคําสั่งที่ใชมากในการสรางขอบภาพใหมลกษณะฟุง ี ั กลมกลืนกับพื้นของภาพ ตัวเลขที่ปอนยิ่งมาก ขอบภาพก็จะฟุงมากไปดวย ขอบภาพที่ไมมีความฟุง ขอบภาพที่ฟุง • รูปแบบการสราง Selection โดยปกติ Selection สามารถกําหนดขอบเขตไดอิสระ แตก็ สามารถเลือกรูปแบบได ดังนี้ a. Normal สราง Selection ไดอิสระ b. Fixed Aspect Ratio กําหนดขอบเขตทีสัมพันธกันระหวางความกวาง ความสูง ่ c. Fixed Size กําหนดขอบเขตตายตัว
    • 40 เครื่องมือ Lasso • คลิกเลือกเครื่องมือ หรือกดปุมเมาสคางไวทเครื่องมือ   ี่ แลวคลิกเลือกเครืองมือยอยที่ ่ ตองการ o Lasso สราง Selection รูปทรงอิสระ • นําเมาสมาชี้ทตําแหนงเริ่มตนของขอบเขต ี่ กดปุมเมาสคางไว แลวลากเมาส กําหนดขอบเขต เมื่อไดขนาดทีตองการก็ปลอยนิ้วจากเมาส (หรือคลิกเมาสเปน ่ ระยะๆ เพื่อใหไดขอบเขตที่ตองการ) o Polygonal Lasso สราง Selection รูปทรงเหลี่ยมอิสระ • นําเมาสคลิกทีจุดเริ่มตน แลวคลิก ณ ตําแหนงอื่นๆ ที่ตองการไปเรื่อยๆ จนได ่ ขอบเขตที่ตองการ o Magnetic Lasso สราง Selection อัตโนมัติโดยใชคาแตกตางของสี  • นําเมาสคลิกทีจุดเริ่มตน แลวปลอยนิ้ว เมื่อลากเมาส โปรแกรมจะทําการสราง ่ จุดเชื่อมอัตโนมัติ • ตําแหนงที่มความแตกตางของสีนอยมาก สามารถใชการคลิกเพิ่มจุดเพื่อชวย ี  กําหนดขอบเขตได • ยุติการกําหนดขอบเขต ทําไดสองวิธีคือ o ดับเบิลคลิกที่จดปลายทาง ุ o นําเมาสกลับไปคลิก ณ จุดเริ่มตน • Option Bar ของ Lasso มีคาลักษณะเดียวกับ Option ของ Marquee 
    • 41 เครื่องมือ Magic Wand Magic Wand เปนเครื่องมือสราง Selection โดยอาศัยคาสี และความแตกตางของคาสีทอยูรอบๆ สี ี่ ที่ถูกเลือก • คลิกเลือกเครื่องมือ Magic Wand • นําเมาสซึ่งมีรูปรางเปน Magic Wand ไปคลิก ณ ตําแหนงที่ตองการ จะปรากฏ Selection เปน บริเวณพื้นที่ • ระบุคาความแตกตางของคาสีไดจากรายการ Tolerance บน Option bar โดยตัวเลขนอย มีคา ความแตกตางนอย ได Selection ขอบเขตเล็ก คากําหนดของ Tolerance คือ 32 หมายความวาเมื่อคลิกสี ณ ตําแหนงใดๆ ใหโปรแกรม ตรวจสอบโทนสีของสีนั้นๆ ทีออนกวา 32 คา และมากกวา 32 คา ในการสราง Selection ่ • หากตองการเลือกพื้นที่อื่นๆ ใหกดปุม S คางไว แลวคลิก ณ พื้นที่นั้นๆ ยายตําแหนง Selection Selection ที่สรางไวแลว ถามีตําแหนงไมตรงกับที่ตองการ สามารถปรับเลื่อนยายตําแหนงไดโดยนํา เมาสไปชี้ใน Selection แลวลากยายไปตําแหนงใหม หรือขณะทีสราง Selection สามารถกดปุม ่  <Spacebar> แลวลากเมาส จะพบวา Selection ยายตําแหนงไปดวย นอกจากนี้ยังสามารถใชปุมลูกศรเพื่อ เลื่อนครั้งละ 1 Pixel หรือกดปุม S พรอมปุมลูกศรเพื่อเลือนครั้งละ 10 Pixels  ่ ขอบ Selection ใหโคงมน การสรางปุม หรือกรอบสี่เหลี่ยมที่มุมโคงมน จะใชเทคนิคการสราง Selection ดวย Retangular Marquee แลวทํามุมใหโคงมนดวยคําสั่ง Select, Modify, Smooth คาที่ปอนยิ่งมาก มุมก็โคงมนมาก  Selection สี่เหลี่ยมปกติ ปรับมุมใหโคงมนดวยคําสั่ง Smooth กรอบ Selection โดยปกติเสน Selection จะมีขอบที่บาง ซึ่งสามารถทําขอบของ Selection ใหหนาขึ้นไดดวยคําสั่ง  Selection, Modify, Border คามากความหนาของขอบก็มากไปดวย Selection สี่เหลี่ยมปกติ ปรับใหขอบมีความหนา
    • 42 ขยาย Selection การขยาย Selection ที่สรางไว ใชคาสั่ง Select, Modify, Expand แลวปอนคาทีตองการลงไป ํ ่  ยอ Selection การยอ Selection ใชคําสั่ง Select, Modify, Contract แลวปอนคาทีตองการลงไป ่ บันทึก Selection Selection บางชิ้นสรางไดยาก เชน Selection จากเครื่องมือ Lasso ถาทํางานเสร็จแลวยกเลิกเสน Selection การสรางใหมจะกอใหเกิดปญหาไดงาย ดังนั้นควรทําการบันทึก Selection เพื่อความสะดวกในการ เรียกใชงานในครั้งถัดไป โดยเลือกคําสั่ง Select, Save Selection ตั้งชื่อ Selection ในรายการ Name แลวกด ปุม OK เรียกใชงาน Selection Selection ที่บนทึกไว สามารถเรียกกลับมาใชงานได โดยเลือกคําสั่ง Select, Load Selection ั เลือกชื่อรูปแบบ Selection ทีตองการเรียกใชงานจากรายการ Channel แลวคลิกปุม OK ่ สลับ Selection เมื่อมีการสราง Selection การทํางานใดๆ จะมีผลตอภาพทีอยูภายใน Selection แตบางครั้งมีความ ่ จําเปนตองสั่งงานในพื้นที่นอก Selection การสลับ Selection จึงเปนสวนที่เกี่ยวของกับคําสั่งนี้ โดยเลือก คําสั่ง Select, Inverse Selection รอบดอกไมดอกกลาง Selection ที่ถูกสลับไปเลือกพื้นที่รอบดอกไมดอกกลาง
    • 43 ซอน Selection ขณะใชงาน Selection ถาตองการซอนไวชั่วคราว ใหกดปุม Ch จัดแตงภาพดวย Selection ยายภาพ ภาพที่กําหนดขอบเขตไว สามารถยายตําแหนงโดยการคลิกปุมเครื่องมือ Move แลวนําเมาสไปชี้ ใน Selection จากนั้นลากแลวนําไปปลอย ณ ตําแหนงทีตองการ ทั้งนีตําแหนงทียายไป จะถูกแทนที่ดวยสี ่ ้ ่ ของ Background Color หรือเปนพื้นโปรงใส (Transparent) และสามารถลากยายขามหนาตางได สามารถใชเทคนิค Edit, Cut และ Edit, Paste ได คัดลอกภาพ การคัดลอกภาพ สามารถใชเทคนิคเดียวกับการยายภาพ แตในขณะเลื่อนเมาส ใหกดปุม A ดวย หรือใชเทคนิค Edit, Copy และ Edit, Paste ตัดบางสวนของภาพ บางครั้งการใชงานภาพ ก็ตองการใชเฉพาะบางสวนของภาพเทานั้น ซึ่งมีวธีการคือ ิ • สรางขอบเขตใหกับพื้นทีที่ตองการใชงาน ่  • เลือกเมนูคําสั่ง Image, Crop หรือคลิกเลือกเครื่องมือ Crop แลวกําหนดขอบเขต (Select) ใหกับตําแหนงภาพทีตองการ วิธีนี้ ่ สามารถปรับขนาด หรือหมุนขอบเขตที่เลือก โดยอาศัยจุด Handle เมื่อไดขนาด หรือลักษณะที่ตองการ จึงกด ปุม E
    • 44 ขยายพื้นที่ของหนาตางภาพ ภาพบางภาพ อาจจะมีขนาดเล็ก ทําใหไมสามารถปรับแตง หรือตกแตงไดสะดวก ซึ่งสามารถขยาย พื้นที่ของหนาตางภาพนั้นๆ ไดโดย • เลือกเมนูคําสั่ง Image, Canvas Size… • กําหนดขนาดความกวาง และความสูงทีตองการ และเลือกตําแหนงทีตองการวางภาพเดิม จาก ่ ่ รายการ Anchor: แลวคลิกปุม ภาพตนฉบับ ภาพที่เพิ่มพื้นที่รอบดาน หมุนภาพ/พลิก หรือกลับภาพ คําสั่งในการหมุนภาพ มี 2 ลักษณะ คือ • หมุนภาพทั้งภาพ ดวยเมนูคาสัง Image, Rotate Canvas ซึ่งจะปรากฏคําสังยอย ดังนี้ ํ ่ ่ o 180 หมุนภาพทํามุม 180 องศา o 90 CW หมุนภาพทํามุม 90 องศาตามแนวนาฬิกา o 90 CCW หมุนภาพทํามุม 90 องศาตามแนวทวนนาฬิกา o Arbitrary… กําหนดมุมหมุนตามตองการ o Flip Horizontal กลับภาพซาย/ขวา o Flip Vertical กลับภาพบน/ลาง • หมุนภาพที่เลือกขอบเขต โดยจะตองสราง Selection ขึ้นมากอน จากนั้นจะใชเมนูคําสัง Edit, ่ Free Transform หรือ Edit, Transform
    • 45 ภาพตนฉบับ หมุนภาพ (Rotate) บิดภาพใหเอียง (Skew) บิดภาพใหผิดสัดสวน (Distort) บิดภาพแบบ Perspective การยกเลิกคําสั่งการทํางาน (Undo) การยกเลิกคําสังที่สั่งไปแลว สามารถใชคําสั่ง Edit, Undo... หรือคียลด Cz ซึ่งใหผลไดเฉพาะ ่ ั คําสั่งลาสุดเทานั้น หากตองการยกเลิกการใชคําสั่งที่ผานไปแลวหลายครังสามารถกระทําไดโดยเปด History ้ palette แลวเลือกการยกเลิกคําสั่งจาก History palette คําสั่งลาสุด จะแสดงตอนทายของรายการ หาก ตองการยกเลิก ก็เพียงแตนําเมาสไปคลิก ณ รายการคําสั่งนั้นๆ (คําสั่งที่อยูในชวงถัดลงไป ก็จะยกเลิกไป ดวย) หรือลากคําสั่งดานทายที่ไมตองการ ลงถังขยะก็ได
    • 46 บทที่ 7 เลเยอร รูปภาพ 1 ภาพทีมองเห็น โดยความเปนจริงอาจจะประกอบดวยกราฟกชิ้นยอยๆ หลายๆ ชิ้น ่ ผสมผสานรวมกัน งานกราฟกที่มีชิ้นงานกราฟกหลายชิ้นมารวมกันนี้ PhotoShop มีคาสั่งเลเยอรมาชวยควบคุม ํ เพื่อใหเกิดความสะดวกในการปรับแตง แกไขเฉพาะชิ้นงานที่ตองการ โดยไมมีผลกระทบตอภาพทั้งภาพ การ ทํางานของเลเยอรมีลักษณะเดียวกับการใชเครื่องฉายแผนใส คงไมมีใครเขียนภาพ หรือขอความลงบนกระจก เครื่องฉายแผนใส แตจะตองมีแผนใสมาวางซอนขึ้นไป เพื่อสรางชิ้นงาน Layer Palette เลเยอรใน PhotoShop ถูกควบคุมดวย Layer Palette ซึ่งเปด/ปดดวยคําสั่ง Window, Layers และ โปรแกรมอนุญาตใหสรางชั้นเลเยอรควบคุมงานไดถึง 100 ชั้น (แตก็ขึ้นกับหนวยความจําของคอมพิวเตอร) โหมดการผสมผสาน ความโปรงใส (Opacity) (Blending Mode) Control Menu Lock Tools Fill Opacity Layer Tools สรางเลเยอรใหม กรณีที่สรางไฟลใหม จะมีเลเยอรเริ่มตนคือ Background Layer และการสรางงานแตละชิ้นควร สรางเลเยอรเฉพาะ โดยคลิกที่ปุม Create a new layer หรือเลือกคําสั่ง Layer, New, Layer Create a new layer
    • 47 กรณีที่ใชคําสั่งคัดลอก หรือยายภาพ (Copy, Move) หรือใชเครื่องมือ Text Tools หรือ Shape Tools ในโหมด Shape Layer จะปรากฏชันเลเยอรใหมโดยอัตโนมัติ และเลเยอรที่ถูกสรางจะซอนทับ ้ จากเลเยอรปจจุบันขึ้นไป ดังนั้นควรระมัดระวังการสรางเลเยอรใหดี โดยตรวจสอบชั้นเลเยอรใหถูกตอง มิฉะนั้นเลเยอรใหม อาจจะถูกภาพในชั้นเลเยอรเดิมบัง จนมองไมเห็นผลการทํางานก็ได รูปภาพมีสองเลเยอร ขณะนี้กําลัง ทํางานอยูในเลเยอร After  ใชเครื่องมือ Text Tool พิมพ ขอความ จะปรากฏเลเยอร ตัวอักษรซอนบนเลเยอร After โดยอัตโนมัติ แตไมเห็นขอความ ที่พิมพลงไป เพราะมีเลเยอร before ซอนทับอยูดานบน เลเยอรใหมจากไฟลภาพอืน ่ กรณีที่ตองนําภาพจากไฟลอื่นมาใชงานในไฟลปจจุบัน สามารถใชเครื่องมือ Move แลวลากเลเยอร ภาพขามหนาตางงาน ซึ่งโปรแกรมจะสรางเลเยอรใหมของภาพ ในชิ้นงานใหมโดยอัตโนมัติ ลากเลเยอรภาพอีกไฟล ขามไปวาง อีกไฟล จะปรากฏชั้นเลเยอรของภาพ โดยอัตโนมัติ
    • 48 เลือกเลเยอร ภาพทีมีชั้นเลเยอรหลายชั้น คงสรางความสับสนไดวาเลเยอรไหน เปนของชิ้นสวนภาพชิ้นสวนใด ่ แมวาเลเยอรจากเครื่องมือ Text tool จะปรากฏเปนขอความที่พิมพลงไป ซึ่งชวยในการเลือกเลเยอร แตก็ แสดงผลเฉพาะการพิมพขอความภาษาอังกฤษ หรือตัวเลขเทานั้น การแกไขภาพในเลเยอร จะตองรูจักเทคนิค การเลือกเลเยอร โดยมีหลักพิจารณา ดังนี้ • ถาตองการแกไขขอความจากเครื่องมือ Text Tool ใหสังเกตจากสัญลักษณตัว T กํากับที่เลเยอร เรียกวา Text Layer เลเยอรตัวอักษร (Text Layer) แสดงดวยสัญลักษณ T • ถาชั้นเลเยอรมสัญลักษณเปนรูปแฟมสีเหลือง แสดงวาเปนชุดเลเยอร (Layer Set) จะตองคลิก ี ที่ปุมสามเหลียม เพื่อแสดงรายละเอียดเลเยอรภายในชุดเลเยอร ่ คลิก เพื่อขยาย • ใชเทคนิคการซอนเลเยอร โดยเลือกเลเยอร แลวคลิกปุม Hide Layer ทีละเลเยอร เพื่อหาวา เลเยอรทตองการแกไข คือชั้นเลเยอรลาดับทีเทาไร ี่ ํ ่ คลิกทีสัญลักษณ ่ เพื่อซอน/แสดงเลเยอร
    • 49 • ใชเทคนิคการเลือกเครื่องมือ Move แลวนําเมาสไปชี้ ณ ตําแหนงที่ตองการตรวจสอบบน Workspace แลวกดปุมขวาของเมาส จะปรากฏชื่อชั้นเลเยอร เรียงตอกัน ชั้นเลเยอรบนสุด คือ ตําแหนงที่เมาสชี้นั่นเอง ถาเปนเลเยอรทตองการเลือก ใหคลิกปุมซายทีชื่อชั้นเลเยอร ี่ ่ ลบเลเยอร เลเยอรใดที่ไมมีการสรางชิ้นงาน มีความผิดพลาด หรือไมมีการทํางานใดๆ ควรทําการลบเลเยอร ออกไป เพื่อคืนคาหนวยความจําใหกับระบบ โดย • เลือกเลเยอร • คลิกที่ปุม Delete Layer หรือเลือกคําสั่ง Layer, Delete, Layer Delete Layer แลว ยืนยันการลบ ไมสามารถลบเลเยอร Background ได ยายชั้นเลเยอร ชั้นเลเยอรที่ซอนทับกัน ควรทําการวางชั้นเลเยอรใหเปนระบบ ระเบียบ เพื่อสะดวกตอการแกไขใน ภายหนา การยายชั้นเลเยอรไดโดยการลากเลเยอรไปวาง ณ ตําแหนงใหมที่ตองการ หรือเลือกคําสั่ง Layer, Arrange,… ล็อกเลเยอร งานในเลเยอรบางชั้น อาจจะตองทําการล็อกไว เพื่อปองกันการเลื่อนตําแหนง หรือลบ หรือแกไข โดยผิดพลาด ซึ่งทําไดโดย • เลือกเลเยอร • คลิกปุมรูปกุญแจ
    • 50 เชื่อมเลเยอร การเชื่อมเลเยอร เปนคําสั่งหนึงที่ใชบอย โดยเฉพาะการยายภาพเลเยอรหลายๆ เลเยอรพรอมๆ กัน ่ หรือสรางชุดเลเยอร • เลือกเลเยอรชิ้นแรก • นําเมาสไปคลิกในชอง Link เพื่อเชื่อมเลเยอร สัญลักษณ แสดงการเชื่อมเลเยอร • การยกเลิกการเชื่อม ทําซ้ําขั้นตอนเดิม รวมเลเยอร การรวมเลเยอรจะชวยใหภาพที่มีชั้นเลเยอรจานวนมาก มีกลุมของเลเยอรทชดเจน แกไขไดงาย ํ ี่ ั รวมทั้งการทํางานกับภาพบางฟงกชัน มีความจําเปนตองรวมเลเยอรเปนชั้นเดียวกอนโดยคลิกปุม Control Menu แลวเลือกคําสั่ง Flatten Image กลุมเลเยอร • ทําการเชื่อมเลเยอรทสัมพันธกัน ี่ • คลิกปุม Control Menu ของเลเยอร แลวเลือกคําสั่ง New Set from Linked… • กําหนดรายละเอียดเกียวกับกลุมเลเยอร แลว OK
    • 51 บทที่ 8 ปรับแตงภาพ ภาพทีผานการสแกน หรือภาพจากแหลงอื่นๆ กอนนํามาใชงาน จะตองปรับแตงสีกอนเสมอ ดวย ่  คําสั่ง Image, Adjustment การปรับความสวาง-มืดของภาพ Levels เปนการปรับความสวาง-มืดของภาพ โดยการเติมสีขาว-ดําลงไป ซึ่งเราจะใชกราฟ Histogram ในการปรับระดับสี สัญลักษณควบคุมสีสวน Shadow สัญลักษณควบคุมสีสวน Midtones สัญลักษณควบคุมสีสวน Highlihgt สัญลักษณควบคุมทั้ง 3 สามารถเลื่อนปรับ ยายเพื่อควบคุมความมืด ความสวางของภาพ แลการกดปุม A คางไว จะเปลี่ยนปุม  Cancel เปน Reset ทําใหกลับไปที่คาเริ่มตน Auto Levels เปนการปรับความสวาง-มืดของภาพ โดยอัตโนมัติ ซึ่งจะคํานึงถึงระดับความสวางและ มืดของสีในแตละ Channel Auto Contrast เปนการปรับความสวาง-มืดของภาพ โดยอัตโนมัติ ซึ่งจะคํานึงถึงพื้นทีทสวางและมืด ่ ี่ ของภาพ แลวปรับใหเห็นความชัดเจนมากยิ่งขึ้น Curves เปนการปรับความสวาง-มืดของภาพ คลายกับ Levels โดยการใชเสน Curves เปนตัวกําหนด ซึ่งจะเปนการเปรียบเทียบระหวางสีเดิมกับสีใหม Brightness/Contrast เปนการปรับคาความสวาง-มืด และความแตกตางของสีโดยรวม
    • 52 ตัวอยางการปรับความมืด/สวางของภาพ นอกจากนี้ยงมีคําสั่ง Equalize ซึ่งเปนการกระจายคาความสวาง-มืดของภาพ ใหมคาเทากัน มักใชกับ ั ี ภาพสแกน การดึงสีออก ภาพที่ไดจากการสแกน หรือกลองถายภาพดิจิทล บางครังอาจจะเกิดความไมสมดุลของสี เชน มี ั ้ สีเขียวในภาพมากเกินไป หรือมีสีฟามากเกินไป การแกไขขั้นตนสามารถใชคาสั่ง Image, Adjustment, Auto  ํ Color โปรแกรมจะทําการตรวจสอบคาความสวาง ความมืด และชวงสีของภาพ แลวปรับสีใหเหมาะสมกันทั้ง ภาพโดยอัตโนมัติ การดึงสีออก ยังหมายถึง การดึงสีอื่นๆ นอกจากสีขาว/ดํา ออกจากภาพสี เพื่อประโยชนในการแปลง ภาพสี เปนภาพขาวดํา โดยที่โหมดภาพยังคงเดิม ดวยคําสั่ง Image, Adjustments, Desaturate และคําสั่ง Image, Adjustments, Threshold นอกจากนี้ยังสามารถปรับความสมดุลของสี เฉพาะสีใด สีหนึ่งดวยคําสั่ง Image, Adjustment, Color Balance แลวเลือกคาสี CMYK หรือ RGB
    • 53 ทั้งนี้การปรับความสมดุลของสี จะตองคํานึงถึงวงลอสี การปรับความสมดุลของสีจะใชหลักการเพิ่มที่ อยูในทิศตรงขาม หรือลดสีทอยูรอบ เชน ตองการลดคาสีมวง ก็สามารถใชเทคนิคเพิ่มสีเขียว หรือลดสีแดง ี่ และสีน้ําเงิน เปนตน สีเขียว สีเหลือง สีฟา  สีแดง สีน้ําเงิน สีมวง (บานเย็น) การปรับแตงโทนสี คําสั่ง Image, Adjustments, Hue/Saturation เปนการปรับแตงโทนสีโดยคํานึงถึงพื้นฐาน การมองเห็นของมนุษยคือ Hue = คาความสะทอนแสง, Saturation = ความเขมขนของสี, Brightness = ความสวาง-มืด รวมทั้งคําสั่ง Image, Adjustments, Channel Mixer ซึ่งเปนการปรับแตงโทนสีแตละสีโดยใชโหมด สีเปนตัวกําหนด เชน CMYK, RGB การแทนที่สในภาพดวยสีใหม ี คําสั่ง Image, Adjustments, Replace Color ชวยในการเปลี่ยนสีภาพที่เลือก การกลับสี คําสั่ง Image, Adjustments, Invert เปนการปรับสีในภาพใหเปนสีตรงขาม ใสลักษณะพิเศษของสีใหกับภาพ คําสั่ง Image, Adjustments, Posterize เปนคําสั่งชวยในการใสลักษณะพิเศษเกี่ยวกับสีใหกบภาพ ั โดยอาศัยคาความสวาง หรือระดับโทนสี
    • 54 เครื่องมือปรับแตงภาพ การปรับแตงแกไขภาพ มีเครื่องมือสําคัญที่เกียวของหลายชิน โดยเฉพาะการตกแตงแกไขเฉพาะจุด ่ ้ หรือเฉพาะสวนของภาพ Rubber Stamp เครื่องมือ Rubber Stamp ทําหนาทีคลายๆ ตราประทับ มีประโยชนในการคัดลอกภาพจาก ่ ตําแหนงหนึ่ง ไปยังตําแหนงหนึ่ง โดยเฉพาะการตกแตงจะเนนในการแกไขจุดผิดพลาด โดยนําภาพจาก ตําแหนงทีถูกตองคัดลอกทับลงไปแทนที่ เครืองมือนี้ 2 ชุด คือ Rubber Stamp และ Pattern Stamp ซึงทํา ่ ่ ่ หนาทีสราง Pattern (ภาพที่เรียงตอกันเต็มพื้นที่) จากภาพตนฉบับ การใชงาน Rubber Staqmp มีหลักการ ่ ดังนี้ • เปดไฟลภาพตนฉบับ • คลิกเลือกเครื่องมือ Stamp • นํา Stamp ไปชี้ ณ ตําแหนงที่ตองการคัดลอก กดปุม A คางไวแลวคลิกเมาส • เปดไฟลใหม หรือสรางเลเยอรใหมในไฟลเดิม • กดปุมเมาสคางไว แลวลากเมาส จะพบวาภาพ ณ ตําแหนงที่เมาสคลิก ปรากฏ ณ ตําแหนงใหม จุดสังเกต จะมีกอนเมฆเพิ่ม ขึ้นมา โดยมีลักษณะแบบ เดียวกับกอนเมฆที่ปรากฏ ดานซายของภาพ ภาพตนฉบับ ภาพใหม Pattern Stamp Pattern Stamp เปนเครื่องมือที่ซอนไวใน Rubber Stamp มีการทํางานทีตองเกี่ยวของกับคําสั่ง ่ Edit, Define Pattern ดังนี้ • เปดไฟลภาพตนฉบับ • ใช Marquee สราง Selection ใหกับตําแหนงภาพทีตองการคัดลอก แลวเลือกคําสั่ง Edit, ่ Define Pattern… • สรางไฟลใหม หรือสรางเลเยอรใหม • เลือกเครื่องมือ Pattern Stamp เลือก Pattern ที่ตองการจาก Option Bar เลือก Pattern • นําเมาสไปคลิกแลวลากเพื่อทําการวางภาพ
    • 55 Smudge Tool Smudge Tool ทําหนาที่เกลี่ยสี คลายๆ กับการเอานิ้วลากไปบนภาพทีสยังไมแหง ่ ี Blur Tool Blur Tool ทําหนาทีแตงภาพใหเบลอ และนุมขึ้น ่  Shapen Tool Shapen Tool ทําหนาทีแตงภาพใหคมชัด และหยาบขึ้น ่ Dodge Tool Dodge Tool ทําหนาทีแตงใหภาพสวางขึ้น ่ Burn Tool Burn Tool ทําหนาทีแตงภาพใหมืดลง ่ Sponge Tool Sponge Tool ปรับเปลี่ยนความเขมของสี ใหนมนวล เหมือนนําฟองน้ําซับสีออกจากภาพ ุ
    • 56 บทที่ 9 ฟลเตอร (Filter) Filter เปนคําสั่งในการตกแตงภาพโดยอาศัยลักษณะพิเศษลักษณะตางๆ ที่โปรแกรมเตรียมไว รวมทั้งคําสั่งพิเศษจากโปรแกรมเสริมทีสามารถนําเขามาใชงานได ที่เรียกวา Plug-In เชน Eye Candy หรือ ่ Kai Power Tool เปนตน การใช Filter สามารถใชไดหลายลักษณะ และ Filter จะทํางานกับ Selection หรือ Layer ที่ Active เสมอ Filter หลายคําสั่ง จะทํางานในโหมด RGB กรณีที่เปดหรือสรางภาพ แลวเลือก Filter ไมไดให เปลี่ยนโหมดภาพเปน RGB ดวยคําสั่ง Image, Mode, RGB Color และหลายๆ ฟลเตอรมผลตอหนวยความจํา ี ของระบบ ควรระมัดระวังการใชฟลเตอรเปนพิเศษ เชน บันทึกไฟลกอนใชคําสั่งนี้ หรือคืนคาหนวยความจําดวย คําสั่ง Edit, Purge, All เปนตน กลุมคําสั่งฟลเตอร • Artistic สรางเอฟเฟกตงานศิลปดวยเครื่องมือวาดภาพลักษณะตางๆ  • Blur ทําใหภาพนุม เบลอ • Brush Strokes สรางเอฟเฟกตดวยพูกันลักษณะตางๆ • Distort บิดภาพในลักษณะตางๆ • Noise สรางจุด หรือลบจุดในภาพ • Pixelate ปรับแตงจุดพิกเซลในภาพ • Render สรางเอกเฟกตโดยใชการผสมผสานของแสง สี • Shapen ทําใหความคมชัดขึ้น • Sketch สรางเอฟเฟกซภาพวาดดวยมือ • Stylize สรางเอฟเฟกซดวยการผสม และการตัดกันของแสง สี • Texture สรางพื้นผิวลักษณะตางๆ • Video สรางเอฟเฟกซสําหรับงานผลิตบนทีว, วิดีโอ ี • Digimarc ฝงและอานลายน้ํา • Other สรางเอฟเฟกซโดยการกําหนดคาจากผูใช Plug-ins นอกจากฟลเตอรที่โปรแกรมเตรียมมาให ยังสามารถติดตั้งฟลเตอรเพิ่มเติมในรูปแบบ Plug-Ins โดย คําสั่งใหม จะตอทายฟลเตอรมาตรฐานลง แตก็มีบางฟลเตอรทใชวธีการคัดลอกไฟลฟลเตอร (.8bf) แลว ี่ ิ นํามาเก็บไวที่โฟลเดอร C:Program FilesAdobePhotoshop 7.0Plug-Ins การยกเลิกฟลเตอร เมื่อสรางฟลเตอรใดๆ และตองการยกเลิกใหกดปุม Cz หรือเลือกจาก History Palette
    • 57 บทที่ 10 Animations GIF ภาพเคลื่อนไหว ก็คือชุดลําดับของภาพนิ่ง เปนการนําภาพนิ่งหลายๆ ภาพ มาลําดับกันอยางตอเนื่อง เพื่อใหปรากฏเปนการเคลื่อนไหวบนแผนระนาบ ซึ่งก็คือ จอภาพ, แผนกระดาษ และการมองเห็นภาพเหลานี้ เปนภาพเคลื่อนไหว ก็เพราะปรากฏการณ "ภาพติดตา" - Persistence of vision นั่นเอง ปจจุบันมีการนําคอมพิวเตอรมาใชเปนเครื่องมือสราง ลําดับภาพเคลื่อนไหว โดยการสรางภาพกราฟก ทีละภาพ (หรือเรียกวา "เฟรม") วัตถุแตละเฟรม มีการเปลียนแปลงของ "ตัวแปร" เชน ตําแหนงวัตถุ, ขนาด, ่ การหมุน, การแปลงรูปราง, สี เปนตน ทีละนอย การเปลี่ยนแปลงของตัวแปรเหลานั้น อาศัย "หลักการ ประมาณคาในชวงระหวางภาพแรก กับภาพถัดไป" ดังนั้นการทําภาพเคลื่อนไหว เริ่มจากสรางภาพตนแบบทีมีการเปลี่ยงแปลงของตัวแปร ่ ควรจะเปน ภาพทีมีขนาดเทากันเพื่อใหเห็นการเปลี่ยนแปลงทีดี ่ ่ GIF Animation เปนรูปแบบหนึ่งของภาพเคลื่อนไหว ซึงเริ่มตนใชในการนําเสนอภาพผานเว็บเพจ ่ ใชหลักการสรางเชนเดียวกับการสรางภาพเคลื่อนไหวปกติทวไป คือ นําภาพนิ่งหลายๆ ภาพมาเรียงลําดับ ดวย ั่ โปรแกรมเฉพาะ เชน Animagic Gif, Microsoft Gif Animator, PhotoImpact Gif Animator หรือ Corel Xara ซึ่งชวยใหการสรางตัวอักษรเคลื่อนไหวแบบสามมิติกระทําไดยิ่งสะดวก GIF Animation อาจจะเรียกอีก ชื่อวา GIF89 เนื่องจากเปนไฟลฟอรแมตหนึ่งของ GIF Format
    • 58 บทที่ 11 PhotoShop Action PhotoShop Action คือการนําคําสั่งตางๆ ของ PhotoShop มาจัดกลุมรวมกัน แลวบันทึกเพื่อสะดวก ในการเรียกใชงานในครั้งตอไป สามารถคัดลอกเปนไฟล Action (.atn) แลวคัดลอกไปใชกบคอมพิวเตอรอื่นๆ ั ได การทํางานของ Action จะถูกควบคุมดวย Action Palette ชุด Action (Action Set) ชุด Action ที่เลือกใชงาน Action คําสั่งของ Action Action สําหรับยอขนาดภาพ การยอขนาดภาพปริมาณมากๆ ดวย PhotoShop 7 ฟงกชน Action ของ PS7 นับเปนฟงกชันที่ ั เหมาะสมอยางยิ่ง เนื่องจากสามารถตั้งโปรแกรมใหเปดภาพไดหลายๆ ภาพจากโฟลเดอรที่เตรียมไว จากนั้น โปรแกรมจะทําการยอภาพใหโดยอัตโนมัติ แลวบันทึกคาตางๆ ที่เหมาะสม รวมทั้งสามารถบันทึก Action เปน ไฟลคําสั่ง แลวคัดลอกนําไปใชกับคอมพิวเตอรอื่นๆ ตอไปได ขั้นบันทึก Action • คลิกปุม Create New Set บนบัตรรายการ Action • ตั้งชื่อกลุมของ Action เชน ResizeImage แลวคลิกปุม OK เพื่อยืนยันการสรางกลุมของ Action • คลิกปุม Create a new action บนบัตรรายการ Action • ตั้งชื่อ Action เชน Resize300 px สําหรับควบคุม Action ในการยอภาพใหมีขนาดความกวาง เทากับ 300 pixel เลือกกลุม Action จากรายการ Set เลือกปุมควบคุมจากรายการ Function key และเลือกสีสญลักษณจาก Color ั
    • 59 • คลิกปุม Record เพื่อเตรียมบันทึกผลการทํางานของ Action ขั้นบันทึกผลของ Action • เปดไฟลภาพทีตองการยอ (เลือกไฟลภาพตัวอยางใดๆ ก็ไดเพียง 1 ภาพ) ่ • เลือกเมนูคําสั่ง Image, Image Size... เปลี่ยนคา Width ของรายการ Pixel Dimension เปน 300 pixel แลวคลิกปุม OK • เลือกคําสั่ง Image, Adjustment, Auto Level และ Image, Adjustment, Auto Contrast เพื่อ ปรับคาสีและความคมชัดของภาพ • เลือกคําสั่ง File, Save for web กําหนดคาควบคุมการบันทึกตามตองการ แลวบันทึกลงใน โฟลเดอรที่ตองการ จากนั้นปดไฟลภาพ • ระมัดระวังขั้นตอนตางๆ ควรกระทําใหถูกตอง • ปดการบันทึก Action โดยคลิกที่ปุม Stop Action ขั้นตรวจสอบคาบันทึกของ Action • ตรวจสอบรายการบันทึกตางๆ จากบัตรรายการ Action • ถารายการใดผิดพลาด สามารถลบทิ้งโดยคลิกเลือกรายการ แลวคลิกปุม Trash (ถังขยะ) การใชงาน Action เพื่อยอภาพหลายๆ ภาพพรอมๆ กัน • เตรียมรูปภาพ โดยคัดลอกภาพที่ตองการยอขนาดมาไวรวมกันในโฟลเดอรเดียวกัน เชน  โฟลเดอรชื่อ text picture • เลือกเมนูคําสั่ง File, Automate, Batch...
    • 60 • เลือกรายการ Action ดังตัวอยาง • เลือกโฟลเดอรภาพตนฉบับจากรายการ Source ดังตัวอยาง o Source เลือก Folder เมื่อตองการใชคําสั่งกับภาพที่เตรียมไวในโฟลเดอร เปนตน o Choose เลือกโฟลเดอรภาพที่เตรียมไว o คลิกเลือก Override Action "Open" Commands เพื่อใหคาสั่ง Open เปลี่ยนไปตามสภาพ ํ ไฟลจริงที่มในโฟลเดอร ี o คลิกเลือก Include All Subfolders คลิกเลือกเมื่อมีโฟลเดอรยอยในโฟลเดอรภาพ และให คําสั่งมีผลตอภาพใน Sub-Folder ดวย • เลือกโฟลเดอรปลายทางสําหรับบันทึกภาพที่ยอแลว จากรายการ Destination ดังตัวอยาง o Destination เลือก Folder เมื่อตองการใชคําสั่งกับภาพที่เตรียมไวในโฟลเดอร เปนตน o Choose เลือกโฟลเดอรภาพที่ตองการนําภาพที่ยอแลว ไปจัดเก็บ อาจจะเปนโฟลเดอร เดียวกับ Source ก็ได o คลิกเลือก Override Action "Save As" Commands เพื่อใหคําสั่ง Save As เปลี่ยนไปตาม สภาพไฟลจริงที่มีในโฟลเดอร o File Naming เลือกรูปแบบการตั้งชื่อไฟลใหม • คลิกปุม OK เพื่อสั่งรัน Action โปรแกรมจะเรียกภาพแลวยอภาพใหโดยอัตโนมัติ การบันทึก Action เปนไฟล Action ทีสรางไว เมื่อตองการนําไปใชงานกับคอมพิวเตอรเครื่องอื่นๆ ่ สามารถกระทําไดโดยการ บันทึก Action เปนไฟล แลวคัดลอกนําไปใชงานกับคอมพิวเตอรอื่น โดย • เปดบัตรรายการ Action • คลิกเลือกกลุม Action ที่ตองการบันทึก • คลิกปุม Control Menu • เลือกคําสั่ง Save Actions... ตั้งชื่อไฟล Action โปรแกรมบันทึก
    • 61 การติดตั้ง Action • ดาวนโหลด PhotoShop Action จากเว็บไซตที่ใหบริการ • บันทึกไฟลไวในโฟลเดอรทตองการ เชน My Documents ี่  • เปดโปรแกรม Adobe PhotoShop 7.0 • เรียกใชงาน Action Panel ดวยคําสั่ง Window, Actions • ปรากฏ Action Panel ดังนี้ • คลิกปุม Action Control Menu ซึ่งปรากฏที่มมดานขวาของแถบรายการ ุ • คลิกเลือกรายการคําสั่ง Load Actions… แลวคลิกเลือกไฟล Action มีสวนขยายเปน .atn จาก โฟลเดอรที่เตรียมไว • ปรากฏรายการ Action พรอมฟงกชันยอยๆ
    • 62 บทที่ 12 Image Metadata ปญหาใหญของการเก็บรูปภาพในระบบคอมพิวเตอรก็คือ การคนคืนภาพ (Image Retrieval) และ การอางสิทธิ์ความเปนเจาของภาพ (Copyright) แตดวยเทคโนโลยี Metadata ทําใหปญหาดังกลาวหมดไป  ได Adobe PhotoShop 7.0 ไดตระหนักถึงความตองการในการคนคืนภาพ และการปองกันลิขสิทธิ์ของภาพ จึงไดนําเทคโนโลยี Metadata ระบบ XMP มาใชในการสรางรายละเอียดประกอบรูปภาพ ซึ่งสนับสนุนทั้ง ภาษาไทย และภาษาอังกฤษ อันจะชวยใหการคนคืนภาพกระทําไดสะดวก รวดเร็ว มีประสิทธิภาพ รวมถึง สามารถอางอิงความเปนเจาของภาพที่เผยแพรผานสื่อรูปแบบตางๆ ไดพรอมๆ กัน Image Metadata เทียบเทากับบัตรรายการหนังสือที่ใชกันในหองสมุด อันจะชวยใหการสืบคน อางอิงรูปภาพกระทําไดอยางรวดเร็ว และมีระบบแบบแผน Image Metadata ในระบบ XMP (eXtensible Metadata Platform) ที่พฒนาโดย The Newspaper Association of America (NAA) และ The ั International Press Telecommunications Council (IPTC) เปน Image Metadata ที่ใชงานไดกับ โปรแกรม Adobe PhotoShop 7.0 และสามารถนําเสนอขอมูลตางๆ เกี่ยวกับรูปภาพ เชน Title, Author, Position, Caption, Copyright, URL, Keyword, Categories, Detail of org และ Metadata สําเร็จรูป (EXIF: EXchangeable Image File Format) จากกลองบันทึกภาพดิจทัล ที่พัฒนาโดย The Japanese ิ Electronics Industry Development Association (JEIDA) มาตรฐานเกี่ยวกับ Image Metadata คราวๆ มีดังนี้ • Title กําหนดใหเปนชื่อหมวดภาพ • Author กําหนดชื่อเจาของภาพ • Copyright Notice กําหนดชื่อหนวยงานเจาของภาพ • Owner URL ชื่อเว็บไซตของหนวยงานเจาของภาพ • Keyword ขอมูลคําสําคัญของรูปภาพ การกําหนด Metadata ใหกับรูปภาพ • เปดใชงานโปรแกรม Adobe PhotoShop 7.0 • เปดไฟลภาพ (ควรเปดไฟลภาพตนฉบับ) • คลิกเลือกเมนูคําสั่ง File, File Info… ปรากฏหนาตางการทํางาน ดังนี้ • ปอนรายการกํากับ Metadata ในแตละรายการทีตองการ โดยโปรแกรมรองรับทั้งภาษาไทย และ ่ ภาษาอังกฤษ • คลิกปุม OK เพื่อยืนยันการปอนรายการ จากนั้นบันทึกไฟลซ้ําลงในชื่อเดิม
    • 63 การคนรูปภาพจาก Metadata รูปภาพที่ปอนรายการกํากับ Metadata โดยเฉพาะ Keyword สามารถนําขอความ Keyword ดังกลาวมาเปน คําคนคืน เพื่อชวยในการคนหารูปภาพ ทั้งนี้การคนคืนรูปภาพ กระทําไดโดย • คลิกปุม • เลือกรายการคําสั่ง Search, For Files or Folders… • ปอนคําสําคัญ (Keyword) ของรูปภาพที่ตองการคน ในรายการ Containing text: แลวคลิกปุม Search Now (หรืออาจจะเลือกไดรฟ และโฟลเดอรหลักกอนก็ได) • โปรแกรมจะทําการคนหาไฟลตางๆ ที่มคําตรงกับรายการ Containing text: และหากพบจะ ี แสดงไฟลดังกลาวในหนาตาง Search Results
    • 64 บทที่ 13 สรางสรรคงานกราฟก ปุม แบนเนอร กรอบลักษณะตางๆ ปุมอยางงาย • สรางไฟลใหมขนาด 200 x 200 pixels โหมด RGB พื้นสีขาว • สราง Selection สี่เหลี่ยม • Gradient Tool ไลสีลงไปดังภาพแรก • ไปที่เมนู Select, Modify, Contract ใชในการยอ Selection ใสคา Pixel ดังภาพ  • เสน Selection จะหดเขาไปในรูป • ใช Gradient Tool ไลสลงไปใน Selection ทีปรับแลว ใหลากเคอรเซอรในทิศทางตรงกันขาม ี ่ กับครั้งแรก ปุมวงกลม • เปดไฟลใหม • ใช Selection Tool สรางวงกลม ใหกด S ขณะลากเมื่อตองการใหเปนทรงกลม • ใช Radial Gradient Tool ลากจากมุมเยื้องขวาบนใหไดดังภาพ หรือเติมสีดวยคําสั่ง Edit, Fill • • ปรับแตงตามตองการ ปุมรูปทรงอิสระ • สรางชิ้นงานใหม • สรางเลเยอรใหม • คลิกปุมเครื่องมือวาดสี่เหลี่ยม • ปรากฏ Options Bar ดังนี้ คลิกเลือก
    • 65 • คลิกเลือกรูปทรงทีตองการ ่ คลิกเลือกรูปทรง • นําเมาสมาวาดรูปทรงทีตองการในหนาตางงาน ่ • ปรับแตงดวย Effect ทีตองการ ่ ปุมเกลียวบิด • สรางชิ้นงานใหม ขนาด 150 x 100 pixels • สรางเลเยอรใหม สราง Selection สี่เหลียม ขนาดพอเหมาะ เติมสีขาว ่ • เติม Effect ที่ตองการดวย Window, Style  • คัดลอก Layer 1 ลาก Layer 1 ทับไอคอน Create a New Layer • เปดแถบไมบรรทัดดวยคําสั่ง View, Rulers แลวสราง Guide line ดังตัวอยาง • ใชเครื่องมือ Polygonal Lasso สราง Selection รูปสามเหลี่ยมที่มุม ดังตัวอยาง กดปุม = ทําซ้ํากับอีกดาน
    • 66 • คลิกเลือก เลเยอร 1 สราง Selection โดยกดปุม C คางไว แลวคลิกทีชอ Layer 1 ่ ื่ กดปุม C คางไว แลว คลิกบนชื่อเลเยอร • สรางเลเยอรใหม เติมลายเสนดวยคําสั่ง Edit, Fill, Pattern • คัดลอกเลเยอร 1 • เลือกคําสั่ง Edit, Free Transform แลวยอขนาดภาพใหลงมาประมาณ 60% ดึงออกดานขาง ประมาณ 105 - 110% • ทําซ้ําโดยคัดลอกแลวดึงขยายออกดานขาง ตามตองการ Chrome Bar • สรางไฟลใหม ความสูงไมตองมาก • สราง Selection แทงสี่เหลียมยาว ดังตัวอยาง ่ • เลือกเครื่องมือ Gradient สราง Gradient ดังตัวอยาง • โดยกําหนดสีดานนอกทั้งสองดาน ใหมคาเทากับ 60/60/60 และสีตรงกลางมีคาเทากับ  ี 206/206/206 • เติมสีแบบ Gradient ลงใน Selection ที่สรางไว • สรางเลเยอรใหม วาดกรอบสี่เหลี่ยมเล็กๆ ตรงกลาง แลวเติมสีขาว ทําใหฟงดวย Effect Outer ุ Glow เพื่อนําไปใชงานตอไป
    • 67 ปุมเจล • สรางไฟลขนาดตามตองการ • สรางเลเยอรใหม วาดปุมดวยกรอบสี่เหลียม หรือวงกลม ่ • เติมสีตามตองการ • กําหนด Effect ดังนี้ • Inner Shadow o Blend Mode : Normal o Colour : FFFFFF (white) o Opacity : 60% o Angle : 90 o Distance : 10px o Spread : 0% o Size : 0px • Gradient Overlay o Opacity : 60% o Style : linear • Stroke o Size : 1px o Posisiton : outside o Blend Mode : Normal o Distance : 4px • Inner Glow o Size : 5px o Opacity : 60% • Drop Shadow o Angle : Untick 'Use global Angle' and enter 120 o Spread : 2px o Size : 5px เสนกราฟก เสนกราฟกแบบระบุขนาด เสนกราฟกแบบระบุขนาด เหมาะสําหรับเว็บที่มีการออกแบบไวตายตัว เชน เสนกราฟกยาว 200 pixels โดยความสูงกําหนดไดอิสระ แตไมควรสูงมากนัก • สรางชิ้นงานใหม ขนาด 200 x 10 pixels o ถาเห็นสัญลักษณ Slice บน Workspace ใหปดดวยคําสั่ง View, Extras  • เปด Layer Palette แลวสรางเลเยอรใหม • กดปุม Ca เพื่อสราง Selection รอบพื้นที่สรางงาน • เลือกสีจากรายการ Foreground Color แลวเติมสีท่เลือกลงใน Selection ดวยคําสั่ง Edit, Fill ี เลือกรายการ Use: Foreground Color • สามารถเติม Style ไดตามที่ตองการ ดวยปุม  หรือจากคําสั่ง Window, Styles
    • 68 เสนกราฟกยึดหดไดในแนวนอน เสนกราฟกสําหรับเว็บที่ปรับยึดหดตามหนาเว็บได จะตองออกแบบในลักษณะชิ้นภาพ แลวใชเทคนิค พื้นภาพของเซลล หรือตาราง (Image Background for Table/Cells) • สรางชิ้นงานใหม ขนาด 10 x 1 pixels • ซูมจอภาพประมาณ 1200 pixels • สราง Selection สี่เหลี่ยมโดยเวนหัวและทายไวดานละ 1 pixel • เติมสีที่ตองการ กดปุม Ca เพื่อเลือกทั้งหมด แลวบันทึกเปน Pattern ดวยคําสั่ง Edit, Define Pattern… ตั้งชื่อ Pattern • บันทึกไฟลในฟอรแมต GIF • การนําไปใชงาน o สําหรับตกแตงงานกราฟก o สรางชิ้นงานใหม และสรางเลเยอรใหม เลือกเครื่องมือ Marquee แนวนอนแบบ 1 pixel o สราง Selection แลวเลือกคําสั่ง Edit, Fill, Pattern เลือก Pattern ทีสรางไวกอนหนา ่
    • 69 o สําหรับใชกับหนาเว็บ นําไฟลที่บันทึกในฟอรแมต GIF ไปใช โดยใสเปน Image Background ของ ตารางหรือเซลล เสนกราฟกจาก Brush • สรางไฟลใหม สรางเลเยอรใหม • เลือกเครื่องมือ Brush เปด Brush Palette ดวยคําสั่ง Window, Brushes คลิก Control Menu เลือก คําสั่ง Small Thumbnail เลือกรูปแบบ Brush (Brush Presets) คลิกยกเลิกทุกรายการ • คลิกรายการ Brush Tip Shape กําหนดคาระยะหาง ระหวาง Brush แตละชิ้น ดูตัวอยางประกอบ • เลือกสี Foreground Color • นําเมาสไปชี้ขอบซายของ Workspace กดปุม S คางไวแลวลากเมาสไปดานขวา • แตงดวย Effect ที่ตองการ
    • 70 แตงภาพดวย Selection ลบพื้นภาพ กรณีที่ภาพมีพื้นเปนลวดลาย • เปดไฟลภาพทีตองการ ตัวอยางเปดไฟลภาพ Dune.tif ซึ่งตองการลบพื้นทะเลทรายออกไปให ่ เหลือเฉพาะทองฟา • คัดลอกเลเยอรภาพตนฉบับ โดยลากเลเยอร Background มาทับไอคอน Create a new layer • ซอนเลเยอร Background โดยคลิกที่ชองดวงตาของเลเยอร Background • คลิกเลือกเครื่องมือ Lasso หรือ Magnetic Lasso • นําเครื่องมือที่เลือก มาชี้ที่ขอบของพื้นทะเลทราย แลวกดลากเพื่อสราง Selection ตามเสนขอบ จนครบทุกสวน • เมื่อลากจนครบรอบ จะปรากฏเสน Selection คลุมพื้นทะเลทราย ลบออกโดยกดปุม = ลบพื้นภาพ กรณีที่สพื้นเปนสีสีเดียว ี • เปดไฟลภาพทีตองการ ตัวอยางเปดไฟล Ducky.tif ่ • ยอภาพใหขนาดทีตองการดวยคําสั่ง Image, Image Size… ่ • คัดลอกเลเยอรภาพเปด โดยลากเลเยอร Background มาทับไอคอน Create a new layer จะ ไดเลเยอรใหมชื่อ Background Copy ที่มีภาพเปดเหมือนภาพเดิมทุกประการ • ปดเลเยอร Background โดยคลิกในชองดวงตาของเลเยอร Background • เนื่องจากพื้นของภาพเปนสีขาว การลบจึงสามารถใชเครื่องมือ Magic Wand โดยคลิกเลือก เครื่องมือ Magic Wand แลวนําเมาสไปคลิกที่พื้นสีขาว จะปรากฏ Selection จากนั้นก็กดปุม = เพื่อลบ พื้นสีขาวจะหายไปจากรูปภาพ
    • 71 เปลี่ยนสีพื้นของภาพ ภาพตัวอยางของ PhotoShop ชื่อ ducky.tif เดิมมีพื้นภาพเปนสีขาว ตองการเปลี่ยนเปนสีใหม สามารถกระทําไดดังนี้ • เปดไฟลภาพ ducky.tif จากโฟลเดอร Samples • การเปลี่ยนสีพนภาพจากสีขาว เปนสีใหม ตองทําขอบเขต (Selection) ใหกับพื้นภาพกอน ื้ วิธีการทีรวดเร็วในการทําขอบเขตสําหรับพื้นภาพคือ การใชเครื่องมือ Magic Wand ่ คลิกที่ พื้นภาพ เนืองจากพื้นภาพมีสีเพียงสีเดียว ่ ดังนั้นโปรแกรมจะเลือกสีขาวของพื้นภาพใหเปน ขอบเขตโดยอัตโนมัติ • เลือกสีใหมโดยคลิกเลือกสี ชองสีมุมบนซายจะเรียกวา Foreground Color และชองสีมุม ลางขวาเรียกวา Background Color ทั้งนี้สามารถปรับเปลี่ยนสีโดยคลิกในชองสีใดก็ได • ปรากฏชุดสีดังนี้ • การเลือกสีกระทําไดโดย เลื่อนเมาสในแถบเลื่อน เพื่อเลือกสีที่ตองการ เลื่อนเมาสในแถบเฉดสี เพือเลือกเฉดสีทตองการ ่ ่ี ตําแหนงแสดงสีที่เลือก เมื่อไดสีทตองการใหคลิกปุม OK ี่ • เลือกเมนูคําสั่ง Edit, Fill เพื่อเติมสีที่เลือกลงไปในขอบเขตที่กําหนดไว ซึ่งจะปรากฏหนาตาง ทํางานดังนี้ • คลิกเลือกรายการ Use: ใหตรงกับชองสีท่เลือกไวกอนหนานี้ สามารถปรับลดความเขมขนของสี ี ไดจากรายการ Opacity เมื่อไดคาที่ตองการใหกดปุม OK โปรแกรมจะแทนทีสีพ้นภาพเดิม (สี  ่ ื ขาว) ดวยสีใหมที่เลือกใหอัตโนมัติ • ปรับยอขนาดภาพใหเหมาะสม แลวบันทึกดวยฟอรแมตทีตองการ ่
    • 72 ภาพเกาเปนภาพใหม • เปดไฟลภาพตนฉบับ • ตรวจสอบภาพจะตองอยูในโหมด RGB ดวยคําสั่ง Image, Mode, RGB Color • ใชเครื่องมือ Lasso สราง Selection รอบพื้นทีที่ตองการเปลียนแปลง กรณีตวอยางคือพื้นที่ ่ ่ ั ใบหนา • เลือกเมนูคําสั่ง Select, Feather เพื่อทําใหขอบภาพมีลักษณะนุมนวล • เลือกเมนูคําสั่ง Edit, Copy แลวตามดวย Edit, Paste ปรากฏชั้นเลเยอรใหม ลากเลเยอรใหมไป อยูระดับบนสุด • เลือกเมนูคําสั่ง Image, Adjustment, Hue & Saturation คลิกเลือกรายการ Colorize • บันทึกเพื่อใชงาน หรือทําซ้ํากับตําแหนงอื่นๆ
    • 73 เงาวัตถุ จากไฟลภาพ ducky.tif เดิม ตองการสรางเงาสะทอนบนพื้น อันเปนพื้นฐานในการนําไปประยุกต สรางเงาใหกับวัตถุอื่นๆ ตอไป • เปดไฟลภาพ ducky.tif จากโฟลเดอร Samples • เนื่องจากเปนภาพตนฉบับ จึงไมสมควรนําภาพนี้มาดัดแปลงแกไข วิธีการที่เหมาะสมทีสด คือ ่ ุ เปดไฟลใหม แลวนําภาพเปดมาวาง จากนั้นจึงสรางเงา • สรางไฟลใหม ดวยเมนูคาสั่ง File, New… กําหนดรายละเอียดพื้นทีภาพตามตองการ (แตตอง ํ ่ กําหนด Resolution เปน 72 pixel/inch, โหมด RGB เทานั้น) • จัดหนาตางชินงานใหมองเห็นไดทั้งสองจอภาพ ้ • คลิกเลือกจอภาพตนฉบับ เพือคัดลอกภาพเปดมาวางในพืนที่ใหม ่ ้ • เนื่องจากภาพตนฉบับประกอบดวยตัวรูปภาพ และพื้นของภาพ การสรางเงาที่ดทสุด ควรทํางาน ี ี่ กับตัวรูปภาพเทานั้น ดังนั้นจะตองคัดลอกเฉพาะตัวรูปภาพ (ตัวเปด) มาใชงานเทานัน ซึ่งมี ้ วิธีการดังนี้ o คลิกเลือกเครื่องมือ Magic Wand จากนั้นคลิกที่พื้นภาพ เพือทําขอบเขต ่ o เลือกตัวรูปภาพ (รูปเปด) ดวยเทคนิคสลับการเลือกขอบเขต (Inverse) โดยเลือกเมนูคาสัง ํ ่ Select, Inverse โปรแกรมจะสลับขอบเขตจากเดิมที่เลือกพื้นของภาพ มาเปนเลือก เฉพาะตัวรูปภาพ (ตัวเปด) • คลิกเลือกเครื่องมือ Move แลวนําเมาสมาชีที่รูปภาพที่ตองการคัดลอก กดปุมเมาสคางไว ้ แลวลากเมาสนารูปภาพขามจอภาพ มาวางในจอภาพวางทีสรางรอไวกอนนี้ ํ ่ • เมื่อปลอยนิ้ว รูปภาพจะคัดลอกมาวางในหนาตางงานใหมโดยอัตโนมัติ ถึงจุดนี้กจะเปนการ ็ ทํางานในหนาตางงานใหม • เนื่องจากภาพตนฉบับมีขนาดโตมาก ควรลดขยายลงมา โดย o เลือกเมนูคําสั่ง Edit, Transform, Scale o นําเมาสไปชีทจุด Handle ของภาพแลวยอใหไดขนาดทีตองการ หรือปรับคา W และ H ้ ี่ ่  จาก Option Bar ที่ปรากฏอยูใตแถบเมนูคําสัง  ่ • เมื่อไดขนาดทีตองการ ใหกดปุม E ่ • เมื่อปรับขนาดของภาพไดตามที่ตองการ สามารถใชเครื่องมือ Move เพื่อยายตําแหนงภาพให เหมาะสม • สังเกตที่ Layer Palette จะพบวามีชั้นของเลเยอร 2 ชั้น โดยชั้นลางสุดจะเปนชั้นเลเยอรพื้นภาพ และชันเหนือขึ้นมาจะเปนชั้นเลเยอรของรูปภาพ (เปด) ซึ่งการทํางานใดๆ จะตองคํานึงถึงชั้นเล ้ เยอรนี้ตลอด เชน หากตองการเปลี่ยนสีพื้นจะตองคลิกเลือกชั้นเลเยอรลางสุดกอน จึงจะใชคําสั่ง เปลี่ยนสีได และหากตองการยอรูปภาพ (ตัวเปด) หรือยายตําแหนงรูปภาพ จะตองคลิกเลือก ชั้นเลเยอรของรูปภาพ (ชั้นเหนือขึ้นมา) กอนเสมอเชนกัน
    • 74 • การสรางเงาใหมีลักษณะเดียวกับภาพตนฉบับ จําเปนตองอาศัยโครงรางของภาพตนฉบับมาเปน แบบ แลวเติมสีดําลงไป พรอมทั้งปรับใหความเบลอ แลวจัดตําแหนงใหมลกษณะเปนเงาที่มีการ ี ั ทอดตัว ซึ่งมีวธีการดังนี้ ิ • สรางขอบเขตรอบรูปภาพ (ตัวเปด) วิธีการสรางขอบเขตรูปภาพอีกวิธีทสะดวกและรวดเร็ว ี่ กรณีแยกชั้นเลเยอร ไดแก การกดปุม C คางไว แลวนําเมาสมาคลิกทีชื่อเลเยอรของ ่ ชั้นเลเยอรที่ตองการสรางขอบเขต (ตัวอยางใหคลิกที่ชื่อ Layer 1) โปรแกรมจะสราง ขอบเขตตามโครงรางของรูปภาพใหโดยอัตโนมัติ กดปุม C คางไว แลวคลิกที่ชื่อเลเยอร • สรางเลเยอรใหม โดยคลิกที่ปม Create a New Layer ุ จาก Layer Palette • เติมสีดาลงไปในขอบเขตที่สรางไว ดวยคําสัง Edit, Fill... เลือกรายการ Use: เปน Black ํ ่ • ทําใหเงาสีดํา มีลักษณะนุมและจาง ดวยคําสั่ง Filter, Blur, Gaussian Blur โดยสามารถ ปรับคาความนุมและจางของเงาจากคาตางๆ  • เพื่อใหมีลักษณะที่เปนเงา จึงตองยายใหเงามาอยูใตรูปภาพ โดยการยายชั้นเลเยอรเงาไป อยูใตชั้นเลเยอรรูป (เปด) ดวยวิธีการนําเมาสชท่ชื่อเลเยอรของเงา (Layer 2) กดปุมเมาส ้ี ี คางไว แลวลากมาอยูใตชั้นเลเยอรรูปภาพ (Layer 1) • คลิกเลือกเลเยอรเงา (Layer 2) แลวเลือกเครื่องมือ Move เพื่อยายตําแหนงของเงาใหอยู ใตรูปตนฉบับ เพื่อใหเกิดเปนเงา
    • 75 • ปรับเงาใหมีมตดวยคําสั่ง Edit, Transform, Distort เมื่อไดลักษณะเงาที่ตองการจึงกดปุม ิ ิ  E เงาของวัตถุหลายชิ้น • เปดไฟลใหม สรางภาพโดยแยกเลเยอร (ตัวอยางเปนภาพ 2 ชิ้นทีแยกเลเยอรกันและกัน) ่ • สราง Selection ของภาพทั้งสองชิ้น โดยกดปุม C คางไวแลวนําเมาสไปคลิกทีชื่อเลเยอร ่ ของภาพที่ 1 จะปรากฏ Selection ของภาพที่ 1 • จากนั้นกดปุม CS คางไว แลวนําเมาสไปคลิกที่ชื่อเลเยอรของภาพที่ 2 เพื่อสราง Selection ของภาพที่ 2 ใหผสมรวมกับ Selection เดิมของภาพที่ 1 ปรากฏเปน Selection รวมกัน • สรางเลเยอรใหม แลวเติมสีดาลงไป ยายเลเยอรใหมไปอยูใตเลเยอรภาพทั้งสองภาพ ํ  • เลือกเครื่องมือ Move Tools ลากเงาสีดาของเลเยอรเงา ใหเหลื่อมล้ํากับภาพวัตถุเดิม (ใชปุม ํ ลูกศรขึ้นลงซายขวาก็ได) เพียงเทานี้ก็จะไดภาพวัตถุที่มีเงารวมกัน
    • 76 ซอนภาพดวยเทคนิค Masking & Gradient เทคนิค Masking และ Gradient สามารถนํามาประยุกตสรางภาพรูปแบบใหมๆ ไดอกหลายลักษณะ ี โดยสามารถลองปฏิบัติดังนี้ • เตรียมภาพ 2 ภาพเปนอยางนอย • สราง Layer Mask บน Layer 1 โดยคลิกที่ไอคอน Add a mask ซึ่งจะปรากฏชั้น Layer Mask ดังนี้ • คลิกเลือกเครื่องมือ Gradient และเลือกรูปแบบของการไลโทนสีจากแถบตัวเลือก • เปลี่ยนคาสีเปนสี Default คือ ขาว/ดํา เพื่อใหเห็นผลที่ชดขึ้น ั • นําเมาสมาคลิกที่ภาพที่เตรียมไว แลวลองลากเมาส ดูผลที่ปรากฏ หากไมพอใจก็ทดลองลาก เมาสใหม โดยใชทิศทางและระยะทางที่แตกตางกันไป การลบพื้นของภาพ กรณีที่ภาพมีพื้นเปนลวดลายดวยคําสั่ง Filter • เปดไฟลภาพทีตองการ ตัวอยางเปดไฟลภาพ zebra.psd ซึ่งเปนภาพมาลายซึ่งมีแผงคอเปน ่ เสนๆ ถาใชวิธลบดวย Lasso หรือ Magic Wand จะทําใหเสนแผงคอถูกลบไปดวย ดังนั้นจึงตอง ี ใชวิธีการลบดวยคําสั่งพิเศษ • คัดลอกเลเยอรภาพตนฉบับ โดยลากเลเยอร Background มาทับไอคอน Create a new layer • ซอนเลเยอร Background
    • 77 • เลือกเมนูคําสั่ง Filter, Extract เพื่อเขาสูโหมดเลือกภาพพิเศษ • คลิกเลือกเครื่องมือ Edge Highlighter แลวนําเมาสมาลากผานรอบๆ ตัวมา เพื่อสรางกรอบ ในการเลือกภาพ ดังรูป • คลิกเลือกเครื่องมือ Fill แลวนํามาคลิกที่ตัวมา เพื่อเลือกใหคําสั่งมีผลเฉพาะตัวมา • คลิกปุม Preview จะปรากฏตัวมาทีถูกลบพื้นออกหมดแลว ่ • คลิกปุม OK เพื่อยืนยันการตัดพื้นของภาพ แปลงภาพขาวดําเปนภาพสีแบบ Sepia การทําใหภาพขาวดําเปนภาพสี มีหลายเทคนิค ซึ่งหากศึกษาไดหลากหลาย จะชวยใหมแนวคิดสราง ี ภาพสีจากภาพขาวดํารูปแบบแปลกใหมไดอีกหลายลักษณะ • เปดภาพไฟลทตองการ ี่ • เปลี่ยนโหมดของภาพเปน RGB Color ดวยคําสั่ง Image, Mode, RGB Color • เลือกเมนูคําสั่ง Image, Adjust, Hue/Saturation คลิกเลือกรายการ Colorize • ปรับคา Hue เพื่อใหไดสภาพตามตองการ ี
    • 78 แปลงภาพขาวดําเปนภาพสีดวยเทคนิคซอนสีภาพ จากการแปลงภาพขาวดําเปนภาพสีดวยเทคนิค Sepia สามารถนํามาปรับแตงใหไดภาพสีลกษณะ  ั ตางๆ อีก ดังเชน • จากขั้นตอนภาพ Sepia ที่กลาวไวแลว ใหสรางเลเยอรใหมอก 1 ชั้น ี • เลือกสี Foreground Color แลวเติมลงในเลเยอรทสรางขึ้นใหม ี่ • ปรับคา Blending เปน Multiply, Overlay หรือ Color ตรวจสอบผล หรือจะใชเทคนิคการเติมสีแบบไลโทนสี ดังนี้ • จากขั้นตอนภาพ Sepia ที่กลาวไวแลว ใหสรางเลเยอรใหมอก 1 ชั้น ี • เลือกเครื่องมือ Gradient ปรับคาสี Gradient ตามตองการ • นําเมาสลากบนเลเยอรทสราง เพื่อเติมสีแบบไลโทน ี่ • ปรับคา Blending เปน Multiply, Overlay หรือ Color ตรวจสอบผล เปลี่ยนภาพสีเปนภาพวาดลายเสน • เปดไฟลภาพตนฉบับ • เลือกเมนูคําสั่ง Filter, Stylize, Find Edges ใส Effect ใหกับภาพ จากภาพ Ducky กอนหนานี้ หากเปลี่ยนเฉพาะสีคงไมโดดเดนเทาทีควร PhotoShop มี Effect งายๆ ่ แตใหนาสนใจมาใหใชงาน ซึงสามารถนําไปประยุกตใชกับการทํางานลักษณะอื่นๆ ไดอีกหลากหลายรูปแบบ ่ • ใชเครื่องมือ Magic Wand คลิกเลือกพื้นของภาพ เพื่อสรางขอบเขต • เติมสีที่ตองการ • ใส Effect ดวยคําสั่ง Filter ซึงจะปรากฏรายการคําสั่งยอยอีกหลายรายการ แตละรายการก็จะให ่ Effect ที่แตกตางกันออกไป
    • 79 • เลือกคําสั่ง Filter, Texture, Craqelure สําหรับเปลี่ยนพื้นภาพใหมี Effect คลายผนังทีฉาบ ่ ดวยปูนลักษณะตางๆ โดยผูสรางสามารถปรับเปลี่ยนคาจากตัวเลือก เพื่อใหไดผลทีตองการ  ่ • เลือกคําสั่ง Filter, Render, Clouds สําหรับเปลี่ยนพื้นภาพใหมี Effect คลายสีของทองฟา Barcode • เปดไฟลใหม • เลือกคําสั่ง Filter, Noise, Add Noise เพื่อสรางลายจุดบนพื้นผิว โดยตั้งคาดังตัวอยาง • เลือกคําสั่ง Filter, Blur, Motion Blur... แลวตั้งคาตามตัวอยางเพื่อแปลงจุดเปนลายเสน • จะไดภาพดังนี้ ไฟฟาในอากาศ • เปดไฟลใหม เลือกสี Foreground / Background ใหเปนดําขาว • เลือกเครื่องมือไลโทนสี ลงสีโทนดําขาวในแนวนอน • เลือกคําสั่ง Filter, Render, Difference Clouds • เลือกคําสั่ง Image, Adjustments, Invert เพื่อกลับสี
    • 80 • เลือกคําสั่ง Image, Adjustments, Level... เพื่อสรางเสนไฟฟาในอากาศ • เลือกคําสั่ง Image, Adjustments, Hue/Saturation แลวตังคาดังตัวอยาง ้ • จะไดภาพดังนี้ ภาพลักษณะเคลื่อนไหว • เปดไฟลภาพตนฉบับ หากภาพตนฉบับมีลักษณะเปน Layer ใหรวมเลเยอรเปนชั้นเดียวกันดวย คําสั่ง Layer, Flatten Image • คัดลอกภาพตนฉบับเปนอีกเลเยอร • เลือกเมนูคําสั่ง Filter, Blur, Radial Blur แลวตั้งคาตามตัวอยาง เพื่อทําใหภาพมีลักษณะการ เคลื่อนที่ • นําเมาสกลับไปคลิกที่เลเยอรชน Background เลือกเครื่องมือแบบวงกลม หรือสี่เหลี่ยมตาม ั้ ตองการ • นําเมาสไปคลิกเลือกตําแหนงภาพทีตองการใหแสดงผลเดนชัด ่
    • 81 • เลือกเมนูคําสั่ง Select, Feather เพื่อทําใหขอบภาพมีลักษณะนุมนวล • เลือกเมนูคําสั่ง Edit, Copy แลวตามดวย Edit, Paste ปรากฏชั้นเลเยอรใหม ลากเลเยอรใหมไป อยูระดับบนสุด ภาพ Sketch • เปดไฟลภาพทีตองการ ่ • Duplicate เลเยอรภาพ แลวใชคําสั่ง Image, Adjustments, Desaturate เพื่อแปลงเปนภาพ ขาวดํา • Duplicate เลเยอรภาพทีแปลงเปนขาวดําแลวใชคําสั่ง Image, Adjustments, Invert เพื่อปรับ ่ ภาพ • คลิกเลือกเลเยอรที่กลับภาพ แลวเปลี่ยนคา Blending เปน Color Dodge • เลือกคําสั่ง Filter, Blur, Gaussian Blur ปรับคาตามตองการ • ทดลองปรับคาเปนคาอื่นๆ ในแตละขั้นตอน ซึ่งจะไดผลลัพธอีกแบบ เชน ภาพสามมิติแบบ Sphere • เปดไฟล • ใชเครื่องมือ Marquee แบบวงกลม สราง Selection วงกลม หรือรูปทรงที่ตองการ  • เติมสี หรือ Pattern • เลือกคําสั่ง Filter, Distort, Spherize กําหนดคา Amount เปน 100 แลวคลิก OK เพื่อดูผล
    • 82 ลายเสนแบบกราฟกสดใส • เปดไฟลภาพใหม กําหนดขนาดตองการ • ใชเครื่องมือ Brush ระบายสีตางๆ ลงไปตามตองการ  • เลือกเมนูคําสั่ง Filter, Pixelate, Mezzotint กําหนดคา Type เปน Fine dots • เลือกเมนูคําสั่ง Filter, Blur, Motion Blur แลวกําหนดคา Distance เพื่อใหไดผลตามทีตองการ ่ แลวคลิกปุม OK เปลวไฟ • เปดไฟลภาพใหม กําหนดขนาดตองการ • สรางเลเยอรใหม วาดสี่เหลี่ยมแนวตั้ง กําหนดขนาดตามทีตองการ ่ • เลือกเมนูคําสั่ง Edit, Transform, Skew แลวปรับใหเปนรูปทรงสามเหลียม ่ • เลือกเมนูคําสั่ง Filter, Distort, Shear แลวปรับคาใหไดรูปทรงตามตองการ จากนั้นคลิกปุม OK • เติม Effect ที่ตองการ เพื่อนําไปใชงาน 
    • 83 ลายน้ํา • เปดไฟลภาพใหม กําหนดขนาดตองการ โดยกําหนดโหมดภาพเปน RGB • เลือกสี Foreground เปน น้ําเงินหรือฟา และ Background เปนขาว • ทําใหเปนลายผสมแบบทองฟาสีฟา ดวยคําสั่ง Filter, Render, Clouds • สราง Effect แบบน้ํากระเพื่อมดวยคําสั่ง Filter, Distort, Ocean Ripple กําหนดคาตามตองการ ลายเสน • สรางไฟลใหม กําหนดสีพื้นใหเปนสีดํา หรือสีเขม • เลือกสี Foreground เปนดํา และ Background เปนขาว • ผสมสีดวยคําสัง Filter, Render, Clouds และ Filter, Render, Difference Clouds โดยใช ่ คําสั่ง Filter, Render, Difference Clouds ซ้าๆ หลายครั้ง (คียลดคือ Cf) ํ ั • ตอดวย Filter, Distort, Pinch คา 50% 2 ครัง ้ • ตอดวย Filter, Stylize, Find Edges และ Filter, Distort, Wave โดยกําหนดคาดังนี้ • สลับสีดวยปุม Ci แลวเลือกคําสั่ง Image, Adjustments, Hue/Saturation… เลือก Colorize แลวปรับสีตามตองการ • คัดลอกเลเยอร แลวหมุนดวยคําสั่ง Edit, Transform, Flip Horizontal ตั้งคา Blending Mode เปน Lighten
    • 84 วัตถุ 3 มิติ แมวา PhotoShop เปนโปรแกรมตกแตงภาพ แตอยางไรก็ตามยังมีสวนฟงกชันที่นาสนใจอีกสวน ที่  สามารถสรางภาพ 3 มิติไดอยางรวดเร็ว โดยเฉพาะรูปทรง 3 มิติ • เปดไฟลใหม • เลือกเมนูคําสั่ง Filter, Render, 3D Transform... • เลือกเครื่องมือสรางรูปทรง แลววาดรูปทรงทีตองการ ่ • ใชเครื่องมือ Trackball หมุนวัตถุใหเกิดเปนรูปทรง 3 มิติตามที่ตองการ • เมื่อคลิกปุม Ok จะปรากฏภาพ 3 มิติ ดังนี้ ลูกบอลกลมสามมิติ • สรางไฟลกําหนดขนาดตามตองการ • สรางเลเยอร แลววาดวงกลม • เติมลายจุดดวยคําสั่ง Edit, Fill, Pattern เลือก Pattern ที่สรางไวกอนนี้ • เลือกคําสั่ง Filter, Distort, Spherize กําหนดลักษณะของลูกบอลตามตองการ
    • 85 • ลบขอบรอบนอกของวงกลมทิงดวยคําสั่ง Select, Inverse และ Select, Modify, Expand ้ กําหนดคาประมาณ 10 pixels แลวกดปุม = • กําหนดคา Effect โดยคลิกทีปุม ่ เลือกรายการ Bevel and emboss กําหนดคาใหดูเปนลูก บอลกลมนูนสามมิติ ดังตัวอยาง ขอบภาพลักษณะตางๆ • เปดภาพที่ตองการ • ปรับโหมดดวยคําสั่ง Image, Mode, RGB Color • แตงภาพดวยคําสั่ง Image, Adjust, … • ยอภาพใหมีขนาดตามทีตองการดวยคําสั่ง Image, Image Size… ่ • ปรับแตงภาพใหไดลักษณะทีตองการ ่ • คลิกเลือกเครื่องมือ Marquee ตามที่ตองการ  • นําเมาสมาสรางเสน Selection บริเวณที่ตองการ ควรมีพื้นทีขอบรอบนอกดวย ่ • เลือกเมนูคําสั่ง Select, Inverse เพื่อกลับคาการเลือกเปนเลือกขอบ • เลือกเมนูคําสั่ง Filter, … เลือกและปรับแตงคาตามตองการ เชน Filter, Texture, Stained Glass ภาพขอบฟุง • เปดไฟลภาพทีตองการ ่ • ปรับขนาด และปรับแตงสีภาพ • เลือกเครื่องมือ Marquee ตามตองการ เชน เครื่องมือเลือกภาพแบบสี่เหลี่ยม หรือเครื่องมือ เลือกภาพแบบวงกลม/วงรี • ทําเสนประ คลุมภาพที่ตองการ โดยนําเมาสมาชี้ ณ มุมบนซายของตําแหนงภาพ แลวลากเมาส ใหไดระยะเสนประทีตองการ ่ • เลือกคําสั่ง Select, Feather • ปอนตัวเลขคาความฟุงของภาพ คายิ่งมาก ความฟุงของภาพยิ่งสูง จากนันกดปุม OK ้
    • 86 • ตอไปจะเปนขั้นตอนสําคัญ คือ การตัดภาพใหเลือกเฉพาะภาพที่เลือกไว โดยจะตัดขอบนอก ออกทั้งหมด o เลือกคําสั่ง Select, Inverse o เลือกสี Background Color ตามตั้องการ o กดปุม = โปรแกรมจะตัดพื้นที่รอบนอก Selection ออก กรอบภาพแบบกลม, วงรี การทําใหกรอบของภาพมีลักษณะกลม, วงรี หรือมีมุมมน ก็ชวยลดความกระดางของภาพไปได เชนกัน โดยใชเทคนิคการเลือกเครื่องมือ Marquee แบบวงกลม แลวลบพืนที่รอบนอกออกไป ้ การทํากรอบภาพใหมีลักษณะเปนวงกลมอยางสมบูรณ ใหกดปุม S คางไวขณะสราง Selection แบบวงกลม จากนั้นใชคําสั่ง Select, Inverse เพื่อกลับคาการเลือกขอบเขต แลวกดปุม เพื่อลบพื้นที่รอบนอก ของขอบเขตทิ้งออกไป กรอบภาพแบบมุมมน กรอบแบบมุมมนนับเปนอีกเทคนิคหนึ่งที่นาสนใจและทําไดงาย รวดเร็ว โดยใชเครื่องมือ Marquee   แบบสี่เหลียม สราง Selection จากนั้นทําใหขอบของ Selection มีลักษณะมนดวยคําสั่ง Select, Modify, ่ Smooth… ปอนคาตัวเลขความมนของมุมสี่เหลี่ยม คายิ่งมากมุมมนมาก จากนั้นใชคําสั่ง Select, Inverse เพื่อกลับคาการเลือกขอบเขต แลวกดปุม  = เพื่อลบพื้นที่รอบ นอกของขอบเขตทิ้งออกไป กรอบภาพรูปทรงอิสระ PhotoShop เตรียมรูปทรงสําเร็จลักษณะตางๆ มาใหใชงาน และสามารถนํามาประยุกตใชเปนกรอบ ของภาพได • เปดภาพที่ตองการสรางกรอบ • เลือกสี Background Color เพื่อใชเปนสีพื้นของภาพ • สราง Layer ใหม • เลือกเครื่องมือสรางกรอบสี่เหลี่ยม สามารถคลิกคางไวเพื่อเลือกรูปทรงอื่นๆ ตามทีตองการ ่  • หากเลือก Custom Shape Tool สามารถเลือกรูปทรงอื่นๆ ไดอีกจากแถบ Option • วาดรูปทรงดวยเครื่องมือที่เลือก • ซอนเลเยอรรูปทรงทีสราง โดยคลิกปดตาของชั้น Layer ของรูปทรงทีวาดไวตามขอ 6 ่ ่ • ยายการทํางานกลับมาที่เลเยอรรูปภาพตนฉบับ • สราง Selection ตามลักษณะของรูปทรงที่วาดตามขอ 6 โดยกดปุม C คางไว แลวคลิกเมาส ที่ชั้นเลเยอรรูปทรงที่วาดตามขอ 6
    • 87 • ปรากฏเสน Selection ตามรูปทรงที่เตรียมไวบนภาพตนฉบับ • เลือกเมนูคําสั่ง Select, Inverse แลวกดปุม = เพื่อลบพื้นที่รอบนอกออกไป • สามารถใชเทคนิคอื่นๆ ผสมเชนการทําใหขอบนุมดวยคําสั่ง Select, Feather… หรือเติมสีขอบ ดวยคําสั่ง Edit, Stroke… กรอบภาพดวย Polygonal Lasso • เปดไฟลภาพ สรางเลเยอรใหม • เลือกเครื่องมือ Polygonal Lasso สราง Selection ใหไดรูปทรงทีตองการ ่ • เลือกคําสั่ง Select, Inverse เพื่อสราง Selection แบบยอนกลับ กดปุม เพื่อลบภาพรอบนอก Selection • เติม Effect ที่ตองการ  ภาพ Background นอกจากภาพกราฟกตกแตงเว็บแลว สิ่งที่ขาดไมได คือการพื้นลวดลายสวยๆ เทหๆ สักชินสองชิ้นนะ ้ ครับ อันนี้ยิ่งสะดวกครับ ลองดูเลยนะครับ • เลือกคําสั่ง File, New กําหนดขนาดพื้นที่สก 2 นิ้ว x 2 นิ้ว ความละเอียด 72 dpi โหมด RGB นะ ั ครับ • ใสลวดลายดวยคําสั่ง Filter, Texture, Texturizer ปรากฏกรอบคําสั่งดังรูป ลองคลิกเลือกคา ตางๆ ในกรอบคําสั่งนีดสครับ จะเห็นลวดลายตางๆ กันออกไป ไดลวดลายที่ตองการ ก็ ok ได ้ ู ิ เลยครับ • นอกจากนี้คุณอาจจะเทสีลงใหเปนพื้นกอนใชคําสั่งก็ได ผลก็จะแตกตางออกไป แตสวยอีก แบบนะ ไมลองไมรูครับ Pattern ลายเสน • เปดไฟลใหมขนาด 100 * 100 pixels • เลือกใชเครื่องมือ Pencil • เลือกสี แลวสรางเสนตรงบางๆ 1 เสน (ควรกด S ดวยขณะที่ลากเมาสวาดเสน) • ใชเครื่องมือ Zoom ขยายภาพใหโตประมาณ 300% จะเห็นเสนทีชัดเจนมากขึ้น ่ • สราง Selection ใหคลุมเสนสี พรอมพื้นในสัดสวนเทาๆ กันดังรูป • เลือกเมนูคําสั่ง Edit, Define Pattern… แลวตั้งชื่อ Pattern เชน RedLine • โปรแกรมจะบันทึก Selection ที่เลือกไวเปน Pattern เพื่อรอการใชงานตอไป • เลือกคําสั่ง Image, Crop แลวบันทึกเปน GIF Format เพื่อนําไปใชเปน Background ใน เอกสารเว็บ
    • 88 Pattern ลักษณะตางๆ • สรางไฟลใหม ขนาด 5 x 5 pixel • ขยายประมาณ 1600 % • เลือกเครื่องมือ Pencil แลวลงลวดลายดังตัวอยาง • Selection แลวเลือกคําสั่ง Edit, Define Pattern... ตั้งชื่อ Pattern เพื่อรอนําไปใชงานตอไป • บันทึกเปน GIF Format เพื่อนําไปใชเปน Background ในเอกสารเว็บ Pattern จากรูปภาพ • เปดไฟลภาพทีตองการนํามาเปน Pattern ตัวอยางเปดไฟล Ducky.tif ่ • คัดลอกเลเยอรภาพเปด โดยลากเลเยอร Background มาทับไอคอน Create a new layer จะ ไดเลเยอรใหมชื่อ Background Copy ที่มีภาพเปดเหมือนภาพเดิมทุกประการ • ปดเลเยอร Background โดยคลิกในชองดวงตาของเลเยอร Background • เนื่องจากพื้นของภาพเปนสีขาว การลบจึงสามารถใชเครื่องมือ Magic Wand โดยคลิกเลือก เครื่องมือ Magic Wand แลวนําเมาสไปคลิกที่พื้นสีขาว จะปรากฏ Selection จากนั้นก็กดปุม = เพื่อลบ พื้นสีขาวจะหายไปจากรูปภาพ • ยอภาพใหไดขนาดทีตองการดวยคําสั่ง Edit, Free Transform ่ • สราง Selection สี่เหลี่ยมรอบภาพ • เลือกคําสั่ง Edit, Define Pattern… เพื่อนําภาพที่เลือกไปเก็บไวเปน Pattern • สามารถนํา Pattern ไปประยุกตใชไดหลายลักษณะ ดังตัวอยาง Background แบบผิวขรุขระ • สรางไฟลภาพขนาด 100 x 100 Pixels • เลือกคําสั่ง Filter, Noise, Add Noise โดยกําหนดคาตามตัวอยาง (ปรับไดตามตองการ) เพื่อ สรางลายขรุขระ • ปรับผิวใหนูนเล็กนอยดวย Filter, Stylize, Emboss แลวปรับคาตามตัวอยาง (ปรับไดตาม ตองการ)
    • 89 • สรางเลเยอรใหม • เลือกสีท่ตองการ แลวเติมสีในเลเยอรใหมดวยคําสั่ง Edit, Fill ี • ปรับคา Opacity จากบัตรเลเยอร ดูผลที่ปรากฏ • สามารถเปลียนสีใหมไดโดยการคลิกที่เลเยอรที่ลงสีเดิม แลวเลือกสีใหม จากนั้นจึงเติมสีใหม ่ ดวยคําสั่ง Edit, Fill Background ลายเมฆ • เลือกคําสั่ง File, New กําหนดขนาดพื้นที่ (เชน 2 นิ้ว x 2 นิ้ว) ความละเอียด 72 dpi โหมด RGB นะครับ • เลือกสีท่ตองการ (เชน น้ําเงิน กับขาว) ี • จากนั้นเลือกคําสั่ง Filter, Render, Clouds Background แบบผิวลายไม • สรางไฟลภาพขนาด 100 x 100 Pixels • เลือกคําสั่ง Filter, Noise, Add Noise ปรับคา เพื่อสรางลายขรุขระ • ปรับผิวใหนูนเล็กนอยดวย Filter, Stylise, Emboss (ปรับไดตามตองการ) • ทําผิวขรุขระใหมีลักษณะเปนลายไม ดวยคําสัง Filter, Blur, Motion Blur แลวตั้งคาดังตัวอยาง ่ • สามารถเปลียนสีใหมไดโดย เลือกเมนูคําสั่ง Image, Adjust, Color Balance ่ ลวดลายสี่เหลี่ยมสําหรับพื้นเว็บ • เปดไฟลใหมขนาด 15 * 15 pixels • เติมสีที่ตองการลงไป • กดปุม Ca เพื่อสราง Selection • เลือกเครื่องมือ Move Tools แลวกดปุมลูกศรเลื่อน Selection ลง 1 จังหวะ และเลื่อนไป ดานขวา 1 จังหวะ
    • 90 Background แบบ Star • เปดไฟลใหม • วาดแทงสี่เหลียมยาว เติมสีทตองการ ดังตัวอยาง ่ ี่ • สราง Selection ใหคลุมพื้นทีดานขวาของสี่เหลี่ยมเดิม โดยมีสัดสวนเทากัน ่ • เลือกคําสั่ง Edit, Define Pattern เพื่อแปลง Selection เปน Pattern • ยกเลิกเสน Selection แลวเลือกคําสั่ง Edit, Fill แลวเลือกรายการดวย Pattern ทีสรางไว ่ • เลือกคําสั่ง Filter, Distort, Polar Coordinates และเลือกรายการเปน Rectangular to Polar ลายแผนฟลมดิจิทัลเรื่อง Matrix  • เปดไฟลใหม • เลือกคําสั่ง Filter, Texture, Grain เพื่อเติมลวดลายแนวตัง โดยตั้งคาดังตัวอยาง ้ • เลือกสี Foreground color ตามตองการ แลวใชคาสั่ง Filter, Artistic, Neon Glow เพื่อสราง ํ Effect แบบสีนออน ี • เลือกคําสั่ง Filter, Stylize, Glowing Edges เพื่อแปลงใหมพื้นเขม ี
    • 91 Background ทองฟา • สรางชิ้นงานใหม ขนาด 200 x 200 pixels • สรางเลเยอรใหม เติมสีดาเปนสีพื้น ํ • สรางชิ้นดวงดาว o Filter, Noise, Add Noise กําหนดคาดังตัวอยาง o Image, Adjust, Threshhold เลือนแถบกําหนดคา Level ใหไดคาที่เหมาะสม o เลือกคําสั่ง Filter, Blur, Gaussian Blur กําหนดคาไมเกิน 1 • เติมชิ้นดาวสดใส ดวย Paintbrush o เลือกเครื่องมือ Paintbrush คลิก Control Menu เลือก รายการ Small Thumbnail เลื่อนหา Brush รูปราง สรางเลเยอรใหม เลือกสี Foreground เปนสีขาว นํา Paintbrush ไปคลิก เพื่อ สรางดาวสดใส ณ ตําแหนง ที่ตองการ • บันทึกใชงานในรูปแบบ Pattern หรือ File ลวดลายแบบจุด • เปดไฟลใหม เติมสีพื้นตามทีตองการ ่ • เลือกบัตรรายการ Channel แลวสราง Channel ใหม (จะไดชื่อ Alpha 1) • สราง Selection รูปทรงทีตองการ แลวเติมสีขาวลงไป จากนั้นยกเลิก Selection พรอมทําขอบ ่ ใหเบลอดวยคําสั่ง Filter, Blur, Gaussian Blur • เลือกคําสั่ง Filter, Pixelate, Color Halftone เพื่อสรางจุดของภาพ • กลับมาทํางานที่บัตรรายการ Layer โดยสรางเลเยอรใหม
    • 92 • เลือกคําสั่ง Select Load Selection จากนั้นเลือกรายการ Alpha 1 • ปรากฏลวยลายจุดทีสรางไวจากบัตรรายการ Channel ่ • เติมสีที่ตองการ ขอความกราฟกสวยนาสนใจ นอกจากรูปภาพแลว ขอความประกอบเว็บทีมีลักษณะทีสดใส สวยงามก็เปนจุดเดนที่นาสนใจในการ ่ ่ นําเสนอเนื้อหาดวยเชนกัน การสรางขอความดวย PhotoShop เปนขั้นตอนที่สะดวก ดวยฟงกชันการจัดแตง ขอความทีสมบูรณแบบ ่ • สรางหนาตางชินงานใหม ดวยคําสั่ง File, New… และกําหนดรายละเอียดตามตองการ ้ • คลิกในชองสี Foreground Color เพื่อกําหนดสีใหกับขอความที่พิมพ • คลิกเลือกเครื่องมือ Type Tool o สําหรับเครื่องมือ Type Mask จะปรากฏเปนเสนโครงราง ซึงตองใชคําสั่ง ตอไปนี้จดการ ่ ั เลือกสี Foreground ซึ่งจะใชเปนสีของเสนขอบ แลวเลือกคําสั่ง Edit, Stroke เพื่อเติมเสนขอบขอความ เลือกสี Background ซึ่งจะใชเปนสีพื้นของขอความ แลวง เลือกคําสั่ง Edit, Fill, Background Color เพื่อเติมสีพื้นของขอความ • นําเมาสมาคลิกในหนาตางสรางงาน ณ ตําแหนงที่ตองการพิมพงาน • เลือกฟอนต ขนาด และลักษณะของอักษรทีตองการจาก Text Option Bar ่ • พิมพขอความทีตองการ เมื่อไดขอความที่ตองการใหคลิกเปลี่ยนเครื่องมือเปน Move Tool เพื่อ ่ จัดตําแหนงขอความที่พิมพใหไดตําแหนงทีตองการ จะปรากฏขอความตามสีที่เลือกบนจอภาพ ่  • ขอความที่พมพไปแลว จะปรากฏบนชั้นเลเยอรเฉพาะของตัวเอง ดังนั้นหากมีหลายขอความ ก็จะ ิ ปรากฏชันเลเยอรตามจํานวนขอความเชนกัน และหากตองการยายตําแหนง หรือลบขอความใด ้ จะตองเลือกชั้นเลเยอรใหถูกตองดวย • การลบขอความ ใหคลิกเลือกชั้นเลเยอรของขอความทีตองการลบ แลวลากเลเยอรนั้นลงไอคอน ่ ลบ (ถังขยะ ) ที่อยูมุมลางขวาของ Layer Palette • การแกไขขอความที่พิมพไปแลว ใหคลิกเลือกเครื่องมือ Type Tool แลวนําเมาสมาคลิก ณ ขอความบนหนาตางงาน โปรแกรมจะเขาสูโหมดแกไขใหโดยอัตโนมัติ • การใสลักษณะพิเศษใหกับขอความ กระทําไดโดยเปด Style ดวยคําสั่ง Window, Styles
    • 93 • นําเมาสไปคลิกในชองลักษณะพิเศษของ Style โปรแกรมจะนําลักษณะพิเศษที่เลือกไปเติม ใหกับขอความโดยอัตโนมัติ สามารถคลิกดูผลสไตลแตละรูปแบบไดอิสระ • หากไมพอใจกับ Style ที่ปรากฏ สามารถเพิ่ม Style เขาไปได โดยคลิกที่ Style Options ซึ่งจะ ปรากฏตัวเลือกยอยดังนี้ การลบขอความ การลบขอความ จะอาศัย Layer Palette (เปดดวยคําสั่ง Window, Layers) ขอความที่พมพไปดวย ิ Text Tool จะมีลักษณะคือ 1 ขอความตอ 1 เลเยอร ดังนั้นหากตองการลบขอความใด ก็ใหนําเมาสไปคลิก ณ เลเยอรทตองการลบ แลวลากเลเยอรนั้นไปวางบนไอคอนถังขยะ ี่ การใสลักษณะพิเศษใหกบขอความ ั • พิมพขอความ • เปด Layer Palette • คลิกเลือกเลเยอรที่ตองการ • คลิกที่ปุม Add a Layer Style ดานลางของ Layer Palette • เลือกรายการ Layer Style ที่ตองการ  • ปรากฏหนาตาง Layer Style ที่เลือก เชน เมื่อเลือก Drop Shadow จะปรากฏรายการเลือก ดังนี้ • ปรับคาที่ตองการ สามารถสังเกตผลที่เลือก ไดจากขอความจริง เมื่อไดผลที่ตองการใหคลิกปุม OK • การยกเลิก Style ที่เลือก ใหคลิกเอาเครื่องมือถูกออกจากรายการ Style ทีปรากฏดานซายมือ ่ ของหนาตาง Layer Style หรือลากเลเยอร Effect ลงถังขยะ ตัวอักษรซูม • สรางไฟลใหม กําหนดขนาดตามตองการ • เลือกเครื่องมือ Type Mask พิมพขอความที่ตองการ จะปรากฏเปนเสนประรอบขอความ ใช เครื่องมือ Move ยายตําแหนง Selection
    • 94 • เลือกสีท่ตองการ แลวเติมดวยคําสั่ง Edit, Fill ี • เลือกคําสั่ง Select, Feather เพื่อทําใหขอบตัวอักษรฟุง (กําหนดคาประมาณ 2 – 4) • เติม Effect Zoom ดวยคําสั่ง Filter, Blur, Radial Blur… กําหนดคาดังตัวอยาง • ทําซ้ําทีคําสั่ง Filter, Blur, Radial Blur… ่ • เลือกคําสั่ง Select, Inverse เพื่อสลับ Selection แลวทําคําสั่ง Filter, Blur, Radial Blur… ซ้ํา 2 ครั้ง ขอความลายเสน • เปดไฟลใหม หรือเปดไฟลภาพที่เตรียมไว ตัวอยางเปดไฟล Astronaut(CMYK).tif เนื่องจาก ภาพนี้มีโหมดภาพเปน CMYK จึงตองเปลี่ยนเขาสูโหมด RGB กอน ดวยคําสั่ง Image, Mode, RGB Color • สราง Pattern ลายเสนดวยวิธที่แนะนําไปกอนหนานี้แลว ี • คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) • พิมพขอความทีตองการ โดยเลือกฟอนตตัวอักษรที่มีลักษณะหนา และตัวโตๆ ่ • สรางเลเยอรใหม สราง Selection ตามตนแบบของขอความที่สรางไว โดยกดปุม C แลวคลิก ที่ชื่อเลเยอรขอความ • เลือกคําสั่ง Edit, Fill… แลวเลือกรายการ Use: เปน Pattern จากนั้นเลือก Pattern ลายเสนที่ สรางไว
    • 95 • ไดผลลัพธดังนี้ ขอความจากรูปภาพ • เปดไฟลภาพทีเตรียมไว ตัวอยางเปดไฟล Astronaut(CMYK).tif เนื่องจากภาพนี้มีโหมดภาพ ่ เปน CMYK จึงตองเปลี่ยนเขาสูโหมด RGB กอน ดวยคําสั่ง Image, Mode, RGB Color • สรางเลเยอรใหม และเติมสีพื้นลงไป • คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) • พิมพขอความทีตองการ โดยเลือกฟอนตตัวอักษรที่มีลักษณะหนา และตัวโตๆ ่ • คัดลอกรูปภาพ โดยลากเลเยอร Background ทับไอคอน Create a new layer • ยายเลเยอร Background copy ไปอยูบนสุด • คลิกเลือกคําสัง Layer, Group with Previous เพื่อรวมเลเยอรรูปภาพเขากับเลเยอรตวอักษร จะ ่ ั พบวารูปภาพหายไปจากจอภาพ โดยจะแสดงเฉพาะรูปภาพที่ตรงกับขอความเทานั้น และ สามารถใชเครืองมือ Move เพื่อยายรูปภาพใหปรากฏบนขอความตามทีตองการ ่ ่  ตัวอักษรไฟ • สรางงานใหม กําหนดขนาดตามตองการ กําหนดสีพื้นเปนสีดํา • พิมพขอความ ควรใชตวอักษรหนาๆ ั • ทํารัศมีรอบตัวอักษร o เลือกคําสั่ง Filter-> Stylize-> Wind o โปรแกรมจะใหเลือกโหมดทํางานจาก Text Mode เปน Raster Mode ใหคลิกปุม OK กําหนดคา Wind โดย Mode เปน Wind และ Direction เปน From the Right o ทําคําสั่ง Filter-> Stylize-> Wind ซ้ําอีกครัง ้ o ทําคําสั่ง Filter-> Stylize-> Wind ซ้ําอีก 2 ครั้ง โดยเปลี่ยนคา Direction เปน From the Left
    • 96 o หมุนภาพดวยคําสั่ง Image-> Rotate Canvas-> 90 CCW o ใชคาสั่ง Filter-> Stylize-> Wind เพื่อสรางประกายไฟทั้งสองดาน แลวหมุนกลับดวย ํ คําสั่ง Image-> Rotate Canvas>90 CW • ทําตัวอักษรไฟ o เติมความเบลอของภาพ Filter-> Blur-> Gaussian Blur เติมคาประมาณ 2 o เติมความหยักใหกับภาพ Filter-> Distort-> Ripple o เปลี่ยนโหมดภาพเปน Gray scale ดวยคําสั่ง Image-> Mode-> Grayscale o เปลี่ยนโหมดภาพเปน Indexed Color ดวยคําสั่ง Image-> Mode-> Indexed Color o ใสไฟ ดวยคําสัง Image-> Mode-> Color Table เลือกคาสีเปน Black Body ่ • บันทึกไฟลในฟอรแมตที่เหมาะสม สรางรูปทรงอิสระดวย Pen Pen Tool หรือ Path เปนเครื่องมือที่มีประโยชนมากอีกชิ้นหนึ่งในการสรางสรรคภาพ หรือรูปทรง อิสระลักษณะตางๆ รวมถึงการนํามาใชในการสราง Selection ที่มีลักษณะอิสระ เพื่อใชตกแตงภาพลักษณะ ตางๆ เครื่องมือ Pen Tool สามารถสรางงานได 2 ลักษณะ คือ Shape และ Path โดยมีขอแตกตางกันดังนี้ • Shape คือรูปทรงทีสรางจาก Pen โดยโปรแกรมจะเติมสีจาก Foreground Color ใหโดย ่ อัตโนมัติ และปรากฏเปนเปน Shape Layer เฉพาะดังนี้ • Path เปนเสนโครงรางเพื่อใชกําหนดลักษณะของชิ้นงาน การใชงานจะตองผานการแปลงเปน Selection หรือรูปภาพกอน วาดตนคริสตมาส • เปดหนาตางงานใหม • เลือกสีสําหรับตนคริสตมาส จากชอง Foreground Color • คลิกเลือกเครื่องมือ Pen และคลิกเลือกโหมดการวาดจาก Option Bar เปน Create New Shape Layer • นําเมาสมาคลิกบนหนาตางงาน เพื่อสรางรูปทรงตนคริสตมาส โดยสังเกตจุดคลิก ณ ตําแหนงที่ เปนจุดสี่เหลี่ยมบนภาพ เมื่อไดรูปทรงที่ตองการใหกดปุม E เพื่อยอมรับการวาด  ปรับแตงรูปทรงที่วาดดวย Pen รูปทรงอิสระตางๆ ที่วาดดวยเครื่องมือ Pen เชนตนคริสตมาสตามตัวอยาง สามารถปรับแตงได ดังนี้ • การลบรูปทรง - เนื่องจากการวาดดวยเครื่องมือ Pen ในโหมด Shape Layer จะไดเลเยอรใหม โดยอัตโนมัติ ดังนั้นสามารถลบโดยลากเลเยอรดังกลาวลงใสถังขยะ • การเคลื่อนยายจุดของรูปทรง เรียกวา Anchor Point - สามารถกระทําไดโดย • คลิกเลือกเลเยอรของรูปทรง
    • 97 • คลิกเลือกเครื่องมือ Path component selection แลวกําหนดขอบเขตใหกบรูปทรงที่ ั ตองการปรับแตง ซึ่งจะปรากฏจุดสี่เหลี่ยมเล็กๆ ณ จุดที่คลิกเพื่อสรางรูปทรง เรียกวา Anchor Point • เลือกเครื่องมือ Convert Point Tool • นําเมาสมาชี้ทจด Anchor ณ ตําแหนงที่ตองการยายตําแหนง เพื่อปรับเปลี่ยนรูปทรง กดปุม ี่ ุ C คางไว Mouse Pointer จะเปลี่ยนรูปรางจาก เปน แลวลากเมาสเพือ ่ ปรับเปลี่ยนตําแหนงของ Anchor รูปทรงอิสระ • เปดไฟลใหม • สรางเสนไกดแนวนอนสองเสน ความกวางระหวางเสนไกด คือความหนาของรูปทรง • ใชเครื่องมือ วาดวงกลมภายในเสนไกด โดยใหอยูรมดานหนึ่งของพื้นที่ ิ • เติมสีลงในวงกลม ดวยคําสั่ง Edit, Fill... • สรางเสนไกดแนวตั้งใหอยูกึ่งกลางของวงกลม • วาดสี่เหลี่ยม โดยใหขอบดานซายของสี่เหลียม เริ่มตนจากเสนไกดกึ่งกลางวงกลม เติมสีเดิมใน ่ สี่เหลี่ยม • เลือกเครื่องมือ Pen สรางรูปทรงตามตัวอยาง
    • 98 • เปลี่ยนเครื่องมือเปน Convert Point แลวชีที่จดที่ 1 มุมใหไดความโคงตามที่ตองการ ้ ุ • ทําซ้ํากับจุดที่ 2 • เลือกเมนูคําสั่ง Window, Path คลิกเลือก Path Control Menu เลือกรายการคําสั่ง Make Selection... เพื่อเปลี่ยนเสน Path เปนเสนประ • กดปุม = เพื่อลบพื้นที่ในเสนประ ก็จะไดรปทรงทีสามารถนําไปปรับแตงการใชงานตามที่ ู ่ ตองการ รูปทรงอิสระ 2 • เปดไฟลใหม • สรางเสนไกดแนวนอนสองเสน ความกวางระหวางเสนไกด คือความหนาของรูปทรง • เลือกเครื่องมือ Pen สรางรูปทรงตามตัวอยาง
    • 99 • เปลี่ยนเครื่องมือเปน Convert Point แลวปรับใหไดความโคงตามที่ตองการ • เลือกเมนูคําสั่ง Window, Path คลิกเลือก Path Control Menu เลือกรายการคําสั่ง Make Selection... เพื่อเปลี่ยนเสน Path เปนเสนประ • เลือกเมนูคําสั่ง Select, Modify, Smooth ปอนคาความโคงมนของมุม เติมสีดวยคําสั่ง Edit, Fill... สราง Path จากภาพตนฉบับ บางครั้งจําเปนตองการสรางภาพโดยอาศัยเสนโครงราง (Outline) จากภาพตนฉบับ วิธการที่สะดวก ี ก็คือการแปลงภาพตนฉบับใหเปน Path ดังนี้ • เปดไฟลภาพทีตองการ ่ • สราง Selection ใหกับภาพ • ตัวอยางภาพ Ducky มีวิธีการสราง Selection งายๆ คือ • เลือกเครื่องมือ Magic Wand แลวคลิกที่พื้นสีขาวรอบตัวเปด ปรากฏเปน Selection ของพื้น • เลือกคําสั่ง Select, Invert เพื่อแปลงเปน Selection ของตัวเปด • เปดบัตรรายการ Path ดวยคําสั่ง Window, Path • คลิก Path Control แลวเลือกคําสั่ง Make Work Path...
    • 100 • กําหนดคา Tolerance เพื่อสราง Path จากเสน Selection ปรากฏเสน Path ซึ่งสามารถปรับแตง ตางๆ ไดตามตองการ การตัดภาพ การนําเอาภาพขนาดใหญ มาใสในเว็บเพจ ไมใชวิธที่ดีของการนําเสนอ เพราะจะทําใหการโหลดภาพ ี เสียเวลามาก วิธีที่ดทสุด คือ ควรตัดภาพเปนชิ้นเล็ก แลวนําภาพมาประกอบกันเปนชิ้นอีกครั้ง ดวยเทคนิคการ ี ี่ ประกอบภาพผานเอกสารเว็บ ดังนั้นเนื้อหานีจะแนะนําการตัดภาพ เปนสวนๆ กอน เพื่อเปนแนวทาง และเปน ้ การเตรียมภาพขั้นตน ไวกอน • เตรียมภาพที่ตองการ และเปดไวบนหนาตางการทํางานของ Adobe Photoshop  • ขยายหนาตางภาพ ใหเห็นพืนที่วางรอบภาพ ้  • เปดแถบบรรทัด ดวยคําสั่ง View, Rulers • เลือกเครื่องมือ Move Tool • นําเมาสไปชีในแถบไมบรรทัด คลิกปุมเมาสคางไว แลวลากเมาส (กรณีที่ชที่บรรทัดแนวนอน ก็ ้  ี้ ใหลากเมาสลงมา และกรณีทชี้ในไมบรรทัดแนวตั้ง ก็ใหลากเมาสไปดานขวา) จะปรากฏเสนนํา ี่ สายตา (Guide Line : มักเปนสีนําเงิน) ้ • เลื่อนเสนนําสายตา ไปยังตําแหนงที่เหมาะสมของภาพ แลวปลอยนิ้วจากเมาส เพื่อยืนยัน ตําแหนง ทําซ้าจนไดครบทุกตําแหนง ํ • ถาตองการปรับตําแหนงของเสนนําสายตา ที่วางไวแลว ใหนาเมาสไปชีที่เสนนั้นๆ จะพบวา ํ ้ Mouse Pointer มีรูปรางเปนลูกศรสองหัว ใหกดปุมเมาสคางไว แลวปรับตําแหนง
    • 101 • ถาตองการลบเสนนําสายตาเสนใด ใหนําเมาสลากเสนนําสายตาเสนทีตองการ ไปปลอยในแถบ ่ ไมบรรทัด • หากตองการลบเสนนําสายตาทุกเสน ใหเลือกคําสั่ง View, Clear Guides • ตรวจสอบวาภาพมีการกําหนดเปน Layer หรือไม หากเปน Layer จะตองรวม Layer กอน ดวย คําสั่ง Layer, Flatten Image • เปลี่ยนเครื่องมือเปน Selection Tools ที่ตองการ กําหนดพื้นที่รอบกรอบที่กาหนดไว ทีละกรอบ ํ • เลือกเครื่องมือ Slice ตัดชิ้นภาพทีละชิ้น จนครบทุกชิ้น o ถาผิดยกเลิกดวยการกดปุม = หรือเลือกคําสั่ง View, Clear Slices • บันทึกเปนไฟลดวยคําสั่ง File, Save for Web โปรแกรมจะสรางไฟลภาพตามจํานวนชิ้นภาพให โดยอัตโนมัติ Interfaces Design กรอบเมนู • สรางชิ้นงานใหมขนาด 150 x 300 pixels • สรางเลเยอรใหม วาด Selection สี่เหลียม ทําใหมุมบนดวยคําสั่ง, Smooth เติมสีและใส Effect ่ • ปรับรูปทรงดวยเทคนิคการบิดภาพ เลือกคําสัง Edit, Transform, Distort ่ • สรางเลเยอรใหม ใชเครื่องมือ Marquee แนวนอน 1 pixel สราง Selection เติมสีและ Effect เพื่อทําเปนเสนคั่นเมนู • คัดลอกเลเยอรเสนคั่น แลวปรับตําแหนงเสนคั่นใหเหมาะสม • พิมพรายการเมนู วงแหวน • สรางงานใหมขนาด 300 x 300 pixels • สรางเลเยอรใหม ตั้งชื่อเปน Original วาดวงกลม เติมสี วาดวงกลมขนาดเล็กกวาเลื่อนไปอยูริม ดานใดดานหนึง แลวกดปุม = เพื่อลบใหเปนวงแหวน ่
    • 102 • ยกเลิก Selection คัดลอกเปนอีกหนึ่งเลเยอร ตั้งชื่อเปน GRing • ทํางานในเลเยอร GRing สราง Selection แบบวงรี เลื่อนไปขอบวงรีดานขวา แลว = ทําซ้ํา ตามตัวอยาง • ยกเลิก Selection เติม Effect แบบ Glass Color Animation • เรียกโปรแกรม Adobe ImageReady • สรางไฟลใหมขนาด 400 * 400 pixels กําหนดพื้นดวยสีทตองการ ี่ • สรางเลเยอรใหม 1 เลเยอรแลววาดรูปทรง พรอมเติมสีทตองการ ี่
    • 103 • คัดลอกเลเยอร แลวเปลี่ยนสีรปทรงเปนอีกสี ู • เปดบัตรรายการ Animation ดวยคําสั่ง Window, Show Animation • กรอบที่ปรากฏในบัตรรายการ Animation เรียกวา เฟรม (Frame) ซึ่งทําหนาที่กําหนดการเสนอ ผลงาน • เฟรมแรกกําหนดใหแสดงผลรูปทรงชิ้นแรก จากตัวอยางคือวงกลมสีแดง ดังนั้นจะตองปดเลเยอร วงกลมสีน้ําเงิน • สรางเฟรมที่ 2 โดยคลิกปุม Duplicate Current Frame แลวกําหนดใหแสดงวงกลมสีน้ําเงิน
    • 104 • สรางเฟรมเชื่อมตอการเปลี่ยนแปลงระหวาางเฟรมวงกลมสีแดง กับวงกลมสีน้ําเงิน โดยนําเมาส กลับมาคลิกที่เฟรมวงกลมสีแดง • คลิกปุม Animation Control ซึ่งปรากฏที่มุมบนขวาของบัตรรายการ Animation • เลือกคําสั่ง Tween... ปรากฏกรอบทํางานดังนี้ • ปอนคาตัวเลขในรายการ Frames to Add เพื่อกําหนดจํานวนเฟรม ที่ตองการใหเกิดการเชื่อมตอ ระหวางเฟรมแรก กับเฟรมทีสอง ยิ่งจํานวนเฟรมมากเทาไร ภาพก็จะเคลื่อนที่หรือเปลี่ยนแปลง ่ ชาไปดวย แลวคลิกปุม OK • ตรวจสอบการแสดงผลดวยเมนูคําสั่ง File, Preview in, Internet Explorer... • ถาตองการจัดเก็บ ใหเลือกคําสั่ง File, Save Optimized As... ซึ่งจะไดไฟล .gif ที่เปน ภาพเคลื่อนไหวสําหรับใชกับเอกสารเว็บตอไป Text Zoom • เรียกโปรแกรม Adobe ImageReady • สรางไฟลใหมกําหนดขนาดและพื้นสีตามที่ตองการ  • พิมพขอมูลที่ตองการ โดยกําหนดใหขนาดตัวอักษรใหโตมากๆ  • คัดลอกเลเยอร แลวยอขนาดตัวอักษรใหเล็กลงกวาเดิม • เปดบัตรรายการ Animation ดวยคําสั่ง Window, Show Animation • เฟรมแรกกําหนดใหแสดงผลขอความเลเยอรแรก • สรางเฟรมที่ 2 โดยคลิกปุม Duplicate Current Frame แลวกําหนดใหแสดงเฉพาะขอความเล เยอรที่ 2 • สรางเฟรมเชื่อมตอการเปลี่ยนแปลงระหวาางเฟรมแรกกับเฟรมทีสอง โดยนําเมาสกลับมาคลิกที่ ่ เฟรมแรก • คลิกปุม Animation Control ซึ่งปรากฏที่มุมบนขวาของบัตรรายการ Animation เลือกคําสั่ง Tween... • ปอนคาตัวเลขในรายการ Frames to Add เพื่อกําหนดจํานวนเฟรม ที่ตองการใหเกิดการเชื่อมตอ ระหวางเฟรมแรก กับเฟรมทีสอง ยิ่งจํานวนเฟรมมากเทาไร ภาพก็จะเคลื่อนที่หรือเปลี่ยนแปลง ่ ชาไปดวย แลวคลิกปุม OK • ตรวจสอบการแสดงผลดวยเมนูคําสั่ง File, Preview in, Internet Explorer... • ถาตองการจัดเก็บ ใหเลือกคําสั่ง File, Save Optimized As... ซึ่งจะไดไฟล .gif ที่เปน ภาพเคลื่อนไหวสําหรับใชกับเอกสารเว็บตอไป