Tạo moodboard online: thêm ảnh, lấy bảng màu, tải PNG trong 6 bước
Mục lục
Cách tạo moodboard online bằng công cụ Moodboard của ColorME: thêm ảnh, bấm Tự xếp, chọn khung và màu nền, lấy bảng màu 5 mã HEX từ ảnh, thêm tiêu đề rồi tải PNG. Có bảng kích thước file theo từng khung và ảnh chụp từng bước.
Trả lời nhanh: để tạo moodboard online, mở công cụ Moodboard của ColorME, bấm Thêm ảnh để đưa ảnh cảm hứng vào bảng, bấm Tự xếp cho ảnh vào lưới, bấm Lấy bảng màu để có 5 ô màu kèm mã HEX, thêm một dòng tiêu đề rồi bấm Tải PNG. Công cụ miễn phí, không cần đăng nhập, chạy trên trình duyệt. Bảng mẫu trong bài (9 ảnh, 1 tiêu đề, 5 ô màu, khung 4:3) cho ra file PNG 1600×1200 px, nặng 2,47 MB.
File PNG tải về từ công cụ, khung 4:3, chưa chỉnh sửa gì thêm. Ảnh trong bảng: Peppered Pixels Design Studio, fishy fishy, Maria Lupan, Barbara Burgess, Sibeli Velázquez, Jonathan Cosens Photography, Logan Voss, Pawel Czerwinski, Danielle Suijkerbuijk / Unsplash.
Nếu bạn chưa rõ moodboard gồm những gì và dùng vào lúc nào trong một dự án, đọc trước bài Moodboard là gì và 03 cách để tạo moodboard hoặc mục moodboard trong thư viện thuật ngữ. Bài này chỉ đi vào thao tác: làm một bảng hoàn chỉnh từ đầu tới lúc có file gửi khách.
Video quay màn hình (39 giây, không tiếng): thêm ảnh, tự xếp, đổi khung và nền, lấy bảng màu, thêm tiêu đề, kéo tiêu đề cho thẳng hàng rồi bấm Tải PNG. Ảnh chụp màn hình: ColorME.
Cần chuẩn bị gì trước khi làm moodboard?
Trang công cụ gợi ý khoảng 8–15 ảnh là đủ rõ hướng. Bảng mẫu trong bài dùng 9 ảnh cho một thương hiệu gốm thủ công giả định, chọn theo ba nhóm để bảng không bị một màu:
- Sản phẩm và bối cảnh: bình gốm, chậu đất nung, lọ hoa nhỏ.
- Chất liệu: vải lanh, mặt tường nhám có vệt nắng.
- Chi tiết tạo không khí: hoa khô, cỏ khô, lá khô.
Ảnh nên cùng một tông (ở đây là nâu đất, be, xanh rêu). Chín ảnh trong bài đều là ảnh miễn phí bản quyền trên Unsplash; nếu moodboard của bạn chỉ để trao đổi nội bộ thì ảnh tham khảo lấy từ đâu cũng được, còn khi đăng công khai hãy dùng ảnh bạn có quyền sử dụng.
Cách tạo moodboard online trong 6 bước
Bước 1: mở công cụ và thêm ảnh
Vào colorme.vn/tools/moodboard. Bảng trống hiện dòng "Thả ảnh vào đây, dán ảnh (Ctrl/Cmd + V) hoặc bấm Thêm ảnh". Bấm Thêm ảnh và chọn file; chọn được nhiều file một lần.
Bảng trống, khung mặc định 16:10. Ảnh chụp màn hình: ColorME.
Hai điều chúng tôi thấy khi thử:
- Thêm nhiều ảnh cùng lúc vào bảng đang trống thì công cụ tự xếp luôn. Ba ảnh đầu được chia thành 2 cột, lấp gần kín bảng.
- Thêm ảnh vào bảng đã có ảnh thì ảnh mới nằm chồng lên nhau ở giữa bảng, mỗi ảnh rộng bằng 34% chiều ngang bảng (544 px trên bảng 1600 px). Lúc này cần bước 2.
Bước 2: bấm Tự xếp để ảnh vào lưới
Bấm Tự xếp. Ảnh được chia vào các cột bằng nhau, giữ nguyên tỉ lệ từng ảnh, không ảnh nào bị cắt. Công cụ tự chọn số cột sao cho ảnh chiếm nhiều diện tích nhất: với 9 ảnh trên khung 16:10, kết quả là 3 cột, mỗi ảnh rộng 437 px.
Thêm 3 ảnh, thêm tiếp 6 ảnh, rồi bấm Tự xếp. Ảnh chụp màn hình: ColorME.
Trước: 6 ảnh vừa thêm nằm chồng ở giữa.
Sau: một lần bấm Tự xếp. Ảnh chụp màn hình: ColorME.
Bước 3: chọn khung, màu nền, khoảng cách và bo góc
Bấm Khung để mở bảng tuỳ chỉnh. Có bốn nhóm:
- Tỉ lệ khung: 12 lựa chọn đặt theo nơi bạn sẽ dùng bảng (bảng kích thước ở phần dưới).
- Nền: Trắng, Kem, Tối, và một ô chọn màu tự do.
- Khoảng cách khi tự xếp: từ 0 đến 64, mỗi nấc 4, mặc định 24.
- Bo góc ảnh: từ 0 đến 48, mỗi nấc 4, mặc định 0.
Bảng mẫu dùng khung 4:3, nền Kem, khoảng cách 16, bo góc 12. Đổi tỉ lệ khung hoặc kéo thanh khoảng cách thì ảnh được xếp lại ngay, không phải bấm Tự xếp lần nữa.
Đổi nền, bo góc và thử ba tỉ lệ khung. Ảnh chụp màn hình: ColorME.
Bảng Khung với các giá trị dùng cho bảng mẫu. Ảnh chụp màn hình: ColorME.
Bước 4: lấy bảng màu từ chính các ảnh trong bảng
Bấm Lấy bảng màu. Công cụ gom màu chủ đạo của tất cả ảnh trong bảng và đặt 5 ô màu ở góc dưới bên phải, mỗi ô ghi sẵn mã HEX. Với 9 ảnh mẫu, kết quả là:
| Ô màu | Mã HEX | Đến từ đâu trong bảng |
|---|---|---|
| 1 | #E9E9E7 | Nền trắng ngà của ảnh hoa khô, lá khô |
| 2 | #B7B4A9 | Mặt tường nhám, gốm mộc chưa nung |
| 3 | #C5AD74 | Vải lanh vàng be |
| 4 | #847B55 | Nền xanh rêu của ảnh cỏ khô |
| 5 | #7A553A | Nền nâu đất của ảnh lọ hoa |
Cột thứ ba là nhận xét của chúng tôi khi so ô màu với ảnh, không phải thông tin công cụ đưa ra. Bấm vào một ô màu sẽ thấy thêm nút Đổi màu để chỉnh tay, cùng Nhân bản và Xoá. Bấm Lấy bảng màu lần nữa thì 5 ô cũ được thay bằng 5 ô mới, không bị nhân đôi.
Năm ô màu vừa tạo nằm đè lên ảnh; lần Tự xếp kế tiếp sẽ chừa chỗ cho chúng. Ảnh chụp màn hình: ColorME.
Cần lấy màu chính xác tại một điểm thay vì màu chủ đạo của cả bảng? Dùng cách trong bài lấy mã màu từ ảnh. Còn muốn một bảng màu riêng cho từng ảnh thì có công cụ Trích xuất bảng màu.
Bước 5: thêm tiêu đề
Bấm Chữ. Một dòng "Tiêu đề moodboard" xuất hiện, kèm hàng nút bên dưới bảng: Lên trên, Sửa chữ, A−, A+, Nhân bản, Xoá. Bấm Sửa chữ, gõ nội dung, rồi bấm ra ngoài (dòng hướng dẫn dưới bảng ghi rằng nhấp đúp vào chữ cũng sửa được; chúng tôi dùng nút Sửa chữ). Chữ có dấu tiếng Việt hiển thị đủ, cả trên màn hình lẫn trong file PNG.
Nút A− và A+ đổi cỡ chữ: trên bảng rộng 1600 px, chữ mặc định 73 px, bấm A− một lần còn 64 px. Sau đó bấm Tự xếp thêm lần nữa: tiêu đề được đưa lên góc trên bên trái, ảnh dồn xuống dưới, 5 ô màu giữ chỗ ở góc dưới.
Lấy bảng màu, thêm và sửa tiêu đề, rồi Tự xếp lại. Ảnh chụp màn hình: ColorME.
Bước 6: chỉnh tay rồi tải PNG
Tự xếp chỉ là điểm bắt đầu. Mọi thứ trong bảng đều kéo được:
- Kéo một ảnh, dòng chữ hoặc ô màu để di chuyển. Trong bảng mẫu, chúng tôi kéo tiêu đề sang phải cho thẳng mép trái của lưới ảnh.
- Kéo chấm xanh ở góc dưới bên phải để đổi cỡ; ảnh luôn giữ đúng tỉ lệ.
- Bấm chọn một ảnh để thấy ba nút Lên trên, Nhân bản, Xoá. Phím Delete cũng xoá mục đang chọn.
Ảnh đang chọn có viền và chấm xanh. Ảnh chụp màn hình: ColorME.
Xong thì bấm Tải PNG. File có tên dạng moodboard-….png, nền đúng màu bạn chọn, kích thước theo khung.
Bảng mẫu ngay trước khi tải về. Ảnh chụp màn hình: ColorME.
Khung nào cho ra file bao nhiêu pixel?
Chúng tôi tải cùng một bảng ở năm khung và đo file nhận được:
| Khung | Nhãn trong công cụ | File PNG | Dung lượng với bảng mẫu |
|---|---|---|---|
| 16:10 | Màn hình | 1600×1000 px | 1,93 MB |
| 16:9 | YouTube · Slide | 1920×1080 px | 2,54 MB (bảng thử 8 ảnh) |
| 4:3 | Thuyết trình · Dribbble | 1600×1200 px | 2,47 MB |
| 1:1 | Instagram vuông | 1400×1400 px | 2,59 MB |
| 9:16 | Story · TikTok · Reels | 1080×1920 px | 3,30 MB |
Bảy khung còn lại (3:2, Behance cover, 1.91:1 cho Facebook và LinkedIn, 4:5, 2:3 cho Pinterest, A4 ngang, A4 dọc) có trong bảng Khung; chúng tôi chưa đo file của các khung này. Dung lượng phụ thuộc vào ảnh bạn đưa vào, nên con số ở cột cuối chỉ đúng với bảng mẫu.
Đây là cùng một bảng sau khi đổi khung, chưa kéo chỉnh gì thêm. Mỗi lần đổi khung, ảnh được tự xếp lại; với khung dọc hoặc vuông bạn nên kéo chỉnh thêm vài ảnh cho kín bảng.
Khung 1:1 (1400×1400 px).
Khung 9:16 (1080×1920 px). Hai file PNG tải từ công cụ; ảnh trong bảng: xem ghi công ở đầu bài.
Moodboard có tự lưu không, ảnh có bị tải lên máy chủ không?
Bảng được tự lưu trong trình duyệt của máy bạn. Chúng tôi tải lại trang khi bảng đang có 14 mục (8 ảnh, 1 dòng chữ, 5 ô màu): cả 14 mục, màu nền, khoảng cách và bo góc đều còn nguyên. Vì lưu trong trình duyệt nên bảng không đi theo bạn sang máy khác hay trình duyệt khác, và sẽ mất nếu bạn xoá dữ liệu duyệt web. Muốn làm bảng mới, mở Khung, bấm Xoá toàn bộ, rồi bấm lần nữa khi nút đổi thành "Bấm lần nữa để xoá hết".
Về ảnh của bạn: ảnh được xử lý ngay trên trình duyệt, không cần tải lên máy chủ để xử lý. Khi bạn tải về, ColorME nhận một bản moodboard để theo dõi cách công cụ được dùng. Vì vậy đừng đưa vào bảng những ảnh bạn chưa được phép chia sẻ, chẳng hạn tài liệu mật của khách hàng.
Làm moodboard trên điện thoại có được không?
Được. Ở màn hình rộng 390 px, trang không bị cuộn ngang, bảng thu lại còn 366 px bề ngang; thêm ảnh, lấy bảng màu, thêm chữ, Tự xếp và Tải PNG đều chạy, file tải về vẫn đủ 1600×1200 px. Chúng tôi thử bằng chế độ giả lập điện thoại trên máy tính nên chưa kiểm tra thao tác kéo bằng ngón tay. Trang công cụ cũng nói thẳng: kéo thả và sắp xếp nhiều ảnh trên máy tính sẽ thuận tiện hơn.
Giao diện ở bề ngang 390 px. Ảnh chụp màn hình: ColorME.
Những gì chúng tôi chưa thử
- Thả ảnh từ thư mục vào trang và dán ảnh bằng Ctrl/Cmd + V. Trang công cụ ghi là có; trong bài chúng tôi chỉ dùng nút Thêm ảnh.
- Kéo, đổi cỡ bằng ngón tay trên điện thoại thật.
- Nền Tối, ô chọn màu nền tự do, và 7 khung nêu ở trên.
- Bảng nhiều hơn 9 ảnh, hoặc ảnh nặng: ảnh thử đều dài cạnh lớn nhất 1600 px, mỗi file dưới 1 MB.
- Mục Lịch sử của tài khoản: mọi lần thử đều làm khi chưa đăng nhập.
Làm xong moodboard thì làm gì tiếp?
Gửi file PNG cho khách hoặc nhóm để chốt hướng trước khi vẽ. Khi đã chốt, năm mã HEX trong bảng là điểm bắt đầu cho bảng màu của dự án: cần số RGB hay CMYK thì xem bài đổi mã màu HEX sang RGB, CMYK, HSL. Bước kế tiếp thường là chọn chữ; bài ghép font tiếng Việt: 20 cặp font Google có sẵn các cặp đã thử dấu.
Câu hỏi thường gặp
Tạo moodboard online ở đây có mất phí, có cần đăng nhập không?
Không. Trang công cụ ghi "Miễn phí, không cần đăng nhập", và toàn bộ các bước trong bài được làm khi chưa đăng nhập.
Một moodboard nên có bao nhiêu ảnh?
Trang công cụ gợi ý khoảng 8–15 ảnh. Bảng mẫu dùng 9 ảnh; ở khung 4:3 chúng vừa một lưới 3 cột, 3 hàng.
Moodboard nên gồm những gì ngoài ảnh?
Theo trang công cụ: ảnh tham khảo phong cách, bảng màu, font chữ, chất liệu, bố cục và vài từ khoá cảm xúc. Công cụ này lo được phần ảnh, bảng màu và chữ; chất liệu và bố cục bạn thể hiện qua chính ảnh chọn vào.
Tắt trình duyệt có mất bảng đang làm không?
Trang công cụ trả lời: "Không, bảng được tự lưu trên trình duyệt của máy bạn để lần sau mở lại vẫn còn." Chúng tôi đã thử tải lại trang và bảng còn nguyên; chưa thử tắt hẳn trình duyệt rồi mở lại.
Ảnh của tôi có bị tải lên máy chủ không?
Trang công cụ trả lời: "Ảnh được xử lý trên trình duyệt. Khi bạn tải về, ColorME nhận một bản moodboard để theo dõi cách công cụ được dùng; nếu bạn đã đăng nhập, file kết quả còn được lưu vào mục Lịch sử riêng của bạn. Khi bạn bấm 'Lấy bảng màu', ColorME cũng ghi nhận các mã màu của bảng màu đó, không kèm ảnh."
Ảnh lấy trên mạng có dùng cho moodboard được không?
Trang công cụ viết: "Moodboard dùng nội bộ để tham khảo thì phổ biến; nếu đưa vào sản phẩm công khai, hãy dùng ảnh có quyền sử dụng hoặc ảnh miễn phí bản quyền."
