Dự án 10: Render nhân vật với rim light và bloom cho ảnh đầu trang web

Trang web hoặc trang Steam của game thường mở đầu bằng một ảnh hero rộng: nhân vật đứng trong cảnh có không khí, bên cạnh là logo và nút "Wishlist". Nhân vật vẽ cho game thường có ánh sáng trung tính, đặt lên nền đêm sẽ trông như dán. Bí quyết của họa sĩ key art là ba lớp ánh sáng: ánh chính (key light) đúng màu nguồn sáng của cảnh, viền sáng (rim light) – một đường sáng mảnh ở mép nhân vật quay về phía nguồn sáng sau lưng, tách nhân vật khỏi nền tối – và bloom – quầng sáng lan ra quanh vật phát sáng. Bạn sẽ làm cả ba bằng layer Clipping Mask (Mặt nạ cắt), không vẽ lại nhân vật.

Hình mẫu

Thời gian ước tính: khoảng 65 phút. Ảnh 1920 × 1080 px; nhân vật ở 1/3 phải, chữ ở 1/3 trái, 86 px trên cùng dành cho thanh menu của website.

Chuẩn bị

• Canvas: 1920 × 1080 px, RGB Color, 8 bit (có thể làm 16 bit cho gradient đêm mượt hơn, chuyển 8 bit khi xuất).
• Công cụ chính: Clipping Mask (Ctrl+Alt+G), Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), Overlay (Phủ chồng), Color Dodge (Làm sáng rực), Screen, Linear Dodge (Add) (Cộng sáng); Brush (Cọ vẽ) Tool Soft Round; FilterBộ lọc›Blur›Gaussian Blur; SelectVùng chọn›Load Selection / Ctrl + bấm thumbnail layer để lấy vùng chọn nhân vật.
• Thiết bị: rim light vẽ đẹp nhất bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì): cọ Hard Round nhỏ có Pen Pressure (Lực nhấn bút) ở Size, nhấn mạnh ở vai, nhẹ dần xuống chân. Dùng chuột: lấy vùng chọn nhân vật, dịch vùng chọn 4–6 px bằng phím mũi tên, đảo ngược và tô – được viền đều tự động (cách làm ở bước 8).
• File mẫu: "Khung hero trang chủ" – đặt trên cùng, khóa. Dải xám trên là thanh menu, khung xanh là vùng chữ, khung hồng là phần còn hiển thị khi trang web thu về khổ điện thoại (giữ nhân vật trong đó).
• Tư liệu: nhân vật PNG trong suốt và nền đêm từ các dự án trước; nhân vật nên tách layer (hoặc ít nhất là PNG riêng từng người).

Các bước

1. Xác định nguồn sáng: trước khi tô, quyết định: nguồn ấm là chiếc đèn cô gái cầm (phía trên phải); nguồn lạnh là ánh trăng/trời đêm sau lưng (phía trái – sau). Vẽ hai mũi tên nhỏ trên layer Notes. Rim light luôn nằm ở mép đối diện người xem, hướng về nguồn sáng phía sau.
2. Nền đêm: layer BG, Gradient (Dải màu chuyển) Linear #070a1c → #1d2a5a, thêm sao, dãy núi tối #141c3e. Nền tối giúp rim light và bloom phát huy – trên nền sáng, viền sáng gần như vô hình.
3. Đặt nhân vật: Place Embedded từng nhân vật, đặt trong khung hồng (điện thoại), chân chạm đường đồi. Mỗi nhân vật một Group: KNIGHT, GIRL.
4. Tối hóa theo nền (Multiply): trong mỗi Group, layer mới Clipping Mask vào nhân vật, Blend Mode Multiply, tô kín màu #1d2a5a Opacity (Độ mờ đục) 55–65%. Nhân vật giờ "đứng trong đêm" – đây là bước nhiều người bỏ qua nhất, nhưng thiếu nó thì mọi ánh sáng thêm vào đều trông giả.
5. Ánh ấm từ đèn (Overlay): layer Clipping Mask mới chế độ Overlay, cọ Soft Round lớn màu #ffb35c, tô ở các mặt quay về phía đèn: mặt, tay cầm đèn, vai phải hiệp sĩ. Opacity cọ 30–50%, tô nhiều lớp. Mặt quay xa đèn để nguyên màu đêm.
6. Điểm sáng ấm (Linear Dodge (Làm sáng)): layer Clipping Mask chế độ Linear Dodge (Add), cọ nhỏ cam tô các cạnh kim loại, khóa giáp gần đèn nhất. Kim loại phản sáng mạnh – vài nét nhỏ làm giáp sáng bóng ngay.
7. Rim light vẽ tay: layer Clipping Mask chế độ Color Dodge, màu #9ff4ff. Cọ Hard Round 6–10 px vẽ dọc mép trái của nhân vật (phía nguồn lạnh): đỉnh đầu, vai, cánh tay, mép chân. Viền dày ở chỗ bề mặt quay ngang (vai, đầu), mảnh ở chỗ cong đi.
8. Rim light bằng vùng chọn (dùng chuột): Ctrl + bấm thumbnail layer nhân vật để lấy vùng chọn. Chuyển sang Rectangular Marquee (Khung chọn) (M) – khi công cụ chọn đang bật, phím mũi tên chỉ dịch đường vùng chọn chứ không dịch pixel – rồi bấm mũi tên phải 5 lần để dịch vùng chọn 5 px. Ctrl + Alt + bấm lại thumbnail để trừ vùng gốc – còn lại một dải mảnh ở mép trái. Tô cyan, chế độ Color Dodge, rồi Gaussian Blur 1 px.
9. Sửa rim cho tự nhiên: thêm Layer Mask (Mặt nạ lớp) cho layer rim, cọ mềm đen xóa bớt ở phần chân và vùng bị nhân vật kia che. Rim light không đều mới thật – sáng nhất ở vai, đầu; gần như mất ở chân chạm đất.
10. Bloom: gộp bản sao các layer sáng (đèn, rim, điểm sáng) bằng Stamp (Ctrl+Alt+Shift+E khi chỉ bật chúng), FilterBộ lọc›Blur›Gaussian Blur Radius 25–40 px, đặt chế độ Screen Opacity 50–70% trên cùng. Thêm một vòng sáng lớn quanh đèn bằng Soft Round 400 px #fff3b0 chế độ Screen.
11. Kết nối với mặt đất: ánh đèn phải rơi xuống đất: layer trên nền, chế độ Overlay, tô cam mờ dưới chân cô gái; bóng đổ hai nhân vật bằng Multiply #070a1c ngả về phía xa đèn.
12. Bố cục trang chủ: thanh menu là phần của website (lập trình viên làm bằng HTML), bạn chỉ để trống 86 px trên cùng hoặc vẽ mờ để xem thử. Logo, khẩu hiệu, nút "WISHLIST NOW" đặt trong khung xanh – trên layer riêng, vì trên điện thoại web designer sẽ xếp chữ xuống dưới ảnh.
13. Xuất hai bản: ẩn file mẫu và Notes. Bản 1 hero_full_1920.jpg có chữ để xem trước; bản 2 hero_bg_1920.jpg ẩn Group chữ để web dùng làm nền thật (chữ trên web là chữ HTML – sắc nét, tìm kiếm được, dịch được). JPG Quality 80–85, sRGB, mỗi file nên dưới 500 KB để trang tải nhanh.

Nâng cao (tùy chọn)

• Ảnh hero động: tách nền, nhân vật, bloom thành 3 PNG để web làm hiệu ứng parallax khi cuộn chuột – nhân vật trôi chậm hơn nền một chút.
• Hai nguồn rim: thêm rim ấm mảnh ở mép phải (phía đèn) để nhân vật có viền sáng hai bên – kiểu ánh sáng sân khấu thường thấy trên poster phim.
• Ánh sáng giống trong game: nếu game dùng URP 2D Light trong Unity 6, chụp một cảnh có Light 2D làm tham chiếu màu và hướng sáng – ảnh marketing và game thật sẽ ăn khớp.