Xuất file logo bàn giao khách: PNG nền trong suốt, SVG, JPG đủ bộ

Xuất file logo để bàn giao cho khách: bộ file gồm bản màu gốc, đen, trắng ở SVG, PNG nền trong suốt 500, 1000, 2000 px, WebP, JPG và ảnh đại diện vuông 1080 px. Thử thật công cụ Xuất bộ file logo của ColorME, cách đặt tên file và checklist trước khi gửi.

Xuất file logo để bàn giao cho khách nghĩa là gửi cả một bộ file (logo pack), không phải một tấm PNG: logo ở bản màu gốc, bản đen, bản trắng, mỗi bản có SVG để phóng to bao nhiêu cũng nét, PNG nền trong suốt cho tài liệu và mạng xã hội, JPG trên nền màu, cộng thêm ảnh đại diện vuông. Cách nhanh nhất mình dùng là công cụ Xuất bộ file logo của ColorME: tải một file SVG lên, công cụ dựng sẵn cả bộ trong trình duyệt và gói thành một file ZIP.

Bài này mình làm thật với hai logo mẫu (thương hiệu giả định, không có thật), ngày 20/10/2026, khi chưa đăng nhập. Mọi con số về file bên dưới là từ file ZIP mình tải về và mở ra kiểm tra.

Bộ file logo bàn giao khách gồm những gì

Khách nhận logo rồi sẽ dùng nó ở rất nhiều chỗ mà lúc thiết kế mình không nghĩ tới: biển hiệu, tem dán, slide báo cáo, ảnh đại diện fanpage, chữ ký email, file in một màu ở xưởng khắc. Một tấm PNG duy nhất sẽ thiếu ở gần như mọi chỗ đó. Vì vậy bộ file bàn giao thường đi theo hai trục:

• Bản màu: màu gốc để dùng trên nền sáng; bản một màu đen cho in một màu, khắc, đóng dấu; bản một màu trắng để đặt lên ảnh, nền tối hoặc nền màu thương hiệu.
• Định dạng và kích thước: vector (SVG) cho mọi việc cần phóng to, ảnh nền trong suốt (PNG) ở vài cỡ, ảnh nền màu (JPG) và ảnh vuông làm avatar.

Trang công cụ của ColorME định nghĩa đúng như vậy: "Là bộ file logo người thiết kế bàn giao cho khách: cùng một logo ở nhiều bản màu (màu gốc, đen, trắng) và nhiều định dạng (SVG, PNG, JPG...) để dùng được trên website, mạng xã hội, tài liệu và gửi nhà in."

Từ một file logo SVG, công cụ tạo 22 file chia 4 thư mục và một file hướng dẫn. File thật trong ZIP tải về ngày 20/10/2026; logo Đồi Sương là logo mẫu dựng cho bài.

SVG, PNG, JPG hay WebP: logo nên xuất định dạng nào

Hướng dẫn về định dạng ảnh của MDN Web Docs (mình đọc lại ngày 20/10/2026) nói khá gọn ba điều liên quan trực tiếp tới logo:

• Với ảnh chụp màn hình, sơ đồ, logo và nét vẽ, nên dùng nén không mất dữ liệu (lossless), vì nhoè và viền màu quanh chữ, cạnh sắc rất dễ thấy.
• JPEG là định dạng nén mất dữ liệu và không có kênh trong suốt (alpha), nên ảnh cần nền trong suốt thì dùng PNG.
• Hình cần vẽ chính xác ở nhiều kích thước khác nhau thì dùng SVG, định dạng vector mô tả hình bằng các lệnh vẽ.

Từ đó, cách mình chia việc cho từng file (đây là cách làm thường gặp, không phải quy chuẩn bắt buộc):

Nếu khách hỏi "file PNG với SVG khác gì", bạn có thể gửi họ mục SVG và PNG trong thư viện thuật ngữ của ColorME.

Cách xuất bộ file logo bằng công cụ ColorME

Mô tả trên trang công cụ ghi "Miễn phí, logo không rời khỏi máy". Mình làm toàn bộ các bước dưới đây khi chưa đăng nhập.

Bước 1: Mở công cụ và chọn file logo

Vào colorme.vn/tools/xuat-file-logo, bấm Tải logo lên, kéo thả file vào khung, hoặc dán ảnh bằng Ctrl/Cmd + V. Công cụ nhận SVG, PNG, JPG và WebP. Muốn xem trước kết quả trông thế nào thì bấm Thử logo mẫu, công cụ chạy với một logo mẫu có sẵn.

Trang công cụ Xuất bộ file logo khi chưa đăng nhập. Ảnh chụp màn hình thật, 20/10/2026.

Nên dùng file nào? Trang công cụ ghi ngay dưới khung thả file: "SVG là tốt nhất · PNG nền trong suốt cũng được". Lý do sẽ rõ ở phần thử file PNG bên dưới.

Bước 2: Xem 6 bản xem trước

Mình tải lên file doi-suong-logo.svg. Công cụ hiện ngay dòng tóm tắt "22 file · SVG, PNG, WebP, JPG · PNG cạnh dài 500, 1000, 2000px" và 6 ô xem trước:

• Màu gốc trên nền trong suốt (ô kẻ ca rô là phần trong suốt).
• Bản đen trên nền trắng.
• Bản trắng trên nền tối.
• Bản trắng trên màu thương hiệu. Công cụ tự lấy màu xanh rêu #0F4C43 từ logo của mình làm màu thương hiệu.
• Ảnh đại diện vuông trên nền trắng và trên nền tối.

Sau khi tải file SVG lên: 6 bản xem trước và dòng tóm tắt 22 file. Ảnh chụp màn hình thật, 20/10/2026.

Đây là lúc nên nhìn kỹ nhất: bản đen và bản trắng có giữ được chi tiết không. Với logo Đồi Sương (vòng tròn rỗng, hai nét đồi, chữ), cả hai bản đều sạch.

Bước 3: Đặt tên thương hiệu và màu nền

Bấm Tuỳ chỉnh để mở bảng chỉnh. Có ba thứ:

• Tên thương hiệu (dùng đặt tên file): mặc định là tên file bạn tải lên. Mình gõ "Đồi Sương" có dấu, file trong ZIP được đặt thành doi-suong-..., công cụ tự bỏ dấu và khoảng trắng.
• Màu nền cho bản trắng: chọn màu Nền tối và Màu thương hiệu để làm nền cho các file JPG và ảnh đại diện của bản trắng.
• Logo khác: chọn một file logo khác để làm lại.

Bảng Tuỳ chỉnh: tên thương hiệu dùng đặt tên file, màu nền cho bản trắng. Ảnh chụp màn hình thật, 20/10/2026.

Bước 4: Tải ZIP và kiểm tra

Bấm Tải ZIP. File mình nhận được tên doi-suong-logo.zip, nặng khoảng 1,2 MB, giải nén ra 22 file và một file doc-truoc.txt:

Vài con số mình đo trên file thật: logo ngang của mình cho PNG 2000 × 445 px (con số 500, 1000, 2000 là cạnh dài), các file JPG nền màu là 2480 × 925 px, bản SVG màu gốc giữ nguyên các đường vector như file mình tải lên. File doc-truoc.txt viết sẵn bằng tiếng Việt, ví dụ: "SVG File vector: phóng to bao nhiêu cũng nét. Gửi cho nhà in, làm biển hiệu, đưa vào Figma, Illustrator, website." Bạn có thể gửi kèm file này cho khách.

Về quyền riêng tư, phần câu hỏi thường gặp của công cụ trả lời câu "Logo của tôi có bị tải lên máy chủ không?" như sau: "Không. Mọi file được tạo trong trình duyệt trên máy bạn; logo và file ZIP không được gửi đi hay lưu lại ở đâu."

Trên điện thoại

Trang chạy được trên điện thoại: 6 ô xem trước xếp thành 2 cột, nút Tải ZIP và Tuỳ chỉnh vẫn ở trên cùng. Mình chỉ thử giao diện ở khổ 390 px; việc giải nén và gửi ZIP trên điện thoại tuỳ ứng dụng quản lý file của máy bạn.

Công cụ trên điện thoại, khổ 390 px. Ảnh chụp màn hình thật, 20/10/2026.

Lỗi hay gặp: logo có chữ trắng đè lên hình màu

Công cụ tạo bản đen, bản trắng bằng cách đổi mọi phần nhìn thấy của logo về một màu. Phần câu hỏi thường gặp nói rõ: "Logo có các mảng màu chồng lên nhau (ví dụ chữ trắng trên nền tròn màu) sẽ nhập thành một khối: hãy xem trước, và tự vẽ bản một màu riêng nếu cần."

Mình thử đúng trường hợp đó với logo thứ hai, Tiệm bánh Mây: chữ M màu trắng đặt trên hình tròn màu cam. Ở bản đen và bản trắng, chữ M biến mất, chỉ còn một hình tròn đặc. Sau đó mình sửa file SVG: thay vì đặt chữ trắng lên trên, mình khoét chữ M thủng qua hình tròn (một hình duy nhất, chữ là lỗ trống). Tải lại, cả bản đen lẫn bản trắng đều đọc được chữ M.

Trên: chữ M trắng đặt lên hình tròn, bản đen và bản trắng mất chữ. Dưới: chữ M khoét thủng hình tròn, bản một màu vẫn đọc được. Ảnh chụp màn hình thật, 20/10/2026.

Đây là bài học nên áp dụng ngay từ lúc vẽ logo, không chỉ khi xuất file: phần "chữ trắng" trong logo nên là khoảng trống (khoét, dùng Pathfinder Minus Front trong Illustrator hoặc Subtract trong Figma), không phải một lớp màu trắng đặt lên. Như vậy logo dùng được ở in một màu, khắc laser, đóng dấu mà không cần vẽ lại.

Chỉ có file PNG hoặc JPG nền trắng thì sao

Nhiều khi bạn nhận lại logo từ khách chỉ là một tấm ảnh nền trắng. Công cụ vẫn xử lý được, và theo phần câu hỏi thường gặp: "Vẫn dùng được: bạn nhận đủ các bản PNG, WebP, JPG nhưng không có SVG, và cỡ lớn nhất bằng cỡ ảnh gốc. Ảnh có nền một màu (ví dụ nền trắng) sẽ được tự bỏ nền; logo có chi tiết cùng màu với nền thì nên dùng file nền trong suốt."

Mình thử với chính logo Đồi Sương xuất thành PNG 1300 × 480 px nền trắng. Kết quả thật:

• Công cụ báo "File ảnh không tạo được SVG: hãy dùng file SVG gốc nếu bạn có." và trong bảng Tuỳ chỉnh hiện hai ô đang bật: Tự bỏ nền của ảnh và Xoá cả nền trắng bên trong.
• ZIP còn 16 file thay vì 22: không có SVG, PNG chỉ có 500 và 1000 px vì ảnh gốc chỉ rộng 1300 px.
• Nền trắng bên ngoài logo được bỏ sạch, và nhờ ô Xoá cả nền trắng bên trong, phần trắng nằm kín bên trong logo (lòng vòng tròn, lòng các chữ Ồ, Ơ, R...) cũng được bỏ. Mình đọc điểm ảnh của file PNG màu gốc trong ZIP: lòng vòng tròn giờ trong suốt, không còn điểm ảnh trắng đặc nào. Bản đen, bản trắng vì vậy giữ đúng vòng tròn rỗng và lòng chữ.
• Lần thử đầu (sáng 20/10/2026, trước bản cập nhật của công cụ), phần trắng bên trong vẫn còn và làm lấp lòng chữ ở bản một màu. Nếu logo của bạn cố ý có chi tiết màu trắng bên trong (ví dụ chữ trắng trên nền tròn), hãy tắt ô này rồi xem lại bản xem trước.

Tải PNG nền trắng: với ô "Xoá cả nền trắng bên trong" bật sẵn, cả nền ngoài lẫn phần trắng trong vòng tròn và lòng chữ đều được bỏ. Ảnh chụp màn hình thật và file thật trong ZIP, thử lại 20/10/2026.

Cách xử lý: nếu có thể, xin khách hoặc người thiết kế cũ file SVG, AI, PDF gốc. Nếu không có, bạn có thể thử vẽ lại thành vector bằng công cụ Chuyển ảnh sang vector rồi chỉnh trong phần mềm thiết kế, hoặc tách nền kỹ hơn trước theo bài tách nền chữ ký, logo thành PNG trong suốt. Mình chưa thử nối hai bước này với logo trên, nên chưa nói được kết quả.

Đặt tên file và sắp thư mục khi bàn giao

Một bộ 20 file mà tên là logo-final-final2.png thì khách sẽ không bao giờ tìm đúng file. Những điều mình luôn làm (cách làm thường gặp ở các studio):

• Tên file không dấu, không khoảng trắng, chữ thường, nối bằng gạch ngang: tên thương hiệu, bản màu, kích thước. Ví dụ doi-suong-logo-den-1000.png. Tên có dấu tiếng Việt dễ bị lỗi khi giải nén trên máy khác hoặc khi tải lên một số hệ thống.
• Chia thư mục theo bản màu, không theo định dạng: người dùng thường biết mình cần "logo trắng" trước khi biết cần PNG hay SVG.
• Kèm một file hướng dẫn ngắn: file nào dùng cho việc gì, mã màu thương hiệu, khoảng trống tối thiểu quanh logo.
• Giữ file gốc riêng (AI, Figma, PDF có thể chỉnh sửa) và thoả thuận trước với khách là có bàn giao file gốc hay không.

Công cụ ColorME làm sẵn phần lớn việc này: thư mục chia theo bản màu (1-mau-goc, 2-den, 3-trang, 4-anh-dai-dien), tên file không dấu có hậu tố bản màu và kích thước (doi-suong-den-1000px.png), và file doc-truoc.txt hướng dẫn cách dùng. Bạn chỉ cần thêm file gốc, bảng mã màu và file in nếu khách cần.

File in ấn: CMYK, EPS, PDF thì sao

Đây là chỗ cần nói thật: công cụ chạy trong trình duyệt nên chỉ xuất được màu RGB cho màn hình. Phần câu hỏi thường gặp của công cụ ghi: "Chưa. Trình duyệt chỉ xuất được màu RGB cho màn hình. Khi in, hãy gửi file SVG cho nhà in hoặc người thiết kế để chuyển sang CMYK hay Pantone."

Trong thực tế, khi bàn giao logo cho khách có nhu cầu in, mình thêm vào bộ file:

• Một file PDF hoặc AI vector ở hệ màu CMYK, xuất từ Illustrator hoặc phần mềm bạn dùng để vẽ logo.
• Bảng mã màu: HEX cho màn hình, CMYK cho in, và mã Pantone nếu thương hiệu có chọn.
• Ghi chú cho nhà in: logo nhỏ nhất được in là bao nhiêu, bản nào dùng trên nền tối.

Nếu bạn đang học để tự làm trọn phần này, khoá Illustrator của ColorME đi qua vẽ logo vector và chuẩn bị file in.

Checklist trước khi gửi bộ file logo cho khách

1. Mở từng bản màu trên nền sáng, nền tối, trên một tấm ảnh: bản trắng có mất chi tiết không, bản đen có bị nhập khối không.
2. Thu logo xuống cỡ ảnh đại diện (khoảng 100 px): chữ phụ còn đọc được không. Nếu không, cân nhắc một bản logo rút gọn chỉ có biểu tượng.
3. Kiểm tra nền trong suốt thật: đặt PNG lên nền màu, không còn viền trắng.
4. Kiểm tra tên file, tên thư mục không dấu, không khoảng trắng.
5. Kèm file hướng dẫn, bảng mã màu, và file in (CMYK) nếu khách cần in.
6. Nén thành một file ZIP, đặt tên theo thương hiệu, gửi kèm vài dòng giải thích trong tin nhắn hoặc email.

Công cụ làm được và chưa làm được gì

Những gì mình thấy khi thử ngày 20/10/2026:

• Làm được: từ một file SVG ra 22 file ở 3 bản màu và 4 định dạng, ảnh đại diện vuông, tên file không dấu, file hướng dẫn tiếng Việt; tự bỏ nền một màu với PNG, JPG, kể cả phần trắng kín bên trong logo; bản đen, bản trắng SVG đổi thẳng thuộc tính fill, stroke sang đen hoặc trắng (mình mở file SVG trong ZIP kiểm tra); tự lấy màu thương hiệu từ logo; chạy trên máy tính và điện thoại.
• Chưa làm được: file CMYK, EPS, PDF để in; bản đen, bản trắng cho logo có lớp màu chồng nhau (sẽ nhập khối); tạo SVG từ file ảnh.
• Mình chưa thử: logo nhiều màu chuyển sắc (gradient), logo có ảnh chụp bên trong, file SVG xuất từ các phần mềm khác nhau (mình dùng file SVG tự tạo), mở các file SVG bản đen, bản trắng trong Illustrator hay Figma, và tải ZIP trên điện thoại.

Cần thêm favicon cho website từ cùng logo thì xem bài tạo favicon cho website từ logo.

Câu hỏi thường gặp

Bộ file logo bàn giao cho khách gồm những gì?

Thường gồm logo ở bản màu gốc, bản một màu đen và bản một màu trắng; mỗi bản có SVG (vector), PNG nền trong suốt ở vài kích thước, JPG trên nền màu, cộng ảnh đại diện vuông và một file hướng dẫn. Nếu khách cần in thì thêm file vector CMYK và bảng mã màu.

Logo nên xuất file PNG hay SVG?

Cả hai. SVG là vector, phóng to không vỡ, dùng để in, làm biển, đưa vào website hay phần mềm thiết kế. PNG nền trong suốt dùng cho slide, tài liệu, ảnh mạng xã hội và video. JPG không có kênh trong suốt nên chỉ dùng khi cần nền màu.

Làm sao xuất file logo nền trong suốt?

Xuất PNG (hoặc WebP) chứ không phải JPG. Với công cụ Xuất bộ file logo của ColorME, bạn tải file SVG hoặc PNG nền trong suốt lên, các file PNG trong ZIP đều có nền trong suốt ở cạnh dài 500, 1000 và 2000 px.

Công cụ Xuất bộ file logo có tải logo của tôi lên máy chủ không?

Phần câu hỏi thường gặp của công cụ trả lời: "Không. Mọi file được tạo trong trình duyệt trên máy bạn; logo và file ZIP không được gửi đi hay lưu lại ở đâu."

Có xuất được file CMYK hoặc EPS để in không?

Chưa. Theo trang công cụ: "Trình duyệt chỉ xuất được màu RGB cho màn hình. Khi in, hãy gửi file SVG cho nhà in hoặc người thiết kế để chuyển sang CMYK hay Pantone."

Chỉ có logo JPG nền trắng thì xuất được không?

Được, nhưng không có SVG và cỡ lớn nhất bằng cỡ ảnh gốc. Công cụ tự bỏ nền trắng, kể cả phần trắng kín bên trong logo khi ô "Xoá cả nền trắng bên trong" đang bật (mặc định bật). Có file SVG thì vẫn nên dùng SVG để có đủ bộ vector.