“สอน

สอบเสร็จสักที การสอบเป็นอะไรที่เซ็งจริงๆ ไม่อ่านหนังสือก็ไม่ได้ ขี้เกียจอ่านก็ขี้เกียจอ่าน แต่ตอนนี้ฟรีสอบเสร็จละ โดยวันนี้จะมาสอน Photoshop เกี่ยวกับการทำปุ่มในเว็บโดยที่ฟรีจะทำจะเป็นลักษณะปุ่มที่ดูเหมือนเงาวาวๆ
ทั่วไปเค้าจะเรียกกัน Glossy Button หรือปุ่มแก้วนั้นเอง โดยจริงๆแล้วมีหลายต่อหลายวิธีในการทำ แต่ครั้งนี้ฟรีจะขอสอนวิธีที่ Easy ที่สุดเลยแล้วกัน ไม่รอช้าเริ่มกันเลยดีกว่าเพื่อนๆ

ขั้นตอนที่ 1 กำหนดรูปร่าง สี และขนาดของปุ่ม
โดยในที่นี้ฟรีจะขอทำปุ่มสี่เหลี่ยมที่มีมุมโค้งมน สีเขียว
  • สร้างหน้ากระดาษขึ้นมาใหม่และตั้งขนาดที่ต้องการ (Ctrl+N)
  • สร้าง Layer ขึ้นมาใหม่ 1 Layer
  • เลือกเครื่องมือ Rounded Rectangle Tool
  • ปรับการใช้งานเป็นแบบ Fill Pixels
  • เลือก Radius สัก 10px (Radius คือค่าความโค้งมนของมุมสี่เหลี่ยม)
  • เลือกสีที่ต้องการไว้ใน Foreground
  • ทำการคลิกเมาส์ค้างและลากลงไปจนได้ขนาดตามต้องการ
“สอน

  • ดับเบิ้ลคลิกที่ Layer ปุ่มนี้เพื่อ Add a layer style หรือเลือก icon ตัว f ใต้หน้าต่าง Layer
  • เลือก Storke และตั้งค่า Size เป็น 1
  • Position เลือกเป็น Outside
  • สีของเส้นให้ทำการเลือกสีเดียวกับปุ่ม
“สอน


  • เลือกที่ Drop Shadow
ค่าต่างๆที่ฟรีปรับเพื่อนๆอาจจะปรับตามต้องการเองก็ได้ หรือลองปรับตามฟรีก่อนโดยค่าต่างๆจะมีคุณสมบัติดังนี้
  1. Opacity คือ ความเข้มของเงา
  2. Angle มุมองศาที่เงาจะตกกระทบ
  3. Distance ระยะของเงากับวัตถุ
  4. Size ขนาดของเงา
“สอน


รูปนี้คือปุ่มที่ผ่านการปรับแต่ง Add a layer style ใส่เงา และขอบเส้น ถ้าสงสัยว่าขอบเส้นนั้นฟรีใส่ไว้ทำไมสีเดียวกันไปชมในขั้นตอนต่อไปเลยครับ
“สอน
ขั้นตอนที่ 2 ใส่แสงเงาลงในปุ่ม
  • สร้าง Layer ขึ้นมาใหม่อีก 1 Layer สำหรับแสงกระทบบนปุ่ม
  • ใช้ Marquee Tool แบบวงกลมสร้าง Selection บนปุ่มดังรูปตัวอย่าง
  • กด Ctrl+Alt+Shift ค้างและคลิกซ้ายบริเวณ Layer ปุ่ม จะได้ Selection ที่ต้องการบนปุ่มดังรูป
“สอน

  • ตั้งค่า Foreground เป็นสีขาว
  • เลือก Gradient Tool
  • เลือกการไล่สีแบบ Linear (คือการไล่สีแบบจากด้านหนึ่งไปอีกด้านหนึ่ง)
  • เลือกสีในการไล่โดยไล่จากสีขาวไปโปร่งใส
  • ทำการใช้ Gradient Tool ไล่สีลงไปใน Selection ดังรูป
“สอน


  • สร้าง Layer ขึ้นมาใหม่อีก 1 Layer สำหรับเงาเข้มของปุ่ม
  • กด Ctrl+Shift+I เพื่อ Inverse Selection หรือไปที่ Select > Inverse
  • กด Ctrl+Alt+Shift ค้างและคลิกซ้ายที่ Layer ปุ่มเหมือนเดิม
  • จะได้ Selection ดังรูปตัวอย่างด้านล่าง
“สอน

  • ใช้ Gradient Tool ตั้งค่าแบบเดิม แต่ปรับเป็นการไล่สีจากดำไปโปร่งใส
  • ทำการใช้ Gradient Tool ไล่สีลงไปใน Selection ดังรูป
“สอน


  • ปรับค่า Opacity ของ Layer แสงสีขาวบนปุ่มประมาณ 80%
  • ปรับค่า Opacity ของ Layer เงาบนปุ่มประมาณ 16%
หมายเหตุ : อาจจะปรับ Opactiy มากกว่านี้หรือแล้วแต่เพื่อนๆชอบก็ได้ Photoshop เหมือนศิลปะมันไม่ตายตัว ^^
หมายเหตุ2 : ที่ฟรีใส่ Stoke ขนาด 1px สีเดียวกันกับปุ่มไว้ในขั้นตอนที่ 1 นั้นเพื่อให้ปุ่มดูมีมิติมากกว่าเดิมนั้นเอง
“สอน

ขั้นตอนที่ 3 ใส่ข้อความหรือสัญลักษณ์ที่ต้องการให้อยู่บนปุ่ม
ในที่นี้ฟรีจะใส่ Logo ของ Nike ลงไปบนปุ่มนี้โดยตำแหน่ง Layer ที่จะวางไว้คือใต้เงาและแสงของปุ่มดังรูป หรือถ้าเพื่อนอยากใช้เป็นตัวอักษรก็พิมพ์ลงไปตามต้องการได้เลยครับ

“สอน


เพียงเท่านี้ก็จบแล้วสำหรับการทำปุ่ม Glossy Button แบบง่ายๆ ขั้นตอนอาจดูยาวและยุ่งยาก แต่ลองได้ทำสักไม่เกิน 3 ครั้งน่าจะแป๊ปเดียวเสร็จต่อ 1 ปุ่ม ถ้าเพื่อนๆชอบบทความนี้ก็แบ่งปันให้เพื่อนๆท่านอื่นได้ดูกันด้วยนะครับ หวังว่าคงมีประโยชน์ไม่มากก็น้อย
ปล.อย่าอ่านกันจนเพลินแล้วลืมคอมเม้นต์นะ T-T

  • เนื้อหาทั้งหมดในบทความเป็นลิขสิทธิ์ของ iFreePhotoshop ไม่อนุญาตให้ผู้ใดนำไปเผยแพร่ในที่อื่นใด

20 comments

  1. iKorakrit says:

    ขอบคุณครับ เอาไปทำปุ่ม Amazon

  2. iFree says:

    รุ่งเรืองแล้วอย่าลืมมาบอกเทคนิคกันบ้างนะ ^^

  3. ไม่ระบุชื่อ says:

    อยากทำ amazon เหมือนกัน ไม่รุ้จะเริ่มยังไง อิอิ

  4. EkStepZa says:

    ขอบคุณสำหรับบทความมากๆเลยครับ
    ตอนนี้ภูมิใจมาก เพราะ ทำปุ่มสวยขึ้นกว่าเดิมเป็นกอง อิอิ
    นี่อันเก่า -> http://siamtopup.ekstepza.ws/signup_old.gif
    นี่อันใหม่ -> http://siamtopup.ekstepza.ws/signup.gif

  5. iFree says:

    @EkStepZa อย่าลืมเก็บรายละเอียดเพิ่มเพื่อปุ่มที่งามกว่าเดิมนะค้าบ ^^

  6. ไม่ระบุชื่อ says:

    ไปก๊อบบทความคนอื่นมาเปล่าถ้าบอกว่าไม่ใช่ เดียวจะส่ง URL ให้ดูเอาไหม๊

  7. iFree says:

    เฮ้อ..ทำไมคนประเภทคุณมันยังมีอีกนะ เอา URL มาได้เลยครับเต็มที่

    ถ้าแค่นี้ผมทำไม่ได้ ผมคงไม่มีหน้าเปิดสอน Photoshop ให้คนอื่นหรอกครับ

  8. ไม่ระบุชื่อ says:

    ทำไม่ถูกครับ งง TT^TT

  9. iFree says:

    ติดขั้นไหนถามได้เลยครับ จะมาแนะนำให้ครับโพ้ม

  10. Innocent says:

    โทษทีนะครับ พอดีผมมือสมัครเล่นอ่ะครับ อยากทราบว่า ถ้าเกิดผมอยากเอาโลโก้ของฮอนด้า ไปใส่ในปุ่ม จะได้ไหมครับ มันจะขึ้นเหมือนของคุณ ifree ป่าวครับ(โลโก้ Nike สีเทา) ถ้าทำได้ ช่วยอธิบายขั้นตอนที่ 3 ได้ไหมครับ ติดขั้นตอนสุดท้ายอันเดียว ใส่โลโก้ไม่เป็น - -" สุดท้ายขอบคุณครับ สำหรับบทความสอนเทคนิค มือสมัครเ่ล่นอยา่งผมจะได้มีความรู้ซะที T-T

  11. iFree says:

    ถ้าอย่างในบทความนี้ ฟรีใช้ Logo Nike สีดำ ทำการตัดเฉพาะส่วนที่เป็นโลโก้ออกมา (ไม่เอาพื้นหลัง) แล้วนำมาวางบนปุ่ม (Layer อยู่ด้านบน Layer ของปุ่ม)

    จากนั้นเปลี่ยน Layer Logo Nike เป็น Multiply (ถ้า Logo Honda เป็นสี แล้วอยากได้แบบในบทความ ให้เปลี่ยนโลโก้เป็น ขาว-ดำ ก่อน

  12. หาเมนูไม่เจอ ขั้นตอนที่ 2

  13. ไม่ระบุชื่อ says:

    ขอบคุณค่ะ

  14. iFree says:

    @สุดหล่อ - Marquee Tool เครื่องมือหลักๆที่ไว้ทำ Selection อะครับ ไม่ก็ลองกดคีย์ลัด M ดูครับ

  15. ขอบคุณมากครับ

  16. ไม่ระบุชื่อ says:

    ขอบคุณครับเป็นประโยชน์มากเลย..กำลังหาอยู่พอดี

  17. ไม่ระบุชื่อ says:

    ขอบคุณมากเลยค่ะ เป็นประโยชน์มากๆเลยค่ะ กำลังต้องการเลยค่ะ

  18. ไม่ระบุชื่อ says:

    อธิบายละเอียดไม่กั๊กดีค่ะ ขอบคุณมากๆที่มาแชร์

  19. มีประโยชน์มากค่ะขอบคุณค่ะ คนทำน่าร๊ากอะ ><

  20. มือใหม่หัดทำครับ ผมทำได้แล้วครับต่เอาพื้นหลังออกให้เหลือแต่ปุ่มตอนเซพออกเป็นรูปทำยังไงครับ

Leave a Reply

โปรดระบุสถานะ "ความคิดเห็นในฐานะ" ด้านล่างก่อนโพสต์ข้อความด้วยนะครับ