Tạo icon font bằng file svg từ ảnh bitmap có sẵn bằng Ps và Ai

Xin chào mọi người

Hôm nay mình hướng dẫn tạo một file svg từ file bitmap có sẵn. Vì là kỳ trước mình có muốn làm một bộ icon font riêng cho dự án, nên có tìm cách chuyển hình icon bitmap sang file svg.

Đây chỉ là kinh nghiệm riêng mình thôi nhé, ai có ý hay hơn mình xin học hỏi

Bước 1: Đầu tiên ảnh icon bitmap mở bằng photoshop sau đó mình chuyển về màu đen các chi tiết hình và bỏ background => lưu lại định dạng " psd" nhé cho dể dùng trong AI



Bước 2: Sau đó mở file " psd" này lên bằng AI và dùng "Selection Tool" để chọn hết ảnh



Bước 3: Tiếp tục chọn Option -> Rasterize và làm theo hình



Bước 4: Tiếp tục chọn Image Trace -> Make



Bước 5: Tiếp tục chọn "Ok" khi này AI sẽ vẽ lại tất cả các chi tiếc có trong ảnh và mình chỉ cần lưu lại với định dạng mong muốn



Bước 6: Ta lưu lại với định dạng svg vì mình cần làm icon font, nếu bạn cần dùng trong photoshop thì lưu lại với định dạng khác như ai,...



Bước 7: Tới đây ta cần bỏ cái background màu trắng đi chỉ giữ lại các chi tiết tô đen thôi, thì ta cần mở file svg đã lưu trước đó lên và bỏ hết những <path> nào có "... fill="#FFFFFF" ..." như hình bên dưới



Vậy là file SVG của ta có thể tải lên trang icomoon.io để tạo icon font rồi
Lần sau mình sẽ làm một bài tạo icon font riêng

Cám ơn mọi người đã xem