Workshop 5 : การสร้าง Navigation Bar แนวนอน Photoshop

Workshop 5 : การสร้าง Navigation Bar แนวนอน
Navigation Bar ที่ใช้งานบนเว็บเพจนั้นจะมีทั้งแนวตั้งและแนวนอน ทั้งนี้ขึ้นอยู่กับผู้ออกแบบเว็บเพจว่าต้องการจัดวางไว้ที่ตำแหน่งไหน ถ้าเป็น Navigation Bar แนวตั้งอาจจะวางไว้ที่ด้านซ้าย หรือขวาเว็บเพจ ในตัวอย่างนี้เป็นการสร้าง Navigation Bar แนวนอน
- สร้างไฟล์และวาดรูปทรงของแถบบาร์
- ก๊อปปี้รูปทรงที่เป็นแท็บเมนูบนแถบบาร์
- สร้างเลเยอร์ข้อความที่จะแสดงบนปุ่มหรือแท็บบาร์ และก็อปปี้ข้อความของแท็บที่เหลือทั้งหมด เพื่อจะได้เก็บรวมกลุ่มข้อความและแท็บ

Workshop 6 : สร้าง Navigation Bar บนรูปภาพ
นอกเหนือจากการสร้างปุ่มกด หรือแถบเนวิเกชั่นบาร์ในแบบที่ผ่านมาแล้ว บางครั้งก็นิยมสร้างแถบบาร์ลงบนรูปภาพส่วนที่ใช้เป็นหัวเว็บเพจไปเลย ซึ่งก็จะเป็นแถบบาร์แบบเรียบ ๆ แต่ก็แก่ไปอีกแบบหนึ่ง มาดูวิธีการสร้างรูปภาพและแถบบาร์กัน
- เลือกคำสั่ง File > New และเลือกขนาดของไฟล์ กว้าง 769 สูง 150 พิกเซล เลือกสีพื้นฉากหลังเป็น White
- ดับเบิลคลิกที่เลเยอร์ Background เพื่อเปลี่ยนเป็นเลเยอร์ธรรมดา คือ Layer 0 และ เลือกรูปแบบ Style ให้พื้นเลเยอร์ตามต้องการ
- ใช้เครื่องมือ วาดรูปทรงสี่เหลี่ยมและใส่สีหรือลวดลาย Pattern เพื่อใช้แต่งภาพ
- ใช้เครื่องมือ Type พิมพ์ข้อความสโลเกน แถบเมนูบาร์ และชื่อเว็บไซท์ จัดรูป / Line วาดเส้นคั่นระหว่างเมนู
- นำรูปภาพเข้ามาตกแต่ง โดยการเลือก (Selection) โดยก๊อปปี้มาวาง และปรับขนาดหรือตำแหน่งได้ตามต้องการ
- การบันทึกรูปภาพและแถบเมนูนี้ คุณอาจจะใช้คำสั่ง Save for web เป็นไฟล์รูปภาพเพียง 1 ไฟล์ก็ได้ แล้วไปกำหนดไฮเปอร์ลิงค์ให้ไปยังหน้าเว็บเพจที่เกี่ยวข้องโดยการใช้คำสั่ง hotspot ที่โปรแกรม Dreamweaver สร้างลิงค์ให้แต่ละเมนู 21

Workshop 7 : สร้างรูปภาพทำ List รายการ
โดยปกติส่วนใหญ่เนื้อหาที่แสดงบนเว็บเพจนั้นอาจจะเป็นข้อความย่อหน้าทั่วไปหรือข้อความที่เป็นลิสต์รายการที่แยกออกเป็นหัวข้อต่าง ๆ โดยอาจะใช้ตัวเลข หรือรูปภาพก็ได้ โปรแกรม Dreamweaver ที่เราจะใช้ในการจัดหน้าเว็บเพจนั้นก็มีลิสต์ให้บางส่วนแต่เป็นวงกลมและสี่เหลี่ยมสีดำ ซึ่งไม่ค่อยสวยงามเท่าที่ควร หากคุณต้องการลิสต์สวย ๆ ก็ใช้โปรแกรม Dreamweaver สร้าง ลิสต์แบบรูปภาพ หรือบางที่ก็วางเป็นรูปภาพเล็ก ๆ หน้ารายการข้อความได้โดยไม่ต้องใช้ CSS การเตรียมรูปภาพสำหรับสร้างลิสต์ทำได้ดังนี้
- เลือกคำสั่ง File > New สร้างไฟล์รูปภาพใหม่ ขนาดประมาณ กว้าง 10 สูง 10
- เลือกวิธีการเติมสีวิธีใดวิธีหนึ่งดังนี้
• ใช้เครื่องมือเติมสีด้วย
• หรือเลือก Layer Style กำหนดเป็นสไตล์ให้กับรูปภาพ
- กรณีที่เป็นรูปทรงอื่น ๆ ที่ไม่ใช่สี่เหลี่ยม ให้ใช้คำสั่ง Image > Trim ตัดพื้นที่ว่ารอบ ๆ เลือกคำสั่ง File > Save for Web เลือกการบันทึก ถ้าเป็นรูปทรงโปร่งใสให้เลือกเป็นไฟล์ GIF หากไม่ต้องการพื้นโปร่งใสก็เลือกเป็นไฟล์แบบ JPG

Workshop 8 : เทคนิคการสร้างปุ่มแบบมีมิติ
- เลือกคำสั่ง File > New และเลือกขนาดของไฟล์ Widith 200 Height 200 กำหนดฉากหลังเป็น Transparent
- คลิกเครื่องมือ Elliptical Marquee หรือ Rectangle Marquee
- วาด Selection วงกลมหรือสี่เหลี่ยม
- คลิกเครื่องมือเติมสีแบบ Gradient
- คลิกเลือกสีที่ต้องการไล่ระดับ
- เติมสีแบบไล่ระดับลงไปใน Selection
- คลิกปุ่ม New Layer
- เลือกคำสั่ง Select > Modify > Contract เพื่อลดขนาดของ Selection ลง 10 พิกเซล
- คลิกปุ่ม OK
- คลิกเครื่องมือเติมสีแบบ Gradient เปลี่ยนทิศทางการไล่สีลงไปใน Selection ด้านใน สังเกตว่ารูปปุ่มที่ได้จะมีมิติที่ช้อนกันอยู่
- เลือกเครื่องมือ Type สร้างข้อความที่แสดงบนปุ่มได้