Chức năng Add Text và các tùy chỉnh
MỤC LỤC
Personalization Settings - Các cài đặt cá nhân hoá cho text
Tính năng Paragraph
Thêm Text vào artwork
Để thêm text vào artwork, hãy bấm vào nút "Text".
Hoặc tải lên file PSD. Nếu bạn chọn nhập layer text từ file PSD, hãy nhớ ấn "Convert" layer đó từ file PSD thành layer text của Teeinblue. Sau khi covert, bạn nên kiểm tra lại font family và chỉnh sửa lại nếu cần
Các cài đặt chung
Default text
Viết 1 đoạn text mặc định để hiển thị trên thiết kế. (Ví dụ: "Lily", "17/09/2020" etc.)
Nếu bạn muốn thay đổi tên của layer được hiển thị trên personalization form, hãy nháy đúp vào tên của layer đó ở bảng bên trái.
Text color
Thay đổi màu mặc định của đoạn text.
Fonts
Tìm hiểu thêm ở bài viết: Về Fonts.
Auto scale when text is too long
Chọn 1 giới hạn cho độ dài của khung text. Sau khi bật tính năng này, khi text quá dài (hoặc quá nhiều kí tự), app sẽ tự động giảm kích thước của text xuống để text không bị trượt khỏi vị trí ban đầu trong artwork.
Với các text ngắn như tên, gợi ý cài max width = 500 - 600px.
Text Background
Bạn có thể add thêm hiệu ứng Background cho field Custom Text
Và đây là kết quả khi bạn publish Campaign
Personalization Settings - Các cài đặt cá nhân hoá cho text
Add toggle to show/hide
Tương tự như tùy chỉnh cho phần ảnh Layer. (Tham khảo thêm tại đây)
No Personalization
Bạn hãy bật tính năng này nếu bạn không muốn khách hàng cá nhân hoá layer text hiện tại
Bật tính năng cá nhân hóa cho Text: "Enable Personalization"
Sử dụng tính năng "Enable Personalization" sẽ cho phép khách hàng được phép tự thay đổi đoạn text.
Sau khi bạn bật lên, sẽ có một trường hiển thị trên storefront cho phép khách hàng điền đoạn text mà họ muốn thêm vào.
Option Title
Tên hiển thị của layer text trong personalization form trên storefront.
Ví dụ: Woman's name, Dog's name...
Placeholder Text
Một đoạn text tạm thời xuất hiện trong form điền text.
Ví dụ: Type your name here
Input type
Chọn cách hiển thị mặc định của text:
Hiển thị cả chữ và số - All characters (Aa Bb 123 @#$)
Chỉ hiển thị số - Only numbers (123)
Hiển thị ngày tháng năm - Date picker
Input text case
Chọn cách hiển thị của các kí tự text mà khách hàng điền:
Hiển thị đúng như khách hàng tự viết - Normal
Chữ thường - lowercase
Chữ in hoa - UPPERCASE
Chỉ in hoa chữ cái đầu - Capitalize Each Word
Text character limit
Giới hạn số kí tự khách hàng có thể điền.
Sử dụng tính năng này để tránh trường hợp đoạn text quá dài đè lên các phần khác trong design.
Enable prefix/suffix
Cho phép viết sẵn phần chữ không cá nhân hoá vào trước hoặc sau layer chữ hiện tại. Phần chữ này sẽ không bị thay đổi khi khách hàng điền thêm phần text cá nhân hoá
Eg. "Mr". Leroy -> Chữ Mr. là prefix
Cho phép khách hàng đổi màu chữ - Allow customers to change Text Color
Mọi người có thể chọn hiển thị dưới dạng
Color Picker
chỉ giới hạn một số màu cố định với Color Category (trong trang Assets). Đọc thêm về Color Category tại đây
Cho phép khách hàng đổi font chữ - Allow customers to change Font
Khách hàng sẽ có thể đổi font chữ dựa trên những lựa chọn bạn đã cài đặt. Tính năng này sẽ chỉ hoạt động nếu layer text gốc sử dụng Custom Font
Bước 1: Cài đặt Font Category trong trang Assets > Font Categories. Đọc thêm về cách cài đặt Font Categories tại đây
Step 2: Quay trở lại chỉnh sửa Artwork > chọn Font Category mà bạn vừa mới tạo
Và đây là kết quả trên storefront
Mark as required
Sử dụng tính năng này sẽ khiến khách hàng buộc phải điền vào trường text trống trước khi tạo order.
Align text
Sử dụng tình năng này để chọn căn chính trái, phải, giữa cho text khi text được nhập trên trang sản phẩm.
Stroke Text
Bạn có thể add thêm hiệu ứng stroke cho field Custom Text.
Và đây là kết quả khi bạn publish Campaign:
Bạn có thể kết hợp đồng thời 2 tính năng Text Background và Stroke Text cùng lúc
Letter Spacing
Bạn có thể thay đổi letter spacing cho layer text như dưới đây:
Tính năng Paragraph
Tạo Paragraph
Trong Artwork Editor, bấm vào icon hình dấu +, rồi chọn Paragraph
Paragraph container
Các lưu ý chính:
Kích thước của container sẽ cố định. Chữ trong paragraph sẽ không tràn ra khỏi vùng này.
Nếu đoạn text dài hơn chiều ngang của container → text sẽ được tự động xuống dòng tiếp theo
Nếu đoạn text dài hơn chiều cao của container → size chữ sẽ được tự động nhỏ lại để fit với container
Nếu đoạn text ngắn hơn chiều cao của container → đoạn chữ sẽ được giữ nguyên, không có thay đổi gì.
Căn chỉnh Paragraph
Căn theo chiều ngang
Căn theo chiều dọc
Auto scale (chiều trục dọc)
Đoạn Paragraph sẽ được tự động scale font size theo chiều dọc. Bạn không thể tắt tính năng này.
Các lưu ý chính:
Trên trang Product Page, nếu đoạn text dài hơn chiều dọc của container, font size sẽ được tự động giảm xuống để fit vào trong container.
Tính năng auto scale hiện chỉ hoạt động ở Campaign Editor và trang Product Page. Bạn chưa view được nó trong Artwork Editor
Paragraph letter spacing
Bạn có thể điều chỉnh khoảng cách giữa các kí tự cho đoạn Paragraph của bạn với setting
Các tùy chỉnh về Font
Bạn có thể dùng các tùy chỉnh sau:
Font Size
Font Family
Font Color
Nếu Paragraph đã dài/rộng đến sát container, font size sẽ không thể tăng thêm được nữa.
Text Background
Background sẽ được áp dụng lên cho đoạn Paragraph, chứ không phải vùng hiển thị của container.
Text character limit
Tính năng này sẽ được áp dụng cho toàn bộ đoạn paragraph, chứ không phải cho mỗi dòng. Lưu ý nếu bạn sẽ dụng kí tự [Enter] hay [Spacebar] thì cũng sẽ được tính là 01 kí tự.
Vertical offset
Bạn có thể tìm thấy tính năng này trong mục Extra. Tính năng này được dùng để update vị trí hiển thị của đoạn Paragraph trong file render.
Tùy vào custom font bạn dùng, đôi khi trong file render, đoạn paragraph có thể sẽ bị render lệch vài pixels.
Lý do là bởi chúng tôi không thể tính toán chính xác được vị trí của vài font chữ viết tay. Do vậy mà có sự chênh lệch nhỏ này giữa Artwork Editor, trang Product Page, và file render.
Nếu đoạn Paragraph được top-aligned, chúng có thể sẽ lệch vài pixel xuống phía dưới trong order design.
Nếu đoạn Paragraph được bottom-aligned, chúng có thể sẽ lệch vài pixel lên trên trong file order design.
Nếu đoạn Paragraph được middle-aligned, sẽ không có độ lệch trong file order design, bạn sẽ không cần dùng tính năng này.
Nếu bạn gặp phải trường hợp này, hãy làm theo các bước sau để fix file order design:
Bước 1. Mở Artwork. Và chỉnh sửa lại setting vertical offset.
- 1 để đi lên 1px và + 1 để đi xuống 1px)
Bước 2. Save Artwork sau khi bạn chỉnh sửa xong
Bước 3. Regenerate lại file order design.
Bạn có thể lặp lại Bước 1 để được kết quả như mong muốn.
Bước 4. Update lại Campaign sau khi có được kết quả hài lòng.
Các tính năng về text không dùng được với Paragraph
Curve Text
Skew Text
Input Type
Tùy chỉnh thêm
Add Condition
Đọc thêm về tính năng này ở đây: Thêm Điều kiện cho Layer
Custom class
Dùng để thêm style cho đoạn text. Bạn sẽ cần kiến thức code CSS khi sử dụng.
Cập nhật vào: 20/08/2024
Cảm ơn!