โครงงานการพัฒนาการเรียนการสอนผ่านสื่อมัลติมีเดีย เรื่อง การใช้โปรแกรม
การใช้โปรแกรม Photoshop Design/การใช้... · .psd (Photoshop...
Transcript of การใช้โปรแกรม Photoshop Design/การใช้... · .psd (Photoshop...
การใชโปรแกรม Photoshop
การใชโปรแกรม Photoshop
โปรแกรม Photoshop คออะไร
โปรแกรม Photoshop เปนโปรแกรมส าหรบสรางภาพ และตกแตงภาพ ซงเปนลขสทธของบรษท
Adobe ซงบรษท Adobe มผลตภณฑซอฟแวรเกยวกบดานกราฟก มากมายเชน Adobe illustrator ส าหรบ
ท า ภาพเวกเตอร Adobe Pemiretor ส าหรบตดตอภาพยนต ฯลฯ โปรแกรม Photoshop เปนโปรแกรม
ตกแตงภาพทไดรบความนยมมาก เนองจากเปนโปรแกรมทใชงาย และรองรบ Application (Plug In) เสรมได
มากมาย
ลกษณะเดนของ Photoshop
1. Photoshop ท างานเปน Layer
ลกษณะการท างานของ Photoshop จะเหมอนการวางแผนใสซอนๆ กน โดยแตละแผนจะมการ
ท างาน ตางกน แตเมอรวมกนแลวจะเปนแคภาพภาพเดยว แตละแผนใส(Layer) สามารถสลบไป
มาได
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
Tool เครองมอของ Photoshop
พนทการท างาน
Panel เครองมอตางๆ
การใชโปรแกรม 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
การเปดไฟล
การเรยกไฟลภาพหรอไฟล psd น าขนมาใชสามารถท า
ไดโดย ไปทเมน File > Open หรอคยลด Ctrl+O
การเปดไฟลกอนหนานดวยค าสง Open Recent ไป
ทเมน File>Open Recent แลวเลอกไฟลทเคยเปด
ไวอยแลวไดจากค าสงน
การใชโปรแกรม Photoshop
การสรางภาพใหม
นอกจากการน าภาพมาใชงานแลวเรา
สามารถสรางภาพขน มาใหดวยพนทการ
ท างานทเราสรางไดเองดวย โดยการไปท
เมน File>New หรอคยลด Ctrl+Nรายละเอยดการก าหนดขนาดพนทใหม
การใชโปรแกรม Photoshop
การบนทกไฟล
การบนทกไฟลของ Photoshop มสองแบบคอ บนทกเพอน ามาแกไขไดภายหลง และบนทกน าไปใชงานบน
เวบไซต
1. การบนทกงานเพอน ามาแกไขภายหลง สามารถท าไดโดย ไปทเมน File>save as…
การใชโปรแกรม Photoshop
2. วธการเซฟน าไปใชบนเวบไซต สามารถท าไดโดย การไปทเมน File > Export > Save for Web
การใชโปรแกรม Photoshop
จะปรากฏแถบขอมลการ Save for Web ** การเลอกประเภทไฟลในชอง preset นน
ขนอยกบงานทจะน าไปใช
การใชโปรแกรม Photoshop
การใชโปรแกรม Photoshop
จรงๆแลว path มนก าลง active อย แตเพอความชวร
แคนนเอง เลยใหเลอกเครองมอ move เพอมา select
วงกลมใหมนถกเลอก
ถารสกวา มนไมสมดล อกษรมนไมสมดล กกด
ctr+T (แปนคยบอรดตองเปน eng) เพอหมนซาย
ขวา ปรบขนาด
การใชโปรแกรม Photoshop
ลองดพาเนล path ดานขวานะ(กลมเดยวกบ Layer) ลองเปดดจะเหนพาธวงกลม ลองคลกดเพอใหมน Active (พอดผมเลอนวงกลม
พาธใหออกจากจดตงตนไปนดหนอย) พาธวงกลมเรามอนเดยวครบ ท างานไดหลายงาน เรอยๆ เลอกค าสงพมพตอ เลยดานบน
การใชโปรแกรม Photoshop
เอาตวหนงสอสองชดมาซอนกน แนนอน
อกวงหนงตองปรบขนาด จะปรบตวลาง
หรอตวบนกได ใชเมาสคลกเลอกมา
วงกลมนง กด ctr+T เพอปรบขนาด (Free
Transform) กรณนผมคลกเลอกตวบน
แลวยอขนาดใหเลกลง ดอกษรตวลางเพอ
อางอง
การใชโปรแกรม 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. เลอกรปภาพทตองการมาท าการตดแบงภาพ
โดยใชเครองมอ Slice Tool
2. เลอกวธการสราง Slice จากออปชนบาร
ของสไลซ
• Normal สราง Slice โดยการคลกลาก
เมาสเพอก าหนดขนาดเอง
• Fixed Aspect Ratio สราง Slice ดวยวธ
คลกลากเมาสโดยการก าหนดสดสวนท
แนนอน
• Fixed Size สราง Slice ดวยวธการ
ก าหนดขนาดเปนคาทแนนอน
3. กรณสรางโดยการก าหนดสดสวนหรอขนาด
ใหใสคาทชอง Width และ Height
4. ใชเมาสรป คลกลากเปนกรอบสเหลยม
ลอมรอบบรเวณทตองการบนรป
การใชโปรแกรม 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 ไวเปนไฟลชอ
เดยวกนแตจะมหลายเลขตอทายแตละรป