ในการออกแบบไซต์มักใช้องค์ประกอบการนำทางสามมิติ ปุ่มดังกล่าวสามารถสร้างได้ในโปรแกรมแก้ไขกราฟิก Photoshop โดยจำลองระดับเสียงโดยใช้เงาและการเติมไล่ระดับ
จำเป็น
โปรแกรมโฟโต้ชอป
คำแนะนำ
ขั้นตอนที่ 1
สร้างเอกสารใหม่ในโปรแกรมแก้ไขกราฟิกโดยใช้ตัวเลือกใหม่จากเมนูไฟล์ เลือกขนาดของเอกสารใหม่ให้พอดีกับปุ่ม และทำให้พื้นหลังโปร่งใส
ขั้นตอนที่ 2
เปิดใช้งานเครื่องมือสี่เหลี่ยมผืนผ้าโค้งมน หากคุณต้องการปุ่มที่โค้งมนเล็กน้อย ในแถบตัวเลือกเครื่องมือ ให้ตั้งค่ารัศมีเป็นหนึ่งมิลลิเมตร วาดสี่เหลี่ยมมุมมนโดยใช้เครื่องมือที่เลือก รูปร่างที่ได้จะเป็นพื้นฐานสำหรับปุ่ม
ขั้นตอนที่ 3
คลิกขวาที่เลเยอร์แล้วเลือกตัวเลือก Rasterize Layer โหลดส่วนที่เลือกด้วยตัวเลือก Load Selection จากเมนู Select
ขั้นตอนที่ 4
ใช้เครื่องมือไล่โทนสีเพื่อเติมปุ่มด้วยการไล่ระดับสีสองสี โดยเลือกการผสมสีที่เหมาะสมจากค่าที่ตั้งไว้ล่วงหน้าในจานสีการไล่ระดับสี รูปแบบการไล่ระดับสีควรเป็นแบบเส้นตรง เลือกโดยคลิกปุ่มการไล่ระดับสีแบบเส้นตรงใต้เมนูหลัก ส่วนบนของปุ่มหลังเติมควรเบากว่าส่วนล่าง
ขั้นตอนที่ 5
ใช้สไตล์กับเลเยอร์ เมื่อต้องการทำสิ่งนี้ ให้ใช้ตัวเลือก Blending Options จากเมนูบริบท เลือกแท็บ Drop Shadow และป้อนค่าหนึ่งร้อยยี่สิบองศาสำหรับพารามิเตอร์ Angle ตั้งค่าพารามิเตอร์ Size เป็นสามพิกเซล
ขั้นตอนที่ 6
ในแท็บ Inner Shadow ตั้งค่าเดียวกันสำหรับพารามิเตอร์ Angle และสำหรับ Size ตั้งค่าเป็นห้าพิกเซล ใช้สไตล์โดยกดปุ่ม Enter
ขั้นตอนที่ 7
สร้างเงาให้กับปุ่ม เมื่อต้องการทำสิ่งนี้ให้คลิกที่ปุ่มสร้างเลเยอร์ใหม่และเติมพื้นที่ที่เลือกของเลเยอร์ใหม่ด้วยสีดำ เลือก Paint Bucket Tool สำหรับสิ่งนี้ ยกเลิกการเลือกด้วย Ctrl + D
ขั้นตอนที่ 8
ใช้ตัวกรอง Gaussian Blur จากกลุ่ม Blur ของเมนูตัวกรองกับสี่เหลี่ยมผืนผ้าสีดำ ตั้งค่ารัศมีเป็นสี่พิกเซล ลากเลเยอร์เงาใต้เลเยอร์ปุ่มและยกเงาขึ้นสามถึงสี่พิกเซล ในการดำเนินการนี้ ให้เปิดใช้งานเครื่องมือย้ายและย้ายเงาด้วยปุ่มเคอร์เซอร์ ลดความทึบของเลเยอร์นี้เป็นหกสิบเปอร์เซ็นต์
ขั้นตอนที่ 9
สร้างเลเยอร์ที่ใช้งานอยู่ด้วยปุ่มและโหลดการเลือกจากมัน ลดการเลือกลงสองพิกเซลโดยใช้ตัวเลือกสัญญาจากกลุ่มแก้ไขของเมนูการเลือก
ขั้นตอนที่ 10
สร้างเลเยอร์ใหม่และเติมส่วนที่เลือกที่ได้ด้วยการไล่ระดับสีเชิงเส้นจากสีขาวเป็นโปร่งใส เพื่อให้ส่วนสีขาวอยู่ที่ด้านล่างของปุ่ม ยกเลิกการเลือกรายการที่เลือก การใช้ตัวเลือก Free Transform จากเมนูแก้ไข ให้ลดพื้นที่ที่การไล่ระดับสีครอบคลุมในแนวตั้ง ใช้การแปลงด้วยปุ่ม Enter
ขั้นตอนที่ 11
เปลี่ยน Blend Mode ของเลเยอร์การไล่ระดับสีเป็น Overlay ซึ่งสามารถทำได้โดยเลือกโหมดจากรายการดรอปดาวน์ทางด้านซ้ายของจานสีสไตล์ ลดความทึบของเลเยอร์เป็นหกสิบเปอร์เซ็นต์
ขั้นตอนที่ 12
ใช้ Horizontal Type Tool เขียนข้อความที่ควรอยู่บนปุ่ม
ขั้นตอนที่ 13
รวบรวมเลเยอร์ทั้งหมดลงในโฟลเดอร์โดยใช้ตัวเลือก Group Layers จากเมนู Layer โดยเลือกเลเยอร์ในขณะที่กดปุ่ม Ctrl ค้างไว้ บันทึกปุ่มเป็นไฟล์ psd โดยใช้ตัวเลือกบันทึกจากเมนูไฟล์
