สร้างไอคอนด้วย adobe illustrator(AI)




 


การใช้ ICON บนงานออกแบบ

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

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

ประโยชน์ของ Icon มีอะไรบ้าง มารู้จักและทำความเข้าใจกันเลย

• ใช้แทนรูปภาพได้
สิ่งที่ Icon สามารถทำได้ดีคือ การใช้สื่อความหมายแทนรูปภาพ อีกทั้งยังสามารถเพิ่มความพิเศษให้กับรูปภาพที่ต้องการและยังทำให้ผู้อ่านรู้สึกสบายเป็นกันเองได้ง่ายขึ้นอีกด้วย

• สร้างความเป็นเอกลักษณ์
จากบทความ The Power of illustrations ที่บอกว่าภาพแบบ illustrations จะช่วยสร้างตัวตนของเราได้ดีกว่าภาพถ่าย เช่นกันถ้าหากเราสามารถสร้าง illustrations เป็นของตัวเองแต่มีความสอดคล้องกับโจทย์ที่ได้รับ ก็จะเป็นการสร้างความแข็งแรงให้กับกราฟิกและไอคอน

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

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


ขันตอนการทำงานจากที่ฝึกงาน

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


เข้าสู่เนื้อหาของหัวข้อเรา

บทความนี้ หนูจะมาสอนการสร้าง icon ในรูปแบบเวกเตอร์ (Vector) โดยใช้ adobe illustrator(AI)

หัวข้อตัวอย่างต่อไปนี้ จะมาสร้าง Richmenu ของ LINE Business


ริชเมนู (Richmenu) คืออะไร ?

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

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


ประโยชน์ของ Richmenu

1. การเข้าถึงข้อมูลทางลัด : โดยผู้ใช้สามารถเห็นข้อมูลได้โดยที่ไม่ต้องรอคำตอบ ส่วนใหญ่มักแสดงผลพวก เมนูสำคัญๆ หรือคำถามที่มีคนถามเข้ามาบ่อยๆ
2. ให้ข้อมูลพิเศษ : เช่นโปรโมชั่น หรือประกาศสำคัญๆ
3. กระตุ้นการมีส่วนร่วม : ริชเมนูสามารถเชื่อมต่อกับระบบ “คูปอง” และเชื่อมกับคำตอบรูปแบบอื่นๆ ได้ด้วย


เทคนิคการใช้ ริชเมนู

หากคุณต้องการเพิ่มยอดขายหรือถ้าเป็นธุรกิจที่มีหน้าร้านต้องการดึงคนเข้าไปที่ร้านจากการใช้ LINE OA หรือแม้แต่จุดประสงค์ทางการตลาดอื่นๆ เช่น โปรโมทสินค้า ฯลฯ คุณอาจจะต้องทำการวางแผนการใช้งานสักเล็กน้อยโดยดึงจุดเด่นคือการใส่ Action ได้ถึง 6 ช่องมาใช้ให้คุ้มค่าที่สุด

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

  1. โปรโมทโปรโมชั่นสินค้าใหม่ หรือจัดโปรฯ พิเศษเฉพาะลูกค้าที่เข้า LINE OA เท่านั้น
  2. ทำระบบสมาชิก ให้ลูกค้าสมัครสมาชิกผ่านริชเมนู
  3. ทำแคมเปญ คูปอง LINE เพื่อกระตุ้นให้ลูกค้าซื้อสินค้า
  4. ลงทะเบียนผ่าน LINE รับส่วนลดหน้าร้านทันที …%
  5. ดูเมนูแนะนำ (สำหรับร้านอาหาร)
  6. แผนที่เดินทางมายังหน้าร้าน


โดยลูกค้ากำหนดว่า ในเมนูจะต้องมี

1.วิธีการสั่งสินค้า

2.วิธีการชำระเงิน

3.สินค้าของเรา

4.ตัวอย่างผลงาน

5.ข่าวสาร

6.ติดต่อเรา

       ขั้นตอนแรกให้เราตีความจากหัวข้อให้เป็นภาพ Icon ด้วยจิตนาการและความรู้ตั้งแต่จำความได้

เราจะออกแบบมาให้ดูเหมื่อนรูประบบ ให้ icon สือออกมาว่า จะต้องในลูกค้าอ่านและทำตามขันตอน และทำให้ถูกต้องในการสั่งสินค้า 

เริ่ม...!

เปิดโปรแกรมมาเลย

กำหนดขนาด ประมาณ 150*150 px


ใช้เครื่องมือ Rectangle tool ทำสี่เหลี่ยม ทำขอบมล เพิ่มขอบหนาาาา.....<3


แล้วเราจะทำเส้นของให้เป็นวัตถุ ไปกดที่ Object > Expand จะได้ตามรูป

เต็มจุด เต็มเส้นจะให้มันเสดงออกว่าให้เป็นรายการ น่ารักกกกกกก


ยังไม่เสร็จเราจะทำดูให้เป็นระบบ โดยใช้เทคโนโลยี ซี โอ พี วาย โดยการกด Command + C แล้วกด Command + V ต่อไปลากรูปออกจากกัน



งอกออกมาเป็นสามแล้ววว สร้างความเชือมโยงด้วยหัวลูกศร


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


ดูดีเลย ต่อไปเราจะนำ icon ประกอบใน Richmeun นะคะ




ความคิดเห็น