PerfectVector
Bởi Irene Kim

Cách tạo logo một màu mà không mất thiết kế

Đổi logo nhiều màu thành một màu đặc mà vẫn giữ chi tiết quan trọng. Dùng khoảng âm, thử nền sáng và tối, đồng thời kiểm tra phiên bản nhỏ.

11 phút đọc
Trên trang này

Để tạo logo một màu, hãy dùng một màu đặc cho phần thiết kế được tô và giữ các chi tiết bên trong quan trọng thành khoảng trống khi cần. Đổi mọi màu tô thành đen có thể làm mất biểu tượng vốn chỉ nhìn thấy nhờ màu khác.

Bắt đầu từ bản vector gốc đã được phê duyệt hoặc phiên bản một màu có sẵn. Làm việc trên bản sao, quyết định chi tiết nào phải giữ, rồi kiểm tra kết quả trên nhiều nền và ở kích thước hiển thị dự kiến. Ví dụ bên dưới dùng huy hiệu và tia sét tự tạo để cho thấy quyết định thiết kế cùng hình học SVG phía sau.

Bắt đầu từ tệp logo đã được phê duyệt

Hỏi chủ thương hiệu về tài nguyên một màu trước khi vẽ lại dấu hiệu. Thương hiệu có thể đã có phiên bản đầy đủ màu, một màu và đảo trắng riêng, mỗi bản được duyệt cho các nền cụ thể.

Ví dụ, hướng dẫn dấu hiệu của Penn State mô tả phiên bản một màu có vùng trong suốt bên trong và cảnh báo không tạo nó bằng cách tô lại một phiên bản khác. Đó là quy tắc của một thương hiệu cụ thể, nhưng minh họa lý do tài nguyên một màu được cung cấp có thể khác bản gốc đầy đủ màu.

Nếu sở hữu thiết kế và cần tạo phiên bản này, hãy giữ các đầu vào sau cùng nhau:

  • Bản gốc chưa sửa và bản làm việc có thể chỉnh sửa
  • Danh sách chi tiết nhận diện, chẳng hạn biểu tượng bên trong hoặc lòng chữ
  • Kích thước hiển thị nhỏ nhất dự kiến và các màu nền có thể dùng
  • Định dạng tệp và yêu cầu mực mà bên nhận chấp nhận, nếu có in ấn

SVG là tệp đồ họa vector, nhưng có thể chứa ảnh pixel thay vì hình có thể chỉnh sửa. Nếu chỉ còn PNG hoặc JPG, hướng dẫn vector hóa logo giải thích bước khôi phục nguồn. Khôi phục hình và thiết kế phiên bản một màu là các quyết định riêng.

Quyết định ranh giới nào cần giữ

Hãy nghĩ đến huy hiệu tròn xanh lam với tia sét vàng. Ranh giới màu làm tia sét nhìn thấy được. Cho cả hai hình cùng màu tô than chì sẽ chỉ còn hình tròn trơn: đường dẫn vẫn tồn tại, nhưng màu giống nhau che khuất khác biệt bên trong.

Khoảng âm là vùng không tô làm lộ bề mặt phía sau thiết kế. Biến tia sét thành khoảng âm giữ lại họa tiết trong khi huy hiệu dùng một màu được tô.

Chi tiết trong bản gốcQuyết định cho phiên bản một màu
Biểu tượng quan trọng bên trongGiữ ranh giới, có thể dưới dạng khoảng trống
Biến thiên màu trang tríBỏ nếu thiết kế vẫn đọc đúng
Lòng chữ hoặc khoảng giữa các thành phầnGiữ độ tách đủ để còn thấy ở kích thước dự kiến

Một số logo chỉ cần thay màu tô. Dùng hướng dẫn đổi màu SVG cho trường hợp đó. Nếu giữ nhiều màu và gộp các màu gần giống, trước hết làm theo quy trình giảm bảng màu.

Chuỗi khái niệm từ huy hiệu xanh lam có tia sét vàng sang hình tròn than chì trơn, rồi huy hiệu than chì có họa tiết tia sét rỗng
Minh họa khái niệm: gộp màu tô làm tia sét biến mất; dùng khoảng âm giữ ranh giới của nó. Mã SVG bên dưới là ví dụ kỹ thuật số được kiểm tra riêng.

Tạo khoảng trống trong hình học SVG

Để có ví dụ tái tạo được, lưu thiết kế tự tạo này thành original.svg. Đường dẫn là hình được mô tả bằng chỉ dẫn vẽ; tệp này có một đường kín cho huy hiệu và một đường khác cho tia sét.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <path fill="#0d6efd"
    d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z"/>
  <path fill="#f5d447"
    d="M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>
  1. Mở bản gốc trong trình duyệt để thấy thiết kế hai màu.
  2. Lưu bản thứ hai và thay cả hai giá trị màu tô bằng #111827. Mở lại. Tia sét giờ hòa vào huy hiệu.
  3. Lưu mã đã sửa bên dưới thành one-color.svg. Mã giữ cùng tọa độ vẽ nhưng đặt cả hai đường bao trong một đường dẫn.
  4. Mở tệp đã sửa trên nền sáng và tối, rồi kiểm tra ở kích thước hiển thị dự kiến.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <path fill="#111827" fill-rule="evenodd"
    d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z
       M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>

fill-rule xác định vùng nào bên trong đường dẫn nhận màu tô. Trong ví dụ lồng nhau này, evenodd để vùng tia sét không tô. Đặc tả fill-rule SVG định nghĩa hành vi đó. Tệp chứa một màu tô đặc, không có hình trắng phía trước hoặc hình chữ nhật nền.

Bạn cũng có thể tạo kiểu khoảng trống này trong trình chỉnh sửa vector. Tài liệu đường dẫn phức hợp của Adobe giải thích vùng trong suốt và các quy tắc tô có sẵn. Mã ở đây là SVG tự viết, không phải bản xuất Illustrator; dùng các điều khiển được tài liệu trình chỉnh sửa mô tả và mở lại kết quả đã lưu để kiểm tra khoảng trống.

Kiểm tra nền và phiên bản nhỏ

Đặt logo đã sửa lên nền trắng và nền tối hoặc màu tương phản. Tia sét cần để lộ từng nền. Tia sét được tô trắng sẽ vẫn trắng trên nền màu, dù trông giống khoảng trống khi ở nền trắng.

Với ví dụ tự tạo này, chúng tôi kết xuất các tệp đã lưu ở 256 và 32 pixel bằng Sharp cùng librsvg. Ở cả hai cỡ, điểm mẫu bên trong tia sét đã sửa có alpha 0, tức hoàn toàn trong suốt. Bản đối chứng đồng màu có màu than chì đục tại cùng điểm; bản đối chứng phủ trắng riêng có màu trắng đục. Đây là kiểm tra kỹ thuật số của tệp tự tạo, không phải kết quả máy in hoặc ứng dụng nhập.

Ở chế độ xem 32 pixel thực tế, tia sét đã sửa vẫn phân biệt được trên nền trắng và xám xanh đã kiểm tra. Điều này tạo phép kiểm tra hữu ích cho mẫu này; không đặt kích thước tối thiểu cho logo khác. Xem trước thiết kế của bạn ở cỡ sử dụng thực tế thay vì chỉ đánh giá trên khung vẽ phóng lớn.

Trước khi chấp nhận phiên bản, hãy kiểm tra:

  • Họa tiết quan trọng bên trong vẫn đọc đúng ý định.
  • Vùng trống làm lộ nền thay vì mảng tô trắng.
  • Khoảng nhỏ và lòng chữ vẫn nhìn thấy ở cỡ đã chọn.
  • Tệp đã lưu mở lại với hình học mong muốn và một màu tô đặc.

Để tạo bản đảo trắng của mẫu này, đổi màu tô đường dẫn đã sửa thành #ffffff và giữ nguyên vùng tia sét rỗng. Kiểm tra trên nền tối. Tài nguyên đảo màu của thương hiệu có thể cần hình học khác, nên hãy làm theo bản thương hiệu cung cấp nếu có.

Sửa phiên bản bị mất chi tiết

Điều bạn thấyĐiều cần thay đổi
Biểu tượng bên trong biến mất sau đổi màuKhôi phục ranh giới bằng khoảng âm có chủ đích hoặc dùng phiên bản một màu đã phê duyệt
Khoảng tưởng là rỗng vẫn trắng trên bề mặt màuBỏ lớp phủ có tô và tạo vùng trống thực sự
Khoảng hở khó đọc ở cỡ đã chọnNới rộng hoặc đơn giản hóa trong quy tắc phê duyệt thiết kế, rồi lặp lại kiểm tra cỡ nhỏ
Khoảng trống bị tô sau khi nhập ứng dụng đíchKiểm tra đường dẫn đã nhập và quy tắc tô; tạo lại khoảng trống ở đó nếu cần và kiểm tra lại kết quả đã lưu

Tránh biến mọi vùng màu thành lỗ. Điểm sáng có thể bỏ được, trong khi lòng chữ mang ý nghĩa. Quyết định theo đặc điểm nhận diện của thiết kế rồi so sánh phiên bản với bản gốc. Nếu thay đổi đáng kể hình bóng hoặc tỷ lệ bên trong, hãy xin phê duyệt bản mới trước khi dùng làm dấu hiệu thương hiệu.

Tách yêu cầu bàn giao khỏi thiết kế

Lưu bản gốc đầy đủ màu, phiên bản một màu tối và mọi phiên bản đảo trắng được phê duyệt thành các tệp riêng. Giữ cùng khung vẽ và vị trí khi chúng cần thay thế nhau trong bố cục.

Một màu tô SVG đặc không đặt tên mực pha sẵn của nhà in hay tạo bản in sản xuất. Xác nhận tên màu được yêu cầu, kích thước vật lý, loại tệp được chấp nhận và giả định về nền với bên nhận. Hướng dẫn định dạng tệp logo trình bày cách chọn bản gốc có thể chỉnh sửa và định dạng bàn giao. Các chủ đề chuẩn bị khác được tập hợp trong hướng dẫn logo và thiết kế.

Nếu nguồn duy nhất là PNG hoặc JPG

Với logo raster còn lại phù hợp, công cụ vector hóa logo của PerfectVector có thể giúp khôi phục hình SVG. Bản xem trước là hình raster được bảo vệ; chỉnh sửa và xuất SVG thực tế khả dụng sau khi mở khóa kết quả. Kiểm tra các hình khôi phục trước khi dùng để tạo phiên bản một màu.

Đồ lại pixel không quyết định chi tiết nào nên thành khoảng âm. Nếu nguồn có mép mờ, thiếu khoảng trống hoặc không có ranh giới nhìn thấy giữa hai vùng, hãy dùng bản gốc đã duyệt hoặc chủ ý vẽ lại phần thiết kế thiếu. Lặp lại kiểm tra nền và cỡ nhỏ sau mọi thay đổi hình học.

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

Logo một màu là gì?

Logo một màu dùng một màu tô đặc. Vùng trống làm lộ nền. Phiên bản tối và phiên bản đảo trắng là các biến thể riêng, không phải hai màu được tô cùng nhau trong một dấu hiệu.

Đổi mọi màu tô thành đen có đủ không?

Đôi khi. Nếu màu là ranh giới duy nhất giữa biểu tượng quan trọng và xung quanh, cho màu tô giống nhau sẽ che biểu tượng. Giữ ranh giới bằng khoảng âm hoặc dùng tài nguyên một màu đã được phê duyệt.

Có cần đồ lại logo vốn đã là vector không?

Không. Làm việc với hình có thể chỉnh sửa hiện có và giữ bản gốc. Đồ lại là bước khôi phục nguồn cho ảnh pixel phù hợp, không phải yêu cầu để tạo bản một màu từ hình học vector.

Màu tô SVG trắng có tự động chỉ định mực trắng không?

Không. Màu tô trắng mô tả màu của thiết kế, còn khoảng trống không được tô. Nhà in xác định cách nhận diện và cung cấp mực trắng trong quy trình sản xuất của họ.

Nguồn

  1. Penn State: Màu sắc và dấu hiệu — Ví dụ cụ thể về các phiên bản thương hiệu một màu và đảo màu đã phê duyệt, gồm vùng trong suốt bên trong.
  2. Adobe: Tạo đường dẫn phức hợp — Mô tả vùng trong suốt, quy tắc tô và hướng đường dẫn trong đường dẫn phức hợp Illustrator.
  3. W3C: fill-rule SVG 2 — Định nghĩa vùng nào của đường dẫn phức hợp nhận màu tô trong ví dụ SVG gốc.

Chỉ có PNG hoặc JPG? Chuyển logo thành SVG có thể chỉnh sửa, mở khóa kết quả rồi kiểm tra các hình được khôi phục trước khi tạo và kiểm tra phiên bản một màu.

Thêm từ blog

PerfectVector

Biến logo hoặc tác phẩm thành
SVG gọn sạch, dễ chỉnh sửa

Không cần thẻ tín dụng