ข่าว IT ล่าสุด
ถูกใจอย่าลืม Like Fanpage
เทคนิค : การทำ Glass Bar ที่เขานิยมทำกันเพื่อเอาไว้เป็นเมนู
แสดงแล้ว 5048 ครั้ง /
ตุลาคม 13, 2009, 18:36:16

Moshi

ออฟไลน์
กระทู้ : 16,996
คะแนนขอบคุณ : 45
it4x สังคมแห่งการเรียนรู้
เทคนิค : การทำ Glass Bar ที่เขานิยมทำกันเพื่อเอาไว้เป็นเมนู

ไฟล์ประกอบ PSD >>  http://www.ziddu.com/download/6897801/Glass_Bar_TUT_by_Xenogenesis.rar.html

อันนี้แหละที่เราจะทำกัน



1.สร้างงานใหม่ขึ้นมา 1 อัน กำหนด Properties ดังรูปเลยนะ แล้วก็ OK โลด


2.พื้นที่ชิ้นงานที่เราจะทำประมาณนี้


3.เลือกเครื่องมือ Rounded Rectangle Tool (U) ดังภาพ


4.ที่ด้านบนเลือกการวาดเป็นแบบ Shape และกำหนด Radius = 0.2 cm ดังรูป


5.วาดลงไปในพื้นที่ให้มีขนาดตามที่ต้องการ ( จะเล็กจะหญ่ายขนาดไหนก็ตามสะดวกเล้ย )


6.ตั้งชื่อเลเยอร์ที่เราวาดไว้เมื่อกี้เป็น base ดังรูป ( กันงงทั้งคนทำคนสอน ) จากนั้นคลิกขวาที่เลเยอร์ base แล้วเลือกคำสั่ง Blending Options…


7.ติ๊กเลือกที่ Gradient Overlay แล้วกำหนด Properties ดังภาพ จากนั้นคลิกที่ Gradient ( ข้าง ๆ คำว่า Reverse น่ะเห็นม่ะ ๆ ) เพื่อกำหนดการไล่สี ( ชิ้ว ๆ )


8.ที่ Gradient Editor กำหนดค่างต่าง ๆ ดังรูปเลยน๊า..แล้วก็ OK..OK ได้เล้ย


9.เราจะได้ฐานของแท่งแก้วเป็นประมาณนี้ โฮ่ ๆ ไปกันต่อ


10.ใช้เครื่องมือ Rounded Rectangle Tool (U) และกำหนดค่าต่าง ๆ ดังรูป ( ก็เหมือนเดิมแบบในข้อ 4. นั้นเอง )


11.วาดลงไปในพื้นที่งานแต่ให้มีขนาดเล็กกว่าเลเยอร์ base นิหน่อย ( ดูได้จากรูปว่ามันเล็กกว่าจริง ๆ นะ )


12.ตั้งชื่อเลเยอร์นี้ว่า Base2 ( กันงงอีกเช่นเคย ) ตามภาพ


13.นำรูปที่ต้องการจะนำมาทำเป็น Background ของปุ่มแล้วก็ลากเข้ามาไว้ในพื้นที่งานเราเลย


14.ตั้งชื่อเลเยอร์ภาพนี้ว่า Picture ตามรูป จากนั้นคลิกขวาที่เลเยอร์ Picture แล้วเลือกคำสั่ง Create Clipping Mask
***ข้อสังเกตุ เลเยอร์ Picture จะอยู่เหนือบนเลเยอร์ Base2 ตามภาพ


15.หลังจากเราเลือกคำสั่ง Create Clipping Mask เรียบร้อยแล้วจะมีลูกศรเล็ก ๆ โผล่ขึ้นมาที่หน้าเลเยอร์ Picture ( เป็นอันว่าใช้ได้ )


16.และผลงานที่ได้ก็จะเป็นแบบเน้ ( โอ้เย.. )
*** คำสั่ง Create Clipping Mask จะทำให้เลเยอร์ที่อยู่ข้างใต้ของภาพทำหน้าที่เป็นตัว Mask(หน้ากาก) ให้แสดงเฉพาะส่วนของงานที่ต้องการเท่านั้น ในที่นี้เลเยอร์ Base2 ถูกทำให้เป็นตัว Mask และแสดงในส่วนที่เลเยอร์ Base2 เห็นเท่านั้น ( หวังว่าผู้อ่านคงจะเข้าใจและพยายามเข้าใจ เพราะคนทำเองมันก็ไม่รู้จะอธิบายยังไงดี เอิ๊กๆ )


…พักตรงนี้ไว้ก่อนต่อไปจะมาทำในส่วนของ Pattern กัน

17.สร้างงานขึ้นมาใหม่ 1 ชิ้น กำหนดขนาดและคุณสมบัติต่าง ๆ ตามรูปเลยนะ


18.ใช้เครื่องมือ Pencil Tool(B) กำหนดขนาดหัวดินสอเป็น 1px น่ะจ๊ะ


19.วาดลงไปดังภาพเลยครับ สีดำนี้ทำให้เห็นภาพว่าต้องวาดลงจุดไปยังไงแต่เวลาใช้จริง ๆ ต้องเป็นสีขาวครับ (ขยายงาน 1600% ไปเลยเพราะพื้นที่งานเล็กมาก )


เวลาใช้จริง ๆ ต้องเปลี่ยนจุดดำ ๆ ให้เป็นขาวอย่างนี้นะ


20.ไปที่เมนู Edit > Define Pattern… ดังรูปเลย


21.ตั้งชื่อ Pattern ที่เราสร้างเอาไว้เป็นอะไรก็ได้แล้วก็ OK โลด


กลับมาที่ชิ้นงานหลักของเราต่อ..

22. คลิกขวาที่เลเยอร์ Base2 แล้วเลือกคำสั่ง Blending Options…


23.ติ๊กเลือกที่แท๊บ Pattern Overlay แล้วกำหนด Opacity = 75% และเลือก Pattern ที่เราได้สร้างไว้เมื่อกี้


Pattern ที่สร้างเอาไว้จะอยู่แถว ๆ นี้แหละ


24.ผลงานที่ได้จะออกมาประมาณนี้ ( เริ่มเหนื่อยกันรึยัง คนทำเริ่มงงเองและตอนนี้ สู้กันต่อ)


25.ใช้เครื่องมือ Rounded Rectangle Tool (U) และกำหนดค่าต่าง ๆ ตามข้อ (4.) และวาดลงไปในพื้นที่งานของเราเลยแต่ให้มีขนาดเล็กกว่าเลเยอร์ Base2 นิดนึง ( นิดนึงพอ )


26.และตั้งชื่อเลเยอร์นี้ว่า shade ( กันงงอีกตามเคย )


27.คลิกเลือก Shape ที่เลเยอร์ shade ให้เกิดเส้นขอบพื้นที่รอบ ๆ Shape ขึ้นก่อน ( ตรงนี้ต้องสังเกตุดีดี )
ใช้เครื่องมือ Rounded Rectangle Tool (U)
จากนั้นกด Shift ค้างไว้และวาดลงไปตามภาพ
*****ข้อ สังเกตุ(อย่างแรง) ในขณะที่วาด Shape เพิ่มเข้าไปที่เลเยอร์ shade ตรงเคอเซอร์ตัววาดจะมีเครื่องหมายบวก (+) โผล่ขึ้นมาด้วย ซึ่งแสดงว่าเรากำลังจะวาด Shape เพิ่มเข้าไปใน Shape เดิม ถ้าไม่มีเครื่องหมาย ( + ) โผล่ขึ้นมาให้ลองคลิกเลือกที่ Shape เพื่อให้เกิดเส้นพื้นที่รอบ ๆ Shape เสียก่อน ( ถึงบอกว่าต้องสังเกตุดีดีอย่าเพิ่งงงล่ะ )


28.เมื่อวาดแล้วก็จะได้ตามภาพนี้ ( สังเกตุว่า Shape ที่วาดเพิ่มเข้ามาจะอยู่รวมที่เดียวกันกับเลเยอร์ shade ไม่ได้ถูกแยกเลเยอร์ขึ้นมาใหม่ )


29.ใช้เครื่องมือ Path Selection Tool (A) ( ลูกศรสีดำเล็ก ๆ อย่าไปเลือกสีขาวล่ะ )


30.คลิกเลือกไปที่ shape ที่เราวาดเพิ่มขึ้นมาเมื่อกี้นี้ ( สังเกตุว่าจะมีจุด หนา ๆ โผล่ขึ้นมาแสดงว่า shape เมื่อกี้ที่วาดไว้ได้ถูกเลือกแล้ว )


31.ที่ด้านบนคลิกเลือก Subtract From Shape area (-) ตามรูปครับ


32.ผลที่ได้มันจะตัดส่วนที่เราวาดทับกันออกไป ^^ ( พอจะเห็นภาพแล้วเนอะ )


33.ต่อไปคลิกขวาที่เลเยอร์ shade แล้วเลือกคำสั่ง Blending Options…


34.ติ๊กเลือกที่แท๊บ Gradient Overlay แล้วกำหนด Properties ต่าง ๆ ดังภาพครับ จากนั้นคลิกเลือกที่ Gradient เพื่อกำหนดการไล่สี


35.ที่ Gradient Editor กำหนดค่า Opacity และ Color ดังรูปเลยครับ


35.เลือกที่แท๊บ Blending Options : Custom และปรับ Fill Opacity เป็น 0% ดังรูป แล้วก็โอเคเล้ย.


36. เสร็จแว้วววว ( ใส่ข้อความตกแต่งเอาตามสะดวกจ้า )


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

บทความนี้ได้จากเว็บxenstudio.wordpress.com

Site : www.it4x.com

« แก้ไขครั้งสุดท้าย: ตุลาคม 13, 2009, 18:55:55 โดย admin »

 

ด้วยฟังค์ชั่น ตอบด่วน คุณสามารถใช้โค๊ดและ เครื่องหมายแสดงอารมณ์ได้ เหมือนการตั้งกระทู้ธรรมดา แต่สามารถทำได้สะดวกกว่า

ระวัง: หัวข้อนี้ไม่มีการอัพเดทมานานถึง 120 วัน

แจ้งเตือน: โพสของคุณจะไม่แสดงจนกว่าผู้ดูแลจะอนุมัติ.
ชื่อ: อีเมล์: