Vectra
การวาดเวกเตอร์ เส้นทาง ตัวอักษร บูลีนและ pathfinder บวกกับพื้นที่ทำงานออกแบบสิบเอ็ดแบบสำหรับแบรนด์ โลโก้ ไอคอน ลวดลาย บรรจุภัณฑ์ อินโฟกราฟิก และ UX
สรุปในประโยคเดียว#
รูปทรงและตัวอักษรที่คมชัด ขยายได้ไม่จำกัด: สตูดิโอสำหรับโลโก้ ไอคอน งานจำลองหน้าจอ UI และทุกอย่างที่ต้องคมชัดในทุกขนาด
การจัดวางหน้าจอ#

| แถบเมนู | File · Edit · Object · Type · Select · View · Plugins |
| แท็บเอกสาร | หนึ่งชุดอาร์ตบอร์ดต่อหนึ่งแท็บ |
| แถบเครื่องมือ | เลิกทำ/ทำซ้ำ, ทำสำเนา, มุมมองโค้ด SVG, การดำเนินการบูลีน, ล็อก, สวอตช์ fill และ stroke พร้อมความหนาเส้น, และปุ่มจัดตำแหน่ง/กระจาย |
| แถบไกด์ | Grid พร้อมระยะห่าง · Snap · Rulers · โลโก้กริด · Safe area · Smart guides |
| คอลัมน์ซ้าย | select, direct-select, type, line, rectangle, pen, shape, rotate, scissors, brush, add-anchor, artboard, hand |
| ขวา | Properties · Layers · Text · Illust |
| แถบสถานะ | อาร์ตบอร์ด ขนาดของมัน จำนวนวัตถุ จำนวนการเลือก ตำแหน่งในประวัติ เครื่องมือที่ใช้งานอยู่ ซูม |
สิ่งที่คุณทำที่นี่#
การวาด#

pen วางจุดยึดและแฮนเดิล direct select แก้ไขมันในภายหลัง รูปทรง เส้น
และข้อความเป็นเครื่องมือของตัวเอง คำแนะนำอยู่บนแถบเครื่องมือ และคุ้มค่าที่จะอ่านสัก
ครั้ง: Shift บังคับสัดส่วน Alt วาดจากจุดศูนย์กลาง ปุ่มลูกศรขยับทีละนิด
การจัดตำแหน่งให้แม่นยำ#

ส่วน Transform รับตัวเลขที่แน่นอน (X, Y, ความกว้าง, ความสูง, การหมุน) พร้อม Flip H, Flip V และปุ่มรีเซ็ตกลับไป 0° ปุ่มจัดตำแหน่งและกระจายบนแถบเครื่องมือ ทำงานกับสิ่งที่เลือกอยู่ และ Smart guide จะสแนปเข้ากับวัตถุอื่น ไม่ใช่กับกริด
Fill และ stroke#
ทั้งสองสลับเปิดปิดแยกจากกันได้: รูปทรงหนึ่งจะเป็น fill โดยไม่มี stroke, stroke โดยไม่มี fill หรือไม่มีทั้งคู่ก็ได้ สีแก้ไขได้เป็นค่า hex ใต้ Appearance: ความทึบ, blend mode, และการมองเห็น
รวมรูปทรง#
Pathfinder และการดำเนินการบูลีนบนแถบเครื่องมือ: union, subtract, intersect, exclude กลุ่มบูลีนหนึ่งยังแก้ไขได้อยู่ Release boolean group อยู่ใน command palette เมื่อคุณต้องการชิ้นส่วนกลับคืนมา
ตัวอักษร#
แท็บ Text เก็บตัวควบคุมด้านตัวพิมพ์ทั้งหมด ส่วนเมนู Type เก็บการดำเนินการ ต่าง ๆ: การแปลงข้อความเป็น outline และอื่น ๆ
เอฟเฟกต์#
ส่วน Effects ใช้งานแบบไม่ทำลายข้อมูล ดังนั้นเรขาคณิตข้างใต้ยังคงเป็นเรขาคณิตที่ คุณวาดไว้เหมือนเดิม
อ่านโค้ด SVG#
ปุ่มโค้ดบนแถบเครื่องมือแสดงเอกสารในรูปแบบ SVG มีประโยชน์สำหรับตรวจสอบว่าจะส่งออก อะไรออกไปจริง ๆ และสำหรับวางเส้นทางที่ก็อปมาจากที่อื่น
แผงด้านขวา: สี่แท็บหลัก แล้วตามด้วยพื้นที่ทำงานสิบเอ็ดแบบ#
แท็บหลัก สี่แท็บที่คุณใช้ตลอดเวลา:
| Properties | transform, fill, stroke, appearance, effects, align, pathfinder |
| Layers | ทุกวัตถุ จัดลำดับใหม่ได้ ซ่อนได้ ล็อกได้ |
| Text | ตัวควบคุมด้านตัวพิมพ์ |
| Illust | ฝั่งภาพประกอบ: แปรง พร้อม brush library ที่แปรงแต่ละอันแก้ไขได้ตามประเภท |
ใต้แท็บเหล่านั้นคือ accordion ที่ชื่อ Workspaces ซ่อนแผงตามสถานการณ์สิบเอ็ด แผงไว้จนกว่าคุณจะต้องใช้มัน นี่คือส่วนของ Vectra ที่ไม่ใช่เครื่องมือวาดภาพ แต่เป็น ผู้ช่วยด้านออกแบบ และมันพลาดง่ายเพราะถูกยุบเก็บไว้เป็นค่าเริ่มต้น:
| Workspace | ใช้ทำอะไร |
|---|---|
| Brand | อัตลักษณ์แบรนด์: เช็กลิสต์สิ่งที่ต้องส่งมอบ (โลโก้แบบหลัก แบบกลับสี และแบบสีเดียว, ไอคอน/สัญลักษณ์, PDF แนวทางแบรนด์) พร้อมส่วนที่เปิดหรือปิดได้ |
| Logo | ประเภทโลโก้ ภาพจำลอง และพรีเซ็ตการส่งออก: รูปแบบต่าง ๆ ที่โลโก้ต้องมีให้ครบ |
| Icon | ชุดไอคอน: ขนาด keyline และพรีเซ็ตตามแพลตฟอร์มแอป |
| Pattern | ลวดลายซ้ำ: ประเภทของไทล์ (rope, chain, dashed และอื่น ๆ) กลุ่มวอลเปเปอร์ และพรีเซ็ตลวดลาย |
| Pack | บรรจุภัณฑ์: กล่องผลิตภัณฑ์และเทมเพลตเส้นไดคัตอื่น ๆ |
| Infog | อินโฟกราฟิก: ประเภทไดอะแกรม รูปทรงผังงาน (ข้อมูลเป็นรูปสี่เหลี่ยมด้านขนาน ฐานข้อมูลเป็นรูปทรงกระบอก…) และประเภทกราฟ |
| UX | การออกแบบหน้าจอ: กรอบอุปกรณ์และพรีเซ็ต breakpoint |
| DA | การกำกับศิลป์: ข้อมูลเมทาดาทาโปรเจกต์, style tile และ การส่งออก design token |
| Auto Layout | Auto layout สไตล์ Figma บนเฟรมหรือกลุ่มที่เลือกอยู่ |
| Components | สัญลักษณ์ที่ใช้ซ้ำได้: กำหนดครั้งเดียว วางได้หลายที่ |
| Export | ตัวเลือกฟอร์แมตที่ควบคุมตัวเลือกเฉพาะของแต่ละฟอร์แมต |
accordion จะเปิดตัวเองเมื่อแท็บ workspace หนึ่งกำลังทำงานอยู่แล้ว และหัวข้อจะ แสดงว่าเป็นแท็บไหน ถ้าแผงที่คุณใช้เมื่อวานดูเหมือนหายไป มันอยู่หลัง Workspaces
การส่งออก#
Vectra ส่งออกได้แปดวิธี และแผงบอกไว้ชัดเจนว่าแต่ละวิธีใช้ทำอะไร แทนที่จะปล่อยให้ คุณเดาเอาเอง:

| ฟอร์แมต | |
|---|---|
| PNG | ราสเตอร์พร้อมความโปร่งใส สำหรับเว็บและ UI |
| JPG | ราสเตอร์บีบอัด ไม่มีความโปร่งใส |
| WebP | สำหรับเว็บสมัยใหม่ ขนาดเล็ก มีความโปร่งใส |
| AVIF | บีบอัดได้ดีที่สุด รองรับกว้างขวาง |
| SVG | เวกเตอร์: ขยายได้และยังแก้ไขต่อได้ |
| เอกสารสากล สำหรับพิมพ์และเว็บ | |
| EPS | สำหรับงานพิมพ์มืออาชีพ เข้ากันได้กับ Adobe |
| JSON | เอกสารในรูปแบบข้อมูล |
สิ่งที่คุณส่งออกก็เป็นตัวเลือกเช่นกัน: selection, artboard, all artboard หรือ slices: Slice Tool ตัดแคนวาสออกเป็นพื้นที่ที่มีชื่อกำกับ และส่งออกพร้อมกัน ซึ่งเป็นวิธีที่งานจำลอง UI ออกไปเป็นชุด asset แทนที่จะเป็นภาพ เดียว
งานพิมพ์#
ส่วนของ Vectra ที่ทำให้มันเป็นเครื่องมือ prepress ไม่ใช่แค่เครื่องมือวาด Print Production เพิ่มเครื่องหมายที่โรงพิมพ์ต้องการ:
| Crop marks | จุดที่จะตัด |
| Registration marks | เป้าเล็งสำหรับจัดแนวแท่นพิมพ์ |
| Colour bars | แถบสอบเทียบสี CMYK |
| Bleed (mm) | ลายเส้นที่ยื่นเลยเส้นตัด เพื่อไม่ให้ความคลาดเคลื่อนหนึ่งมิลลิเมตรกลายเป็นขอบขาว |
| Overprint preview | สิ่งที่จะเกิดขึ้นจริงตรงที่หมึกซ้อนทับกัน |
| Scale bar | สำหรับภาพวาดที่พิมพ์ตามมาตราส่วน |
⚠️ CMYK ตรงนี้เป็นการจำลอง แผงเองก็บอกไว้แบบนั้น: ค่าต่าง ๆ เป็นแค่การ พรีวิว และสีพิมพ์ที่แม่นยำต้องใช้ระบบจัดการสีที่ผ่านการปรับเทียบแล้ว ให้ถือว่าค่า CMYK ที่อ่านได้เป็นแนวทาง ไม่ใช่ผลพิสูจน์ และควรรู้ไว้ว่าการส่งออก CMYK ไม่มี ความโปร่งใส ซึ่งเป็นคุณสมบัติของโมเดลสีนั้นเอง ไม่ใช่ข้อจำกัดของ Vectra
ไฟล์ที่อ่านและเขียนได้#
| รูปแบบเนทีฟ | .vectra |
| นำเข้า | .svg |
| ส่งออก | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
การส่งงานไปยังสตูดิโออื่น#
สร้าง vector art และ วัตถุของ Vectra: งานวาดเดียวกันในสองรูปแบบ รับ vector art และภาพ
| ปลายทาง | สิ่งที่มาถึง |
|---|---|
| Inkwell, Composer | vector art ยังแก้ไขได้ |
| Animator | วัตถุของ Vectra ใส่แอนิเมชันได้ทีละชิ้น |
| Engine | HUD hierarchy ไม่ใช่ภาพ |
รายการสุดท้ายนั้นคือแก่นของ Vectra สำหรับงานเกม งานจำลองหน้าจอที่ส่งไปยัง Engine มาถึงในรูปแบบโครงสร้างที่ Engine จัดวางและเขียนสคริปต์ได้ ปุ่มต่าง ๆ ที่ เป็นปุ่มจริง ๆ แทนที่จะเป็นภาพแบนราบที่คุณต้องสร้างขึ้นใหม่
การทำงานร่วมกับผู้อื่น#
Vectra ซิงค์ ทีละการกระทำ: วัตถุที่ถูกเพิ่ม ลบ อัปเดต และแทนที่ทั้งชิ้น; เลเยอร์และลำดับของมัน; ขนาดอาร์ตบอร์ด; และเลเยอร์ที่ใช้งานอยู่
ข้อจำกัดและปัญหาที่พบบ่อย#
- แผงที่หาไม่เจอมักอยู่ใต้ Workspaces มีเพียงสี่แท็บเท่านั้นที่แสดงอยู่ อีก สิบเอ็ดแผงอยู่หลัง accordion ที่ยุบเก็บไว้
- รูปทรงที่ไม่มีทั้ง fill และ stroke มองไม่เห็นแต่ยังอยู่ตรงนั้น จำนวนวัตถุใน แถบสถานะคือสิ่งที่จะเผยให้เห็น
- Smart guide สแนปเข้ากับวัตถุ ส่วนกริดสแนปเข้ากับกริด ถ้ามีอะไรไม่ยอมลงตำแหน่ง ที่คุณต้องการ ให้ตรวจดูว่าตัวไหนเปิดอยู่