คู่มือสุดง่ายในการยึดถือ

โดยเฉลี่ยแล้ว คุณต้องใช้เวลานานแค่ไหนในการออกแบบไอคอนแบบกำหนดเอง?

สองสามนาที? สิบนาที? อีกต่อไป? จะเกิดอะไรขึ้นถ้าเราแสดงให้คุณเห็นถึงวิธีการสร้างไอคอนที่ยอดเยี่ยม 10 ไอคอนในเวลาน้อยกว่า 10 นาที

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

ดังนั้นฉันจึงตั้งใจที่จะสร้างคำแนะนำที่ง่ายมาก ๆ เพื่อช่วยให้คุณเรียนรู้พื้นฐานของการยึดถือเพเกินในเวลาน้อยกว่า 10 นาที (ฉันหมายถึงอย่างนั้น)

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

เดิมที ฉันได้รับแรงบันดาลใจในการสร้างคู่มือนี้โดย GIF นี้จาก Morgan Allan Knutson ที่แสดงวิธีสร้างไอคอนบริการระบุตำแหน่งในไม่กี่วินาที ฉันพบว่ามันสดชื่น ฉลาด และรวดเร็ว มันอธิบายขั้นตอนการสร้างไอคอนที่กำหนดเองและแสดงให้เห็นว่ามันง่ายแค่ไหน อันที่จริงแล้วไอคอนคือรูปทรงเรขาคณิตที่อาจเกิดจากการรวมกันหรือการเสียรูปของรูปร่างพื้นฐาน เช่น สี่เหลี่ยม สามเหลี่ยม หรือวงกลม หลักการง่ายๆ ในการออกแบบโลโก้หรือไอคอนคือทำให้ทุกอย่างเรียบง่าย

เป้าหมายของบทความนี้คือการสร้าง 10 ไอคอนภายใน 10 วินาทีต่ออัน โดยใช้รูปทรงที่เรียบง่ายเท่านั้น

หมายเหตุสำคัญ: เราจะใช้ Adobe Illustrator ในโพสต์นี้ แต่คุณสามารถได้ผลลัพธ์เดียวกันโดยใช้ Sketch หรือแม้แต่ Figma ทุกครั้งที่เราต้องการเพิ่มหรือลบจุดบนรูปร่าง เราจะใช้ “เครื่องมือปากกา (P)” การเลือกและย้ายจุดไปรอบๆ ทำได้ด้วย “เครื่องมือการเลือกโดยตรง (A)”

ไอคอนตา

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

เคล็ดลับ: แทนที่จะใช้วงกลมสีขาว ให้ลบ (โดยใช้แผง Pathfinder) วงกลมสองวงออกจากวงกลมด้านล่างแต่ละวง สร้างผลลัพธ์ที่สะอาดขึ้นบนพื้นหลัง

ไอคอนลูกศร

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

ไอคอนแบตเตอรี่

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

เคล็ดลับ: เล่นกับความหนาของสโตรกและแพ็ดดิ้งเพื่อรักษาสมดุลของภาพที่ดี

ไอคอนรายการกระสุน

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

เคล็ดลับ: แทนที่สี่เหลี่ยมจัตุรัสด้วยวงกลมเพื่อให้ดูนุ่มนวลขึ้น

ไอคอนคลาวด์

วาดวงกลมขนาดต่างกันสามวง. จัดตำแหน่งวงกลมที่เล็กที่สุดสองวงด้านล่างให้เป็นฐาน แล้ววางวงกลมที่ใหญ่ที่สุดไว้ตรงกลางในตำแหน่งที่สูงขึ้น สร้างฐานของเมฆโดยเปลี่ยนรูปวงกลมเล็กๆ วงหนึ่ง

เคล็ดลับ: ใช้ขนาดวงกลมต่างๆ กันเพื่อให้ได้ก้อนเมฆที่ดูเป็นธรรมชาติมากขึ้น

ไอคอนเล่นไปข้างหน้า

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

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

ไอคอนช่องทาง

เริ่มต้นด้วยสี่เหลี่ยมผืนผ้ายาว เพิ่มจุดกึ่งกลางของขอบซ้ายและขวา ทีนี้ ยืดขอบบนในแนวนอน เท่านี้ก็เรียบร้อย

เคล็ดลับ: วางสี่เหลี่ยมสองช่องจากขอบจรดขอบ แล้วยืดขอบด้านบนสุดในแนวนอน

ไอคอนเล่น/หยุดชั่วคราว

เริ่มต้นด้วยสี่เหลี่ยมยาวสามอันขนานกัน ปรับรูปร่างสี่เหลี่ยมผืนผ้าที่กว้างที่สุดให้เป็นรูปสามเหลี่ยม

เคล็ดลับ: อีกวิธีหนึ่งคือ วาดรูปสามเหลี่ยมหนึ่งรูป ตามด้วยสี่เหลี่ยมขนานสองรูป

ไอคอนลูกศรตำแหน่ง

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

เคล็ดลับ: ใน Illustrator การกดแป้น Shift ขณะลากจุดจะช่วยรักษาความสมมาตรในขณะที่รักษามุมในแนวทแยงให้ถูกต้อง

ไอคอนพินตำแหน่ง

เคาะวงกลมด้านในวงที่ใหญ่กว่า (โดยใช้แผง Pathfinder) ลากจุดต่ำสุดลงไปตรงๆ แล้วลับมุมที่เกิดขึ้น - สลับไปที่ "เครื่องมือปากกา (P)" จากนั้นในขณะที่กดปุ่ม "Shift" ค้างไว้ ให้คลิกที่จุดนั้น

เคล็ดลับ: ใช้มุมโค้งมนที่จุดให้ทิปนั้นเพื่อทำให้ลุคดูนุ่มนวล - ปรับค่า "รัศมีมุม" ในแผงตัวเลือก "แปลง" ขณะที่เลือกจุดนั้น

ไอคอนเสียง

เช่นเดียวกับไอคอนกรวยแต่หมุนได้ 90 องศา

เคล็ดลับ: เพียงคัดลอกและวางไอคอนช่องทาง แล้วหมุนตามเข็มนาฬิกา

ไอคอนคลื่น

ลากเส้นตรงแล้วบวกจุดที่ระยะห่างเท่ากันตลอดความยาว ลากจุดเปลี่ยนลงและปัดเศษทุกมุมจนสุดจนเรียบ

เคล็ดลับ: ปัดเศษปลายเส้นออกเพื่อให้ดูเรียบเนียนยิ่งขึ้น

Toptal Icon

นี่คือไอคอนโบนัส

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

เคล็ดลับ: ให้ความสนใจกับความหนาของเส้น และช่องว่างสีขาวที่เกิดขึ้นภายในโลโก้

ไอคอนมีค่า 1,000 คำ

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

โดยสรุป กฎหลัก 10 ข้อของการยึดถือคือ:

• ทำให้เป็นสัญลักษณ์และมีความหมาย
• คุณเคยได้ยินมา: ทำให้มันง่าย สไตล์ไม่ควรลดทอนความสามารถในการอ่าน
• จงตั้งใจและไตร่ตรอง คิดก่อนสร้าง.
• ตรวจสอบให้แน่ใจว่าใช้งานได้ในขนาดต่างๆ
• คำนึงถึงความสม่ำเสมอ
• เวกเตอร์เท่านั้น ได้โปรด!
• ใช้สีเมื่อจำเป็นเท่านั้น และทำอย่างระมัดระวัง
• ช่วยให้รู้เรขาคณิตพื้นฐาน
• คิดว่า "ค่าใช้จ่าย" เพื่อให้แน่ใจว่าไอคอนที่ออกแบบไว้จะช่วยในการออกแบบโดยรวม
• เพเกินเป็นภาษาที่ควรเป็นสากล
• โบนัส: ตัวอักษรเป็นเพียงชุดไอคอน 26 ไอคอน

เล่นด้วยกันและดูว่าคุณสามารถทำอะไรได้บ้างภายใน 10 วินาที

• • •

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

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง