เอกสารอบรม Adobe Photoshop CS3

��

�ส

กาและตสาหรบ

ารออกตกแตงบจดท

กแบบ งภาพ าเวบ

Phดวยโปรรแกร

hoม

otooshho �op CSS33

สานกกคอมพวเตอรร มหาวทยาาลยมหาสารคคาม

นายธนนศาสตร สดจจรง งานพฒนารระบบสารสนเเทศ

เอกสารประกอบการอบรม การออกแบบและตกแตงภาพสาหรบจดทาเวบดวย Adobe Photoshop CS3 P

ho

tosh

op

CS

3


ho

tosh

op

CS

3

เอกสารประกกอบการอบรม

Phoในกาวาคม

otoshop CS3ารสรางงานกรมอฉบบนจะส

เอกสารประก3 ฉบบน ไดรวราฟคทจะนาไสามารถใหประ

กอบการอบรมวบรวมพนฐานไปใชประกอบะโยชนกบผอา

ม การออกแบนทจาเปนในกบการจดทาเวบานได

บและตกแตงการ ใชเครองมบไซตไดอยาง

งภาพสาหรบจมอตาง ๆ ใน Pเหมาะสม ผจ

จดทาเวบดวย Photoshop จดทาหวงเปน

Adobe เพอชวยอยางยง

การออกแบบแล

ละตกแตงภาพสสาหรบจดทาเวบบดวย Adobe Photoshop CCS3

คานาา

พนกงานวทยาศาสตรและเทคโนนโลย สานกคอมมพวเตอร มหาวทยาลยมหาสารคาม

นายธนศาสตตร สดจรง

Ph

oto

sho

p C

S3


ho

tosh

op

CS

3

เอกสารประกอบการอบรม การออกแบบและตกแตงภาพสาหรบจดทาเวบดวย Adobe Photoshop CS3

Ph

oto

sho

p C

S3

สารบญ เรอง

หนา

Adobe Photoshop CS3 คออะไร 1 คณสมบตของคอมพวเตอรทแนะนา 1 ภาพในเครองคอมพวเตอร 2 ความละเอยดของภาพกราฟก 2 สวนประกอบตาง ๆ ของโปรแกรม 3 แถบเครองมอ (Toolsbox) 4 แผนผงแถบเครองมอ 6 การเปดไฟลภาพ (Open) 7 การปดไฟลภาพ (Close) 7 การสรางไฟลใหม (New) 8 การบนทกขอมลลงบนไฟล (Save) 9 การใชงาน Palettes 10 Navigator Palette 10 Color Palette 11 Swatches Palette 11 History Palette 12 Layer Palette 12 รจกกบ Layer 14 การกาหนดพนท เพอแกไขและตกแตงภาพ (Selection) 15 วธการใชงาน Marquee Tool 15 Marquee Tool 16 การสราง Fixed Size Selection 17 Lasso Tools 17 Magic Wand Tool 19 Crop Tool 19 คาสงพนฐานของ Selection 20 การใช Transform เพอปรบเปลยนพนท Selection 20 การใชงาน Foreground และ Background Color 21 การใชงาน Type Tool 21 คณสมบตตาง ๆ ของ Type Tool 23 การใชงาน Layer 24 การ Lock Layer 25 การ Merge Layer 25


ho

tosh

op

CS

3

สารบญ เรอง หนา การเปลยนชอ Layer 26 การจดกลม Layer 26 การทาภาพโดยใช Filter 27 ตวอยาง Filter ทนาสนใจ 28 การใชงาน Layer Style 29 การเปลยนรปรางของรป (Transform) 30 การปรบคาความสวาง/ความคมชด (Brightness/Contrast) 30 การปรบขนาดของชนงาน 31 การตดกรอบของรป (Crop) 32 งานกราฟคสาหรบจดทาเวบ 33 ชนดของไฟลทนยมใชในเวบ 34 การลดขนาดและแปลงไฟลเพอใชงาน 34 การสรางภาพขอบมน 36 การซอนภาพหลายภาพเขาดวยกน 38 การสรางภาพปมกดสาหรบใชงานบนเวบ 41

ประสโดดเ

Adobe Pสทธภาพสง เพเดน ทงงานทใช

Photoshop Cพอการทางานรชบนเวบและงา

CS3 เปนโปรแกระดบมาตรฐานานสงพมพ

กรมคอมพวเตน สาหรบนกออ

อรทรวบรวมเคอกแบบมออาช

ครองมอสาหรบชพทตองการส

บตกแตงภาพ รางสรรคงานก

กราฟกท

เอกสารประก

กการออกแแบบ และะตกแตงภภาพสาหรบจดทาาเวบ

Adobe

คณสมบตของคอมพพวเตอรทแนนะนา

• Intel® P• MicrosoUltimate, • 1GB of • 1GB of installatio• 1024x76graphics c• Some GOpenGL 2

กอบการอบรม

ดวยโปปรแกรม AAdobe Photoshop CSS3

Photosho

Pentium® 4 ooft® Windows or Enterprise RAM available haron (cannot ins68 display (12card, 16-bit coGPU-accelerat2.0


พนกงานวทยาศาสตรแลละเทคโนโลย สานกคอมพวเตอร มหาวทยยาลยมหาสารคาม

op CS3 คออะไร

or AMD Athlos® XP with See with Service

rd-disk space stall on remo280x800 recoolor, and 256ted features r

ละตกแตงภาพส

นายธนศาสตร ส สดจรง

on® 64 proceervice Pack 3e Pack 1 (Serv

for installatioovable flash-bommended) w6MB of VRAM require graph

สาหรบจดทาเวบ

essor 3; Windows Vivice Pack 2 re

on; additionalbased storagewith qualified

hics support fo

บดวย Adobe

ista® Home Pecommended

l free space re devices) d hardware-ac

or Shader Mo

Photoshop C

Premium, Busd); or Window

required durin

ccelerated Op

odel 3.0 and

CS3 1

siness, ws 7

ng

penGL

Ph

oto

sho

p C

S3

2 เอP

ho

tosh

op

CS

3

ภภาพในเครองคอมพวเตตอร หลากหลา

ภาพในเครองคายมาแตโดยทว

คอมพวเตอร หวไปแลวงานคอ

หรองานกราฟกอมพวเตอรกรา

กทพบเหนกนใาฟกมพนฐานก

ในสอตาง ๆ ปจการสราง 2 รป

จจบนนมความปแบบ คอ

มสวยงาม

สามารถปจะไมแตก

1. กราฟกแบประกอบกนเปนกเมอมการขยา

บบ Vector เปนรปภาพซงมขาย โปรแกรมทส

ปนการสรางภาขอดคอ สามารสามารถสสราง

าพทมรปทรงเรรถขยายไดโดยไงภาพเวกเตอรไ

รขาคณตโดยใชไมเสยความสมได คอ CorelD

ชเสนแบบตาง มดลของรปภาพDRAW, Illusto

ๆ มารวมกน โพ ขอบของรปor

โดยภาพ

จดสเหลยไดมาจาก

2. กราฟกแบยม มาเรยงกนอกการถายภาพ ซ

บบ Bitmap เปอยจานวนมาก ซงสามารถนาภ

ปนการสรางรปเรยกวา จดพเภาพไปตกแตง

ปภาพจากภาพเซล พอมารวมและแกไขไดใน

พถายซงรปภาพมกนจะกอใหเกนโปรแกรม Ph

พจะเกดจากจดกดภาพ แหลงทhotoshop

ดสทมลกษณะทมาของภาพจ

เปนจะ

คความละเอยดของภาพกกราฟก (พกเซลเป

ภาพทปรากฏบปนองคประกอ

บนหนาจอคอมบทเลกทสดขอ

มพวเตอรนน เองภาพ) มาปร

เกดจากจดสเหะกอบกนเปนภ

หลยมเลกๆ ขอภาพขนาดตาง

งสทเราเรยกว ๆ

า พกเซล (Pixel)

1 ตารางน

ความละเอยดนว และงานกร

ของภาพจะมหราฟกในแตละแ

หนวยวดปน พแบบกจะใชควา

กเซล/ตารางนามละเอยดทแต

นว pixel/inchตกตางกน ดงน

คอจานวนจดน

ส pixels ในพพนท

• ภาพทแสดงบนหนาจอคอมพวเเตอร เชน หนาาเวบ หรองานพรเซนเตตชน ใชความลละเอยด 72 พกกเซล/ตารางนวว • ภาพถายทวๆไป ใใชความละเอยยด 150 พกเซลล/ตารางนว • ภาพในงานพมพ ใชความละเอยยด 300 พกเซล/ตารางนว

อกสารประกอบบการอบรม การรออกแบบและต

ตกแตงภาพสาหหรบจดทาเวบดววย Adobe Pho

otoshop CS3

1. สวเครอ

วนพนทการทาองมอสาหรบกา

างาน (Work Aารตกแตงไฟลภ

Area) หรอพนทภาพตาง ๆ

ทการทางานขอองโปรแกรม AAdobe Photooshop จะประะกอบดวย

2. MSele ใหดเ

2.7 Viewเลก

w เปนคาสงเกยยวกบมมมองของภาพและวตตถในลกษณะตตางๆ เชน การขขยายภาพ และยอภาพ

3. To4. To5. Pa6. Stคาแน

tatus bar คอนะนาการใชงา

สวนทแสดงราานของอปกรณ

ายละเอยดตาง ณทเลอกจาก To

ๆ ของชนงานoolbox

น เชน ขนาดขอองมมมองรปภาาพ ขนาดของไไฟล


สวนประะกอบตาง ๆๆ ของโปรแกกรม

Menu bar คอสect , Filter , V

สวนทแสดงชอ View , Windo

อเมนตางๆ ของow , Help

งโปรแกรม กจะประกอบดวยย File , Edit , Image , Layyer ,

2.1 File 2.2 Edit 2.3 Imag2.4 Laye2.5 Sele2.6 Filte

2.8 Wind2.9 Help

oolbox คอสววนของอปกรณณตาง ๆ ทใชในนการสรางชนงาานหรอตกแตงงภาพ ool options alettes คอสววนทใชตรวจสออบและกาหนดดคณสมบตตาง ๆ ใหกบรปภาาพ


หมายถง คาสงงเกยวกบการจจดเกบ และเรยยกใชไฟลรปภาาพตางๆ หมายถง คาสงเกยวกบการแแกไขลกษณะขของรปภาพและะ Image ตางๆๆ ge หมายถง คาาสงการจดการรรปภาพและ Image ตางเชนน การเปลยนสสและการ เปลยยนขนาด er หมายถง ชนนหรอลาดบของรปภาพและววตถทเราตองกการจะทา Effeccts ect เปนคาสงกการเลอกพนทหหรอสวนตางขอองรปภาพและวตถในการทจะเลน Effects ตางๆ er เปนคาสงการเลน Effects ตางๆสาหรบรรปภาพและวตตถ

dow เปนสวนคาสงในการเลลอกใชอปกรณเเสรมตางๆทจาาเปนในการใชสสราง Effects ตางๆ p เปนคาสงเพออแนะนาเกยวกกบการใชโปรแแกรมฯและจะมมลายละเอยดขของโปรแกรม อยในนน

bar คอสวนทกาหนดคณสมมบตของอปกรณณทเลอกจาก TToolbox

การออกแบบแลละตกแตงภาพส

สาหรบจดทาเวบบดวย Adobe Photoshop C

CS3 3

Ph

oto

sho

p C

S3

4 เอP

ho

tosh

op

CS

3

แแถบเครองมมอ (Toolsbbox)

อกสารประกอบ

Marqueeเปนการเลลอกแบบสเหลยยมผนผา, วงกลมม, แถวขนาด 11 พกเซลส หรอคอลมน 1 พกเซซลส

Move Toใชเพอเลออนสวนทเลอก ห หรอไวเลอน Laayer และ Guidde ตางๆ

Lasso Toจะใชเพอสขอบรปภา

สราง Selectioาพ)

n แบบอสระ, แแบบ Polygonaal (ตามจดทคลก) และ Magneetic (ดงเขาหา

Magic Wใชเลอกพนนทบรเวณทมสเดยวกน

Crop Tooใชในการเเลอกบางสวนขอองรปภาพ

Slice Tooใชในการสสราง Slice

Slice Selใชเลอก SSlice ทคณสรางงขนมา

Healing ใชในการรระบายส เพอซออมแซมรปภาพใใหสมบรณแบบ

Patch Toใชเฉพาะใเลอกในภ

ในบรเวณทเลอกาพเปนตนฉบบ

กไวเทานน เพอ

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

Brush Toใชในการววาดเสน Brush ตางๆ

Pencil Toใชในการววาดเสนทมขอบบชดเจน

Clone Stใชกอปปรรปโดยอาศยรปภภาพตนฉบบ

บการอบรม การ

e Tool

ool

ool

Wand Tool

ol

ol

lection Tool

Brush Tool

ool

ool

ool

tamp Tool

รออกแบบและต

ตกแตงภาพสาหหรบจดทาเวบดววย Adobe Phootoshop CS3

เอกสารประกอบการอบรม การออกแบบและตกแตงภาพสาหรบจดทาเวบดวย Adobe Photoshop CS3 5

Ph

oto

sho

p C

S3

Pattern Stamp Tool ใชเพอวาดรปโดยใชบางสวนของรปภาพทมอยเปนตนฉบบ

History Brush Tool ใชกลบคนรปภาพเดมจาก State หรอ Snapshot ของรปเดยวกน

Art History Brush Tool ใชในการวาดรป จาก State หรอ Snapshot ของรปนโดยอาศยรปแบบของ Stoke ทมสไตลหลากหลาย ชวยใหสไตล ของภาพดตางออกไป

Eraser Tool ใชลบรปภาพหรอลบบางสวนของพกเซลสและทาการเกบสวนตางๆ เปน State ตางๆ ใน History Palette

Magic Eraser Tool ใชลบรปภาพบรเวณทมสเดยวกนใหกลายเปนพนทโปรงใส (Transparent) โดยการคลกเพยงครงเดยว

Background Eraser Tool ใชลบรปภาพบางสวนใหกลายเปนพนทโปรงใสโดยการลากเมาส

Gradient Tools ใชเพอไลสระหวางสหลายๆ ส ในแบบตางๆ Straight-line, Radial, Angle, Reflected และ Diamond

Paint Bucket Tool ใชในการเตมส Fill ในบรเวณทเปนสเดยวกนดวยสของ Foreground

Burn Tool ใชลดความสวางทาใหรปภาพดมดลง

Sponge Tool ใชเปลยนสในสวนตางๆ ของรปภาพ โดยการปรบคาความเขมส

Path Selection Tool ใชเพอเลอก Shape หรอ Path เพอแสดง Anchor Paint, Direction Line และ Direction Paint

Type Tool ใชในการสรางตวหนงสอลงบนรปภาพ

Type Mask Tool ใชสราง Selection เปนรปรางตวหนงสอ

Pen Tools ใชในการลากเสน Path ซงสามารถดดโคงตามรปภาพได

Custom Shape Tool ใชเลอกรปภาพเลอกรปภาพทมรปรางเฉพาะจาก Custom Shape List

Note Tool ใชเขยนโนต หรอแนบเสยงไปกบรปภาพได

Eyedropper Tool ใชในการดดสจากรปภาพเพอใชเปนตนแบบของสกบงานชนอนๆ

Measure Tool ใชวดระยะหาง, ตาแหนงและมมองศาระหวางภาพ

Hand Tool ใชเลอนภาพทอยในหนาตางเดยวกน

Zoom Tool ใชในการขยายและยอสวนการแสดงภาพบนหนาจอ

6 เอP

ho

tosh

op

CS

3

แแผนผงแถบเครองมอ



1. คลเลอก

ลกทเมนคาสง กคาสง Open

File ทแถบ M

Menu bar จากกนน

2. จะดงภา

ะปรากฏ Dialoาพ เพอเลอกไฟ

og แสดงรายชฟลทตองการเป

ชอไฟลตาง ๆปดมาใชงาน

3. จาเพอเเลอกโฟลเดอรภาพ จากนนเลอก Form 4. คลจากน

นนคลกปม Oppen

ดก

ป


การเปดไไฟลภาพ (OOpen)

ากนน ทชอง L

mats

ลกเลอกไฟลท

การปดไฟ

เราสามารถปดไฟลภาพพทไดเปดขปม


Look in ใหคล

ตองการเปดใช

ฟลภาพ (C


ลกท All

ชงาน

lose)

นม


มาแลวในโปรแ


แกรม โดยคลก

บดวย Adobe

กทเมน File

Photoshop C

> Close หรอ

CS3 7

อ P

ho

tosh

op

CS

3

8 เอP

ho

tosh

op

CS

3

กการสรางไฟลลใหม (Neww) 1. คลกทเมนคาสง Filee ทแถบ Menuu bar จากนนเลอกคาสง Neew 2. จะปราากฏ Dialog สาหรบกาหนดคคณสมบตตาง ๆ ของไฟลภาพพดงน

เองจากชอ

- Preset คอ อง Width แล

ขนาดงานทโปะ Height ได

ปรแกรมกาหนด

ดมาให ซงมหลลากหลายขนาดดใหเลอก หรออสามารถกาหนนด

1024 Pix 768 Pixe

ทแสดงบน- Resolutionนคอมพวเตอร

n คอ ความละรเทากบ 72 pix

ะเอยดของภาพxels/inch งาน

พ โดยใสตวเลขนสงพมพเทาก

คาความละเอยบ 150-200 p

ยดของภาพ เชpixels/inch

ชน งานเวบหรออรป

RGB Col

3. หลงจาากกาหนดคณสสมบตตาง ๆ ใหหคลกปม OK เพอเรมชนงานนใหม


- Name คอ ชชอของชนงานน สามารถกาหนนดใหมเองได ชชอนจะไประบทชอไฟลตอไปป

- Width คอ xels

ขนาดความกววางของงาน (จาากซายไปขวา)) โดยกาหนดหหนวยและขนาดดไดเอง จากรปป คอ

- Height คอ els

ขนาดความกววางของงาน (จจากบนลงลาง) โดยกาหนดหนนวยและขนาดดไดเอง จากรปป คอ

- Color Modlor, CMYK Co- Backgroun

• Wh• Bac• Tra


de คอ โหมดสสของภาพ ซงปประกอบไปดวยย โหมดส Bitmmap, Grayscale, olor, Lab Colnd Contentsite กาหนดใหหสพนหลงเปนสสขาว

ckground Consparent ไมมมพนหลง


lor s คอ สพนหลงงของภาพ เมอเรมชนงานใหมม มดงน

olor กาหนดใหหสพนหลงเปนนสเดยวกบ Bacckground

ตกแตงภาพสาห

หรบจดทาเวบดววย Adobe Phootoshop CS3

บนไฟบนท

หลงจากตฟล (Save) สาทกขอมลลงบนไ

ตกแตงไฟลภาพาหรบการเรยกใไฟล (Save) อ

พเรยบรอย จะใชงานในครงต

อย 3 ลกษณะ

ะตองเกบบนทกตอไป โปรแกรมคอ

กขอมลลงมมการ

วธกาารบนทกหรอ SSave งาน ทาดงน 1. คลลกทเมนคาสง File จากนนเลอกคาสง Savve As 2. จะะปรากฏ Dialoog สาหรบกาหหนดคณสมบตตาง ๆ ของไฟลภาพดงน

3. ห


การบนททกขอมลลงบบนไฟล (Saave)

- Save รปแบแบบเมาปร

บนทกไฟลในรบบ (Format) ขลเยอรไวได ขอบปรงแกไขใหม

รปแบบ (Formของ PSD ซงเรอดคอทาใหเรามได

mat) ปกต ซงจราสามารถเกบาสามารถนาผล

จะอยในการทางาน

ลงานทเกบไว

- Save JPEG

- Save (Formไฟลรป

for Web & Dmat) สาหรบกาปภาพ JPEG,

Devices… บนทารใชงานบนเว GIF, PGN เปน

ทกไฟลในรปแวบ เชน ไฟล Hนตน

บบ Html และ

หลงจากก นาห


As บนทกไฟล, BMP, GIF เป

ลในรปแบบ (Foปนตน

ormat) อน ๆ ได เชน

ดคณสมบตตา


าง ๆ ใหคลกป


ปม Save เพอ


- ชอไฟล (FFile Name) - รปแบบขอองไฟล (Formaat) ทตองการ - กาหนดคณOptions)

ณสมบตของกา

ารบนทกไฟล (Save

• As a (Format) อ

Copy บนทกไอน ขณะทไฟล

ไฟลเปนชออนเดมกาลงเปดใ

น รปแบบ ใชงาน

• Laye• Use

แสดงสของภ• Thum

ภาพกอนจะพมmbnail กาหน

มพ นดใหไ

(Save) สามของการเปด

• Use

มารถแสดงภาพดไฟล Lower

พตวอยางใน Dialog

นามสกลไฟลเปนอกษรตว

วเลก

อบนทกขอมล

บดวย Adobe

ers จะเกบคณสสมบตของ Layyer ตาง ๆ Proof setup

Case

ลงบนไฟล

Photoshop C

เกบคาโหมดส

ฟลทบนท

Extension ก

CS3 9

สทจะใช

ทก

าหนดให

Ph

oto

sho

p C

S3

10 เอP

ho

tosh

op

CS

3

กการใชงาน PPalettes

NavigatoPalette จากนนเล

ตาง ๆ จะถกจลอก Palette ท

จดเปนกลม ๆ สทตองการซอน

สาหรบการซอหรอแสดง Pa

นหรอแสดง Plette ใดถกเป

Palettes นนใหดใชงานอยจะ

หคลกทเมนคาสมเครองหมายถ

สง Window ถก

หนา Paleette

Navigato ประกอบด

Navigator Paดวยสวนตาง ๆ

alette เปน Paๆ ดงน

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

เปอรเซซนตขนาดภาพพ


Palettes คอ or และ Info, P

Dialog ทใชต Palette ของ C

รวจสอบและกColor, Swatc

กาหนดคณสมบches เปนตน

บตตาง ๆ ของร

รปภาพ เชน PPalette ของ

or Palette

1. Proxy Preหากกรอบ

view Area คอบของ Proxy P

อสวนทแสดงถ Preview อยรม

ถงขนาดของภามสดของภาพแ

าพในชนงาน กแสดงวาภาพนน

กรอบสหมายถงนมขนาดพอดก

งขนาดของชนกบชนงาน

งาน

2. ตวเลขเปอรโดยคาขอ

รเซนตของภาพองขนาดภาพจร

พ คอสวนทใชกรงจะเทากบ 1

กาหนดขนาดม00 เปอรเซนต

มมมองของภาพต

พ ซงอยในรปแแบบของเปอรเเซนต

3. Zoom Ou

สวน คอ ut & Zoom In

n คอสวนทใชกกาหนดขนาดมมมองของภาพพ ประกอบดวยยสวนทใชกาหนนด 3

3.1 Zoo3.2 Zoo3.3 Zoo

เลกลm Slider คอสลง แตหากเลอ

สวนทเปนแถบนมาทางขวาจ

บเลอน หากเลอะขยายขนาดม

อนทางดานซายมมมองของภาพ

ยจะยอขนาดมพใหใหญขน

มมมองของภาพพให

Proxy Prev


m Out คอสวนทอยดานซายยสด ใชสาหรบบยอขนาดมมมองของภาพใหหเลกลง m In คอสวนททอยดานซายสสด ใชสาหรบขยายขนาดมมมมองของภาพใหหใหญขน

view


ZZoom O


Zoom SlideOut Z

หรบจดทาเวบดว

r oom In

วย Adobe Phootoshop CS3


Ph

oto

sho

p C

S3

Color Palette Color Palette คอ Palette ททาหนาทเปนจานส ซง Mode สทปรากฏในภาพจะเปนลกษณะการผสมใน Mode RGB มสวนประกอบตาง ๆ ดงน

1. Set foreground color คอสวนแสดงสของ foreground 2. Set background color คอสวนแสดงสของ background 3. RGB slider คอสวนทใชกาหนดคาของการผสมสใน Mode RGB ซงสามารถเลอนเพอปรบ

คาสไดจากแถบ slide หรอระบเปนตวเลข (0-255) เชน สดา คอ R=0,G=0, B=0 4. Sample color คอสวนสาหรบกาหนดคาสในลกษณะจมเลอกส

Swatches Palette Swatches Palette คอ Palette ททาหนาทสาหรบเกบสหลกๆ ทนยมใช สามารถเลอกนามาใชไดทนทและถาหากวาคณมสทตองการใชเปนประจา สามารถบนทกสนนไวใน Palette นได

การบนทกสทตองการไวท Swatches Palette สามารถทาไดโดยเลอกสทตองการ จากนนคลกเมาสทปมบนทกสใหมท Swatches Palette จะสามารถบนทกสทตองการได

12 เอP

ho

tosh

op

CS

3

History การทางา

Palette เปน Palette นตาง ๆ ในลา

ทแสดงขนตอนดบชนและยก

นวธการตาง ๆเลกได ประกอ

ๆ ทใชทางานกบอบดวยสวนตาง

บไฟลภาพตามง ๆ ดงน

มลาดบโดยสามมารถยอนกลบไไปยง

Layer P ทาใหเกดชนงานหร

Layer Palettความสะดวกใรอภาพใน Lay

te เปน Palettนการจดการแyer ทเลอกเทา

te ทเกบชนงานกไขโดยไมเกดานน สวนประก

นหรอภาพทงหดผลกระทบกบชกอบของ Laye

หมด เรยกวา Lชนงานหรอภา

er Palette มด

Layer ซงจะเราพอน ๆ โดยจะดงน

รยงลาดบกอนหะแกไขเฉพาะ

หลง

หคP

มายเหต การยาสง Ctrl-z สาหalette แทน เน

ยกเลกการทางาหรบยกเลกขนตนองจาก

านใด ๆ ทไมตอตอนลาสดเทานน

งการ ปกตเราจน หากตองการย

จะใชคาสง Ctrl-ยกเลการทางาน

-z แต ในโปรแกนหลาย ๆ ขนตอ

กรม Photoshoอนเราจะใช His

op ใชstory


1. สวนทใชกาาหนดขอมลของการใช Histoory Brush Toool 2. เปนภาพทแแสดงรายละเออยดของงานทททาตามลาดบ 3. History St4. New Docu5. New Snap6. Trash But

alette


tate เปนลาดบument คอสวpshot คอสวนtton คอสวนทใ

บขนตอนวธกานทใชสรางกระ

นทใชสราง Snaใชลบขนตอนก

รตาง ๆ ทไดกะดาษทาการใหapshot ใหม การทางานกบไ

ระทาลงไป หม โดยคดลอก ไฟลภาพในลาด

กภาพจากลาด

ดบทเลอกอยอ

บทชอย

ออก

รออกแบบและตตกแตงภาพสาห


วย Adobe Pho

otoshop CS3

11

12


Ph

oto

sho

p C

S3

1. Indicates Layer Visibility คอสวนทกาหนดการแสดงผลของ Layer หากมสญลกษณรปตาแสดงวาภาพทอยใน Layer ดงกลาวถกแสดงบน Work Area หากไมมแสดงวา Layer นนถกซอนหรอไมแสดงผล

2. Indicates if Layer is Linked คอสวนทแสดงวา Layer ใดกาลงถกทางาน Layer นน จะมสญลกษณรปพกน นอกจากนยงสามารถกาหนดให Layer อนเลอนตาแหนงตาม Layer ทกาลงทางานอยไดโดยการคลกให Layer อนเปลยนเปนสญลกษณรปโซ

3. Add a Layer Style คอสวนทใชใส Effect เชน แสง เงา ตาง ๆ ใหกบภาพใน Layer 4. Add a mask คอสวนทใชเพม Mask หรอเพม 1 Layer ซอนทบ Layer ทกาลงทางานอย โดยทง 2

จะถอเปน Layer เดยวกน 5. Create a new set คอสวนทใชสราง Folder สาหรบเกบ Layer ตาง ๆ เขาดวยกน 6. Create new fill or adjustment layer คอสวนทใชปรบคาส ความคมชด แสงและความสวางใน

แบบตาง ๆ ของภาพใน Layer 7. Create a new layer คอสวนทใชสราง Layer ใหม 8. Delete layer คอสวนทใชลบ Layer 9. Layer Thumbnail คอสวนทแสดงวา Layer นนมภาพใดอย 10. Lock คอสวนทใช Lock ในรปแบบตางๆ 11. Opacity คอสวนทใชทาให Layer นนโปรงใส (ทง Fill และ Effect) 12. Fill คอสวนทใชทาให เฉพาะ Fill ใน Layer นนโปรงใส ซงไมรวม Effect ท Layer นนมอย

หมายเหต แถบสนาเงนแสดงวากาลงทางานกบ Layer ทชอวา "เหนอ & วาน" การจดลาดบ Layer สามารถทาไดโดยนาเมาสคลกคางไวท Layer แลวลากไปยงตาแหนงทตองการ หรอใชเมนคาสง Layer -> Arrange

• Bring to Front คอ สง Layer ไปยงตาแหนงบนสดของทก Layer • Bring Forward คอ สง Layer ขนไปตาแหนงบน 1 ขน • Send Backward คอ สง Layer ลงไปตาแหนงลาง 1 ขน • Send to Back คอ สง Layer ลงไปตาแหนงลางสดของทก Layer แตยกเวน Background Layer

หมายเหต เราสามารถเปด Layer palette ไดอยางรวดเรว โดยการกดปม F7

14 เอP

ho

tosh

op

CS

3

รรจกกบ Layyer

โสามารถจทไดแยกก

โปรแกรม Phoจดการกบรปภากนไวในแตละเ

otoshop มกาาพตาง ๆ ไดโดลเยอร โดยไมม

ารทางานกบภาดยงาย และยงมผลกบเลเยอร

าพตาง ๆ แบบมประโยชนอยรอน

บเลเยอร (Layeยางมากในการก

er) ซงถอเปนกลบมาแกไขสว

สวนสาคญททวนตาง ๆ ของ

าใหภาพ

ดานบนล

การทางานของมา สอดคลอง

งเลเยอร เหมองกบในโปรแกร

อนกนกบ การนรม Photosho

นาแผนใสทมรop ทมการจดเร

ปภาพมาวางซรยงเลเยอรตาง

ซอนทบกนเปนง ๆ ไวตามลาด

นชน ๆ แลวมองดบจากบนลงล

งจากลาง


เมอมองภาพจจากดานบนลงมมาจะเหนภาพดดงน

บการอบรม การรออกแบบและต


Too

คลก1. ใหคลกท

เมาสคางไว แลท Marquee Tลวคลกเลอกรป

Tool บน Tooปแบบทตองกา

ol Box หรอหาารสราง Selec

ากตองการเลอction

กรปแบบอนขออง Marquee Tool ให

ของ 3. ใหคลกเ

Selection ดงเมาสคางไวแลงภาพ

ะลากเพอกาหนดขนาดของพพนททตองการ แลวปลอยเมาาส จะปรากฏเเสนประ


การกาหนนดพนท เพพอแกไขและะตกแตงภาพพ (Selectioon)

Marqueel box จะม ให

e Tool เปนเคหเลอกใชงาน 4

ครองมอสาหรบ4 รปแบบตามค

บการกาหนด Sความเหมาะสม

Selection โดยม

ยคลกเลอก Marquee Tooll จาก

Rectaสาหรบสเหลย

บการสราง Selยมจตรส

lectionเปนสเหลยมผนผา แและ

Elliptiสาหรบบการสราง Sellection เปนวงงกลมและวงร

Singleสาหรบแนวนอ

บการสราง Selอน ความกวาง

lection เปนพง 1 pixel

พนทรปเสนตรงงใน

Singleสาหรบแนวตง

บการสราง Selง ความกวาง

lection เปนพ1 pixel

พนทรปเสนตรงงใน

วธการใชชงาน Marqquee Tooll

2. วางตาแแหน ของ Curssor รป เพอกาหนดดจดเรมสาหรบบการสราง Selection


ngular Marq

cal Marquee

e Marquee To

e Column Ma


uee Tool

e Tool

ool

arquee Tool


สาหรบจดทาเวบบดวย Adobe

Photoshop C

CS3 15

Ph

oto

sho

p C

S3

16 เอP

ho

tosh

op

CS

3

M ของ Mar

เมอคลกเลอกใrquee tool ได

ใชงาน Marquดดงน

uee Tools ท Tool options bar เราจะสสามารถกาหนดดคณสมบตตางง ๆ

1. กาSelectio

ารแกไข Selen และการสรา

ection จะมใหเาง Selection

เลอก 4 รปแบดวยวธการตา

บบคอการกาหางๆ ดงน

หนดเลอก Selection ใหม กการเพม ตดแลละลด

2. Fคeather กาหนความฟง เบลอ

นดความฟงเบอจะมากตาม

ลอของขอบ S

Selection ภาพพ มคาตงแต 1 – 250 หากกกาหนดคามาาก

3. S

4. W5. H


Marquee T

เมอคลกเมาสสจะเปนการสรราง Selectionn ขนใหม สราง Selection เพมขน โดดยพนท Seleection กอนหนนาจะไมหายไปป แตจะถกรววมเขาดวยกน ลบพนทของ Selection อออกจาก Selecttion กอนหนาา เปนการสราง

กาหนด ใ Selection ใหใหมและ Sele

หมในพนท Seection กอนหน

election เดม นา ทมพนทเด

ดวยวธ Interดยวกน

sect จากพนทท Selection ทท

Style ของ Marrquee Optionns ม 3 รปแบบคอ • Norm• Consควา

strained Aspม กวาง (Wid

ect Ratio กาth) และความ

หนดขนาดขอมสง (Height)

อง Selection โ

โดยยดหยนตตามอตราสวนขของ

• Fixedควา

d Size กาหนมสง (Height)

นดขนาดของ S) ทแนนอน

Selection ตามอตราสวนขอองความกวาง (Width) และะ

Width การกาหหนดความกวาางของ Selecttion Height การกาหหนดความสงขของ Selectioon


Tool

mal เลอกขนาาดอสระ ขนาดดของ Selectioon จะเปลยนไไปตามการเคลอนตาแหนงเมาส



Size

Too 1. La Seleกาหน

เปนการสection ทตองกนดคณสมบตข

สราง Selectioการ จนมาบรรของ Lasso To

on อยางอสระ จบทจดเรมตน

ool ตาง ๆ ไดด

วธการใชงานเนแลวจงปลอยเดงน

เมอคลกเมาสคเมาสจะปรากฏ

คางแลวลากไปฏเสนประของ

ตามขอบของพSelection สา

พนท ามารถ


การสรางง Fixed Sizze Selection

ถาตองกา และกาหนดค

ารสราง Selecความกวางและ

tion ขนาดกวความยาวตาม

าง 600 ยาว 8ทตองการ

80 Pixels ใหเปปลยนชอง Styyle เปนแบบ FFixed

1. เลอก Stylee เปนแบบ Fixed Side 2. Width การรกาหนดความมกวางของ Seelection 3. Height กาารกาหนดความสงของ Seleection

Lasso T

เปนเครอl bar จะมใหเ

งมอทสามารถเลอกทงหมด 3

สราง Selecti3 รปแบบดงน

on ไดอยางอส

สระ มความยดดหยนสง เมอคลก Lasso Toool ท

asso Tool

1.2.


Tool

. Feather กาหหนดความฟงเบลอของขอบบพนท Selecttion

. Anti-aliased


d กาหนดใหขอบของพนทททเลอกมความเรยบยงขน ไมขรขระ


สาหรบจดทาเวบบดวย Adobe

Photoshop C

CS3 17

Ph

oto

sho

p C

S3

18 เอP

ho

tosh

op

CS

3

2. Polyg จดเรมตนSelectioSelectioคณสมบต

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

พนทของ Seleลว ลากเมาสจะรงเชอมจากจดหคลกเมาสบร Lasso Tool

ection ในลกษะปรากฏเสนตอดตนมายงจดปลรรจบทจดเรมต

ษณะของรปหลอจากจดเรมตนลายเมาสทคลกตนครงแรก จะ

ลายเหลยม คลกนกบปลายเมาสก ใหทาแบบนเกด Selectio

กเมาสบนภาพส วธการใชงานนเรอย ๆ เพอสn ขน สาหรบก

พเพอกาหนด นเมอคลกเมาสรางเสนขอบขอการกาหนด

ส อง

3. Magn Magnetiพนท SelพนททตอคลกเมาสLasso To

เปนการสรางพc Lasso Toolection วธการองการเลอก Mสบรรจบทจดเรool ไดดงน

พนทของ Selel จะใชความแรใชงานเมอคลagnetic Lassรมตนครงแรก

ection อยางอตกตางระหวางลกเมาสเพอกาหo Tool จะเลอ จะเกด Selec

สระและรวดเรงสทเลอกกบสหนดจดเรมตนอกขอบเขตพนtion ขน คณส

รวในลกษณะขของ Backgro

นแลว ใหปลอยนท Selectionสมบตของ Mag

ของแมเหลกทดund เปนตวกาเมาสแลวลาก เองโดยอตโนมgnetic Lasso

ดดเขาหาส โดยาหนดขอบเขตเมาสตาม ขอบมต จน สดทาย Tool มเพมจ

ย ต บเขตยใหาก


gonal Lasso

netic Lasso T

1. Width มคาเลอก นบต

าตงแต 1-40 pตงแตจดทเมาส

pixels เปนกาสชอยไป X pix

รกาหนดใหโปxels เพอกาหน

รแกรมทาการนดขอบเขต

ตรวจสอบหาขขอบเขตของพนนทท

2. Edge ConContrast

3. Frequencการ เลอกม

cy มคาตงแต 0มาก ทาใหโปร

0-100 pixels รแกรมสามารถ

หากคาความถถเลอกพนทอยา

ถมากจะทาใหมางมความถกตอ

มการกาหนดจดองมากขน

ดในแตละชวงขของ


Tool

Tool

trast มคาตงแ กนมาก

แต 0-100% หหากมคามากจะะทาใหเสนขอบบของพนททเลออกอยระหวางสสท





box Wan

วธกา

Sele

หรอ

กาหนดพ

ารใชงานคอคล

ection แลวจง

ปม เพ

นทของ Selec

ลกทปม

ปลอยเมาส เม

พอยกเลก นอก

ction โดยตดส

บน Tool box

มอพรอมทจะต

กจากนเรายงสา

สวนทเหลอทไม

x แลวคลกเมา

ดสวนทเหลออ

ามารถกาหนด

มไดอยในพนท

สคางไวจากนน

ออก ใหคลก

คณสมบตตาง

ของ Selectio

นลากเมาสเพอ

ปม บน T

ๆ ของการตด

on ในภาพทงไป

อกาหนดพนทข

Tool options

ด ดงน

ป

ของ

s bar


Magic W

กาหนดพ แลวคลกเลอกnd Tool ไดดง

นทของ Selecกพนททตองกางน

ction โดยเลอารสราง Selec

กบรเวณทมคาtion นอกจาก

าสใกลเคยงกนกนแลวยงสามา

วธการใชงานารถกาหนดคณ

คอคลกทปม บณสมบตของ Ma

บน Tool agic

1. Toleran2. Anti-alia3. Contigu

ถา ไมไดuous สามารถทด Check ไวจะ

ทาการเลอกบระเลอกบรเวณท

รเวณสทใกลเคทมสใกลเคยงก

คยงกนไดเฉพากนในภาพทงหม

ะในกลม pixeมด

els ทไดคลกเลอกเทานน

4. Use All Magic W

Crop To


Wand Tool

nce มคาใหกาหนดตงแต 0 –– 255 pixels เปนคาของจานวนสทใกลเคยงกบสทถกเลลอก ased กาหนดใใหขอบของพนนททเลอกมควาามเรยบยงขน ไ ไมขรขระ

Layers เลอก Wand Tool เ

กสโดยมองทก เฉพาะ Layer

Layer เปนเหม นนเทานน

มอน Layer เดดยว หากไมถกก Check ไว หมายถงใช

ool

1. Cropped• Dele• Hide

2. Shield c3. Color สททจะแสดงบนพพนทสวนทเหลอ 4. Opacity 5. Perspect


d Area เลอกผผลลพธของภาพพทตด ete ตดภาพ โดดยลบสวนทเหลลอออก e ตดภาพ โดดยซอนสวนทเหหลอเอาไว ropped area

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


a แสดงสบนพนนทสวนทเหลออทจะถกตดออก

สาหรบจดทาเวบบดวย Adobe Photoshop CS3 19

C

Ph

oto

sho

p C

S3

20 เอP

ho

tosh

op

CS

3

คคาสงพนฐานนของ Selection

• All• De• Re หลลงจากไดยกเลกกไป • Inv จากกทกาหนดไวใหหเปน พนทตรรงขาม

กการใช Trannsform เพออปรบเปลยนพนท Sellection


l กาหนดพนท Selection โดดยใชพนทของงรปภาพทงหมด eselect ยกเลกการกาหนดพพนท Selectioon eselect ยอนกกลบไปกาหนดพนท Selectioon

verse เปนการรเปลยนพนทขของ Selectionn


คลกTrทเมนคาสง Edransform

dit ทแถบ Menu bar จากนนนเลอกคาสง

- Ag- Sc

ทแcale ปรบเปลยแยง

ยนแบบ Scalee ตามแนวตง แแนวนอนและแแนว

- Ro- Sk- Dis- Pe

แบerspective ปบบ Perspecti

รบขนาดของพive (แบบมมต

พนทเลอกใหมล ความกวาง ค

ลกษณะการมอความยาว ความ

องมลก)

- Ro- Ro- Ro- Fli- Fli


gain กลบสรปแบบเดมกอนหหนาน 1 ขน

otate หมนพนนททเลอก kew ปดเกลยวพนทเลอก stort การบดเเบอนพนทเลอก

otate 180 CWotate 90 CWotate 90 CCWip Horizontaip Vertical กกลบจากบนลงลลาง


W หมน 180 อองศา W หมน 90 องศศาตามเขมนาฬฬกา W หมน 90 องงศาทวนเขมนาาฬกา al กลบจากซายเปนขวา


ใหเปเปนส

สามารถเปปลยนส ถาตองสทสามารถแส

ปลยนสไดโดยงการสสาหรบกดงผลบนเวบได

ดบเบลคลก ทการทาเวบโดยเดถกตอง

ทกรอบ Foregrเฉพาะกสามาร

round หรอ Bรถคลกทชอง O

ackground จOnly Web Co

จะปรากฏ Cololors แลวสทป

or Picker ปรากฎจะ

ho

P

ส


การใชงาาน Foregroound และ Background Color

การใชงานนในสวนของ FForeground แและ Backgrouund Color สาามารถทาไดทสสวนของ Toollbox

การใชงา เราสามาร

toshop จะสรราง Layer ใหมมอตโนมต ลกษษณะของขอคววามจะม 2 รปแบบคอ

สพนหนา (Fo


าน Type T

รถสรางขอควา

คาปกต (Deffault)

oreground C


Tool

ามไดทงในแนว

Color)


วนอนและแนว


ตง การสรางข

สลบส

สพนหล

บดวย Adobe

อความแตละค

ส (Switch Co

ลง (Backgrou

ขอควาขอความในแนวตง ขอควาาม Selectionขอควาาม Selection ใในแนวตง

Photoshop C

ครงโปรแกรม A

olor)

und Color)

มในแนวนอน

ใ

CS3 21

Adobe

Ph

oto

sho

p C

S3

ในแนวนอน

22 เอP

ho

tosh

op

CS

3

อความ ข บชนงาน โป

บน ปรแ

เมอพมพขขอความเรยบรรอย ใหคลกทปปม เพออตกลง หรอคลกปม เพพอยกเล กเดยวกน าหนด

(สามารถพ

ปม

พมพขอความแ

เพอตกลง หร

และจดเปน Par

รอคลกปม

ragraph ไดจา

เพอยกเลก

าก Paragraph

ก

h Palette เมออพมพขอความเรยบรอย ใหคคลกท

แ

แกไขเรยบ

ว จงปรบแกไ

บรอยแลวจง ค

ขขอความ หรอ

คลกปม

อเปลยนแปลง

เพอตกลง

คณสมบตตาง ๆ ของขอควาามบน Tool options bar เมมอถบส แล

คType MaSelectioตองการต

เพอเลอก Hoask Tool แลว

on ทเปนตวอกตาม Selection

orizontal Typวพมพขอความษร จากนน สาn ของขอความ

pe Mask Tooมทชนงาน เมอพามารถทจะคดมนนได

l หรอ Verticaพมพเสรจ จะเลอกลวดลายภ

al เกดภาพท

ลกทปม


1. แบบ Poin

กรมจะสร

2. แบบ Para

(Bounding b

หากตองการแล

หากตองการต

สามารถทาไดโ


nt Type จะมร

าง Type Lay

agraph Type

ox) โดยกาหน

แกไขขอความท

ตวอกษรทมลวด

โดยใชสราง Se


รปแบบเปนคา

er ขนมา และ

e จะมรปแบบเ

นดจดขอบเขตข

ทพมพใหคลกท

ดลายของภาพ

election ของ


าหรออกษรสน

สามารถพมพข

เปนขอความทม

ของขอความทใ

ทปม แ ล

Background

ตวอกษร ซงมว


ๆ 1 บรรทด โ

ขอความลงไปไ

มหลายบรรทด

ใส โปรแกรมจ

ลวลากเมาสบน

d เชน

วธให

วย Adobe Pho

โดยกาหนดจด

ได

ก

ด โดยจะอยภา

ะสราง Type

นขอความทตอ

otoshop CS3

เรมตนของ

ยในขอบเขตท

Layer ขนมา

องการแกไขใหเ

ท

และ

เกด

War


คณสมบตตาง ๆ ขออง Type Tool

p Text เมอคลลกปม จะปรากกฏ Dialog สาาหรบกาหนดคาเพอปรบแตงรปทรงของขออความ

กอบการอบรม การออกแบบแล

ละตกแตงภาพสสาหรบจดทาเวบบดวย Adobe Photoshop C

CS3 23

Ph

oto

sho

p C

S3

24 เอP

ho

tosh

op

CS

3

กการใชงาน LLayer ให ชดเจนดานบนลShow La

ลกษณะการทน โดยการทางงมา ดานลาง วayer ถาหากพ

างานของ Layานแตละครงจวธการเรยกใชบวา Hide La

yer เปนเหมอนะมผลกบ Layงาน Layer คลyers แสดงวา

นแผนใสวางซอyer ทเลอกอยเลกทเมนคาสง Palette Laye

อนกนเปนลาดบทานน การมอ Window ทแer ถกแสดงแล

บของรปภาพ ชงจะอยในลกษถบ Menu baลว

ชวยแยกการทษณะมองจากar เลอกคาสง

างาน

ตองการ ท ตองกา

Active Layer การเปลยนลาารแลวปลอยเม

r คอ Layer ทดบของ Layer

มาส

กาลงถกทางานr สามารถทาได

นอย สามารถเดโดยคลกเมาส

เลอก Layer ไดสท Layer คางไ

ดจากการคลกไวแลวลากไปย

ทแถบ Layer ยงลาดบของ L

ทLayer

Shift คางใหคลกท

หากตองการเคงไว จากนนให สญลกษณรปโ

คลอนยาย Layคลกเลอก Layโซ เพอเช

yer โดยให Layyer ทตองการใชอม Layer เห

yer อนเคลอนใหเชอมโยงกนหลานนเขาดวย

นยายตาม ใหคน จะเปนการเลยกน

ลกเลอก Layeลอกหลาย Lay

er แรก แลวกดyer พรอมกน แ

ดปม แลว

Indic


ทชอง Indicattes Layer Vissibility หากปรรากฏสญลกษณณรปตา หมายความวา Layeer นนถกแสดง

แตถาตองการลบ Layer หลลงจากคลกเลอก Layer ทตอองการแลวใหคลลกทปม

Act

ates Layer Vi


tive Layer

sible




การสราง Layer ขนใหมม ใหคลกทปม หากตองกการคดลอก Laayer ใหคลก LLayer ทตองการเชนเดยวก

รแลวลากมาปลกน

ลอย ลงทปมน

วย Adobe Pho

Lin

otoshop CS3

nk Layer

ทงห

เปนการกมด 4 รปแบบ

กาหนดคณสมบดงน

บตตาง ๆ เพอบบงคบไมให Laayer ถกเปลยนนแปลงหรอไดรรบผลกระทบใด ๆ ม

เมน Laye

เปนการร Layer แลวจะer ดงน

รวมชนของ Layะปรากฏเมนยอ

yer ตงแต 2 ชอย สาหรบเลอ

ชนขนไปมาไวรอกแบบตาง ๆ ข

รวมกน โดยคลของการ Merg

กทge


การ Locck Layer

1. Lock 2. Lock 3. Lock 4. Lock

การ Merge Layer

- Mergeอยกบ สญลกษจะมขอ

Down หรอ Layer ทอยลาษณ รปโซ จะมอความวา Mer

Merge Linkeาดบถดลง โดยมขอความวา Mge Down

ed เปนการรวยถา Layer ทอMerge Linked

วม Layer ทใชอยลาดบถดไปมd แตหากไมมร

งานมรปโซ

- Mergeทงหมด

Visible เปนด

การรวม Layeer ทถกแสดงหหรอมองเหนได

- Flattenโดยมช

n Image เปนอวา Backgro

นการรวม Layeund และจะล

er ทกลาดบชนบ Layer ทถก

นเปน Layer เกซอน ทงไป

ดยว


transparent image pixel position หามไมใหมการเคคลอนยายตาแหหนงของ Layeer all หามโดยใชชการกาหนดคณสมบตของททง 3 ขอทกลาววมา


t pixels หามไมใหเตมสหรออปรบแกสลงไปปใน pixels ทโโปรงแสงบน LLayer ได ls หามไมใหมกการแกไขหรอตตกแตงภาพบนน Layer



บดวย Adobe Photoshop C

CS3 25

Ph

oto

sho

p C

S3

26 เอP

ho

tosh

op

CS

3

กการเปลยนชชอ Layer

Propertie

กการจดกลม Layer

ไป เชน กคาสงใด ๆ

เปนการรวบรวการด คดลอก เๆ ของ Layer

วม Layer ตางเคลอนยาย แล Group จะเกด

ง ๆ มาไวเปนกละการเปลยนลดขนกบ Layer

กลม Layer Grลาดบ ยกเวนคr ภายในทก La

oup สามารถใาสงบางคาสง ayer

ใชคาสงตาง ๆ เชน Layer Ef

เหมอน Layeffect ดงนนใช

er ทว ช งาน

จดเกบคา

การสราง Layางไว แลวลากท

yer Group คลท Layer Grou

ลกทปม เup จากนนใหป

เพอสราง Groปลอยเมาส

up หลงจากนนนใหคลกเลอก Layer ทตองกการ

เปลยนชอ

หากดบเบลคลอของ Layer G

ลกท Layer GrGroup และแถ

roup จะปรากถบสได

กฏ Dialog ของง Layer Grouup Propertiess ซงสามารถ


หากตองการเes จะปรากฏ

เปลยนชอของ Dialog ของ

ง Layer ใหคลLayer ซง สา

ลกขวาท Layeมารถเปลยนช

er ทตองการ ชอของ Layer

แลวคลกเลอกr ได และแถบ

ก Layer สได


ตกแตงภาพสาหหรบจดทาเวบดววย Adobe Pho

otoshop CS3

ปรบFilte

ฟลเตอร เปลยนรปแบบ

er ไดโดยเลอก

(Filter) คอกาบของภาพตาม Menu > Filt

รตกแตงภาพดความตองการขter > เลอกใช

ดวยเทคนคพเศของงาน เราสา Filter ทตองก

ศษ ทสามารถามารถใชงาน การ

Filteหนาปม O

เมอเลอกer สามารถทจะจอการปรบเปOK เพอจบขน

เสรจแลวจะประกาหนดไดตามลยนลกษณะขตอนการทางา

รากฏหนาจอกมตองการ (ใน ของ Filter จะไนของ Filter

การปรบเปลยน Filter แตละตไมเหมอนกน)

นลกษณะของ ตวนน เสรจแลวกด

จออกไ

จะไดภาพทมกาไป

ารตกแตงดวย Filter: Radial Blur ออกมาา ทงน ถาใช Filter อนรปงานนทปรากฏ จะตางกน


การทาภาพโดยใช FFilter

กอบการอบรม การออกแบบแลละตกแตงภาพสสาหรบจดทาเวบบดวย Adobe Photoshop C

CS3 27

Ph

oto

sho

p C

S3

28 เอP

ho

tosh

op

CS

3

ตตวอยาง Filtter ทนาสนนใจ




การใชงาาน Layer SStyle

คลกทเมนน Layer > Laayer Style >> Blending OOptions จะปรากฏหนาตางงดงภาพขางลาง

(1) คอ Style ทตองการใชกบ Layerr ทเราเลอกไว จะมใหเลอก 110 แบบจากบนนลงลาง (2) คอ กการกาหนดคาตตางๆ ของแตละ Style ซงจะะแตกตางกนไปปในแตละ Stylle



ละตกแตงภาพสสาหรบจดทาเวบ


CS3 29

Ph

oto

sho

p C

S3

30 เอP

ho

tosh

op

CS

3

กการเปลยนรรปรางของรปป (Transfoorm) คาสง Tra

เราสามารถเปansform โดยค

ลยนแปลง Laคลกเลอก Edi

yer ในรปแบบt > Transfo

บตางๆไดเชน กrm > (เลอก

การยอ/ขยาย Transform F

การหมนภาพ Function ทต

การบดภาพ ดตองการ)

ดวย

ลกษณะะของ Transform

กการปรบคาคความสวาง//ความคมชดด (Brightneess/Contrast) Brightne


การปรบความess/Contrast

มสวาง-ความมด โดยเลอกคลก

ดของภาพ และท Image > A

ะการตดกนขอAdjust > Brig

องสทชดเจนขนghtness/Con

นนน สามารถทntrast

ทาไดโดยใชคาสสง

บการอบรม การรออกแบบและตตกแตงภาพสาหหรบจดทาเวบดววย Adobe Phootoshop CS3

Ima โดยสSizeของภ

Image Sสามารถใชคาสe… จะปรากฏหภาพขนมาดงร

ize คอการ ลดสงนไดจากเมน หนาตางทใหเรป

ด/ ขยายรปภา Image > Imรากาหนดขนาด

าพmage ด

Can รป โโดยก

การ Canโดยเพมพน Baกาหนดทศทาง

vas Size คอกackground แลงได ดงรป

การลด/ ขยายพละสามารถขยา

พนทายรป

1 2 3Size จะเปCurr

3. Relative เปน เครองหมาย �ปน 0 สามารถเพent Size ขนาด

นคณสมบตบอก� คาในชอง Wiพมพนทงานโดยดของงาน

กคาขนาดของ Nidth และ Heigยไมตองรวมคา

New ght

4ทศท

. Anchor ททาางทตองการ

งทตองการเพมมขนาดใหไปใน


การปรบขนาดของชชนงาน

ge Size

ใหเลอกสอง(1) Width(ก

งแบบคอ Pixeกวาง) และ Heel และ %

ight(สง) ของรรปภาพ สามารรถกาหนดไดตาามตองการ โดยมหนวย

ขนาดภาพไผลทไดกคอ

(2) Constraไวดานใดดานหอ ไมวาจะยอหร

in Proportioหนงแลว โปรแกรอขยาย รปภา

ns Sign เมอสกรมจะกาหนดาพทออกมากจ

สญลกษณนปราดสดสวนของดาจะมอตราสวนข

ากฏดงรป แสดานทเหลอใหเอของ กวาง x ส

ดงวาเมอเราไดอง(อตราสวนทงเทาเดม

ดกาหนดเทากน)

เหมอนอตรกวางและสง

(3) Constraราสวนเดมใหคงสามารถกาหน

in Proportioลกท Check Bนดไดตามตองก

ns Check Bo Box ออก เครอการ

ox จาก (2) เมอองหมาย � จะ

อเราไมตองการะหายไปหลงจ

ร ยอ/ขยาย รปากนนการกาห

ปภาพใหหนดขนาด

nvas Size

. Current Size2. New Size ขนนาดทเพมขนจาาก


e ขนาดปจจบนนของงาน

การออกแบบแลละตกแตงภาพส


บดวย Adobe

Photoshop C

CS3 31

Ph

oto

sho

p C

S3

32 เอP

ho

tosh

op

CS

3

กการตดกรอบบของรป (Crop) บางครงรโดยใชเคร

การ Crop คอปภาพกมขนาดรองมอสองชนด

อ การตดกรอบดใหญเกนไปไดดน ดงน

บภาพเอาเฉพาะดเชนกน เราสา

ะทตองการ นอามารถตดกรอบ

อกจากรปภาพบภาพ (Cropp

จะมขนาดเลกping) ใหเหลอเ

กเกนไปแลว เฉพาะทตองกาารได

วธท 1 การตดกรอบภาาพโดยเครองมมอ Rectanguular Marqueee Tool

2

วธท 2 การตดกรอบภาาพโดยเครองมมอ Crop

2

4 ตวอยางกการ Croppinng


1. เลอกเครองงมอ บนนแถบเครองมออและกาหนด FFeather ใหเทากบ 0 กอน 2. สราง Selecction ทภาพในนสวนทตองกาารตดกรอบ 3. เลอกเมน Immage -> Crop จะไดรปจากกการ Croppinng

1. เลอกเครองงมอ บนแถบเครองมอ 2. สรางพนทท

ขนมา บรเทตองการตดกรวณสเทาคอ บ

รอบภาพ สงเกรเวณของรปภ

กตวาจะเกดแถภาพทถกตดทง

บสเทาขนบรเวนนเอง

วณรอบนอกขออบกรอบทสราาง

3. ปรบแตงพนนททเลอก

4. คลกปม เพอยนยนนการตดกรอบรรปตามตองการร (กรณ ยกเลกก ใหคลกปม แทน)

บการอบรม การรออกแบบและตตกแตงภาพสาห


นอยจะตอของผเชอมแสดง

ในการใชภจนเกนไป ขนาองโหลดไฟลทผใช โดยปกตแมตออนเทอรเนงผลภาพขนาด

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

าหรบจดทาเวบมขนาดเลก เพอบเปนหนาเวบในการโหลดหนในการเขาชมเวหการแสดงผลใ

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

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

งออกแบบใหเหลไดอยางรวดเรปทเครองของผจยดวยกน เชนอบเวบจานวนม

หมาะสม ไมมารว เพราะผเขาผใชเพอแสดงผน ระดบความเรมากดวย โดยเฉ

ากหรอาชมเวบผลทเครองรวของการฉพาะการ

ยงขนและค

ดงนนเราน โดยเฉพาะขคา ความละเอ

จงจาเปนตองเนาดของไฟลภ

อยด Resolutio

เลอกไฟลภาพทภาพทเหมาะสมon = 72 ppi

ทมขนาดเลก เม ในการนามาใ เปนตน

เพอใหโฮมเพจใชในอนเทอรเ

ของเราสามารเนตควรมขนาด

รถแสดงผลไดรดประมาณ 20

วดเรว - 40K

ขนาดดของไฟล


งานกราฟฟคสาหรบจจดทาเวบ

1024 by1024 KB1024 MB

ภาพ Jpeg กาหนนด quality=100%% ขนาดไฟล 31.77 KB ภาพ Jpeg กาหนด quality=550% ขนาดไฟล 9.96 KB

ภาพ Gif กาหหนด Colors=8 ขนาดไฟล 5.17 KBB ภาพ Png-8 กกาหนด Colors=1128 ขนาดไฟล 133.7 KB


ytes = 1 B (K) = 1 B (M) = 1


KB MB GB


CS3 33

Ph

oto

sho

p C

S3

34 เอP

ho

tosh

op

CS

3

ชชนดของไฟลลทนยมใชในนเวบ ความสามเหมาะสม

เนองจากไฟลภมารถในการบบมกบภาพทมลก

ภาพทใชในโฮมบอดขอมลหรอกษณะแตกตาง

มเพจนนจะตอลดขนดของขอกนดงน

งเปนไฟลทมขอมลไดมาก ๆ

นาดเลก ดงนน เชน GIF, JPEG

นเราจงควรเลอG, PNG ซงไฟล

อกใชไฟลทมลแตละชนดมคความ

GIF (Gra ภาพโลโกและภาพเ

เรามกจะใชในก เปนตน เนองเคลอนไหวได

นการบนทกภาพงจากสามารถแ

พทมความละเแสดงผลสไดเพ

อยดนอยหรอมยง 256 สเทาน

มลกษณะเปนลนน นอกจากน

ลายเสน เชนภนยงสามารถแส

าพการตน หรดงภาพแบบโป

อปรงใส

JPG , JPE หรอภาพธไดโดยกา

เรามกใชไฟล Jธรรมชาต เนอรลดคณภาพข

JPEG เมอตององจากไฟล JPEองภาพลง

งการแสดงภาพEG นนสามารถ

พทมความละเอถแสดงผลสได

อยดพอสมควร16.7 ลานส เร

เชน ภาพถายราสามารถลดข

ยทมจานวนมากขนาดของไฟล J

ก ๆ JPEG

PNG (Po แลวยงคงขนาดเลก

ไฟลแบบ PNGงมคณภาพไมแกลง กสามารถล

G สามารถบบอแตกตางกน แลลดคณภาพขอ

อดภาพไดมากกะยงสามารถแสงภาพลงไดอก

กวา ไฟลแบบ สดงผลไดเรวก

GIF ประมาณกวาไฟลแบบ G

ณ 30% โดยภาพGIF นอกจากนห

พใหมทถกบบอหากตองการไฟ

อดฟล

กการลดขนาดดและแปลงไไฟลเพอใชงงาน 1. เปดไฟฟลทตองการปรรบแตง ดวยคาาสง File > Oppen


phics Interch

EG (Joint Pho

ortable Netw

เราสามารถลดดขนาดและแปลงไฟลไดโดยใใชคาสง Save for Web & DDevice มขนตออนดงน


hange Forma

otographic E

work Graphics


at)

Expert Group

s)


p)


2. ใชช Crop Tool ตดเอาเฉพาะภภาพสวนทตองงการ 3. เลลอกคาสง File > Save for W Web & Devicce… จะม diallog แสดงขนมมาดงรป

ตนฉภาพหากดโปรแเพมเตองก

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

ลอกท 4-Up โปมมบนดานซาย เลอกปรบแตงม กสามารถเลไวใหแลวกได หกได ทงน กขน

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

ภาพๆ เปนาง ถา

ตงพทเรา

โดยก

จากนนคลกาหนดชอใหม

ลกทปม Save ทชอง File n

เพอบนทกภาame

าพ

เอกสารประกกอบการอบรม การออกแบบแลละตกแตงภาพสสาหรบจดทาเวบบดวย Adobe Photoshop C

CS3 35

Ph

oto

sho

p C

S3

36 เอP

ho

tosh

op

CS

3

กการสรางภาพพขอบมน คอนขางใ

1. เปดไฟลภาใหญเราสามาร

พทตองการ แถปรบขนาดให

แลวปรบขนาดหเลกลงดวย Im

ภาพใหเหมาะmage > Imag

สม เชนภาพตge size…

วอยางเปน ภาาพถายทมขนาด

ใโปรแกรม

ในตวอยางไดปมจะกาหนดใหเ

ปรบคาความกวเองโดยใหภาพ

วางใหเปน 50ยงคงไมผดเพย

0 pixel สวนคยน

ความความสง

เพอเลอกพนททงหมด


2. คลกเลอกคคาสง Select >> All หรอกด Ctrl-A

3. จากนนเลออกคาสง Select >


Modify > Sm


mooth…


SeleSele หรอ

5. จากนนกด Ctrl - c แ

นเราสามารถ คแลววางภาพท

คดลอกรปภาพ copy มา ไดโ

พตามทเหนตามโดยการเลอกเม

มรอบ Selectiมน Edit > Pas

ion โดยการเลste หรอกด C

ลอกเมน Edit >trl-v

> Copy

ขอบ

6. จากนน จะไดผลดงภา

นสามารถใช Lาพ

ayer Style ปปรบแตงภาพทเเราคดลอกมาเเพมเตมได โดยยการใสเงา ใสสสเสน


4. ทชอง ection เปนขอ

Sample Radองมนแลว แตถ

dius ใหใสคาปถาตองการกรอ

ระมาณ 30 pบขอบมนทเลก

pixels แลวคลกกกวานกสามาร

กปม OK จะสงรถ ใชคาสง

งเกตเหนขอบขของ

ect > Tranfor


rm Selection


n เพอปรบแตงงขนาดของ Selection ไดดงรป


CS3 37

Ph

oto

sho

p C

S3

38 เอP

ho

tosh

op

CS

3

กการซอนภาพพหลายภาพพเขาดวยกนน รวมถงกาไดดงน

เทคนคการซอารซอนภาพตวอ

อนภาพหลายๆอกษรเขาไปใน

ภาพเขาดวยทนภาพ เรามกพ

ทาใหเกดภาพใพบเหนภาพลก

ใหม ทนาสนใจษณะนมากมา

จ เปนเทคนคทยในเวบ การซ

นยมใชกนมากซอนภาพสามาร

ก รถทา

1. คลกท File > New เพอกาหนดขนนาดงานใหม โดยกาหนดคา ดงน 2. จากนนนเปดภาพทตอองการนามาซออนกนภาพแรก โดยเลอกคาสสง File > Opeen

3. ใชเครอองมอ คคลกทภาพทตอองการแลวลากก (drag) มาวาางบนภาพทเราาเตรยมไว


Width = 900Height = 100Resolution =Color ModeBackground


0 pixels 0 pixels = 72 pixels/i เปน RGB Coolor Contents เปปน Transpareent


nch


4. ถาการป

าภาพท นามาวปรบแตงขนาด

วางมขนาดไมภาพใหเหมาะ

เหมาะสมเราสสมกอนได

สามารถใชเครรองมอ Edit > > Transformm > Scale มาชวยใน

6. เลเปนหmas

ลอก Layer 3 หนากาก ใหภาsk จดประสงคข

(อยดานบนสดาพใน Layer 3ของเราคอ ตอ

ด) แลวคลกทป3 ทาใหเรามองงการใหเหนสว

ม Add layer งไมเหนภาพในวนขอบของภา

mask เพอสรน Layer 3 ทตรพใน Layer 3

ราง layer maรงกนกบตาแห แบบคอย ๆ จ

ask เปนเลเยอหนงของสดาใน จางลง

รทจะมา Layer

เอกสารประกกอบการอบรม การออกแบบแล

ละตกแตงภาพสสาหรบจดทาเวบ

5. จากนนเปดภาพ แลวใชเคงานทเราเตรย

ดภาพทตองกาครองมอ คลกแยมไว ดงรป

ารนามาซอนกนแลวลากเขามา

นอกภาพาในพนท


layer m

CS3 39

Ph

oto

sho

p C

S3

mask

40 เอP

ho

tosh

op

CS

3

7. คลกเลpixel โดย

ลอกท Layer mยประมาณ จา

mask แลวเลอกนนใช Brush

อกเครองมอ Bh ระบายทขอบ

Brush เลอกขนบของภาพบน L

นาดหวแปรง เปLayer 3 เพอใ

ปนแบบขอบฟงหขอบภาพคอ

ง ขนาด 30 - ย ๆ จางหายไป

100 ป

8. เราสามมารถนาภาพใหหมเขามาแลวใใช วธการเดมตตามขอ 2 - 7 ไไดตามตองการร

9. จะไดภภายหลง

ภาพสาเรจดงงร

รป จากนนเราสามารถบนทกกไฟลเปน PDFF เพอทเราจะสสามารถกลบมาาแกไขเพมเตมมไดใน

อกสารประกอบบการอบรม การรออกแบบและตตกแตงภาพสาหหรบจดทาเวบดววย Adobe Phootoshop CS3

10. เภาพ

เมอเราตองการทมรายละเอย

รนาไปใชงานจดสง ควรเลอก

จรงในเวบ เลอกใชเปนไฟลภา

กเมน File > Sพแบบ JPEG จ

Save for Weจะเหมาะสมท

b & Device…สด

… เนองจากภาาพเปน

สวยงดงรป

การออกแงานได จากตวป

แบบโฮมเพจนนอยางนามาเปน

นสวนสาคญสวน เมนทเปน te

วนหนงคอ ปมext menu ซง

เมน เราสามารงเราตองการ อ

รถใช Photosออกแบบ grap

hop สรางภาพhics menu ม

พเมนทมาใชแทน


การสรางงภาพปมกดดสาหรบใชงงานบนเวบ


การออกแบบแลละตกแตงภาพสสาหรบจดทาเวบบดวย Adobe Photoshop C

CS3 41

Ph

oto

sho

p C

S3

42 เออกสารประกอบบการอบรม การรออกแบบและตตกแตงภาพสาหหรบจดทาเวบดววย Adobe Phootoshop CS3

Ph

oto

sho

p C

S3

1. เราจะสpixels สงppi ใหสรNew แลว

สรางปมเมนขนง 30 pixels ครางไฟลงานใหมวกาหนดคา ดง

นาด กวาง 18ความละเอยด มโดยเลอก Filงรป

80 72 le >

2. สรางเลพนททงหBackgrou

ลเยอรสพนโดยหมดดวยคาสง und Color

ยเลอกสพนหลSelect > All

ลง เปนสทตองก แลวเลอก Ed

การ แลวเลอกit > Fill เลอกก

3. จากนนใหมมสรป

นใหใชเครองมปภาพตามส Fo

อ สรางกoreground

กรอบเมน โดยเลอกส Foregground กอนเพอใหรปทสรางขนมมา

4. เลอกเคครองมอ เพอพมพขอคความบนเมน 5. เมอปรรบแตงแลว บนนทกไฟลเปน PPSD ไวสาหรบ การแกไข แลวบนทกดววย Save for W Web เพอ การนาไปปใชงานจรง

Documents

เอกสารอบรม Adobe Photoshop CS3