Thaigraph

 

   

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

[Illustrator ขั้นประยุกต์] วิธีทำไอคอนปุ่ม แบบเรืองแสง

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 19-6-2015 22:51 |แสดงโพสต์ทั้งหมด

วิธีทำไอคอนปุ่ม แบบเรืองแสง

ขั้นตอนที่ 1
ไปที่คำสั่ง File > new... และให้กำหนดสร้างไฟล์งานใหม่ขนาดกว้าง*ยาว เท่ากับ 800*600 พิกเซล

ขั้นตอนที่ 2
1. จากนั้นให้คลิกที่เครื่องมือ Ellipse Tool ( หรือกดปุ่ม L)
2. เอาเม้าส์มาคลิกซ้ายบนพื้นที่ว่าง (ที่เป็นพื้นสีขาว) 1 ครั้ง
3. กำหนดความกว้างยาวให้กับวงกลมเท่ากับ 250*250 พิกเซล และคลิกที่ปุ่ม "OK"



ขั้นตอนที่ 3
เราจะได้วงกลมมา 1 วงโดยมีพื้นสีขาวและเส้นขอบ (stroke) สีดำ
1. ให้คลิกที่ภาพวงกลมที่สร้างขึ้น
2. จากนั้นกดปุ่ม "X" บนคีย์บอร์ด 1 ครั้ง (หรือคลิกที่สัญลักษณ์  stroke ตามรูป 1 ครั้ง)
3. แล้วให้กดปุ่ม "/" บนคีย์บอร์ด 1 ครั้ง (หรือคลิกที่สัญลักษณ์ None ตามรูป 1 ครั้ง ก็ได้เช่นกัน) เพื่อเปลี่ยนภาพวงกลมให้เป็นแบบไร้เส้นขอบ
4. และให้ "ดับเบิ้ลคลิก" ที่สัญลักษณ์ Fill ตามภาพ เพื่อสลับการทำงานมาที่สีพื้นของภาพวงกลมแทน และพร้อมกับให้เลือกสีที่จะเทใส่พื้น


5. เลือกสีใหม่ โดยกำหนดให้มีค่าสีเป็น #18345E ในช่องกรอกค่า แล้วเคาะปุ่ม "Enter" 1 ครั้งเพื่อจบการเลือก



ขั้นตอนที่ 4
เราจะได้วงกลมที่เทสีใหม่ลง ต่อเนื่องเลยนะคะ
1. ให้กดปุ่มคีย์ V (เพื่อเรียกใช้เครื่องมือ Selection Tool) แล้วให้คลิกที่พื้นที่ว่าง 1 ครั้งเพื่อยกเลิกมาเลือกภาพวงกลมชั่วคราว  
2. ดับเบิ้ลคลิกที่ช่อง Fill แล้วให้ใส่ค่ารหัสสีใหม่  #4C83B1 ลงในช่อง เสร็จแล้วเคาะปุ่ม "Enter" 1 ครั้งเพื่อจบการเลือกสี



3. ให้คลิกที่เครื่องมือ "Mesh Tool" ( หรือกดคีย์ลัด U) (สัญลักษณ์ของเม้าส์จะเปลี่ยนเป็นรูปตารางเหลี่ยม)
4. จากนั้นให้คลิกบนภาพวงกลมตามตำแหน่ง 2 ตำแหน่งดังภาพด้านล่าง (ใช้กะประมาณคร่าวๆเอา จะคลิกที่ตำแหน่งบนหรือล่างก่อนก็ได้)
(ผลลัพธ์ที่ได้ สี #4C83B1 ทีเราเลือกไว้ก่อนหน้าจะถูกนำมาเทเกลี่ยบนภาพวงกลม โดยมีเส้นตาข่ายเป็นตัวไล่เฉด)




ขั้นตอนที่ 5
เราจะได้วงกลมที่เทสีใหม่ลง ต่อเนื่องเลยนะคะ
1. ให้กดปุ่มคีย์ V (เพื่อเรียกใช้เครื่องมือ Selection Tool) แล้วให้คลิกที่พื้นที่ว่าง 1 ครั้งเพื่อยกเลิกมาเลือกภาพวงกลมชั่วคราว  
2. ดับเบิ้ลคลิกที่ช่อง Fill แล้วให้ใส่ค่ารหัสสีใหม่  #0D77B7 ลงในช่อง เสร็จแล้วเคาะปุ่ม "Enter" 1 ครั้งเพื่อจบการเลือกสี



3. ให้คลิกที่เครื่องมือ "Mesh Tool" ( หรือกดคีย์ลัด U) (สัญลักษณ์ของเม้าส์จะเปลี่ยนเป็นรูปตารางเหลี่ยม)
4. จากนั้นให้คลิกบนภาพวงกลมตามตำแหน่ง 2 ตำแหน่งดังภาพด้านล่าง (ใช้กะประมาณคร่าวๆเอาค่ะ จะคลิกที่ตำแหน่งบนหรือล่างก่อนก็ได้)




5. ให้กดปุ่มคีย์ V (เพื่อเรียกใช้เครื่องมือ Selection Tool) แล้วให้คลิกที่พื้นที่ว่าง 1 ครั้งเพื่อยกเลิกมาเลือกภาพวงกลมชั่วคราว เพื่อที่เราจะไปวาดชิ้นอื่นกันต่อค่ะ




ขั้นตอนที่ 6
1.
- ให้คลิกที่เครื่องมือ Ellipse Tool (หรือกดที่ปุ่ม L) แล้วให้แดรกเม้าส์บนพื้นที่งาน เพื่อสร้าง "วงรี" ขึ้นมา 3 วงโดยให้มีขนาด เล็ก กลาง ใหญ่ ไล่ระดับกัน

- กำหนดให้ภาพ "วงรี" แต่ละวง โดยวงเล็กสุด ให้เทสีพื้น "#72CDDE"
- วงรีขนาดกลาง และวงขนาดใหญ่สุด ให้เทสีพื้น "#1CB2D2"   



2. ให้คลิกเลือกภาพ "วงรี" แล้วไปที่คำสั่ง Effect > Blur > Gaussian Blur... โดยกำหนดให้ภาพวงรีแต่ละวงมีค่าความเบลอแตกต่างกันดังภาพล่างค่ะ





-จากนั้นก็นำภาพวงรีทั้ง 3 ภาพมาวางซ้อนกัน โดยให้ภาพบนสุดวางอยู่ หน้าสุด ตามด้วยภาพวงรีขนาดกลาง และขนาดใหญ่ (ดูภาพด้านล่างประกอบ)
(สำหรับวิธีสลับลำดับภาพ ศึกษาได้จากบทความนี้ค่ะ http://www.thaigraph.com/thread-2306-1-2.html )




แล้วก็นำมาวางซ้อนกันดังภาพล่างค่ะ

ขั้นตอนที่ 7
1. จากนั้นให้คลิกที่เครื่องมือ Ellipse Tool ( หรือกดปุ่ม L)
2. เอาเม้าส์มาคลิกซ้ายบนพื้นที่ว่าง (ที่เป็นพื้นสีขาว) 1 ครั้ง
3. กำหนดความกว้างยาวให้กับวงกลมเท่ากับ 308*308 พิกเซล และคลิกที่ปุ่ม "OK"
4. จากนั้นเทสีพื้นให้กับภาพ "วงกลม" ที่เพิ่งสร้างเป็นสีเทาอ่อน รหัสสี "#D3D3D3"


ขั้นตอนที่ 8
1. ให้กดปุ่มคีย์ V (เพื่อเรียกใช้เครื่องมือ Selection Tool)
2. แล้วให้คลิกที่พื้นที่ว่าง 1 ครั้งเพื่อยกเลิกมาเลือกภาพวงกลมชั่วคราว  
3. ดับเบิ้ลคลิกที่ช่อง Fill แล้วให้ใส่ค่ารหัสสีใหม่  #FFFFFF (สีขาวล้วน) ลงในช่องว่าง เสร็จแล้วเคาะปุ่ม "Enter" 1 ครั้งเพื่อจบการเลือกสี
4. ให้คลิกที่เครื่องมือ "Mesh Tool" ( หรือกดคีย์ลัด U) (สัญลักษณ์ของเม้าส์จะเปลี่ยนเป็นรูปตารางเหลี่ยม)(ดูภาพล่างประกอบ)
5. จากนั้นให้คลิกบนภาพวงกลมตามตำแหน่ง 2 ตำแหน่งดังภาพด้านล่าง (ใช้กะประมาณคร่าวๆเอาค่ะ จะคลิกที่ตำแหน่งบนหรือล่างก่อนก็ได้)



- แล้วก็จะได้ผลลัพธ์ใกล้เคียงกับภาพล่างค่ะ  เมื่อนำภาพทั้งหมดมาวางซ้อนกัน ภาพวงกลมสีขาวจะบังภาพทั้งหมดที่อยู่ด้านหลัง ให้คุณคลิกที่ภาพวงกลมสีขาวและกดคีย์ Ctrl + Shift + [ เพื่อสลับตำแหน่งให้ภาพวงกลมสีขาวมาอยู่ลำดับล่างสุด


ขั้นตอนที่ 9
1. ให้คลิกที่เครื่องมือ Ellipse Tool (หรือกดที่ปุ่ม L)
2. แล้วให้แดรกเม้าส์บนพื้นที่งาน เพื่อสร้าง "วงรี" ขึ้นมาอีก 1 วง (ขนาดเล็กใหญ่ไม่สำคัญค่ะ เราปรับเพิ่มลดตามความเหมาะสมทีหลังได้)
3. กำหนดเทสีพื้นให้ภาพ "วงรี"  เป็นแบบไล่เฉด (Gradient) จุดสีซ้ายและขวาเป็น "สีขาวล้วน" (ถ้าพาเนล Gradient ไม่ได้เปิดอยู่ให้ไปที่คำสั่ง Window > Gradient )
4. ให้ปรับค่าความโป่งใสของ "จุดสีขวา" ที่อยู่ในพาเนล Gradient ให้เท่ากับ 0%



5. ให้คลิกที่เครื่องมือ Gratient Tool ( หรือกดปุ่มคีย์ G) ให้เป็นจาก "บน" ลง "ล่าง"


เมื่อชิ้นส่วนทุกชิ้นเสร็จครบแล้ว เราก็จะนำมาวางซ้อนกันดังภาพด้านล่างค่ะ

เราอาจจะตกแต่งเพิ่มเติมโดยการหาภาพไอคอน หรือโลโก้มาใส่ตรงกลางเพื่อให้ดูสวยงามมากขึ้นก็แล้วแต่ความชอบของแต่ละคนนะคะ




แล้วพบกันใหม่บทความหน้านะคะ

บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)




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

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 28-6-2015 16:47 |แสดงโพสต์ทั้งหมด
ขอบคุณมากครับ อาจารย์ Nook Fu Fu

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 25-9-2015 08:39 |แสดงโพสต์ทั้งหมด
สวยงาม ขอบคุณครับ

Thaigraph

GMT+7, 22-7-2019 01:35 , Processed in 0.110232 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