Zone-IT.com

ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
Please Login!
หน้า: [1] 2
  พิมพ์  
ผู้เขียน หัวข้อ: วิธีทำ Avatar : รูปส่วนตัว แบบฉบับของ 9TANA ละเอียดทุกขั้นตอนมีรูป+คลิปให้ดู !!  (อ่าน 9246 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
TANA ตาสีฟ้อง
ออฟไลน์
ชาย
Posts 4912
Coolness 9695
Coolness 689
ubc05@hotmail.com tongubc@yahoo.com @9tana
ดูรายละเอียด เว็บไซต์
« เมื่อ: 3 เมษายน พ.ศ. 2551, 10.36 น. »



มีคนเรียกร้องมาเยอะครับ

ตัวอย่างผลงานที่จะทำ



งานนี้จริงๆแล้วถ้าจะให้อธิบายให้เข้าใจเลยถึงหลักการคงยาก อะครับ
ผมจึงยกตัวอย่างการทำผลงานของผมเลย  แล้วให้ท่านใดที่สนใจนั้น ไปพัฒนาดัดแปลง และต่อยอดเองครับ




โปรแกรมที่ผมใช้
  • Adobe Photoshop CS3
เริ่มกันเลยครับ

ไปที่เมนู File > New  แล้วสร้างแผ่นงานเปล่าขนาด 100x100 Px ครับ



สร้าง Layer เปล่าๆขึ้นมาใหม่อีก 1 Layer



กดปุ่ม Ctrl+A เพื่อสั่งให้เลือกทั้งหมด



ไปที่เมนู Select > Modify > Smooth  แล้วกดหนดค่าตามรูป



เสร็จแล้วจะได้ตามรูป



เลือกสี 2 สีที่ใกล้เคียงกัน เพื่อที่เราจะมาไล่เงา



จากนั้นเลือกเครื่องมือ Gradient ดังรูป



ลากสีลงไปให้ไล่ระดับเงา ตัวอย่างดังภาพ



คลิกขวาในเลเยอะที่เราเทสีลงไปในขั้นตอนที่แล้ว เลือก Blending Option แล้วเลือกที่ Stroke
จากนั้นก็กำหนดค่าเส้นขอบดังภาพ



จะได้ตามนี้



กดปุ่ม Ctrl แล้วไปคลิกที่ Layer 1 เพื่อให้โปรแกรมทำการ Select งานใน Layer 1



กดปุ่มนี้เพื่อสร้าง Layer ใหม่อีกอัน



จะได้ Layer ใหม่



กดปุ่ม Shift+F5 เพื่อที่จะเทสี สำหรับการทำเงาใสๆ ให้เลือกสีโทนเดียวกันอ่อน ดังภาพ  แล้วเทลงทับไป



จะได้แบบนี้



กดปุ่ม Ctrl+D แล้วเอาเครื่องหมายรูปตา ตรง Layer Background ออก



เลือกเครื่องมือดังภาพ



ใช้เครื่องมือนั้นลากรอยที่เราจะตัดทำเอ็คแเฟ็คแก้วใส



จากนั้นกดปุ่ม Delete จะได้ดังภาพ



ปรับค่า Opacity ของ layer นั้นให้น้อยๆลงให้ดูเหมาะสมตามสมควร



จะได้ดังภาพ



ต่อไปก็ให้สร้าง Layer ใหม่อีกอันเพื่อที่สำหรับมาเขียนตัวอักษรด้านในครับ (Layer ใหม่นี้ต้องอยู่ระหว่าง Layer 1 และั Layer 2 ดังภาพ)



จากนั้นใช้เครื่องมือนี้



สร้างตัวอักษรหรือข้อความต่างๆลงไปตามสะดวกครับ เมื่อพอใจแล้วจะได้ดังภาพ



เมื่อทุกอย่างลงตัวแล้ว ให้เลือกทุก Layer ครับ ยกเว้น Layer Background แล้วคลิกขวาเลือก Merge Layers
เพื่อทำการรวมทุก Layer เป็นอันเดียวกันครับ



จะได้ดังภาพ



ต่อมาให้สร้างไฟล์งานเปล่าๆใหม่ขนาด 300*300 ดังภาพครับ



ลาก Layer งานที่สร้างไว้มาใส่ในงานใหม่จะได้แบบนี้



ต่อไปเราจะมาใส่เงาให้งานครับ ให้คลิกขวาที่ Layer แล้วเลือก Blending Option แล้ววคลิก Drop Shadow
ตั้งค่าตามสมควรครับ



จะได้แบบนี้



เมื่อเรียบร้อยแล้ว ใหเลือกเครื่องมือ Crop สำหรับมาตัดแผ่นงานครับ



เลือกพื้นที่ที่จะครอบตัด ให้เลือกพื้นที่เราถึงเงาที่เราเพิ่มไปด้วยครับ ดังรูป




คลิกที่รูปตาตรง Layer Background ออก เป็นอันเสร็จครับ


ต่อมาทำการเซพครับให้ไปที่ File > Save For Web
แล้วเลือกนามสกึุลไฟล์เป็น .PNG ดังภาพครับ



เพียงเท่านี้ก็เป็นอันเสร็จแล้วครับ  Wink Wink

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





สำหรับท่านใดดูแล้วไม่เข้าใจผมก็มีคลิป VDO ในการทำผลงานชิ้นนี้ให้ด้วยครับ




โค๊ด:
http://upload.mthai.com/F0/47f45c4103a6d
Password = www.zone-it.com








ติดปัญหาตรงไหนถามได้นะครับ  13





ท่านใดที่ทำสำเร็จแล้วก็เอาผลงานมาโชว์ด้วยนะครับ










Coolfirmed คูลเฟิร์มโดย: birk12, supun, kirati14, Nutty Love Love
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 22.41 น. โดย TANA » บันทึกการเข้า


ผมลาพักร้อน จากเว็บโซนไอทีชั่วคราวไปเรียนต่อนะครับ
อาจจะไม่ได้เข้ามาเช็คข้อความ หรือตรวจดูต่างๆ เหมือนเคย 
ขออภัยด้วยครับ

ช่องติดต่อผมได้ดีที่สุดที่ Twitter : @9tana
zxtn Power User i'm ๑๒8๖๓
ออฟไลน์
ชาย
i'm lazy boy.
Posts 1026
Coolness 681
Coolness 357
sh2you@msn.com @zxtn
ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 3 เมษายน พ.ศ. 2551, 11.09 น. »

แจ๋วไปเลยครับผมพี่ตอง

แต่ตอนที่ใส่ Stroke นะครับผมแนะนำไปอีกแนวนึงก็คือ !!!

Outer Glow !!!




ด้านขอบออกมาจะเรืองแสงครับผม ...

« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 11.22 น. โดย thenwkZ » บันทึกการเข้า

เว็บบล๊อกเล็กๆของผม http://zxtn.net  29
และท่านสามารถเข้าได้หลายช่องทาง
http://zxtn.com
http://zxtn.org
http://zxtn.info
ออฟไลน์
ชาย
Posts 415
Coolness 248
Coolness 76
puttapon-tong@hotmail.com
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #2 เมื่อ: 3 เมษายน พ.ศ. 2551, 11.51 น. »

เจอปัญหาครับ

มันไม่ยอมให้เลือก smooth



ต้องไปเลือกที่ Layer ใหม่ที่สร้างก่อนครับ
ถ้าคลิกที่ Layer Background จะเลือกไม่ได้ครับ


คือผมคลิกที่  New layer แล้วอะครับ
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 11.53 น. โดย PuTtApOn » บันทึกการเข้า

คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

ถูกใจ-ชอบใจ-เห็นด้วย-ขอบคุณ ร่วมกันใช้ระบบ Coolfirm! นะครับ เพื่อสังคมของเรา
TANA ตาสีฟ้อง
ออฟไลน์
ชาย
Posts 4912
Coolness 9695
Coolness 689
ubc05@hotmail.com tongubc@yahoo.com @9tana
ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 3 เมษายน พ.ศ. 2551, 11.58 น. »

ลองแก้ปัญหาโดยการใช้เครื่องมือนี้



ใช้เมาส์ลากเป็นกรอบสี่เหลี่ยมแล้วลองเลือก Smooth ดูอีกทีครับ


บันทึกการเข้า


ผมลาพักร้อน จากเว็บโซนไอทีชั่วคราวไปเรียนต่อนะครับ
อาจจะไม่ได้เข้ามาเช็คข้อความ หรือตรวจดูต่างๆ เหมือนเคย 
ขออภัยด้วยครับ

ช่องติดต่อผมได้ดีที่สุดที่ Twitter : @9tana
ออฟไลน์
ชาย
Posts 415
Coolness 248
Coolness 76
puttapon-tong@hotmail.com
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #4 เมื่อ: 3 เมษายน พ.ศ. 2551, 12.00 น. »

ลองแก้ปัญหาโดยการใช้เครื่องมือนี้



ใช้เมาส์ลากเป็นกรอบสี่เหลี่ยมแล้วลองเลือก Smooth ดูอีกทีครับ




ไม่ได้ครับ ลองทำแล้ว ยังไงก็ขอบคุณนะครับ ผมก็จะลองใช้ Feather แทน

Feather ใช้แทนไม่ได้ครับ อิอิ มันทำให้เบลอๆ แต่ smooth มันทำให้แค่ มุมขอบสี่เหลี่ยมมัน มลๆ
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 12.11 น. โดย PuTtApOn » บันทึกการเข้า

คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

ถูกใจ-ชอบใจ-เห็นด้วย-ขอบคุณ ร่วมกันใช้ระบบ Coolfirm! นะครับ เพื่อสังคมของเรา
ออฟไลน์
ชาย
Posts 107
Coolness 153
Coolness 27
Blueeye_Ultimate@hotmail.com
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #5 เมื่อ: 3 เมษายน พ.ศ. 2551, 12.07 น. »

ช่วยครับ : ทำกล่องสีสวยๆกันหน่อย

1. Newมาก่อนครับ



2. สร้างกรอบมาตามรูป



3. ไปที่เมนู Select > Modify > Smooth  แล้วกดหนดค่าตามรูป



4. เลือกเครื่องมือตามภาพ



5. สีด้วยเรยตามภาพครับ



6. เลือกวิธีไล่สีตามภาพ



7. ลากไล่สีตามภาพรย (เริ่มจากบน จบที่ด้านล่าง)



8. ได้เระต่อเรย



9. เลือกสีฟ้าที่อ่อนกว่ามะกี้นี้นิด



10. ทำตามภาพเลย



11. ไล่สีตามภาพ (เริ่มจากบน จบที่ด้านล่าง)



12. ได้เร้ว



13. เลือกที่ Stroke



14. จากนั้นก็กำหนดค่าเส้นขอบดังภาพ



15. ได้ขอบอันสวยงาม



16. New layer มา



17. เทสีขาวลงไป



18. ปรับค่าตามภาพ



19. สร้างซีแลคตามภาพ



20. ลบออกเรย



21. คลุมที่ เลเยอ 1



22. กลบด้าน Selection โดยกด Ctrl+Shift+i
 


23. กดที่ เลเยอร์ 2



24. ลบออกเพื่อความเนีย



ได้แล้วครับ


Coolfirmed คูลเฟิร์มโดย: Taiki 3aR7H
บันทึกการเข้า

ออฟไลน์
✩JOseph™✩
Posts 213
Coolness 6
Coolness 1
ดูรายละเอียด อีเมล์
« ตอบ #6 เมื่อ: 3 เมษายน พ.ศ. 2551, 12.10 น. »

ทำได้แล้วครับ ขอบคุณมากๆ ยังไม่เนีนลล เลย


มาอีกอันแบบเนียลๆๆ

เพลินดีครับ



ปล. การเติมสี ผมกด Ctrl+F5 ไม่ติดอะครับ  ต้องกด Shift+F5 อะครับ
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 13.33 น. โดย พระสังทำถัง » บันทึกการเข้า
ออฟไลน์
ชาย
Posts 415
Coolness 248
Coolness 76
puttapon-tong@hotmail.com
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #7 เมื่อ: 3 เมษายน พ.ศ. 2551, 12.30 น. »




ขอบคุณครับ ไว้จะไปประยุกต์ใช้นะครับ
 11 11 11 11
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 16.28 น. โดย PuTtApOn » บันทึกการเข้า

คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

ถูกใจ-ชอบใจ-เห็นด้วย-ขอบคุณ ร่วมกันใช้ระบบ Coolfirm! นะครับ เพื่อสังคมของเรา
ออฟไลน์
Posts 351
Coolness 153
Coolness 12
ดูรายละเอียด
« ตอบ #8 เมื่อ: 3 เมษายน พ.ศ. 2551, 13.03 น. »



 ขอบคุณสำหรับความรู้ดี ๆ ครับ  11 11 11 11  30 30
บันทึกการเข้า
‮‭‮​‭ สมาชิก V.I.P def __init__(self):
ออฟไลน์
ชาย
class whs(ZoneIT.member):
Posts 484
Coolness 170
Coolness 22
manatsawin manatsawin_willwill
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #9 เมื่อ: 3 เมษายน พ.ศ. 2551, 16.26 น. »

<img src="http://uppicz.info/image/free-image-hosting-a9e1ba04489d96eeadd397b123bc73b0.png" />
ทำคล้ายๆกันครับ แต่ใช้โปรแกรม The GIMP แทน(เป็น Open Source !! )
บันทึกการเข้า

ทุกๆอย่างที่ผมเขียนลงในเว็บไซต์แห่งนี้เป็น AS-IS
สิ่งที่ควรทำเพื่อช่วยเหลือโซนไอที
ไม่ควรถามคำถามประเภท "อยากได้___หน่อยครับ" โดยไม่ได้บอกชื่อสิ่งนั้นๆโดยตรง(เช่น ขอรายชื่อโปรแกรม Open Source !! หน่อยครับ)เพราะว่าคุณสามารถค้นหาได้ง่ายดายใน google.com ครับ
(ที่ผมเห็นส่วนมากโดนดองเค็มเลยครับ)





ออฟไลน์
ชาย
Posts 415
Coolness 248
Coolness 76
puttapon-tong@hotmail.com
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #10 เมื่อ: 3 เมษายน พ.ศ. 2551, 20.50 น. »

<img src="http://uppicz.info/image/free-image-hosting-a9e1ba04489d96eeadd397b123bc73b0.png" />
ทำคล้ายๆกันครับ แต่ใช้โปรแกรม The GIMP แทน(เป็น Open Source !! )

ผมก็ใช้ครับ อิอิ
บันทึกการเข้า

คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

ถูกใจ-ชอบใจ-เห็นด้วย-ขอบคุณ ร่วมกันใช้ระบบ Coolfirm! นะครับ เพื่อสังคมของเรา
ออฟไลน์
Posts 10
Coolness 0
Coolness 0
ดูรายละเอียด
« ตอบ #11 เมื่อ: 3 เมษายน พ.ศ. 2551, 22.40 น. »



            ขั้นตอนนี้ ของผมต้องกด Shift+F5 นะครับถึงจะไดั
บันทึกการเข้า
Thousandlies B e [ l i e ] v E
ออฟไลน์
ชาย
ไ ม่ ดี เ ห มื อ น ใ ค ร
Posts 107
Coolness 3
Coolness 1
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #12 เมื่อ: 3 เมษายน พ.ศ. 2551, 22.42 น. »


ลองทำดูแล้ว

อิอิ

 Tongue
บันทึกการเข้า


TANA ตาสีฟ้อง
ออฟไลน์
ชาย
Posts 4912
Coolness 9695
Coolness 689
ubc05@hotmail.com tongubc@yahoo.com @9tana
ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 3 เมษายน พ.ศ. 2551, 22.42 น. »



            ขั้นตอนนี้ ของผมต้องกด Shift+F5 นะครับถึงจะไดั


โอ้วว ต้องขออภัยด้วยครับ จริงๆก็ Shift+F5 แหล่ะครับ
ผมพิพ์ผิดไป
บันทึกการเข้า


ผมลาพักร้อน จากเว็บโซนไอทีชั่วคราวไปเรียนต่อนะครับ
อาจจะไม่ได้เข้ามาเช็คข้อความ หรือตรวจดูต่างๆ เหมือนเคย 
ขออภัยด้วยครับ

ช่องติดต่อผมได้ดีที่สุดที่ Twitter : @9tana
‮‭‮​‭ สมาชิก V.I.P def __init__(self):
ออฟไลน์
ชาย
class whs(ZoneIT.member):
Posts 484
Coolness 170
Coolness 22
manatsawin manatsawin_willwill
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #14 เมื่อ: 3 เมษายน พ.ศ. 2551, 22.51 น. »

<img src="http://uppicz.info/image/free-image-hosting-a9e1ba04489d96eeadd397b123bc73b0.png" />
ทำคล้ายๆกันครับ แต่ใช้โปรแกรม The GIMP แทน(เป็น Open Source !! )
ลองทำอีกอันนึงครับ Smiley ใช้โปรแกรมเดิมแต่เปลี่ยนสี

(โปรดสังเกต กรอบมันจะเป็นเงาๆด้วยครับ)
บันทึกการเข้า

ทุกๆอย่างที่ผมเขียนลงในเว็บไซต์แห่งนี้เป็น AS-IS
สิ่งที่ควรทำเพื่อช่วยเหลือโซนไอที
ไม่ควรถามคำถามประเภท "อยากได้___หน่อยครับ" โดยไม่ได้บอกชื่อสิ่งนั้นๆโดยตรง(เช่น ขอรายชื่อโปรแกรม Open Source !! หน่อยครับ)เพราะว่าคุณสามารถค้นหาได้ง่ายดายใน google.com ครับ
(ที่ผมเห็นส่วนมากโดนดองเค็มเลยครับ)





ออฟไลน์
ชาย
Posts 79
Coolness 19
Coolness 1
ดูรายละเอียด อีเมล์
« ตอบ #15 เมื่อ: 3 เมษายน พ.ศ. 2551, 23.43 น. »

วานคุน TANA อีกทังับหรือคนอื่นก้อได้ช่วยทำให้เป็นเส้นๆเอียงไปทางซ้ายให้หน่อยลืมใส่อะ
บันทึกการเข้า

.:: บล็oกนี้หมายเลข 7::.

http://number7.exteen.com
TANA ตาสีฟ้อง
ออฟไลน์
ชาย
Posts 4912
Coolness 9695
Coolness 689
ubc05@hotmail.com tongubc@yahoo.com @9tana
ดูรายละเอียด เว็บไซต์
« ตอบ #16 เมื่อ: 4 เมษายน พ.ศ. 2551, 9.26 น. »

วานคุน TANA อีกทังับหรือคนอื่นก้อได้ช่วยทำให้เป็นเส้นๆเอียงไปทางซ้ายให้หน่อยลืมใส่อะ


 human human human

บันทึกการเข้า


ผมลาพักร้อน จากเว็บโซนไอทีชั่วคราวไปเรียนต่อนะครับ
อาจจะไม่ได้เข้ามาเช็คข้อความ หรือตรวจดูต่างๆ เหมือนเคย 
ขออภัยด้วยครับ

ช่องติดต่อผมได้ดีที่สุดที่ Twitter : @9tana
ออฟไลน์
Posts 24
Coolness 2
Coolness 0
ดูรายละเอียด
« ตอบ #17 เมื่อ: 4 เมษายน พ.ศ. 2551, 14.37 น. »

ขอบคุณมากครับ


Coolfirmed คูลเฟิร์มโดย: dieprince
บันทึกการเข้า
ออฟไลน์
Posts 3
Coolness 0
Coolness 0
ดูรายละเอียด
« ตอบ #18 เมื่อ: 4 เมษายน พ.ศ. 2551, 14.57 น. »

ใช้ CS2 ได้มั้ยหว่า

ยังไงจะไปลองดู แล้วจะเอามาโชว์ค่ะ ^________^
ขอบคุณจ้า
บันทึกการเข้า
ออฟไลน์
Posts 2
Coolness 13
Coolness 2
ดูรายละเอียด อีเมล์
« ตอบ #19 เมื่อ: 9 เมษายน พ.ศ. 2551, 16.47 น. »

ของผมครับ

บันทึกการเข้า
หน้า: [1] 2
  พิมพ์  
 
กระโดดไป:  

4



Powered by SMF 1.1.9 | SMF © 2006-2008, Simple Machines LLC | Thai language by ThaiSMF | Icons from Everaldo.com, famfamfam.com


© 2006 - 2009 Zone-IT.com - CC BY 3.0
คุณมีสิทธิที่จะทำซ้ำ แก้ไข จำหน่ายจ่ายแจก กับข้อความและรูปภาพทั้งหมดที่ปรากฎบนเว็บไซต์นี้ แต่ต้องอ้างอิงกลับมายังที่นี่


หน้านี้ถูกสร้างขึ้นภายในเวลา 0.262 วินาที กับ 51 คำสั่ง