บทที่3 การออกแบบเว็บเพจด้วย Photoshop CS6

เนื้อหาสาระ

  การออกแบบเว็บไซต์หากต้องการให้เว็บไซต์ที่ออกแบบมีความสวยงาม มีสีสันมีภาพสวยงามเหมาะสมกับการออกแบบเว็บไซต์ โปรแกรมที่เหมาะสมสำหรับปฏิบัติการคือโปรแกรมPhotoshop CS6เป็นโปรแกรมที่สามารถออกแบบตัวอักษรให้สวยงามตกแต่งภาพให้มีขนาดสีสันความสว่าได้ตามต้องการจากนั้นบันทึกเป้นไฟล์ชนิดที่สามารถนำไปใช่ในการออกแบบเว็บไซต์ได้ตามต้องการ

3.1 ความรู้พื้นฐานโปรแกรม Adobe Photoshop CS6

โปรแกรม Adobe Photoshop CS6คือ โปรแกรมที่สามารถสร้างออกแบบกราฟฟิคแก้ไขภาพเคลื่อนไหวรวมทั้งการออกแบบหน้าเว็บเพจซึ่งโปรแกรม Adobe โฟโต้ช็อปซีเอส6มีเครื่องมือเพื่อสนับสนุนการสร้างชิ้นงานประเภทต่างๆได้แก่ประเภทสิ่งพิมพ์งานนำเสนอตลอดจนการออกแบบเว็บเพจดังนั้นโปรแกรม Adobe โฟโต้ช็อปซีเอส 6 จึงเป็นโปรแกรมที่มีความนิยมสูงและเหมาะสมกับการสร้างชิ้นงานด้านกราฟฟิกการแก้ไขภาพและการออกแบบประเภทต่างๆ

        3.1.2ส่วนประกอบของโปรแกรม Adobe โฟโต้ช็อปซีเอส 6 แสดงรูปด้านล่าง

             1. แถบเมนู คือกลุ่มเมนูที่รวบรวมคำสั่งต่างๆเพื่อควบคุมการทำงานกอบด้วยเมนูต่างๆดังต่อไปนี้Menu file คือเธอชุดคำสั่งสำหรับการจัดไฟล์ภาพ

            2.  Menu Edit คือแถบชุดคำสั่งที่ทำหน้าที่ในการแก้ไขปรับแต่งภาพชนิดงานต่างต่างที่สร้างขึ้นเช่นการปรับขนาดของภาพการคัดลอกภาพการมองภาพการย้อนกลับการทำงานเป็นต้น

            3.  Manu Image คือแถบชุดคำสั่งที่ทำหน้าที่จัดการและปรับแต่งไฟล์ภาพเช่นสีแสงปรับแต่งภาพความคมชัดปรับเปลี่ยนโหมดให้เป็นขาวดำเป็นต้น

            4.  Manu Layer คือแบบชุดคำสั่งที่ทำหน้าที่จัดการต่างๆของLayerเช่นการลบเพิ่มLayerและการย้ายตำแหน่งลำดับของได้Layerเป็นต้น

            5.  Menu Select คือแถมชุดกลุ่มคำสั่งที่ทำหน้าที่จัดการกับการเลือกวัตถุหรือพื้นที่แบบต่างๆเพื่อนำไปใช้ร่วมกับคำลังอื่นเช่นเรื่องพื้นที่เพื่อย้ายตำแหน่งเลือกพื้นที่เพื่อเปลี่ยนสีเป็นต้น

            6.  Menu Filter คือแถบชุดคำสั่งที่ใช้ปากและ effect พิเศษให้กับวัตถุ

            7.  Menu 3D คือ แถบชุดคำสั่งที่ใช้ในการสร้างภาพแบบสามมิติ

            8.  Menu View คือคำสั่งที่ใช้ปรับแต่งแก้ไขและแสดงผลให้หน้าจอโปรแกรมเช่นบรรทัดและการย่อ/ขยายของมุมภาพ

            9.  Menu Window คือแถบชุดคำสั่งที่เกี่ยวข้องกับการแสดงและการซ่อนของแถบเครื่องมือต่างๆ

            10.Menu Help คือถ้าซื้อคำสั่งที่เกี่ยวข้องกับการแสดงและการสอนของแถบAdobe Photoshop CS6

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

      Option Bar (ออปชั่นบาร์) เป็นส่วนที่ใช้ปรับแต่งค่าการทำงานของเครื่องมือต่าง ๆ โดยรายละเอียดในออปชั่นบาร์จะเปลี่ยนไปตามเครื่องมือที่เราเลือกจากทูลบ็อกซ์ในขณะนั้น เช่น เมื่อเราเลือกเครื่องมือ Brush (พู่กัน) บนออปชั่นบาร์จะปรากฏออปชั่นที่ใช้ในการกำหนดขนาด และลักษณะหัวแปรง, โหมดในการระบายความโปร่งใสของสี และอัตราการไหลของสี เป็นต้น

3.2เครื่องมือพื้นฐานของโปรแกรม Tools

เครื่องมือพื้นฐานของโปรแกรม Tools

 Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ในการวาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจำนวนมาก ดังนั้นจึงมีการรวมเครื่องมือที่ทำหน้าที่คล้าย ๆ กันไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริเวณมุมด้านล่างดังภาพ 2 เพื่อบอกให้รู้ว่าในปุ่มนี้ยังมีเครื่องมืออื่นอยู่ด้วย

ทำการแบ่งกลุ่มเครื่องมือได้ดังภาพต่อไปนี้

เครื่องมือแต่ละชิ้นมีคุณสมบัติดังนี้

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

3.3Layer

เลเยอร์ Layer ชิ้นงานย่อย หรือเรียกให้เข้าใจง่ายคือ ชั้นของชิ้นงานใหญ่ เป็นหลักการทำงานของโปรแกรม Photoshop นั่นคือการนำชั้นต่างๆ มาผสมกันเพื่อปรับแต่งให้เกิดความสวยงามมากขึ้น

Layer

สามารถทำอะไรกับเลเยอร์

แสดงหรือซ่อน (Show or Hide Layer) การคลิกที่รูปดวงตาแต่ละครั้ง จะเป็นการเปิดเพื่อแสดง หรือปิดเพื่อซ่อนสีิงที่อยู่ในเลเยอร์ เช่น ถ้าเราไม่ต้องการให้แสดงภาพของเลเยอร์ใด ก็ทำการปิด หรือซ่อนไป
คัดลอก และ ทำซ้ำเลเยอร์ (Copy and Duplicate Layer) แบ่งเป็น
การคัดลอเเลเยอร์จากชิ้นงานหนึ่งไปยังอีกชิ้นงานหนึ่ง ทำได้หลายวิธี

• คลิกเลเยอร์ที่ต้องการทำการคัดลอก ใช้โปรแกรมเมนู Edit เลือก Copy หรือกดปุ่ม Ctrl C คลิก Tab ของชิ้นงานที่เราต้องการจะให้เลเยอร์นั้นมาวางไว้แล้วคลิก Edit เลือก Paste หรือกดปุ่ม Ctrl V  
•  คลิกเลเยอร์ที่ต้องการทำการคัดลอก คลิกขวาที่เม้าส์ เลือก Duplicate Layer จะได้หน้าต่างตามภาพด้านล่าง ใส่ชื่อในช่อง Destination ให้เป็นชื่อชิ้นงานที่เราต้องการนำเลเยอร์นี้ไปไว้
• คลิกเลเยอร์ที่ต้องการทำการคัดลอกค้างไว้ แล้วลากไปยังอีก Tab ของอีกชิ้นหนึ่งโดยตรง 

การคัดลอกเลเยอร์ในชิ้นงานเดียวกัน

•  คลิกที่เลเยอร์ ใช้โปรแกรมเมนู Layer เลือก Duplicate Layer จะมีหน้าต่างเหมือนภาพที่ด้านบนเช่นกัน แต่ช่อง Destination ไม่ต้องกำหนดชื่อชิ้นงานอื่น
•  คลิกที่เลเยอร์ ใช้โปรแกรมเมนู Layer เลือก New เลือก Layer via Copy (คีย์ลัด Ctrl + J)
• คลิกที่เลเยอร์นั้น และกดคีย์ Alt พร้อมกับลากเลเยอร์ไปยังตำแหน่งใน Panel ที่ต้องการวาง ปล่อยเม้าส์

ย้ายตำแหน่งเลเยอร์ (Move Layer)

ขั้นตอนการทำคล้ายกับการคัดลอก เพียงเปลี่ยนคำสั่งจาก Edit - Copy เป็น Edit Cut หรือ Ctrl X ในกรณีที่ย้ายคนละชิ้นงาน แต่ถ้าชิ้นงานเดียวกันเพียงคลิกที่เลเยอร์ และทำการเลื่อนไปยังตำแหน่งบน Panel ที่ต้องการเท่านัน

เพิ่มเลเยอร์ (Add Layer)

เพียงแค่คลิกไอคอน Create a new Layer ซึ่งอยู่ด้านล่างของ Layer Panel ติดกับรูปถัง ก็จะได้เลเยอร์เพิ่มแล้ว หรือถ้าต้องการใช้คำสั่งจากเมนูโปรแกรม เลือก Layer เลือก New เลือก Layer ตั้งชื่อ และ Enter ก็ได้เหมือนกัน  

 ลบเลเยอร์ (Delete Layer)

วิธีลบเลเยอร์ทำโดย คลิกที่เลเยอร์ที่ต้องการลบ กดปุ่ม Backspace หรือใช้โปรแกรมเมนู Layer เลือก Delete เลือก Layer หรือโดยการคลิกที่เลเยอร์แล้วลากมาที่รูปถัง

การล็อค และ ปลดล็อค เลเยอร์ (Lock and Unlock Layer)
การล็อคเลเยอร์ ทำได้โดย คลิกที่เลเยอร์ที่ต้องการล็อค แล้วคลิกที่รูปกุญแจ ส่วนการปลดล็อคก็เพียงทำซ้ำขั้นตอนเดียวกัน

การปลดล็อคเลเยอร์  Background วิธีปลดล็อคทำได้โดย ดับเบิ้ลคลิกที่เลเยอร์ จะมีหน้าต่างดังภาพขึ้นมา จะตั้งชื่อเลเยอร์ใหม่หรือไม่ก็ได้ เลเยอร์นั้นก็จะปลดล็อคเป็นเลเยอร์ธรรมดา

ตั้งชื่อเลเยอร์ (Name Layer)
วิธีตั้งชื่อให้กับเลเยอร์ ทำโดยดับเบิ้ลคลิกที่ชื่อบนเลเยอร์นั้น และพิมพ์ชื่อ เสร็จแล้ว Enter สำหรับ Photoshop CS6 เมื่อพิมพ์ชื่อเลเยอร์หนึ่งเสร็จแล้ว สามารถกด Tab เพื่อเลื่อนไปยังเลเยอร์อื่นเพื่อทำการพิมพ์ชื่อได้เลย ไม่ต้องมาทำซ้ำขั้นตอนเดิม ทำให้ประหยัดเวลาได้มาก

คลิปปิ้งเลเยอร์ (Clipping Layer)
หมายถึงการทำให้เลเยอร์หนึ่งมีผลกับอีกเลเยอร์หนึ่งเท่านั้น ไม่ไปกระทบเลเยอร์อื่นซึ่งอยู่ถัดลงไป อ่านแล้วคงจะ งง ลองดูภาพด้านล่างนะครับ จากภาพจะเห็นเลเยอร์ Wood Gain ซึ่งเป็นลายไม้ ผมต้องการให้ลายไม้นี้มีผลกับกรอบภาพซึ่งเป็นเลเยอร์ Frame ที่อยู่ถัดลงไปด้านล่างเท่านั้น ผมจึงใช้การ Clipping ซึ่งจะเห็นลูกศรอยู่ที่ด้านหน้านของเลเยอร์ Wood Gain การทำเช่นนี้ จะทำให้ได้กรอบภาพที่มีลายไม้สวยงามขึ้นมาแทนกรอบสีแดงเหลือง ในเลเยอร์ Frame

การทำ Clipping โดยการใช้คีย์ลัด ให้กดปุ่ม Alt แล้ววางเม้าส์ไว้ระหว่างทั้งสองเลเยอร์ จากนั้นคลิก หรือถ้าจะใช้คำสั่งโปรแกรมเมนู Layer เลือก Create Clipping Mask (คีย์ลัด Alt + Ctrl + G) ถ้าต้องการยกเลิกก็เพียงแค่ทำซ้ำวิธีเดิม โปรแกรมเมนู Layer เลือก Release Clipping Mask หรือ กดปุ่ม Alt แล้วคลิกเม้าส์ที่เดิมอีกครั้ง

3.4การเปิดพื้นที่การใช้งาน การนำภาพเข้าใช้งาน และการบันทึกงาน การเปิดพื้นที่การใช้งานใหม่

1. ไปที่ Application menu เลือก File > New จะปรากฎหน้าต่างดังรูปด่านล่าง

       2. จากรูปมีการกำหนดค่าต่างๆมากมาย 

ช่อง Name คือการกำหนดชื่อของชิ้นงาน

ช่อง Preset คือ ชนิดของงานต่างๆ ที่กำหนดไว้ให้แล้ว มีให้เลือกมากมาย เช่น Web , Photo ,U.S.paper , international paper

ช่อง size จะสัมพันธ์กับช่อง Preset คือ ขนาดของงานแต่ละชนิด เช่น ค่า Preset เป็น International paper ช่อง Size ก็จะมีตัวเลือก คือ A4 , A3 , A2 ,A1 และอื่นๆ

ช่อง width คือขนาดความกว้างของชิ้นงาน หากต้องการกำหนดเอง มีหน่วนให้เลือก 7 ชนิด

ช่อง Hight คือขนาดความสูงของชิ้นงาน 

ช่อง Resolution คือ ความละเอียดของงาน มีหน่วยเป็น Pixelต่อนิ้ว และ Pixel ต่อเซนติเมตร

ช่อง Color mode คือชนิดของพื้นที่สีในการทำงาน มีให้เลือกหลากหลาย เช่น RGB , CMYK และมีค่าความละเอียดให้เลือกเป็น bit

ช่อง Background Contents คือเลือกชนิดของ พื้นหลังงาน มี 3 แบบ คือ แบบขาว แบบสี และแบบโปร่งใส

          เมื่อทำการกำหนดขนาดของงานเสร็จเรียบร้อยแล้ว ให้คลิปปุ่ม OK เพื่อทำการเปิดพื้นที่การทำงานดังตัวอย่างภาพ เปิดพื้นที่งานขนาด A4 พื้นหลัง สีขาว

      

     การนำภาพเข้าใช้งาน

      หากเรามีภาพที่ต้องการเปิดเข้าใช้งานในโปรแกรม ในทำการ ตามขั้นตอนต่อไปนี้

       ไปที่ File > open เลือก Floder ที่มีรูปที่เราต้องการ เลือกรูปนั้นแล้วกด Open

     จะได้รูปมาปรากฎอยู่ที่ Stage หรือพื้นที่การทำงานดังรูป ตามตัวอย่างด้านล่าง ใช้รูปดอกบัว

     การบันทึกงาน

     สมมุติว่า เราได้แต่งรูป พระทราย ดังตัวอย่างภาพด้านล่าง เสร็จเรียบร้อยแล้ว เราต้องการบันทึกการทำงาน ทำตามขั้นตอนดังต่อไปนี้

1. ไปที่ File > Save as จะปรากฎหน้าต่างดังรูปด้านล่าง

• ช่อง File name คือให้เราตั้งชื่องาน
• ช่อง Format คือ การบันทึกไฟล์งานประเภทต่างๆ เช่น PSD , JPEG , TIFF และอื่นๆ 
• เมื่อเลือกเสร็จเรียบร้อยแล้ว กด Save ก็จะทำการบันทึกสำเร็จ

โปรแกรมที่จะใช้สำหรับสร้างเว็บไซต์ ในที่นี้จะสอนวิธีการสร้างด้วยโปรแกรม Dreamwaver และตกแต่งด้วย Photoshop ซึ่งมีคุณสมบัติในการตกแต่งรูปภาพ  สร้างไอคอน หรืออื่นๆ ที่มีความสวยงาม จะงามมากงามน้อยขึ้นอยู่กับผู้สร้างนะค้า

ก่อนอื่นเราต้องไปดีไซต์หัวเว็บก่อน (Heading) ก่อนที่จะดีไซต์เราต้องไปจัดหาโปรแกรมเสียก่อนนะคะ จะเวอร์ชั่นไหนก็ได้ ถ้าใช้งานพื้นฐาน ก็จะคล้ายๆ กัน

เปิดโปรแกรม Photoshop

• สร้างพื้นที่ทำงานโดยคลิกที่  File > New
• กำหนดขนาดพื้นที่ทำงาน (หัวเว็บ)
• Width คือความกว้างของหัวเว็บ ถ้าต้องการสร้างเว็บที่มีขนาดเต็มหน้าจอ ก็ประมาณ 980 pixels / Height คือความสูงของหัวเว็บ ประมาณ 140, 150, 160 pixels
• Color Mode เลือก RGB (สำหรับนำไฟล์แสดงผลทางหน้าจอคอมพิวเตอร์)
• Background Contents  รูปแบบพื้นที่ทำงาน ถ้าเลือก White คือพื้นสีขาว
• OK

เมื่อได้พื้นที่ทำงานแล้ว ขั้นตอนต่อไป เป็นการออกแบบหัวเว็บ

อธิบายตามหมายเลขนะคะ

1. เลือกสีที่จะผสมในช่องสีเหลี่ยมด้านบนและด้านล่าง (Forground / Background) ถ้าไม่ผสมก็จะได้สีแค่สีเดียว

2.คลิกเครื่องมือ Grandent Tool (นำเมาส์ชี้ค้างที่เครื่องมือ ก็จะมีชื่อเครื่องมือปรากฎขึ้นมา)

3.คลิกเมาส์ลากลงบนบริเวณพื้นที่ทำงาน มีรูปแบบให้เลือก 5 แบบ (จะนำภาพมาลงภายหลัง)

3.1 ข้ามไป 1 ขั้นตอนคือการพิมพ์ข้อความ ขออภัยค่ะ ให้คลิกที่ เครื่องมือรูปตัว T  (Type Tool)

3.2 คลิกที่บริเวณพื้นที่ทำงานและพิมพ์ข้อความที่ต้องการลงไป

4. ตกแต่งใส่สีเส้น หรือเงา โดยคลิกที่ Effect  (ตัว F เล็กๆ)

5.คลิก เครื่องหมายถูกที่ช่องสุดท้ายคือสีเส้น  (Storke) อันอื่นๆ ลองคลิกดูได้ค่ะ บนสุดจะเป็นเงา (Drop Shadow)

6. ใส่สีเส้นที่ช่องหมายเลข 6  ขนาดเส้นที่ช่อง Size เลขเยอะ แปลว่าเส้นยิ่งหนา

7.OK

การบันทึกงานที่สร้าง

1. คลิกเมนู File > Save For Web

2. คลิกเลือกประเภทไฟล์ (นามสกุล) ถ้าเป็นภาพปกติ JPEG ถ้าเป็นภาพเคลื่อนไหวได้ GIF

(วันหลังจะอธิบายความหมายของประเภทไฟล์ แต่ละประเภท)

3.OK