เทคนิคทำเว็บ การตกแต่งข้อความด้วยการใช้ Layer Mask

เทคนิคการตกแต่งข้อความด้วยการใช้ Layer Mask

วันนี้ทางทีม Web Design ขอนำเสนอเทคนิคง่ายๆ ที่ทำให้ Text ตัวอักษรธรรมดา ดูโดดเด่น และน่าสนใจยิ่งขึ้น เทคนิคนี้ท่านสมาชิก สามารถนำไปประยุกต์ใช้ในการออกแบบโลโก้ หรือตกแต่งข้อความ ในเว็บไซต์ของท่าน เพื่อให้ดูโดดเด่นน่าสนใจมากยิ่งขึ้นค่ะ

1. สร้าง File ขึ้นมาใหม่ขนาดประมาณ 500x300 pixel (สามารถทำ ขนาดใหญ่หรือเล็กกว่านี้ก็ได้ค่ะ)

2. ให้สร้างตัวอักษร โดยคลิกที่เครื่องหมาย Horizontal Type Tool (T) แล้วพิมพ์ประโยคที่ต้องการ

3.ไปที่ File-->Open เพื่อเปิดภาพที่ต้องการ

4. จากนั้นทำการลากรูป มายังข้อความที่สร้างไว้ โดยคลิกเมาส์ซ้ายค้าง แล้วลากมาปล่อยที่ไฟล์ข้อความ ดังตัวอย่าง

5. ทำการใส่ Layer Mask เพื่อทำให้ภาพเข้าไปอยู่ในข้อความ โดยคลิกที่ Layer รูปภาพ และไปที่ เมนู Layer-->Create Cliping Mask เท่านี้ก็จะได้ข้อความที่มีพื้นหลังเป็นรูปภาพที่เราต้องการแล้วค่ะ

6. จากนั้นมาถึงขั้นตอนตกแต่งให้สวยงาม ขั้นแรก ให้สร้างเลเยอร์ขึ้นมาใหม่อีก 1 เลเยอร์ โดยคลิกที่เครื่องมือ Duplicate Layer ด้านล่าง

7. ให้คลิกเลือกแถบ Layer ใหม่ที่สร้างขึ้นเมื่อสักครู่ และใช้เครื่องมือ Brush เลือกหัวแปรงลักษณะฟุ้งกระจาย จากนั้นให้ทาสีลงใน Layer ใหม่ที่เลือกเอาไว้ตอนต้น ดังรูป

8. จากนั้นให้ใส่ Layer Mask โดยทำเหมือน ขั้นตอนที่ 5 คลิกเลือกที่ Layer สี และไปที่ เมนู Layer-->Create Cliping Mask

9. หากสีที่เลือกไว้ตอนแรกยังไม่ถูกใจ สามารถปรับสีได้ โดยเข้ามาที่เมนู Image-->Adjustments-->Hue/Saturetion หรือ Ctrl+U เมื่อปรับได้สีที่ต้องการเรียบร้อยแล้วคลิก OK ได้เลยค่ะ

10. ทำการตกแต่งขอบข้อความให้ดูสวยงามขึ้น โดยดับเบิ้ลคลิกที่ Layer ข้อความ จะมีกล่องเครื่องมือ Layer Style ขึ้นมา จากนั้นให้ คลิกเลือกที่ Stroke และปรับค่าดังนี้ Size = 3, Position = Outside, Blead Mode = Normal, Opacity = 100% ส่วนสีให้เลือกตามต้องการ (จากตัวอย่างใช้สี #c54e0c ค่ะ)

11. เมื่อทำการตกแต่งขอบข้อความ ให้ดูสวยงามขึ้นเรียบร้อยแล้ว ก็มาถึงขึ้นตอนการทำให้ข้อความของเรานั้น ดูมีมิติขึ้น โดยดับเบิ้ลคลิกที่ Layer ข้อความ อีกครั้ง (ทำเหมือนขึ้นตอนที่ 10) จะมีกล่องเครื่องมือ Layer Style ขึ้นมา เลือกไปที่ Drop Shadow ปรับค่า Distance = 7 Px, Opacity = 60% เมื่อปรับค่าเรียบร้อยแล้วคลิก OK ได้เลยค่ะ

ผลงานที่ทำเรียบร้อยแล้ว

Download ไฟล์ตัวอย่าง