เทคนิคการใช้งาน Adobe Photoshop นรินทร บุญพราหมณ์

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
บทเรียนเรื่องการตกแต่งภาพโดย Photoshop
Advertisements

บทที่ 8 การใช้รูปภาพ และการออกแบบกราฟฟิกสำหรับเว็บ
ปฏิบัติการที่ 4 การใช้โปรแกรมประมวลผลคำ
for Beginning & Publishing
การซ้อนทับกัน และคลื่นนิ่ง
Microsoft Office PowerPoint 2003
Packet Tracer Computer network.
….E-Book สนุกสนาน…..
วิชาสื่อ ประสม ง แบบทดสอบกลางภาค
กราฟิกสำหรับเว็บไซต์
การสืบค้นข้อมูลจาก Web OPAC
เรื่อง การประยุกต์ใช้ : โปสการ์ด/กรอบรูป
Microsoft Word Part I Government Savings Bank Computer Trainging Í
Project Management.
By…Porta Boonyatearana
Microsoft Word XP โดย พิสมัย น้ำจันทร์.
21. การกำหนดขอบเขตของภาพ (1 จาก 5)
การสร้างภาพเคลื่อนไหว
บทที่ 9 การใส่รูปภาพ (Image).
บทที่ 6 โครงสร้างของเว็บ.
โปรแกรม Microsoft Access
การสืบค้นข้อมูลจาก Web OPAC
การสร้างสื่อนำเสนอด้วย PowerPoint
โปรแกรมกราฟิก illustrator cs3
เริ่มต้น Photoshop CS5.
การสร้าง Digital Video ด้วย Window Movie Maker
การใช้งาน Microsoft Windows XP
Install Driver Token Key
แบบทดสอบ Photoshop.
การแปลงข้อมูลใน Excel เป็นฐานข้อมูลใน Access
วาดภาพสวยด้วย Paint.
ณัฏฐวุฒิ เอี่ยมอินทร์
หน่วยการเรียนรู้ที่ 3 ระบบปฏิบัติการวินโดวส์เบื้องต้น
การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004
การปรับแต่งกราฟฟิกภาพ,สี,Effect ด้วยโปรแกรม Adobe Photoshop CS
การใช้โปรแกรม ACDSee สร้าง Flash อย่างง่ายๆ
การแทรกรูปภาพ บนเว็บเพจ.
การนำเสนองานบนอินเตอร์เน็ต
การพิมพ์งานออกทางเครื่องพิมพ์
การแต่งรูปภาพด้วยโปรแกรม
วิชาคอมพิวเตอร์กราฟิก
Principle of Graphic Design
การเลือกและปรับรูปทรงวัตถุ การเลือกและปรับรูปทรงวัตถุ
รู้จักกับTimeline, Layer และ Scene รู้จักกับTimeline, Layer และ Scene
การใช้งานโปรแกรม Microsoft Power Point
Tips and Tools MS Excel By คนควน.
Microsoft Word Printing
บทที่ 3 การทำงานกับฟอร์ม (Form)
โปรแกรม Microsoft Access
บทที่ 3 การทำงานกับฟอร์ม (Form)
Symbol & Instance.
การพิมพ์และถ่ายเอกสาร ระบบออนไลน์ การพิมพ์และถ่ายเอกสาร ระบบออนไลน์
พื้นฐานเกี่ยวกับโปรแกรม Flash CS3
ความรู้พื้นฐานเกี่ยวกับ Microsoft Visual C#
รายวิชา คอมพิวเตอร์กราฟิก
การจัดการเกี่ยวกับรูปภาพตอนที่ ๒ การเรียงภาพหลายภาพเป็นภาพ เดียวกัน ๑. เข้าใช้งานชุดคำสั่ง ADOBE PHOTOSHOP รุ่น ๕. ๕.
กิจกรรมคอมพิวเตอร์ การใช้โปรแกรม Adobe Photoshop CS3.
Lesson01 แมวเหมียว การแสดงภาพและเสียง. 1. คลิก New Project.
โหมดสี ใน Photoshop เรื่องของสีมีความสำคัญอย่างมากในการใช้งานโปรแกรม Photoshop เพราะจะมีผลกับภาพที่เราต้องการปรับแต่งโดยตรง เราสามารถกำหนดโหมดสีใน รูปแบบต่างๆ.
บทที่ 9 การใช้งานฟอร์มและคอนโทรลต่าง ๆ
ชั้นมัธยมศึกษาปีที่ 2 ผู้สอน นายกฤษชนะ สิงคาร
นางสาวขวัญชนก ขจรภพ รหัสนิสิต กลุ่ม B06 คณะพยาบาลศาสตร์
หน่วยที่ 8 การตกแต่งภาพถ่าย
Commission Commission on Higher Education Quality Assessment online system CHEQA Updated July 25, 2013
เริ่มต้น Photoshop CS5.
ภาพนี้ชื่อว่าอะไร ? ก. แถบเมนูบาร์
Graphic Design 03.
โครงสร้างข้อมูลแบบ สแตก (stack)
ง30219 ระบบสนับสนุนการตัดสินใจ
เริ่มใช้งาน Microsoft Office
ใบสำเนางานนำเสนอ:

เทคนิคการใช้งาน Adobe Photoshop นรินทร บุญพราหมณ์ คณะเกษตรศาสตร์ มหาวิทยาลัยอุบลราชธานี

1/1 เว็บกราฟิก และ Adobe PhotoShop การทำภาพกราฟิกเพื่อใช้ในงานเวบ มีหลักการเฉพาะ แตกต่างไปจากงานสื่อสิ่งพิมพ์ ทั้งเรื่องความละเอียดของภาพ (Resolution) ที่ใช้แค่ 72 dpi หรือ จำนวนสีที่ใช้แสดงผล เป็นต้น การสร้างงานต้องตั้ง Resolution เป็น 72 dpi ด้วย

1/2 เว็บกราฟิก และ Adobe PhotoShop (ต่อ) สำหรับภาพจากแหล่งอื่น ให้ตรวจสอบ Resolution และกำหนดเป็น 72 dpi ด้วย

2/1 แก้ไขปัญหาการพิมพ์ภาษาไทยใน PhotoShop และสามารถใช้ฟอนท์สวยๆ ของไทยได้ครบทุก ฟอนท์ วิธีการ คือ ก่อนอื่นให้ปิดโปรแกรม PhotoShop ก่อน นำเมาส์ไปชี้ที่ไอคอนควบคุมภาษา ซึ่งปรากฏที่ มุมด้านขวาของแถบสั่งงาน (Task Bar)

คลิกปุ่มขวาของเมาส์ที่ 2/2 แก้ไขปัญหาการพิมพ์ภาษาไทยใน PhotoShop (ต่อ) คลิกปุ่มขวาของเมาส์ที่ ไอคอนควบคุมภาษา เลือกรายการ Properties... ซึ่งจะปรากฏกรอบทำงาน ดังนี้

2/3 แก้ไขปัญหาการพิมพ์ภาษาไทยใน PhotoShop (ต่อ) คลิกเมาส์ที่ปุ่ม Add ปรากฏ กรอบ Add Language ปรากฏรายการเลือกตัว แรกเป็น Afrikaans ให้ คลิกเมาส์ที่ปุ่ม OK ผ่านไป 1 ครั้ง จะปรากฏรายการภาษา Afrikaans เพิ่มขึ้นมา ดังนี้

2/4 แก้ไขปัญหาการพิมพ์ภาษาไทยใน PhotoShop (ต่อ) คลิกเลือกรายการภาษา Afrikaans แล้วคลิกที่ปุ่ม Properties ปรากฏกรอบเลือกลักษณะแป้นพิมพ์

2/5 แก้ไขปัญหาการพิมพ์ภาษาไทยใน PhotoShop (ต่อ) เลือกรายการ Keyboard layout เป็น Thai Kedmanee แล้วคลิกปุ่ม OK โปรแกรมจะ เรียกหาแผ่นโปรแกรม Microsoft Windows ต้นฉบับ ให้ระบุ ไดเร็กทรอรี่ของ โปรแกรม แล้วคลิกปุ่ม OK

2/6 แก้ไขปัญหาการพิมพ์ภาษาไทยใน PhotoShop (ต่อ) เมื่อโปรแกรมติดตั้งระบบเรียบร้อยแล้ว ก็ปิด หน้าต่าง Add Language เป็นอันเสร็จ ถ้าลองดูที่ไอคอนสลับภาษาตรงแถบสั่งงาน จะปรากฏตัวเลือกภาษาเพิ่มมาเป็น 3 โหมด การพิมพ์ภาษาไทยในโปรแกรม PhotoShop ให้เลือกฟอนท์ภาษาไทยที่ต้องการตามปกติ แต่ขณะพิมพ์ ให้กำหนดโหมดภาษาเป็น Afrikaans หรือ Af แทน Th

3. ลักษณะหน้าต่างโปรแกรม เมื่อเรียกใช้งานโปรแกรม Adobe PhotoShop (ตัวอย่างในที่นี้คือ Adobe PhotoShop 6.0) จะปรากฏหน้าต่างการทำงาน ดังนี้

4. หน้าต่างฟังก์ชันงาน - Palettes เล็กที่แสดงรายละเอียด ของงานต่างๆ เช่น Palette Layer จะ ควบคุมการทำงาน ของเลเยอร์ เป็นต้น การเปิด/ปิด Palette เหล่านี้ใช้เมนูคำสั่ง Window สำหรับเปิด/ปิด palettes, the options bar, and the toolbox สำหรับเปิด/ปิด palettes

5/1 เครื่องมือจากแถบ Toolbars

5/2 เครื่องมือจากแถบ Toolbars เครื่องมือบางรายการ จะเป็นชุดเครื่องมือ สังเกตได้ จากรูปสามเหลี่ยมเล็กๆ ที่ปรากฏอยู่มุมล่างขวา ของเครื่องมือนั้นๆ การเลือกเครื่องมือจากชุด ใช้วิธี กดเมาส์ค้างไว้ โปรแกรมจะแสดงเครื่องมือในกลุ่ม ดังนี้ จากนั้นปล่อยเมาส์ ณ ตำแหน่งเครื่องมือที่ต้องการ เครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการ ใช้งาน ซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลือก เครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งาน เครื่องมือนั้นๆ ก่อนเสมอ

6/1 ประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ ใช้ความความละเอียดของภาพ (Resolution) 72 dpi ใช้โหมด RGB ในการสร้างงาน ต้องคำนึงถึง Screen Area ของจอภาพ ดังนี้ 640 x 480 pixel 800 x 600 pixel 1024 x 768 pixel

6/2 ประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ (ต่อ) เก็บไฟล์ต้นฉบับไว้เสมอ (.psd เมื่อใช้ PhotoShop) เลือกประเภทไฟล์ใช้งานให้เหมาะสม ภาพที่มีสีน้อย, ต้องการความคมชัดต่ำ บันทึกเป็น .gif ภาพที่ต้องการความคมชัดสูงๆ แสดงสีมากๆ บันทึกเป็น .jpg

6/2 ประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ (ต่อ) ลักษณะพิเศษของภาพให้เหมาะสม เช่น การใช้ ความสามารถ Interlaced> Progressive> Transparent ภาพที่มีขนาดใหญ่ๆ มาก ควรใช้เทคนิคการตัดภาพเป็น ชิ้นเล็กๆ แล้วนำมาประกอบด้วยคำสั่ง HTML

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

7/2 การเปิดไฟล์ภาพ (Open File) (ต่อ) นอกจากนี้สามารถใช้วิธี Double Click บนพื้นที่ว่างๆ ของ Work Area ได้ โปรแกรม PhotoShop เตรียม ภาพตัวอย่างไว้ให้เรียกดูจาก Folder ดังนี้

8/1 การเปิดหน้างานใหม่ (New File) การเปิดหน้างานใหม่ กระทำได้โดยการเลือกเมนู คำสั่ง File> New… และปรากฏกรอบทำงาน ดังนี้ Name จะเป็นชื่อไฟล์

8/2 การเปิดหน้างานใหม่ (New File) (ต่อ) Image Size ประกอบด้วยค่าสำคัญคือ Width ความกว้างของชิ้นงาน ควรใช้หน่วยเป็น Pixel Height ความสูงของชิ้นงาน ควรใช้หน่วยเป็น Pixel Resolution ความละเอียดของชิ้นงาน ควรใช้ 72 pixel/inch Mode ต้องเลือกเป็น RGB Color Contents เป็นการระบุลักษณะของพื้นภาพ (Background) แนะนำให้ใช้ White หรือ Transparent

8/3 การเปิดหน้างานใหม่ (New File) (ต่อ) การกำหนดค่าเกี่ยวกับ Width และ Height ของภาพ จะต้องสัมพันธ์กับ Screen Area ของจอภาพ และ ลักษณะ Layout ของหน้าเว็บที่กำหนดไว้ด้วยเสมอ โดยปกติจอภาพ 14 นิ้ว มี Screen Area ได้ 3 แบบ คือ 640 x 480 pixel 800 x 600 pixel

8/4 การเปิดหน้างานใหม่ (New File) (ต่อ) 1024 x 768 pixel ดังนั้นก่อนจะสร้างภาพกราฟิก ควรวางแผนก่อนว่า เว็บที่จะนำเสนอ ต้องการให้แสดงผลได้ดีที่สุดบนจอภาพที่มี Screen Area เท่าใด เพราะโปรแกรมเบราเซอร์มีจะค่ากำหนดเกี่ยวกับ Margin เสมอ ตลอดจนจะต้องมี Scroll Bar ดังนั้นค่าความยาวที่เหมาะสมสำหรับจอภาพจึงแตกต่างกันไป

9/1 การจัดเก็บภาพ (Save File) สำหรับภาพ ต้นฉบับ การบันทึกภาพเพื่อนำไปใช้งานสำหรับงานเว็บ ควรเป็นแบบรวมเลเยอร์ที่มีทั้งหมดเป็นชั้นเดียว คือชั้น Background ซึ่งมีวิธีการบันทึกแตกต่างกันไป ดังนี้ เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิด ไฟล์ภาพที่ต้องการ

9/2 การจัดเก็บภาพ (Save File) สำหรับภาพ ต้นฉบับ (ต่อ) เลือกคำสั่ง File, Save สำหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สำหรับการ จัดเก็บงานครั้งที่สองและต้องการ เปลี่ยนชื่อไฟล์ภาพ ปรากฏจอภาพโต้ตอบการทำงาน Save as ดังนี้

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

10/1 การจัดเก็บภาพ (Save) ใน Format “jpg” เป็นฟอร์แมตที่เหมาะกับภาพถ่าย หรือภาพที่ต้องการ ให้คงความคมชัดและความสดใสของสี โปรแกรม PhotoShop มีวิธีการจัดเก็บภาพให้เป็นฟอร์แมต JPG ดังนี้ เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ ภาพที่ต้องการ ปรับแต่งภาพด้วยคำสั่งของ PhotoShop

10/2 การจัดเก็บภาพ (Save) ใน Format “jpg” (ต่อ) เลือกคำสั่ง File> Save สำหรับการจัดเก็บงานครั้งแรก หรือ File> Save as สำหรับการจัดเก็บงานครั้งที่สอง และต้องการเปลี่ยนชื่อไฟล์ภาพ ปรากฏจอภาพโต้ตอบการทำงาน เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ จาก รายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น JPEG (*.JPG, *.JPE) จาก รายการ Format :

น้อยเกินไป เพราะจะทำให้คุณภาพของภาพต่ำ และไม่คมชัด 10/3 การจัดเก็บภาพ (Save) ใน Format “jpg” (ต่อ) คลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ ปรากฏหน้าต่าง JPEG Options ดังนี้ กำหนดค่า Quality อันเป็นค่า เกี่ยวกับคุณภาพของภาพ ไว้ ประมาณ 5 - 7 ไม่ควรกำหนด ค่าไว้มากเกินไปเพราะจะทำให้ ไฟล์มีขนาดใหญ่ และทำให้เสีย เวลานานในการโหลดภาพจาก Server และไม่ควรกำหนดค่าไว้ น้อยเกินไป เพราะจะทำให้คุณภาพของภาพต่ำ และไม่คมชัด

10/4 การจัดเก็บภาพ (Save) ใน Format “jpg” (ต่อ) Format Options เป็นรายการเลือกเพิ่มเติม: Baseline ("Standard") เป็นตัวเลือกที่ดี ที่สุดสำหรับภาพ เนื่องจากสนับสนุนกับเว็บ เบราเซอร์ทุกตัว Baseline Optimized สำหรับการบีบอัดไฟล์ ภาพให้มีขนาดเล็กกว่าปกติ Progressive เป็นตัวเลือกสำหรับภาพที่มีขนาด โตมากๆ และต้องการให้มีฟังก์ชันการนำเสนอ แบบภาพโครงร่างก่อนที่จะแสดงภาพจริง

11/1 การจัดเก็บภาพ (Save) ใน Format “GIF87” เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ ภาพที่ต้องการ ปรับแต่งภาพ ด้วยคำสั่งของ PhotoShop เลือกคำสั่ง File> Save สำหรับการจัดเก็บงานครั้งแรก หรือ File> Save as สำหรับการจัดเก็บงานครั้งที่สอง และต้องการเปลี่ยนชื่อไฟล์ภาพ ปรากฏจอภาพโต้ตอบการทำงาน

11/2 การจัดเก็บภาพ (Save) ใน Format “GIF87” (ต่อ) เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ จาก รายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น CpmpuServe GIF (*.GIF) จากรายการ Format : ปรากฏกรอบโต้ตอบการ รวมเลเยอร์ คลิกปุ่ม Ok เพื่อทำการ

11/3 การจัดเก็บภาพ (Save) ใน Format “GIF87” (ต่อ) ปรากฏกรอบโต้ตอบการกำหนดค่าเกี่ยวกับ Indexed Color ตรวจสอบค่าสี หรือปรับ เปลี่ยนตามที่ต้องการ แล้ว คลิกปุ่ม OK ปรากฏกรอบโต้ตอบการตั้ง คุณสมบัติของภาพ ถ้าภาพขนาดเล็ก ให้เลือกเป็น Normal แต่ถ้าภาพมี ขนาดโต ให้เลือกเป็น Interlaced หรือตามต้องการ แล้วคลิกปุ่ม OK

12/1 การจัดเก็บภาพ (Save) ใน Format ”GIF89” นิยมใช้ในการสร้าง WebPage ปกติจะใช้กับภาพที่มีสีหรือความคมชัดไม่มากนัก และต้องการให้พื้นหลังของภาพ (Background) มีลักษณะโปร่งใส วิธีการจัดเก็บภาพให้เป็นฟอร์แมต GIF89 Transparent มีดังนี้ เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ ภาพที่ต้องการ ปรับแต่งภาพ ด้วยคำสั่งของ PhotoShop

12/2 การจัดเก็บภาพ (Save) ใน Format ”GIF89” (ต่อ) เลือกเมนูคำสั่ง Help> Export Transparent Image… ปรากฏกรอบโต้ตอบ เลือกรูปแบบของภาพต้นฉบับ ดังนี้ เลือกรายการ My image is on a transparent background ถ้าภาพที่สร้าง มีพื้นเป็นแบบ Transparent อยู่แล้ว

12/3 การจัดเก็บภาพ (Save) ใน Format ”GIF89” (ต่อ) เลือกรายการ I have selected the area to be made transparent เมื่อใช้คำสั่ง Selection เลือก สีที่ต้องการกำหนดให้มีโหมดเป็น Transparent แล้ว เลือกรายการ I need to select the area to be made transparent เมื่อขอกลับไปกำหนด Selection เพื่อเลือกสีที่ต้องการกำหนดให้มีโหมดเป็น Transparent ก่อน การเลือกพื้นภาพ ปกติจะใช้เครื่องมือ Magic Wand คลิก ที่สีพื้นที่ต้องการกำหนดเป็น Transparent

12/4 การจัดเก็บภาพ (Save) ใน Format ”GIF89” (ต่อ) หากทำการเลือกรายการ 1 หรือ 2 แล้ว ก็ให้คลิกปุ่ม Next ปรากฏกรอบโต้ตอบ ดังนี้ คลิกเลือกรายการ Online เพื่อกำหนด Transparent สำหรับภาพนำเสนอผ่านเว็บ แล้วคลิกปุ่ม Next

12/5 การจัดเก็บภาพ (Save) ใน Format ”GIF89” (ต่อ) ปรากฏกรอบโต้ตอบ เลือกฟอร์แมตของภาพ เลือก เป็น .GIF โปรแกรมจะทำการตรวจสภาพของรูปภาพ ให้คลิกปุ่ม Next จากนั้นจะปรากฏกรอบโต้ตอบถามค่าสีที่ต้องการใช้ งานกับภาพนั้นๆ โดยสามารถเลือกระดับค่าสีได้ตาม ต้องการ เพื่อให้เหมาะสมกับภาพนั้นๆ

12/6 การจัดเก็บภาพ (Save) ใน Format ”GIF89” (ต่อ) เลือกรูปภาพที่ต้องการ แล้วคลิกปุ่ม OK ปรากฏจอภาพโต้ตอบ Save As เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ จาก รายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น CpmpuServe GIF (*.GIF) จากรายการ Format :

12/7 การจัดเก็บภาพ (Save) ใน Format ”GIF89” (ต่อ) ถ้าภาพขนาดเล็ก ให้เลือกเป็น Normal แต่ถ้า ภาพมีขนาดใหญ่ ให้เลือกเป็น Interlaced หรือ ตามต้องการ แล้วคลิกปุ่ม OK กดปุ่ม Finish รอสักครู่โปรแกรมจะทำการจัดเก็บภาพในฟอร์แมต GIF89 Transparent

13/1 คำสั่ง Save for Web คำสั่ง Save for Web มีจุดเด่นคือ ผู้ใช้สามารถตรวจสอบขนาดไฟล์ภาพ (File Size) และความคมชัดของภาพได้โดยตรงก่อนยืนยันการจัดเก็บ โดยมีวิธีการใช้งานดังนี้ เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ ภาพที่ต้องการ ปรับแต่งภาพ ด้วยคำสั่งของ PhotoShop เมื่อ ปรับแต่งภาพได้ตามที่ต้องการแล้ว ก็จะทำการ จัดเก็บภาพโดยเลือกคำสั่ง File> Save for Web…

13/2 คำสั่ง Save for Web (ต่อ) ปรากฏกรอบทำงานดังนี้ เลือก Tab ทำงานของ หน้าต่างนี้เป็น 4-Up เพื่อแสดงภาพแบบ 4 ช่องภาพ

เมื่อได้ค่าที่ต้องการก็คลิกปุ่ม OK เพื่อยืนยันการจัดเก็บภาพ 13/3 คำสั่ง Save for Web (ต่อ) ช่องแรกด้านซ้ายมือจะแสดงภาพต้นฉบับ พร้อมขนาด ไฟล์ ส่วนกรอบที่เหลือจะแสดงภาพที่ผ่านการวิเคราะห์ ด้วยโปรแกรม ซึ่งสามารถเปลี่ยนแปลงได้โดย คลิกเลือก ภาพในกรอบที่ต้องการทำงาน (กรอบที่ 2, 3, 4) จากนั้นกำหนดค่าที่ต้องการจากรายการ Setting ตาม ค่าที่ต้องการ เมื่อได้ค่าที่ต้องการก็คลิกปุ่ม OK เพื่อยืนยันการจัดเก็บภาพ

14/1 โหมดภาพที่เหมาะสมสำหรับงานเว็บ กราฟิก ภาพที่มีโหมดสีอื่นๆ ที่ไม่ใช่โหมด RGB เมื่อนำมาใช้งานจริง จะพบ ปัญหามากมาย เช่นปัญหาเกี่ยว กับคำสั่ง Filter ปัญหาเกี่ยวกับสี และอื่นๆ ซึ่ง สามารถสังเกต โหมดภาพได้จาก แถบ Title Bar ที่ปรากฏแถวบนของจอภาพทำงาน ดังรูป

14/2 โหมดภาพที่เหมาะสมสำหรับงานเว็บ กราฟิก (ต่อ) ดังนั้น หากพบปัญหาโหมดภาพที่ไม่ใช่ RGB ควร ทำการปรับเปลี่ยน เป็นโหมด RGB ก่อน โดยเลือก คำสั่ง Image> Mode> RGB ดังภาพ

15/1 โหมดภาพที่เหมาะสมสำหรับงานเว็บ กราฟิก นอกจากโหมดภาพ CMYK ซึ่งเป็นโหมดภาพที่ไม่ เหมาะสม กับการสร้างภาพสำหรับเว็บ ยังมีภาพโหมด RGB บางลักษณะเช่นกัน ที่ไม่เหมาะสมกับการสร้าง ภาพสำหรับเว็บ ได้แก่ภาพที่มี Channel แบบ 16 bit ทดลองเปิดไฟล์ภาพชื่อ Temple (16bit).tif จาก โฟลเดอร์ดังนี้

15/2 โหมดภาพที่เหมาะสมสำหรับงานเว็บ กราฟิก ตัวอย่างภาพ RGB ที่มี Channel แบบ 16 bit ดังนั้น หากพบปัญหาโหมดภาพดังกล่าว ควรทำการปรับ เปลี่ยนก่อน โดยเลือกคำสั่ง Image> Mode> 8bit/channel

16/1 เครื่องมือพื้นฐาน Zoom ใช้ในการขยายภาพวัตถุเข้า-ออก เพื่อให้เราสามารถมองเห็นงานได้ชัดเจนยิ่งขึ้น เมื่อต้องการขยายภาพให้ใหญ่ขึ้นให้นำCursor ไปคลิกที่ภาพ ถ้าต้องการทำให้ภาพเล็กลง ให้กด <ALT> ค้าง ไว้แล้วจึงไปคลิกที่ภาพ หาก Double Click ที่เครื่องมือ zoom จะเป็นการ ขยายภาพให้สู่โหมด 100% อย่างรวดเร็ว

16/2 เครื่องมือพื้นฐาน (ต่อ) Hand ใช้ในการเลื่อนภาพ ในกรณีที่ภาพมีขนาดใหญ่ ไม่สามารถมองได้ทั่วถึง หากทำการ Double Click ที่เครื่องมือ Hand จะ เป็นการปรับหน้าจอภาพ ให้อยู่ในโหมดพอดีกับ กรอบภาพ (Actual Size) Move ใช้ในการย้ายภาพที่เราทำงานอยู่  

16/3 เครื่องมือพื้นฐาน (ต่อ) Selection เป็นเครื่องมือที่ใช้ในการสร้างขอบเขต ซึ่งจะมีให้หลายแบบ ขึ้นอยู่กับงานที่เราต้องการสร้าง สามารถ Double Click เพื่อเปิดหน้าต่างควบคุม (Options) ประกอบการทำงาน เช่น การกำหนดค่าความฟุ้งของขอบ (Feather) เป็นต้น

17/1 มุมมองของหน้าต่างภาพ เมื่อมีการเปิดภาพ สามารถควบคุมมุมมองต่างๆ ได้ดังนี้ Double Click ที่ไอคอน Hand เพื่อปรับภาพให้มี ขนาดพอดีกับจอภาพ (Fit on Screen) คลิกเลือกเครื่องมือ Zoom แล้วนำเมาส์ไปคลิกที่ ภาพ เพื่อขยายภาพ กดปุ่ม ค้างไว้ แล้วคลิกเมาส์ที่ภาพ เพื่อย่อภาพ คลิกเลือกรายการจาก Zoom Options Bar

17/2 มุมมองของหน้าต่างภาพ Double Click ที่ไอคอน Zoom เพื่อปรับให้มี ขนาด 100% ควบคุมจาก Navigator Palette

18/1 การใช้สี เครื่องมือแรกที่อยู่ใน Tool Bar ที่เกี่ยวกับสีคือ เมื่อคลิกเข้าไปใน Foreground/Background Color จะ เจอกับ Color Picker เพื่อใช้ในการเลือกสีที่ ต้องการ

18/2 การใช้สี (ต่อ) คลิกเลือกสีที่ต้องการแล้วกดปุ่ม OK สามารถกดที่ปุ่ม Default color เพื่อคืนค่าสีเป็น "ขาว/ดำ" สามารถกดปุ่ม Swap color เพื่อกลับค่าสีที่เลือก เรายังสามารถเลือก สีได้จาก Palette Color และ Swatches โดยการเข้าไปที่เมนู Window / Show Color> Show Swatches

19/1 การปรับขนาดของภาพ หากพบว่าภาพที่นำมาใช้งานมีขนาดใหญ่มาก ควร ทำการย่อขนาดของภาพด้วย PhotoShop ก่อน นำไปใช้งานจริง ในการทำ Webpage ไม่ควรใช้ Attribute Width & Height ใน TAG <IMG> ควบคุมขนาด เพราะจะทำให้ การโหลดภาพช้ากว่าปกติ

19/2 การปรับขนาดของภาพ (ต่อ) ควรใช้คำสั่งที่ในการย่อ/ขยายขนาดภาพ คือ Image> Image Size... ซึ่งปรากฏจอภาพทำงานดังนี้ ปรับค่า Pixel Dimensions โดยสามารถปรับเพียงค่าใดค่าหนึ่ง อีกค่าจะปรับให้อัตโนมัติ แต่ถ้าต้องการปรับค่าเองทั้งสองค่า จะต้องยกเลิกรายการเลือก ของ Constrain Proportions ก่อน

20. การปรับความละเอียดของภาพ ภาพที่จะนำมาใช้ในเอกสารเว็บ จะต้องมีค่าความละเอียด (Resolution) เท่ากับ 72 pixels/inch เท่านั้น ดังนั้นหากภาพนั้นมีค่าความละเอียดมาก จะต้องทำการปรับค่าก่อน โดยปกติเมื่อมีการปรับค่า ความละเอียดของภาพ จะ ส่งผลต่อขนาดของภาพ (pixel dimensions) ด้วย ดังนั้นจะต้องยกเลิกรายการเลือกของ Resample Image ก่อน