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

บทที่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
ใช้เลือกสีจากสีต่าง ๆ บนภาพ



ไม่มีความคิดเห็น:

แสดงความคิดเห็น