สร้างปุ่มสวยด้วยตนเอง
สร้างปุ่มสวยด้วยตนเอง
  • 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. หลังจากนั้นเราจะได้ปุ่มสั่งซื้อที่สามารถนำไปใช้บนหน้าเว็บได้แล้ว

 
 
ผลลัพท์ที่ได้




Useful Area