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

วันนี้ทางทีม 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 ไฟล์ตัวอย่าง

***แม้ว่าทางทีมงาน ReadyPlanet จะไม่สามารถ Support โปรแกรม Photoshop ให้ท่านได้ แต่บทความนี้ เป็นความตั้งใจของทีมงานฝ่าย Web Design ที่เขียนขึ้นมาเพื่อให้ท่านได้เป็นแนวทางในการศึกษาเพิ่มเติม จากโปรแกรม Photoshop เพื่อใช้ในการออกแบบ และตกแต่งภาพบนเว็บไซต์ให้ออกมาสวยงามเท่านั้น***

20 June 2008
Jaratsri Chansirimas
www.ReadyPlanet.com




Design Guru

เทคนิคการทำภาพลายน้ำ (Watermark) แบบง่ายๆ
เทคนิคการเปลี่ยนสีรูปภาพเฉพาะจุด
เทคนิคการทำฟองอากาศ
เทคนิคการทำรูปสีท่ามกลางรูปขาวดำ
เทคนิคการทำกรอบรูปเส้นประ
เทคนิคการทำพื้นหลังแบบ 3 มิติ
เทคนิคการทำ Barcode
เทคนิคการทำตัวอักษรทองคำ
เทคนิคการทำพระจันทร์เต็มดวง
เทคนิคการทำ Sticky Tape แบบเก๋ๆ สำหรับตกแต่งรูปภาพ
เทคนิคการทำลำแสงพระอาทิตย์
เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่าง ๆ (ตอนที่ 2 กรอบเก๋ ๆ แบบขาด ๆ )
เทคนิคการแต่งภาพสไตล์โลโม
การสร้างกรอบรูปขอบกระจาย ด้วยเทคนิค Quick Mask
สร้างกรอบรูปด้วย Brush Tool
เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่างๆ (ตอนที่ 1 กระดาษพับขอบ) article
สร้างกรอบรูปลายไม้ง่าย ๆ ด้วย Filter article
การสร้างตัวอักษรนูนบนลายไม้
การสร้าง selection ภาพ โดยใช้ channel
เทคนิคการนำรูปภาพมาใส่กรอบ
การทำกรอบภาพให้ดูสวยงามและมีมิติ article
เทคนิคการทำพื้นทรายแบบง่าย ๆ
เทคนิคเพิ่มลูกเล่นระยิบระยับให้ตัวอักษร article
สร้างข้อความโค้งตามวัตถุแบบง่ายๆ article
มาปรับภาพย้อนแสงให้ดูสวยงามกันเถอะ article
แปลงภาพถ่ายให้เป็นภาพวาดกันเถอะ article
วิธีการสร้างหยดน้ำมหัศจรรย์ article
การทำภาพเงาสะท้อนวัตถุ article
วิธีสร้างกรอบรูป และเงา เพื่อเพิ่มมิติให้ภาพ article
ตัดภาพพื้นหลัง ด้วยคฑาวิเศษ article
[Design Guru] "ไข่ทองคำ ของแจ๊ค" article
วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใช้บนเว็บไซต์ article
มาทำเมฆรูปร่างแปลก ๆ กันดีกว่า article
สร้างปุ่มสวยด้วยตนเอง article
สนุกกับเทคนิค การสร้างภาพในฝันด้วย Photoshop article
มาแต่งภาพสวย แบบซีเปียง่ายๆ ด้วย Photoshop กันเถอะ article
มาทำตัวอักษรแบบไล่โทนสี เอาไว้แต่งหัวข้อของบทความ กันครับ article



dot
ค้นหาบทความ

dot
dot
Oxygen Menu
dot
bulletOxygen Home
bulletต้นกำเนิด Oxygen
bulletข่าวจากสื่อต่าง ๆ
bulletAdWords Reseller News
bulletPhoto Gallery
bulletแนะนำ ติชม
dot
ReadyPlanet Update
dot
bulletReadyPlanet News
bulletFunction Update
bulletNew Templates
dot
Tips & Technics
dot
bulletReadyPlanet HowTo
bulletTips & Tricks
bulletDesign Guru
bulletR&D Talk
dot
Marketing Tools
dot
bulletNice To Know
bulletEditor Recommend
bulletแผนการทำโฆษณาบน Google
dot
ReadyPlanet Members
dot
bulletHighlight Member
bulletMember News
bulletWeb of The Week
bulletWeb of The Day
dot
Training & Seminar
dot
bulletTraining Courses
bulletแบบสำรวจความพอใจ
dot
IT News
dot
bulletCyber Story
bulletDo You Know ?
bulletCyber News
bulletArticle Of The Day
bulletCyber Joke
dot
Blog
dot
bulletSongyot Blog
bulletบุรินทร์ 's Blog
bulletเว็บซื้อขาย VelaMall.com
bulletเว็บสำเร็จรูป
bulletทัวร์ต่างประเทศ
dot
Free!!! Service
dot
bulletFree!!! Background
bulletวิเคราะห์เว็บไซต์ฟรี!!!


เว็บสำเร็จรูป


Copyright © 2010 All Rights Reserved.
Blog.readyplanet.com อัพเดทข่าวสาร เทรนด์การตลาดออนไลน์ ที่คุณไม่ควรพลาด!

บริษัท เรดดี้แพลนเน็ต จำกัด
89 อาคาร เอไอเอ แคปปิตอล เซ็นเตอร์ ชั้น 7 ห้อง 701-705 ถนนรัชดาภิเษก แขวงดินแดง เขตดินแดง กรุงเทพฯ 10400
Tel. 02-016-6789 (24 ชั่วโมง ทุกวัน) Fax: 02-016-6901 Email : info@readyplanet.com