Bạn đang muốn thiết kế của mình trông có chiều sâu và hút mắt hơn trên nền tối? Hiệu ứng ánh sáng neon hắt lên từ cạnh dưới (bottom glow effect) đang là một trong những xu hướng thiết kế UI rất được ưa chuộng.
Thay vì sử dụng các hình khối mờ (blur) xếp chồng lên nhau, bạn hoàn toàn có thể tối ưu hiệu suất layer bằng cách sử dụng nhiều lớp Inner Shadow. Dưới đây là thông số chi tiết chia làm 5 bước để bạn thực hành theo:
B1. Tạo một Frame với kích thước: 400x400px.
- Phần Fill: Chọn chế độ Linear Gradient với dải màu từ #000000 (tại điểm 0%) đến #071637 (tại điểm 100%).
- Corner Radius (Bo góc): Đặt thông số là 80.
B2. Thêm Inner Shadow 1 (Mảng sáng xanh lan tỏa rộng)
3. Thêm Inner Shadow 2 (Mảng sáng xanh nhạt lõi)
4. Thêm Inner Shadow 3 (Viền sáng trắng rực rỡ)
5. Thêm Inner Shadow 4 và Hoàn thiện đổ bóng
Kết quả
Kết quả
Thay vì sử dụng các hình khối mờ (blur) xếp chồng lên nhau, bạn hoàn toàn có thể tối ưu hiệu suất layer bằng cách sử dụng nhiều lớp Inner Shadow. Dưới đây là thông số chi tiết chia làm 5 bước để bạn thực hành theo:
B1. Tạo một Frame với kích thước: 400x400px.
- Phần Fill: Chọn chế độ Linear Gradient với dải màu từ #000000 (tại điểm 0%) đến #071637 (tại điểm 100%).
- Corner Radius (Bo góc): Đặt thông số là 80.
B2. Thêm Inner Shadow 1 (Mảng sáng xanh lan tỏa rộng)
- X: 0 | Y: -80 | Blur: 60 | Spread: -30
- Màu sắc: Mã màu #144CCD với Opacity 100%.
- Blending mode: Normal.
3. Thêm Inner Shadow 2 (Mảng sáng xanh nhạt lõi)
- X: 0 | Y: -40 | Blur: 30 | Spread: -8
- Màu sắc: Mã màu #6694FF với Opacity 50%.
- Blending mode: Normal.
4. Thêm Inner Shadow 3 (Viền sáng trắng rực rỡ)
- X: 0 | Y: -20 | Blur: 20 | Spread: -6
- Màu sắc: Mã màu #FFFFFF với Opacity 40%.
- Blending mode: Plus Lighter (để tạo độ rực phản quang).
5. Thêm Inner Shadow 4 và Hoàn thiện đổ bóng
- Inner Shadow 4: Đặt X: 0 | Y: 6 | Blur: 6 | Spread: -2. Màu #2365FF (Opacity 15%), Blending mode Normal.
Kết quả
Kết quả
