• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

ทันทีที่ผมเริ่มเขียนเอนทรี่นี้ โดยเริ่มทำตั้งแต่การจับภาพหน้าจอไปก่อน แล้วก็ตามใส่ข้อความประกอบภาพตาม ผมก็เริ่มรู้เองแล้วว่า ผมอัพบล็อกอย่างบ้ากำลังมากๆ ในเอนทรี่นี้ก็คงจะยาวอีก แต่ยังไงก็ยังอยากจะสอนอยู่ดี ในเอนทรี่นี้จะสอนเทคนิคการใช้โฟโตชอปแบบ 5 ใน1 เพื่อเอาไว้สร้างกระดาษลายเส้นที่มีขอบฉีกๆ เหมือนตั้งใจฉีก

ผมเคยเห็นเอนทรี่ใครสักคนใน exteen นี้ใช้วิธีสร้างกระดาษลายเส้นขึ้นมาด้วยการสแกนกระดาษ แต่วิธีของผมไม่ต้องใช้การสแกนกระดาษ เพราะเราไม่มีสแกนเนอร์นั่นเอง เนื่องด้วยความจนเป็นสมบัติติดตัว(ควรจะภูมิใจดีไหม) ก็เริ่มกันเลยดีกว่า ผมจะแยกเป็นหัวข้อย่อยๆ ให้อ่านกันนะครับ รูปอาจจะเยอะสักหน่อย และเพื่ออรรถรสในการรับชมบล็อกนี้ กรุณาอย่าใช้ ie6 นะ ผมไม่ได้เทสต์กับ ie6 เพราะปล่อยลอยแพไปนานแล้ว

#1 สร้างpattern ง่ายๆ ด้วยตัวคุณเอง

 

1.1 สร้างงานขึ้นมาใหม่ โดยให้ชิ้นงานกว้าง 1px สูง 5px

 

 

1.2 เลือก Brush Tool แบบ Pencil Tool ขนาด 1px เลือกใช้สีตามใจชอบ

 

1.3 ซูมขยายออกให้เต็มที่เลยครับ ของผมซูม 1600 เท่า แล้วก็ปาดตรงกลางจุดเดียวพอ

 

1.4 หลังจากที่ปาดเส้นไปแล้ว ให้เข้าไป Canvas Size เพื่อขยายขนาดผ้าใบ

 

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

 

1.6 เมื่อขนาดชิ้นงานกลายเป็น 1px คูณ 25px ก็เทสีขาวหรือสีอ่อนใดๆก็ได้ ลงไป Background 

 

1.7 ให้ทำ Selection ชิ้นงาน โดยกด Ctrl+A แล้วก็เลือก Define Pattern

 

แล้วก็เซฟซะ ทีนี้เราก็จะได้ pattern เก็บเอาไว้ใช้ในคราวต่อไป

 

 

#2 ทำกระดาษลายเ้ส้นจาก pattern ที่เตรียม

 

2.1 สร้างงานใหม่ขึ้นมาอีกชิ้น คราวนี้เราจะทำกระดาษลายเส้นกัน

 

2.2 ทำ Selection โดยกด Ctrl+A จากนั้นเทสีพื้นหลังทั้งชิ้นงาน (ผมสาธิตใช้สีเข้ม แต่ก็แนะนำว่าให้ใช้สีอ่อนจะดีกว่า)

 

2.3 ใส่ Effect ให้กับ Layer โดยเข้าไปที่ Layer >  Layer Style > Pattern Overlay

เลือกใส่ Pattern เป็นกระดาษที่เราเพิ่งทำเมื่อครู่

 

2.4  ตั้งค่า Color overlay สักหน่อย ตรงนี้จะมีประโยชน์มากๆ เวลาที่เราจะขยายพื้นที่งานในคราวต่อไป โดยที่เราไม่ต้องมานั่งจำว่า ค่าสีคราวก่อนเราเทสีอะไรไป

 

ใส่ค่าตามตัวอย่างครับ แต่ในส่วนของ Opacity ท่านสามารถปรับ ลด-เพิ่ม ได้ตามต้องการ แต่ถ้าไม่ปรับจะไม่เห็นลายเส้นนะเออ..

 

ใส่เงาให้กับกระดาษล่วงหน้าไว้ก่อน ในส่วนของ Angle คือมุุมของเงาวัตถุ   สามารถปรับเปลี่ยนกันได้นะครับ เช่นเดียวกับสีเงา ผมเองเป็นคนที่ไม่ชอบเงาสีดำแบบค่าตั้งต้นที่โปรแกรมกำหนดมา ส่วนใหญ่จะใส่ #cccccc หรือไม่ก็ #aaaaaa มากกว่า เพื่อเงาที่ได้จะได้ออกมานิ่มนวล

 

ใส่ขอบให้กระดาษ เพื่อที่จะได้ไม่ทำให้ตัวกระดาษดูแบนเรียบ ท่านสามารถปรับแต่งค่าได้ตามใจชอบ ให้นอกเหนือไปจากที่ผมแสดงนะครับ

 

นอกไปจากนี้ยังทำ Edit Transform หรือ บิดเลเยอร์ ให้มันกระดาษโค้ง หรือ บิดพริ้วได้ตามใจ แต่ผมไม่สอนนะ มันง่ายเกิน 

 

2.5 กางผ้าใบ เพิ่ม +20px ทั้งความกว้างและความสูง 

 

 2.6 สร้างเลเยอร์ขึ้นมาใหม่ เพื่อจะใช้เป็นพื้นหลัง แล้วก็เลื่อน order ให้ต่ำกว่า เลเยอร์ที่เป็นลายกระดาษ

 

 

 

 2.7 เทสีพื้นหลังลงไปก็เรียบร้อย

 

#3 ทำขอบแบบฉีกๆ (เป็นวิธีที่ง่ายมาก หลายๆคนอาจจะคิดไม่ถึง)

 

3.1 ใช้ยางลบ Eraser Tool แบบ Brush Tool หรือลบแบบหัวแปรงนั้นเอง ให้ลองๆเลือกหัวแปรงที่หน้าตาแปลกๆมาใช้ดูครับ ซึ่งหัวแปรงพวกนี้ก็มีให้โหลดกันเยอะแยะตาแป๊ะไก่ในเว็บ

 

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

 

ในระหว่างที่ลบก็ลองเปลี่ยนหัวแปรง เปลี่ยนรูปแบบการลาก ก็จะได้รอยฉีกแบบแปลกๆ มาเรื่อยๆ ในส่วนนี้ผมลบ3รอบ ผมก็หยิบหัวแปรงไม่เคยซ้ำเลยเหมือนกัน

 

ไหงมันสั้นงี้อ้ะ... ก็บอกแล้วว่าวิธีทำขอบฉีก มันง่ายมากๆ

 

#4 ทำให้กระดาษเหมือนมีรอยย่นที่ขอบ

 

4.1 สร้างเลเยอร์ขึ้นมาใหม่ก่อน ทีนี้วางเอาไว้ด้านบนของกระดาษลายเส้น

 

4.2 เลือกใช้ Polygonal Lasso Tool

 

4.3 ทำ Selection เป็นรูปสามเหลี่ยมที่มุมกระดาษ ลากปรื้ดๆ สามทีก็ได้แล้ว

 

4.4 ตามภาพขี้เกียจพิมพ์

ถ้าเกิดลาก Gradient แล้วเส้นขอบมันดำมากไป ก็ลองลด Opacity ลงก็ได้ครับ

 

#5 ใส่ลายน้ำบนกระดาษ

 

5.1 ขั้นตอนนี้เป็นขั้นตอนเพื่อเพิ่มอะไรเล็กๆน้อยให้กับกระดาษลายเส้นของเรา และแน่นอนครับ สร้างเลเยอร์ขึ้นมาใหม่ โดยวางไว้บนสุด

 

5.2 ใช้ Brush Tool หน้าตาแปลกๆ เท่าที่จะมีในเครื่อง แล้วก็เลือกสีอ่อนๆไว้ก่อน

ถ้าเข้มไปก็ลองปรับลด Opacity ทั้งเลเยอร์ก่อนนะครับ ควรจะให้กลมกลืนทั้งแผ่นกระดาษ

 

5.3 ใส่พื้นหลังโดยไปเทสีในเลเยอร์ล่างสุดนะ ย้ำว่าล่างสุด ก็จะออกมาคล้ายๆ กับส่วนล่างของบล็อกผมแล้ว

 

 

จบแล้วครับ เทคนิคง่ายๆ ที่ไม่ได้พิศดารอะไร ลองเอาไปใช้กันดูนะ ถ้าเอาไปใช้ตรงกล่องคอมเมนต์ จะเพิ่มความงามให้กับบล็อกได้มากเลย

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

Tweet

กำลังอยากได้อยู่พอดีครับ big smile Hot!

#1 By Eddy on 2008-08-28 11:19

ของเล่นใหม่ใส่ blogHot!

#2 By V@R on 2008-08-28 11:23

สุดยอดอีกแล้ว

หายไปนาน กลับมาทีก็มีความรู้ให้ดูดอีกแล้ว ขอบคุณนะคะsurprised smile

#3 By sora no hime★空のひめ on 2008-08-28 11:27

ลืมค่ะ อ่ะ Hot! คุณค่าที่คุณโอ๋คู่ควร

#4 By sora no hime★空のひめ on 2008-08-28 11:27

GG มากเลย ขอบคุณมากค่ะbig smile
Hot!
หมายหัวไว้ก่อน เดี่ยวกลับมาลองของครับ - -+
คิดว่าได้ แต่ต้องไปหาโปรแกรมมาลงก่อน sad smile

#8 By ตุ้มเป๊ะ on 2008-08-28 12:22

เจ๋งครับ Hot!

#9 By เอกน้อย on 2008-08-28 12:51

เยี่ยมไปเลยครับพี่น้อง

#10 By นายฉิม on 2008-08-28 13:11

โอ้ ... ผมลองทำไปด้วยแล้วครับ
พอดูได้เลยทีเดียว
555+

แต่ว่า เหมือนหน้าจอผมจะตั้งค่าแสงสีไม่ดี
ทำให้ผมมองไม่เห็นเส้นกระดาษของคุณเลยครับ
ปรับไปปรับมา ยิ่งแย่กันไปใหญ่

#11 By :: PAKO :: on 2008-08-28 13:13

#11 ดูในหัวข้อย่อย 2.4
ในส่วนของ Color overlay ลองปรับลด ค่า Opacity ลงไปอีกสิครับ เส้นกระดาษจะได้ชัดชึ้น

#12 By palermos on 2008-08-28 13:20

Hot! big smile

#13 By oatato on 2008-08-28 13:57

แบบนี้ไม่เคยทำแฮะ
เคยแต่แต่งรูปเฉยๆbig smile Hot!
ไว้เดี๋ยวจะลองนะคะ ขอบคุณค่า

#15 By MamiLuv on 2008-08-28 14:27

เยี่ยมเลยค่ะ เดี๋ยวหัดมั่ง

แต่อยากได้ไอ้กระดาษแปะๆ อย่างกล่องคอมเม้นท์นี่บ้างอ่ะ

#16 By uregus on 2008-08-28 15:27

#16 หมายถึง ให้สอนแก้ไข css ในส่วนแสดงคอมเมนต์ใช่ไหมครับ

#17 By palermos on 2008-08-28 15:40

ว๊าวว ดีจัง
แต่อันเก่า ยังทำไม่เป็นเลย
แหง่ๆ
อุ้ย จ๊าบ Hot! Hot! Hot! Hot!

#19 By Cotton on 2008-08-28 17:01

Hot! น่าสนใจครับ เดี๋ยวลองทำดูมั่ง

#20 By manop on 2008-08-28 17:14

ยอดเยี่ยมbig smile
Hot! Hot!

#21 By SEsai*im อิ่มๆ on 2008-08-28 17:15

เดี๋ยวต้องลองทำดูบ้างแล้วคะ
อยากได้อยู่พอดี
Hot!

#22 By ~memay~ on 2008-08-28 17:31

สุดยอด!! ง่ายแบบคาดไม่ถึง

ขอบคุณที่เอามาแบ่งปันค่าHot!

#23 By ๑۩ﺴ Ul-Q ﺴ۩๑ on 2008-08-28 17:48


พระเจ้า...

ทำ blog นี้ถึงได้สุดยอดอย่างนี้

เทียบกับ Blog ตัวเองแล้วมันเศร้า ...
โอ่วว้าวเทคนิคน่าสนใจมากเลยค่ะ
อีกแบบหนึ่งที่เรานิยมทำคือ search หาพวกภาพกระดาษจาก photoshopมาตกแต่งเอาค่ะ Hot!
แบบนี้ก็ไม่เลวเหมือนกัน อิอิconfused smile

#25 By หนูพุก on 2008-08-28 18:41

หนูพุกน่ารักอ้ะ.. เอิ้กๆ

#26 By palermos on 2008-08-28 19:06

ขอบคุณสำหรับเทคนิดดีๆ นะคะsurprised smile

#27 By เนือย on 2008-08-28 19:33

ลองทำดูดีกว่า ขอบคุณนะคับ confused smile

#28 By Googigg on 2008-08-28 19:41

ดีค่ะ จะได้แบ่งปันให้คนที่อยากทำ open-mounthed smile

#29 By eVeZaa on 2008-08-28 19:54

ง่ายอย่างไม่น่าเชื่อ !!!
ต้องลองเอาไปทำมั่งเเล้ว
(เเต่เกรงว่าจะเละเพราะcss ฮ่าๆ)

Hot!

#30 By Mayu! 169สึดยอด! on 2008-08-28 19:58

เจ๋งเลยค่ะ
ขอบคุณนะคะ big smile
ตอนนี้มีแต่ texture กระดาษที่มาจากการสแกน
เดี๋ยวจะลองสร้างเองดูมั่ง

#31 By Bluemoon on 2008-08-28 20:00

กำลังอยากเปลี่ยนธีมพอดีเลย แหะๆ

ขอบคุณมากๆ ครัีบ
โอ้ว ขอบคุณมากครับ ว่าแล้วก็แอดซะจะได้ไม่พลาดเทคนิคใหม่ ๆ cry Hot!

#33 By pisces on 2008-08-28 20:34

สุดยอดอลังการงานสร้าง x2
Hot! Hot!
เจ๋งค๊อดดดด

#34 By robocon on 2008-08-28 20:50

ขอบคุณครับ

#35 By manee on 2008-08-28 21:51

ทำไม่เป็นอะ
แล้วเจอกันใหม่ด้วยความห่วงใย..confused smile
ขอบคุณมากคร้าบผม cry Hot!

#37 By desktop bomb on 2008-08-28 23:00

เยี่ยมมากเลย
ได้ประโยชน์จริงๆ
จะเอาไปฝึกนะcry
Hot! บล็อกนี้ ... จะเทพไปไหนคะ

big smile เยี่ยมยอด!!
ขอบคุณมากเลยครับ big smile

#40 By Say Hi on 2008-08-28 23:17

ว้าว เจ๋งจริงๆ กำลังอยากได้กระดาษไปใส่บล็อก ว่าจะหารูปไปแต่งอยู่ แต่แนะนำขนาดนี้เห็นดีต้องลองทำเองดูบ้างแล้ว Hot!
เมพ!!!

#42 By *ゆきめ* on 2008-08-29 02:14

โฮ้ เอามั่งๆconfused smile confused smile

#43 By (^_^)/nana on 2008-08-29 07:43

สวัสดีค่า แวะมาเม้นท์ค่า

ฮี่ๆ หนูยังใช้โฟโค้ชอปไม่เปนเยย ย

#44 By CraZy_InDii>>[Me] on 2008-08-29 11:32

Hot!





ขอบคุณค้าบบบบบบ

#45 By SUPERGiRL ^ ^* on 2008-08-29 12:15

ยอดเลยค่ะ

#46 By MomMom on 2008-08-29 15:15

ไฮโซอ้ะ confused smile Hot!

#47 By Risa on 2008-08-29 18:48

กำลังคิดจะทำกระดาษยับพอดีเลยครับconfused smile

#48 By on 2008-08-29 18:52

เจ๋ง...big smile

#49 By (^_^ ) (^_^) on 2008-09-01 13:05

แหล่มไปเลยครับconfused smile

#50 By hummann on 2008-09-06 01:55

ขอบคุณครับ

#51 By theball (203.144.165.130) on 2008-09-08 09:13