2.การสร้าง Naviagation Bar ด้วย Adobe Photoshop CS6

1. เปิดโปรแกรม Adobe Photoshop CS6

2. สร้างเอกสารใหม่

3. ตั้งขนาดภาพสูงสุดพิกเซล

4. ตั้งขนาดภาพเลือกเครื่องมือ paint bucket Tool

5. ใช้เครื่องมือ rectangular marquee tools ลากเลือกพื้นที่ครึ่งหนึ่งของภาพ

6. ใช้เครื่องมือ paint bucket Tool เทสีเทาลงไปในพื้นที่ที่เลือกไว้

7. ใช้เครื่องมือHorizontal Type Tool พิมพ์ข้อความเมนูโดยยังไม่ต้องจัดตำแหน่งแล้วตั้งชื่อเลเยอร์ใน panel ตามชื่อของปุ่ม

8. ใช้เครื่องมือ rectangular marquee Tool

9. กำหนดขนาดพื้นที่ที่ต้องการ

10. คลิกเลือกตำแหน่งพื้นที่โดยให้ขอบเขตเริ่มต้นพอดีกับกรอบทางด้านซ้ายของภาพขั้นตอนนี้จะเป็นการทำให้ได้ให้ปุ่ม

11. สร้างเลเยอร์ใหม่ขึ้นมา ตั้งชื่อเลเยอร์แล้วใช้เครื่องมือ Paint Bucket Tool เทสีขาวลงไปในพื้นที่ที่เลือก ลงไปในเลเยอร์

12. คลิกขวาที่เลเยอร์เลือกคำสั่ง Duplicate Layer...

13. ตั้งชื่อเลเยอร์ใหม่เเล้วกดปุ่ม OK

14. จะปรากฎเลเยอร์ใหม่ตามที่ทำสำเนามา ใช้เครื่องมือ Move Tool ลากเลเยอร์ที่เป็นไฮไลต์มาวางทับให้ตรงปุ่ม

15. ทำตามขั้นตอนที่ 12-14 จนครบทุกปุ่ม

16. กดปุ่ม Crtl ค้างไว้แล้วใช้เมาส์คลิกเลือกเลเยอร์เสร็จแล้วปล่อยปุ่ม Ctrl แล้วใช้เมาส์คลิกปุ่ม Aligh Vertical Center และปุ่ม Aligh Horizontal Center

17. ทำตามขั้นตอนที่ 16 จนครบทุกปุ่ม

18. คลิกที่ปุ่มเครื่องมือ Slice Tool

19. คลิกที่ปุ่ม Indicate Layer Visibility ของเลเยอร์เพื่อปิดการแสดงไฮไลต์

20. ใช้เครื่องมือ Slice tool เลือกพื้นที่ปุ่มหน้าแรก ขั้นตอนนี้จะเป็นการแยกปุ่มออกจากกันโดยจะเห็นได้ชัดเมื่อตอนบันทึก

21. ทำตามขั้นตอนที่ 19-20 ให้ครบทุกเลเยอร์

22. คลิกที่เมนู File เลือกคำสั่ง Save for web...

23. เลือกรูปแบบไฟล์

24. เลือกโฟลเดอร์ที่เก็บไฟล์เว็บไซต์แล้วกดปุ่ม Save

25. กดปุ่ม Replace

26. สร้างปุ่มในสภาวะที่ถูกไอไลต์โดยกาเปิดเลเยอร์ที่ถูกปิดไว้ทั้งหมดแล้ว Save for web อีกครั้ง

27. นำปุมที่สร้างไว้ไปใช้กับโปรแกรม Adobe Dreamweaver CS6

28. จะปรากฎหน้าต่างให้เลือกรูปภาพสำหรับทำ Rollover

29. เลือกรูปภาพที่ต้องการเเล้วกดปุ่ม OK

30. คลิกที่ปุ่ม Browse เพื่อเลือกรูปภาพสำหรับ Rollover image

31. ดับเบิลคลิกที่โฟลเดอร์ที่เก็บภาพสำหรับทำภาพ Rollover image

32. คลิกเลือกรูปภาพที่ต้องการสำหรับทำภาพ Rollover image

33. จะปรากฎชื่อไฟล์ที่เราเลือก เสร็จแล้วคลิกปุ่ม OK เพื่อความสะดวกในการตรวจสอบรูปภาพว่าเป็นภาพชุดเดียวกันหรือไม่ควรตั้งชื่อให้สอดคล้องกัน

34. แทรกปุ่มอื่นๆจนครบเเล้วทดสอบรันหน้าเว็บ