วิธีเปลี่ยนไอคอนที่น่าเบื่อให้กลายเป็นผลงานชิ้นเอกอย่างรวดเร็ว

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

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

หลักการออกแบบ Material ของ Google

ตามที่ Google กล่าวไว้ "วัสดุคือคำอุปมา" มันยืมตัวชี้นำภาพจากโลกทางกายภาพและสร้างภาษาภาพใหม่เพื่อสร้างมาตรฐานของอินเทอร์เฟซทั้งหมด หลักการออกแบบ Material สามารถเข้าถึงได้และสามารถนำไปใช้ได้อย่างรวดเร็วเพื่อปรับปรุงความน่าดึงดูดใจของอินเทอร์เฟซและประสบการณ์ผู้ใช้

1. ใช้รูปทรงเรขาคณิตที่เรียบง่ายและสีสันสดใส

เทรนด์การออกแบบแนวราบเป็นแรงบันดาลใจให้ดีไซน์ Material ซึ่งมีพื้นฐานมาจากรูปทรงเรียบๆ เลือกอย่างระมัดระวังว่ารูปร่างใดแสดงถึงองค์ประกอบที่ไอคอนกำลังแสดงให้เห็นได้ดีที่สุด

2. เพิ่มความลึกด้วยการแรเงาที่ละเอียดอ่อน

เงาตกกระทบเป็นวิธีที่ดีในการหลอกตาและให้ความรู้สึกถึงความลึกแก่การออกแบบของคุณ เพราะจะกระตุ้นเอฟเฟกต์ของแสงที่ส่องลงบนวัตถุ

โปรดทราบว่าแสงธรรมชาติมักจะจำลองมาจากมุมบนซ้าย

3. ใช้เฉดสีเพื่อแทนที่เงาตกกระทบ

แต่ละสีถูกใช้ในหลายเฉดเพื่อจำลองความลึกของภาพ ตัวอย่างเช่น ในไอคอน Gmail คุณจะเห็นว่ารูปตัว M ใช้เฉดสีแดงที่แตกต่างกัน และสีเทาเข้มกว่าจะใช้ใต้ฝาซองจดหมาย

คุณทำได้เช่นกัน: การสาธิตทีละขั้นตอน

เราจะใช้รูปแบบดีไซน์ Material ในเวอร์ชันที่เรียบง่าย และสำหรับแต่ละไอคอน เราจะใช้เพียงสามเฉดสีที่มีสีเดียวกันเท่านั้น และทำให้เงาเรียบและสั้น แทนที่จะใช้เอฟเฟกต์ "เงายาว" ทั่วไป

ทรัพยากร

• ตรวจสอบชุดไอคอนฟรีทั้งหมดจาก Google ที่นี่

มาเริ่มกันเลย.

1. ไอคอนสายฟ้า

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

2. ไอคอนแชท

บนไอคอนดั้งเดิม เรามีเอฟเฟกต์เงาในช่องว่างระหว่างสองฟอง ซึ่งเป็นที่ที่คุณจะสร้างเงา

ที่รูปร่างด้านล่าง ให้เลือกจุดที่สร้างมุมฉากในช่องว่าง แล้วเลื่อนขึ้นไปทางซ้ายจนกว่าคุณจะสร้างมุมขวาที่มุมบนซ้าย

ทำซ้ำฟองด้านบนและย้ายสำเนาลงและไปทางขวา เลือกสำเนาและรูปร่างของลูกโป่งด้านล่าง ใช้ "Pathfinder" เพื่อสร้างการหาร และเก็บเฉพาะจุดตัดกับสำเนาก่อนหน้าของคุณ

ตอนนี้คุณสามารถใช้เฉดสีฟ้าสามเฉดและกำหนดสีที่สว่างที่สุดไว้ด้านบน สีเข้มที่สุดตรงกลาง และเฉดสีที่เข้มที่สุดเป็นอันดับสองที่ด้านล่าง

3. ตรวจสอบไอคอนเครื่องหมาย

เราจะสร้างเอฟเฟกต์กระดาษแบบพับ

ทำซ้ำไอคอน และนำจุดพิเศษสองจุดที่ด้านบนขวาออก จากนั้นที่ด้านซ้ายสุดเพื่อเอาสองชิ้นออก

ทำซ้ำการพับด้านซ้าย และย้ายไปที่ด้านบนสุดของด้านขวา

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

4. ไอคอนธง

เริ่มด้วยการปัดเศษขอบแล้วดึงฐานของธงออก

ในการสร้างเอฟเฟกต์การพับ ให้ลากเส้นสองเส้นตัดกันในแนวทแยง การใช้ ”Pathfinder” แบ่งรูปร่างของธงด้วยเส้นต่างๆ และใช้สีเขียวสามเฉดกับธงโดยให้ฐานเป็นสีเทา

5. ไอคอนหัวใจ

ทำซ้ำไอคอนรูปหัวใจ

แยกครึ่งซ้ายของรูปร่าง

ติดตามเส้นทแยงมุมลงมาจากจุดบนขวา

ซ้อนทับรูปร่างผลลัพธ์กับหัวใจ จากนั้นเลื่อนไปทางขวาเพื่อลบรูปร่างเงา ใช้สีชมพูสามเฉดของคุณ

6. ไอคอนภูเขา

ช่องว่างภายในไอคอนเดิมระบุว่าเราสามารถวางเงาไว้ที่ใด

สร้างรูปทรงสามเหลี่ยมสองรูปจากการเลือกแต่ละครั้ง

ย้ายสำเนาของส่วนที่เล็กกว่าไปทางขวา และแยกสี่แยกที่ได้ออกมาเป็นรูปร่างเงา

ใช้สีน้ำตาลสามเฉดโดยให้สีอ่อนที่สุดอยู่ทางซ้าย อันที่สองสว่างที่สุดสำหรับรูปสามเหลี่ยมใหญ่ และสีเข้มที่สุดสำหรับเงาที่อยู่ตรงกลาง ใช้รัศมีมุมบางส่วนเพื่อทำให้ผลลัพธ์อ่อนลง

7. ไอคอนผู้คน

เลือกและทำซ้ำส่วนล่างของบุคคลทางด้านซ้าย จัดสำเนานั้นกับบุคคลทางด้านขวา ตอนนี้ เลือกสามรูปร่างที่ทับซ้อนกัน และใช้เครื่องมือ "แบ่ง" จากแผง "ผู้เบิกทาง" ตอนนี้ใช้สีให้เสร็จ

8. ไอคอนสี่เหลี่ยมลอยน้ำ

เลือกรูปร่างด้านล่าง และเลื่อนจุดกึ่งกลางด้านบนขึ้นไปด้านบนจนดูเหมือนเพชร

ทำซ้ำรูปทรงเพชรด้านบน และย้ายสำเนาลง 10 หรือ 20 พิกเซล

เลือกสองรูปร่างด้านล่าง และใช้เครื่องมือ "Divide" จากแผง "Pathfinder"

จากรูปร่างที่ตัดกัน ให้เก็บเฉพาะส่วนที่ต่ำกว่าสองชิ้น และลบจุดพิเศษใดๆ

ปิดท้ายด้วยการใช้สีแดงสามเฉดโดยกำหนดส่วนที่มืดที่สุดไว้ตรงกลาง

9. ไอคอนจดหมาย

ด้วย "เครื่องมือการเลือกโดยตรง (A)" ให้เลือกจุดที่สูงกว่าจุดที่สองของรูปร่างซองจดหมาย

เพิ่มจุดบนส่วนทางด้านขวาโดยใช้ "เครื่องมือปากกา"

ตอนนี้คุณมีจุดพิเศษแล้ว คุณสามารถเปลี่ยนรูปร่างช่องว่างเชิงลบนั้นให้ดูเหมือนกระดาษได้ โดยยกจุดบนสองจุดแล้วเลื่อนไปทางขวาและซ้ายตามที่แสดง

เลือกทุกอย่างและใช้การแบ่งจากแผง "Pathfinder" แยกรูปร่างกระดาษด้านบนออกจากซองจดหมาย จากนั้นทำซ้ำส่วนซองจดหมายที่ด้านบนของกระดาษเพื่อตัดรูปร่างเงาออกก่อนที่จะใช้สีน้ำเงินสามเฉด

10. ไอคอนเค้ก

แยกส่วนที่ซ้ำกันของส่วนล่างของเค้ก

จำกัดความกว้างให้แคบลงโดยเลื่อนขอบซ้ายและขวาเข้าด้านใน

ย้ายรูปร่างที่ได้ไปไว้ด้านบนของไอคอนดั้งเดิม และขยายจุดที่สูงกว่าเพื่อทับซ้อนรูปร่างของไอซิ่ง

สร้างส่วนของรูปร่างที่ทับซ้อนกันทั้งหมดด้วย "Pathfinder" และลบจุดพิเศษข้างฐานเค้กแคบที่คุณสร้างไว้ก่อนหน้านี้

ทำเค้กให้เสร็จโดยทาสีส้มอ่อนกับไอซิ่งและเทียน เฉดสีเข้มกว่าที่ฐาน และสีส้มเข้มยิ่งขึ้นสำหรับรูปทรงเปลวไฟและขอบเงา

ปรับปรุงรูปลักษณ์และความรู้สึกของชุดไอคอนของคุณ

การสร้างไอคอนที่มีสไตล์ของ Material สามารถทำได้อย่างเรียบง่าย คุณต้องการเพียงแค่การผสมผสานที่ดีของรูปทรงเรขาคณิตที่รอบคอบ เฉดสีที่ชัดเจน และเอฟเฟกต์เงาตกกระทบ

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

แจ้งให้เราทราบสิ่งที่คุณคิด! โปรดแสดงความคิดเห็น ความคิดเห็น และข้อเสนอแนะของคุณด้านล่าง

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• หลักการออกแบบและความสำคัญ
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• สำรวจหลักการออกแบบของเกสตัลต์
• Adobe XD กับ Sketch – เครื่องมือ UX ใดที่เหมาะกับคุณ
• 10 UX ที่นักออกแบบชั้นนำเลือกใช้