Adobe illustrator
Adobe illustrator หรือ AI เป็นโปรแกรมที่ใช้สำหรับการสร้างผลงานกราฟฟิคต่างๆ ไม่ว่าจะเป็นการออกแบบโปสเตอร์ ออกแบบโลโก้ วาดภาพการ์ตูน
หรือแม้แต่จะนำมาใช้สำหรับงานออกแบบ UI และ Website
โดยภาพที่เราได้จากโปรแกรม Adobe illustrator นั้นจะเป็นภาพแบบ Vector ไม่ว่าเราจะย่อหรือขยายภาพ ภาพของเราก็จะยังคมชัดอยู่ซึ่งต่างจากภาพแบบ Bitmap
การออกแบบ UI ด้วย Adobe illustrator
จากที่ได้บอกกันไปแล้วนะคะ ว่าโปรแกรม Adobe illustrator นั้นสามารถนำมาใช้ในการออกแบบ UI ได้
ก่อนที่เราจะเริ่มลงมือทำในส่วนนี้ เราควรศึกษาหลักการออกแบบUI และวางแผนโครงสร้างมาให้เรียบร้อยก่อนนะคะ
โปรแกรม Adobe illustrator นั้นสามารถกำหนดขนาดของชิ้นงานที่เราต้องการได้ ไม่ว่าจะเป็นขนาดA4 ขนาดโปสเตอร์ หรือขนาดหน้าจอมือถือ
ดังนั้นหากเราต้องการสร้างงานชนิดไหน ให้เราเลือกขนาดหน้าจอให้ตรงกับงานของเรา
โดยในที่นี้เราจะทำการเลือกขนาดหน้าจอเป็น Mobile ซึ่ง AI ก็จะให้เราเลือกรุ่นของโทรศัพท์ ตรงนี้เราสามารถเลือกตามที่เราต้องการได้เลยนะคะ
หลังจากที่ได้รูปหน้าจอโทรศัพท์แล้ว ให้เราทำการลงสีของหน้าจอตามที่เราต้องการ
ซึ่งตรงนี้จะไม่แนะนำให้ใช้สีที่ฉูดฉาดจนเเกินไปนะคะ เนื่องจากจะทำให้ผู้ใช้งานรู้สึกไม่สบายตา
โดยเราอาจจะใช้พื้นหลังของแอพเป็นสีขาว สีอ่อน หรืออาจจะทำการ Gradient พื้นหลังให้แอพของเราดูมีลูกเล่นมากขึ้นก็ได้
การจัดวางองค์ประกอบต่างๆของหน้าจอนั้น ควรปรึกษาและวางแผนกับทีมพัฒนามาให้เรียบร้อย
ควรจัดวางให้เป็นไปตามขั้นตอน อย่างเช่นจากรูปด้านบนจะเห็นได้ว่าข้อมูลจะถูกเรียงตามลำดับที่ควรจะเป็นคือ ชื่อโปรแกรม , User , Password , และปุ่ม Login
เราอาจใช้ไอคอนในการแสดงถึงสัญลักษณ์ของข้อความต่างๆ เพื่อให้ผู้ใช้จดจำได้ง่ายขึ้น ตัวอย่างจากรูปด้านบน
จะเห็นได้ว่าเราใช้ไอคอนรูปบ้านในการสื่อความหมายถึงหน้าหลัก ใช้ไอคอนรูปกล้องเมื่อต้องการกดถ่าย
ซึ่งจะช่วยให้แอพดูน่าใช้งาน ไม่เรียบและมีแต่ตัวหนังสือมากจนเกินไป
เราสามารถดาวน์โหลดไอคอนฟรีได้บนเว็บไซต์มากมายหลายเว็บ ลองหาดูกันนะคะ มีทั้งแบบฟรีและแบบพรีเมียม
จะเห็นได้ว่าการออกแบบหน้าจอของแอพนั้นไม่จำเป็นต้องใช้หลายสี อาจใช้เพียง 2-3 สี ก็เพียงพอแล้ว
หากเราใช้สีมากจนเกินไป จะทำให้ UI ของเราดูเลอะเทอะ ควรศึกษาการเลือกใช้โทนสีก่อนเริ่มทำด้วยนะคะ
ออกแบบ UI ง่ายๆด้วย Adobe illustrator
Moderator: mindphp, ผู้ดูแลกระดาน
- numtan5839
- PHP VIP Members
- โพสต์: 1706
- ลงทะเบียนเมื่อ: 04/11/2019 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การลบพื้นลังรูปภาพด้วย Adobe Illustrator CS6
โดย winnerzx » 27/06/2021 10:58 am » ใน Graphic design - 0 ตอบกลับ
- 3521 แสดง
-
โพสต์ล่าสุด โดย winnerzx
27/06/2021 10:58 am
-
-
-
โพสต์ใหม่ เครื่องมือต้างๆที่นิยมใช้ใน Adobe Illustrator CS6
โดย winnerzx » 24/06/2021 6:41 pm » ใน Graphic design - 0 ตอบกลับ
- 1654 แสดง
-
โพสต์ล่าสุด โดย winnerzx
24/06/2021 6:41 pm
-
-
-
โพสต์ใหม่ Photoshop กับ Adobe Illustrator ต่างกันอย่างไร
โดย winnerzx » 27/06/2021 5:16 am » ใน Graphic design - 0 ตอบกลับ
- 2537 แสดง
-
โพสต์ล่าสุด โดย winnerzx
27/06/2021 5:16 am
-
-
-
โพสต์ใหม่ สอนวิธีการดราฟภาพด้วย path ใน adobe illustrator
โดย ewqolf » 17/11/2022 12:23 pm » ใน Graphic design - 0 ตอบกลับ
- 1545 แสดง
-
โพสต์ล่าสุด โดย ewqolf
17/11/2022 12:23 pm
-
-
-
โพสต์ใหม่ การแก้ไขปัญหาภาษาไทยสระทับซ้อนกันใน โปรแกรม Adobe Illustrator cc 2019
โดย Bellamy » 29/10/2020 5:32 pm » ใน Graphic design - 0 ตอบกลับ
- 2256 แสดง
-
โพสต์ล่าสุด โดย Bellamy
29/10/2020 5:32 pm
-
-
-
โพสต์ใหม่ สอนดราฟตัวการ์ตูนด้วย illustrator
โดย napharat079 » 19/04/2019 5:24 pm » ใน Graphic design - 0 ตอบกลับ
- 3699 แสดง
-
โพสต์ล่าสุด โดย napharat079
19/04/2019 5:24 pm
-
-
-
โพสต์ใหม่ vertion แรก และVertion ล่าสุด ของ illustrator
โดย watcharin » 22/03/2018 4:36 pm » ใน Graphic design - 0 ตอบกลับ
- 1721 แสดง
-
โพสต์ล่าสุด โดย watcharin
22/03/2018 4:36 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 43