สวัสดีท่านผู้อ่านที่ผ่านไปมาทั้งหลายไม่ว่าจะตั้งใจเข้ามาหรือเข้ามาโดยบังเอิญ จะแว๊บมาแป๊บน้อยแป๊บนานก็ตาม เอาเป็นว่าสวัสดีทุกคนเลย ไม่ได้เขียนบทความลงนานมากกกแล้ว และก็อาจจะนานอีกต่อไป ( แหะๆ ) มันมีเหตุหลาย ๆ ประการที่ไม่ได้เขียนบทความลงบล็อก ประการแรกเลยคือขี้เกียจ ประการที่สองคือขี้เกียจ+คิดอะไรไม่ออก ประการสุดท้ายคือขี้เกียจ+คิดอะไรไม่ออก+งานท่วมหัวครับ (ฮา)…สรุปแล้วก็คือขี้เกียจนั้นหละ แต่ถึงจะไม่ได้เขียนอะไรเลยแต่ก็แวะมาเช็คบล็อกอยู่เรื่อย ๆ ครับ วันนี้นั่งวาดรูปตามประสาคนอารมณ์กำลังเบื่อ ๆ และก็ได้ออกมาตามภาพด้านบนนั้นแล เลยทำเป็นวอลเปเปอร์มาฝากซะเลย ไม่รอช้ารีบเอาไปหย่อนทิ้งไว้ที่ Devianart ในภาพที่ตั้งชื่อว่า “Drift Along” อาจจะไม่ได้เห็นบทความไปอีกนานหวังว่าผู้ที่ผ่านไปมาทุกท่านจะได้ประโยชน์จากบทความเก่า ๆ ไม่มากก็น้อย มีอะไรเพิ่มเติมหรือบทความใหม่ ๆ เมื่อใดจะรีบมาแจ้งให้ทราบครับ วันนี้ผมขอตัวไปก่อนล่ะ…

ปล.ได้แต่ปลอบใจตัวเอง ว่ามีปัญญาแค่นี้ยังไงก็ได้พยายามลองทำแล้วน๊า…
สีมันลายตาไปรึเปล่าเนี่ย

เตรียมตัวก่อนทำ
1.โปรแกรม Macromedia Flash 8 ( ตอนนี้ต้องบอกว่า Adobe Flash แล้วสิเนอะ แต่ชอบ Macromedia มีไรอ่ะเปล่า ) เวอร์ชั่น MX,MX2004 ใช้ได้เปล่าผมมิแน่ใจต้องลองดูแล้วกัน
2.ความตั้งใจ และทำใจเย็น ๆ อย่างงกับบทความ ( อันนี้สำคัญ ฮ่า ๆ )
3.มีทั้งข้อ 1 และ 2

เริ่ม

1.สร้างงาน flash เปล่า ๆ ขึ้นมา กำหนดขนาดของพื้นที่งานตามที่ต้องการครับ
- กำหนด Frame Rate : 18 ( อาจจะสัก 18 - 25 ก็ได้ครับเพื่อความนุ่มนวลของตัวเยลลี่ ^^ )
- เปิดหน้าต่าง Library ขึ้นมาโดยไปที่เมนู Window > Library หรือกด Ctrl + L
- เมื่อหน้าต่าง Library โผล่มาแล้วให้คลิกที่ปุ่ม + ด้านล่างซ้ายของ Library เพื่อสร้าง MovieClip
( ดูภาพประกอบในจุดที่ 3 )

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

2.เมื่อคลิกแล้วจะโผล่ไดอะล๊อก Create New Symbol ขึ้นมา
- ตั้งชื่อ Symbol ว่าอะไรก็ได้ ( ผมตั้งเป็น My Symbol )
- ติ๊กเลือกประเภทของ Symbol เป็น Movie Clip
( ตามภาพ )

3.ตอนนี้เราจะทำงานอยู่ในส่วนของ Movie Clip ที่เราสร้างขึ้นมาแล้วครับ ( ในภาพจุดที่ 1 )
- ทำการวาดภาพ,ข้อความหรือโลโก้ อะไรก็แล้วแต่ที่เราต้องการลงไปใน Movie Clip ( อันนี้อยู่ที่ท่าน ๆ จะวาดแล้วครับขึ้นกับความสามารถเฉพาะหน้า เอ้ย เฉพาะตัว ส่วนผมหากินกับโลโก้ตัวเองง่ายสุด ^^ )
- เมื่อได้รูปที่ต้องการเป็นที่เรียบร้อยแล้วก็ให้คลิกที่ Scene 1 เพื่อกลับไปหน้า Stage ทำงานหลักของเรา ( ในภาพจุดที่ 2 )
[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

4.เมื่อกลับมาที่ Stage ทำงานหลักของเราเป็นที่เรียบร้อยแล้วก็ลุยกันต่อ
- ลาก Movie Clip ที่เราได้สร้างไว้เรียบร้อยแล้วจาก Library มาวางที่ Stage ( ในภาพจุดที่ 1 )
- ตั้งชื่อ Movie Clip ว่า mc1 ( ในภาพจุดที่ 2 )

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

5.เมื่อตั้งชื่อให้กับ Movie Clip แล้วก็ให้คลิกที่ Filters เพื่อกำหนดเงาให้กับ Movie Clip เราซะหน่อย( ในภาพจุดที่ 1 )
- คลิกที่ + แล้วเลือก Filter : Drop Shadow ( ในภาพจุดที่ 2 )
- จากนั้นกำหนด Properties ตามภาพ ( ในภาพจุดที่ 3 )
*** แท๊บคำสั่ง Filters รู้สึกว่าจะมีใน Flash8 ขึ้นไปนะครับถ้าจำไม่ผิด MX,MX2004 จะไม่มี

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

6.เมื่อกำหนด Filters เป็นที่เรียบร้อยแล้วมาถึงขั้นตอนสำคัญที่จะทำให้งานของเราเด้งได้ (^^)
- เปิดหน้าต่าง Action ขึ้นมาโดยไปที่เมนู Window > Actions หรือกด F9
- คลิกเลือกที่ Frame1 ( ในภาพจุดที่ 1 )
***เน้นว่าต้องคลิกที่ Frame1 ก่อนนะครับ ถ้าคลิกเลือกแล้วที่หน้าต่าง Action จะขึ้นเป็น
Action - Frame ( ในภาพจุดที่ 2 ) เป็นอันว่าถูกต้องเพราะเราจะเขียน Action Script กันที่ Frame
- ใส่ Action Script ลงไปดังนี้ครับ ( ในภาพจุดที่ 3 )( copy ไปวางเลยไม่ต้องเกรงใจ )

// Jelly
// Code By Xenogenesis
// http://xenstudio.wordpress.com

var mcWidth = _root.mc1._width;
var mcHeight = _root.mc1._height;
var mcRotation = _root.mc1._rotation;
this.stop();
import mx.transitions.*;
import mx.transitions.easing.*;

mcr = new Tween(mc1, "_rotation", mx.transitions.easing.Elastic.easeOut, mcRotation - 10, mcRotation + 10, 5.5, true);

mcr.onMotionFinished = function()
{
mcr.yoyo();
};

mc1.onRollOver = function()
{
mcw = new Tween(mc1, "_width", mx.transitions.easing.Elastic.easeOut, mcWidth, mcWidth + 20, 3, true);
mch = new Tween(mc1, "_height", mx.transitions.easing.Elastic.easeOut, mcHeight, mcHeight + 20, 2, true);
};

mc1.onRollOut = function()
{
mcw = new Tween(mc1, "_width", mx.transitions.easing.Elastic.easeOut, mc1._width, mcWidth, 3, true);
mch = new Tween(mc1, "_height", mx.transitions.easing.Elastic.easeOut, mc1._height, mcHeight, 2, true);
};

ถ้าต้องการให้งานของเราสามารถคลิกแล้วลิ้งไปที่ต่าง ๆ ได้ด้วยก็ใส่ Script นี้เพิ่มไปด้วยเลยครับ

mc1.onRelease = function() {
getURL("ลิ้งที่เราต้องการ", _blank);
};

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

7.เมื่อใส่ Action Script เป็นที่เรียบร้อยแล้วให้เราเทส Movie ดูได้เลยครับโดยไปที่เมนู
Control > Test Movie หรือกด Ctrl + Enter
และก็ทดลองดูผลกรรมที่เราได้สร้างไว้ดู เสร็จแล้ว…

ไอ้งานนี้เคยทำเอาไว้นานแล้วแล้วก็เขียนบทความไปทีที่ www.nsitez.net แต่ไม่ได้ละเอียดเท่าไรก็เลยเอามาหากินใหม่ที่นี้ ตัวผมเองก็ไม่ได้ชำนาญ Action Script มากได้แค่คำสั่งพื้น ๆ ส่วนมากก็จะเปิด Help ที่ติดมากับ Flash8 แล้วก็ลองมามั่ว ๆ ผสมกันดู ( ลองเปิดดูสิแล้วจะรู้ว่า Help ช่วยคุณได้ เอิ๊กๆ ) ยังไงก็ลองทำกันดูนะครับไม่ยากเลยใช่ม้า ( ไม่ยากทั้งปี )

ไม่ลืมสำหรับไฟล์ต้นแบบตัวอย่างสำหรับบทความนี้
( สำหรับ Flash8 ขึ้นไปนะครับ MX,MX2004 รู้สึกจะเปิดไม่ได้ ลองดูแล้วกัน)

Download .FLA Source file : Flash Jelly Tutorial

1.สร้างงานขึ้นมา 1 ชิ้น WIdth : 200/Height : 200/Back Ground : White

2.ใช้เครื่องมือ Ellipse Tool ( U ) เลือกเป็นแบบ Shape แล้ววาดวงกลมลงไปในพื้นที่งานของเรา

3.ตั้งชื่อเลเยอร์ว่า Orb จากนั้นคลิกขวาที่เลเยอร์ Orb แล้วเลือก Blending Options…

กำหนด Styles ต่าง ๆ ดังนี้

4.ติ๊กที่แท๊บ Stoke แล้วปรับค่าตามภาพ

5.ติ๊กที่ Gradient Overlay แล้วปรับค่าตามภาพจากนั้นกดที่ Gradient เพื่อทำการไล่สี

6.ที่ Gradient Editor กำหนด Color ตามภาพครับ

7.ติ๊กที่แท๊บ Inner Glow แล้วปรับตามภาพ

8.ติ๊กที่แท๊บ Outer Glow แล้วปรับตามภาพอีกเช่นเคย

9.ติ๊กที่แท๊บ Inner Shadow กำหนดค่าต่าง ๆ ตามภาพเหมือนเคย

10.ติ๊กที่แท๊บ Drop Shadow แล้วปรับค่าต่าง ๆ ตามภาพ จากนั้นกด OK ได้เลยครับ

11.ตอนนี้ผลงานจะออกมาประมาณนี้ครับ

12.ใช้เครื่องมือ Ellipse Tool (U) เลือกเป็นแบบ Shape แล้ววาดลงไปในพื้นที่งาน
วาดให้มีขนาดเล็กกว่าตัวเลเยอร์ Orb อยู่นิดหน่อย ดังรูป

13.ตั้งชื่อเลเยอร์ที่วาดเมื่อกี้ว่า Shade ( กันงง )

14.ใช้เครื่องมือ Ellipse Tools วาดลงกลมเพิ่มไปในเลเยอร์ Shade โดยการกดปุ่ม Shift ค้าง
( จะมีเครื่องหมายลูกศรเล็ก ๆ โผล่มาด้วย เมื่อวาดไปแล้วจะเห็นว่า Shape สองอันนี้ทับกันอยู่ในเลเยอร์ Shade )

15.เลือกไปที่เครื่องมือ Path Selection Tool (A)

16.ใช้เครื่องมือ Path Selection Tool (A) คลิกเลือกวงกลมแรกที่เราวาดไว้
( ตามภาพประกอบครับ )

17.มองขึ้นไปด้านจากนั้นกดไปตามรูปเลยครับ ปุ่ม ( Intersect Shape Areas )
 
**** ขั้นตอนที่ 16 ถ้าคลิกวงกลมใหญ่และเลือก ( Intersect Shape Areas ) แล้วผลที่ได้ไม่เป็นอย่างภาพด้านล่างให้ลองคลิกวงกลมเล็กที่วาดขึ้นมาใหม่แทนดูครับ
**** ส่วนขั้นตอนที่ 17 อาจจะไม่จำเป็นคลิกเลือกที่ปุ่ม ( Intersect Shape Areas ) ก็ได้ครับ ลองเลือกปุ่มอื่นที่อยู่ใกล้ ๆ กันก็ได้ ขอให้ได้ผลลัพธ์ออกมาเป็นดังภาพด้านล่างเป็นโอเค
ขอบคุณ น้องแมว สุดสวย ด้วยครับ

18.ผลที่ได้

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

20.ติ๊กที่แท๊บ Gradient Overlay แล้วประค่าตามสะบายเลยครับ( แท๊บนี้ขายดีใช้บ่อยวุ้ย )

21.ที่ Gradient Editor กำหนด Color และ Opcity ตามรูปเลยครับ
 
**** เพิ่มเติมครับ ****
หลังจากปรับ Gradient Editor เรียบร้อยแล้ว
ให้ติ๊กเลือกที่แท๊บ Blending Options : Custom และปรับ Fill Opacity เป็น 0% ด้วยครับ ตามรูปเลย

ขอบคุณ น้องแมว สุดขี้เหร่(ต้อง สวยสิ)  มา ณ. ที่นี้เป็นอย่างสูง

22.ได้ออกมาเป็นรูปร่างแล้ว

++ ต่อไปเป็นการนำรูปภาพ หรือรูปโลโก้ที่ต้องการ มาใช้งาน ++

23.วาดรูปที่ต้องการลงไปในพื้นที่งาน ให้อยู่ระหว่างเลเยอร์ Orb และ Shade ( ตามภาพ )
( ในที่นี้ผมใช้เครื่องมือ Custom Shape Tool (U) ในการวาดนะครับ )
แล้วตั้งชื่อว่า Logo ( กันหลงกันลืม )

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

25.ติ๊กที่แท๊บ Stoke แล้วปรับค่าตามรูปเลยครับ

26.ติ๊กที่แท๊บ Drop Shadow แล้วปรับค่าตามรูปเลยครับ จากนั้นกด OK ได้เลย

27.เสร็จเรียบร้อย

++ ขั้นตอนในการเปลี่ยนสีให้กับชิ้นงาน ++

1.คลิกปิดตาที่เลเยอร์ 1 ออกก่อน แล้วคลิกเลือกที่เลเยอร์ Shade จากนั้นกดปุ่ม Ctrl + Shift + E
เพื่อทำการรวมเลเยอร์ที่มีการเปิดตาอยู่ทั้งหมด

2.เห็นมั๊ยว่ารวมเฉพาะเลเยอร์ที่เปิดตาอยู่จริง ๆ ไม่ได้โม้

3.จากนั้นไปที่เมนู Images > Adjustments > Hue/Satulation หรือกดคีย์ลัด Ctrl + U
เพื่อเรียกหน้าต่าง Hue/Saturation ขึ้นมา
ให้ปรับในส่วนของ Hue ตามที่เราต้องการครับ ( ซ้าย ๆ ขวา ๆ ลองปรับดู ๆ )
สีของชิ้นงานเราจะเปลี่ยนไป

4.สีเปลี่ยนไปแล้ว ตอนนี้เปิดตาที่เราปิดไว้ได้แล้วครับ

กว่าจะงมปรับ Styles ออกมาเป็นแบบนี้ก็เล่นเอานานอยู่เหมือนกัน ตาลาย
งานดูง่าย ๆ แต่ทำไมขั้นตอนเยอะจัง( ฟร่ะ ) อาจจะไม่เหมือนแก้วใส ๆ มากเท่าไรแต่ก็พอใช้ได้เนอะ ( หรือว่าใช้ไม่ได้เลย ) เอาหล่ะในส่วนของรูปแบบอื่น ๆ ที่ให้ดูข้างต้นก็ใช้วิธีการเดียวกันอย่างนี้แหละครับ จะรูปดาว( ความชอบส่วนตัวกับโลโก้ครับ วงโปรด ๆ ) หรือรูปอะไรก็แล้วแต่ใช้วิธีการขั้นตอนเดียวกันหมดเปลี่ยนแค่ตัวพื้น Orb กับตอนไล่เฉดเงาสะท้อนแค่นั้นเอง ในส่วนของตอนปรับ Style ก็ดัดแปลงได้อีกหลายแบบครับไม่แน่นอนและตายตัว ลองติ๊ก ๆ เรียก Style อื่น ๆ เข้ามาทำดูด้วยก็ได้ อาจจะได้งานแปลก ๆ ออกมา งานส่วนใหญ่ผมจะเน้นใช้เป็น Shape แทนที่จะทำแบบ Bitmap นะครับเพราะเวลาย่อหรือขยายงาน ภาพจะได้ไม่แตกและจะได้คงความคมชัดของงานเอาไว้ได้ 100% เต็ม ^^

Tutorial By : Xenogenesis

ปล. ผมอัพโหลดรูปและบทความโดยผ่านทางคลื่นโทรศัพท์ และด้วยความเร็วที่มองแทบไม่ทันนี้เอง ขณะที่กำลังรอ Publish บทความนี้อยู่ผ่านไป 10 นาที ไฟที่บ้านดันตกซะอย่างงั้น น้ำตาแทบไหลตูต้องรออัพโหลดใหม่อีกเหร่อเนี่ย โอ้วม่าย…. :(

และก็ไม่ลืมสำหรับไฟล์ตัวอย่าง ในนั้นผมใส่ Filter Style ที่ใช้ในงานชิ้นนี้ไว้ให้ด้วยนะครับ
Load เรียกใช้จากหน้า Style ได้เลย

Download .PSD Source file : Glass Orb Tutorial

พร้อมรึยัง ?? ถ้ายังไม่พร้อมก็ ลุย ( - - )

1.สร้างงานขึ้นมาใหม่ 1 ชิ้น
Width : 300 ( ตามต้องการ )
Height : 200 ( ตามต้องการ )
Background Contents : White ตามรูป

2.พื้นที่ทำงานของเราจะประมาณนี้ครับ

3.ใช้เครื่องมือ Horizontal Type Tool (T) ( พิมพ์ข้อความนั้นเอง )

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

5.ตั้งชื่อเลเยอร์นี้ใหม่ว่า Reflection จากนั้นคลิกขวาแล้วเลือกคำสั่ง Duplicate Layer…

6.ตั้งชื่อเลเยอร์ที่จะ Duplicate ใหม่ ว่า Base ดังรูปครับ

7.จะได้สองเลเยอร์ Base และ Reflection ตามลำดับ ดังภาพ
จากนั้นคลิกเลือกที่เลเยอร์ Reflection

8.ไปที่เมนู Edit > Tranform > Flip Vertical
( เพื่อกลับด้านในแนวตั้งให้กับเลเยอร์ Reflection ของเรา )

9.เมื่อเสร็จเรียบร้อยจะเห็นว่าเลเยอร์ Reflection จะถูกพลิกให้กลับหัวอย่างนี้แหละ
( แต่มันทับกันอยุ่ มองลำบากนิด)

10.เราจะมาจัดทำแหน่งของเลเยอร์ Reflection ให้เข้าที่เข้าทาง
โดยการใช้เครื่องมือ Move Tool (V)

ติ๊กที่สองอันนี้ด้วย Auto Select Layer / Show Tranform Controls
จะได้มองเห็นเส้นขอบของพื้นที่งานที่ถูกเลือก

11.ทำการย้ายข้อความในเลเยอร์ Reflection ให้ขอบด้านบนของเลเยอร์ Reflecttion ชนกับขอบล่างของเลเยอร์ Base ( ดูรูปประกอบจะเข้าใจได้ง่ายกว่า หรือว่าคนสอนอธิบายงงเอง -*- ) ประมาณนี้ ๆ

12.จากนั้นคลิกขวาที่เลเยอร์ Blending Options…

13.ติ๊กเลือกที่แท๊บ Gradient Overlay กำหนดตามภาพเลยครับ และคลิกที่ Gradient เพื่อกำหนดการไล่เฉดสี
*** ส่วนของ Angle และ Scale อาจจะปรับเปลี่ยนได้ตามความเหมาะในการใช้งาน
หลังจากที่กำหนด Gradient แล้ว

14.กำหนด Color เป็น #FFFFFF ตามภาพครับ ส่วน Opacity ด้านขวาปรับเหลือประมาณ 65% ( 45% - 65% ขึ้นอยู่กับการใช้งานครับ ไม่ตายตัว ) แล้วก็ OK/OK ได้เลย

15.เสร็จแล้วผลงานที่ได้ ทำโคตรง่ายเลยใช่ม๊า…

กรณีที่พื้นหลังเป็นสีดำหรือสีอื่น ๆ ล่ะ??

ในกรณีที่สีพื้นหลังของเราเป็นสีอื่นนอกจากนี้ก็ทำได้ไม่ยากครับ
ในขั้นตอนที่ (14.) ให้ปรับตรง Color เป็นสีตามพื้นหลังที่เราต้องการครับ ในที่นี้คือสีดำก็ตามภาพเลยส่วน Opacity เป็นสัก 45% ก็ได้บอกแล้วว่าไม่ตายตัวขึ้นอยู่กับการใช้งานของเราและผลลัพธ์ที่ออกมา

ผลที่ได้

ประยุกต์ใช้กับรูปภาพก็ได้แค่เปลี่ยนจากข้อความมาเป็นรูปภาพที่ต้องการ
หลักการง่าย ๆ คือ
1.Flip ภาพหรือข้อความในแนวตั้ง
2.ปรับและขยับตำแหน่ง ( โยกย้าย ๆ )
3.ไล่เฉดสี ( ง่ายม่ะ )

วิธีนี้ค่อนข้างเหมาะกับงานที่เป็นลักษณะ 1 มิติ และ 2 มิติ เพราะการทำสะท้อนของเงาจะง่ายมาก แต่ถ้างานที่มีความลึกสูงแบบ 3 มิติ จะต้องมีขั้นตอนอยู่อีกมากเพราะมันจะแค่ Flip แล้วไล่สี คงจะไม่เหมือนแน่ ๆ รายละเอียดเยอะกว่าว่าอย่างนั้น ( อันนี้ฝีมือยังไม่ถึงขอผ่านไปก่อน :P ) ส่วนงานจะ Reflection ออกมาเหมือนไม่เหมือนก็อยู่ที่เราจะปรับในส่วนของ Gradient แล้วล่ะครับ อาจจะขึ้นอยู่กับตัวข้อความหรือรูปภาพเองด้วย ที่เหลือก็อยู่ที่จะเอาไปใช้แล้วล่ะครับ จะพลิกแพลงตะแคงยังไงก็ต้องลองดู เผื่อจะได้งานที่บรรเจิดแบบที่ไม่เหมือนชาวบ้านชาวช่องเค้า ฮ่า ๆ ( หากินง่ายวุ้ย วันนี้ )

( ปวดหัวกับเรื่อง Category/tag วุ้ย รู้สึกมันตีกันมั่ว ๆ ยังไงไม่รู้ หรือคนใช้โง่เอง -*- )
ตามธรรมเนียมไฟล์งานตัวอย่าง ไม่มีกักกันอยู่แล้น

Download .PSD Source file : Reflection Glass Tutorial

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 ก็อาจจะต้องมีการเปลี่ยนแปลงไปด้วยตามความเหมาะสมครับ ทำเสร็จกันแล้วเป็นยังไงเอามาอวดกันบ้างก็ได้นะ เอิ๊ก ๆ :lol: แล้วจะพยายามหาวีธีทำงานอื่น ๆ มาลงให้อีกนะ ( ถ้ามีเวลา )

Download .PSD Source file : Glass Bar TUT by Xenogenesis