การออกแบบและพัฒนาเว็บไซต์: บทที่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