Blog

Lời khuyên để giúp bạn dùng đúng cách trộn chữ vào trong hình ảnh

Home / Blog / Lời khuyên để giúp bạn dùng đúng cách trộn chữ vào trong hình ảnh

1 year ago Comment!

Các mô hình của việc sử dụng văn bản trên ảnh nền đã được phổ biến trong nhiều năm qua. Có nguồn gốc tốt trước khi thiết kế web, văn bản trên một hình ảnh có thể cung cấp một kinh nghiệm cho nhiều cảm xúc hấp dẫn và phong phú theo ngữ cảnh. Trong khi ngày nay, hình ảnh phải được nhỏ hơn nhiều để cho phép băng thông chậm hơn rất nhiều, khi tốc độ kết nối và mật độ màn hình tăng nhanh chóng, chúng tôi được mở ra để sử dụng hình ảnh lớn hơn nhiều trong các thiết kế của chúng tôi.

Quyết định thiết kế liên quan đến kỹ thuật này là cực kỳ quan trọng để xem xét và phát triển thực hành tốt nhất để quản lý thực hành này là bắt buộc để giữ lại thiết kế chất lượng cao. Người ta có thể chỉ cần là đặt văn bản trên bất kỳ hình ảnh mong đợi để tìm đúng.

Trong bài viết này, chúng tôi sẽ thảo luận vè năm khía cạnh khác nhau của việc đặt văn bản qua hình ảnh đó sẽ giúp bạn đúng trộn chữ vào hình ảnh.

 

Lưu ý : trong suốt bài viết, các nguyên tắc tương tự được áp dụng khi lựa chọn video và văn bản kết hợp.

  1. Tương phản và độ sáng thông qua màu

Sử dụng hình ảnh có độ tương phản rõ nét với các văn bản là bắt buộc. Đặc biệt sử dụng hình ảnh tốt hơn với văn bản nhẹ hơn, hoặc không tốt của hình ảnh với các bộ lộc hoặc một phần tử che phủ, có thể là một cách hiệu quả để đảm bảo bạn đang sử dụng đủ độ tương phản.

Một số lời khuyên để đạt được màu sắc thích hợp và độ tương phản độ sáng:

  • Nếu bạn không thể thấy ngay letterforms, độ tượng phản sẽ tắt. ( Letterforms: Một glyph(nét ) đơn hoặc một chữ, có thể thấy trên giấy hoặc màn hình. Nó là phần thiết kế của chữ.)
  • Sự tương phản không luôn luôn có nghĩa là ánh sang tối hoặc màu bổ sung cũng cung cấp độ tương phản tự nhiên.
  • Nếu hình ảnh phức tạp và đầy đủ trong một hình tập trung, sử dụng lớp phủ hoặc chỉnh sửa các hình ảnh sẽ có thể là lựa chọn hiệu quả nhất.

Trong ví dụ này, chúng tôi sử dụng các bộ lọc Webkit để thao tác tương phản và độ sáng của hình ảnh, mà chúng tôi đặt và thao tác sử dụng thêm <div>. Các bộ lọc, không đặt trước, trông giống như sau : filter: brightness(40%) contrast(70%);

tuong-phan-va-do-sang-thong-qua-mau

tuong-phan-va-do-sang-thong-qua-mau-2

Kiểm tra bản demo

Một vài ví dụ

mot-vai-vi-du
mot-vai-vi-du-2
mot-vai-vi-du-3
mot-vai-vi-du-4

  1. Độ tương phản qua kích thước và định vị

Màu sắc không phải là cách duy nhất để cải thiện độ tương phản của hình ảnh liên quan đến bị che khuất văn bản. Chọn kích thước văn bản và vị trí với mối quan hệ các yếu tố trọng tâm của hình ảnh là rất cần thiết, vì điều này liên quan đến khả năng đọc văn bản.

Trong ví dụ này, chúng tôi đã chọn một số hình ảnh với dung lượng lớn, khu vực bày trời tương đối đồng nhất. đây là khu vực hoàn hảo để đặt văn bản. Ngược lại, một vị trí ít nhiều có thể đọc được các văn bản sẽ được trực tiếp ở trung tâm của hình ảnh, nơi đường chân trời xuất hiện.

do-tuong-phan-qua-kich-thuoc-va-dinh-vi

Kiểm tra demo

 

Một vài ví dụ them:

kiem-tra-demo
kiem-tra-demo2

 

  1. Khả năng đọc thông qua chiều sâu

Chọn một hình ảnh mà sử dụng độ sâu trường ảnh. Điều này sẽ cho phép khung cảnh mượt hơn cho văn bản và sẽ tăng khả năng đọc. đặt van bản của bạn trên các phần ngoài tiêu cự phần của hình ảnh, và chắc chắn rằng vác văn bản màu tương phản đầy đủ với các màu cơ bản của khu vự trong tiêu cự.

Chúng tôi có thể làm điều này một cách dễ dàng bằng cách đặt văn bản trong các lĩnh vực trọng tâm thấp hơn, như trong ví dụ này :

kha-nang-doc-thong-qua-chieu-sau

Kiểm tra demo

Một vài ví dụ thêm :

kiem-tra-de-mo-4
de-mo-5

 

 

  1. Hình ảnh chủ đề lựa chọn

Văn bản qua hình ảnh chỉ có hiệu quả như trong các cuộc họp suy ra từ sự kết hợp. Ví dụ, không nện chọn hình ảnh chung chung nếu hình ảnh cụ thể hơn sẽ giao tiếp đầy đủ hơn. Khi lựa chọn hình ảnh, xem xét việc gợi nhớ tình cảm và bối cảnh theo nghĩa đen của hình ảnh, đặc biệt là khi nó liên quan đến những giai điệu của thông điệp bản sao được thiết kế để truyền đạt.

Một số lời khuyên:

  • Lựa chọn hình ảnh mà có thể hiện thị toàn bộ văn bản, người sử dụng sẽ thấy rõ đối tượng của hình ảnh và hiểu được những hành động được thực hiện trong các hình ảnh nếu có
  • Đừng chọn những hình ảnh mà có điểm yếu tập trung.
  • Hãy ghi nhớ tầm quan trọng của sự rõ rang trong hình ảnh. Nếu hình ảnh nhiều hơn hoặc ít hơn cho gợi lên cảm giác và ít hơn về các chi tiết, các lớp phủ lớn hoặc các bộ lọc có thể được áp dụng mà không mất đi tính hiệu quả của hình ảnh.

Ví dụ :

hinh-anh-chu-de-lua-chon
hinh-anh-chu-de-lua-chon-2

5. Nhận thức kích thước

Hãy suy nghĩ về nơi mà các văn bản xuất hiện trong mối quan hệ với mức độ tập trung của các yếu tố khác nhau trong hình ảnh. Liệu các văn bản có thể ở trong hình ảnh, hay nó nên ở trước? Liệu các văn bản pha trộn, hay nó giữ vị trí độc đáo riêng cả mình trong z-không gian? Làm thế nòa để các văn bản liên quan đến các yếu tố trọng tâm của hình ảnh, đặc biệt nhất?

Một nguyên tắc nhỏ: nhỏ hơn các văn bản, thêm văn bản sẽ dường như xuất hiện trong z-không gian.

Trong ví dụ này, chúng tôi sử dụng văn bản cận cảnh xuất hiện để được gần gũi hơn với chúng ta hơn những bụi cây trong nền. Mặc dù mức độ chi tiết ca trong nền, mắt của chúng tôi tự nhiên xác định đường dài và hình dạng lớn hơn của văn bản, làm sang tỏ văn bản dễ dàng hơn nhiều so với ví dụ dở. trong ví dụ dở hình dạng của các nhân vật dường như nơi các văn bản cùng khoản z-vị trí như những chiếc lá trong nền.

nhan-thuc-kich-thuoc
nhan-thuc-kich-thuoc-2

Kiểm tra demo

Một vài ví dụ

mode-6
mode-7

 

 

Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…