Skip to content

Glass Orb "ปุ่มแก้วใส ๆ" (Re-Publish)

ตุลาคม 25, 2007

งานปุ่มแก้วใส ๆ ที่เราจะทำกัน

Glass Orb2Glass Orb01Glass Orb3Glass Orb4

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

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

Capture_1

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

Capture_2

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

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

Capture_3

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

Capture_4

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

Capture_5

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

Capture_6

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

Capture_7

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

Capture_8

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

Capture_9

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

Capture_10

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

Capture_11

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

Capture_12

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

Capture_13

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

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

Capture_14

17.มองขึ้นไปด้านจากนั้นกดไปตามรูปเลยครับ ปุ่ม ( Intersect Shape Areas )

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

18.ผลที่ได้

Capture_16

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

Capture_17

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

Capture_18

21.ที่ Gradient Editor กำหนด Color และ Opcity ตามรูปเลยครับ

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


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

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

Capture_20

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

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

Capture_21

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

Capture_22

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

Capture_23

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

Capture_24

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

Capture_25

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

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

Capture_26

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

Capture_27

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

Capture_28

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

Capture_29

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

Tutorial By : Xenogenesis

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

Download .PSD Source file : [ LINK 1 ]

From → Photoshop, Tutorial

31 ความเห็น
  1. โหย ชอบอ่ะ ขอดองไว้ ค่อยทำหลังสอบ
    ส่งการบ้านอาจารย์ :D

  2. พิมพ์ผิดบานเลย :( ตอนพิมพ์กำลังง่วงนอนเลยอ่ะ

  3. ทำสวยดีครับ

    bookmark ไว้เลย เดี๋ยวหัดทำมั่ง

  4. ขอบคุณครับสำหรับคำชม และที่มาแวะชมด้วย ^^ :D

  5. โอ ทำไมเราทำตามขั้นตอนที่ 17 แล้ว มันไม่เป็นจะเป็นแบบโอเลย
    มันยังมึดตื๋อ สีดำ อยู่เลย เราทำไรผิดป่าวหว่า

  6. โอ ทำไมเราทำตามขั้นตอนที่ 17 แล้ว มันไม่เป็นจะเป็นแบบโอเลย
    มันยังมึดตื๋อ สีดำ อยู่เลย เราทำไรผิดป่าวหว่า

    1.ขั้นตอนที่ (14.) แน่ใจว่าวาด Shape โดยการกด shift ค้างไว้ก่อนวาดมันจะมีเครื่องหมาย + ปรากฎอยู่ใกล้ ๆ กับเคอร์เซอร์วาด Shape ด้วยอ่านะ มันเป็นการวาด Shape เพิ่มลงไปใน Layer เดิม ( จะไม่มีเยอร์ใหม่โผล่ขึ้นมา ถ้ามีเลเยอร์โผล่ขึ้นมาใหม่แสดงว่าผิด สรุปก็คือให้วาดแบบเพิ่มลงไปใน layer เดิมนั้นเอง)
    2.ขั้นตอนที่ (17.) ลองเลือกคำสั่งอื่นดูก็ได้ไม่จำเป็นต้อง Intersect Shape Areas อย่างเดียว ลอง ๆ กดดูมันมีอยู่แค่ 4 ปุ่มใกล้ ๆ กันนั้นแหละ

    ลองดู ๆ :D

  7. ลองทำแล้ว แต่มันก็ทำไม่ได้แหะ
    ทำจนโฟโต้ชอปมันงอนเราไปแล้ว

    พรุ่งนี้ค่อยมั่วใหม่ -*-
    เซงโฟโต้ชอปตัวเองจริงๆ

  8. คนสอนไม่หล่อ คนทำตามเลยเข้าใจยาก

  9. คนสอนไม่หล่อ คนทำตามเลยเข้าใจยาก

    ไม่เกี่ยวกันซะหน่อย – -

  10. ยังกะมะเนหล่องั้นแหละ -*-

  11. ในที่สุด เราก็ทำได้แว้วววววววววววววววววววววววววว

  12. ในที่สุด เราก็ทำได้แว้วววววววววววววววววววววววววว

    ดีใจด้วยอย่างแรง ไอ้คุณนุช เย้ ๆๆ

  13. โอ เราทำจาก CS2 นะ แล้วก็ออกความเห็นดังนี้
    ข้อ 16 โอให้จิ้มที่วงกลมใหญ่ แต่เราทำไม่ได้ เลยไปจิ้มวงกลมเล็ก ถึงใช้ได้
    ข้อ 21 หลังจากใส่ gradient โอลืมขั้นตอนตั้ง fill เป็น 0% ใครที่ทำไม่คล่องจะไม่นึกถึงจุดนี้เลยนะ เพิ่มเติมด้วยคุณพี่

  14. โอ เราทำจาก CS2 นะ แล้วก็ออกความเห็นดังนี้
    ข้อ 16 โอให้จิ้มที่วงกลมใหญ่ แต่เราทำไม่ได้ เลยไปจิ้มวงกลมเล็ก ถึงใช้ได้
    ข้อ 21 หลังจากใส่ gradient โอลืมขั้นตอนตั้ง fill เป็น 0% ใครที่ทำไม่คล่องจะไม่นึกถึงจุดนี้เลยนะ เพิ่มเติมด้วยคุณพี่

    ขอบคุณมากครับนุช จะรีบแก้ไขให้นะ ( ข้อน้อยพลาดไปแว้ว )

  15. Miixel2 permalink

    สุดยอดมากเลยครับ เอาผลงานมาฝากเยอะๆนะครับ ผมจะมาขอดูดความรู้อิอิ

  16. Tree permalink

    คือว่าทำใน Adobe Photoshop รึป่าวอ่ะคับ ถ้าทำได้เจ้า Ellipse Tool ( U ) มันอยู่ตรงไหนอ่ะ คับหาไม่เจอ พอดีมือใหม่กำลังแกะ อ่าค้าบ ขอบคุณค้าบ

  17. คือว่าทำใน Adobe Photoshop รึป่าวอ่ะคับ ถ้าทำได้เจ้า Ellipse Tool ( U ) มันอยู่ตรงไหนอ่ะ คับหาไม่เจอ พอดีมือใหม่กำลังแกะ อ่าค้าบ ขอบคุณค้าบ

    เครื่องมือ Rounded Rectangle Tool (U)หรือ Ellipse Tool ( U )ที่ถามถึงมันอยู่ที่แถบเครื่องมือ ฝั่งขวาแถวที่ 9 ( ใต้เครื่องมือ Text Tool ที่ใช้พิมพ์ข้อความนะครับ )

    ดูตามภาพนี้ครับ [LINK]

  18. Tree permalink

    ขอบคุณค้าบ พี่สอนผมทำตัวอักษรแบบในสเปซพี่มั่งสิ มันอาร์ตมากๆเลยคับ อยากทำเป็นอ่าคับ
    ไอ้ตัวที่มันเป็นภาษาอังกฤษ แล้ว มีสี่เหลี่ยมครอบตัวอักษรอ่าคับ มันอาร์ตมากๆเลย อ่ะคับ
    รบกวนด้วยน่ะคับ ^ ^

  19. Tree permalink

    โฟโตเชอฟผมเป็นไรไม่รู้คับ พอจะทำงานใหม่ ตรงแถบเลเยอร์ มันล๊อคไว้ที่หน้าแบลคกลาวอะคับ
    พอผมลองทำปุ่มแก้ว พอเลือกEllipse Tool แล้วลองวาดวงกลม ตรงแถบเลเยอร์ก็ไม่ขึ้นอะไร ขึ้นว่าแบลคกลาว เหมือนยังไม่ได้วาดอ่าคับ ของคำสั่งที่ผมวาดไปมันไปอยู่ใน Paths ขึ้นว่า Work Path จะลงสีอะไร มันก็ไปทับแบลคกลาวหมดอะครับ ไม่รู้เป็นไร แต่ รบกวนพี่ช่วยดูให้ทีนะคับ ขอบคุณครับ

  20. ขอบคุณค้าบ พี่สอนผมทำตัวอักษรแบบในสเปซพี่มั่งสิ มันอาร์ตมากๆเลยคับ อยากทำเป็นอ่าคับ
    ไอ้ตัวที่มันเป็นภาษาอังกฤษ แล้ว มีสี่เหลี่ยมครอบตัวอักษรอ่าคับ มันอาร์ตมากๆเลย อ่ะคับ
    รบกวนด้วยน่ะคับ ^ ^

    ใช้ Font เอาครับโดยส่วนตัวไม่มีปัญญาทำอย่างนั้นเหมือนกัน ( ฮา.. )

    โฟโตเชอฟผมเป็นไรไม่รู้คับ พอจะทำงานใหม่ ตรงแถบเลเยอร์ มันล๊อคไว้ที่หน้าแบลคกลาวอะคับ
    พอผมลองทำปุ่มแก้ว พอเลือกEllipse Tool แล้วลองวาดวงกลม ตรงแถบเลเยอร์ก็ไม่ขึ้นอะไร ขึ้นว่าแบลคกลาว เหมือนยังไม่ได้วาดอ่าคับ ของคำสั่งที่ผมวาดไปมันไปอยู่ใน Paths ขึ้นว่า Work Path จะลงสีอะไร มันก็ไปทับแบลคกลาวหมดอะครับ ไม่รู้เป็นไร แต่ รบกวนพี่ช่วยดูให้ทีนะคับ ขอบคุณครับ

    สร้าง Layer ใหม่ขึ้นมาเลยครับส่วน Backgroud มันจะ Lock ไว้เป็นเรื่องปกติ

  21. Tree permalink

    มีLinkโหลดมั้ยคับ หาไม่เจอสักทีฟ้อนต์แบบนี้ หายากจังคับ – -*

  22. มีLinkโหลดมั้ยคับ หาไม่เจอสักทีฟ้อนต์แบบนี้ หายากจังคับ – -*

    รู้สึกว่าฟ้อนต์นี้จะชื่อว่า Alias จำไม่ได้แล้วว่าไปเก็บโหลดมาจากไหน -*-
    ถ้าหาโหลดไม่เจอก็โหลดจากลิ้งค์นี้ดูครับ [ LINK ] :D

  23. first permalink

    ขอบคุณม๊ากกกเลยค่า ^^ ทำให้มีความรู้เพิ่มขึ้นอีกเยอะเลย เย้ๆ

  24. ว๊าวววเจ๋งมากพี่ ออกมาแหร่มๆ :ฮา: :แฉ่ง:

  25. koy permalink

    สวยมากกกกกกกกกกกกก ค่ะ ขอบคุงมากมาย :ว๊าว: :ว๊าว:

  26. 13thGhost permalink

    ขอบคุณมากคับ :ว๊าว:

  27. Domonziezz permalink

    เทอสวยยยยย โวววว์ โฮววววว์ – -

  28. หาตั้งนานนะครับที่นี้ดีมากเลย จะเอาไปส่งงานพอดีเลยครับ

    ขอให้รักษาคุณภาพที่ดีของเว็บนี้ต่อไปนะครับ

    raamas.com

  29. เยี่ยมมากซารา :ว๊าว:

  30. แจ่มมากครับ

Trackbacks & Pingbacks

  1. Meaw Glass Orb | MeawDam

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Connecting to %s

Follow

Get every new post delivered to your Inbox.