โฮมเพจ » Photoshop » ออกแบบปุ่ม Glossy Web 2.0 ใน Photoshop

    ออกแบบปุ่ม 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 - ผลลัพธ์สุดท้าย

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