บทที่ 5

พ้นื ฐานการใชง้ านโปรแกรม
ออกแบบกราฟิก

บทท่ี 5 พน้ื ฐานการใช้งานโปรแกรมออกแบบกราฟิก

วัตถปุ ระสงค์เชงิ พฤติกรรม

1. มคี วามเขา้ ใจเก่ยี วกบั พ้นื ฐานการใชง้ านโปรแกรมกราฟิก
2. มคี วามเขา้ ใจเก่ยี วกบั การจดั การไฟลข์ นั้ พ้นื ฐาน
3. มที กั ษะในการจดั การไฟลข์ นั้ พ้นื ฐาน
4. มกี จิ นสิ ยั ทด่ี ตี ่องานทไ่ี ดร้ บั มอบหมาย

หวั ขอ้ เน้อื หาประจาบทท่ี 5

5.1 พ้ืนฐานการใชง้ านโปรแกรมกราฟิก
5.2 หนา้ ตาและสว่ นประกอบของโปรแกรม
5.3 ประเภทของภาพกราฟกิ
5.4 การเขา้ สโู่ ปแกรม Adobe Photoshop
5.5 การเปิดไฟล์ภาพ (Open File)
5.6 การจัดเกบ็ ภาพ (Save File) สาหรบั ภาพตน้ ฉบับ
5.7 การซ่อนแสดงเคร่อื งมอื
5.8 การซอ่ นการแสดงไมบ้ รรทัด
5.9 การซ่อนการแสดงเส้น Guide, Grid

5.1 พน้ื ฐานการใชง้ านโปรแกรมกราฟิก (ตอ่ )

Adobe Photoshop สุดยอดโปรแกรมกราฟิกทไ่ี ดร้ บั ความนิยมมากตวั หน่ึงใน
บา้ นเรา เป็นโปรแกรมหน่ึงในชุด Adobe Creative Suite โดย
Photoshop ไดเ้ พม่ิ เตมิ ฟีเจอรใ์ หก้ บั ผูใ้ ชง้ านทวั่ ไป ผูอ้ อกแบบเวบ็ และงานแกไ้ ขไฟล์
วดี โี อ

5.1 พ้นื ฐานการใชง้ านโปรแกรมกราฟิก (ต่อ)

5.1.1. การตดิ ตงั้ โปรแกรม

1. เมื่อใส่แผ่นซีดีโปรแกรมลงไปจะแสดงหน้าต่าง Adobe Photoshop CS
with Image Ready CS พร้อมกับให้ผู้ใช้งานได้เลือกภาษาท่ีต้องการใช้งานจาก
ลิสต์บ็อกซ์ Select the Language ให้คลิก้ เลอื กไปที่ US English แล้วคลกิ ปมุ่ OK

2. จากน้ันจะแสดงหน้าต่าง End User License Agreement
เพ่ือให้อ่านข้อตกลงในการใช้งานโปรแกรม แล้วคลิ้กปุ่ม Accept
จะแสดงหน้าต่างถัดมาให้ไปคลิ้กท่ี Install Adobe Photoshop CS
with ImageReady CS

5.1 พน้ื ฐานการใชง้ านโปรแกรมกราฟกิ (ตอ่ )

5.1.1. การติดตง้ั โปรแกรม (ต่อ)

3. จากนน้ั จะแสดงหนา้ ต่าง Adobe Photoshop CS and
ImageReady CS Setup เพอ่ื เร่มิ ตน้ การเขา้ สู่วิซารด์ การตดิ ตงั้ โปรแกรมให้
คล้กิ ป่มุ Next >

4. จากนน้ั จะแสดงไดอะลอ็ กบ็อกซแ์ จง้ เตือนว่าใหป้ ิดแอพพลเิ คชนั ทงั้ หมดก่อน แลว้
คล้กิ ป่มุ OK

5 . ถัด ม า จ ะ แ ส ด ง ห น้า ต่ า ง License

Agreement Language

Selection โดยใหค้ ล้ิกเลือกท่ีภาษา US

English แลว้ คล้กิ ป่มุ Next

5.1 พ้ืนฐานการใชง้ านโปรแกรมกราฟิก (ตอ่ )

5.1.1. การติดตั้งโปรแกรม (ต่อ)

6. จากนนั้ จะแสดงหนา้ Software License Agreement แลว้ ใหไ้ ป
คล้กิ7ท.ป่ี ่ถมุ ดั Aมาcจะcแสeดงpหนtา้ ต่าง Customer Information เพอ่ื ใหก้ รอกขอ้ มูล
ผูใ้ ชง้ านลงไป แลว้ คล้กิ ป่มุ Next

8. ถดั มาจะแสดงหนา้ ต่างการรีจสิ เทอรพ์ รอ้ มแสดงขอ้ มลู ผูใ้ ชง้ าน ใหค้ ล้กิ ปุ่ม Yes

9. จากนนั้ จะแสดงหนา้ ต่าง Choose Destination Location
พ ร้ อ ม แ ส ด ง โ ฟ ล เ ด อ ร์
ทใ่ี ชใ้ นการตดิ ตง้ั โปรแกรม ใหค้ ล้กิ ป่มุ Next

5.1 พน้ื ฐานการใชง้ านโปรแกรมกราฟิก (ต่อ)

5.1.1. การตดิ ต้ังโปรแกรม (ตอ่ )

10. ถดั มาจะแสดงหนา้ ต่าง File Association เพอ่ื ใหค้ ล้กิ เลอื กว่าตอ้ งการ
ใหไ้ ฟลร์ ูปภาพนามสกุลใด เปิดดว้ ยโปรแกรม Adobe Photoshop หรือ
ImageReady หลงั จากนน้ั ใหค้ ล้กิ ป่มุ Next

11. ถดั มาจะแสดงขอ้ มลู เก่ยี วกบั ค่าการตดิ ตง้ั โปรแกรมเพอ่ื ใหผ้ ูใ้ ชง้ านไดเ้ลอื กปรบั ตาม
ความตอ้ งการ แลว้ ใหค้ ล้กิ ป่มุ Next จากนน้ั จะเขา้ สู่การตดิ ตง้ั โปรแกรมในทนั ที

12. เมอ่ื ใกลต้ ดิ ตง้ั โปรแกรมเสรจ็ ส้นิ จะแสดงไดอะลอ็ กบอ็ กซ์ Adobe
Activation เพอ่ื ใหเ้ลอื กวา่ ตอ้ งการ Activation Options รูปแบบใด

5.1 พน้ื ฐานการใชง้ านโปรแกรมกราฟิก (ตอ่ )

5.1.1. การติดตงั้ โปรแกรม (ตอ่ )

13. เมอ่ื การตดิ ตงั้ โปรแกรมเสร็จเรยี บรอ้ ยแลว้ จะแสดงหนา้ ต่าง Setup is
complete และออปชนั Display Photoshop Readme file จะถกู เลอื กใหค้ ลกิ ทป่ี ่มุ
Finish

14. จากนน้ั จะแสดงไดอะลอ็ กบอ็ กซ์ Thank you for
choosing Adobe Photoshop CD and ImageReady
ใหค้ ล้กิ ป่มุ OK เพอ่ื ออกจากการตดิ ตง้ั โปรแกรม

5.1 พื้นฐานการใชง้ านโปรแกรมกราฟิก (ต่อ)

5.1.2 ระบบเครอื่ งและอุปกรณ์

1) CPU Pentium IIIขนึ้ ไป
2) จอภาพ VGA การแสดงผล >= 256 สี (16bit)
3) Hard Disk มพี น้ื ทีว่ า่ งอยา่ งนอ้ ย 280 MB
4) RAM 128 MB ขึน้ ไป
5) CD-ROM Drive
6) Windows 98/2000/ME,XP

5.2 หน้าตาและส่วนประกอบของโปรแกรม

ท่มี า: http://www.kruthong.net/photoshop/area.jpg

5.2 หนา้ ตาและส่วนประกอบของโปรแกรม (ต่อ)

1. Title Bar แสดงชือ่ โปรแกรม และ/หรือ ชื่อไฟล์ ตลอดจนค่าเกีย่ วกับโหมดภาพ
2. Control Button ปุ่มควบคมุ หนา้ ตา่ ง ประกอบดว้ ยปุ่ม Minimize,

Maximize/Restore, Close Button
3. Menu Bar แถบคาส่ังควบคุมการทางาน
4. Toolbox แถบเคร่ืองมือ
5. Work area Window หนา้ ตา่ งสร้างงาน
6. Screen Area หน้าต่างโปรแกรม
7. Palettes ชุดคาสัง่ เฉพาะงาน
8. Status Bar แสดงสถานะการทางาน
9. Option Bar แสดงชุดคาส่งั ยอ่ ยของเครื่องมือที่เลอื กใชง้ าน

5.3 ประเภทของภาพกราฟิก

5.3.1 ภาพแบบบติ แมพ (Bitmap) เกดิ จากภาพท่ปี ระกอบจากจุดสีขนาด
เลก็ จานวนมากท่ตี ่อเรียงไลส่ กี นั จนเป็นภาพๆหนึง่ เพ่อื ให้เหน็ เปน็ ภาพชดั เจนขน้ึ

ที่มา: http://www.photoshop-bootcamp.com/beginners-guide-bitmap-vector-
images-photoshop/

5.3 ประเภทของภาพกราฟิก (ตอ่ )

5.3.2 ภาพเวคเตอร์ (Vector) ภาพประเภทนถ้ี า้ เราขยายภาพ ยงั คงความ
ละเอียดและความคมชดั ไว้ เนื่องจากภาพแบบเวคเตอรป์ ระกอบด้วยเสน้ ตรงและ
เส้นโคง้ ถูกสร้างในรปู แบบเราขาคณติ

ทม่ี า: https://55540094jirapinya.wordpress.com/ชนดิ ของไฟลภ์ าพ/vector-graphic/

5.4 การเข้าสู่โปแกรม Adobe Photoshop

1. การสร้างไฟล์ใหม่

- การเปดิ หนา้ งานใหม่ กระทาได้โดย
การเลอื กเมนูคาสัง่ File, New… และ
ปรากฏกรอบทางาน ดงั น้ี

5.4 การเขา้ สโู่ ปแกรม Adobe Photoshop (ตอ่ )

- Name จะเป็นชอื่ ไฟล์
- Image Size ประกอบดว้ ยคา่ สาคัญคือ

Width ความกว้างของช้ินงาน ควรใช้หน่วยเปน็ Pixel
Height ความสงู ของช้ินงาน ควรใช้หน่วยเปน็ Pixel
Resolution ความละเอียดของชิน้ งานแนะนา ใหใ้ ช้ 72 pixel/inch
Mode ต้องเลอื กเป็น RGB Color
- Contents เปน็ การระบลุ กั ษณะของพ้นื ภาพ (Background) แนะนาให้ใช้ White
การกาหนดคา่ เก่ียวกับ Width และ Height ของภาพ จะต้องสัมพันธ์กบั Screen
Area ของจอภาพ และลกั ษณะ Layout ของหนา้ เว็บทกี่ าหนดไว้ด้วยเสมอ

5.5 การเปดิ ไฟลภ์ าพ (Open File)

คาสง่ั ในการเปิดไฟล์ภาพของ PhotoShop มีสองคาส่งั ไดแ้ ก่
- คาสง่ั File, Open… จะใช้ในกรณที ี่ตอ้ งการเปดิ ดไู ฟลภ์ าพทกุ ๆ ฟอร์แมต
- คาสงั่ File, Open as… ใช้ในกรณีท่ตี ้องการเปิดดูไฟลภ์ าพทีต่ อ้ งการระบุนามสกลุ ของไฟล์

5.6 การจัดเก็บภาพ (Save File) สาหรับภาพต้นฉบับ

จัดเก็บภาพโดยจะเลือกฟอร์แมตเปน็ .PSD ดงั น้ี
- เลือกคาส่ัง File, Save สาหรับการจัดเก็บงานครั้งแรก หรือ File, Save as

สาหรับการจดั เกบ็ งานครง้ั ทส่ี องและต้องการเปล่ียนชอื่ ไฟลภ์ าพ
- เลือกไดร์ฟ และโฟลเดอรท์ ี่ต้องการเก็บภาพ
- ต้ังชอื่ ไฟล์ภาพ
- เลอื กฟอรแ์ มตภาพเปน็ .psd
- คลิกปมุ่ Save เพื่อยืนยนั การจดั เก็บภาพ

5.7 การซ่อนแสดงเครอื่ งมอื

Window > Tools หรอื กด Shift + tab
เพือ่ ทาการซอ่ นเครื่องมอื ทง้ั หมด
ถ้าต้องการซ่อนเฉพาะ Palette

5.8 การซ่อนการแสดงไม้บรรทดั

คลกิ เลอื กเมนู View > Rulers หรือกดปมุ่ Ctrl+R
*การกาหนดหน่วยไม้บรรทดั สามารถกาหนดได้โดย

ไปที่ Edit>Preferences>Units&Rulers

5.9 การซอ่ นการแสดงเส้น Guide, Grid

 การใชเ้ สน้ Guide ให้ทาการลากเส้น Guide จากไม้บรรทัดทกี่ าหนดไว้
 การลบเสน้ Guide ให้ทาการลากเสน้ ไกด์ทีจ่ ะลบลากไปทางบนหรอื ทางด้านล่าง
 การกาหนด Grid คลิกเลือกเมนู View > Show > Grid หรือกดปุ่ม Ctrl + ”

ถา้ ตอ้ งการให้วตั ถุตดิ อยู่กบั เส้น Grid ให้เลอื ก View > Snap to > Grid
 การย่อ – ขยายภาพ

View > Zoom In (ขยาย)
Zoom Out (ย่อ)
Fit on Screen (พอดีกรอบ)
Actual Pixel (ขนาดเทา่ ของจรงิ )
Print Size (ขนาดกระดาษทพี่ มิ พ)์

THANK
:Y)OU!

ผศ.ดร.รชฏ สวุ รรณกฏู
สาขาวชิ านวตั กรรมการจดั การเรยี นรูป้ ระถมศึกษา

คณะครุศาสตร์ มหาวทิ ยาลยั นครพนม