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

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) สามารถสลบไป

มาได

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

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

สรางวงกลมดวย path อยาลมเลอกตามรปนะ เลอกเครองมอพมพ พมพไปเลย บนวงกลม

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

จรงๆแลว path มนก าลง active อย แตเพอความชวร

แคนนเอง เลยใหเลอกเครองมอ move เพอมา select

วงกลมใหมนถกเลอก

ถารสกวา มนไมสมดล อกษรมนไมสมดล กกด

ctr+T (แปนคยบอรดตองเปน eng) เพอหมนซาย

ขวา ปรบขนาด

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

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

โดยใชเครองมอ 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 ไวเปนไฟลชอ

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

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

หลงท าการบนทก Save for web แลวจะได

โฟลเดอร images และไฟล .HTML