ป้ายกำกับ:
Illustrator
เขียนเมื่อ
วันเสาร์, เมษายน 10, 2553
วิธีใช้โปรแกรม Adobe Illustrator สร้างไอคอน RSS (Create a Vector RSS Icon) ทำได้ดังนี้
ขั้นตอนที่ 1. สร้าง Rounded Rectangle ที่ไม่ต้องมีเส้นขอบขนาดดังนี้
Width: 200
Height: 200
Corner Radius: 22
ขั้นตอนที่ 2. ใส่สีแบบ Gradient โดยมีค่าสีดังนี้
สีของจุดด้านซ้ายคือ FCAF40
สีของจุดด้านขวาคือ F78E3E
ขั้นตอนที่ 3. ให้ตั้งชื่อเลเยอร์ของไอคอนสี่เหลี่ยมที่กำลังทำอยู่นี้ว่า Layer 1 แล้วให้คัดลอกเลเยอร์นี้เพิ่มขึ้นอีกหนึ่งอัน โดยให้ตั้งชื่อเลเยอร์ใหม่นี้ว่า Layer 2 และนำไปวางอยู่เหนือเลเยอร์แรก จากนั้นให้สั่งล็อค Layer 1 ไว้
ขั้นตอนที่ 4. ไปที่ Layer 2 เลือกภาพไอคอนสี่เหลี่ยมจากนั้นเลือกที่ Objects > Tranform > Reflect โดยเลือกแบบ Horizontal
ขั้นตอนที่ 5. เลือกภาพไอคอนสี่เหลี่ยมใน Layer 2 แล้วใส่ Effect > Path > Offset Path โดยตั้งค่าดังนี้
Offset : -4
Joins: Miter
Miter Limit: 4
ขั้นตอนที่ 6. จากนั้นให้ไปเลือกที่ Objects > Expand Appearance
ขั้นตอนที่ 7. ให้สั่งล็อค Layer 2 ไว้ แล้วไปสร้างเลเยอร์ขึ้นใหม่ที่ด้านบนสุดแล้วตั้งชื่อว่า Layer 3 จากนั้นวาดวงกลมขึ้นมา 3 อันดังนี้
วงกลมใหญ่มีแต่เส้นขอบขนาดคือ
Width: 252 px
Height: 252 px
Stroke: 32 Pt
และลบจุดด้านซ้ายและด้านล่างทิ้งไปดังรูป
วงกลมใหญ่
วงกลมกลางมีแต่เส้นขอบขนาดคือ
Width: 155 px
Height: 155 px
Stroke: 32 Pt
และลบจุดด้านซ้ายและด้านล่างทิ้งไปดังรูป
วงกลมกลาง
วงกลมเล็กที่ไม่มีเส้นขอบขนาดคือ
Width: 39 px
Height: 39 px
Stroke: 0 Pt
วงกลมเล็ก
ขั้นตอนที่ 8. เลืิอกชิ้นส่วนวงกลมทั้ง 3 อันจากนั้นไปที่ Window > Align แล้วกดจัดเรียงให้เสมอกันใน ด้านซ้าย และด้านล่าง
โดยเมื่อจัดเรียงแล้วจะได้ภาพลักษณะดังนี้
ขั้นตอนที่ 9. เลืิอกชิ้นส่วนวงกลมทั้ง 3 อันและไปที่ Object > Expand
ขั้นตอนที่ 10. เลือกชิ้นส่วนวงกลมทั้ง 3 อันค้างไว้เหมือนเดิมใส่แล้วสีแบบ Gradient ลงไปในโดยมีค่าสีดังนี้
สีของจุดด้านซ้ายคือ DCDCDC
สีของจุดด้านขวาคือ FFFFFF
และใส่สีเส้นขอบเป็น Stroke: F0F0F0 ในขนาดเส้นขอบ 1 pt
ขั้นตอนที่ 10. สั่งให้ชิ้นส่วนวงกลมทั้ง 3 อัน รวมเป็นกลุ่มเดียวกันโดยเลือกที่ Objects > Group
ขั้นตอนที่ 11. ปลดล็อคทุกเลเยอร์แล้วสั่งให้ไปชิ้นส่วนจากทุกเลเยอร์ที่ทำมาทั้งหมดไปเรียงกันอยู่ตรงกลางพื้นที่ทำงาน
ขั้นตอนที่ 12. สั่งคัดลอก Layer 2 เพิ่มอีกหนึ่งอัน โดยให้ตั้งชื่อเลเยอร์ที่ได้คัดลอกมาว่า Layer 4 แล้วนำไปวางด้านบนสุด จากนั้นสั่งล็อคทุกเลเยอร์แต่ให้ยกเว้นเหลือ Layer 4 ไว้
ขั้นตอนที่ 13. ไปที่ Layer 4 แล้ววาดวงกลมสีขาวแบบไม่มี Stroke เพิ่มขึ้นอีก 1 วงขนาดคือ
Width: 500 px
Height: 89 px
โดยนำวงกลมนั้นไปจัดเรียงให้วางชิดกับขอบด้านบนของไอคอนสี่เหลี่ยมที่อยู่ในใน Layer 4 และให้อยู่ตรงกลางพื้นที่ทำงานดังรูป
ขั้นตอนที่ 14. เลือกวงกลมสีขาวไว้ไปที่ Window > Transform โดยให้เลือก Reference Point ไปที่ด้านล่างของตรงกลางและไม่ต้องสั่งเปิด Constrain Width and Height Proportions จากนั้นปรับความสูงของวงกลมให้เป็น Height: 178 px
ขั้นตอนที่ 15. ให้เลือกวัตถุทั้งหมดที่อยู่ใน Layer 4 คือ ทั้งสี่เหลี่ยมและวงกลมสีขาวแล้ว Window > Pathfinder โดยเลือกแบบ Intersect shape areas
ขั้นตอนที่ 16. เมื่อตัดชิ้นส่วนมาแล้วจากนั้นให้กด Expand
โดยเมื่อทำแล้วจะด้ภาพลักษณะดังนี้
ขั้นตอนที่ 17. เลือกชิ้นส่วนที่ถูกตัดมานั้นใน Layer 4 แล้วไปที่ Window > Transparency โดยตั้งค่า
Opacity: 15
ขั้นตอนที่ 18. วาดวงกลมขนาดเล็กสีขาวเพิ่มอีก 2 วงโดยนำไปวางไว้บริเวณมุมด้านขวาบนของไอคอนสี่เหลี่ยมดังรูป จากนั้นให้ไปที่ Window > Transparency โดยตั้งค่า
Opacity: 15
ขั้นตอนที่ 19. ปลดล็อคทุกเลเยอร์แล้วเลือกทุกชิ้นส่วนที่ทำไว้ทั้งหมดจากนั้นเลือกที่ Objects > Group เพื่อรวมชิ้นส่วนทั้งหมดไว้เป็นกลุ่มเดียวกันก็จะได้ไอคอน RSS ไว้ใช้งาน
Credit: http://www.blog.spoongraphics.co.uk/tutorials/beginner-illustrator-tutorial-create-a-vector-rss-icon
