Hiệu ứng vòng sáng (Ambient Glowing Rings) đang là một trong những xu hướng thiết kế UI hiện đại, đặc biệt hiệu quả khi áp dụng vào giao diện Dark Mode. Phương pháp này giúp tăng chiều sâu và sự nổi bật cho thiết kế chỉ trong chưa đầy 2 phút mà không cần phụ thuộc vào bất kỳ Plugin bên thứ ba nào.
Trước khi đi vào các bước chi tiết, để hiểu rõ tại sao chúng ta sử dụng kỹ thuật xếp chồng layer thay vì các hiệu ứng mặc định khác, bạn có thể xem bảng phân tích quang học cơ bản sau:
Dưới đây là quy trình chi tiết để xây dựng hiệu ứng này:
1. Bước 1: Tạo cấu trúc 3 hình tròn nền tảng
Tạo 3 hình tròn (phím tắt
Trước khi đi vào các bước chi tiết, để hiểu rõ tại sao chúng ta sử dụng kỹ thuật xếp chồng layer thay vì các hiệu ứng mặc định khác, bạn có thể xem bảng phân tích quang học cơ bản sau:
| Kỹ thuật tạo Glow | Ưu điểm | Nhược điểm |
| Xếp chồng Layer Blur (Bài viết này) | Hiệu ứng chuyển màu (blending) rất sâu, dễ dàng mix nhiều dải màu phức tạp, kiểm soát được từng lớp ánh sáng. | Phải quản lý nhiều layer hơn trong file thiết kế. |
| Sử dụng Drop Shadow | Thao tác nhanh, chỉ cần thiết lập trên 1 layer duy nhất. | Ánh sáng lan tỏa nông, cứng và khó tạo ra dải màu ambient chân thực. |
1. Bước 1: Tạo cấu trúc 3 hình tròn nền tảng
Tạo 3 hình tròn (phím tắt
O) với các kích thước và dải màu (tone) khác nhau. Hãy đảm bảo đặt chúng đồng tâm.- Hình tròn 1 (Cơ sở/Base): Kích thước 500x500px, mã màu
#151515. Đây sẽ là màu tệp với background của bạn để tạo độ chìm. - Hình tròn 2 (Lõi/Core): Kích thước 600x600px, mã màu
#004CFF. Đây là dải màu đậm đóng vai trò làm vùng sáng chuyển tiếp. - Hình tròn 3 (Ngoài/Outer): Kích thước 700x700px, mã màu
#00FFDD. Đây là dải màu nhạt nhất, đóng vai trò tạo viền sáng (highlight).
- Quét chọn cả 3 layer hình tròn vừa tạo.
- Trong bảng thuộc tính bên phải, thêm Effect và chuyển thành Layer Blur.
- Đặt thông số Blur ở mức 60. Tùy thuộc vào yêu cầu của UI, bạn có thể tăng thông số này cao hơn để hiệu ứng phát sáng lan tỏa mềm mại (softer glow) và hòa quyện mượt hơn vào nền.
- Thử nghiệm các bộ phối màu (color combos) khác nhau để phù hợp với Brand Identity.
- Cân chỉnh lại thông số Layer Blur để kiểm soát cường độ ánh sáng.
- Group các layer này lại, sau đó Scale (phím tắt
K) theo tỷ lệ mong muốn để làm background. - Ứng dụng lý tưởng: Đặt phía sau các thành phần chính yếu trên Landing pages, Hero sections hoặc làm điểm nhấn trong các slide của Pitch decks.
