Photoshop สร้างปุ่ม Web 2.0

บทเรียน Photoshop ปุ่มอาจเป็นหนึ่งในหมวดหมู่ที่ร้อนแรงที่สุดในเว็บไซต์ Photoshop tutorials ใด ๆ และเนื่องจาก Web 2.0 เป็นหัวข้อที่น่าสนใจในตอนนี้ลองทำปุ่มง่าย ๆ ที่เหมาะสมกับแอพพลิเคชั่น Web 2.0 ของเว็บไซต์ สอนหลังจากกระโดด.

สร้างผืนผ้าใบว่างเปล่าที่ประมาณ 500px (กว้าง) x 400px (สูง) เพื่อเริ่มการออกแบบปุ่ม สร้างการเรียกเลเยอร์ใหม่ 'bg01' เลือก เครื่องมือทรงกลมมน, กดปุ่ม SHIFT ค้างไว้แล้ววาดสี่เหลี่ยมมุมฉากตรงกลาง สีใดก็ได้ในเวทีปัจจุบัน.

โทรไปที่ ตัวเลือกการผสม ของ 'bg01'และปรับเปลี่ยนรูปแบบต่อไปนี้:

เงา

ความทึบแสง: 40%
ระยะทาง: 0px
สเปรด: 0%
ขนาด: 6px

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

สีหยุด: 0%, # d00031
สีหยุด: 100%, # ff2b5d

กด CTRL ค้างไว้คลิกซ้ายที่ 'bg01เลเยอร์รูปขนาดย่อเพื่อเลือกรูปร่าง ไป เลือก -> แก้ไข -> สัญญา และป้อนค่า '2px' นี่จะลดขนาดพื้นที่ที่เลือก 2 พิกเซล.

สร้างการเรียกเลเยอร์ใหม่ 'bg02'และเติมเต็มพื้นที่ที่ไฮไลต์ (หลังจากย่อขนาด) ด้วยสีใด ๆ ฉันใช้ # 000000 สีดำที่นี่ ดับเบิลคลิกที่ 'bg02' เพื่อเปิดตัว ตัวเลือกการผสม และปรับแต่งสไตล์ต่อไปนี้.

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

สีหยุด: 0%, # c6002f
สีหยุด: 100%, # c6002f

สร้างเลเยอร์ใหม่ใหม่สำหรับข้อความเรียกมันว่า 'txt' แทรกข้อความของปุ่มของคุณ ฉันจะใช้ตัวอักษรเป็นตัวแทน รูปแบบตัวอักษรที่ฉันใช้ที่นี่มีดังนี้:

รอบ Arial Bold
150pt

เช่นเดียวกันหลังจากตัดสินใจเลือกข้อความของคุณให้ดับเบิลคลิกที่ 'txt' เพื่อเปิดตัว ตัวเลือกการผสม และปรับแต่งรูปแบบต่อไปนี้.

เงา

ความทึบแสง: 25%
ระยะทาง: 0px
สเปรด: 0px
ขนาด: 5px

เงาภายใน

ความทึบแสง: 10%
ระยะทาง: 0px
Choke: 0
ขนาด: 10px

นูนนูนขึ้น

ความลึก: 1px
ทิศทาง: ลง
ขนาด: 0px
อ่อนนุ่ม: 0px
ความทึบแสงของโหมดไฮไลต์: 32%
ความทึบของโหมดเงา: 32%

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

การหยุดสี: 0% # d2d2d2
Color Stop: 100% # f0efef

ปุ่มเกือบเสร็จแล้ว เราจะให้มันเรืองแสงเล็กน้อยเหนือส่วนบน ถือ CTRL, คลิกซ้าย 'bg02เลเยอร์รูปขนาดย่อเพื่อเน้นรูปร่างด้านนอก เลือก เครื่องมือ Eclipse Marquee. ตอนนี้ถือไว้ ALT, เมื่อเลือกเครื่องมือ Eclipse Marquee ให้ลากข้ามเพื่อลบครึ่งล่างของพื้นที่ที่ไฮไลต์ ดูภาพด้านบน.

เมื่อไฮไลต์ส่วนบนและยังคงเลือก Eclipse Marquee Tool อยู่ให้คลิกขวาแล้วเลือก ขน; เข้าสู่ 15px สำหรับรัศมี.

สร้างเลเยอร์ใหม่เรียกมันว่า 'เรืองแสง'และเติมส่วนที่ไฮไลต์ด้วยสีขาว [#ffffff] สิ่งนี้จะเพิ่มเอฟเฟกต์เรืองแสงไปที่ส่วนบนของปุ่มของคุณ ผลิตภัณฑ์ขั้นสุดท้ายควรมีลักษณะเหมือนภาพด้านล่าง.

ดาวน์โหลดบทช่วยสอน

บางสิ่งที่พิเศษ ...

ปรับแต่งตัวเลือกการผสมของ 'bg01'และ'bg02จะให้ปุ่มที่น่าสนใจมากขึ้น นี่คือปุ่มสอน Photoshop อีกปุ่มที่ฉันได้ทำไปก่อนหน้านี้ - สร้างปุ่มเคลือบเงาสำหรับ Web 2.0

ดาวน์โหลดตัวอย่าง