Zone-IT.com

ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
Please Login!
หน้า: [1] 2
  พิมพ์  
ผู้เขียน หัวข้อ: วิธีทำ Avatar : รูปส่วนตัว แบบฉบับของ 9TANA ละเอียดทุกขั้นตอนมีรูป+คลิปให้ดู !!  (อ่าน 15011 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
TANA กำนัน
ออฟไลน์
ชาย
Posts 5240
Coolness 25418
Coolness 1,646
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





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








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




zxtn Power User i'm ๑๒8๖๓
ออฟไลน์
ชาย
i'm lazy boy.
Posts 872
Coolness 1113
Coolness 575
thezxtn@live.jp @zxtn
ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 3 เมษายน พ.ศ. 2551, 11.09 น. »

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

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

Outer Glow !!!




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



Coolfirmed 2 คูลเฟิร์มโดย: Tae- Zone , Oๅยุจัง あゆちゃん
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 11.22 น. โดย thenwkZ » บันทึกการเข้า

....
PuTtApOn [เพราะอารมณ์เปลี่ยนแปลงบ่อย]
ออฟไลน์
ชาย
Posts 632
Coolness 1058
Coolness 481
puttapon-tong@hotmail.com @httptwittercomputtapon
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #2 เมื่อ: 3 เมษายน พ.ศ. 2551, 11.51 น. »

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

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



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


คือผมคลิกที่  New layer แล้วอะครับ


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 11.53 น. โดย PuTtApOn » บันทึกการเข้า

<a href=http://anonym.to?http%3A%2F%2Fwww.clocklink.com%2Fclocks%2F5012-orenge.swf%3FTimeZone%3DThailand_Bangkok%26amp%3BPlace%3D%26amp%3B target="_blank">http://www.clocklink.com/clocks/5012-orenge.swf?TimeZone=Thailand_Bangkok&amp;Place=&amp;</a>
คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

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

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



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




Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า




PuTtApOn [เพราะอารมณ์เปลี่ยนแปลงบ่อย]
ออฟไลน์
ชาย
Posts 632
Coolness 1058
Coolness 481
puttapon-tong@hotmail.com @httptwittercomputtapon
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #4 เมื่อ: 3 เมษายน พ.ศ. 2551, 12.00 น. »

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



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




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

Feather ใช้แทนไม่ได้ครับ อิอิ มันทำให้เบลอๆ แต่ smooth มันทำให้แค่ มุมขอบสี่เหลี่ยมมัน มลๆ


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 12.11 น. โดย PuTtApOn » บันทึกการเข้า

<a href=http://anonym.to?http%3A%2F%2Fwww.clocklink.com%2Fclocks%2F5012-orenge.swf%3FTimeZone%3DThailand_Bangkok%26amp%3BPlace%3D%26amp%3B target="_blank">http://www.clocklink.com/clocks/5012-orenge.swf?TimeZone=Thailand_Bangkok&amp;Place=&amp;</a>
คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

ถูกใจ-ชอบใจ-เห็นด้วย-ขอบคุณ ร่วมกันใช้ระบบ Coolfirm! นะครับ เพื่อสังคมของเรา
« ตอบ #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. ลบออกเพื่อความเนีย



ได้แล้วครับ
บันทึกการเข้า

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

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


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

เพลินดีครับ



ปล. การเติมสี ผมกด Ctrl+F5 ไม่ติดอะครับ  ต้องกด Shift+F5 อะครับ


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 13.33 น. โดย พระสังทำถัง » บันทึกการเข้า
PuTtApOn [เพราะอารมณ์เปลี่ยนแปลงบ่อย]
ออฟไลน์
ชาย
Posts 632
Coolness 1058
Coolness 481
puttapon-tong@hotmail.com @httptwittercomputtapon
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #7 เมื่อ: 3 เมษายน พ.ศ. 2551, 12.30 น. »




ขอบคุณครับ ไว้จะไปประยุกต์ใช้นะครับ
 11 11 11 11


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
« แก้ไขครั้งสุดท้าย: 3 เมษายน พ.ศ. 2551, 16.28 น. โดย PuTtApOn » บันทึกการเข้า

<a href=http://anonym.to?http%3A%2F%2Fwww.clocklink.com%2Fclocks%2F5012-orenge.swf%3FTimeZone%3DThailand_Bangkok%26amp%3BPlace%3D%26amp%3B target="_blank">http://www.clocklink.com/clocks/5012-orenge.swf?TimeZone=Thailand_Bangkok&amp;Place=&amp;</a>
คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

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



 ขอบคุณสำหรับความรู้ดี ๆ ครับ  11 11 11 11  30 30


Coolfirmed 2 คูลเฟิร์มโดย: Tae- Zone , OoNoNoO ✔
บันทึกการเข้า

willwill V.I.P member def __init__(self):
ออฟไลน์
ชาย
class whs(ZoneIT.member):
Posts 428
Coolness 324
Coolness 99
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
สิ่งที่ควรทำเพื่อช่วยเหลือโซนไอที
ใช้ปุ่ม Coolfirm! แทนการขอบคุณ จขกท





PuTtApOn [เพราะอารมณ์เปลี่ยนแปลงบ่อย]
ออฟไลน์
ชาย
Posts 632
Coolness 1058
Coolness 481
puttapon-tong@hotmail.com @httptwittercomputtapon
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #10 เมื่อ: 3 เมษายน พ.ศ. 2551, 20.50 น. »

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

ผมก็ใช้ครับ อิอิ


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า

<a href=http://anonym.to?http%3A%2F%2Fwww.clocklink.com%2Fclocks%2F5012-orenge.swf%3FTimeZone%3DThailand_Bangkok%26amp%3BPlace%3D%26amp%3B target="_blank">http://www.clocklink.com/clocks/5012-orenge.swf?TimeZone=Thailand_Bangkok&amp;Place=&amp;</a>
คลิกซิครับ !!! แล้วคุณจะรู้จักผมดีขึ้น>> http://tong29160.hi5.com

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



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


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า
Serpentes SNAKE LOVER
ออฟไลน์
ชาย
Posts 113
Coolness 178
Coolness 88
ดูรายละเอียด เว็บไซต์ อีเมล์
« ตอบ #12 เมื่อ: 3 เมษายน พ.ศ. 2551, 22.42 น. »


ลองทำดูแล้ว

อิอิ

 Tongue


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า

คนไทยกรุณาใช้ภาษาไทยให้ถูก

คลังภาพเล็กๆของผม จิ้มเบาๆ
TANA กำนัน
ออฟไลน์
ชาย
Posts 5240
Coolness 25418
Coolness 1,646
ubc05@hotmail.com tongubc@yahoo.com @9tana
ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 3 เมษายน พ.ศ. 2551, 22.42 น. »



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


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


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า




willwill V.I.P member def __init__(self):
ออฟไลน์
ชาย
class whs(ZoneIT.member):
Posts 428
Coolness 324
Coolness 99
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
สิ่งที่ควรทำเพื่อช่วยเหลือโซนไอที
ใช้ปุ่ม Coolfirm! แทนการขอบคุณ จขกท





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

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


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า

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

http://number7.exteen.com
TANA กำนัน
ออฟไลน์
ชาย
Posts 5240
Coolness 25418
Coolness 1,646
ubc05@hotmail.com tongubc@yahoo.com @9tana
ดูรายละเอียด เว็บไซต์
« ตอบ #16 เมื่อ: 4 เมษายน พ.ศ. 2551, 9.26 น. »

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


 human human human



Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า




ออฟไลน์
Posts 21
Coolness 11
Coolness 4
ดูรายละเอียด
« ตอบ #17 เมื่อ: 4 เมษายน พ.ศ. 2551, 14.37 น. »

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


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

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

ยังไงจะไปลองดู แล้วจะเอามาโชว์ค่ะ ^________^
ขอบคุณจ้า


Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า
ออฟไลน์
Posts 2
Coolness 65
Coolness 28
ดูรายละเอียด อีเมล์
« ตอบ #19 เมื่อ: 9 เมษายน พ.ศ. 2551, 16.47 น. »

ของผมครับ



Coolfirmed คูลเฟิร์มโดย: Tae- Zone
บันทึกการเข้า
หน้า: [1] 2
  พิมพ์  
 
กระโดดไป:  

3



Powered by SMF 1.1.11 | SMF © 2006-2008, Simple Machines LLC | Thai language by ThaiSMF | Icons from Everaldo.com, famfamfam.com | hosted by HostCZ.com,ฟรีเว็บบอร์ด
© 1 เมษายน พ.ศ. 2549 - 2553
คุณมีสิทธิที่จะทำซ้ำ แก้ไข จำหน่ายจ่ายแจก กับข้อความและรูปภาพทั้งหมดที่ปรากฎบนเว็บไซต์นี้ แต่ต้องอ้างอิงกลับมายังที่นี่
ติดต่อสอบถาม admin@zone-it.com
Zone-IT.com - CC BY 3.0


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