สอบเสร็จสักที การสอบเป็นอะไรที่เซ็งจริงๆ ไม่อ่านหนังสือก็ไม่ได้ ขี้เกียจอ่านก็ขี้เกียจอ่าน แต่ตอนนี้ฟรีสอบเสร็จละ โดยวันนี้จะมาสอน 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
- Opacity คือ ความเข้มของเงา
- Angle มุมองศาที่เงาจะตกกระทบ
- Distance ระยะของเงากับวัตถุ
- 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%
หมายเหตุ2 : ที่ฟรีใส่ Stoke ขนาด 1px สีเดียวกันกับปุ่มไว้ในขั้นตอนที่ 1 นั้นเพื่อให้ปุ่มดูมีมิติมากกว่าเดิมนั้นเอง
ขั้นตอนที่ 3 ใส่ข้อความหรือสัญลักษณ์ที่ต้องการให้อยู่บนปุ่ม
ในที่นี้ฟรีจะใส่ Logo ของ Nike ลงไปบนปุ่มนี้โดยตำแหน่ง Layer ที่จะวางไว้คือใต้เงาและแสงของปุ่มดังรูป หรือถ้าเพื่อนอยากใช้เป็นตัวอักษรก็พิมพ์ลงไปตามต้องการได้เลยครับเพียงเท่านี้ก็จบแล้วสำหรับการทำปุ่ม Glossy Button แบบง่ายๆ ขั้นตอนอาจดูยาวและยุ่งยาก แต่ลองได้ทำสักไม่เกิน 3 ครั้งน่าจะแป๊ปเดียวเสร็จต่อ 1 ปุ่ม ถ้าเพื่อนๆชอบบทความนี้ก็แบ่งปันให้เพื่อนๆท่านอื่นได้ดูกันด้วยนะครับ หวังว่าคงมีประโยชน์ไม่มากก็น้อย
ปล.อย่าอ่านกันจนเพลินแล้วลืมคอมเม้นต์นะ T-T
- เนื้อหาทั้งหมดในบทความเป็นลิขสิทธิ์ของ iFreePhotoshop ไม่อนุญาตให้ผู้ใดนำไปเผยแพร่ในที่อื่นใด
ขอบคุณครับ เอาไปทำปุ่ม Amazon
รุ่งเรืองแล้วอย่าลืมมาบอกเทคนิคกันบ้างนะ ^^
อยากทำ amazon เหมือนกัน ไม่รุ้จะเริ่มยังไง อิอิ
ขอบคุณสำหรับบทความมากๆเลยครับ
ตอนนี้ภูมิใจมาก เพราะ ทำปุ่มสวยขึ้นกว่าเดิมเป็นกอง อิอิ
นี่อันเก่า -> http://siamtopup.ekstepza.ws/signup_old.gif
นี่อันใหม่ -> http://siamtopup.ekstepza.ws/signup.gif
@EkStepZa อย่าลืมเก็บรายละเอียดเพิ่มเพื่อปุ่มที่งามกว่าเดิมนะค้าบ ^^
ไปก๊อบบทความคนอื่นมาเปล่าถ้าบอกว่าไม่ใช่ เดียวจะส่ง URL ให้ดูเอาไหม๊
เฮ้อ..ทำไมคนประเภทคุณมันยังมีอีกนะ เอา URL มาได้เลยครับเต็มที่
ถ้าแค่นี้ผมทำไม่ได้ ผมคงไม่มีหน้าเปิดสอน Photoshop ให้คนอื่นหรอกครับ
ทำไม่ถูกครับ งง TT^TT
ติดขั้นไหนถามได้เลยครับ จะมาแนะนำให้ครับโพ้ม
โทษทีนะครับ พอดีผมมือสมัครเล่นอ่ะครับ อยากทราบว่า ถ้าเกิดผมอยากเอาโลโก้ของฮอนด้า ไปใส่ในปุ่ม จะได้ไหมครับ มันจะขึ้นเหมือนของคุณ ifree ป่าวครับ(โลโก้ Nike สีเทา) ถ้าทำได้ ช่วยอธิบายขั้นตอนที่ 3 ได้ไหมครับ ติดขั้นตอนสุดท้ายอันเดียว ใส่โลโก้ไม่เป็น - -" สุดท้ายขอบคุณครับ สำหรับบทความสอนเทคนิค มือสมัครเ่ล่นอยา่งผมจะได้มีความรู้ซะที T-T
ถ้าอย่างในบทความนี้ ฟรีใช้ Logo Nike สีดำ ทำการตัดเฉพาะส่วนที่เป็นโลโก้ออกมา (ไม่เอาพื้นหลัง) แล้วนำมาวางบนปุ่ม (Layer อยู่ด้านบน Layer ของปุ่ม)
จากนั้นเปลี่ยน Layer Logo Nike เป็น Multiply (ถ้า Logo Honda เป็นสี แล้วอยากได้แบบในบทความ ให้เปลี่ยนโลโก้เป็น ขาว-ดำ ก่อน
หาเมนูไม่เจอ ขั้นตอนที่ 2
ขอบคุณค่ะ
@สุดหล่อ - Marquee Tool เครื่องมือหลักๆที่ไว้ทำ Selection อะครับ ไม่ก็ลองกดคีย์ลัด M ดูครับ
ขอบคุณมากครับ
ขอบคุณครับเป็นประโยชน์มากเลย..กำลังหาอยู่พอดี
ขอบคุณมากเลยค่ะ เป็นประโยชน์มากๆเลยค่ะ กำลังต้องการเลยค่ะ
อธิบายละเอียดไม่กั๊กดีค่ะ ขอบคุณมากๆที่มาแชร์
มีประโยชน์มากค่ะขอบคุณค่ะ คนทำน่าร๊ากอะ ><
มือใหม่หัดทำครับ ผมทำได้แล้วครับต่เอาพื้นหลังออกให้เหลือแต่ปุ่มตอนเซพออกเป็นรูปทำยังไงครับ
กำลังหัดทำปุ่มอยู่เลย