ThaiSEOBoard.com

ไทย เสียว บอร์ด => Tutorial (ห้ามตั้งคำถามห้องนี้) => ข้อความที่เริ่มโดย: mrtomson ที่ 23 มิถุนายน 2010, 21:40:15



หัวข้อ: [ PhotoShop Tips บทที่ 1 ] pattern overlay กับ layer
เริ่มหัวข้อโดย: mrtomson ที่ 23 มิถุนายน 2010, 21:40:15
อย่าเพิ่งถามครับว่าบทความอันนี้เกี่ยวกับการทำ SEO ตรงไหนถึงเอามาโพสใน ThaiSEO ได้
มันเกี่ยวโดยอ้อมๆ ครับ คือถ้าทำ SEO คนเข้าเว็บเยอะ แต่ถ้าเว็บไม่สวย สักพักหนึ่งคนที่เข้าเยอะๆนั้นก็จะค่อยๆทยอยหายไปเรื่อยๆ
เพราะผู้ใช้ส่วนใหญ่มักจะชอบเว็บที่สวย มากกว่าเว็บที่ไม่สวย นั่นเอง
ผมเองก็เข้ามานานแล้ว อยากจะทำอะไรให้บอร์ดบ้าง

เข้าเรื่องกันดีกว่า
จากที่ผมเห็นมาในปัจุบันมีการใช้ pattern overlay ในการแต่งเว็บอย่างแพร่หลาย  :wanwan020:
และที่เห็นส่วนใหญ่มักจะเป็น การทำเส้นทะแยง

เช่นแบบนี้
ภาพต้นแบบ
(http://www.postto.me/ip/tp0vb.png)
ภาพเ้มื่อใช้เทคนิค Pattern overlay ด้วยเส้นทะแยงสีดำ
(http://postto.me/ii/0qpb1.gif)

มาทำความเข้าใจกัน ...
Pattern Overlay คือการทำซ้ำอย่างมีรูปแบบ
เช่นเดียวกับการใส่รูปพื้นหลังของเว็บ ถ้าเราใส่รูปภาพที่เล็กๆ มันก็จะขึ้นมาซ้ำๆกัน จนกว่าจะเต็มหน้าเว็บ
pattern overlay ก็เช่นเดียวกัน มันจะใส่ ภาพที่เราทำไว้ ขึ้นไปอยู่เหนือภาพใน layer เป้าหมาย
อย่างเช่นภาพตัวอย่างที่ให้ไป เป็นภาพ หมา มีเส้นทะแยงจนเต็มภาพ แต่คุณเชื่อหรือไม่ว่า
"ผมวาดแค่เส้น 1 เส้นเท่านั้น" แล้วผมทำได้อย่างไร ?

นั่นคือเทคนิค pattern overlay ครับ มันมีอยู่แล้วใน photoshop แต่คนมักไม่ค่อยรู้จักมันสักเท่าไหร่
เอาละอธิบายไปไม่เห็นภาพ มาลองทำกัดีกว่า

ก่อนอื่นก็สร้างภาพใหม่ด้วยขนาด 10x10 pixel แล้วก็ซูมเข้าไป 1600% จะเห็นภาพละเอียดในระดับ pixel

(http://postto.me/ij/fdpb1.gif)

จากนั้นให้สร้างเลเยอร์ใหม่ขึ้นมาครับ ตอนนี้เราจะมีสองเลเยอร์ คือ Layer1 กับ Background
ให้ทำการปิดตาเลเยอร์ Background ครับ จะได้ดังภาพ

(http://postto.me/is/d1pb1.gif)

จากนั้นให้ใช้ดินสอ วาดเส้นทะแยงด้วยสีที่คุณต้องการผมจะใช้สีแดงละกันครับ

(http://postto.me/ia/8fpb1.gif)

เสร็จแล้ว เรามาเซฟ pattern กันก่อนจะเอาไปใ้ช้
โดยไปที่ Edit > Define Pattern แล้วให้คุณตั้งชื่อ pattern ตามใจคุณ ตั้งว่าอะไรก็ได้แล้วแต่จะชอบแล้วกด OK

จากนั้นก็ให้เราเปิดภาพเป้าหมายขึ้นมา ในที่ที่ผมจะใช้รูปหมานะครับ
(http://www.postto.me/ip/tp0vb.png)

พอเปิดขึ้นมาแล้วก็ไปที่ Blending Option ครับ

(http://postto.me/it/u7pb1.gif)

คลิกที่ pattern overlay เลยครับ (คลิกที่ตัวหนังสือ pattern overlay ได้เลย เดี๋ยวมันติ๊กถูกให้เราเอง)
จากนั้นภาพก็จะเป็นอะไรยึกยือเต็มไปหมด ไม่ต้องสนใจครับ ไปปรับ pattern ด้านขวามือได้เลย

(http://postto.me/ia/3epb1.gif)

ก็จะได้แบบนี้เลย
(http://postto.me/iz/oxpb1.gif)

พอได้แบบนี้แล้วบางคนก็บอกว่ายังไม่สวยพอ อันนี้คุฯต้องหาวิธีใช้ให้สวยเองครับ
ลองใช้ร่วมกับเทคนิคอื่นๆดูจะช่วยได้มากเลยทีเดียว

อันนี้เป็นเทคนิคพื้นๆก็จริงครับแต่ว่าคนไม่รู้ก็มีเยอะมากเลยทีเดียว จึงได้นำมาเสนอ ณ ที่นี้
ขอบคุณครับ


หัวข้อ: Re: [ PhotoShop Tips บทที่ 1 ] pattern overlay กับ layer
เริ่มหัวข้อโดย: sugar ที่ 23 มิถุนายน 2010, 21:48:49
 :wanwan020: น่าสนใจค่า เดี๋ยวของเอาไปใส่เว็บหนู๋ด้วยนะ ขอเลยนะค่ะ  :wanwan017:


หัวข้อ: Re: [ PhotoShop Tips บทที่ 1 ] pattern overlay กับ layer
เริ่มหัวข้อโดย: engiblog.com ที่ 23 มิถุนายน 2010, 22:26:38
ขอบคุณครับ