Lộ trình › Môi trường & đạo cụ game › Bài 157/218

Dự án 14: Thành phố cyberpunk về đêm, đèn neon

Vẽ cảnh đường phố cyberpunk 1920 × 1080 px theo phối cảnh 1 điểm tụ: khối nhà tối, cửa sổ, biển neon phát sáng, mặt đường ướt phản chiếu và mưa – luyện "màu nằm ở ánh sáng" bằng Outer Glow, Linear Dodge, rồi dựng Light 2D và Bloom trong Unity 6.

Nâng cao 300 phút ★★★ Khó Hướng dẫn cho macOS · đổi sang Windows

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ở (⌘ Cmd+O).

Cảnh cyberpunk nổi tiếng nhờ màu neon rực rỡ, nhưng bí mật lại nằm ở bóng tối: 80% bức tranh gần như đen tím, và màu chỉ xuất hiện ở nơi có ánh sáng – biển neon, cửa sổ, vệt phản chiếu trên mặt đường ướt. Nếu bạn tô mọi tòa nhà bằng màu tươi, cảnh sẽ trông như đồ chơi. Dự án này luyện phối cảnh 1 điểm tụ cho cảnh đường phố, và cách "vẽ bằng ánh sáng": chọn chỗ tối trước, rồi mới thắp sáng.

Hình mẫu

Thành phố về đêm: trời tím than chuyển hồng ở chân trời, nhà xa tím mờ, nhà gần tối có cửa sổ xanh vàng và viền sáng hồng, tòa tháp giữa có đèn đỏ, biển neon dọc PHỞ và BAR, biển HOTEL và 24H, mặt đường ướt phản chiếu neon, người đứng, xe bay và mưa
Thành phố về đêm: trời tím than chuyển hồng ở chân trời, nhà xa tím mờ, nhà gần tối có cửa sổ xanh vàng và viền sáng hồng, tòa tháp giữa có đèn đỏ, biển neon dọc PHỞ và BAR, biển HOTEL và 24H, mặt đường ướt phản chiếu neon, người đứng, xe bay và mưa

Thời gian ước tính: khoảng 5 giờ. Hai màu neon chính (hồng #ff3fa4, xanh #29e6ff) cộng một màu vàng ấm phụ cho cửa sổ. Biển "PHỞ" là một nét Việt nhỏ – cyberpunk không nhất thiết phải là Tokyo; thành phố tương lai của bạn có thể là Sài Gòn năm 2099.

Chuẩn bị

  • Canvas: 1920 × 1080 px (16:9), Resolution (Độ phân giải) 72, RGB Color.
  • Công cụ chính: Line Tool và Pen Tool (Bút tạo đường) (P) cho đường phối cảnh, Rectangle Tool (U) cho khối nhà, Type Tool (T) cho chữ trên biển neon, LayerLớp›Layer Style›Outer Glow và Inner Glow, chế độ Linear Dodge (Add) (Cộng sáng), Screen, FilterBộ lọc›Blur›Motion Blur cho phản chiếu và mưa, FilterBộ lọc›Noise›Add Noise.
  • Thiết bị: khối nhà, cửa sổ và biển neon là hình học – chuột và Shape làm chính xác nhất. Bút Wacom, XP-Pen, Huion hay iPad có ích khi vẽ vệt phản chiếu loang trên đường ướt và khói hơi nước (Transfer › Opacity (Độ mờ đục) Jitter › Control: Pen Pressure (Lực nhấn bút)). Dùng chuột thì làm vệt phản chiếu bằng cách nhân đôi biển neon, lật dọc rồi Motion Blur dọc.
  • File mẫu: "Khung phối cảnh đường phố" – điểm tụ hồng giữa ảnh, tia xanh là hướng của mọi cạnh ngang (mép mái, hàng cửa sổ, mép biển), nét hồng đứt là mép vỉa hè và làn đường.
MàuMã hexDùng cho
#0b0a24Trời đêm
#3a1452Chân trời (ánh thành phố)
#4a2a7aNhà xa
#1c1638Nhà gần
#120e24Mặt đường
#ff3fa4Neon hồng
#29e6ffNeon xanh
#ffd36bĐèn vàng ấm (cửa sổ)
#bcd2ffMưa

Các bước

Sáu giai đoạn: thumbnail tối, khối nhà, màu nền theo lớp, đổ bóng, đèn neon và phản chiếu, mưa và chi tiết
Sáu giai đoạn: thumbnail tối, khối nhà, màu nền theo lớp, đổ bóng, đèn neon và phản chiếu, mưa và chi tiết
  1. Thumbnail tối: 384 × 216 px, nền gần đen. Chỉ vẽ vị trí ánh sáng bằng vài chấm trắng: 2–3 biển neon lớn, dải cửa sổ, vệt phản chiếu trên đường. Bố cục ánh sáng nên tạo một hình tam giác hoặc chữ Z dẫn mắt về điểm tụ.
  2. Phối cảnh 1 điểm: FileTệp›NewTạo mới 1920 × 1080 px, đặt file khung phối cảnh trên cùng, Opacity 40%. Điểm tụ ở giữa – hơi thấp (y khoảng 560), ngang tầm mắt người đứng trên phố. Mọi cạnh ngang chạy vào chiều sâu (mép mái, hàng cửa sổ, mép vỉa hè) phải hướng về điểm tụ; cạnh đứng luôn thẳng đứng.
  3. Trời và nhà xa: Group FAR: Gradient (Dải màu chuyển) trời #0b0a24 → #3a1452 → #7a1f5a ở chân trời (ánh đèn thành phố hắt lên mây). Rectangle Tool vẽ dãy nhà chọc trời xa #4a2a7a nhiều độ cao, không chi tiết, phần chân chìm trong sương hồng (layer Screen Opacity 50%).
  4. Khối nhà gần: Group MID: hai dãy nhà hai bên theo các tia phối cảnh, mặt tiền là hình thang hẹp dần về điểm tụ (Pen Tool hoặc EditChỉnh sửa›TransformBiến đổi›PerspectivePhối cảnh trên hình chữ nhật). Màu #1c1638 – gần đen nhưng có sắc tím. Tòa tháp giữa xa hơn một chút, màu #2a1f4f.
  5. Cửa sổ theo phối cảnh: trên mặt tiền phẳng, tạo một lưới cửa sổ bằng Rectangle Tool (nhân đôi với ⌘ Cmd+⌥ Option+T), gộp lại thành Smart Object (Đối tượng thông minh) rồi EditChỉnh sửa›TransformBiến đổi›Distort kéo 4 góc khớp mặt tiền – lưới tự đúng phối cảnh. Chỉ bật sáng 20–30% cửa sổ (xanh #29e6ff hoặc vàng #ffd36b), số còn lại tắt – thành phố về đêm không sáng hết.
  6. Viền sáng mặt nhà: layer kẹp Screen trên mỗi khối nhà: Brush (Cọ vẽ) cứng 6 px vẽ đường viền mảnh #ff3fa4 ở mép nhà phía có biển neon. Viền sáng tách khối nhà tối khỏi nền tối và cho biết nguồn sáng ở đâu – giống rim light trong rừng thần tiên.
  7. Biển neon: Group NEON: Rectangle Tool bo góc vẽ khung biển nền tối #140a24, Stroke 4 px màu neon. Type Tool gõ chữ (font không chân, đậm), Fill trắng. Layer Style cho chữ: Outer Glow Blend Mode (Chế độ hòa trộn) Screen, Color neon, Size 20 px, Spread 5%; Inner Glow trắng Size 3 px. Biển dọc (chữ xếp dọc) là đặc trưng cyberpunk – gõ từng chữ một dòng.
  8. Quầng neon trên tường: layer dưới mỗi biển, chế độ Linear Dodge (Add): Brush mềm cỡ gấp 3 biển, màu neon, Opacity 25%. Tường xung quanh biển phải "nhuộm" màu biển – đây là thứ làm neon có cảm giác phát sáng thật, không phải hình dán.
  9. Mặt đường ướt: Group STREET: mặt đường #120e24, mép vỉa hè và vạch làn theo nét hồng của file mẫu. Phản chiếu: nhân đôi Group NEON (⌘ Cmd+J), gộp lại, EditChỉnh sửa›TransformBiến đổi›Flip VerticalLật dọc, đặt ngay dưới chân tòa nhà, FilterBộ lọc›Blur›Motion Blur Angle 90°, Distance 40 px. Kẹp vào mặt đường, chế độ Screen Opacity 60%, Layer Mask (Mặt nạ lớp) Gradient mờ dần xuống dưới.
  10. Người và xe bay: một bóng người đứng ở vỉa hè và một lan can – đen tuyền có viền sáng neon mảnh (Stroke Outside 2 px màu neon). Xe bay nhỏ trên trời có vệt đuôi hồng. Hình người cao khoảng 1/10 chiều cao ảnh – cho thấy nhà cao thế nào.
  11. Mưa: layer Rain: tô đen, FilterBộ lọc›Noise›Add Noise Amount 25% Monochromatic, FilterBộ lọc›Blur›Motion Blur Angle 75°, Distance 30 px, rồi ⌘ Cmd+L kéo Levels để chỉ còn vệt sáng thưa. Chế độ Screen, Opacity 45%. Thêm vài vệt mưa sáng hơn ngay trước biển neon (mưa phản chiếu ánh neon).
  12. Không khí và kiểm tra: layer Screen #3a1452 Opacity 30% từ chân trời lên tới nửa nhà xa – thêm sương thành phố. Kiểm tra: ẩn Group NEON, cảnh gần như tối hoàn toàn – đúng; bật lại, mắt phải đi theo đường các biển neon về điểm tụ. Black & White: biển neon và phản chiếu là vùng sáng nhất.
  13. Xuất và đưa vào Unity 6: xuất cyber_city_bg.png 1920 × 1080 px; nếu muốn neon nhấp nháy, xuất thêm Group NEON riêng (nền trong suốt). Unity 6 (Universal 2D): Global Light 2D Intensity 0.25 màu #6a4aa8, mỗi biển neon một Spot Light 2D cùng màu. Camera › Rendering › bật Post Processing, thêm Global Volume với override Bloom (Threshold 0.9, Intensity 1.5) – neon sẽ lan sáng như trong Photoshop. Mưa động: Particle System hướng xuống, Stretched Billboard; nhấp nháy neon: script bật/tắt sprite NEON ngẫu nhiên vài lần mỗi phút.
Mẹo: Màu neon đẹp nhất khi lõi gần trắng và viền bão hòa: chữ Fill trắng, Inner Glow trắng, Outer Glow màu neon. Nếu tô chữ bằng chính màu neon, nó trông như sơn chứ không như ống đèn đang sáng.
Lỗi hay gặp: Đặt biển neon tùy hứng, không theo phối cảnh – biển bên trái nghiêng một kiểu, bên phải một kiểu. Mép trên và mép dưới của mọi biển gắn trên mặt tiền phải chạy theo tia về điểm tụ; dùng Distort để khớp biển vào mặt tường.

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

  • Hologram quảng cáo: thêm một hình người hoặc con cá khổng lồ bán trong suốt giữa các tòa nhà: layer Linear Dodge (Làm sáng) Opacity 40%, thêm đường quét ngang (scanline) bằng Pattern sọc mảnh.
  • Phiên bản ban ngày: tắt toàn bộ neon và mưa, đổi trời sang xám vàng khói bụi – thành phố trông mệt mỏi, cũ kỹ. So sánh để thấy neon "gánh" cả cảnh.
  • Tách lớp parallax: FAR, MID, NEON, STREET thành 4 PNG; NEON và MID cùng hệ số parallax để biển không trượt khỏi tường.

Mẹo & trick học nhanh

Chọn chỗ tối trước, thắp sáng sau

Vẽ cả thành phố gần như đen tím trước. Chỉ khi các khối đã đúng phối cảnh mới thêm neon. Ánh sáng là phần thưởng cuối cùng, không phải lớp màu nền.

Distort cho mọi thứ dán lên tường

Cửa sổ, biển hiệu, poster: vẽ thẳng trên một layer phẳng, chuyển thành Smart Object, rồi EditChỉnh sửa›TransformBiến đổi›Distort khớp 4 góc vào mặt tường. Phối cảnh đúng mà không cần tính toán.

Phản chiếu = lật + Motion Blur dọc

Mặt đường ướt phản chiếu ánh sáng thành vệt dọc kéo dài. Lật dọc layer neon, Motion Blur 90°, Screen 60% – ba thao tác cho một mặt đường bóng loáng.

Kiểm tra nhanh

1 Trong cảnh cyberpunk, phần lớn bức tranh nên có value thế nào?
2 Trong phối cảnh 1 điểm tụ của đường phố, cạnh nào phải hướng về điểm tụ?
3 Cách tạo chữ neon trông như ống đèn đang sáng?
4 Trong Unity 6, để neon lan sáng giống Outer Glow trong Photoshop, bạn cần gì?

Bài tập: Đường phố neon 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