Photoshop: Tạo ảnh GIF mưa bằng bộ lọc

Cốt lõi của một hoạt ảnh mưa trong PS là ghi hành động (action) kết hợp với Dòng thời gian (Timeline). Bạn ghi một hành động dựng lớp giọt mưa để các lớp tự nhân bản, dùng Dòng thời gian biến nó thành hoạt ảnh khung hình, rồi xuất ra GIF. Tệp vẫn nhẹ, nên rất hợp làm nền trang hoặc sticker — và Online PS cũng ghi được hành động.

1️⃣ Chuẩn bị

1. Mở Online PS (zaixianps.cc).
2. Nhấn Ctrl+O (hoặc bấm Tệp → Mở ở góc trên bên trái) để tải ảnh nền mà bạn muốn cho mưa rơi lên.
3. Chắc rằng ảnh nền nằm ở lớp dưới cùng trong bảng Lớp (thường hiển thị là Background; nếu đang bị khóa, nhấp đúp vào nó để mở khóa thành lớp bình thường).

2️⃣ Tạo hành động và ghi lớp giọt mưa

1. Nhấn Alt+F9 để mở bảng Hành động.
2. Bấm Tạo bộ mới ở góc trên bên phải bảng và đặt tên Default Actions 1.
3. Trong bộ đó, bấm Tạo hành động mới và đặt:
   • Tên: Rain
   • Bộ: Default Actions 1
   • Phím chức năng: F2
4. Bấm Ghi (chấm đỏ bắt đầu nhấp nháy) để bắt đầu ghi.
5. Ghi lớp giọt mưa
1. Nhấn Shift+Ctrl+N để tạo lớp mới, mặc định tên là Layer 1.
2. Chọn Layer 1, nhấn Shift+F5 để mở hộp thoại Tô, rồi đặt:
   • Nội dung: Đen
   • Chế độ: Chuẩn
   • Độ mờ: 100%
3. Chọn Bộ lọc → Nhiễu → Thêm nhiễu với:
   • Mức: 20%
   • Phân bố: Gaussian
   • Đơn sắc: ✅ (đã tích)
   ※ Mức nhiễu quyết định độ dày và độ lớn của giọt mưa — quá nhiều thì ảnh bị xám và đục, quá ít thì gần như không thấy chuyển động.
4. Sau đó chọn Bộ lọc → Làm mờ → Làm mờ chuyển động với:
   • Góc: 90° (thẳng đứng hướng xuống)
   • Khoảng cách: 25 pixel
5. Trong danh sách Chế độ hòa trộn của Layer 1, chọn Sáng (Screen). Giọt mưa giờ hiện ra thành những vệt trắng trong suốt.
6. Nếu thấy viền tối hoặc nhiễu quanh giọt mưa, nhấn Ctrl+T (Biến đổi tự do) rồi phóng lớp lớn hơn một chút để mép lớp vượt ra ngoài khung vẽ — cách đó giấu đi màu không mong muốn.
6. Khi đã xong các bước trên, bấm Dừng phát/ghi ở cuối bảng Hành động (biểu tượng hình vuông) để kết thúc ghi.

3️⃣ Để hành động tự nhân bản lớp

1. Vẫn mở bảng Hành động, chọn hành động Rain bạn vừa ghi.
2. Nhấn F2 hai lần. Hành động chạy hai lần và tạo ra Layer 2 cùng Layer 3 — tổng cộng ba lớp giọt mưa.
3. Bảng Lớp lúc này phải hiển thị:
   Background, Layer 1, Layer 2, Layer 3.

4️⃣ Dựng hoạt ảnh khung hình (GIF) bằng Dòng thời gian

1. Mở Cửa sổ → Dòng thời gian (Cửa sổ → Dòng thời gian).
2. Hộp thoại mặc định ở chế độ Tạo dòng thời gian video — hãy bấm Tạo hoạt ảnh khung hình ở góc dưới bên trái (không chọn video).
3. Tạo hoạt ảnh giọt mưa ba khung hình
1. Khung 1 xuất hiện mặc định. Bấm vào nhãn thời gian dưới khung và đặt 0,1 giây.
2. Trong bảng Lớp, chỉ để Background và Layer 1 bật biểu tượng con mắt, tắt các lớp còn lại.
3. Bấm Nhân bản khung đã chọn ở góc dưới bên phải dòng thời gian để tạo Khung 2.
   • Đặt thời gian cũng là 0,1 giây.
   • Bật Background và Layer 2, ẩn các lớp khác.
4. Bấm Nhân bản khung đã chọn thêm lần nữa để tạo Khung 3.
   • Thời gian giữ nguyên 0,1 giây.
   • Bật Background và Layer 3, ẩn các lớp khác.

Lưu ý: mỗi khung dùng lớp giọt mưa kế tiếp (khung 1 → Layer 1, khung 2 → Layer 2, khung 3 → Layer 3), và lớp nền luôn hiển thị trong suốt quá trình.

4. Trong Tùy chọn lặp ở góc trên bên trái dòng thời gian, chọn Vô hạn để GIF lặp mãi không dừng.
5. Bấm Phát trong dòng thời gian để xem trước. Nếu thấy ổn thì chuyển sang bước tiếp theo.

5️⃣ Xuất thành GIF (cho web)

1. Dùng Alt+Shift+Ctrl+S (hoặc menu Tệp → Xuất thành → GIF...).
2. Trong bảng thiết lập mở ra, các giá trị sau dùng là vừa:
   • Màu: 256 (chất lượng tốt nhất)
   • Kích thước: giữ nguyên chiều rộng và chiều cao gốc (hoặc tự thu phóng)
   • Lặp: Vô hạn
   • Độ trễ khung hình: 0,1 giây (đã đặt sẵn trong dòng thời gian)
   • Khác: để nguyên tùy chọn "Bảng màu đồng nhất" đã tích
3. Bấm Lưu và tải tệp .gif vừa tạo về máy.

🎉 Xong rồi!

Bạn đã có một hoạt ảnh GIF mưa, sẵn sàng đưa vào trang web, mạng xã hội hay bất cứ đâu cần một cơn mưa chuyển động.

Tài liệu tham khảo

• Tài liệu chính thức của Adobe Photoshop
• HTML5 và nguyên lý xử lý ảnh phía giao diện hiện đại
• Online PS