Vectra

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

สรุปในประโยคเดียว#

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

การจัดวางหน้าจอ#

Vectra: คอลัมน์เครื่องมือ อาร์ตบอร์ดพร้อมไม้บรรทัดและกริด และแผงคุณสมบัติ

แถบเมนู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
แถบสถานะอาร์ตบอร์ด ขนาดของมัน จำนวนวัตถุ จำนวนการเลือก ตำแหน่งในประวัติ เครื่องมือที่ใช้งานอยู่ ซูม

สิ่งที่คุณทำที่นี่#

การวาด#

แคนวาสของ Vectra: เส้นทาง แฮนเดิล และอาร์ตบอร์ด

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

การจัดตำแหน่งให้แม่นยำ#

แผงคุณสมบัติ: transform, fill, stroke และ appearance

ส่วน 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 มีประโยชน์สำหรับตรวจสอบว่าจะส่งออก อะไรออกไปจริง ๆ และสำหรับวางเส้นทางที่ก็อปมาจากที่อื่น

แผงด้านขวา: สี่แท็บหลัก แล้วตามด้วยพื้นที่ทำงานสิบเอ็ดแบบ#

แท็บหลัก สี่แท็บที่คุณใช้ตลอดเวลา:

Propertiestransform, 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 LayoutAuto layout สไตล์ Figma บนเฟรมหรือกลุ่มที่เลือกอยู่
Componentsสัญลักษณ์ที่ใช้ซ้ำได้: กำหนดครั้งเดียว วางได้หลายที่
Exportตัวเลือกฟอร์แมตที่ควบคุมตัวเลือกเฉพาะของแต่ละฟอร์แมต

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

การส่งออก#

Vectra ส่งออกได้แปดวิธี และแผงบอกไว้ชัดเจนว่าแต่ละวิธีใช้ทำอะไร แทนที่จะปล่อยให้ คุณเดาเอาเอง:

แถบเครื่องมือของ Vectra: การเลือก, pen, รูปทรง, ข้อความ และการดำเนินการบูลีน

ฟอร์แมต
PNGราสเตอร์พร้อมความโปร่งใส สำหรับเว็บและ UI
JPGราสเตอร์บีบอัด ไม่มีความโปร่งใส
WebPสำหรับเว็บสมัยใหม่ ขนาดเล็ก มีความโปร่งใส
AVIFบีบอัดได้ดีที่สุด รองรับกว้างขวาง
SVGเวกเตอร์: ขยายได้และยังแก้ไขต่อได้
PDFเอกสารสากล สำหรับพิมพ์และเว็บ
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, Composervector art ยังแก้ไขได้
Animatorวัตถุของ Vectra ใส่แอนิเมชันได้ทีละชิ้น
EngineHUD hierarchy ไม่ใช่ภาพ

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

การทำงานร่วมกับผู้อื่น#

Vectra ซิงค์ ทีละการกระทำ: วัตถุที่ถูกเพิ่ม ลบ อัปเดต และแทนที่ทั้งชิ้น; เลเยอร์และลำดับของมัน; ขนาดอาร์ตบอร์ด; และเลเยอร์ที่ใช้งานอยู่

ข้อจำกัดและปัญหาที่พบบ่อย#

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