Figma
Figma Trace Ảnh: Biến Logo Raster Thành Vector Sạch, Chỉnh Sửa Được
Logo raster thành vector sạch, chỉnh sửa được trong Figma qua sáu bước: chuẩn bị ảnh, trace, chọn số màu, dọn kết quả, flatten hoặc outline phần cần thiết, xuất SVG. Bài dùng plugin Tracepen làm ví dụ, và ghi chỗ lệnh Vectorize của Figma làm cùng bước. Về câu hỏi Figma làm được gì sẵn, xem Figma có chuyển PNG sang SVG được không.
1. Chuẩn bị ảnh
- Dùng bản gốc lớn nhất có. Trace bám theo cạnh pixel nên ảnh 200 px cho đường cong méo. Trợ giúp Vectorize của Figma cũng nói ảnh phức tạp hoặc độ phân giải thấp có thể không tốt.
- PNG tốt hơn JPEG. JPEG để lại nhiễu mờ quanh cạnh mà bộ trace có thể đọc thành hình thừa.
- Bỏ nền không cần để nó không thành một hình riêng.
2. Trace
Mở plugin Tracepen, chọn layer logo trên canvas và bấm Use selection: plugin xuất node đang chọn thành PNG rồi trace. Cũng có thể chọn file trong panel. Với Vectorize: chọn ảnh, More, Vectorize, tinh chỉnh ở Recolor (trợ giúp Figma).
3. Chọn số màu
Đây là thiết lập quyết định kết quả có sạch hay không. Trong Tracepen là thanh Color number: đặt bằng số màu phẳng thật của logo. Quá cao thì pixel khử răng cưa thành hình mảnh thừa; quá thấp thì hai màu thật bị gộp. Danh sách Color Layers cho bỏ tick từng màu: logo trên nền trắng hiện nền trắng như một layer riêng, bỏ tick nếu muốn nền trong suốt. Trong Vectorize là Number of colors, Number of grays và Threshold. Gói miễn phí của Tracepen giới hạn số màu mỗi lần xuất; logo một hoặc hai màu là trường hợp điển hình nằm trong giới hạn.
4. Làm mượt và lọc
Noise filter loại đốm nhỏ, hữu ích cho logo gốc JPEG. Corner smooth quyết định mức bo góc thành đường cong: để thấp cho logo hình học góc nhọn, cao hơn cho hình hữu cơ. Đổi từng thanh một rồi trace lại.
5. Add to design và dọn
- Bấm Add to design: kết quả đặt ở giữa khung nhìn dưới dạng layer vector thật. Nếu chưa đăng nhập, plugin yêu cầu đăng nhập tài khoản 3dshouse ở bước này rồi chạy tiếp.
- Phóng 400% kiểm góc, nét mảnh, lỗ nhỏ trong chữ.
- Xóa đốm thừa. Chọn các layer cùng nhóm và dùng Flatten (Alt+Shift+F trên Windows, Option+Shift+F trên Mac) để gộp thành một layer vector. Figma ghi Flatten là thao tác phá hủy: không tách lại được, nhưng Ctrl/Cmd+Z và lịch sử phiên bản khôi phục được (Flatten layers). Giữ một bản chưa flatten.
- Nếu hình còn stroke, dùng Outline stroke (Ctrl+Alt+O / Command+Option+O) để thành hình tô; sau đó không đổi được thuộc tính stroke (Convert strokes to vector paths).
6. Xuất SVG
Chọn kết quả và thêm export SVG ở mục Export của bảng thuộc tính. Hai thiết lập liên quan theo trang export của Figma: Outline text chuyển chữ thành glyph, và Simplify stroke bật mặc định cho vector network có stroke trong hoặc ngoài; đã outline stroke ở bước 5 thì không còn gì để đơn giản hóa.
Lỗi thường gặp
- Viền lởm chởm hình nhỏ: giảm số màu, tăng noise filter.
- Đốm trong vùng phẳng: bắt đầu từ PNG hoặc tăng noise filter.
- Nét mảnh mất hoặc đứt: giảm noise filter, dùng ảnh lớn hơn.
- Gradient thành dải: tăng nhẹ số màu hoặc dựng lại gradient trong Figma.
Khi trace là công cụ sai
Ảnh chụp (không có vùng phẳng), nguồn quá nhỏ hoặc mờ (vẽ lại bằng công cụ hình của Figma thường nhanh hơn), logo mà thương hiệu có sẵn bản vector (xin SVG hoặc PDF gốc), và artwork nhiều gradient. Thêm về plugin: Tracepen cho Figma; so sánh các plugin ở bài này.
