หน่วยที่ 3
การออกแบบเว็บเพจด้วย Photoshop CS6
คุณสมบัติพื้นฐานของโปรแกรม Adobe Photoshop CS6
โปรแกรม Photo shop เป็นโปรแกรมในตระกูล Adobe ที่ใช้สำหรับตกแต่งภาพถ่ายและภาพกราฟฟิก ได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อีกทั้งยังสามารถ retouching ตกแต่งภาพและการสร้างภาพ ซึ่งกำลังเป็นที่มนิยมสูงมากในขณะนี้ เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพ การใส่ Effect ต่าง ๆให้กับภาพ และตัวหนังสือ การทำภาพขาวดำ การทำภาพถ่ายเป็นภาพเขียน การนำภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง
เราสามารถเรียนรู้วิธีการใช้โปรแกรม Adobe Photoshop นี้ได้ด้วยตัวเอง คุณสามารถที่จะทำการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆ ได้อย่างง่ายดาย และสิ่งที่ขาดไม่ได้ก็คือ การใส่ข้อความประกอบลงในภาพด้วย และเนื่องด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่างต่อเนื่อง ทำให้เราจำเป็นต้องศึกษาคำสั่งต่างๆ ให้เข้าใจ แต่ที่สำคัญ เมื่อคุณเรียนรู้การใช้คำสั่งในเวอร์ชั่นเก่า คุณก็ยังคงสามารถนำไปประยุกต์ใช้กับเวอร์ชั่นใหม่ๆ
ส่วนประกอบชองโปรแกรม Adobe Photoshop CS6
1. เมนูของโปรแกรม Application menu หรือ Menu bar ประกอบด้วย
1. File หมายถึง รวมคำสั่งที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่, เปิด, ปิด, บันทึกไฟล์, นำเข้าไฟล์, ส่งออกไฟล์ และอื่น ๆ ที่เกี่ยวกับไฟล์
2. Edit หมายถึง รวมคำสั่งที่ใช้สำหรับแก้ไขภาพ และปรับแต่งการทำงานของโปรแกรมเบื้องต้น เช่น ก๊อปปี้, วาง, ยกเลิกคำสั่ง, แก้ไขเครื่องมือ และอื่น ๆ
3. Image หมายถึง รวมคำสั่งที่ใช้ปรับแต่งภาพ เช่น สี, แสง, ขนาดของภาพ (image size), ขนาดของเอกสาร (canvas), โหมดสีของภาพ, หมุนภาพ และอื่น ๆ
4. Layer หมายถึง รวมคำสั่งที่ใช้จัดการกับเลเยอร์ ทั้งการสร้างเลเยอร์, แปลงเลเยอร์ และการจัดการกับเลเยอร์ในด้านต่าง ๆ
5. select รวม คำสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ (Selection) เพื่อนำไปใช้งานร่วมกับคำสั่งอื่น ๆ เช่น เลือกเพื่อเปลี่ยนสี, ลบ หรือใช้เอฟเฟ็กต์ต่าง ๆ กับรูปภาพ
6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ
7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก
8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ
9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น
2. เมนูของพื้นที่ทำงาน Panel menu
Panel (พาเนล) เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคำสั่งควบคุมการทำงานต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใช้สำหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตำแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตำแหน่งของพื้นที่ที่เลือกไว้
3. พื้นที่ทำงาน Stage หรือ Panel
เป็นพื้นที่ว่างสำหรับแสดงงานที่กำลังทำอยู่
4. เครื่องมือที่ใช้งาน Tools panel หรือ Tools box
Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ในการวาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจำนวนมาก ดังนั้นจึงมีการรวมเครื่องมือที่ทำหน้าที่คล้าย ๆ กันไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริเวณมุมด้านล่างดังภาพ 2 เพื่อบอกให้รู้ว่าในปุ่มนี้ยังมีเครื่องมืออื่นอยู่ด้วย
5. สิ่งที่ควบคุมเครื่องมือที่ใช้งาน Tools control menu หรือ Option bar
2. Option Bar คือ
เป็นส่วนที่ใช้ปรับแต่งค่าการทำงานของเครื่องมือต่าง ๆ โดยรายละเอียดในออปชั่นบาร์จะเปลี่ยนไปตามเครื่องมือที่เราเลือกจากทูลบ็อกซ์ในขณะนั้น เช่น เมื่อเราเลือกเครื่องมือ Brush (พู่กัน) บนออปชั่นบาร์จะปรากฏออปชั่นที่ใช้ในการกำหนดขนาด และลักษณะหัวแปรง, โหมดในการระบายความโปร่งใสของสี และอัตราการไหลของสี เป็นต้น
3.แถบเครื่องมือ (Tools Bar)
เครื่องมือแต่ละชิ้นมีคุณสมบัติ ดังนี้
Move
ใช้สำหรับเลือกพื้นที่บนภาพเป็นรูปสี่เหลี่ยม วงกลม วงรี หรือเลือกเป็นแถวคอลัมน์ ขนาด 1 พิเซล
Marquee
ใช้สำหรับย้ายพื้นที่ที่เลือกไว้ของภาพ หรือย้ายภาพในเลเยอร์หรือย้ายเส้นไกด์
Lasso
ใช้เลือกพื้นที่บนภาพเป็นแนวเขตแบบอิสระ
Magic Wand
ใช้เลือกพื้นที่ด้วยวิธีระบายบนภาพ หรือเลือกจากสีที่ใกล้เคียงกัน
Crop
ใช้ตัดขอบภาพ
Slice
ใช้ตัดแบ่งภาพเพื่อบันทึกไฟล์ภาพย่อย ๆ ที่เรียกว่าสไลซ์ (Slice)
สำหรับนำไปสร้างเว็บเพจ
Eyedropper
ใช้เลือกสีจากสีต่าง ๆ บนภาพ
Healing Brush
ใช้ตกแต่งลบรอยตำหนิในภาพ
Brush
ใช้ระบายลงบนภาพ
Clone Stamp
ใช้ทำสำเนาภาพ โดยก๊อปปี้ภาพจากบริเวณอื่นมาระบาย หรือระบายด้วยลวดลาย
History Brush
ใช้ระบายภาพด้วยภาพของขั้นตอนเดิมที่ผ่านมา หรือภาพของสถานะ
เดิมที่บันทึกไว้
Eraser
ใช้ลบภาพบางส่วนที่ไม่ต้องการ
Gradient
ใช้เติมสีแบบไล่ระดับโทนสีหรือความทึบ
Blur
ใช้ระบายภาพให้เบลอ
Bern
ใช้ระบายเพื่อให้ภาพมืดลง
Dodge
ใช้ระบายเพื่อให้ภาพสว่างขึ้น
pen
ใช้วาดเส้นพาธ (Path)
Horizontal Type
ใช้พิมพ์ตัวอักษรหรือข้อความลงบนภาพ
Path Selection
ใช้เลือกและปรับแต่งรูปทรงของเส้นพาธ
Rectangle
ใช้วาดรูปทรงเรขาคณิตหรือรูปทรงสำเร็จรูป
Hand
ใช้เลื่อนดูส่วนต่าง ๆ ของภาพ
Zoom
ใช้ย่อหรือขยายมุมมองภาด
set Foreground Color, Set Background Color
ใช้สำหรับกำหนดสี- Foreground Color และ Background Color
เปิดแสดงหน้ากระดาษ แบบ Full screen
4. Panel คือ
เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคำสั่งควบคุมการทำงานต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใช้สำหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตำแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตำแหน่งของพื้นที่ที่เลือกไว้
5. พื้นที่การำงาน (Stage) คือ พื้นที่สำหรับการทำงาน ที่ใช้สร้าง ตกแต่งวัตถุต่างๆ
6. แถบแสดงสถานะ (Status Bar) คือ แถบแสดงสถานการณ์ทำงานของไฟล์งานนั้นๆ
7. Control Bar คือ
ใช้ในการเก็บการใช้งานโปรแกรม การปิดโปรแกรมเมื่อไม่ต้องการใช้ แล้วยังสามารถจะย่อหน้าต่างโปรแกรมให้เล็กลงตามต้องการได้ ไว้ใช้ในกรณีใช้งานร่วมกับโปรแกรมอื่นๆ
มี 3 ปุ่มด้วยกัน ประกอบด้วย
1.Minimize คือ การพับโปรแกรมมาเก็บไว้ที่ ทาร์สบาร์ด้านล่าง
2.Restorn คือ การย่อหน้าต่างโปรแกรม ให้เล็กลง หรือให้เต็มหน้าจอ
3.Close คือ การใช้ปิดโปรแกรมเมื่อไม่ต้องการใช้งาน
การสร้างส่วนประกอบของเว็บไซต์
1. ส่วนหัวของเว็บเพ็จ (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์
มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ ส่วนใหญ่ประกอบด้วย
- โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ
- ชื่อเว็บไซต์
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์
2.ส่วนของเนื้อหา (Page Body)
เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย
สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ
3. ส่วนท้ายของหน้า (Page Footer)
เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น
โดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ
ส่วนประกอบย่อยอื่นๆ ที่จำเป็น
1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่นต่างๆ ดังเช่นโปรแกรมประมวลคำ
2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย
3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง
4. Counter ใช้นับจำนวนผู้ที่เข้ามาเยี่ยมชมเว็บเพจของเรา
5. Cool Links ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น
6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้วส่งกลับมายังเว็บเพจ
7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตกต่างกันและเป็นอิสระจากกัน
8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กำหนดส่วนต่างๆ บนรูป เพื่อเชื่อมโยงไปยังเว็บเพจอื่นๆ
9.Java Applets เป็นโปรแกรมสำเร็จรูปเล็กๆ ที่ใส่ลงในเว็บเพจ เพื่อให้การใช้งานเว็บเพจมีประสิทธิภาพมากยิ่งขึ้น
นอกจากส่วนประกอบดังกล่าวแล้ว องค์ประกอบที่นิยมใส่ไว้ในเว็บเพจอีก 2 ส่วน ได้แก่ สมุดเยี่ยม (guestbook) และเว็บบอร์ด (webboard)
ที่ช่วยให้เว็บเพจกลายเป็นสื่อที่มีปฏิสัมพันธ์ระหว่างผู้ใช้กับผู้สร้างและระหว่างผู้ใช้ด้วยกันเอง
การสร้างเอกสารและการกำหนดเอกสาร
การตัดภาพเป็นชิ้นเล็ก ชิ้นน้อยด้วย Slice Tool
Slice Tool จะเป็นการตัดภาพเป็นชิ้นเล็กๆไว้สำหรับทำงานออกแบบเว็บ ทุกภาพที่ถูกตัดแบ่งจะสามารถเชื่อมโยงลิงก์ได้ และโปรแกรมจะสร้างโค้ด HTML ให้ด้วยค่ะ เคยเห็นเมนูที่ดูเหมือนจะเป็นภาพเดียวกันใช่ไหมคะ แต่จะมีหลายลิงก์ให้เราคลิกเข้าไป Slice Tool ก็สามารถทำแบบนั้นได้ค่ะ (หรือเขาอาจจะใช้ Slice Tool ทำส่วน Slice Selection Tool คือ เครื่องมือไว้สำหรับแก้ไขหรือปรับแต่ง Slice
วิธีการใช้งาน Slice Tool
คลิกค้างแดรกเมาส์สร้างเป็นกรอบสี่เหลี่ยมค่ะ พอปล่อยก็จะมีเส้น Slice ขึ้นมา Slice ที่เราสร้างจะเรียกว่า User-Slice (เส้นทึบ) ส่วน Slice ที่เกิดขึ้นหลังจากที่เราสร้าง Slice จะเรียกว่า Auto-Slice (เส้นประ)
การสร้าง Layer Based Slice ไปที่เมนูบาร์ Layer เลือก New Layer Based Slice
และ เรายังสามารถสร้าง Slice จาก Guides ก่อนอื่นก็ต้องสร้าง Guides แล้วเลือกเครื่องมือ Slice Tool คลิกที่ Slice From Guides
การลบ Slice เลือกใช้เครื่องมือ Slice Selection Tool คลิกที่ Slice ที่ต้องการลบ เมื่อคลิก Slice
Slice นั้นจะเป็นสีเหลืองแล้วกดปุ่ม Delete
การตั้งค่า Slice
Slice Type : สามารถเลือกได้ว่าจะมีภาพหรือไม่มีภาพ
Name : ชื่อ Slice
URL : ลิงก์ เมื่อคลิกที่ Slice นั้นจะไปยังลิงก์ที่ระบุ
Target : เป้าหมาย กำหนดว่าจะให้ลิงก์เปิดหน้าต่างใหม่ (ระบุ _blank) หรือเปิดในหน้าต่างเดิม (ระบุ _self)
Message Text : ข้อความที่จะให้ปรากฏบริเวณ Status Bar ของ Browser
Alt Tag : ข้อความที่จะให้ปรากฏ เมื่อเมาส์เลื่อนผ่าน
Dimensions : ตำแหน่งของสไลด์
การบันทึก Slice
ไปที่เมนูบาร์ File เลือก Save for Web... หรือใช้คีย์ลัด Alt+Shift+Ctrl+S แล้วคลิกปุ่ม Save ค่ะ
ตรง Format เลือก HTML and Images ถ้าไม่ต้องการตั้งค่าอะไรเพิ่มเติม คลิกปุ่ม OK ค่ะ
การ Save รูปภาพจาก Photoshop Cs6 เป็นไฟล์นามสุกุลต่าง ๆ
เมื่อเราตกแต่งภาพในโปรแกรม Photoshop Cs6 เสร็จแล้ว ต่อไปก็ต้องเป็นวิธีการ Save ไฟล์รูปภาพที่เราได้แต่งขึ้นมา แต่จะ Save เป็นไฟล์นามสกุลต่างๆ เช่น JPEG PNG หรือไฟล์ชนิดใดก็แล้วแต่ มีวิธี Save ยังไง ?เรามีวิธีเบื้องต้นง่ายๆสำหรับมือใหม่เรียกได้ว่าเรียนรู้กันตั้งแต่ทำอะไรไม่เป็นเลย
1. File - Save As..
2. เลือกตำแหน่ง Save ที่ต้องการ แล้ว เลือก Format เป็นชนิดไฟล์ที่ต้องการ (วงกลมสีแดง) แล้วกดปุ่ม Save
เพียงเท่านี้เราก็สามารถ Save นามสกุลไฟล์นามสกุลต่างๆ จาก Photoshop Cs6 เพื่อใช้งานได้ตามที่เราต้องการได้
