ออกแบบปุ่ม Glossy Web 2.0 ใน Photoshop

การออกแบบปุ่ม Web 2.0 ที่ดูเป็นมันวาว? ต่อไปนี้เป็นบทแนะนำ Photoshop แบบง่าย ๆ ที่จะช่วยให้คุณได้ปุ่มสีแดงมันวาวอย่างเป็นขั้นเป็นตอน.

ขั้นตอนที่ 1 - การสร้างฐาน

เปิดไฟผ้าใบใหม่และปรับการตั้งค่าต่อไปนี้ (ทำเครื่องหมายด้วยสีเหลือง) ตามภาพด้านล่าง ส่วนที่เหลือควรมาเป็นค่าเริ่มต้น คุณอาจต้องการตรวจสอบอีกครั้งด้วยค่าเริ่มต้นเช่นกัน.

สร้าง 'ปุ่ม' เรียกเลเยอร์ใหม่

บนเลเยอร์ 'ปุ่ม' เลือกเครื่องมือสี่เหลี่ยมผืนผ้าโค้งมน

ให้รัศมีเป็น 7px

วาดสี่เหลี่ยมที่คล้ายกับภาพด้านล่าง.

ขั้นตอนที่ 2 - ปุ่มสีแดง

คลิกขวาที่ตัวเลือกการผสมสำหรับเลเยอร์ 'ปุ่ม'

ปรับการตั้งค่าต่อไปนี้สำหรับ

เงา

เงาภายใน

เอียงและนูน

การซ้อนทับแบบไล่สี

ปุ่มของคุณควรมีลักษณะเช่นนี้

ขั้นตอนที่ 3 - สร้างผลมันวาว

สร้างเลเยอร์การเรียก 'แก้ว' ใหม่

เลือกเครื่องมือปะรำ Retangular ให้แน่ใจว่าคุณเลือกเลเยอร์ 'ปุ่ม' กดปุ่ม ctrl ค้างไว้แล้วคลิกที่ปุ่ม 'เลเยอร์'”ภาพขนาดย่อของเลเยอร์ ตอนนี้ปุ่มของคุณควรจะถูกเน้น.

เลือกปุ่ม 'แก้ว' ตอนนี้กดปุ่ม Alt ค้างไว้ด้วยเครื่องมือ Retangular Marquee ที่เลือกไว้ วาด (ตัด) ข้ามครึ่งล่างของปุ่มเหมือนภาพด้านล่าง.

เติมพื้นที่ที่เลือกด้วยสีขาว #ffffff โดยใช้เครื่องมือถังสี

ปรับความทึบแสงเป็น 18%

คุณควรจะมีปุ่มมันแบบนี้.

ขั้นตอนที่ 4 - การซ้อนทับแบบ

ให้ปุ่มซ้อนทับลวดลายเล็กน้อยกันหน่อย ฉันจะใช้แถบกำหนดเอง 5px ที่สร้างขึ้นก่อนหน้านี้ สร้างเลเยอร์การเรียก 'รูปแบบ' ใหม่ในระหว่าง 'ปุ่ม' และ 'แก้ว' และดำเนินการต่อด้วยตัวเลือกการผสม.

เลือก Pattern Overlay เลือก Stripe5px (หรือรูปแบบใด ๆ ที่คุณสร้างขึ้น) แล้วคลิกตกลงจากนั้นปิดกล่องโต้ตอบ.

ตรวจสอบให้แน่ใจว่าคุณยังคงใช้เครื่องมือ Rectangular Marquee อยู่ และคลิกที่ภาพขนาดย่อของเลเยอร์ของปุ่มเพื่อดูรูปร่างของปุ่ม เติมพื้นที่ที่เลือกในเลเยอร์ 'รูปแบบ' ด้วยเครื่องมือถังสีและปรับความทึบของเลเยอร์เป็น 5%

ขั้นตอนที่ 5 - การแทรกข้อความ

ส่งข้อความสุ่มสีขาว #ffffff ด้วยการตั้งค่าต่อไปนี้

ใช้เอฟเฟกต์การผสมต่อไปนี้บนเลเยอร์ของข้อความของฉัน.

เงา

ขั้นตอนที่ 6 - ผลลัพธ์สุดท้าย

คุณควรได้รับภาพเช่นนี้.