บทความนี้ใช้ Photoshop CS2 เวอร์ชันภาษาจีนเป็นตัวอย่าง ขั้นตอนสำหรับ Photoshop เวอร์ชันอื่นอาจแตกต่างกันเล็กน้อย เรามาดูผลสุดท้ายกันก่อน
ขั้นตอนเฉพาะสำหรับ
เอฟเฟกต์สุดท้าย
มีดังนี้1. เริ่ม Photoshop CS2 เวอร์ชันภาษาจีน กด Ctrl+N เพื่อเปิดกล่องโต้ตอบ "ใหม่" ทำการตั้งค่าบางอย่างตามต้องการ (ขนาดควรจะสามารถรองรับเมนูนำทางในอนาคตได้) และคลิกปุ่ม "ตกลง" เพื่อ สร้างเอกสารใหม่
2. คลิกปุ่ม "สร้างเลเยอร์ใหม่" ใต้แผงเลเยอร์เพื่อสร้างเลเยอร์ใหม่ เลือก "เครื่องมือสี่เหลี่ยมผืนผ้าโค้งมน" ในกล่องเครื่องมือ ตั้งค่ารัศมีเป็น 15px ในแถบตัวเลือก จากนั้นวาดรูปสี่เหลี่ยมผืนผ้าโค้งมนดังแสดงในรูปที่ 1 บนเลเยอร์ใหม่
รูปที่ 1
3. ตอนนี้ใช้สไตล์เลเยอร์ต่อไปนี้กับรูปร่างด้านบน
การฉายภาพ:
รูปที่ 2
เงาภายใน:
รูปที่ 3
แสงจากภายใน:
รูปที่ 4
การซ้อนทับสี:
รูปที่ 5
จังหวะ:
ในรูปที่ 6
แล้ว จะได้เอฟเฟกต์ปุ่มที่แสดงในรูปที่ 7
รูปที่ 7
4. ตอนนี้ใช้ "เครื่องมือสี่เหลี่ยมผืนผ้าโค้งมน" อีกครั้ง คราวนี้วาดรูปสี่เหลี่ยมผืนผ้าสีขาวเล็กๆ เหนือปุ่ม ดังแสดงในรูปที่ 8
รูปที่ 8
5. ตั้งค่าโหมดการผสมของเลเยอร์นี้เป็น "โอเวอร์เลย์" และตั้งค่าความทึบเป็น 30% คุณจะได้เอฟเฟกต์ปุ่มดังแสดงในรูปที่ 9
รูปที่ 9
6. ถัดไป ให้คัดลอกปุ่มเหล่านี้และจัดเรียงลงในเมนูนำทางและเพิ่มข้อความ ดังแสดงในรูปที่ 10
รูปที่ 10
7. เลือก "Slice Tool" ในกล่องเครื่องมือ เปิดเมนู "View" และยืนยันว่ามีเครื่องหมายถูกทางด้านซ้ายของ "Align" ซึ่งจะจัดแนว Slice เข้ากับขอบโดยอัตโนมัติและสร้างความแม่นยำมากขึ้น ชิ้น ใช้ "Slice Tool" เพื่อตัดทีละปุ่ม และแต่ละชิ้นจะมีปุ่ม ผลลัพธ์จะแสดงในรูปที่ 11
รูปที่ 11
8. เมื่อการแบ่งส่วนเสร็จสิ้น คุณสามารถส่งออกเป็นไฟล์ HTML เพื่อเตรียมพร้อมสำหรับการออกแบบเว็บครั้งต่อไปได้ เลือกคำสั่งเมนู "ไฟล์ | บันทึกสำหรับเว็บ" เพื่อให้ได้เอฟเฟกต์ภาพที่ดีที่สุด ให้ใช้การตั้งค่าที่แสดงในรูปที่ 12 หลังจากตั้งค่าแล้วให้คลิกปุ่ม "บันทึก"
รูปที่ 12
9. ในกล่องโต้ตอบ "บันทึกผลลัพธ์การปรับให้เหมาะสมเป็น" เลือกตำแหน่งที่จะบันทึกไฟล์เว็บเพจ ป้อนชื่อไฟล์ตามที่แสดงในรูปที่ 13 เลือกประเภทการบันทึกเป็น "HTML และรูปภาพ (*. html)" จากนั้นคลิกปุ่ม "บันทึก"
รูปที่ 13
: ซึ่งจะส่งผลให้หน้า HTML และโฟลเดอร์รูปภาพซึ่งมีรูปภาพของปุ่ม
ตอนนี้คุณเพียงแค่คัดลอกโค้ด HTML ไปยังหน้าเว็บอื่นเพื่อใช้งาน แต่อย่าคัดลอกแท็กส่วนหัว/เนื้อหาที่สร้างโดย Photoshop เมื่อทำการคัดลอก