Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Illustrator ทำไอคอน ขอบเงิน Illustrator CS3 ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 6500|ตอบ: 4
go

[Illustrator ขั้นประยุกต์] ทำไอคอน ขอบเงิน Illustrator CS3

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 27-10-2011 00:32 |แสดงโพสต์ทั้งหมด
ทำไอคอน ขอบเงิน Illustrator CS3



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

ตอนนี้โพสภาพไว้ทิ้งก่อนค่ะ พอปรับปรุงให้สวยกว่าเดิมเสร็จ ก็จะเรียบเรียงเป็นบทความต่อไปค่ะ


ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 28-10-2011 19:43 |แสดงโพสต์ทั้งหมด
หลังจากสร้างไฟล์ใหม่แล้ว ให้เราสร้างเลเยอร์ขึ้นมา 3 เลเยอร์ และตั้งชื่อให้มันว่า ชั้นที่ 1, ชั้นที่ 2, และชั้นที่ 3


ชั้นที่ 1

เราจะมาเริ่มที่เลเยอร์ชั้นที่ 1 ก่อนค่ะ  คลิกที่เครื่องมือ Rectangle Tool (หรือกด M ) เพื่อสร้างวงกลมขึ้นมา 1 วง ขณะที่สร้างอย่าลืมกดปุ่ม Shift+Alt ค้างไว้ด้วย เพื่อให้วงกลมมีรัศมีทุกด้านเท่ากัน

หลังจากสร้างวงกลมแล้วให้เรา เปลี่ยนสีพื้นของมันให้เป็นแบบ Gradient ค่ะ รหัสสีเปลี่ยนแปลงได้ตามใจชอบ


จากนั้นก็ให้คลิกเลือกที่วงกลมอีกครั้ง กดปุ่ม Ctrl +C และตามด้วย Ctrl+F 1 ครั้ง เพื่อก๊อปปี๊วงกลมออกมาอีกวง ให้อยู่ในตำแหน่งซ้อนทับกับตำแหน่งเดิม

ต่อมาก็ให้ใส่กุญแจ Lock ภาพวงกลมอันล่างไว้

และใช้เครื่องมือ Pen Tool สร้างเส้นโค้งขึ้นมาทับวงกลม ดังภาพข้างล่างค่ะ ซึ่งเส้นโค้งตัวนี้ เราจะเอามาใช้ตัดวงกลมออก



ให้เราคลิกเลือก ทั้งภาพโค้งพื้นสีชมพู และภาพวงกลมข้างล่าง(ที่ก๊อปปี๊มา) จากนั้นก็ให้ไปที่คำสั่ง Window> Pathfinder มันจะเด้งหน้าต่างเล็กๆขึ้นมา ให้เราคลิกเลือกการตัดแบบทับซ้อน และกดปุ่ม Expand



หลังจากตัดภาพเสร็จแล้วก็ให้เรา คลิกที่พื้นสีชมพูที่เพิ่งตัดออก และใช้อุปการณ์ Eyedropper Tool (หรือกด I ) ทำการดูดสีจากวงกลมด้านล่างที่ถูกล๊อคไว้  


เมื่อดูดสีมาแล้ว ให้เรากดใช้อุปกรณ์ Gardient Tool (หรือกด G ) เพื่อไล่เฉดใหม่ให้สีเทาเข้มอยู่ด้านบนดังภาพ



ชั้นที่ 1 เสร็จแล้วค่ะ ให้เราใส่แม่กุญแจล๊อคมันไว้ซะ



ชั้นที่ 2
ในชั้นที่ 2 ให้เราคลิกที่เครื่องมือ Rectangle Tool (หรือกด M ) เพื่อสร้างวงกลมขึ้นมา 1 วง ให้มีขนาดเล็กกว่าวงกลมในเลเยอร์ชั้นที่ 1 (ขณะที่สร้างอย่าลืมกดปุ่ม Shift+Alt ค้างไว้ด้วย เพื่อให้วงกลมมีรัศมีทุกด้านเท่ากัน)

จากนั้นก็ให้เปลี่ยนสีพื้นวงกลมให้เป็นแบบ Gradient โดยใช้ สีขาว และ สีดำ




ขั้นตอนต่อไป เราจะทำคล้ายกับขั้นตอนที่ 1 ค่ะ....

ให้คลิกเลือกที่วงกลมที่เราเพิ่งสร้าง และกดปุ่ม Ctrl +C และตามด้วย Ctrl+F 1 ครั้ง เพื่อก๊อปปี๊วงกลมออกมาอีกวง ให้อยู่ในตำแหน่งซ้อนทับกับตำแหน่งเดิม

ต่อมาก็ให้ใส่กุญแจ Lock ภาพวงกลมอันล่างไว้

และใช้เครื่องมือ Pen Tool สร้างเส้นโค้งขึ้นมาทับวงกลม ดังภาพข้างล่างค่ะ ซึ่งเส้นโค้งตัวนี้ เราจะเอามาใช้ตัดวงกลมออก


ให้เราคลิกเลือก ทั้งภาพโค้งที่เพิ่งสร้าง และภาพวงกลมข้างล่าง(ที่ก๊อปปี๊มา) จากนั้นก็ให้ไปที่คำสั่ง Window> Pathfinder มันจะเด้งหน้าต่างเล็กๆขึ้นมา ให้เราคลิกเลือกการตัดแบบทับซ้อน และกดปุ่ม Expand



อันนี้ข้าพเจ้าปิดตาทั้งหมดไว้เพื่อให้มองเป็นภาพวงกลมหลังจากถูกตัดออกไปแล้วค่ะ

ให้เรากดใช้อุปกรณ์ Gardient Tool (หรือกด G ) เพื่อไล่เฉดใหม่ให้สีขาวด้านบนดังภาพ

เมื่อเปิดตาทั้งหมด ก็จะกลายเป็นดังนี้ค่ะ

คราวนี้ก็ให้เราทำการล๊อค เลเยอร์ชั้นที่ 2 ไว้  


ชั้นที่ 3
จะเป็นการทำซ้ำกับขั้นตอนของ ชั้นที่ 1 และ  2 ค่ะ

ให้เราคลิกที่เครื่องมือ Rectangle Tool (หรือกด M ) เพื่อสร้างวงกลมขึ้นมา 1 วง ให้มีขนาดเล็กกว่าวงกลมในเลเยอร์ชั้นที่ 1 และ 2 (ขณะที่สร้างอย่าลืมกดปุ่ม Shift+Alt ค้างไว้ด้วย เพื่อให้วงกลมมีรัศมีทุกด้านเท่ากัน)

จากนั้นก็ให้เปลี่ยนสีพื้นวงกลมให้เป็นแบบ Gradient โดยใช้ สีเขียวอ่อน และ สีเขียวเข้ม  (ตรงนี้จะเลือกเป็นสีอื่นตามที่เราชอบก็ได้ค่ะ)


ต่อไปก็ทำเหมือนขั้นตอนก่อนหน้าในชั้นที่ 1 และ 2 ทุกอย่างค่ะ

ให้คลิกเลือกที่วงกลมที่เราเพิ่งสร้าง และกดปุ่ม Ctrl +C และตามด้วย Ctrl+F 1 ครั้ง เพื่อก๊อปปี๊วงกลมออกมาอีกวง ให้อยู่ในตำแหน่งซ้อนทับกับตำแหน่งเดิม

ต่อมาก็ให้ใส่กุญแจ Lock ภาพวงกลมอันล่างไว้

และใช้เครื่องมือ Pen Tool สร้างเส้นโค้งขึ้นมาทับวงกลม ดังภาพข้างล่างค่ะ ซึ่งเส้นโค้งตัวนี้ เราจะเอามาใช้ตัดวงกลมออก



ให้เราคลิกเลือก ทั้งภาพโค้งที่เพิ่งสร้าง และภาพวงกลมข้างล่าง(ที่ก๊อปปี๊มา) จากนั้นก็ให้ไปที่คำสั่ง Window> Pathfinder มันจะเด้งหน้าต่างเล็กๆขึ้นมา ให้เราคลิกเลือกการตัดเป็นแบบทับซ้อน และกดปุ่ม Expand




ผลลัพธ์ที่ได้

ต่อไปเราจะสร้างสีขาววาวๆให้มันค่ะ

ให้เราสร้างวงรีขึ้นมาข้างบน และทำการไล่เฉด Gradient ให้เป็น สีขาวและสีดำ ดังภาพ


จากนั้นก็ให้ไปที่คำสั่ง  Window> Transparency มันจะเด้งหน้าต่างเล็กๆขึ้นมา ให้เราเปลี่ยนโหมดภาพวงรี จาก Normal ให้เป็นแบบ Screen


คลิกลากให้มันยาวลงมาอีกนิด


==========================================

NOTE: เทคนิคการใช้คำสั่ง Screen เพื่อไล่เฉดเพิ่มความวาว จะใช้ได้ผลก็ต่อเมื่อ ไฟล์งานของคุณจะต้องเป็นโหมดสีของประเภท RGB เท่านั้นนะค่ะ หากเราอยู่ในโหมดสีของ CMYK มันจะแทบไม่เกิดผลอะไร
==========================================

ต่อมาก็กด T เพื่อพิมพ์ตัวอักษรลงไป ใช้ Text เป็นสีเทาเข้ม (หรือจะใส่เป็นภาพวัถตุก็ได้ตามชอบใจเลยค่ะ)


ให้เราเอาเม้าสไปคลิกบน Text และเลือกคำสั่ง Create Outlines เพื่อเปลี่ยน Text ให้เป็นวัตถุ

หลังจาก text ถูกเปลี่ยนเป็นวัตถุแล้ว ก็ให้เราก๊อปปี๊ โดยการกดปุ่ม Ctrl+C และตามด้วย Ctrl+F ดังภาพประกอบข้างล่าง

ที่ภาพตัว G บน เราจะขยับมันขึ้นไปเล็กน้อยเพื่อให้มองเห็นตัว G สีเทาเข้มด้านล่าง

จากนั้นก็เปลี่ยนสีตัว G บนใหม่ให้มัน โดยการใช้อุปกรณ์  Eyedropper Tool (หรือกด I ) ทำการดูดสีจากสี Gradient ขาว-ดำ ที่เราทำไว้ในเลเยอร์ "ชั้นที่ 2" ดังภาพด้านล่าง

เมื่อดูดสีมาแล้ว เราจะต้องไล่เฉดใหม่โดยให้สีอ่อนอยู่ข้างบน



จะจบลงแค่นี้ก็ได้ค่ะ

แต่ข้าพเจ้ายังอยากบ้าเล่นต่ออีกหน่อย กำลังมันส์ 5555

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

ในเมื่อเป็นแบบนี้ ข้าพเจ้าก็เลยอยากลองทำภาพขอบวงกลมสีเงินด้านหลังที่เลเยอร์ชั้นที่ 1 ให้ดูมีมิติตามไปด้วย = ="



ด้วยเหตุนี้เอง เราจึงต้องกลับไปปลดล๊อค เลเยอร์ชั้นที่1 ออก อีกครั้ง

เมื่อปลดล๊อคแล้ว ก็ให้เรากดปุ่ม Alt ค้างไว้ แล้วเอาเม้าส์ไปคลิกที่เลเยอร์ภาพวงกลมอันล่างสุด



จากนั้นก็กดปุ่ม Ctrl+C ตามด้วย Ctrl+F เพื่อก๊อปปี๊วงกลมอีกวงขึ้นมาเพื่อให้วางซ้อนทับกับตำแหน่งเดิม


เสร็จแล้วก็จัดการใส่กุญแจล๊อคซะ เหลือไว้แค่ภาพวงกลมล่างสุดภาพเดียว



ให้เราเลื่อนวงกลมอันล่าง (ตอนนี้ก็มีแค่อันเดียวที่เราจะลากไปมาได้) ออกมาข้างๆและเยื้องลงนิดหน่อย ให้ดูเหมือนขอบภาพ3D แล้วก็คลิกที่ Gradient Tool ไล่เฉดใหม่ โดยให้สีอ่อนอยู่ด้านบน และสีเข้มอยู่ล้านล่าง



พอเพิ่มขอบแล้วก็ดูหนาไปเลย เหมือนโลโก้ หรือเหรียญหยอดตู้มากกว่า = ="

พอแค่นี้ก่อนดีกว่าค่ะ ขืนเล่นมากกว่านี้ บทความนี้มันอาจจะไม่จบลงง่ายๆ 5555


อันนี้ข้าพเจ้าลองปรับให้ วงกลมสีเขียวๆในเลเยอร์ชั้นที่ 3 ขยายใหญ่ขึ้น เพื่อทำให้มันดูนูนออกมาเยอะๆ



แต่ถ้าไม่ชอบให้มันดูหนาๆ ก็แค่ปรับ text ให้เป็นสีขาว และไม่เอาขอบหนาข้างหลัง แบบภาพด้านล่างก็ได้ค่ะ












ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 1

โพสต์เมื่อ 1-9-2012 22:30 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 13-2-2013 14:30 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ

Rank: 2

โพสต์เมื่อ 22-3-2013 21:23 |แสดงโพสต์ทั้งหมด
ขอบคุณครับผม

Thaigraph

GMT+7, 18-6-2019 16:37 , Processed in 0.147975 second(s), 21 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books