การใช้โปรแกรม Photoshop Design/การใช้... · .psd (Photoshop File) : เป็นไฟล์พื้นฐานของ โปรแกรม

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

Photoshop

BI Systems Services Ltd.,Part

การใชโปรแกรม 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 CC 2015

1. วธการเขาสโปรแกรม Photoshop CC 2015 ดบเบลคลก ทไอคอนดงรปเพอเขา

โปรแกรม Photoshop

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

Menu Bar

Option Bar

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

พนทการท างาน

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


วธการเปด/ปด Panel

สามารถท าไดโดยไปทเมน Windows > แลว

เลอก Panel ทตองการใช

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

.psd (Photoshop File) : เปนไฟลพนฐานของ

โปรแกรม Photoshop สามารถเกบบนทกขอมล

คณลกษณะตางๆ ทใชใน Photoshop ไมวาจะเปน

Layer , ส หรอ Effect ตางๆ

.bmp (Bitmap file) : เปนไฟลพนฐานของ

Windows

.gif (Graphic Interchange) : เปนไฟลทใชกนมาก

บนอนเตอรเนต เพราะงายตอการบบอดขอมล เพราะ

ม

ขนาดเลก

.jpg (Joint Photographic experts Group) : เปน

ไฟลนยมใชบนอนเตอรเนตเชนกนจะแตกตางกนท

ไฟลน จะ

มความละเอยดของภาพคอนขางชดเจน


การเปดไฟล

การเรยกไฟลภาพหรอไฟล psd น าขนมาใชสามารถท า

ไดโดย ไปทเมน File > Open หรอคยลด Ctrl+O

การเปดไฟลกอนหนานดวยค าสง Open Recent ไป

ทเมน File>Open Recent แลวเลอกไฟลทเคยเปด

ไวอยแลวไดจากค าสงน


การสรางภาพใหม

นอกจากการน าภาพมาใชงานแลวเรา

สามารถสรางภาพขน มาใหดวยพนทการ

ท างานทเราสรางไดเองดวย โดยการไปท

เมน File>New หรอคยลด Ctrl+Nรายละเอยดการก าหนดขนาดพนทใหม


การบนทกไฟล

การบนทกไฟลของ Photoshop มสองแบบคอ บนทกเพอน ามาแกไขไดภายหลง และบนทกน าไปใชงานบน

เวบไซต

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


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


จะปรากฏแถบขอมลการ Save for Web ** การเลอกประเภทไฟลในชอง preset นน

ขนอยกบงานทจะน าไปใช




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


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

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

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

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

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

ขวา ปรบขนาด


สง path ใหกลบดานซายไปขวา กด ctr+T แลวหมนใหตวหนงสอลงมาอยขางลาง


ลองดพาเนล path ดานขวานะ(กลมเดยวกบ Layer) ลองเปดดจะเหนพาธวงกลม ลองคลกดเพอใหมน Active (พอดผมเลอนวงกลม

พาธใหออกจากจดตงตนไปนดหนอย) พาธวงกลมเรามอนเดยวครบ ท างานไดหลายงาน เรอยๆ เลอกค าสงพมพตอ เลยดานบน


ไดผลดงน เราสามารถสรางงานอนๆ เพอใชในการพมพงานลงแผนดวดซด อไไได


เอาตวหนงสอสองชดมาซอนกน แนนอน

อกวงหนงตองปรบขนาด จะปรบตวลาง

หรอตวบนกได ใชเมาสคลกเลอกมา

วงกลมนง กด ctr+T เพอปรบขนาด (Free

Transform) กรณนผมคลกเลอกตวบน

แลวยอขนาดใหเลกลง ดอกษรตวลางเพอ

อางอง



การสราง Slice ดวยเครองมอ

Slice

การสรางหนา Homepage ทม

ภาพกราฟกขนาดใหญ มกนยม

แบงภาพใหเปนชนสเหลยมยอย

ๆ แลวน ามาจดเรยงรวมกนขน

ใหมโดยใชตารางซงไมมเสน

ขอบและไมมระยะหางระหวาง

ชอง ดงนนผชมจะมองเหนเปน

ภาพใหญเหมอนตนฉบทก

ประการ ซงการแบงภาพ

ดงกลาวจะชวยใหการโหลด

ภาพเรวขน


ประโยชนของการท า Slice

• การโหลดภาพท าไดรวดเรว

• บนทกภาพยอยแตละชนเปนไฟลคนละชนด และเลอกออปชนการบนทกทแตกตาง

กนได เชน GIF , JPEG

• ก าหนดไฮเปอรลงค หรอสรางเอฟเฟคตแบบ Rollover ใหกบภาพยอยแตละชนได

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

เครองมอในกลม Slice

เครองมอในกลมทสรางสไลซ มดงน

• เครองมอ Slice ใชส าหรบตดแบงภาพออกเปนสวนยอย ๆ

• เครองมอ Slice Select ใชส าหรบคลกเลอกสไลซทตองการปรบแตง

การซอนและแสดง Slice

นกเรยนสามารถซอนเสน Slice ทงหมดไวชวคราวเพอท างานอยางอนบนรปภาพ

โดยเลอกค าสง View > Show > Slice ถาตองการแสดง Slice กใชค าสงเดมซ าอกครง

หนง


การปรบแตง 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 เปนชนสวนตามท

ตองการไดดงตอไปน


1. เลอกรปภาพทตองการมาท าการตดแบงภาพ

โดยใชเครองมอ Slice Tool

2. เลอกวธการสราง Slice จากออปชนบาร

ของสไลซ

• Normal สราง Slice โดยการคลกลาก

เมาสเพอก าหนดขนาดเอง

• Fixed Aspect Ratio สราง Slice ดวยวธ

คลกลากเมาสโดยการก าหนดสดสวนท

แนนอน

• Fixed Size สราง Slice ดวยวธการ

ก าหนดขนาดเปนคาทแนนอน

3. กรณสรางโดยการก าหนดสดสวนหรอขนาด

ใหใสคาทชอง Width และ Height

4. ใชเมาสรป คลกลากเปนกรอบสเหลยม

ลอมรอบบรเวณทตองการบนรป


การบนทกภาพ 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. ก าหนดชอไฟลและเลอกโฟลเดอรทเกบ


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 ไวเปนไฟลชอ

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


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

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

การใช้โปรแกรม Photoshop Design/การใช้... · .psd (Photoshop File) : เป็นไฟล์พื้นฐานของ โปรแกรม

Documents