Glass Orb "ปุ่มแก้วใส ๆ" (Re-Publish)
งานปุ่มแก้วใส ๆ ที่เราจะทำกัน




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
และก็ไม่ลืมสำหรับไฟล์ตัวอย่าง ในนั้นผมใส่ Filter Style ที่ใช้ในงานชิ้นนี้ไว้ให้ด้วยนะครับ
Load เรียกใช้จากหน้า Style ได้เลย
Download .PSD Source file : [ LINK 1 ]

โหย ชอบอ่ะ ขอดองไว้ ค่อยทำหลังสอบ
ส่งการบ้านอาจารย์
พิมพ์ผิดบานเลย
ตอนพิมพ์กำลังง่วงนอนเลยอ่ะ
ทำสวยดีครับ
bookmark ไว้เลย เดี๋ยวหัดทำมั่ง
ขอบคุณครับสำหรับคำชม และที่มาแวะชมด้วย ^^
โอ ทำไมเราทำตามขั้นตอนที่ 17 แล้ว มันไม่เป็นจะเป็นแบบโอเลย
มันยังมึดตื๋อ สีดำ อยู่เลย เราทำไรผิดป่าวหว่า
1.ขั้นตอนที่ (14.) แน่ใจว่าวาด Shape โดยการกด shift ค้างไว้ก่อนวาดมันจะมีเครื่องหมาย + ปรากฎอยู่ใกล้ ๆ กับเคอร์เซอร์วาด Shape ด้วยอ่านะ มันเป็นการวาด Shape เพิ่มลงไปใน Layer เดิม ( จะไม่มีเยอร์ใหม่โผล่ขึ้นมา ถ้ามีเลเยอร์โผล่ขึ้นมาใหม่แสดงว่าผิด สรุปก็คือให้วาดแบบเพิ่มลงไปใน layer เดิมนั้นเอง)
2.ขั้นตอนที่ (17.) ลองเลือกคำสั่งอื่นดูก็ได้ไม่จำเป็นต้อง Intersect Shape Areas อย่างเดียว ลอง ๆ กดดูมันมีอยู่แค่ 4 ปุ่มใกล้ ๆ กันนั้นแหละ
ลองดู ๆ
ลองทำแล้ว แต่มันก็ทำไม่ได้แหะ
ทำจนโฟโต้ชอปมันงอนเราไปแล้ว
พรุ่งนี้ค่อยมั่วใหม่ -*-
เซงโฟโต้ชอปตัวเองจริงๆ
คนสอนไม่หล่อ คนทำตามเลยเข้าใจยาก
ไม่เกี่ยวกันซะหน่อย – -
ยังกะมะเนหล่องั้นแหละ -*-
ในที่สุด เราก็ทำได้แว้วววววววววววววววววววววววววว
ดีใจด้วยอย่างแรง ไอ้คุณนุช เย้ ๆๆ
โอ เราทำจาก CS2 นะ แล้วก็ออกความเห็นดังนี้
ข้อ 16 โอให้จิ้มที่วงกลมใหญ่ แต่เราทำไม่ได้ เลยไปจิ้มวงกลมเล็ก ถึงใช้ได้
ข้อ 21 หลังจากใส่ gradient โอลืมขั้นตอนตั้ง fill เป็น 0% ใครที่ทำไม่คล่องจะไม่นึกถึงจุดนี้เลยนะ เพิ่มเติมด้วยคุณพี่
ขอบคุณมากครับนุช จะรีบแก้ไขให้นะ ( ข้อน้อยพลาดไปแว้ว )
สุดยอดมากเลยครับ เอาผลงานมาฝากเยอะๆนะครับ ผมจะมาขอดูดความรู้อิอิ
คือว่าทำใน Adobe Photoshop รึป่าวอ่ะคับ ถ้าทำได้เจ้า Ellipse Tool ( U ) มันอยู่ตรงไหนอ่ะ คับหาไม่เจอ พอดีมือใหม่กำลังแกะ อ่าค้าบ ขอบคุณค้าบ
เครื่องมือ Rounded Rectangle Tool (U)หรือ Ellipse Tool ( U )ที่ถามถึงมันอยู่ที่แถบเครื่องมือ ฝั่งขวาแถวที่ 9 ( ใต้เครื่องมือ Text Tool ที่ใช้พิมพ์ข้อความนะครับ )
ดูตามภาพนี้ครับ [LINK]
ขอบคุณค้าบ พี่สอนผมทำตัวอักษรแบบในสเปซพี่มั่งสิ มันอาร์ตมากๆเลยคับ อยากทำเป็นอ่าคับ
ไอ้ตัวที่มันเป็นภาษาอังกฤษ แล้ว มีสี่เหลี่ยมครอบตัวอักษรอ่าคับ มันอาร์ตมากๆเลย อ่ะคับ
รบกวนด้วยน่ะคับ ^ ^
โฟโตเชอฟผมเป็นไรไม่รู้คับ พอจะทำงานใหม่ ตรงแถบเลเยอร์ มันล๊อคไว้ที่หน้าแบลคกลาวอะคับ
พอผมลองทำปุ่มแก้ว พอเลือกEllipse Tool แล้วลองวาดวงกลม ตรงแถบเลเยอร์ก็ไม่ขึ้นอะไร ขึ้นว่าแบลคกลาว เหมือนยังไม่ได้วาดอ่าคับ ของคำสั่งที่ผมวาดไปมันไปอยู่ใน Paths ขึ้นว่า Work Path จะลงสีอะไร มันก็ไปทับแบลคกลาวหมดอะครับ ไม่รู้เป็นไร แต่ รบกวนพี่ช่วยดูให้ทีนะคับ ขอบคุณครับ
ใช้ Font เอาครับโดยส่วนตัวไม่มีปัญญาทำอย่างนั้นเหมือนกัน ( ฮา.. )
สร้าง Layer ใหม่ขึ้นมาเลยครับส่วน Backgroud มันจะ Lock ไว้เป็นเรื่องปกติ
มีLinkโหลดมั้ยคับ หาไม่เจอสักทีฟ้อนต์แบบนี้ หายากจังคับ – -*
รู้สึกว่าฟ้อนต์นี้จะชื่อว่า Alias จำไม่ได้แล้วว่าไปเก็บโหลดมาจากไหน -*-
ถ้าหาโหลดไม่เจอก็โหลดจากลิ้งค์นี้ดูครับ [ LINK ]
ขอบคุณม๊ากกกเลยค่า ^^ ทำให้มีความรู้เพิ่มขึ้นอีกเยอะเลย เย้ๆ
ว๊าวววเจ๋งมากพี่ ออกมาแหร่มๆ :ฮา: :แฉ่ง:
สวยมากกกกกกกกกกกกก ค่ะ ขอบคุงมากมาย :ว๊าว: :ว๊าว:
ขอบคุณมากคับ :ว๊าว:
เทอสวยยยยย โวววว์ โฮววววว์ – -
หาตั้งนานนะครับที่นี้ดีมากเลย จะเอาไปส่งงานพอดีเลยครับ
ขอให้รักษาคุณภาพที่ดีของเว็บนี้ต่อไปนะครับ
raamas.com
เยี่ยมมากซารา :ว๊าว:
แจ่มมากครับ