Bạn học Photoshop trên máy nào? Phím tắt và hướng dẫn sẽ hiển thị đúng theo lựa chọn của bạn.

Lộ trình › Thử thách theo chủ đề › Bài 215/218

Thử thách 12: Cảnh nền hội trăng rằm – chú Cuội, chị Hằng và làng đêm

Vẽ cảnh nền Trung Thu 1920 × 1080 px nhiều lớp: trăng rằm với cây đa và chú Cuội, chị Hằng bay theo dải lụa, làng quê về đêm với dây đèn lồng và trẻ em rước đèn ông sao – kể truyền thuyết một cách tôn trọng, dẫn mắt bằng đường cong, thắp sáng bằng Linear Dodge, rồi tách lớp parallax cho Unity 6.

Trung cấp 240 phút ★★★ Khó Hướng dẫn cho Windows · đổi sang macOS

Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Đây là thử thách kể chuyện bằng cảnh nền. Truyền thuyết chú Cuội ngồi gốc cây đa trên cung trăng và chị Hằng bay về cung Quảng đã gắn với đêm rằm tháng Tám của bao thế hệ – nên cảnh cần vừa lung linh vừa trân trọng: chị Hằng duyên dáng, kín đáo trong tà áo dài lụa mềm; chú Cuội nhỏ bé hiền lành bên gốc đa; trẻ em rước đèn dưới làng. Về kỹ thuật, bạn sẽ dựng ba lớp độ sâu (trời – trăng; nhân vật giữa trời; làng tiền cảnh), dẫn mắt người xem bằng đường cong của dải lụa từ góc trái lên tới trăng, và thắp sáng cảnh đêm bằng hàng chục nguồn sáng nhỏ ấm áp. Mỗi lớp là một Group riêng để cảnh chạy được parallax trong game.

Hình mẫu

Cảnh nền đêm Trung Thu: bầu trời xanh tím có sao, trăng rằm vàng lớn bên phải có bóng cây đa và chú Cuội ngồi dưới gốc cùng thỏ ngọc, chị Hằng tóc búi áo hồng bay về phía trăng với hai dải lụa dài uốn lượn sang trái, tiền cảnh là mái nhà làng tối có cửa sổ sáng, dây đèn lồng đỏ cam vắt ngang và hai em bé cầm đèn ông sao phát sáng
Cảnh nền đêm Trung Thu: bầu trời xanh tím có sao, trăng rằm vàng lớn bên phải có bóng cây đa và chú Cuội ngồi dưới gốc cùng thỏ ngọc, chị Hằng tóc búi áo hồng bay về phía trăng với hai dải lụa dài uốn lượn sang trái, tiền cảnh là mái nhà làng tối có cửa sổ sáng, dây đèn lồng đỏ cam vắt ngang và hai em bé cầm đèn ông sao phát sáng

Thời gian ước tính: khoảng 4 giờ – 30 phút bố cục và thumbnail, 60 phút trời và trăng, 60 phút chị Hằng và chú Cuội, 60 phút làng và đèn, 30 phút ánh sáng tổng thể và tách lớp.

Chuẩn bị

  • Canvas (khung vẽ): 1920 × 1080 px (16:9), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Tổ chức 4 Group từ xa tới gần: 01_Sky, 02_Moon, 03_Characters, 04_Village, cộng Group 05_Light trên cùng.
  • Công cụ chính: Gradient (Dải màu chuyển) Tool (G) cho trời, Ellipse Tool cho trăng, Pen Tool (Bút tạo đường) (P) cho dải lụa và mái nhà, Brush (Cọ vẽ) Tool Soft/Hard Round, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), Screen, Linear Dodge (Add) (Cộng sáng), FilterBộ lọc›Blur›Gaussian Blur.
  • Thiết bị: dải lụa và dáng chị Hằng cần nét cong mềm – bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) với Smoothing (Làm mượt nét) 40% cho đường cong dài liền mạch. Dùng chuột: vẽ dải lụa bằng Pen Tool (2–3 điểm neo, kéo tay nắm dài) rồi Stroke Path với cọ Hard Round có Simulate Pressure; mái nhà và cây đa dùng Polygonal Lasso (Thòng lọng đa giác) + tô; sao và đèn chấm bằng cọ – chuột làm tốt.
  • File mẫu: "Khung bố cục 1920 × 1080" ở cuối bài – đặt trên cùng, Opacity (Độ mờ đục) 40%. Vòng tròn vàng là trăng (gần giao điểm 1/3 bên phải), khung hồng là vùng chị Hằng, đường cong hồng là hướng bay, đường xanh là dây đèn, dải dưới cùng là tiền cảnh làng.
MàuMã hexDùng cho
#1b2550Trời đêm trên cao
#2e3a72Trời gần chân trời
#fff1b8Trăng rằm
#c9a85aBóng cây đa và chú Cuội trên trăng
#f7d6e0Áo dài lụa chị Hằng
#ffb3c1Dải lụa
#121a3aMái làng tiền cảnh
#e8423bĐèn lồng đỏ
#ffd23fÁnh đèn vàng, cửa sổ, đèn ông sao

Các bước

Sáu giai đoạn: bố cục ba lớp với trăng, nhân vật và mái làng, nét viền nhân vật và cây đa, mảng màu xa giữa gần, đổ bóng Multiply, ánh đèn Linear Dodge, hoàn thiện chi tiết và nhãn
Sáu giai đoạn: bố cục ba lớp với trăng, nhân vật và mái làng, nét viền nhân vật và cây đa, mảng màu xa giữa gần, đổ bóng Multiply, ánh đèn Linear Dodge, hoàn thiện chi tiết và nhãn
  1. Thumbnail kể chuyện (15 phút): file nhỏ 480 × 270 px, vẽ 3 bố cục bằng mảng xám: trăng phải – chị Hằng trái; trăng giữa – chị Hằng bay ngang; trăng trái – làng lớn. Chọn bố cục có đường dẫn mắt rõ nhất: từ em bé cầm đèn ở dưới → dải lụa → chị Hằng → trăng.
  2. Bầu trời: Group 01_Sky, Gradient Tool kiểu Linear từ trên xuống: #1b2550 → #2e3a72. Sao: cọ Hard Round 2–4 px trắng, chấm thưa ở nửa trên, dày hơn ở góc xa trăng – quanh trăng trời sáng nên ít sao. Thêm vài ngôi sao 4 cánh lớn bằng Custom Shape.
  3. Trăng rằm: Group 02_Moon, Ellipse Tool giữ Shift vẽ trăng 520 px tại vòng tròn mẫu, Fill #fff1b8. Hai layer quầng: nhân đôi, FilterBộ lọc›Blur›Gaussian Blur 60 px chế độ Screen Opacity 50%; nhân đôi lần nữa, blur 200 px, Opacity 20%. Bóng tối nhẹ #f2dc8a ở nửa dưới phải để trăng có khối.
  4. Cây đa và chú Cuội trên trăng: layer kẹp vào trăng, Polygonal Lasso vẽ bóng cây đa tán xòe rộng, thân to có rễ phụ buông xuống, tô #c9a85a. Dưới gốc, chú Cuội là một dáng ngồi bó gối nhỏ (chừng 1/8 chiều cao cây) cùng màu đậm hơn #8a6e3a, đầu hơi ngẩng nhìn về trần gian. Một chú thỏ ngọc trắng nhỏ ở mép trăng. Giữ ở dạng bóng – như hình in trên mặt trăng mà ta vẫn kể cho trẻ con.
  5. Phác chị Hằng: Group 03_Characters, layer Hang_sketch trong khung hồng. Dáng bay nghiêng về phía trăng: đầu và tay vươn lên phải, thân và tà áo kéo xuống trái theo hướng gió. Tỉ lệ thanh mảnh, khoảng 6 đầu, tóc búi cài trâm, mặt hiền hòa. Tà áo dài và dải lụa che kín, chuyển động mềm – vẻ đẹp nằm ở đường cong, không ở chi tiết cơ thể.
  6. Dải lụa – đường dẫn mắt: Pen Tool vẽ hai dải lụa dài từ vai chị Hằng uốn chữ S xuống góc trái, theo đường cong hồng của file mẫu. Stroke Path cọ 14 px #ffb3c1 có Simulate Pressure; nhân đôi, Stroke cọ 4 px trắng Opacity 70% làm vệt bóng lụa. Dải lụa vừa đẹp vừa có việc: kéo mắt người xem đi một vòng quanh tranh.
  7. Line và màu chị Hằng: line 3 px màu #6a3a5a (viền tím thay cho đen để hòa vào trời đêm). Áo #f7d6e0, bóng Multiply #e3a8bc ở phía xa trăng, tóc #2b2240, trâm cài vàng. Ánh trăng chiếu từ phải: viền sáng trắng dọc mép phải tay áo và gương mặt.
  8. Làng quê tiền cảnh: Group 04_Village, Polygonal Lasso vẽ dãy mái nhà ngói và mái lá nối nhau, có một mái đình cong vút ở giữa, tô #121a3a. Dải đất dưới cùng #151d40. Cửa sổ là những ô chữ nhật nhỏ #ffd23f – mỗi ô là một gia đình đang đón rằm.
  9. Dây đèn lồng: Pen Tool vẽ một đường dây võng theo đường xanh của mẫu, Stroke 2 px xám. Treo 10–14 đèn lồng elip đỏ #e8423b và cam #ff8a1a xen kẽ, đèn ở giữa dây to hơn đèn ở hai đầu (phối cảnh). Nắp và tua vàng 1–2 px.
  10. Trẻ em rước đèn: hai đến bốn bóng em bé tối #0c1230 đứng trước mái nhà, mỗi em giơ một cán tre với đèn ông sao vàng 5 cánh. Bóng các em là silhouette – không cần mặt – nhưng tư thế phải vui: tay giơ cao, một em ngoái lại gọi bạn.
  11. Ánh sáng tổng thể: Group 05_Light trên cùng. Layer Multiply màu #1b2550 Opacity 30%, mask chỉ giữ ở bốn góc – tối góc để dồn mắt vào giữa. Layer Linear Dodge (Add): cọ Soft Round 80–120 px màu #ffb020 Opacity 25% chấm quầng quanh mỗi đèn lồng, mỗi đèn ông sao và mỗi ô cửa. Một vệt ánh trăng #fff1b8 Opacity 15% phủ mép trên các mái nhà.
  12. Kiểm tra value và câu chuyện: thêm tạm Adjustment Layer (Lớp điều chỉnh) Black & White: trăng sáng nhất, chị Hằng sáng thứ nhì, làng tối nhất, đèn là những chấm sáng nhỏ. Hỏi một người xem: "Em thấy ai trong tranh?" – họ phải kể được chị Hằng, chú Cuội và các bạn nhỏ.
  13. Xuất từng lớp cho parallax Unity 6: xuất bản gộp bg_trungthu_full.jpg 1920 × 1080 làm ảnh xem trước. Sau đó ẩn bớt Group, xuất từng lớp PNG trong suốt: bg_trungthu_01_sky.png, _02_moon, _03_characters, _04_village (hoặc dùng FileTệp›Export›Export AsXuất ra (tùy chỉnh) chọn nhiều Group cùng lúc). Trong Unity 6: mỗi lớp một Sprite Renderer, tạo Sorting Layers BG_Far, BG_Mid, BG_Near (EditChỉnh sửa›Project Settings›Tags and Layers); script parallax dời mỗi lớp theo camera với hệ số 0,1 – 0,3 – 0,6 – 1. Dải lụa có thể là sprite riêng đung đưa nhẹ bằng Animation.
Mẹo: Trong cảnh đêm, đừng tô đen – hãy tô xanh tím đậm. Đen tuyệt đối làm cảnh chết; xanh tím #1b2550 vẫn tối nhưng có "không khí". Màu tối nhất của bạn (mái làng #121a3a) vẫn là một sắc xanh rất đậm, không phải #000000.
Lỗi hay gặp: Vẽ chị Hằng như nhân vật thời trang hiện đại, hở hang hoặc tạo dáng gợi cảm. Đây là nhân vật truyền thuyết gắn với tuổi thơ – hãy vẽ duyên dáng, kín đáo, chuyển động mềm như múa. Tương tự, chú Cuội không phải nhân vật bị chế giễu; giữ dáng ngồi hiền lành, đáng mến.

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

  • Mâm cỗ Trung Thu: thêm một sân nhà ở góc phải tiền cảnh với mâm cỗ: bánh nướng, bánh dẻo, bưởi, con giống bột – chi tiết nhỏ nhưng ấm áp, đặt dưới ánh đèn.
  • Đèn kéo quân lớn: đặt một đèn kéo quân ở hiên đình làm tâm điểm phụ; trong Unity cho các hình bóng trên vách đèn xoay chậm bằng một sprite riêng.
  • Phiên bản bình minh: nhân đôi file, đổi Gradient trời sang hồng cam, trăng nhạt dần, đèn đã tắt, trẻ em ra về – bản "sau lễ" cho màn kết thúc sự kiện.

Mẹo & trick học nhanh

Đường dẫn mắt là dải lụa

Cho dải lụa chạy chữ S từ góc dưới trái lên tới chị Hằng rồi hướng về trăng. Một đường cong mạnh làm cả bố cục có chuyển động và kể chuyện theo đúng thứ tự.

Trăng là nguồn sáng chính

Mọi viền sáng lạnh (trắng vàng nhạt) đều đến từ phía trăng; mọi quầng sáng ấm (cam vàng) đến từ đèn. Hai hệ sáng lạnh – ấm làm cảnh đêm phong phú mà vẫn rõ ràng.

Group theo độ sâu ngay từ đầu

Bốn Group trời – trăng – nhân vật – làng không chỉ giúp sửa dễ, mà còn là bốn lớp parallax xuất thẳng cho Unity. Đừng vẽ chung lên một layer rồi tách sau.

Kiểm tra nhanh

1 Vai trò của dải lụa trong bố cục này là gì?
2 Màu tối nhất của cảnh đêm nên là gì?
3 Cách thể hiện chị Hằng phù hợp nhất với một game cho mọi lứa tuổi là gì?
4 Vì sao xuất cảnh thành nhiều lớp PNG cho Unity 6?

Bài tập: Cảnh nền hội trăng rằm của bạn

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập