Hướng dẫn sử dụng hiệu ứng trong Zero Block
Hiệu ứng zero block là một hiệu ứng đang trending trong thiết kế. Bạn muốn biết cách áp dụng hiệu ứng này, hãy đọc tiếp.
Blur, brightness, contrast, grayscale, hue-rotate, inversion, saturation, and sepia— 8 hiệu ứng đã được thêm vào Zero Block Settings. Để sử dụng những hiệu ứng này cho dự án, vào Zero Block Settings → Effects.
Cách thiết kế các hiệu ứng Zero Block
Chi tiết về các hiệu ứng được trình bày dưới đây:
- Hiệu ứng effect Blur
- Hiệu ứng effect Brightness
- Hiệu ứng effect Grayscale
- Hiệu ứng effect Hue rotation
- Hiệu ứng effect Invert
- Hiệu ứng effect Saturate
- Hiệu ứng effect Sepia
Bạn có thể sắp xếp các element rồi dùng filter bên trên. Ví dụ như bạn muốn làm mờ hình ảnh bên dưới shape, thực hiện theo các bước:
- Tạo một shape phủ kín hình ảnh
- Giảm opacity của shape
- Thêm hiệu ứng blur
Theo cách này, hiệu ứng được dùng cho layer shape cũng sẽ tạo hiệu ứng cho cả nhưng layer bên dưới. Hiệu ứng này có được là nhờ việc giảm opacity của lớp layer bên trên.
Các hiệu ứng trong bài có thể được dùng cho text, shape, hình ảnh và nút. Và thành quả sẽ là một thiết kế như dưới đây.
Bài viết
liên quan
UX/UI
/ 07 Nov, 2022Chiến lược chuyển đổi số: 4 bước thay đổi doanh nghiệp cần chuẩn bị
UX/UI
/ 07 Nov, 2022Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI
Cảm hứng thiết kế sáng tạo
/ 07 Nov, 2022Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế?
Cảm hứng thiết kế sáng tạo
/ 07 Nov, 2022Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác
UX/UI
/ 07 Nov, 2022Nghiên cứu người dùng: Không gì hiệu quả hơn đặt đúng câu hỏi
UX/UI
/ 07 Nov, 2022Quy trình thiết kế trải nghiệm người dùng UX để đạt tầm nhìn doanh nghiệp
