Hướng dẩn chuyển đổi văn bản Photoshop thành SVG

Với sự ra đời của màn hình độ nét cao , các nhà thiết kế web bây giờ phải đảm bảo rằng những hình ảnh họ sử dụng được tối ưu hóa cho HD . Bỏ qua quá trình này có thể làm cho các trang web bị mờ hoặc bị pixel, để lại ấn tượng không tốt đối với du khách. Một trong những cách tốt nhất để xử lý màn hình HD là sử dụng Vector Graphic bất cứ khi nào có thể.

psd-svg.jpg

Vector có thể mở rộng ở bất kỳ kích thước nào, vì vậy nó sẽ trông tuyệt vời trên màn hình HD. Trong bài đăng này, chúng tôi muốn chia sẻ một mẹo nhanh về cách chuyển đổi văn bản Photoshop thành SVG . Ví dụ: nếu bạn có một biểu trưng dựa trên văn bản trong thiết kế của bạn, có thể bạn sẽ thấy mẹo này rất hữu ích.

Photoshop Stage

Đối với ví dụ này, chúng tôi sẽ sử dụng một biểu tượng văn bản đơn giản được tạo ra bằng cách sử dụng font Pacifico.

logo-example.jpg

Trên tab Layers trong Photoshop, nhấp chuột phải vào layer văn bản và chọn Convert to Shape (ảnh chụp màn hình).

convert-to-shape.jpg

Sau đó, lưu tệp ở định dạng EPS của Photoshop .

save-eps.jpg

Giai đoạn Illustrator

Mở tệp EPS trong Adobe Illustrator. Bạn sẽ thấy rằng văn bản bây giờ là một đối tượng vector.

vector-obj.jpg

Trong giai đoạn này, bạn có thể thực hiện một số điều chỉnh như xóa các lớp không cần thiết, thay đổi màu nền hoặc thay đổi kích thước. Để thay đổi kích thước tài liệu trong Illustrator, chỉ cần vào File> Document Setup và chọn Edit Artboards.

Bạn có thể sử dụng chuột để thay đổi kích thước của Artboard, hoặc chỉ định kích thước chính xác hơn bằng cách điền vào Width (W) và Height (H) .

resize-artboard.jpg

Tiếp theo, lưu tệp ở định dạng SVG , đây là tuỳ chọn mặc định. Và đó là nó.

save-svg.jpg

Phần kết luận

Hành động chuyển đổi phông chữ thành Shape là để đảm bảo khả năng tương thích trên nhiều máy tính - khi bạn đang làm việc từ xa, các phông chữ khác nhau được cài đặt trên các hệ thống khác nhau có thể gây ra lỗi "Font missing". Điều này cũng có thể xảy ra với các phiên bản khác nhau của Adobe Illustrator hoặc Photoshop. Chuyển văn bản sang SVG sẽ giúp giảm thiểu hoặc loại bỏ các vấn đề liên quan đến tính tương thích.
 
  • Like
Reactions: TAH
Back
Bên trên