การใช้โปรแกรม Photoshop

การใช้โปรแกรม
Photoshop

BI Systems Services Ltd.,Part

การใชโ้ ปรแกรม Photoshop

การใชโ้ ปรแกรม Photoshop

โปรแกรม Photoshop คอื อะไร
โปรแกรม Photoshop เป็นโปรแกรมสาหรบั สร้างภาพ และตกแตง่ ภาพ ซง่ึ เปน็ ลิขสิทธขิ องบรษิ ทั

Adobe ซงึ บรษิ ทั Adobe มผี ลติ ภณั ฑซ์ อฟแวร์เกยี วกับดา้ นกราฟิก มากมายเช่น Adobe illustrator สาหรบั
ทา ภาพเวกเตอร์ Adobe Pemiretor สาหรับตดั ต่อภาพยนต์ ฯลฯ โปรแกรม Photoshop เปน็ โปรแกรม
ตกแต่งภาพทีไดร้ ับความนิยมมาก เนอื งจากเป็นโปรแกรมทีใชง้ ่าย และรองรับ Application (Plug In) เสริมได้
มากมาย

ลกั ษณะเดน่ ของ Photoshop
1. Photoshop ทางานเป็น Layer
ลักษณะการทางานของ Photoshop จะเหมือนการวางแผ่นใสซอ้ นๆ กนั โดยแต่ละแผ่นจะมีการ
ทางาน ตา่ งกนั แตเ่ มอื รวมกนั แลว้ จะเปน็ แค่ภาพภาพเดียว แต่ละแผน่ ใส(Layer) สามารถสลับไป
มาได้

การใชโ้ ปรแกรม Photoshop

2. รปู แบบคาส่ังเปน็ แบบ Interface
Enhancement ไอคอนและปุม่ คาสั่งต่างๆ จะ
อยใู่ นรปู แบบของ Toolbox , Toolbar และ
Dialog Box ซ่งึ จดั ไว้เป็นหมวดหมู่ โดยคลิก
เพอ่ื ใชง้ าน และจะมีการตอบโต้ การใช้งานเปน็
แบบ 3 มิติ คอื เมือ่ คลกิ ปุม่ จะยุบลงไป

3. สนับสนนุ การทาการบนเว็บไซต์
เน่ืองจากไฟลภ์ าพที่ใชบ้ นเวบ็ ไซต์มหี ลายประเภท และโปรแกรม Photoshop สามารถ สร้างภาพทีใ่ ช้
งานบนเว็บไซต์ไดห้ ลากหลาย

เตรยี มเครอื่ งใหพ้ รอ้ มกอ่ นใช้งาน สาหรับเคร่ือง PC
- ระบบปฏิบัตกิ าร Windows XP , Windows Vista , Windows 7
- CPU เพนเทียม III ขึ้นไป แรม1 28 mb เป็นอย่างนอ้ ย
- การ์ดจอท่แี สดงสไี ด้ระดับ 16 bit ข้นึ ไป
- ควรใช้ จอภาพท่ีแสดงผลดว้ ยความละเอียด 800*600 ขึน้ ไป
- CD Rom สาหรบั อ่านแผ่น CD

การใช้โปรแกรม Photoshop

เร่มิ ต้นใชง้ าน Photoshop CC 2015
1. วิธีการเขา้ ส่โู ปรแกรม Photoshop CC 2015 ดับเบลิ้ คลิก ที่ไอคอนดังรปู เพ่ือเขา้
โปรแกรม Photoshop

2. หนา้ ตาของโปรแกรม Photoshop

Menu Bar
Option Bar

Panel เครอื่ งมือต่างๆ

Tool เครอ่ื งมือของ Photoshop

พนื้ ที่การทางาน

การใชโ้ ปรแกรม Photoshop

วิธกี ารเปดิ /ปดิ Panel
สามารถทาไดโ้ ดยไปท่ีเมนู Windows > แลว้
เลือก Panel ท่ตี ้องการใช้

ชนดิ ไฟลใ์ นโปรแกรม Photoshop

.psd (Photoshop File) : เป็นไฟล์พน้ื ฐานของ
โปรแกรม Photoshop สามารถเก็บบนั ทึกข้อมูล
คุณลกั ษณะต่างๆ ทใี่ ช้ใน Photoshop ไมว่ า่ จะเป็น
Layer , สี หรอื Effect ตา่ งๆ
.bmp (Bitmap file) : เป็นไฟล์พ้นื ฐานของ
Windows
.gif (Graphic Interchange) : เปน็ ไฟล์ที่ใช้กันมาก
บนอนิ เตอรเ์ น็ต เพราะงา่ ยตอ่ การบีบอดั ขอ้ มูล เพราะ
มี
ขนาดเล็ก
.jpg (Joint Photographic experts Group) : เป็น
ไฟล์นยิ มใช้บนอนิ เตอร์เนต็ เชน่ กันจะแตกตา่ งกนั ที่
ไฟลน์ ี้ จะ
มคี วามละเอยี ดของภาพคอ่ นข้างชัดเจน

การใชโ้ ปรแกรม Photoshop

การเปดิ ไฟล์ การเปดิ ไฟลก์ ่อนหน้าน้ีดว้ ยคาสงั่ Open Recent ไป
การเรยี กไฟล์ภาพหรือไฟล์ psd นาขึ้นมาใชส้ ามารถทา ที่เมนู File>Open Recent แล้วเลอื กไฟลท์ ีเคยเปดิ
ไดโ้ ดย ไปท่ีเมนู File > Open หรอื คียล์ ดั Ctrl+O ไวอ้ ยแู่ ล้วไดจ้ ากคาส่ังน้ี

การสรา้ งภาพใหม่ การใชโ้ ปรแกรม Photoshop
นอกจากการนาภาพมาใช้งานแลว้ เรา
สามารถสร้างภาพข้ึน มาให้ด้วยพื้นที่การ รายละเอยี ดการกาหนดขนาดพ้ืนที่ใหม่
ทางานทเ่ี ราสร้างได้เองด้วย โดยการไปที่
เมนู File>New หรอื คยี ์ลดั Ctrl+N

การใช้โปรแกรม Photoshop

การบนั ทึกไฟล์
การบันทกึ ไฟล์ของ Photoshop มสี องแบบคอื บนั ทกึ เพื่อนามาแกไ้ ขได้ภายหลัง และบันทึกนาไปใชง้ านบน
เวบ็ ไซต์

1. การบนั ทึกงานเพอื่ นามาแก้ไขภายหลัง สามารถทาได้โดย ไปทเ่ี มนู File>save as…

การใช้โปรแกรม Photoshop

2. วธิ ีการเซฟนาไปใชบ้ นเวบ็ ไซต์ สามารถทาไดโ้ ดย การไปทเ่ี มนู File > Export > Save for Web

จะปรากฏแถบขอ้ มูลการ Save for Web การใช้โปรแกรม Photoshop

** การเลือกประเภทไฟลใ์ นช่อง preset น้นั
ข้ึนอยู่กับงานท่ีจะนาไปใช้

การใช้โปรแกรม Photoshop

การใชโ้ ปรแกรม Photoshop

สรา้ งวงกลมดว้ ย path อยา่ ลมื เลอื กตามรปู นะ เลือกเครือ่ งมอื พิมพ์ พิมพ์ไปเลย บนวงกลม

การใชโ้ ปรแกรม Photoshop

ถ้ารสู้ ึกวา่ มันไมส่ มดลุ อกั ษรมันไม่สมดลุ กก็ ด
ctr+T (แป้นคีย์บอรด์ ต้องเปน็ eng) เพื่อหมนุ ซา้ ย
ขวา ปรับขนาด

จรงิ ๆแล้ว path มันกาลัง active อยู่ แต่เพ่อื ความชัวร์
แคน่ ้ันเอง เลยให้เลือกเคร่ืองมือ move เพือ่ มา select
วงกลมใหม้ ันถกู เลอื ก

ส่งั path ใหก้ ลับดา้ นซา้ ยไปขวา การใชโ้ ปรแกรม Photoshop

กด ctr+T แลว้ หมุนให้ตวั หนังสือลงมาอยูข่ า้ งล่าง

การใชโ้ ปรแกรม Photoshop

ลองดพู าเนล path ด้านขวานะ(กลุ่มเดียวกับ Layer) ลองเปิดดูจะเหน็ พาธวงกลม ลองคลิกดเู พอื่ ให้มนั Active (พอดผี มเลอ่ื นวงกลม
พาธใหอ้ อกจากจุดตัง้ ต้นไปนิดหนอ่ ย) พาธวงกลมเรามีอันเดียวครบั ทางานได้หลายงาน เร่อื ยๆ เลือกคาสัง่ พมิ พ์ตอ่ เลยดา้ นบน

การใชโ้ ปรแกรม Photoshop

ได้ผลดงั นี้ เราสามารถสร้างงานอน่ื ๆ เพอ่ื ใช้ในการพมิ พ์งานลงแผ่นดวี ดี ีซีีด่ี ่อไไได้

การใช้โปรแกรม Photoshop

เอาตัวหนังสอื สองชุดมาซอ้ นกัน แน่นอน
อีกวงหน่งึ ตอ้ งปรับขนาด จะปรบั ตวั ลา่ ง
หรอื ตวั บนก็ได้ ใช้เมาสค์ ลิกเลือกมา
วงกลมนงึ กด ctr+T เพ่ือปรับขนาด (Free
Transform) กรณนี ้ผี มคลิกเลือกตัวบน
แลว้ ยอ่ ขนาดใหเ้ ลก็ ลง ดอู ักษรตวั ล่างเพอ่ื
อ้างอิง

การใช้โปรแกรม Photoshop

การใช้โปรแกรม Photoshop

การสรา้ ง Slice ด้วยเครอื่ งมือ
Slice
การสรา้ งหน้า Homepage ที่มี
ภาพกราฟิกขนาดใหญ่ มักนยิ ม
แบ่งภาพให้เป็นช้ินสีเ่ หล่ียมย่อย
ๆ แล้วนามาจดั เรียงรวมกนั ขนึ้
ใหมโ่ ดยใช้ตารางซ่ึงไม่มีเสน้
ขอบและไมม่ ีระยะห่างระหวา่ ง
ช่อง ดังนน้ั ผู้ชมจะมองเห็นเป็น
ภาพใหญเ่ หมอื นต้นฉับทุก
ประการ ซง่ึ การแบ่งภาพ
ดงั กลา่ วจะช่วยใหก้ ารโหลด
ภาพเร็วข้นึ

การใช้โปรแกรม Photoshop

ประโยชนข์ องการทา Slice
• การโหลดภาพทาไดร้ วดเรว็
• บนั ทกึ ภาพยอ่ ยแต่ละชน้ิ เปน็ ไฟลค์ นละชนดิ และเลือกออปชัน่ การบนั ทกึ ทแี่ ตกตา่ ง

กนั ได้ เช่น GIF , JPEG
• กาหนดไฮเปอรล์ งิ ค์ หรอื สร้างเอฟเฟค็ ต์แบบ Rollover ให้กับภาพย่อยแตล่ ะชนิ้ ได้

• สรา้ งภาพเคลอื่ นไหวเฉพาะบรเิ วณทต่ี อ้ งการ

เครอ่ื งมอื ในกลมุ่ Slice
เครอ่ื งมอื ในกลมุ่ ทส่ี รา้ งสไลซ์ มีดังน้ี
• เคร่ืองมอื Slice ใชส้ าหรบั ตดั แบง่ ภาพออกเปน็ ส่วนย่อย ๆ
• เครื่องมอื Slice Select ใชส้ าหรบั คลิกเลอื กสไลซ์ทตี่ ้องการปรบั แต่ง

การซอ่ นและแสดง Slice
นักเรยี นสามารถซ่อนเส้น Slice ทง้ั หมดไวช้ ่ัวคราวเพื่อทางานอย่างอนื่ บนรูปภาพ
โดยเลือกคาส่งั View > Show > Slice ถา้ ต้องการแสดง Slice กใ็ ชค้ าสง่ั เดิมซ้าอีกครง้ั

หนึง่

การใช้โปรแกรม Photoshop

การปรบั แตง่ Slice
นักเรียนสามารถใช้เครอื่ งมอื Slice Select
ปรบั แต่ง Slice ไดห้ ลายแบบ ดงั นี้
• การปรับขนาด ใชเ้ มาส์ คลกิ เลอื ก User Slice

ท่ีตอ้ งการ จากน้นั เล่อื นเมาส์ไปทีก่ รอบเพื่อปรับ
ขนาด
• การย้ายตาแหนง่ ให้ใช้เมาส์ คลิกลากท่ี User
Slice ไปวางทีต่ าแหน่งใหม่
• การลบ Slice ทาได้โดยใช้เมาส์ เลือก Slice ท่ี
จะลบและกด Delete หรอื คลกิ ขวาท่ี Slice ท่ี
ตอ้ งการลบ และเลอื กคาส่งั Delete Slice
• การปรบั ขนาดและยา้ ยตาแหนง่ User Slice หรือ
Auto Slice โดยใส่คา่ เปน็ ตัวเลขทาได้โดยใช้
เมาส์ ดบั เบลิ คลิกท่ี Slice ที่ต้องการ จากนัน้
กาหนดตาแหนง่ คา่ X, Y หรอื ขนาดในชอ่ ง W, H
ของ Slice options

นักเรียนสามารถสรา้ ง Slice เป็นช้นิ ส่วนตามที่
ต้องการได้ดงั ตอ่ ไปน้ี

การใชโ้ ปรแกรม Photoshop

1. เลอื กรปู ภาพท่ตี อ้ งการมาทาการตดั แบง่ ภาพ 4. ใชเ้ มาสร์ ูป คลิกลากเปน็ กรอบสเ่ี หล่ยี ม
โดยใช้เคร่ืองมอื Slice Tool ลอ้ มรอบบรเิ วณทตี่ ้องการบนรูป

2. เลอื กวธิ ีการสร้าง Slice จากออปชั่นบาร์
ของสไลซ์
• Normal สรา้ ง Slice โดยการคลิกลาก
เมาสเ์ พ่อื กาหนดขนาดเอง
• Fixed Aspect Ratio สรา้ ง Slice ดว้ ยวธิ ี
คลิกลากเมาสโ์ ดยการกาหนดสัดสว่ นท่ี
แน่นอน
• Fixed Size สรา้ ง Slice ดว้ ยวธิ กี าร
กาหนดขนาดเป็นคา่ ท่ีแน่นอน

3. กรณีสร้างโดยการกาหนดสัดสว่ นหรือขนาด
ให้ใส่ค่าท่ีช่อง Width และ Height

การใชโ้ ปรแกรม Photoshop

การบนั ทกึ ภาพ Slice พรอ้ มเวบ็ เพจ

การบันทึกภาพท่ีเป็น Slice นกั เรียนสามารถกาหนดออบชน่ั ในการแปลงไฟล์ของ User Slice และ
Auto Slice แต่ละช้นิ อยา่ งอิสระจากกัน นอกจากนน้ั ยังสามารถส่งั ให้โปรแกรมสร้างไฟล์ HTML
ใหด้ ว้ ย ซงึ่ นกั เรียนสามารถนาไฟลน์ ้ไี ปสร้างเป็นเวบ็ เพจในภาคเรยี นที่ 2 ต่อไปได้ หรือจะ Copy
เฉพาะ source ส่วนที่ใชส้ รา้ งตารางไปแทรกในเว็บเพจท่มี อี ยแู่ ล้วก็ได้ ซึง่ มีข้นั ตอนและวธิ ีการดงั น้ี
1. เลือกคาสงั่ File > Save for Web
2. เลอื กเครือ่ งมอื บนกลอ่ งเคร่อื งมอื ในไดอะล็อกบ็อกซ์ของ Save for Web
3. คลกิ เลือกภาพตวั อยา่ งในใบความรู้ท่ี 7.1 ทน่ี ักเรียนเลือกมา
4. ใชเ้ ครอ่ื งมอื Slice Select คลิกเลอื ก User Slice(ถ้าตอ้ งการเลือกหลายชนิ้ ใหก้ ดคีย์ Shift

ค้างไว้)
5. กาหนดออปช่ันการแปลงไฟลส์ าหรับ Slice ช้ินท่เี ลอื ก
6. ทาข้อ 4 ,ข้อ 5 ซา้ กับ User Slice ชิ้นอ่นื ๆ จนครบ
7. คลิกเลอื ก Auto Slice ชิน้ ใดชิน้ หนงึ่
8. กาหนดออปช่ันการแปลงไฟล์ของ Auto Slice (Auto Slice ทกุ ช้ินจะใชอ้ อปชน่ั เดยี วกนั )
9. คลิกป่มุ Save
10. กาหนดชื่อไฟล์และเลือกโฟลเดอร์ท่เี ก็บ

การใชโ้ ปรแกรม Photoshop

11. กาหนดออปชนั่ การบันทึกไฟล์ดงั นี้
• Save as type กาหนดวา่ จะบนั ทึกไฟล์
ประเภทใดบ้าง
• HTML and Image บันทึกทง้ั ไฟล์
HTML และรูปภาพ (ปกตคิ วรเลอื ก)
• Image Only บันทึกเฉพาะรูปภาพ
• HTML Only บันทึกเฉพาะไฟล์ HTML
เท่าน้ัน
• Setting เลอื กชดุ ออปชนั่ ทใ่ี ช้ควบคุม
การสรา้ งไฟล์ ปกติเลือกเปน็ Default
Settings
• Slices เลือก Slice ที่จะใหบ้ นั ทึก
• All Slices บันทกึ Slice ทกุ ชิน้
• Selected Slices บันทึกเฉพาะ Slice ท่ี
เลือกไว้

12. คลิกปุ่ม Saveหลงั การบนั ทกึ แล้วโปรแกรมจะ
สร้างไฟล์ HTML ขึ้นมาใหโ้ ดยอัตโนมัติ 1
ไฟล์ และสร้าง โฟลเดอรช์ ่ือ images สาหรับ
เก็บรวบรวมภาพท่ีทาการ Slice ไวเ้ ปน็ ไฟลช์ ื่อ
เดียวกันแตจ่ ะมีหลายเลขตอ่ ท้ายแตล่ ะรปู

การใช้โปรแกรม Photoshop

หลังทาการบนั ทกึ Save for web แลว้ จะได
โฟลเ์ ดอร์ images และไฟล์ .HTML