เทคนิคทำเว็บ การสร้างปุ่มสวยด้วยตนเอง

สร้างปุ่มสวยด้วยตนเอง

ผมมีเทคนิคการออกแบบปุ่ม (Button) ต่าง ๆ ด้วยโปรแกรม Photoshop แบบที่ไม่ยาก และท่านสามารถนำไปดัดแปลง หรือนำไปพัฒนาต่อ เพื่อให้ออกมาในรูปแบบอื่น ๆ ตามการใช้งาน วิธีทำเป็นอย่างไร มาลองดูนะครับ

เริ่มขั้นตอนการทำปุ่มสวยครับ

1. ทำการเปิดโปรแกรม Adobe Photoshop และทำการเลือกสร้างไฟล์ใหม่ โดยเลือกที่เมนู File --> New

2. ทำการกำหนดขนาดของไฟล์งานที่ต้องการทำ ในที่นี้ผมกำหนดความกว้างเป็น 74px และสูง 18px เลือก Background Contents เป็น Transparent

3. ทำการเลือกเครื่องมือสร้างสี่เหลี่ยมขอบโค้งมล โดยการคลิกที่เครื่องมือสร้างสี่เหลี่ยมค้างไว้ จะมีรูปแบบรูปทรงต่าง ๆ เลื่อนออกมาทางด้านซ้ายให้เราเลือกครับ

4. ที่ทูลบาร์ด้านบนให้เราเลือกตัวเลือกที่สอง จากทางด้านซ้ายมือ และใส่ค่าความโค้งมลเป็น 5px ตามภาพครับ

5. หลังจากที่เลือกเสร็จแล้ว ให้ทำการ Drag Mouse (คลิกเมาส์ค้างแล้วลาก) ในหน้างานที่เปิดขึ้นมา เพื่อสร้างรูปทรงสี่เหลี่ยม ให้อยู่ภายในไฟล์ที่เราสร้างขึ้น

หลังจากนั้นเลือกที่เมนู Paths ทำการเลือกตัวเลือกที่ 3 จากซ้าย เพื่อทำให้เส้นของสี่เหลี่ยมที่เราสร้างขึ้นกลายเป็นเส้นประครับ

6. ทำการเลือกที่เครื่องมี Gradient เพื่อทำการไล่เฉดสี

7. ทำการคลิกที่แถบทูลบาร์ด้านบน

8. จะมีหน้าต่างใหม่เปิดขึ้นมา เพื่อให้เราทำการเลือกเฉดสี หากเราต้องการจะใส่สีที่ข้างใดข้างหนึ่ง ให้เราทำการเลือกคลิกที่สี่เหลี่ยมด้านล่างแถบสี ในด้านที่ต้องการเปลี่ยนสี จากนั้นทำการคลิกสีในช่องสี่เหลียมที่หัวข้อ Color

9. เลือกเฉดสีตามที่ต้องการ

10. ทำการคลิกเมาส์ค้างและทำการลากเมาส์ขึ้น-ลง เพื่อสร้างจุดเริ่มต้นและจุดปลายของเฉดสีที่เราเลือก

11. หลังจากนั้น ทำการเลือกเมนู Layer Style --> Stroke เพื่อที่จะทำการใส่ขอบให้กับตัวปุ่ม

12. ในที่นี้ผมได้กำหนด Size เป็น 1px ครับ Position เลือกเป็น Inside ครับ และทำการเลือกสีตามต้องการ

13. ทำการสร้าง Layer ขึ้นมาใหม่ครับ ในเมนู Layer ให้เลือกตัวเลือกที่สองจากขวาครับ

14. เลือก Layer ที่ 2 ทำการเลือกที่เมนู Select --> Modify --> Contact

15. ในที่นี้ผมได้กำหนดขนาดที่ 2px ครับ

16. ทำการเทสีขาวลงไปในเลเยอร์ที่ 2 ครับ

17. จากนั้นทำการเลือกที่เครื่องมือ Rectangular Marquee ใน Toolbar ด้านซ้ายมือ ทำ Drag Mouse (คลิกเมาส์ค้างแล้วลาก) ครอบในส่วนครึ่งล่างของงานครับ

18. หลังจากนั้น ทำการ Delete ส่วนที่เราเลือก คลิก Ctrl+D

19. ใน Layer ที่ 2 ที่เราได้ทำการเทสีขาวลงไปและลบส่วนครึ่งล่างออกไปแล้วนั้น ให้การเลือก Opacity เป็น 20% หรือตามใจชอบนะครับ

20. จากนั้นเลือกที่เครื่องมือ T เพื่อทำการพิมพ์ตัวอักษรครับ โดยจะมีแถบเมนูด้านบนในการกำหนดลักษณะต่าง ๆ ของตัวอักษรครับ

21. ให้ทำการเลือกเมนู File --> Save for web เพื่อทำการเซฟงานออกมาใช้ในหน้าเว็บเพจครับ

22. หลังจากนั้นเราจะได้ปุ่มสั่งซื้อที่สามารถนำไปใช้บนหน้าเว็บได้แล้วครับ

ผลลัพท์ที่ได้ครับ