Dự án 13: Trang case study cho portfolio – từ phác thảo đến trong game
Biến một asset bạn đã làm thành trang case study dọc 1600 × 3200 px như các họa sĩ game trình bày trên portfolio: ảnh chính, brief, tham khảo có nguồn, thumbnail, các vòng sửa trước – sau, ảnh chụp trong Unity 6 và đoạn Vấn đề → Quyết định → Kết quả.
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.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Portfolio chỉ có ảnh hoàn thiện cho thấy bạn vẽ đẹp. Một case study cho thấy bạn làm việc được trong đội: đọc brief, tìm tham khảo đúng cách, thử nhiều hướng, sửa theo feedback, và đưa asset vào game chạy thật. Người tuyển dụng ở studio thường lướt qua hàng trăm portfolio; trang case study với câu chuyện rõ ràng – vấn đề, quyết định, kết quả – là thứ khiến họ dừng lại và nhớ tên bạn. Dự án này dùng lại những gì bạn đã làm trong chặng này (moodboard, thumbnail, paintover, file cho Unity) để dựng một trang case study dọc, đúng định dạng thường đăng trên các trang portfolio.
Hình mẫu
Thời gian ước tính: khoảng 4 giờ – 30 phút chọn dự án và gom tư liệu, 30 phút viết câu chuyện, 2 giờ dựng trang, 30 phút chụp ảnh trong Unity 6, 30 phút đọc lại và xuất cho web.
Chuẩn bị
- Canvas (khung vẽ): 1600 × 3200 px (dọc, tỉ lệ 1:2), Resolution (Độ phân giải) 72, RGB Color, nền
#f5f6f8hoặc tối#1e2127nếu tranh của bạn hợp nền tối. Các trang portfolio thường hiển thị ảnh rộng 1400–1600 px; trang dài đọc bằng cách cuộn. - Công cụ chính: để đặt hình từ các file gốc, Frame Tool (K), (1 cột, lề 80 px), Type Tool (T) với Paragraph Styles, Align, JPG.
- Thiết bị: trang case study chủ yếu dàn trang và viết chữ – chuột và bàn phím là đủ. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) dùng khi bạn muốn vẽ mũi tên, khoanh vòng thủ công cho tự nhiên.
- Tư liệu cần có: brief, moodboard (có nguồn), thumbnail, ít nhất một cặp trước – sau của vòng sửa, bản hoàn thiện, và một ảnh chụp trong Unity 6. Nếu thiếu, chọn dự án khác – case study thật không thể bịa quá trình.
- File mẫu: "Khung trang case study" ở cuối bài với 7 phần đã chia sẵn.
| Phần | Nội dung | Chiều cao gợi ý |
|---|---|---|
| 1. Ảnh chính | ảnh đẹp nhất – người xem quyết định đọc tiếp hay không | 700 px |
| 2. Brief | 3–4 dòng: game gì, asset gì, ràng buộc | 260 px |
| 3. Tham khảo | moodboard thu nhỏ, có nguồn | 360 px |
| 4. Thumbnail | 3 hướng + lý do chọn | 360 px |
| 5. Vòng sửa | trước → sau, ghi chú đã sửa gì | 420 px |
| 6. Trong game | ảnh chụp Unity 6 ở cỡ thật | 440 px |
| 7. Bài học | Vấn đề → Quyết định → Kết quả | 200 px |
| Màu | Mã hex | Dùng cho |
|---|---|---|
#f5f6f8 | Nền trang | |
#31a8ff | Số thứ tự phần, mũi tên | |
#e8423b | Ô Vấn đề | |
#ff8a1a | Ô Quyết định | |
#2ecc71 | Ô Kết quả |
Các bước
- Chọn một dự án có câu chuyện: tốt nhất là asset có một vấn đề thật đã được giải quyết – NPC lẫn vào nền đêm, icon không đọc được ở 64 px. Asset vẽ một lần là xong ít có gì để kể.
- Viết câu chuyện ba câu trước khi dựng trang: Vấn đề ("Người gác đèn lẫn vào nền biển đêm"), Quyết định ("Đèn vàng là điểm sáng nhất, áo vàng ấm tách khỏi nền xanh"), Kết quả ("Người chơi nhận ra NPC từ xa trong bản thử"). Mọi hình trên trang đều phục vụ ba câu này.
- Dựng trang và lưới: 1600 × 3200 px, đặt khung mẫu. 1 cột, Margin 80 px trái phải. Mỗi phần một Group
sec_01_hero…sec_07_lessons. - Phần 1 – ảnh chính: bản hoàn thiện đẹp nhất, to nhất, trên nền phù hợp. Tên dự án, vai trò của bạn, thời gian, công cụ ở ngay dưới: "2D artist · 3 tuần · Photoshop, Unity 6". Nếu là dự án nhóm, ghi rõ phần nào do bạn làm.
- Phần 2 – brief: 3–4 dòng tóm tắt, không chép nguyên văn tài liệu (có thể chứa thông tin của đội). Dùng chip màu như ở hình mẫu cho các ràng buộc chính: kích thước, cảm giác, điểm nhận diện.
- Phần 3 – tham khảo có nguồn: đặt moodboard thu nhỏ bằng . Chỉ đăng ảnh tự chụp hoặc ảnh có giấy phép cho phép đăng lại; ảnh "Chỉ tham khảo" thì thay bằng dải màu và từ khóa, ghi "nguồn tham khảo liệt kê ở cuối trang". Đăng lại ảnh của người khác lên portfolio công khai là vi phạm bản quyền.
- Phần 4 – thumbnail: ba hướng cạnh nhau, khoanh hướng được chọn, một câu lý do. Người tuyển dụng muốn thấy bạn nghĩ nhiều hướng trước khi chốt.
- Phần 5 – vòng sửa: hai khung cùng cỡ "Trước" và "Sau", kèm 2–3 dòng: feedback là gì, bạn sửa thế nào. Không cần ghi tên người góp ý; ghi "feedback từ lead" là đủ.
- Phần 6 – trong game: mở dự án Unity 6, đặt asset vào cảnh, nhấn Play, chụp màn hình ở độ phân giải game (hoặc dùng Game view với độ phân giải 1920 × 1080). Ảnh trong game chứng minh asset của bạn chạy được – điều mà portfolio chỉ có tranh không chứng minh được.
- Phần 7 – Vấn đề → Quyết định → Kết quả: ba ô màu đỏ – cam – xanh, mỗi ô một câu ngắn từ bước 2. Thêm một dòng "Nếu làm lại, mình sẽ…" – sự tự nhận xét này được người tuyển dụng đánh giá rất cao.
- Thứ tự đọc và khoảng trắng: mỗi phần cách nhau ít nhất 60 px, tiêu đề phần cùng cỡ chữ (Paragraph Style), số thứ tự màu
#31a8ff. Ảnh luôn to hơn chữ – người xem đọc bằng mắt trước, đọc chữ sau. - Kiểm tra trên điện thoại: xuất bản thử JPG, mở trên điện thoại. Chữ dưới 22 px gần như không đọc được ở màn hình nhỏ – tăng cỡ hoặc bớt chữ.
- Xuất cho web: JPG chất lượng khoảng 80%, sRGB, giữ 1600 × 3200. Nếu trang portfolio giới hạn chiều cao, cắt thành hai ảnh 1600 × 1600 tại khoảng trắng giữa hai phần. Lưu PSD với tên
portfolio_casestudy_lighthouse_v01.psd.
Nâng cao (tùy chọn)
- GIF quá trình: xuất 6–8 bước (từ bóng đen tới hoàn thiện) thành GIF bằng Timeline (Dòng thời gian), đặt ở phần 4 hoặc 5.
- Phiên bản tiếng Anh: làm bản sao trang với chữ tiếng Anh để ứng tuyển studio nước ngoài – giữ nguyên bố cục, chỉ đổi text layer.
- Case study thứ hai: chọn một dự án khác loại (UI, môi trường) để portfolio cho thấy bạn làm được nhiều mảng.
Mẹo & trick học nhanh
Vấn đề, Quyết định, Kết quả. Khi đã có câu chuyện, việc chọn hình nào đưa vào trang trở nên dễ dàng.
Một ảnh chụp từ Unity 6 cho thấy asset đúng cỡ, đúng pivot, hòa vào cảnh – điều tranh hoàn thiện không chứng minh được.
Chỉ đăng ảnh tự chụp hoặc có giấy phép, và chỉ đăng dự án đã được phép công bố. Uy tín nghề nghiệp bắt đầu từ đây.