web graphic with adobe photoshop

108
สารบัญ บทที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

Upload: boonlert-aroonpiboon

Post on 22-Nov-2014

8.933 views

Category:

Education


4 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Web Graphic with Adobe Photoshop

สารบญ

บทท 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

Page 2: Web Graphic with Adobe Photoshop

การจดเกบภาพ (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

Page 3: Web Graphic with Adobe Photoshop

เครองมอปรบแตงภาพ .........................................................................................................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

Page 4: Web Graphic with Adobe Photoshop

ลายนา..........................................................................................................................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

Page 5: Web Graphic with Adobe Photoshop

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)

Page 6: Web Graphic with Adobe Photoshop

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) การแสดงสทตองการ มกจะเปนสพน เพอใหสทเลอกโปรงใส และแสดงผลตามสพนของเบราวเซอร

Page 7: Web Graphic with Adobe Photoshop

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 คอภาพถาย ภาพทวาดดวยดนสอส ถายส หรอระบายดวยสนา และภาพอนๆ ทมการเปลยนแปลงระหวางส

Page 8: Web Graphic with Adobe Photoshop

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) ซงกคอ จานวนพกเซลทแนนอนในการแสดงภาพ ดงนนเมอมการขยายภาพ จะเกดปญหาคอ เหนเปนกรอบสเหลยมเลกๆ หลายๆ จด ประกอบกน เพราะกรดของภาพมขนาดทแนนอนนนเอง

Page 9: Web Graphic with Adobe Photoshop

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 เปนตน

Page 10: Web Graphic with Adobe Photoshop

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) เมอมการนาภาพไปใชในลกษณะตางๆ จงควรมการเตรยมภาพใหเหมาะสมกบรปแบบการนาเสนอ เพอใหการแสดงผลสามารถแสดงไดรวดเรว, การเกบบนทกประหยดพนทของสอบนทก

Page 11: Web Graphic with Adobe Photoshop

7

มาตรฐานรปแบบการนาเสนอภาพ ภาพ

ตนฉบบ ภาพ สอ

สงพมพ

ภาพสาหรบ Digital Archive

Presentation Database Website Preview

Format JPEG, TIFF

TIFF JPEG JPEG JPEG PNG, JPEG, GIF

PNG, JPEG, GIF

Resolution Up to 350 dpi

Up to 350 dpi

72 dpi 72 dpi 72 dpi 72 dpi 72 dpi

Size Up to 1840 × 1232 pixels

Up to 1840 × 1232 pixels

Up to 1024 ×

768 pixels

Up to 1024 × 768

pixels

≈ 300 × 250 pixels

≈ 300 × 250

pixels

≈ 100 × 100

pixels

From Digital Camera, Scanner

Image Editor

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 การตงชอโฟลเดอรสาหรบแยกประเภทของภาพตามรปแบบการใชงาน

Page 12: Web Graphic with Adobe Photoshop

8

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

การสรางภาพนอกจากใชภาพทมอยเดม หรอการสรางใหมดวยโปรแกรมกราฟก ยงสามารถเตรยม

ภาพจากแหลงขอมลอนไดเชน ภาพถายทผานเครองกราดภาพ (Scanner) หรอภาพจากกลองถายภาพระบบดจทล (Digital Camera)

ภาพถกใจกบ Scanner “วนปใหมไปเทยวภาคเหนอ ถายภาพสวยๆ มาเยอะมาก วนเกดปน รวมกลมกบเพอนชมบรรยากาศ

รมนา ไดภาพนาประทบใจ วนลอยกระทง กระทงลอยเปนสายสวยสด เกบบนทกไวในภาพถายเรยบรอยแลว” ภาพสวยๆ ตางๆ เหลานอยากเผยแพรผานเครอขายอนเทอรเนต ไมใชเรองยาก ดวยความสามารถของอปกรณทชอ “สแกนเนอร (Scanner)” ทาใหการเปลยนภาพถายเปนภาพดจทล เปนเรองงายเหมอนปอกกลวยเขาปาก

สแกนเนอร เปนอปกรณตอเชอมคอมพวเตอรแบบกราฟก ทมหนาทในการเปลยนแปลงภาพตนฉบบ (รปถาย ตวอกษรบนหนากระดาษ ภาพวาด) ใหเปนขอมลดจทล เพอใหคอมพวเตอรสามารถนาขอมลดงกลาวมาใชประโยชนในการแสดงผลทหนาจอ ทาใหสามารถแกไข ตกแตงเพมเตม และจดเกบขอมลได ในปจจบนสแกนเนอรแบงได 2 รปแบบคอ

• แบบใสกระดาษแลวกระดาษจะเลอนผานหวสแกนเอง เรยกวา Sheet - Fed Scanner

• แบบวางกระดาษแลวใหหวสแกนเลอนอานขอมลจากกระดาษ โดยกลไกการทางานคลายๆ กบเครองถายเอกสาร เรยกวา Flatbed Scanner

แมวาสแกนเนอรจะมหลากหลายรน หลากหลายยหอ แตการใชงานไมแตกตางกนมากนก ความรในการใชสแกนเนอรรนหนง กสามารถนาไปประยกตใชกบรนอน ยหออนไดเชนกน โดยมหลกการสแกนพนฐานดงน

• เลอกโหมดภาพทเหมาะสม – โดยปกตสแกนเนอรจะตรวจสอบประเภทของขอมลทจะสแกนโดยอตโนมต ดงนนหากนาเอกสารเนอหาหนงสอไปสแกน โปรแกรมจะกาหนดโหมดเปนขาวดา หรอลายเสน แตถานาภาพถายไปสแกน กจะใชโหมดส อยางไรกตามผใชกสามารถกาหนดหรอเปลยนแปลงโหมดใหเหมาะสมกบการใชงานไดเชนกน

• กาหนดความละเอยดใหเหมาะสมกบลกษณะการนาไปใชงาน – ความละเอยดของภาพ หรอ Resolution ไมควรกาหนดไวสงเกนไป โดยเฉพาะถาตองการนามาใชงานกบเวบเพจ เพราะทาใหเสยเวลาสแกนนานเกนไป รวมทงเสยพนทในการจดเกบภาพ

• กาหนดขนาดของภาพใหเหมาะสม - ขนาดของภาพ (Size) สาหรบการทาเวบ ควรกาหนดใหเทากบภาพตนฉบบ เพอไมใหเกดปญหาภาพเบลอในขนตอนการตกแตงดวยโปรแกรมแตงภาพ

หลกการสแกนภาพ 1. เตรยมภาพตนฉบบ ไดทงขอความ, ภาพขาวดา และภาพส (สแกนเนอรบางรนสามารถ

สแกนวตถ 3 มตได เชน กระปอง, นาฬกา ฯลฯ 2. เรยกโปรแกรมสแกนภาพ ตวอยางโปรแกรมสแกนของสแกนเนอรรน Lexmark X1100

Page 13: Web Graphic with Adobe Photoshop

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 แลวใชชองมองภาพในการถายภาพแทน

• ไมควรถายภาพในสถานททมแสงจามาก

Page 14: Web Graphic with Adobe Photoshop

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

• เรยกหนาจอทตองการจบภาพ

Page 15: Web Graphic with Adobe Photoshop

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 เปนตน

Page 16: Web Graphic with Adobe Photoshop

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 ตองการสงพมพผลลพธออกทางเครองพมพ

Page 17: Web Graphic with Adobe Photoshop

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 มาวาง

โปรแกรมทถกยอ

Page 18: Web Graphic with Adobe Photoshop

14

การเซฟภาพ (Save) จากหนาเวบเพจ

รปภาพทปรากฏในหนาจอเวบไมวาจะผาน Netscape หรอ IE ม 2 ลกษณะคอ

• รปภาพทเปนภาพชนๆ ทเรยกวา Clipart

• รปภาพทนามาใชแสดงผลเปนพนของเวบ ทเรยกวา Background

ดงนนหากตองการจดเกบภาพจาก Internet เพอนามาใชงาน จะตองพจารณาวา ตองการเกบภาพลกษณะอยางไร โดยมวธการจดเกบทแตกตางกน

รปภาพทเปนภาพชนๆ ทเรยกวา Clipart

• เขาสเวบทตองการ

• นาเมาสไปช ณ รปภาพทตองการ

• คลกปมขวาของเมาส แลวเลอกคาสง Save image as

• กาหนดไดรฟและโฟลเดอรทตองการจดเกบภาพ จากกรอบโตตอบ Save as:

รปภาพทนามาใชแสดงผลเปนพนของเวบ ทเรยกวา Background

• เขาสเวบทตองการ

• นาเมาสไปช ณ พนทวางๆ ของพนเวบ นอกพนทแสดงรปภาพ

• คลกปมขวาของเมาส จะสงเกตไดวาเมนคาสงเปลยนไป มคาสงนอยกวา และม

• จดสงเกตทคาสง Save background as :

• เลอกคาสง Save background as :

• กาหนดไดรฟและโฟลเดอรทตองการจดเกบภาพ จากกรอบโตตอบ Save as:

Page 19: Web Graphic with Adobe Photoshop

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 ปรบเปลยนคาตวเลอกจาก

รายการ

Page 20: Web Graphic with Adobe Photoshop

16

แสดงภาพ 1 ภาพตอ 1 จอ

o เลอกเมนคาสง File, Open

o เลอกไดรฟ, โฟลเดอร และภาพทตองการเปดแสดง

o เมอคลกปม Open จะปรากฏภาพ ดงน

o ปมควบคมการทางาน

• ซมภาพ

• เลอนดภาพกอนหนา/ภาพถดไป (สามารถใชปม FO หรอFN)

o กรณเลอนดภาพถดไป หรอภาพกอนหนา ขนาดภาพปรบเปลยน เชน ใหญเกนไป หรอเลกไป สามารถควบคมขนาดของภาพไดโดย

ปรบขนาดจอภาพใหเหมาะสม

ปรบภาพโดยการซมใหพอดกบขนาดจอภาพ

เลอกคาสง View, Lock Zoom

Page 21: Web Graphic with Adobe Photoshop

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

เลอกไดรฟ และโฟลเดอร

แสดงภาพตวอยาง

Page 22: Web Graphic with Adobe Photoshop

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 เปนตน

Page 23: Web Graphic with Adobe Photoshop

19

สรางคลงภาพสาหรบนาเสนอบนเวบ

การสรางคลงภาพจากภาพจานวนมาก เพอนาเสนอบนเวบ โปรแกรม IrfanView สามารถชวยไดดงน

• ทางานในโหมด Thumbnail

• เลอกภาพทตองการแสดง

• สรางคลงภาพดวยคาสง File, Save selected thumb as HTML files

• กาหนดชอไฟลแรกของระบบ จากรายการ Main HTML file name: (แนะนาใหใช index.html)

• เลอกโฟลเดอรปลายทางสาหรบเกบคลงภาพ จากรายการ Destination folder

• ระบชอกากบไฟล HTML จากรายการ Page title:

• กาหนดจานวนภาพตอแถว ไดจากรายการ Columns

• คลกปม Export โปรแกรมจะสรางคลงภาพระบบเวบไวในโฟลเดอรทระบ

Page 24: Web Graphic with Adobe Photoshop

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 แถบสถานะการทางานตางๆ

Page 25: Web Graphic with Adobe Photoshop

21

แถบชอเรอง (Title Bar)

แถบชอเรอง เปนสวนประกอบเลกๆ แตมความสาคญมาก ภายในแถบนจะแสดงขอมลสาคญเกยวกบภาพหลายขอมล

จากตวอยาง จะแสดงใหทราบวา

• ภาพทกาลงใชงานชอไฟลภาพ Palm Tree.TIF

• ฟอรแมตของภาพคอ TIF

• โหมดภาพคอ CMYK แสดงใหทราบวาเปนภาพทเหมาะสาหรบการนาไปสงพมพ

• ขณะนภาพถกยอขนาดลงเหลอ 66.7%

นอกจากนแถบชอเรองยงมประโยชนตอการควบคมหนาตางภาพ โดย

• การนาเมาสไปชท Title bar แลว Drag & Drag จะเปนการยายหนาตางภาพ

• การดบเบลคลกท Title Bar จะเปนการขยายหนาตางภาพใหเตมจอภาพ

แถบเครองมอ

แถบเครองมอ ประกอบดวยเครองหมายในการจดการภาพมากมายหลายชน และมบางชนทมเครองมอยอยซอนอย การสรางงาน ออกแบบงานกราฟก จะตองเกยวของกบเครองมอตางๆ ตลอดเวลา

ยายตาแหนงโดย Drag & Drop ทแถบส

เปด/ปดแถบเครองมอจากคาสง Window, Tools

เครองมอทมสญลกษณสามเหลยมกากบมมลางขวา เชน เมอคลกคางไว จะปรากฏเครองมอทซอนไว

หรอจะใชเทคนคการกดปม A แลวคลกสลบไปทละเครองมอกได

Page 26: Web Graphic with Adobe Photoshop

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

Page 27: Web Graphic with Adobe Photoshop

23

Palettes Palettes เปนหนาตางเลกทแสดงรายละเอยดของงานตางๆ เชน Layer ควบคมชนงาน (เลเยอร)

Navigator ควบคมมมมองหนาตางงาน เปนตน

การควบคม Palette ใชหลกการเดยวกบการควบคมหนาตางทวไป ดงนนจงสามารถปด, ยอ, ยายตาแหนง และปรบขนาดของ Palette ไดตลอดเวลาทใชงาน และหาก Palette ใด ไมไดใชงานกควรปดไปกอน เพอเพมพนทใหการทางาน การเปด/ปด Palette ใชเมนคาสง Window แลวคลกเลอก Palette ทตองการเปดใชงาน (เลอกไดตงแตรายการ File Browser เปนตนไป) และสามารถซอน Palette แบบชวคราวโดยการกดปม ST (รวมถงแถบเครองมอ และ Option Bar)

โดยคาตดตง (Default) Palette ชดเดยวกน หรอสมพนธกน จะถกกาหนดใหแสดงบนชด Palette เดยวกนในลกษณะ Tab Sheet แตกสามารถแยกออกจากชดได โดยใชหลกการ Drag & Drop

Palettes ทแยกออกมาจากชด สามารถคนกลบไดโดยการลากกลบสชดเดม หรอคลกเลอกคาสง Window, Workspace, Reset Palette Locations นอกจากนยงสามารถยาย Palettes ตางๆ ไปใสไวใน Palette Well ซงเปนสวนควบคม Palette ทจะปรากฏเมอใชงานบนจอภาพทมความละเอยดมากกวา 800 x 600 pixels โดยจะปรากฏทมมบนขวาของ Workspace

ใชแถบส Drag & Drop เพอยายตาแหนง Palette

คลกเพอปด

Drag & Drop เพอยอ/ขยาย

คลกเพอยบขนาด

Page 28: Web Graphic with Adobe Photoshop

24

Palette แตละชน จะมคาสงยอยสาหรบควบคมการทางานเฉพาะ ซงสามารถเปดคาสงยอยแตละ Palette ไดโดยคลกทปม Palette Control Menu ซงแสดงดวยสญลกษณ มมบนขวาของ Palettes

คาสงของ Channels คาสงของ Layers

หนวยวด

การออกแบบงานกราฟกสาหรบเวบ จาเปนตองคานงถงขนาดของภาพทเหมาะสมตอการไปแสดงผลบนหนาเวบ หากใชภาพขนาดใหญเกนไป อาจจะทาใหไมไดสดสวนทพอเหมาะกบพนทของหนาเวบ หรออาจจะเกดปญหาการเลอนจอภาพ และหากเลกเกนไปกอาจจะทาใหภาพไมสดใส สวยงาม การกาหนดขนาดของภาพกราฟกจงเปนสวนสาคญกอนสรางชนงาน

ขนาดของภาพกราฟก สมพนธกบมาตราหนวยวด ปกตโปรแกรม Adobe PhotoShop จะกาหนดคาหนวยวดเปน “เซนตเมตร” แตสาหรบงานออกแบบกราฟกสาหรบเวบจะใชมาตราหนวยวดเปน Pixel จงควรปรบแตงคาหนวยวดกอนใชงานโปรแกรม โดยเลอกคาสง Edit, Preferences, General, Units & Rulers

ภาษาไทยกบ PhotoShop

PhotoShop มปญหาการพมพภาษาไทยกรณทเลอกใชฟอนตทตดตงมากบระบบปฏบตการ Windows ดงนนกอนใชงาน PhotoShop จะตองทาการตดตงฟอนตเฉพาะ ดงน

• เลอกคาสง Start, Settings, Control Panel

• ดบเบลคลกท Fonts

• เลอกคาสง Install New Fonts

• เลอกไดรฟ และโฟลเดอรเกบไฟลฟอนต แลวคลกปม Install

ดาวนโหลดฟอนตภาษาไทยไดจากเวบ www.nectec.or.th/courseware

คาทตองปรบเปลยนเปน Pixels

Page 29: Web Graphic with Adobe Photoshop

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

Page 30: Web Graphic with Adobe Photoshop

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

Page 31: Web Graphic with Adobe Photoshop

27

จดเกบภาพ (Save File)

การบนทกภาพ หรอจดเกบภาพมขอพจารณา 2 ประเดนคอ การบนทกภาพตนฉบบ มสวนขยายเปน .psd ซงภาพลกษณะนจะยงคงชนของเลเยอรไวดงเดม และการบนทกภาพเพอนาไปใชงาน โดยโปรแกรมจะรวมเลเยอรทมทงหมดเปนชนเดยว คอชน Background

ไฟลภาพตนฉบบ .psd จะมชนเลเยอรครบทกชน

ไฟลภาพสาหรบใชงาน .jpg มลกษณะเหมอนภาพตนฉบบ แตจะมชนเลเยอรเพยงชนเดยว

การจดเกบภาพ (Save File) สาหรบภาพตนฉบบ

• เลอกคาสง File, Save สาหรบการจดเกบงานครงแรก หรอ File, Save as สาหรบการจดเกบงานครงทสองและตองการเปลยนชอไฟลภาพ

• ปรากฏจอภาพโตตอบการทางานดงน

Page 32: Web Graphic with Adobe Photoshop

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 เพอยนยนการจดเกบภาพ

• กรณทภาพนนๆ มหลายเลเยอรจะปรากฏกรอบโตตอบการรวมเลเยอร

Page 33: Web Graphic with Adobe Photoshop

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 กอน

Page 34: Web Graphic with Adobe Photoshop

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

Page 35: Web Graphic with Adobe Photoshop

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

ปรบเปลยนฟอรแมตภาพ

Page 36: Web Graphic with Adobe Photoshop

32

• เลอกโหมดการแสดงจากแถบเครองมอ

ลาดบขนตอนสาคญการออกแบบงานกราฟก

การออกแบบงานกราฟกสาหรบเวบ มทงการนาภาพทมอยแลวมาปรบแตง และการเรมตนสรางงานใหม โดยแตละรปแบบมลาดบการทางานทแตกตางกนเลกนอย เพอใหไดชนงานทเหมาะสมตอการนาเสนอบนเวบทสด

เปดไฟลภาพ

คาสง Filter เลอกไดครบ?

ไม Mode ภาพเปน CMYK?

เลอก Image, Mode, RGB color

เลอกคาสง Image, Mode, 8 Bits/Channel

ใช ใช

ไม

เลอก Image, Image Size

Resolution = 72pixels/inch?

ไม แกไขคา Resolution เปน 72 pixels/inch

ใช

ปรบแตง แกไขชนงาน

คาสง Filter เลอกไดครบ?

ไม

ใช

มมมองปกต

มมมองเตมจอภาพ และม Menu

มมมองเตมจอภาพ ไมม Menu

Page 37: Web Graphic with Adobe Photoshop

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 กอน

Page 38: Web Graphic with Adobe Photoshop

34

บทท 5 File Browser

File Browser ฟงกชนเลกๆ ของ PhotoShop ทาหนาทแสดงภาพในคอมพวเตอรแบบ Thumbnail คลายๆ กบโปรแกรม IrfanView หรอ ACDSee สามารถเปดใชไดโดยเลอกคาสง File, Browse หรอคลกทปม Browser บน Palette Well

กรณทจอภาพมขนาดเลกกวา 800 x 600 pixels จะไมม Palette Well และหนาตางการทางานของ File Browser จะแสดงผลในรปแบบของหนาตางงาน

แสดงรายละเอยดโฟลเดอร และไฟล

ภาพตวอยาง

ภาพทเลอก

รายละเอยดของภาพ (Metadata)

Control Menu

ปมเรยก File Browser บน Palette Well

Page 39: Web Graphic with Adobe Photoshop

35

เปดไฟล

การเปดไฟลผาน File Browser ทาไดโดยดบเบลคลกทภาพ หรอลากภาพมาวางบน Workspace ของ PhotoShop

ลบไฟล

ลบไฟลภาพผาน File Browser มวธการรวดเรวคอเลอกภาพ แลวกดปม = หรอคลกปม Delete File บน Status bar ของ File Browser

หมนภาพ

ภาพทแสดงใน File Browser สามารถหมนภาพไดงายดวยปม Rotate ภาพจะหมน 90 องศาในแนวตามเขมนาฬกา และหากกดปม A คางไว แลวคลกปม Rotate จะหมนภาพ 90 องศาในแนวทวนเขมนาฬกา

การหมนภาพทามม 180 องศาสามารถเลอกไดจากคาสงใน Control Menu

เลอกภาพไดหลายๆ ภาพโดยใชปม S หรอ

C

คลกปม Delete File

เลอกภาพไดหลายๆ ภาพโดยใชปม S หรอ

C

คลกปม Rotate

Page 40: Web Graphic with Adobe Photoshop

36

เปลยนชอไฟลภาพ

คาสงเปลยนชอไฟล (Rename) ใชหลกการลกษณะเดยวกบการลบไฟล โดยเลอกไฟลแลวกดปม @ เพอเปลยนชอไฟล แตมจดเดนทสามารถเปลยนขอไฟลไดพรอมๆ กนหลายไฟล ดวยวธการดงน

• เลอกไฟล

• กดปม Control Menu เลอกคาสง Batch Rename…

ตวอยางรปแบบของการระบชอไฟลใหม รปแบบทเลอก ความหมาย Document Name + extension ใชชอไฟลเดม แตใหตวอกษรตวแรกเปนตวพมพใหญ

ตามดวยนามสกลเปนตวพมพเลกทงหมด document name + extension ใชชอไฟลเดม แตใหชอไฟลทกไฟล ทกตวอกษร

เปนตวพมพเลก เชนเดยวกบนามสกล 1 Digit Serial Number + Serial Letter (a, b, c,…) + extension

ใหเปลยนชอไฟลเดม เปนตวเลข 1 หลกผสมกบตวอกษรตวพมพเลก และนามสกลตวพมพเลก

การใหลาดบความสาคญของภาพ

ภาพแตละภาพสามารถกาหนดลาดบความสาคญ (Rank) ไดเพอสะดวกตอการจดหมวดหม หรอการสบคน โดยโปรแกรมใหคาลาดบความสาคญไดตงแต A – E การกาหนดคาลาดบความสาคญใหกบภาพ กระทาไดโดย

• เลอกภาพ สามารถเลอกหลายๆ ภาพ

• คลกปมขวาของเมาส แลวเลอก Rank ทตองการ

• แสดงภาพจากคา Rank

เลอกรปแบบการเปลยนชอ 1) เปลยนเฉพาะชอไฟล 2) เปลยนชอแลวยายไฟลไป

โฟลเดอรอน

เลอกรปแบบของชอไฟลใหม

Page 41: Web Graphic with Adobe Photoshop

37

บทท 6 ขอบเขตภาพ (Selection)

การเลอกภาพหรอสวนของภาพ (Selection)

การเลอกภาพหรอสวนของภาพ นบเปนงานหลกของการปรบแตงภาพ หรอสรางภาพ โปรแกรมเตรยมเครองมอเลอกภาพ โดยแบงเปนชดไดดงน

• ชดกาหนดขอบเขตดวยรปทรง เลอกจากเครองมอ Marquee

• ชดกาหนดขอบเขตรปทรงอสระ เลอกจากเครองมอ Lasso

• ชดกาหนดขอบเขตจากคาส เลอกจากเครองมอ Magic Wand

การสรางขอบเขตดวย Selection มประโยชนมาก เนองจากสามารถนาไปประยกตใชไดทงการปรบแตงแกไขภาพ การสรางภาพ เชน ตดภาพ หรอสรางปม กรอบภาพลกษณะตางๆ

เครองมอ Marquee

• คลกเลอกเครองมอ หรอกดปมเมาสคางไวทเครองมอ แลวคลกเลอกเครองมอยอยทตองการ

• นาเมาสมาชทตาแหนงเรมตนของขอบเขต กดปมเมาสคางไว แลวลากเมาสกาหนดขอบเขต

เมอไดขนาดทตองการกปลอยนวจากเมาส

• ขณะสราง Selection ถากดปม S คางไว จะเปนการสราง Selection สเหลยมจตรส หรอวงกลมแทจรง

• ขณะสราง Selection ถากดปม A คางไว จะเปนการสราง Selection ทจดเรมตนเปนจดศนยกลาง ขนาดของ Selection จะขยายออกเทาๆ กนในทกทศทาง

• การสราง Selection ของภาพทงภาพ (เลอกทงหมด) ใชคยลด Ca

การยกเลก Selection

การยกเลก Selection ใหกดปม Cd หรอเลอกคาสง Selection, Deselect

ทศทางการลากเมาส ควรลากในแนวเฉยง

Page 42: Web Graphic with Adobe Photoshop

38

คากาหนดของ Marquee

เครองมอ Marquee มคาสงยอยบน Option Bar ซงมรายละเอยดดงน

• โหมดการสราง Selection

a. New selection สราง Selection ใหมทกครง โดยยกเลก Selection ทมอยเดม

b. Add to selection สราง Selection ใหมรวมกบ Selection ทมอยเดม (คยลดคอ S> ซงจะมประโยชนมากในการสรางรปทรงแปลกๆ

Selection เรมตน รปสเหลยม Selection รปสเหลยมชนทสอง ในโหมด Add

ผลลพธจากทปรากฏจากการเพม Selection นา Selection วงรมาผสม

โหมดการสราง Selection

คาความฟงของขอบ

รปแบบการสราง Selection

Page 43: Web Graphic with Adobe Photoshop

39

c. Subtract from selection สราง Selection โดยใชเทคนคการหกลบออกจาก Selection ทมอยเดม (คยลดคอ A)

d. Intersect with selection เทคนคการสราง Selection โดยใหปรากฏสวนทซากนของ Selection 2 ชนขนไป

• คาความฟงของขอบ (Feather) เปนคาสงทใชมากในการสรางขอบภาพใหมลกษณะฟง กลมกลนกบพนของภาพ ตวเลขทปอนยงมาก ขอบภาพกจะฟงมากไปดวย

ขอบภาพทไมมความฟง ขอบภาพทฟง

• รปแบบการสราง Selection โดยปกต Selection สามารถกาหนดขอบเขตไดอสระ แตกสามารถเลอกรปแบบได ดงน

a. Normal สราง Selection ไดอสระ

b. Fixed Aspect Ratio กาหนดขอบเขตทสมพนธกนระหวางความกวาง ความสง

c. Fixed Size กาหนดขอบเขตตายตว

Selection ทตองการ ใชงาน

Page 44: Web Graphic with Adobe Photoshop

40

เครองมอ Lasso

• คลกเลอกเครองมอ หรอกดปมเมาสคางไวทเครองมอ แลวคลกเลอกเครองมอยอยทตองการ

o Lasso สราง Selection รปทรงอสระ

• นาเมาสมาชทตาแหนงเรมตนของขอบเขต กดปมเมาสคางไว แลวลากเมาสกาหนดขอบเขต เมอไดขนาดทตองการกปลอยนวจากเมาส (หรอคลกเมาสเปนระยะๆ เพอใหไดขอบเขตทตองการ)

o Polygonal Lasso สราง Selection รปทรงเหลยมอสระ

• นาเมาสคลกทจดเรมตน แลวคลก ณ ตาแหนงอนๆ ทตองการไปเรอยๆ จนไดขอบเขตทตองการ

o Magnetic Lasso สราง Selection อตโนมตโดยใชคาแตกตางของส

• นาเมาสคลกทจดเรมตน แลวปลอยนว เมอลากเมาส โปรแกรมจะทาการสรางจดเชอมอตโนมต

• ตาแหนงทมความแตกตางของสนอยมาก สามารถใชการคลกเพมจดเพอชวยกาหนดขอบเขตได

• ยตการกาหนดขอบเขต ทาไดสองวธคอ o ดบเบลคลกทจดปลายทาง o นาเมาสกลบไปคลก ณ จดเรมตน

• Option Bar ของ Lasso มคาลกษณะเดยวกบ Option ของ Marquee

Page 45: Web Graphic with Adobe Photoshop

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 สเหลยมปกต ปรบใหขอบมความหนา

Page 46: Web Graphic with Adobe Photoshop

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 ทถกสลบไปเลอกพนทรอบดอกไมดอกกลาง

Page 47: Web Graphic with Adobe Photoshop

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

Page 48: Web Graphic with Adobe Photoshop

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

Page 49: Web Graphic with Adobe Photoshop

45

ภาพตนฉบบ หมนภาพ (Rotate) บดภาพใหเอยง (Skew)

บดภาพใหผดสดสวน (Distort) บดภาพแบบ Perspective

การยกเลกคาสงการทางาน (Undo)

การยกเลกคาสงทสงไปแลว สามารถใชคาสง Edit, Undo... หรอคยลด Cz ซงใหผลไดเฉพาะคาสงลาสดเทานน หากตองการยกเลกการใชคาสงทผานไปแลวหลายครงสามารถกระทาไดโดยเปด History palette แลวเลอกการยกเลกคาสงจาก History palette คาสงลาสด จะแสดงตอนทายของรายการ หากตองการยกเลก กเพยงแตนาเมาสไปคลก ณ รายการคาสงนนๆ (คาสงทอยในชวงถดลงไป กจะยกเลกไปดวย) หรอลากคาสงดานทายทไมตองการ ลงถงขยะกได

Page 50: Web Graphic with Adobe Photoshop

46

บทท 7 เลเยอร

รปภาพ 1 ภาพทมองเหน โดยความเปนจรงอาจจะประกอบดวยกราฟกชนยอยๆ หลายๆ ชนผสมผสานรวมกน งานกราฟกทมชนงานกราฟกหลายชนมารวมกนน PhotoShop มคาสงเลเยอรมาชวยควบคมเพอใหเกดความสะดวกในการปรบแตง แกไขเฉพาะชนงานทตองการ โดยไมมผลกระทบตอภาพทงภาพ การทางานของเลเยอรมลกษณะเดยวกบการใชเครองฉายแผนใส คงไมมใครเขยนภาพ หรอขอความลงบนกระจกเครองฉายแผนใส แตจะตองมแผนใสมาวางซอนขนไป เพอสรางชนงาน

Layer Palette

เลเยอรใน PhotoShop ถกควบคมดวย Layer Palette ซงเปด/ปดดวยคาสง Window, Layers และโปรแกรมอนญาตใหสรางชนเลเยอรควบคมงานไดถง 100 ชน (แตกขนกบหนวยความจาของคอมพวเตอร)

สรางเลเยอรใหม

กรณทสรางไฟลใหม จะมเลเยอรเรมตนคอ Background Layer และการสรางงานแตละชนควรสรางเลเยอรเฉพาะ โดยคลกทปม Create a new layer หรอเลอกคาสง Layer, New, Layer

โหมดการผสมผสาน (Blending Mode)

ความโปรงใส (Opacity)

Control Menu

Fill OpacityLock Tools

Layer Tools

Create a new layer

Page 51: Web Graphic with Adobe Photoshop

47

กรณทใชคาสงคดลอก หรอยายภาพ (Copy, Move) หรอใชเครองมอ Text Tools หรอ Shape Tools ในโหมด Shape Layer จะปรากฏชนเลเยอรใหมโดยอตโนมต และเลเยอรทถกสรางจะซอนทบจากเลเยอรปจจบนขนไป ดงนนควรระมดระวงการสรางเลเยอรใหด โดยตรวจสอบชนเลเยอรใหถกตอง มฉะนนเลเยอรใหม อาจจะถกภาพในชนเลเยอรเดมบง จนมองไมเหนผลการทางานกได

เลเยอรใหมจากไฟลภาพอน

กรณทตองนาภาพจากไฟลอนมาใชงานในไฟลปจจบน สามารถใชเครองมอ Move แลวลากเลเยอรภาพขามหนาตางงาน ซงโปรแกรมจะสรางเลเยอรใหมของภาพ ในชนงานใหมโดยอตโนมต

รปภาพมสองเลเยอร ขณะนกาลงทางานอยในเลเยอร After

ใชเครองมอ Text Tool พมพขอความ จะปรากฏเลเยอร

ตวอกษรซอนบนเลเยอร After โดยอตโนมต แตไมเหนขอความทพมพลงไป เพราะมเลเยอร before ซอนทบอยดานบน

ลากเลเยอรภาพอกไฟล ขามไปวางอกไฟล จะปรากฏชนเลเยอรของภาพ

โดยอตโนมต

Page 52: Web Graphic with Adobe Photoshop

48

เลอกเลเยอร

ภาพทมชนเลเยอรหลายชน คงสรางความสบสนไดวาเลเยอรไหน เปนของชนสวนภาพชนสวนใด แมวาเลเยอรจากเครองมอ Text tool จะปรากฏเปนขอความทพมพลงไป ซงชวยในการเลอกเลเยอร แตกแสดงผลเฉพาะการพมพขอความภาษาองกฤษ หรอตวเลขเทานน การแกไขภาพในเลเยอร จะตองรจกเทคนคการเลอกเลเยอร โดยมหลกพจารณา ดงน

• ถาตองการแกไขขอความจากเครองมอ Text Tool ใหสงเกตจากสญลกษณตว T กากบทเลเยอร เรยกวา Text Layer

• ถาชนเลเยอรมสญลกษณเปนรปแฟมสเหลอง แสดงวาเปนชดเลเยอร (Layer Set) จะตองคลกทปมสามเหลยม เพอแสดงรายละเอยดเลเยอรภายในชดเลเยอร

• ใชเทคนคการซอนเลเยอร โดยเลอกเลเยอร แลวคลกปม Hide Layer ทละเลเยอร เพอหาวา เลเยอรทตองการแกไข คอชนเลเยอรลาดบทเทาไร

เลเยอรตวอกษร (Text Layer) แสดงดวยสญลกษณ T

คลก เพอขยาย

คลกทสญลกษณ เพอซอน/แสดงเลเยอร

Page 53: Web Graphic with Adobe Photoshop

49

• ใชเทคนคการเลอกเครองมอ Move แลวนาเมาสไปช ณ ตาแหนงทตองการตรวจสอบบน Workspace แลวกดปมขวาของเมาส จะปรากฏชอชนเลเยอร เรยงตอกน ชนเลเยอรบนสด คอตาแหนงทเมาสชนนเอง ถาเปนเลเยอรทตองการเลอก ใหคลกปมซายทชอชนเลเยอร

ลบเลเยอร

เลเยอรใดทไมมการสรางชนงาน มความผดพลาด หรอไมมการทางานใดๆ ควรทาการลบเลเยอรออกไป เพอคนคาหนวยความจาใหกบระบบ โดย

• เลอกเลเยอร

• คลกทปม Delete Layer หรอเลอกคาสง Layer, Delete, Layer

ไมสามารถลบเลเยอร Background ได

ยายชนเลเยอร

ชนเลเยอรทซอนทบกน ควรทาการวางชนเลเยอรใหเปนระบบ ระเบยบ เพอสะดวกตอการแกไขในภายหนา การยายชนเลเยอรไดโดยการลากเลเยอรไปวาง ณ ตาแหนงใหมทตองการ หรอเลอกคาสง Layer, Arrange,…

ลอกเลเยอร

งานในเลเยอรบางชน อาจจะตองทาการลอกไว เพอปองกนการเลอนตาแหนง หรอลบ หรอแกไขโดยผดพลาด ซงทาไดโดย

• เลอกเลเยอร

• คลกปมรปกญแจ

Delete Layer แลวยนยนการลบ

Page 54: Web Graphic with Adobe Photoshop

50

เชอมเลเยอร

การเชอมเลเยอร เปนคาสงหนงทใชบอย โดยเฉพาะการยายภาพเลเยอรหลายๆ เลเยอรพรอมๆ กน หรอสรางชดเลเยอร

• เลอกเลเยอรชนแรก

• นาเมาสไปคลกในชอง Link เพอเชอมเลเยอร

• การยกเลกการเชอม ทาซาขนตอนเดม

รวมเลเยอร

การรวมเลเยอรจะชวยใหภาพทมชนเลเยอรจานวนมาก มกลมของเลเยอรทชดเจน แกไขไดงาย รวมทงการทางานกบภาพบางฟงกชน มความจาเปนตองรวมเลเยอรเปนชนเดยวกอนโดยคลกปม Control Menu แลวเลอกคาสง Flatten Image

กลมเลเยอร

• ทาการเชอมเลเยอรทสมพนธกน

• คลกปม Control Menu ของเลเยอร แลวเลอกคาสง New Set from Linked…

• กาหนดรายละเอยดเกยวกบกลมเลเยอร แลว OK

สญลกษณ แสดงการเชอมเลเยอร

Page 55: Web Graphic with Adobe Photoshop

51

บทท 8 ปรบแตงภาพ

ภาพทผานการสแกน หรอภาพจากแหลงอนๆ กอนนามาใชงาน จะตองปรบแตงสกอนเสมอ ดวยคาสง Image, Adjustment

การปรบความสวาง-มดของภาพ

Levels เปนการปรบความสวาง-มดของภาพ โดยการเตมสขาว-ดาลงไป ซงเราจะใชกราฟ Histogram ในการปรบระดบส

Auto Levels เปนการปรบความสวาง-มดของภาพ โดยอตโนมต ซงจะคานงถงระดบความสวางและมดของสในแตละ Channel

Auto Contrast เปนการปรบความสวาง-มดของภาพ โดยอตโนมต ซงจะคานงถงพนททสวางและมดของภาพ แลวปรบใหเหนความชดเจนมากยงขน

Curves เปนการปรบความสวาง-มดของภาพ คลายกบ Levels โดยการใชเสน Curves เปนตวกาหนด ซงจะเปนการเปรยบเทยบระหวางสเดมกบสใหม

Brightness/Contrast เปนการปรบคาความสวาง-มด และความแตกตางของสโดยรวม

สญลกษณควบคมสสวน Shadow สญลกษณควบคมสสวน Midtones สญลกษณควบคมสสวน Highlihgt

สญลกษณควบคมทง 3 สามารถเลอนปรบยายเพอควบคมความมด ความสวางของภาพ แลการกดปม A คางไว จะเปลยนปม Cancel เปน Reset ทาใหกลบไปทคาเรมตน

Page 56: Web Graphic with Adobe Photoshop

52

ตวอยางการปรบความมด/สวางของภาพ

นอกจากนยงมคาสง Equalize ซงเปนการกระจายคาความสวาง-มดของภาพ ใหมคาเทากน มกใชกบภาพสแกน

การดงสออก

ภาพทไดจากการสแกน หรอกลองถายภาพดจทล บางครงอาจจะเกดความไมสมดลของส เชน ม สเขยวในภาพมากเกนไป หรอมสฟามากเกนไป การแกไขขนตนสามารถใชคาสง Image, Adjustment, Auto Color โปรแกรมจะทาการตรวจสอบคาความสวาง ความมด และชวงสของภาพ แลวปรบสใหเหมาะสมกนทงภาพโดยอตโนมต

การดงสออก ยงหมายถง การดงสอนๆ นอกจากสขาว/ดา ออกจากภาพส เพอประโยชนในการแปลงภาพส เปนภาพขาวดา โดยทโหมดภาพยงคงเดม ดวยคาสง Image, Adjustments, Desaturate และคาสง Image, Adjustments, Threshold

นอกจากนยงสามารถปรบความสมดลของส เฉพาะสใด สหนงดวยคาสง Image, Adjustment, Color Balance แลวเลอกคาส CMYK หรอ RGB

Page 57: Web Graphic with Adobe Photoshop

53

ทงนการปรบความสมดลของส จะตองคานงถงวงลอส การปรบความสมดลของสจะใชหลกการเพมทอยในทศตรงขาม หรอลดสทอยรอบ เชน ตองการลดคาสมวง กสามารถใชเทคนคเพมสเขยว หรอลดสแดงและสนาเงน เปนตน

การปรบแตงโทนส

คาสง Image, Adjustments, Hue/Saturation เปนการปรบแตงโทนสโดยคานงถงพนฐาน การมองเหนของมนษยคอ Hue = คาความสะทอนแสง, Saturation = ความเขมขนของส, Brightness = ความสวาง-มด

รวมทงคาสง Image, Adjustments, Channel Mixer ซงเปนการปรบแตงโทนสแตละสโดยใชโหมดสเปนตวกาหนด เชน CMYK, RGB

การแทนทสในภาพดวยสใหม

คาสง Image, Adjustments, Replace Color ชวยในการเปลยนสภาพทเลอก

การกลบส

คาสง Image, Adjustments, Invert เปนการปรบสในภาพใหเปนสตรงขาม

ใสลกษณะพเศษของสใหกบภาพ คาสง Image, Adjustments, Posterize เปนคาสงชวยในการใสลกษณะพเศษเกยวกบสใหกบภาพ โดยอาศยคาความสวาง หรอระดบโทนส

สเขยว สเหลอง

สแดง

สมวง (บานเยน)สนาเงน

สฟา

Page 58: Web Graphic with Adobe Photoshop

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

Page 59: Web Graphic with Adobe Photoshop

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 ปรบเปลยนความเขมของส ใหนมนวล เหมอนนาฟองนาซบสออกจากภาพ

Page 60: Web Graphic with Adobe Photoshop

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 Files\Adobe\Photoshop 7.0\Plug-Ins

การยกเลกฟลเตอร

เมอสรางฟลเตอรใดๆ และตองการยกเลกใหกดปม Cz หรอเลอกจาก History Palette

Page 61: Web Graphic with Adobe Photoshop

57

บทท 10 Animations GIF

ภาพเคลอนไหว กคอชดลาดบของภาพนง เปนการนาภาพนงหลายๆ ภาพ มาลาดบกนอยางตอเนอง เพอใหปรากฏเปนการเคลอนไหวบนแผนระนาบ ซงกคอ จอภาพ, แผนกระดาษ และการมองเหนภาพเหลานเปนภาพเคลอนไหว กเพราะปรากฏการณ "ภาพตดตา" - Persistence of vision นนเอง

ปจจบนมการนาคอมพวเตอรมาใชเปนเครองมอสราง ลาดบภาพเคลอนไหว โดยการสรางภาพกราฟกทละภาพ (หรอเรยกวา "เฟรม") วตถแตละเฟรม มการเปลยนแปลงของ "ตวแปร" เชน ตาแหนงวตถ, ขนาด, การหมน, การแปลงรปราง, ส เปนตน ทละนอย การเปลยนแปลงของตวแปรเหลานน อาศย "หลกการประมาณคาในชวงระหวางภาพแรก กบภาพถดไป"

ดงนนการทาภาพเคลอนไหว เรมจากสรางภาพตนแบบทมการเปลยงแปลงของตวแปร ควรจะเปนภาพทมขนาดเทากนเพอใหเหนการเปลยนแปลงทด

GIF Animation เปนรปแบบหนงของภาพเคลอนไหว ซงเรมตนใชในการนาเสนอภาพผานเวบเพจ ใชหลกการสรางเชนเดยวกบการสรางภาพเคลอนไหวปกตทวไป คอ นาภาพนงหลายๆ ภาพมาเรยงลาดบ ดวยโปรแกรมเฉพาะ เชน Animagic Gif, Microsoft Gif Animator, PhotoImpact Gif Animator หรอ Corel Xara ซงชวยใหการสรางตวอกษรเคลอนไหวแบบสามมตกระทาไดยงสะดวก GIF Animation อาจจะเรยกอกชอวา GIF89 เนองจากเปนไฟลฟอรแมตหนงของ GIF Format

Page 62: Web Graphic with Adobe Photoshop

58

บทท 11 PhotoShop Action

PhotoShop Action คอการนาคาสงตางๆ ของ PhotoShop มาจดกลมรวมกน แลวบนทกเพอสะดวกในการเรยกใชงานในครงตอไป สามารถคดลอกเปนไฟล Action (.atn) แลวคดลอกไปใชกบคอมพวเตอรอนๆ ได การทางานของ Action จะถกควบคมดวย Action Palette

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

ชด Action (Action Set)

ชด Action ทเลอกใชงาน

Action

คาสงของ Action

Page 63: Web Graphic with Adobe Photoshop

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...

Page 64: Web Graphic with Adobe Photoshop

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 โปรแกรมบนทก

Page 65: Web Graphic with Adobe Photoshop

61

การตดตง Action • ดาวนโหลด PhotoShop Action จากเวบไซตทใหบรการ • บนทกไฟลไวในโฟลเดอรทตองการ เชน My Documents • เปดโปรแกรม Adobe PhotoShop 7.0 • เรยกใชงาน Action Panel ดวยคาสง Window, Actions • ปรากฏ Action Panel ดงน

• คลกปม Action Control Menu ซงปรากฏทมมดานขวาของแถบรายการ

• คลกเลอกรายการคาสง Load Actions… แลวคลกเลอกไฟล Action มสวนขยายเปน .atn จาก

โฟลเดอรทเตรยมไว

• ปรากฏรายการ Action พรอมฟงกชนยอยๆ

Page 66: Web Graphic with Adobe Photoshop

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 เพอยนยนการปอนรายการ จากนนบนทกไฟลซาลงในชอเดม

Page 67: Web Graphic with Adobe Photoshop

63

การคนรปภาพจาก Metadata รปภาพทปอนรายการกากบ Metadata โดยเฉพาะ Keyword สามารถนาขอความ Keyword ดงกลาวมาเปนคาคนคน เพอชวยในการคนหารปภาพ ทงนการคนคนรปภาพ กระทาไดโดย

• คลกปม • เลอกรายการคาสง Search, For Files or Folders…

• ปอนคาสาคญ (Keyword) ของรปภาพทตองการคน ในรายการ Containing text: แลวคลกปม

Search Now (หรออาจจะเลอกไดรฟ และโฟลเดอรหลกกอนกได) • โปรแกรมจะทาการคนหาไฟลตางๆ ทมคาตรงกบรายการ Containing text: และหากพบจะ

แสดงไฟลดงกลาวในหนาตาง Search Results

Page 68: Web Graphic with Adobe Photoshop

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 ดงน

คลกเลอก

Page 69: Web Graphic with Adobe Photoshop

65

• คลกเลอกรปทรงทตองการ

• นาเมาสมาวาดรปทรงทตองการในหนาตางงาน

• ปรบแตงดวย Effect ทตองการ

ปมเกลยวบด

• สรางชนงานใหม ขนาด 150 x 100 pixels

• สรางเลเยอรใหม สราง Selection สเหลยม ขนาดพอเหมาะ เตมสขาว

• เตม Effect ทตองการดวย Window, Style

• คดลอก Layer 1

• เปดแถบไมบรรทดดวยคาสง View, Rulers แลวสราง Guide line ดงตวอยาง

• ใชเครองมอ Polygonal Lasso สราง Selection รปสามเหลยมทมม ดงตวอยาง กดปม =

ทาซากบอกดาน

ลาก Layer 1 ทบไอคอน Create a New Layer

คลกเลอกรปทรง

Page 70: Web Graphic with Adobe Photoshop

66

• คลกเลอก เลเยอร 1 สราง Selection โดยกดปม C คางไว แลวคลกทชอ Layer 1

• สรางเลเยอรใหม เตมลายเสนดวยคาสง 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 เพอนาไปใชงานตอไป

กดปม C คางไว แลวคลกบนชอเลเยอร

Page 71: Web Graphic with Adobe Photoshop

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

Page 72: Web Graphic with Adobe Photoshop

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 ทสรางไวกอนหนา

Page 73: Web Graphic with Adobe Photoshop

69

o สาหรบใชกบหนาเวบ

นาไฟลทบนทกในฟอรแมต GIF ไปใช โดยใสเปน Image Background ของตารางหรอเซลล

เสนกราฟกจาก Brush

• สรางไฟลใหม สรางเลเยอรใหม

• เลอกเครองมอ Brush เปด Brush Palette ดวยคาสง Window, Brushes

• คลกรายการ Brush Tip Shape

• เลอกส Foreground Color

• นาเมาสไปชขอบซายของ Workspace กดปม S คางไวแลวลากเมาสไปดานขวา

• แตงดวย Effect ทตองการ

คลก Control Menu เลอกคาสง Small Thumbnail

เลอกรปแบบ Brush (Brush Presets)

คลกยกเลกทกรายการ

กาหนดคาระยะหางระหวาง Brush แตละชน ดตวอยางประกอบ

Page 74: Web Graphic with Adobe Photoshop

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 จากนนกกดปม = เพอลบ พนสขาวจะหายไปจากรปภาพ

Page 75: Web Graphic with Adobe Photoshop

71

เปลยนสพนของภาพ

ภาพตวอยางของ PhotoShop ชอ ducky.tif เดมมพนภาพเปนสขาว ตองการเปลยนเปนสใหม สามารถกระทาไดดงน

• เปดไฟลภาพ ducky.tif จากโฟลเดอร Samples

• การเปลยนสพนภาพจากสขาว เปนสใหม ตองทาขอบเขต (Selection) ใหกบพนภาพกอน วธการทรวดเรวในการทาขอบเขตสาหรบพนภาพคอ การใชเครองมอ Magic Wand คลกทพนภาพ เนองจากพนภาพมสเพยงสเดยว ดงนนโปรแกรมจะเลอกสขาวของพนภาพใหเปนขอบเขตโดยอตโนมต

• เลอกสใหมโดยคลกเลอกส ชองสมมบนซายจะเรยกวา Foreground Color และชองสมมลางขวาเรยกวา Background Color ทงนสามารถปรบเปลยนสโดยคลกในชองสใดกได

• ปรากฏชดสดงน

• การเลอกสกระทาไดโดย

เลอนเมาสในแถบเลอน เพอเลอกสทตองการ เลอนเมาสในแถบเฉดส เพอเลอกเฉดสทตองการ ตาแหนงแสดงสทเลอก เมอไดสทตองการใหคลกปม OK

• เลอกเมนคาสง Edit, Fill เพอเตมสทเลอกลงไปในขอบเขตทกาหนดไว ซงจะปรากฏหนาตางทางานดงน

• คลกเลอกรายการ Use: ใหตรงกบชองสทเลอกไวกอนหนาน สามารถปรบลดความเขมขนของส

ไดจากรายการ Opacity เมอไดคาทตองการใหกดปม OK โปรแกรมจะแทนทสพนภาพเดม (สขาว) ดวยสใหมทเลอกใหอตโนมต

• ปรบยอขนาดภาพใหเหมาะสม แลวบนทกดวยฟอรแมตทตองการ

Page 76: Web Graphic with Adobe Photoshop

72

ภาพเกาเปนภาพใหม

• เปดไฟลภาพตนฉบบ

• ตรวจสอบภาพจะตองอยในโหมด RGB ดวยคาสง Image, Mode, RGB Color • ใชเครองมอ Lasso สราง Selection รอบพนททตองการเปลยนแปลง กรณตวอยางคอพนท

ใบหนา

• เลอกเมนคาสง Select, Feather เพอทาใหขอบภาพมลกษณะนมนวล

• เลอกเมนคาสง Edit, Copy แลวตามดวย Edit, Paste ปรากฏชนเลเยอรใหม ลากเลเยอรใหมไปอยระดบบนสด

• เลอกเมนคาสง Image, Adjustment, Hue & Saturation คลกเลอกรายการ Colorize

• บนทกเพอใชงาน หรอทาซากบตาแหนงอนๆ

Page 77: Web Graphic with Adobe Photoshop

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 ชน โดยชนลางสดจะเปนชนเลเยอรพนภาพ และชนเหนอขนมาจะเปนชนเลเยอรของรปภาพ (เปด) ซงการทางานใดๆ จะตองคานงถงชนเลเยอรนตลอด เชน หากตองการเปลยนสพนจะตองคลกเลอกชนเลเยอรลางสดกอน จงจะใชคาสงเปลยนสได และหากตองการยอรปภาพ (ตวเปด) หรอยายตาแหนงรปภาพ จะตองคลกเลอกชนเลเยอรของรปภาพ (ชนเหนอขนมา) กอนเสมอเชนกน

Page 78: Web Graphic with Adobe Photoshop

74

• การสรางเงาใหมลกษณะเดยวกบภาพตนฉบบ จาเปนตองอาศยโครงรางของภาพตนฉบบมาเปน

แบบ แลวเตมสดาลงไป พรอมทงปรบใหความเบลอ แลวจดตาแหนงใหมลกษณะเปนเงาทมการทอดตว ซงมวธการดงน

• สรางขอบเขตรอบรปภาพ (ตวเปด) วธการสรางขอบเขตรปภาพอกวธทสะดวกและรวดเรวกรณแยกชนเลเยอร ไดแก การกดปม C คางไว แลวนาเมาสมาคลกทชอเลเยอรของชนเลเยอรทตองการสรางขอบเขต (ตวอยางใหคลกทชอ Layer 1) โปรแกรมจะสรางขอบเขตตามโครงรางของรปภาพใหโดยอตโนมต

• สรางเลเยอรใหม โดยคลกทปม Create a New Layer จาก Layer Palette

• เตมสดาลงไปในขอบเขตทสรางไว ดวยคาสง Edit, Fill... เลอกรายการ Use: เปน Black

• ทาใหเงาสดา มลกษณะนมและจาง ดวยคาสง Filter, Blur, Gaussian Blur โดยสามารถปรบคาความนมและจางของเงาจากคาตางๆ

• เพอใหมลกษณะทเปนเงา จงตองยายใหเงามาอยใตรปภาพ โดยการยายชนเลเยอรเงาไป

อยใตชนเลเยอรรป (เปด) ดวยวธการนาเมาสชทชอเลเยอรของเงา (Layer 2) กดปมเมาสคางไว แลวลากมาอยใตชนเลเยอรรปภาพ (Layer 1)

• คลกเลอกเลเยอรเงา (Layer 2) แลวเลอกเครองมอ Move เพอยายตาแหนงของเงาใหอย

ใตรปตนฉบบ เพอใหเกดเปนเงา

กดปม C คางไว แลวคลกทชอเลเยอร

Page 79: Web Graphic with Adobe Photoshop

75

• ปรบเงาใหมมตดวยคาสง Edit, Transform, Distort เมอไดลกษณะเงาทตองการจงกดปม E

เงาของวตถหลายชน

• เปดไฟลใหม สรางภาพโดยแยกเลเยอร (ตวอยางเปนภาพ 2 ชนทแยกเลเยอรกนและกน)

• สราง Selection ของภาพทงสองชน โดยกดปม C คางไวแลวนาเมาสไปคลกทชอเลเยอร

ของภาพท 1 จะปรากฏ Selection ของภาพท 1

• จากนนกดปม CS คางไว แลวนาเมาสไปคลกทชอเลเยอรของภาพท 2 เพอสราง Selection ของภาพท 2 ใหผสมรวมกบ Selection เดมของภาพท 1 ปรากฏเปน Selection รวมกน

• สรางเลเยอรใหม แลวเตมสดาลงไป ยายเลเยอรใหมไปอยใตเลเยอรภาพทงสองภาพ

• เลอกเครองมอ Move Tools ลากเงาสดาของเลเยอรเงา ใหเหลอมลากบภาพวตถเดม (ใชปม

ลกศรขนลงซายขวากได) เพยงเทานกจะไดภาพวตถทมเงารวมกน

Page 80: Web Graphic with Adobe Photoshop

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

Page 81: Web Graphic with Adobe Photoshop

77

• เลอกเมนคาสง Filter, Extract เพอเขาสโหมดเลอกภาพพเศษ

• คลกเลอกเครองมอ Edge Highlighter แลวนาเมาสมาลากผานรอบๆ ตวมา เพอสรางกรอบ

ในการเลอกภาพ ดงรป

• คลกเลอกเครองมอ Fill แลวนามาคลกทตวมา เพอเลอกใหคาสงมผลเฉพาะตวมา

• คลกปม Preview จะปรากฏตวมาทถกลบพนออกหมดแลว

• คลกปม OK เพอยนยนการตดพนของภาพ

แปลงภาพขาวดาเปนภาพสแบบ Sepia การทาใหภาพขาวดาเปนภาพส มหลายเทคนค ซงหากศกษาไดหลากหลาย จะชวยใหมแนวคดสราง

ภาพสจากภาพขาวดารปแบบแปลกใหมไดอกหลายลกษณะ

• เปดภาพไฟลทตองการ

• เปลยนโหมดของภาพเปน RGB Color ดวยคาสง Image, Mode, RGB Color

• เลอกเมนคาสง Image, Adjust, Hue/Saturation คลกเลอกรายการ Colorize

• ปรบคา Hue เพอใหไดสภาพตามตองการ

Page 82: Web Graphic with Adobe Photoshop

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 ทแตกตางกนออกไป

Page 83: Web Graphic with Adobe Photoshop

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 เพอกลบส

Page 84: Web Graphic with Adobe Photoshop

80

• เลอกคาสง Image, Adjustments, Level... เพอสรางเสนไฟฟาในอากาศ

• เลอกคาสง Image, Adjustments, Hue/Saturation แลวตงคาดงตวอยาง

• จะไดภาพดงน

ภาพลกษณะเคลอนไหว

• เปดไฟลภาพตนฉบบ หากภาพตนฉบบมลกษณะเปน Layer ใหรวมเลเยอรเปนชนเดยวกนดวยคาสง Layer, Flatten Image

• คดลอกภาพตนฉบบเปนอกเลเยอร

• เลอกเมนคาสง Filter, Blur, Radial Blur แลวตงคาตามตวอยาง เพอทาใหภาพมลกษณะการเคลอนท

• นาเมาสกลบไปคลกทเลเยอรชน Background เลอกเครองมอแบบวงกลม หรอสเหลยมตาม

ตองการ

• นาเมาสไปคลกเลอกตาแหนงภาพทตองการใหแสดงผลเดนชด

Page 85: Web Graphic with Adobe Photoshop

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 เพอดผล

Page 86: Web Graphic with Adobe Photoshop

82

ลายเสนแบบกราฟกสดใส

• เปดไฟลภาพใหม กาหนดขนาดตองการ

• ใชเครองมอ Brush ระบายสตางๆ ลงไปตามตองการ

• เลอกเมนคาสง Filter, Pixelate, Mezzotint กาหนดคา Type เปน Fine dots

• เลอกเมนคาสง Filter, Blur, Motion Blur แลวกาหนดคา Distance เพอใหไดผลตามทตองการ แลวคลกปม OK

เปลวไฟ

• เปดไฟลภาพใหม กาหนดขนาดตองการ

• สรางเลเยอรใหม วาดสเหลยมแนวตง กาหนดขนาดตามทตองการ

• เลอกเมนคาสง Edit, Transform, Skew แลวปรบใหเปนรปทรงสามเหลยม

• เลอกเมนคาสง Filter, Distort, Shear แลวปรบคาใหไดรปทรงตามตองการ จากนนคลกปม OK

• เตม Effect ทตองการ เพอนาไปใชงาน

Page 87: Web Graphic with Adobe Photoshop

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

Page 88: Web Graphic with Adobe Photoshop

84

วตถ 3 มต แมวา PhotoShop เปนโปรแกรมตกแตงภาพ แตอยางไรกตามยงมสวนฟงกชนทนาสนใจอกสวน ท

สามารถสรางภาพ 3 มตไดอยางรวดเรว โดยเฉพาะรปทรง 3 มต

• เปดไฟลใหม

• เลอกเมนคาสง Filter, Render, 3D Transform...

• เลอกเครองมอสรางรปทรง แลววาดรปทรงทตองการ

• ใชเครองมอ Trackball หมนวตถใหเกดเปนรปทรง 3 มตตามทตองการ

• เมอคลกปม Ok จะปรากฏภาพ 3 มต ดงน

ลกบอลกลมสามมต

• สรางไฟลกาหนดขนาดตามตองการ

• สรางเลเยอร แลววาดวงกลม

• เตมลายจดดวยคาสง Edit, Fill, Pattern เลอก Pattern ทสรางไวกอนน

• เลอกคาสง Filter, Distort, Spherize กาหนดลกษณะของลกบอลตามตองการ

Page 89: Web Graphic with Adobe Photoshop

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

Page 90: Web Graphic with Adobe Photoshop

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

Page 91: Web Graphic with Adobe Photoshop

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 ในเอกสารเวบ

Page 92: Web Graphic with Adobe Photoshop

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 แลวปรบคาตามตวอยาง (ปรบไดตามตองการ)

Page 93: Web Graphic with Adobe Photoshop

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 จงหวะ

Page 94: Web Graphic with Adobe Photoshop

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 เพอแปลงใหมพนเขม

Page 95: Web Graphic with Adobe Photoshop

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

• บนทกใชงานในรปแบบ Pattern หรอ File

ลวดลายแบบจด

• เปดไฟลใหม เตมสพนตามทตองการ

• เลอกบตรรายการ Channel แลวสราง Channel ใหม (จะไดชอ Alpha 1)

• สราง Selection รปทรงทตองการ แลวเตมสขาวลงไป จากนนยกเลก Selection พรอมทาขอบใหเบลอดวยคาสง Filter, Blur, Gaussian Blur

• เลอกคาสง Filter, Pixelate, Color Halftone เพอสรางจดของภาพ

• กลบมาทางานทบตรรายการ Layer โดยสรางเลเยอรใหม

คลก Control Menu เลอกรายการ Small Thumbnail เลอนหา Brush รปราง

สรางเลเยอรใหม เลอกส Foreground เปนสขาว นา Paintbrush ไปคลก เพอสรางดาวสดใส ณ ตาแหนง

ทตองการ

Page 96: Web Graphic with Adobe Photoshop

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

Page 97: Web Graphic with Adobe Photoshop

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

Page 98: Web Graphic with Adobe Photoshop

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 ลายเสนท

สรางไว

Page 99: Web Graphic with Adobe Photoshop

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

Page 100: Web Graphic with Adobe Photoshop

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 - สามารถกระทาไดโดย

• คลกเลอกเลเยอรของรปทรง

Page 101: Web Graphic with Adobe Photoshop

97

• คลกเลอกเครองมอ Path component selection แลวกาหนดขอบเขตใหกบรปทรงทตองการปรบแตง ซงจะปรากฏจดสเหลยมเลกๆ ณ จดทคลกเพอสรางรปทรง เรยกวา Anchor Point

• เลอกเครองมอ Convert Point Tool

• นาเมาสมาชทจด Anchor ณ ตาแหนงทตองการยายตาแหนง เพอปรบเปลยนรปทรง กดปม

C คางไว Mouse Pointer จะเปลยนรปรางจาก เปน แลวลากเมาสเพอปรบเปลยนตาแหนงของ Anchor

รปทรงอสระ

• เปดไฟลใหม

• สรางเสนไกดแนวนอนสองเสน ความกวางระหวางเสนไกด คอความหนาของรปทรง

• ใชเครองมอ วาดวงกลมภายในเสนไกด โดยใหอยรมดานหนงของพนท

• เตมสลงในวงกลม ดวยคาสง Edit, Fill...

• สรางเสนไกดแนวตงใหอยกงกลางของวงกลม

• วาดสเหลยม โดยใหขอบดานซายของสเหลยม เรมตนจากเสนไกดกงกลางวงกลม เตมสเดมในสเหลยม

• เลอกเครองมอ Pen สรางรปทรงตามตวอยาง

Page 102: Web Graphic with Adobe Photoshop

98

• เปลยนเครองมอเปน Convert Point แลวชทจดท 1 มมใหไดความโคงตามทตองการ

• ทาซากบจดท 2

• เลอกเมนคาสง Window, Path คลกเลอก Path Control Menu เลอกรายการคาสง Make

Selection... เพอเปลยนเสน Path เปนเสนประ

• กดปม = เพอลบพนทในเสนประ กจะไดรปทรงทสามารถนาไปปรบแตงการใชงานตามท

ตองการ

รปทรงอสระ 2

• เปดไฟลใหม

• สรางเสนไกดแนวนอนสองเสน ความกวางระหวางเสนไกด คอความหนาของรปทรง

• เลอกเครองมอ Pen สรางรปทรงตามตวอยาง

Page 103: Web Graphic with Adobe Photoshop

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...

Page 104: Web Graphic with Adobe Photoshop

100

• กาหนดคา Tolerance เพอสราง Path จากเสน Selection ปรากฏเสน Path ซงสามารถปรบแตงตางๆ ไดตามตองการ

การตดภาพ การนาเอาภาพขนาดใหญ มาใสในเวบเพจ ไมใชวธทดของการนาเสนอ เพราะจะทาใหการโหลดภาพ

เสยเวลามาก วธทดทสด คอ ควรตดภาพเปนชนเลก แลวนาภาพมาประกอบกนเปนชนอกครง ดวยเทคนคการประกอบภาพผานเอกสารเวบ ดงนนเนอหานจะแนะนาการตดภาพ เปนสวนๆ กอน เพอเปนแนวทาง และเปนการเตรยมภาพขนตน ไวกอน

• เตรยมภาพทตองการ และเปดไวบนหนาตางการทางานของ Adobe Photoshop

• ขยายหนาตางภาพ ใหเหนพนทวางรอบภาพ

• เปดแถบบรรทด ดวยคาสง View, Rulers

• เลอกเครองมอ Move Tool

• นาเมาสไปชในแถบไมบรรทด คลกปมเมาสคางไว แลวลากเมาส (กรณทชทบรรทดแนวนอน กใหลากเมาสลงมา และกรณทชในไมบรรทดแนวตง กใหลากเมาสไปดานขวา) จะปรากฏเสนนาสายตา (Guide Line : มกเปนสนาเงน)

• เลอนเสนนาสายตา ไปยงตาแหนงทเหมาะสมของภาพ แลวปลอยนวจากเมาส เพอยนยนตาแหนง ทาซาจนไดครบทกตาแหนง

• ถาตองการปรบตาแหนงของเสนนาสายตา ทวางไวแลว ใหนาเมาสไปชทเสนนนๆ จะพบวา

Mouse Pointer มรปรางเปนลกศรสองหว ใหกดปมเมาสคางไว แลวปรบตาแหนง

Page 105: Web Graphic with Adobe Photoshop

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 วาดวงกลม เตมส วาดวงกลมขนาดเลกกวาเลอนไปอยรมดานใดดานหนง แลวกดปม = เพอลบใหเปนวงแหวน

Page 106: Web Graphic with Adobe Photoshop

102

• ยกเลก Selection คดลอกเปนอกหนงเลเยอร ตงชอเปน GRing

• ทางานในเลเยอร GRing สราง Selection แบบวงร เลอนไปขอบวงรดานขวา แลว = ทาซาตามตวอยาง

• ยกเลก Selection เตม Effect แบบ Glass

Color Animation

• เรยกโปรแกรม Adobe ImageReady

• สรางไฟลใหมขนาด 400 * 400 pixels กาหนดพนดวยสทตองการ

• สรางเลเยอรใหม 1 เลเยอรแลววาดรปทรง พรอมเตมสทตองการ

Page 107: Web Graphic with Adobe Photoshop

103

• คดลอกเลเยอร แลวเปลยนสรปทรงเปนอกส

• เปดบตรรายการ Animation ดวยคาสง Window, Show Animation

• กรอบทปรากฏในบตรรายการ Animation เ รยกวา เฟรม (Frame) ซงทาหนาทกาหนดการเสนอ

ผลงาน

• เฟรมแรกกาหนดใหแสดงผลรปทรงชนแรก จากตวอยางคอวงกลมสแดง ดงนนจะตองปดเลเยอรวงกลมสนาเงน

• สรางเฟรมท 2 โดยคลกปม Duplicate Current Frame แลวกาหนดใหแสดงวงกลมสนาเงน

Page 108: Web Graphic with Adobe Photoshop

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 ทเปนภาพเคลอนไหวสาหรบใชกบเอกสารเวบตอไป