สร้างชุดไอคอนผลิตภัณฑ์ใน Illustrator

Sep 16, 2025

วิธีการ

Click the icon in the top right to enlarge the icons — คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายไอคอน

ไอคอนภาพประกอบสามารถเพิ่มเป็นพิเศษสำหรับคุณ การออกแบบพอร์ตโฟลิโอ ไม่ว่าคุณจะรวมพวกเขาให้เข้าถึงกลุ่มลูกค้าที่มีศักยภาพใหม่หรือเพิ่มองค์ประกอบเพิ่มเติมให้กับฉากที่มีภาพประกอบ ในเรื่องนี้ Adobe Illustrator Tutorial ฉันจะแสดงวิธีการสร้างไอคอนอย่างง่ายดายและง่ายดายเพื่อให้คุณสามารถสร้างปริมาณขนาดใหญ่ในเวลาไม่นาน

ฉันจะออกแบบชุดไอคอนสองชุด: ชุดของโทรศัพท์ / แท็บเล็ตดิจิตอลและชุดของรายการทำกาแฟ

01. รู้ว่าคุณเป็นตัวแทนอะไร

pictures of phones, tablets and coffee machines — ผลิตภัณฑ์ในโลกแห่งความจริงต้องมีการวิจัยระดับดี

อะไรก็ตามที่ชุดผลิตภัณฑ์ของคุณทำวิจัยของคุณ! ลูกค้าต้องการให้ผลิตภัณฑ์ทั้งหมดถูกต้องและคุณควร แม้ว่ามันจะเป็นโครงการส่วนตัวคุณไม่สามารถเพิ่มปุ่มกล้องเป็น Nokia 3310 ดั้งเดิมหรือวางปลั๊กสองพินบนกาต้มน้ำอังกฤษ หากคุณแสดงให้เห็นถึงผลิตภัณฑ์สำหรับลูกค้าให้แน่ใจว่าคุณรู้ว่ามันมองไปตลอดทางดังนั้นคุณจึงเข้าใจว่ามันเป็นวัตถุในโลกแห่งความจริง

02. วาดมันในดินสอ

Coffee makers drawn in simple lines below a row of phones — ทำลายวัตถุลงเป็นเส้นที่เรียบง่าย

คุณสามารถเริ่มต้นได้ แต่คุณต้องการ - ฉันมักจะวาดทุกอย่างในดินสอ แต่สำหรับผลิตภัณฑ์จำนวนมากที่คุณสามารถติดตามภาพถ่ายได้ หากคุณมีรูปร่างที่ยุ่งยากในการวาดและมันจะเกิดขึ้นสมมาตร - ตัวอย่างเช่น lightbulb - คุณสามารถวาดครึ่งหนึ่งของมันได้ (ฉันจะมาที่นั่นในภายหลัง!)

03. กำจัดหงิกงอ

A line drawing of a coffee pot — ติดกับเส้นตรงมุมที่สมบูรณ์แบบและเส้นโค้งที่ราบรื่น

เมื่อสร้าง LineWork ให้รักษาเส้นและมุมที่ตรงไปตรงมาเสมอ ไอคอนผลิตภัณฑ์ที่แสดงของคุณอาจใช้ค่อนข้างเล็กบนหน้าหรือหน้าจอและหงิกงอหรือเส้นโค้งที่ไม่จำเป็นอาจทำให้ตาสับสนและทำให้สิ่งต่าง ๆ ไม่ชัดเจน

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

04. ใช้ประโยชน์จากความสมมาตร

Phone with box around screen to highlight symmetry — สมมาตรสามารถทำให้เวิร์กโฟลว์ของคุณมีประสิทธิภาพมากขึ้น

ผลิตภัณฑ์จำนวนมากมีความสมมาตรอย่างสมบูรณ์แบบซึ่งทำให้สิ่งต่าง ๆ ดีและเรียบง่าย เมื่อคุณมี linework ให้เลือกทั้งหมดด้วยเครื่องมือการเลือก ( cmd + v ) และคุณจะเห็นปุ่มจัดตำแหน่งหลากหลายที่ปรากฏในแถบด้านบน คลิกปุ่มแนวนอนหรือแนวตั้งตรงกลางแนวตั้งขึ้นอยู่กับสิ่งที่คุณต้องการและทุกอย่างจะสแน็ปอินเป็นสมมาตร นอกจากนี้คุณยังสามารถจัดกลุ่มวัตถุเข้าด้วยกันแล้วจัดเรียงให้เข้ากับวัตถุหรือกลุ่มอื่น ๆ

05. สะท้อนวัตถุที่ซับซ้อนมากขึ้น

An image of a jug reflected — การคัดลอกและวางอย่างง่ายจะทำให้วัตถุของคุณดีและเป็นระเบียบ

สำหรับสมมาตรในวัตถุที่มีรูปร่างดีขึ้นแสดงให้เห็นถึงครึ่งหนึ่งอย่างสมบูรณ์แบบจากนั้นเลือกครึ่งหนึ่งและคัดลอกและวางทั้งหมดในครั้งเดียวโดยกดค้างไว้ Shift + Alt และกดปุ่มลูกศรขวาสิ่งนี้จะทำให้ระดับบรรทัดเหล่านี้มีต้นฉบับของพวกเขา

ยังคงมีวัตถุที่คัดลอกที่เลือกคลิกวัตถุ & GT; แปลง & GT; สะท้อนจากเมนูหลักเลือกตัวเลือกแนวตั้งและคลิกตกลง วางด้านนี้ของวัตถุเพื่อให้ได้ความกว้างที่ถูกต้อง (ใช้เฉพาะปุ่มลูกศรซ้ายและขวาดังนั้นพวกเขาจึงสอดคล้องกับอีกครึ่งหนึ่ง)

ใช้เครื่องมือการเลือกโดยตรง ( cmd + a ) เข้าร่วมทั้งสองด้านของแต่ละบรรทัดโดยเลือกสองบรรทัดสิ้นสุดลงและคลิก cmd + j .

06. รักษาความมั่นคง

Picture of phones with consistency between them highlighted — ผลิตภัณฑ์ทั้งหมดผ่านการวิวัฒนาการ แสดงวิธีที่เกี่ยวข้องกับต่อไป

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

บ่อยครั้ง (ด้วยผลิตภัณฑ์เทคโนโลยีโดยเฉพาะอย่างยิ่ง) คุณสามารถสร้างอุปกรณ์เดียวจากนั้นคัดลอก / วางและเพียงแค่ปรับสัดส่วนเพื่อให้ไอคอนต่อไปซึ่งสามารถเพิ่มความเร็วเวิร์กโฟลว์ของคุณได้จริง

07. เพิ่มสีบางสี

Two coffee pots, one grey, one green — การใช้สีเทาสำหรับโลหะสามารถเบื่อได้ดังนั้นการทดลองกับบลูส์

ด้วย linework ของคุณเสร็จสมบูรณ์ให้ไปที่สี โดยทั่วไปคุณต้องการรับเสียงให้ใกล้เคียงกับความเป็นจริงมากที่สุด แต่มีข้อยกเว้นบางอย่าง ตัวอย่างเช่นโลหะส่วนใหญ่เป็นสีเทากลางซึ่งน่าเบื่อสำหรับทุกคน! แต่ฉันใช้โทนสีฟ้าสีเทาที่หลากหลาย (แสงหรือมืด) และมักจะหลงทางเป็นเทอร์ควอยซ์

ลองใช้สีฟ้าใสสำหรับแก้วด้วยเช่นเดียวกับสีขาวสามารถรู้สึกเย็น ฉันขอแนะนำส้มและสีเหลืองสำหรับพื้นผิวไม้เพื่อนำความอบอุ่นมา

08. สำรวจการไล่ระดับสี

A phone with a green screen gradient — แม้แต่การไล่ระดับสีที่ละเอียดอ่อนสามารถสร้างความแตกต่างที่แท้จริงของไอคอน

ในขณะที่เรากำลังสร้างไอคอนภาพประกอบคุณไม่ต้องการไปไกลเกินไปในรายละเอียดและพื้นผิวเล็กน้อย อย่างไรก็ตามคุณสามารถขายพื้นผิวของผลิตภัณฑ์ด้วยการไล่ระดับสี เพื่อให้ได้ดีที่สุดจาก Adobe Illustrator อย่าสร้างการไล่ระดับสีจากสีเดียวไปยังถัดไป (มันมักจะส่งผลให้เกิดการกดปุ่มเมื่อพิมพ์)

ให้เลือกสีแบนสำหรับวัตถุ / รูปร่างให้เลือกรูปร่างและทำซ้ำ (ในแผงเลเยอร์) จากนั้นเพิ่มการไล่ระดับสีกับวัตถุด้านบนนี้ที่เกิดจากความทึบของ 100% ลงเป็น 0%

09. ลองรวมเงาและไฮไลท์

A green cafetiere with shadows — สร้างไฮไลท์และเงาของคุณเองและพัฒนาสไตล์กราฟิกของคุณเอง

เมื่อฉันไม่ได้ใช้การไล่ระดับสีผมมักจะทำซ้ำวัตถุแล้วตัดที่มุมหนึ่ง ฉันใช้เครื่องมือปากกา (กดปุ่ม Shift ค้างไว้อีกครั้ง) เพื่อสร้างรูปร่างที่ครอบตัดในมุม 45 องศาซึ่งฉันสีที่มีสีอ่อนหรือมืดกว่าเพื่อเพิ่มเงาหรือไฮไลต์ที่เรียบง่าย แต่มีประสิทธิภาพ

10. เพิ่มรายละเอียดเพิ่มเติม

Two rows of green products, phones and coffee pots — นำผลิตภัณฑ์ของคุณมาใช้ชีวิตโดยเพิ่มรายละเอียดเพิ่มเติม

ในที่สุดหากขนาดที่คุณใช้ไอคอนที่อนุญาตคุณสามารถนำพวกเขาไปสู่ชีวิตจริงๆ อุปกรณ์เทคโนโลยีดูไม่มีสิ่งใดบนหน้าจอดังนั้นให้ใช้พื้นที่นี้เพื่อแสดงฟังก์ชั่นหรือขายแอป ภาพประกอบกราฟิกผลิตภัณฑ์ที่ใช้ในภาพประกอบที่ใหญ่กว่า (ตัวอย่างเช่นหากสิ่งอำนวยความสะดวกกาแฟเหล่านี้เป็นส่วนหนึ่งของฉากที่กว้างขึ้น) จะดึงดูดผู้ชมเข้ามา

กระทู้ที่เกี่ยวข้อง:

วิธีการสร้างรูปแบบการทำซ้ำใน Illustrator
พรีเมี่ยมที่ดีที่สุดและแปรง Illustrator ฟรี
สร้างชุดไอคอนที่สม่ำเสมอในภาพร่าง

สร้างชุดไอคอนผลิตภัณฑ์ใน Illustrator

01. รู้ว่าคุณเป็นตัวแทนอะไร

02. วาดมันในดินสอ

03. กำจัดหงิกงอ

04. ใช้ประโยชน์จากความสมมาตร

05. สะท้อนวัตถุที่ซับซ้อนมากขึ้น

06. รักษาความมั่นคง

07. เพิ่มสีบางสี

08. สำรวจการไล่ระดับสี

09. ลองรวมเงาและไฮไลท์

10. เพิ่มรายละเอียดเพิ่มเติม

วิธีการ - บทความยอดนิยม

วิธีการปรับแต่งผลงานการออกแบบของคุณ

หยุดบอทด้วย Google recaptcha

เริ่มต้นกับ Babel 7

วิธีการบรรลุระดับในภาพวาดของคุณ

นำศีรษะของคุณไปรอบ ๆ ปฏิกิริยากับปัจจัยทั้งห้านี้

จำลองการเปลี่ยนแปลงของผู้ขับขี่ผี

สร้างแดชบอร์ดที่ตอบสนองด้วย figma

สร้างผลไฟ 3 มิติ

หมวดหมู่