การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

อ่านหัวข้อก่อนหน้า อ่านหัวข้อถัดไป Go down

การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by admin on Mon Jul 11, 2011 11:30 pm

ขั้นตอนที่ 1 กำหนดรูปร่าง สี และขนาดของปุ่ม
โดยในที่นี้ฟรีจะขอทำปุ่มสี่เหลี่ยมที่มีมุมโค้งมน สีเขียว

  • สร้างหน้ากระดาษขึ้นมาใหม่และตั้งขนาดที่ต้องการ (Ctrl+N)
  • สร้าง Layer ขึ้นมาใหม่ 1 Layer
  • เลือกเครื่องมือ [You must be registered and logged in to see this link.]
  • ปรับการใช้งานเป็นแบบ Fill Pixels
  • เลือก Radius สัก 10px (Radius คือค่าความโค้งมนของมุมสี่เหลี่ยม)
  • เลือกสีที่ต้องการไว้ใน Foreground
  • ทำการคลิกเมาส์ค้างและลากลงไปจนได้ขนาดตามต้องการ
[You must be registered and logged in to see this image.]


  • ดับเบิ้ลคลิกที่ Layer ปุ่มนี้เพื่อ Add a layer style หรือเลือก icon ตัว f ใต้หน้าต่าง Layer
  • เลือก Storke และตั้งค่า Size เป็น 1
  • Position เลือกเป็น Outside
  • สีของเส้นให้ทำการเลือกสีเดียวกับปุ่ม
[You must be registered and logged in to see this image.]



  • เลือกที่ Drop Shadow
ค่าต่างๆที่ฟรีปรับเพื่อนๆอาจจะปรับตามต้องการเองก็ได้ หรือลองปรับตามฟรีก่อนโดยค่าต่างๆจะมีคุณสมบัติดังนี้

  1. Opacity คือ ความเข้มของเงา
  2. Angle มุมองศาที่เงาจะตกกระทบ
  3. Distance ระยะของเงากับวัตถุ
  4. Size ขนาดของเงา
[You must be registered and logged in to see this image.]


รูปนี้คือปุ่มที่ผ่านการปรับแต่ง Add a layer style ใส่เงา และขอบเส้น
ถ้าสงสัยว่าขอบเส้นนั้นฟรีใส่ไว้ทำไมสีเดียวกันไปชมในขั้นตอนต่อไปเลยครับ
[You must be registered and logged in to see this image.]
ขั้นตอนที่ 2 ใส่แสงเงาลงในปุ่ม

  • สร้าง Layer ขึ้นมาใหม่อีก 1 Layer สำหรับแสงกระทบบนปุ่ม
  • ใช้ Marquee Tool แบบวงกลมสร้าง Selection บนปุ่มดังรูปตัวอย่าง
  • กด Ctrl+Alt+Shift ค้างและคลิกซ้ายบริเวณ Layer ปุ่ม จะได้ Selection ที่ต้องการบนปุ่มดังรูป
[You must be registered and logged in to see this image.]


  • ตั้งค่า Foreground เป็นสีขาว
  • เลือก Gradient Tool
  • เลือกการไล่สีแบบ Linear (คือการไล่สีแบบจากด้านหนึ่งไปอีกด้านหนึ่ง)
  • เลือกสีในการไล่โดยไล่จากสีขาวไปโปร่งใส
  • ทำการใช้ Gradient Tool ไล่สีลงไปใน Selection ดังรูป
[You must be registered and logged in to see this image.]



  • สร้าง Layer ขึ้นมาใหม่อีก 1 Layer สำหรับเงาเข้มของปุ่ม
  • กด Ctrl+Shift+I เพื่อ Inverse Selection หรือไปที่ Select > Inverse
  • กด Ctrl+Alt+Shift ค้างและคลิกซ้ายที่ Layer ปุ่มเหมือนเดิม
  • จะได้ Selection ดังรูปตัวอย่างด้านล่าง
[You must be registered and logged in to see this image.]


  • ใช้ Gradient Tool ตั้งค่าแบบเดิม แต่ปรับเป็นการไล่สีจากดำไปโปร่งใส
  • ทำการใช้ Gradient Tool ไล่สีลงไปใน Selection ดังรูป
[You must be registered and logged in to see this image.]



  • ปรับค่า Opacity ของ Layer แสงสีขาวบนปุ่มประมาณ 80%
  • ปรับค่า Opacity ของ Layer เงาบนปุ่มประมาณ 16%
หมายเหตุ : อาจจะปรับ Opactiy มากกว่านี้หรือแล้วแต่เพื่อนๆชอบก็ได้ Photoshop เหมือนศิลปะมันไม่ตายตัว ^^
หมายเหตุ2 : ที่ฟรีใส่ Stoke ขนาด 1px สีเดียวกันกับปุ่มไว้ในขั้นตอนที่ 1 นั้นเพื่อให้ปุ่มดูมีมิติมากกว่าเดิมนั้นเอง
[You must be registered and logged in to see this image.]

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

[You must be registered and logged in to see this image.]


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

ที่มาของบทความ: [You must be registered and logged in to see this link.]


[You must be registered and logged in to see this image.]
avatar
admin
Boss Vongola
Boss Vongola

โพสต์แล้ว โพสต์แล้ว : 57
Points Points : 205
Karma Karma : 36
วันเกิด วันเกิด : 19/08/1994
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 15/06/2011
ที่อยู่ ที่อยู่ : New World
อาชีพ อาชีพ : Programer

ดูข้อมูลส่วนตัว http://reborn-th.snob.tv

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by Kurokawa on Tue Jul 12, 2011 10:12 pm

ขอบคุณค่ะ
avatar
Kurokawa
เริ่มเข้าแก๊ง
เริ่มเข้าแก๊ง

โพสต์แล้ว โพสต์แล้ว : 187
Points Points : 212
Karma Karma : 9
วันเกิด วันเกิด : 05/06/1994
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 20/06/2011
ที่อยู่ ที่อยู่ : อยู่ได้ทุกที่
อาชีพ อาชีพ : นึกไม่ออก

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by hibari_kyoya on Tue Jul 12, 2011 11:41 pm

อ่านแล้ว งง ฮะ ฮะ ฮะ
เป็นพวกสมองช้าเล็กน้อย =w=
แต่ก็ขอบคุณครับ > <
avatar
hibari_kyoya
มาเฟีย Vongola
มาเฟีย Vongola

โพสต์แล้ว โพสต์แล้ว : 350
Points Points : 29874
Karma Karma : 21
วันเกิด วันเกิด : 22/05/1999
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 19/06/2011
มาสคอท


ดูข้อมูลส่วนตัว http://my.dek-d.com/littlesquirrel/

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by soul on Wed Jul 13, 2011 6:51 pm

ขอบคุณมากคร้า


[You must be registered and logged in to see this link.]
avatar
soul
มาเฟีย Vongola
มาเฟีย Vongola

โพสต์แล้ว โพสต์แล้ว : 284
Points Points : 15322
Karma Karma : 10
วันเกิด วันเกิด : 25/06/1996
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 19/06/2011
ที่อยู่ ที่อยู่ : ปราสาท
อาชีพ อาชีพ : นักเรียน

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by -Raphaella- on Wed Jul 13, 2011 6:57 pm

ออกแนวมึนเล็กน้อย -0- ขอบคุณครับพี่โรม


[You must be registered and logged in to see this link.]
avatar
-Raphaella-
Cedef
Cedef

โพสต์แล้ว โพสต์แล้ว : 71
Points Points : 125
Karma Karma : 24
วันเกิด วันเกิด : 02/01/1997
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 20/06/2011
ที่อยู่ ที่อยู่ : ...Phoenix Club...
อาชีพ อาชีพ : ...Cosplayer...

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by Peemung on Wed Jul 13, 2011 10:49 pm

ขอบคุณมากนะค่ะ>
avatar
Peemung
มาเฟียฝึกหัด
มาเฟียฝึกหัด

โพสต์แล้ว โพสต์แล้ว : 35
Points Points : 37
Karma Karma : 2
วันเกิด วันเกิด : 20/07/1995
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 19/06/2011
ที่อยู่ ที่อยู่ : บนโลกมนุษย์ใบนี้
อาชีพ อาชีพ : -

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by jane_kingkan on Sun Jul 17, 2011 8:46 pm

ขอบคุณมากๆค่า >0<
avatar
jane_kingkan
มือใหม่ Vongola
มือใหม่ Vongola

โพสต์แล้ว โพสต์แล้ว : 124
Points Points : 11135
Karma Karma : 7
วันเกิด วันเกิด : 17/03/1997
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 18/06/2011
อาชีพ อาชีพ : (โนคอมเม้น)

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by jeejee0123 on Sat Dec 24, 2011 9:48 am

ขอบคุณฮะ
avatar
jeejee0123
มาเฟีย Vongola
มาเฟีย Vongola

โพสต์แล้ว โพสต์แล้ว : 237
Points Points : 2240
Karma Karma : 1
วันเกิด วันเกิด : 28/03/1998
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 21/12/2011
ที่อยู่ ที่อยู่ : ชิชิชิชิชิ
อาชีพ อาชีพ : นักเรียน

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

Re: การทำปุ่มแก้วหรือ Glossy Button แบบง่ายๆ

ตั้งหัวข้อ by opalza24 on Mon Dec 26, 2011 9:48 pm

ว้าวๆๆๆๆ ขอบคุนครับ
avatar
opalza24
เหยื่อมาเฟีย
เหยื่อมาเฟีย

โพสต์แล้ว โพสต์แล้ว : 5
Points Points : 3
Karma Karma : 0
วันเกิด วันเกิด : 11/11/1995
เข้าเป็นมาเฟีย เข้าเป็นมาเฟีย : 26/12/2011
ที่อยู่ ที่อยู่ : บ้าน ราม2
อาชีพ อาชีพ : นักเรียน ม.ปลาย

ดูข้อมูลส่วนตัว

ขึ้นไปข้างบน Go down

อ่านหัวข้อก่อนหน้า อ่านหัวข้อถัดไป ขึ้นไปข้างบน

- Similar topics

 
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ