Bài viết về: Về Artworks
Bài viết này cũng có sẵn trong:

Cho phép khách hàng chọn Font Family, Font Color, và Text Background

Trước đây, các cài đặt Font và Color bị khóa vào từng Text Layer riêng biệt. Teeinblue đã chuyển các cài đặt này thành các Form Elements độc lập. Giờ đây, bạn có thể tạo Font và Color riêng và áp dụng chúng cho nhiều Text Layer cùng lúc bằng tính năng Populate Values.



Vui lòng đọc tiếp để tìm hiểu thêm về những thay đổi mới này.




Chuẩn bị Assets


Upload Fonts và tạo Font Category
  • Như bạn đã biết, để upload Font của mình, vui lòng vào Assets > Upload Fonts > và nhấp vào nút Upload Font

Hãy đảm bảo chỉ sử dụng định dạng font TTF ở đây.


  • Sau khi upload Fonts, bạn sẽ cần tạo một category cho chúng. Bạn có thể làm điều này qua Assets > Font Categories > và nhấp vào nút + New Category. Sau đó, bạn có thể thêm bất kỳ Fonts nào đã upload vào Category của bạn tại đó.

👉 Nhấp vào đây để chuyển đến bước cấu hình Artwork.


Tạo Color Category cho Font

Như bạn đã biết, bạn có hai lựa chọn chính cho Font Color:

  • Color Library: Tạo một Color Category riêng để cung cấp các màu đã được thiết lập sẵn cho khách hàng chọn. Bạn có thể đọc thêm về Color Category tại đây.

  • Color Picker: Cho phép khách hàng chọn bất kỳ màu tùy chỉnh nào trực tiếp qua công cụ chọn màu.

Việc liên kết các cấu hình này với các Text Layer cụ thể của bạn sẽ được hướng dẫn ở bước sau.


👉 Nhấp vào đây để chuyển đến bước cấu hình Artwork.


Tạo Text Background Category


Bạn có thể sử dụng bất kỳ Clipart Category tiêu chuẩn nào làm background cho text của bạn. Dù chúng tôi sẽ hướng dẫn cách liên kết chúng vào layers của bạn ở bước sau, bạn nên bắt đầu bằng việc cài đặt category.
Tạo một Clipart Category mới cho font backgrounds của bạn như sau:


👉 Nhấp vào đây để chuyển đến bước cấu hình Artwork.




Cài đặt Artwork sử dụng Custom Font Family, Font Color, và Text Background


Như đã đề cập trước đó, quy trình làm việc được cập nhật của chúng tôi tách Font Selection và Color Selection thành một Form Element độc lập. Thay vì bị giới hạn trong từng Text Layer riêng lẻ, các cài đặt này giờ được tạo thành các tùy chọn có thể áp dụng cho toàn bộ thiết kế của bạn.


Ở giai đoạn này, bạn chỉ đang tạo các tùy chọn để lựa chọn. Chúng chưa được liên kết với bất kỳ Text Layer cụ thể nào; chúng chỉ đóng vai trò là các lựa chọn mà khách hàng của bạn sẽ tương tác.


Tạo Form Element để chọn Custom Font

  • Trong Artwork Editor của bạn, nhấp vào + Layer và chọn Font

  • Bảng cài đặt cho layer này khá quen thuộc. Vui lòng chọn nó vào Font Category mà bạn đã tạo ở bước trước.


Tạo Form Element để chọn Font Color

  • Trong Artwork Editor của bạn, nhấp vào + Layer và chọn Color

  • Trong bảng cài đặt, bạn có thể chọn Color Category hoặc Color Picker


Lưu ý rằng ở bước này, bạn mới chỉ cấu hình các tùy chọn Form Element. Bạn chưa tạo Text Layer thực tế; việc đó sẽ được xử lý ở các bước tiếp theo.


Tạo Font Background Category

Bạn nên chỉ chọn Font Color hoặc Font Background cho text của bạn, không nên dùng cả hai cùng lúc.


Vì Font Background hoạt động như một Clipart Category mà Custom Text của bạn sẽ lấy dữ liệu từ đó ở bước sau, vui lòng bắt đầu bằng cách tạo một Clipart Category mới.


  • Trong Artwork Editor, nhấp vào + Layer và chọn Clipart Category > 1 Clipart Category


  • Chọn Clipart Category bạn đã tạo ở bước trước


  • Vì element này đóng vai trò là nguồn cho text background của bạn, nó không cần phải hiển thị trên thiết kế sản phẩm. Bạn có thể kéo nó ra khỏi khu vực Canvas, hoặc vào Extra > và cài đặt Display this layer on: None




Liên kết Custom Text Layer của bạn với Form Elements


Bây giờ bạn đã tạo các elements Font Family, Font Color, và Text Background, đã đến lúc kết nối chúng với Custom Text của bạn. Trong phần này, bạn sẽ học cách tạo một Custom Text layer và sử dụng tính năng Populate values để liên kết nó với ba elements độc lập này, cho phép khách hàng tùy chỉnh văn bản của họ một cách linh hoạt.


  • Để tạo một Custom Text layer mới, trên Artwork Editor của bạn, nhấp vào + Layer sau đó chọn Single-line Text

  • Hãy tập trung vào phần Populate Values. Bật Populate Font from another option để Custom Text của bạn có thể lấy giá trị chọn Custom Font từ layer bạn đã tạo.

Với tính năng thông minh mới của chúng tôi, nếu layer của bạn chỉ có một giá trị có sẵn để lấy, nó sẽ được tự động chọn cho bạn. Trong trường hợp này, {{font}} đã được điền sẵn.


  • Tiếp tục làm như vậy với Color Option hoặc Background option


  • Vậy là xong. Custom Text layer của bạn hiện đã được liên kết với các tùy chọn Font và Font Color.



💡Bạn có thể liên kết nhiều Text Layer với cùng một tùy chọn Font hoặc Font Color. Điều này đảm bảo rằng khách hàng chỉ cần chọn một lần và nó sẽ tự động áp dụng cho tất cả các Text Layer được kết nối cùng lúc.


Trong ví dụ trên, Khách hàng chỉ phải chọn tùy chọn Font properties một lần và chúng sẽ được áp dụng cho cả hai Custom Text layers.

Cập nhật vào: 07/07/2026

Bài viết có hữu ích không?

Chia sẻ phản hồi của bạn

Hủy bỏ

Cảm ơn!