web graphic with adobe photoshop
DESCRIPTION
สร้างสรรค์กราฟิกสำหรับเว็บด้วย Adobe PhotoshopTRANSCRIPT
![Page 1: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/1.jpg)
สารบญ
บทท 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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/2.jpg)
การจดเกบภาพ (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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/3.jpg)
เครองมอปรบแตงภาพ .........................................................................................................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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/4.jpg)
ลายนา..........................................................................................................................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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/20.jpg)
16
แสดงภาพ 1 ภาพตอ 1 จอ
o เลอกเมนคาสง File, Open
o เลอกไดรฟ, โฟลเดอร และภาพทตองการเปดแสดง
o เมอคลกปม Open จะปรากฏภาพ ดงน
o ปมควบคมการทางาน
• ซมภาพ
• เลอนดภาพกอนหนา/ภาพถดไป (สามารถใชปม FO หรอFN)
o กรณเลอนดภาพถดไป หรอภาพกอนหนา ขนาดภาพปรบเปลยน เชน ใหญเกนไป หรอเลกไป สามารถควบคมขนาดของภาพไดโดย
ปรบขนาดจอภาพใหเหมาะสม
ปรบภาพโดยการซมใหพอดกบขนาดจอภาพ
เลอกคาสง View, Lock Zoom
![Page 21: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/26.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/28.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/30.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/31.jpg)
27
จดเกบภาพ (Save File)
การบนทกภาพ หรอจดเกบภาพมขอพจารณา 2 ประเดนคอ การบนทกภาพตนฉบบ มสวนขยายเปน .psd ซงภาพลกษณะนจะยงคงชนของเลเยอรไวดงเดม และการบนทกภาพเพอนาไปใชงาน โดยโปรแกรมจะรวมเลเยอรทมทงหมดเปนชนเดยว คอชน Background
ไฟลภาพตนฉบบ .psd จะมชนเลเยอรครบทกชน
ไฟลภาพสาหรบใชงาน .jpg มลกษณะเหมอนภาพตนฉบบ แตจะมชนเลเยอรเพยงชนเดยว
การจดเกบภาพ (Save File) สาหรบภาพตนฉบบ
• เลอกคาสง File, Save สาหรบการจดเกบงานครงแรก หรอ File, Save as สาหรบการจดเกบงานครงทสองและตองการเปลยนชอไฟลภาพ
• ปรากฏจอภาพโตตอบการทางานดงน
![Page 32: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/32.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/33.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/35.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/36.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/37.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/38.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/39.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/40.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/41.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/42.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/43.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/44.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/45.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/46.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/47.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/48.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/49.jpg)
45
ภาพตนฉบบ หมนภาพ (Rotate) บดภาพใหเอยง (Skew)
บดภาพใหผดสดสวน (Distort) บดภาพแบบ Perspective
การยกเลกคาสงการทางาน (Undo)
การยกเลกคาสงทสงไปแลว สามารถใชคาสง Edit, Undo... หรอคยลด Cz ซงใหผลไดเฉพาะคาสงลาสดเทานน หากตองการยกเลกการใชคาสงทผานไปแลวหลายครงสามารถกระทาไดโดยเปด History palette แลวเลอกการยกเลกคาสงจาก History palette คาสงลาสด จะแสดงตอนทายของรายการ หากตองการยกเลก กเพยงแตนาเมาสไปคลก ณ รายการคาสงนนๆ (คาสงทอยในชวงถดลงไป กจะยกเลกไปดวย) หรอลากคาสงดานทายทไมตองการ ลงถงขยะกได
![Page 50: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/50.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/51.jpg)
47
กรณทใชคาสงคดลอก หรอยายภาพ (Copy, Move) หรอใชเครองมอ Text Tools หรอ Shape Tools ในโหมด Shape Layer จะปรากฏชนเลเยอรใหมโดยอตโนมต และเลเยอรทถกสรางจะซอนทบจากเลเยอรปจจบนขนไป ดงนนควรระมดระวงการสรางเลเยอรใหด โดยตรวจสอบชนเลเยอรใหถกตอง มฉะนนเลเยอรใหม อาจจะถกภาพในชนเลเยอรเดมบง จนมองไมเหนผลการทางานกได
เลเยอรใหมจากไฟลภาพอน
กรณทตองนาภาพจากไฟลอนมาใชงานในไฟลปจจบน สามารถใชเครองมอ Move แลวลากเลเยอรภาพขามหนาตางงาน ซงโปรแกรมจะสรางเลเยอรใหมของภาพ ในชนงานใหมโดยอตโนมต
รปภาพมสองเลเยอร ขณะนกาลงทางานอยในเลเยอร After
ใชเครองมอ Text Tool พมพขอความ จะปรากฏเลเยอร
ตวอกษรซอนบนเลเยอร After โดยอตโนมต แตไมเหนขอความทพมพลงไป เพราะมเลเยอร before ซอนทบอยดานบน
ลากเลเยอรภาพอกไฟล ขามไปวางอกไฟล จะปรากฏชนเลเยอรของภาพ
โดยอตโนมต
![Page 52: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/52.jpg)
48
เลอกเลเยอร
ภาพทมชนเลเยอรหลายชน คงสรางความสบสนไดวาเลเยอรไหน เปนของชนสวนภาพชนสวนใด แมวาเลเยอรจากเครองมอ Text tool จะปรากฏเปนขอความทพมพลงไป ซงชวยในการเลอกเลเยอร แตกแสดงผลเฉพาะการพมพขอความภาษาองกฤษ หรอตวเลขเทานน การแกไขภาพในเลเยอร จะตองรจกเทคนคการเลอกเลเยอร โดยมหลกพจารณา ดงน
• ถาตองการแกไขขอความจากเครองมอ Text Tool ใหสงเกตจากสญลกษณตว T กากบทเลเยอร เรยกวา Text Layer
• ถาชนเลเยอรมสญลกษณเปนรปแฟมสเหลอง แสดงวาเปนชดเลเยอร (Layer Set) จะตองคลกทปมสามเหลยม เพอแสดงรายละเอยดเลเยอรภายในชดเลเยอร
• ใชเทคนคการซอนเลเยอร โดยเลอกเลเยอร แลวคลกปม Hide Layer ทละเลเยอร เพอหาวา เลเยอรทตองการแกไข คอชนเลเยอรลาดบทเทาไร
เลเยอรตวอกษร (Text Layer) แสดงดวยสญลกษณ T
คลก เพอขยาย
คลกทสญลกษณ เพอซอน/แสดงเลเยอร
![Page 53: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/53.jpg)
49
• ใชเทคนคการเลอกเครองมอ Move แลวนาเมาสไปช ณ ตาแหนงทตองการตรวจสอบบน Workspace แลวกดปมขวาของเมาส จะปรากฏชอชนเลเยอร เรยงตอกน ชนเลเยอรบนสด คอตาแหนงทเมาสชนนเอง ถาเปนเลเยอรทตองการเลอก ใหคลกปมซายทชอชนเลเยอร
ลบเลเยอร
เลเยอรใดทไมมการสรางชนงาน มความผดพลาด หรอไมมการทางานใดๆ ควรทาการลบเลเยอรออกไป เพอคนคาหนวยความจาใหกบระบบ โดย
• เลอกเลเยอร
• คลกทปม Delete Layer หรอเลอกคาสง Layer, Delete, Layer
ไมสามารถลบเลเยอร Background ได
ยายชนเลเยอร
ชนเลเยอรทซอนทบกน ควรทาการวางชนเลเยอรใหเปนระบบ ระเบยบ เพอสะดวกตอการแกไขในภายหนา การยายชนเลเยอรไดโดยการลากเลเยอรไปวาง ณ ตาแหนงใหมทตองการ หรอเลอกคาสง Layer, Arrange,…
ลอกเลเยอร
งานในเลเยอรบางชน อาจจะตองทาการลอกไว เพอปองกนการเลอนตาแหนง หรอลบ หรอแกไขโดยผดพลาด ซงทาไดโดย
• เลอกเลเยอร
• คลกปมรปกญแจ
Delete Layer แลวยนยนการลบ
![Page 54: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/54.jpg)
50
เชอมเลเยอร
การเชอมเลเยอร เปนคาสงหนงทใชบอย โดยเฉพาะการยายภาพเลเยอรหลายๆ เลเยอรพรอมๆ กน หรอสรางชดเลเยอร
• เลอกเลเยอรชนแรก
• นาเมาสไปคลกในชอง Link เพอเชอมเลเยอร
• การยกเลกการเชอม ทาซาขนตอนเดม
รวมเลเยอร
การรวมเลเยอรจะชวยใหภาพทมชนเลเยอรจานวนมาก มกลมของเลเยอรทชดเจน แกไขไดงาย รวมทงการทางานกบภาพบางฟงกชน มความจาเปนตองรวมเลเยอรเปนชนเดยวกอนโดยคลกปม Control Menu แลวเลอกคาสง Flatten Image
กลมเลเยอร
• ทาการเชอมเลเยอรทสมพนธกน
• คลกปม Control Menu ของเลเยอร แลวเลอกคาสง New Set from Linked…
• กาหนดรายละเอยดเกยวกบกลมเลเยอร แลว OK
สญลกษณ แสดงการเชอมเลเยอร
![Page 55: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/55.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/56.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/57.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/58.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/59.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/60.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/61.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/62.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/63.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/64.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/65.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/66.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/67.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/68.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/69.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/70.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/71.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/72.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/73.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/74.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/75.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/76.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/77.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/78.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/79.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/80.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/81.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/82.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/83.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/84.jpg)
80
• เลอกคาสง Image, Adjustments, Level... เพอสรางเสนไฟฟาในอากาศ
• เลอกคาสง Image, Adjustments, Hue/Saturation แลวตงคาดงตวอยาง
• จะไดภาพดงน
ภาพลกษณะเคลอนไหว
• เปดไฟลภาพตนฉบบ หากภาพตนฉบบมลกษณะเปน Layer ใหรวมเลเยอรเปนชนเดยวกนดวยคาสง Layer, Flatten Image
• คดลอกภาพตนฉบบเปนอกเลเยอร
• เลอกเมนคาสง Filter, Blur, Radial Blur แลวตงคาตามตวอยาง เพอทาใหภาพมลกษณะการเคลอนท
• นาเมาสกลบไปคลกทเลเยอรชน Background เลอกเครองมอแบบวงกลม หรอสเหลยมตาม
ตองการ
• นาเมาสไปคลกเลอกตาแหนงภาพทตองการใหแสดงผลเดนชด
![Page 85: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/85.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/86.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/87.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/88.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/89.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/90.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/91.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/92.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/93.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/94.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/95.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/96.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/97.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/98.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/99.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/100.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/101.jpg)
97
• คลกเลอกเครองมอ Path component selection แลวกาหนดขอบเขตใหกบรปทรงทตองการปรบแตง ซงจะปรากฏจดสเหลยมเลกๆ ณ จดทคลกเพอสรางรปทรง เรยกวา Anchor Point
• เลอกเครองมอ Convert Point Tool
• นาเมาสมาชทจด Anchor ณ ตาแหนงทตองการยายตาแหนง เพอปรบเปลยนรปทรง กดปม
C คางไว Mouse Pointer จะเปลยนรปรางจาก เปน แลวลากเมาสเพอปรบเปลยนตาแหนงของ Anchor
รปทรงอสระ
• เปดไฟลใหม
• สรางเสนไกดแนวนอนสองเสน ความกวางระหวางเสนไกด คอความหนาของรปทรง
• ใชเครองมอ วาดวงกลมภายในเสนไกด โดยใหอยรมดานหนงของพนท
• เตมสลงในวงกลม ดวยคาสง Edit, Fill...
• สรางเสนไกดแนวตงใหอยกงกลางของวงกลม
• วาดสเหลยม โดยใหขอบดานซายของสเหลยม เรมตนจากเสนไกดกงกลางวงกลม เตมสเดมในสเหลยม
• เลอกเครองมอ Pen สรางรปทรงตามตวอยาง
![Page 102: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/102.jpg)
98
• เปลยนเครองมอเปน Convert Point แลวชทจดท 1 มมใหไดความโคงตามทตองการ
• ทาซากบจดท 2
• เลอกเมนคาสง Window, Path คลกเลอก Path Control Menu เลอกรายการคาสง Make
Selection... เพอเปลยนเสน Path เปนเสนประ
• กดปม = เพอลบพนทในเสนประ กจะไดรปทรงทสามารถนาไปปรบแตงการใชงานตามท
ตองการ
รปทรงอสระ 2
• เปดไฟลใหม
• สรางเสนไกดแนวนอนสองเสน ความกวางระหวางเสนไกด คอความหนาของรปทรง
• เลอกเครองมอ Pen สรางรปทรงตามตวอยาง
![Page 103: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/103.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/104.jpg)
100
• กาหนดคา Tolerance เพอสราง Path จากเสน Selection ปรากฏเสน Path ซงสามารถปรบแตงตางๆ ไดตามตองการ
การตดภาพ การนาเอาภาพขนาดใหญ มาใสในเวบเพจ ไมใชวธทดของการนาเสนอ เพราะจะทาใหการโหลดภาพ
เสยเวลามาก วธทดทสด คอ ควรตดภาพเปนชนเลก แลวนาภาพมาประกอบกนเปนชนอกครง ดวยเทคนคการประกอบภาพผานเอกสารเวบ ดงนนเนอหานจะแนะนาการตดภาพ เปนสวนๆ กอน เพอเปนแนวทาง และเปนการเตรยมภาพขนตน ไวกอน
• เตรยมภาพทตองการ และเปดไวบนหนาตางการทางานของ Adobe Photoshop
• ขยายหนาตางภาพ ใหเหนพนทวางรอบภาพ
• เปดแถบบรรทด ดวยคาสง View, Rulers
• เลอกเครองมอ Move Tool
• นาเมาสไปชในแถบไมบรรทด คลกปมเมาสคางไว แลวลากเมาส (กรณทชทบรรทดแนวนอน กใหลากเมาสลงมา และกรณทชในไมบรรทดแนวตง กใหลากเมาสไปดานขวา) จะปรากฏเสนนาสายตา (Guide Line : มกเปนสนาเงน)
• เลอนเสนนาสายตา ไปยงตาแหนงทเหมาะสมของภาพ แลวปลอยนวจากเมาส เพอยนยนตาแหนง ทาซาจนไดครบทกตาแหนง
• ถาตองการปรบตาแหนงของเสนนาสายตา ทวางไวแลว ใหนาเมาสไปชทเสนนนๆ จะพบวา
Mouse Pointer มรปรางเปนลกศรสองหว ใหกดปมเมาสคางไว แลวปรบตาแหนง
![Page 105: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/105.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/106.jpg)
102
• ยกเลก Selection คดลอกเปนอกหนงเลเยอร ตงชอเปน GRing
• ทางานในเลเยอร GRing สราง Selection แบบวงร เลอนไปขอบวงรดานขวา แลว = ทาซาตามตวอยาง
• ยกเลก Selection เตม Effect แบบ Glass
Color Animation
• เรยกโปรแกรม Adobe ImageReady
• สรางไฟลใหมขนาด 400 * 400 pixels กาหนดพนดวยสทตองการ
• สรางเลเยอรใหม 1 เลเยอรแลววาดรปทรง พรอมเตมสทตองการ
![Page 107: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/107.jpg)
103
• คดลอกเลเยอร แลวเปลยนสรปทรงเปนอกส
• เปดบตรรายการ Animation ดวยคาสง Window, Show Animation
• กรอบทปรากฏในบตรรายการ Animation เ รยกวา เฟรม (Frame) ซงทาหนาทกาหนดการเสนอ
ผลงาน
• เฟรมแรกกาหนดใหแสดงผลรปทรงชนแรก จากตวอยางคอวงกลมสแดง ดงนนจะตองปดเลเยอรวงกลมสนาเงน
• สรางเฟรมท 2 โดยคลกปม Duplicate Current Frame แลวกาหนดใหแสดงวงกลมสนาเงน
![Page 108: Web Graphic with Adobe Photoshop](https://reader034.vdocuments.pub/reader034/viewer/2022052315/5470ebf6b4af9fb40a8b49e5/html5/thumbnails/108.jpg)
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 ทเปนภาพเคลอนไหวสาหรบใชกบเอกสารเวบตอไป