อีกมิติหนึ่ง ความเชี่ยวชาญใหม่ – บทช่วยสอนภาพประกอบสามมิติ

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

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

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

ใน Adobe Illustrator กระบวนการสร้างภาพสามมิติแบบดั้งเดิมนั้นน่าเบื่อ สร้างตารางมีมิติเท่ากัน วาดสี่เหลี่ยม เอียง -30° หมุน -30° ซ้ำแล้วซ้ำอีก โชคดีที่มีวิธีที่ดีกว่า Illustrator มีเอฟเฟกต์ 3D ที่ทำให้ภาพประกอบมีมิติเท่ากันอย่างรวดเร็วและง่ายดาย: “Extrude & Bevel,” “Revolve” และ “Rotate”

บทช่วยสอนนี้สาธิตวิธีสร้างภาพประกอบสามมิติโดยใช้ “Revolve” แต่ข้อมูลเชิงลึกยังนำไปใช้กับเอฟเฟกต์ 3D ที่เหลือของ Illustrator ด้วย

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

Revolve & Refine: บทช่วยสอนภาพประกอบ Isometric

ใครไม่ชอบเครื่องดื่มเย็นๆ เติมความสุขให้กับเครื่องดื่มด้วยของเหลวโดยการออกแบบขวดไอโซเมตริกพร้อมฉลาก

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

ขั้นตอนที่ #1: วาดขวดและของเหลว

1.1) สร้างเอกสาร Adobe Illustrator ใหม่

1.2) เพิ่มการอ้างอิงขวดในเอกสาร

1.3) วาดโครงร่างของขวดและของเหลวด้านใน

1.4) แบ่งขวดและของเหลวครึ่งหนึ่ง (ตามที่แสดงด้านล่าง)

1.5) ความหนาของเส้นโครงร่างของขวดเป็นตัวกำหนดความหนาของแก้ว

*เคล็ดลับสำหรับมือโปร: คัดลอกและวางงานศิลปะภายนอกอาร์ตบอร์ดเพื่อเป็นข้อมูลสำรอง

ขั้นตอนที่ #2: ใช้เอฟเฟกต์การหมุน

ตามที่ชื่อบอกไว้ “Revolve” จะเปลี่ยนรูปร่างรอบๆ แกนของมัน ใน Illustrator ตำแหน่งของแกน "Revolve" จะคงที่ในแนวตั้ง นี่คือเหตุผลที่ขวดถูกร่างและแบ่งครึ่ง

*เคล็ดลับสำหรับมือโปร: ทั้งโครงร่างขวดและวัตถุที่เป็นของเหลวไม่ควรมีการไล่ระดับสีเป็นสีเติม

2.1) หากต้องการค้นหาเอฟเฟกต์ “หมุน” ให้ไปที่: เอฟเฟกต์ > 3D > หมุน...

2.2) ที่ด้านบนสุดของหน้าต่างโต้ตอบ จะมีฟิลด์ชื่อ “ตำแหน่ง” เลือก "ภาพสามมิติด้านซ้าย"

2.3) มุม – นี่คือระดับการหมุนรอบแกนของวัตถุ หากตั้งค่าเป็น 180° ผลลัพธ์จะเป็นขวดในแนวตั้งแบ่งครึ่ง ตั้งค่ามุมเป็น 360° สำหรับขวดที่หมุนได้เต็มที่

2.4) ออฟเซ็ต – ควบคุมระยะออฟเซ็ตจากแกนตั้งของวัตถุ ป้อน "0"

2.5) พื้นผิว – ตั้งค่าวัสดุและคุณสมบัติของแสงของวัตถุ เลือก "ไม่มีการแรเงา"

ทาดา! ขวดมีมิติเท่ากันกับของเหลว ถึงเวลาผ่อนคลาย ผ่อนคลาย และรอ! ขวดนั้นต้องมีฉลาก

*เคล็ดลับสำหรับมือโปร: อย่าใช้ฟังก์ชัน "ขยายลักษณะที่ปรากฏ" บนขวดจนกว่าจะสร้างฉลาก

ขั้นตอนที่ #3: เตรียมฉลาก

3.1) ใช้ขวดเพื่อกำหนดขนาดฉลาก

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

3.3) ความยาวของฉลากคำนวณโดยใช้สูตรเส้นรอบวงวงกลม2πr

3.4) ด้วยการออกแบบฉลากที่น่าพอใจ ให้แปลงฉลากทั้งสองเป็นสัญลักษณ์ พบจานสี “สัญลักษณ์” ภายใต้: หน้าต่าง > สัญลักษณ์

3.5) ลากและวางการออกแบบฉลากเป็นรายบุคคลลงในจานสีเพื่อสร้างสัญลักษณ์

*หมายเหตุ: สัญลักษณ์ใน Illustrator และ Sketch ทำงานในลักษณะเดียวกัน

ขั้นตอนที่ #4: แมปฉลากลงบนขวด

ตราบใดที่ขวดยังไม่ได้สร้างภาพเวกเตอร์โดยใช้ฟังก์ชัน "ขยายลักษณะที่ปรากฏ" ก็สามารถแก้ไขได้อย่างเต็มที่

4.1) เลือกขวดและแสดงจานสี "ลักษณะที่ปรากฏ": หน้าต่าง > ลักษณะที่ปรากฏ

4.2) จากนั้นเลือก "3D Revolve" และกล่องโต้ตอบจากก่อนหน้านี้จะปรากฏขึ้น

4.3) หากต้องการจับคู่การออกแบบกับขวด ให้คลิกตัวเลือกด้านล่างซ้าย: “ภาพแผนที่”

4.4) ทำให้สามารถเลือกและปรับสัญลักษณ์สำหรับขวดได้

4.5) ตรวจสอบให้แน่ใจว่าได้จับคู่สัญลักษณ์กับพื้นผิวที่ถูกต้อง (ดูด้านล่าง)

4.6) คลิก “ปรับขนาดให้พอดี” และฉลากจะจับคู่กับขวด

4.7) ทำตามขั้นตอนเดียวกันกับป้ายคอ

ขั้นตอนที่ #5: หลีกเลี่ยงไฟล์ยุ่ง

5.1) ตอนนี้ ได้เวลาเปลี่ยนขวดให้เป็นเส้นโค้ง Bezier โดยใช้ฟังก์ชัน "Expand Appearance": Object > Expand Appearance

Illustrator ไม่ได้มีไว้สำหรับการจัดการวัตถุ 3D เป็นหลัก การขยายลักษณะที่ปรากฏของวัตถุจะสร้างกลุ่มขององค์ประกอบที่มีขนาดเล็กลงซึ่งทำให้เกิดภาพลวงตาของวัตถุ 3 มิติ

5.2) เพื่อให้สิ่งต่างๆ เป็นระเบียบเรียบร้อย ให้รวมองค์ประกอบต่างๆ เข้ากับเครื่องมือ "Pathfinder" หรือ "Shape Builder" (ดูด้านล่าง)

*เคล็ดลับสำหรับมือโปร: การเข้าร่วมวัตถุจะสร้างจุดยึดที่ไม่ต้องการ ลดขนาดโดยไปที่ Object > Path > Simplify สำหรับผู้ที่ใช้ Illustrator เป็นประจำ ขอแนะนำให้ใช้ปลั๊กอิน VectorScribe และเครื่องมือกำจัดจุด

ขั้นตอนที่ #6: เพิ่มชีวิตชีวาด้วยสีและการไล่ระดับสี

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

ไชโยกับภาพประกอบมีมิติเท่ากัน!

ภาพประกอบ Isometric นำความลึก ความมีมิติ และบุคลิกภาพมาสู่โครงการออกแบบที่หลากหลาย ใช้หลักการที่สรุปไว้ในบทช่วยสอนนี้เพื่อสำรวจความเป็นไปได้ของภาพสามมิติเพิ่มเติม และอย่าลืมลองใช้เอฟเฟกต์ 3 มิติอื่นๆ ของ Illustrator: “หมุน” และ “ขับออกมาและยกนูน”

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

• • •

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

• อายุการเก็บรักษาภาพ – เหตุใดภาพประกอบการออกแบบเว็บจึงล้าสมัย
• คำแนะนำทีละขั้นตอนในการออกแบบภาพประกอบที่กำหนดเองโดยไม่ต้องมีทักษะการวาดใดๆ
• ความเป็นจริงใหม่: VR, AR, MR และอนาคตของการออกแบบ
• The Designer's Edge – ภาพรวมของปลั๊กอิน Photoshop
• Evolving Emojis: การออกแบบสำหรับหน้าใหม่ของการรับส่งข้อความ