Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Tutorial' được đăng bởi Trương Minh Chánh, 12/5/16.

Lượt xem: 6,228

  1. Trương Minh Chánh Thành viên cấp 1

    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

    Nmryu5e.png

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

    Cmoq9Ix.png

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

    EvJs3NB.png

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

    Vg2XVTB.png

    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

    0d9cYSi.png

    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,...

    gSlDC8K.png

    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

    dff2p6W.png

    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 :D

    ...
    Chỉnh sửa lần cuối: 12/5/16
    Phạm Hữu DưHồng Sơn thích bài viết này.

Ủng hộ diễn đàn