Khoảng trống logo: tính và giữ phần lề an toàn

Tính khoảng trống logo từ đơn vị xác định trong thiết kế được phê duyệt, rồi đo ra ngoài từ giới hạn nhìn thấy của toàn bộ logo. Nếu đơn vị chọn là 10 và logo 150 × 40, vùng cần để trống một đơn vị ở mỗi phía chiếm 170 × 60. Chính logo vẫn là 150 × 40.

Khoảng trống là vùng quanh logo mà nội dung khác phải để trống. Phần lề trong tệp có thể giúp mang vùng đó vào bố cục, nhưng khung vẽ trống chỉ là một cách bàn giao. Hướng dẫn thương hiệu định nghĩa quy tắc. Nếu chuẩn bị tài nguyên thương hiệu hiện có, dùng quy tắc được phê duyệt trước khi tạo quy tắc mới.

Hướng dẫn này theo một bố cục logo tự tạo qua tính toán, xuất SVG và đổi kích thước. Nếu nguồn duy nhất là ảnh raster, khôi phục hình nhìn thấy trước; công cụ vector hóa không thể suy ra vùng trống được phê duyệt.

Chọn đơn vị thuộc về logo này

Dùng đặc điểm đo được giữ tỷ lệ khi logo được phê duyệt phóng thu: chiều cao biểu tượng, kích thước chữ cụ thể hoặc tỷ lệ quy định của toàn hình. Nêu chính xác thứ bạn đo. Tránh quy tắc như “để một ít chỗ” hoặc hình vuông X không giải thích.

Hướng dẫn thương hiệu chính thức cho thấy đây là chính sách thiết kế, không phải tỷ lệ chung. Hướng dẫn khoảng trống của University at Buffalo dùng chiều cao UB đan nhau quanh bố cục thương hiệu chính, với chỉ dẫn riêng cho hình nét. Hướng dẫn Vevo phân biệt dấu cao trên và dưới 30 px, đưa khoảng cách theo ngữ cảnh web và máy tính bảng. Làm theo quy tắc của dấu và ứng dụng thực tế.

Trong ví dụ tự tạo, biểu tượng tròn cao 40 đơn vị. Chúng tôi chọn X bằng một phần tư chiều cao đó: X = 10. Lề cần là một X mỗi phía. Đây là quy tắc đặt ra cho ví dụ, không khuyến nghị mọi thương hiệu dùng 25% chiều cao biểu tượng.

Viết quy tắc bằng ngôn ngữ đơn giản: “Với bố cục ngang này, X bằng một phần tư đường kính hình tròn. Để ít nhất một X ngoài mọi mép của toàn bộ bố cục.” Câu chữ mang chính sách ngay cả khi ứng dụng cắt khung vẽ trống.

Đo toàn bộ bố cục rồi thêm lề

Bố cục logo là cách sắp xếp được phê duyệt của biểu tượng và phần chữ dùng cùng nhau. Đo toàn bộ cách sắp xếp đó. Chỉ dùng giới hạn hình tròn sẽ bỏ chữ khỏi phép tính vùng cần để trống.

Hình tròn và ba chữ vẽ tay của chúng tôi trải từ x = 0 đến 150 và y = 0 đến 40. Ví dụ không có nét viền, bóng hoặc đối tượng ẩn. Vì vậy hình chữ nhật vùng trống chạy từ x = -10 đến 160 và y = -10 đến 50.

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

Nếu thiết kế có nét hoặc hiệu ứng nhìn thấy, đưa phạm vi nhìn thấy của chúng vào kiểm tra. Phép đo chỉ hình học có thể khác kết quả được tô. Hướng dẫn hộp giới hạn SVG giải thích khác biệt đó; ở đây chúng tôi chủ ý dùng hình học có tô đơn giản.

Mang quy tắc trong SVG có lề

SVG viewBox ánh xạ hình chữ nhật tọa độ bên trong vào vùng hiển thị. Trong ví dụ, viewBox="-10 -10 170 60" chứa lề tính được mà không di chuyển hoặc phóng hình.

Lưu ví dụ đầy đủ thành logo-padded.svg. Các chữ là hình được vẽ nên không phụ thuộc phông. Thiết kế hình tròn và chữ là ví dụ tự tạo, không phải tài nguyên được phê duyệt của thương hiệu khác.

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

Để tạo tài nguyên đi kèm có khung sát, dùng width="150", height="40" và viewBox="0 0 150 40" trong khi giữ cùng hình tròn và đường dẫn. Đặt tên để bên nhận biết tệp nào có lề. Giữ đường hướng dẫn đo trong tài liệu thương hiệu hoặc lớp duyệt riêng, không trong hình họ sẽ đặt.

Đổi cỡ tài nguyên mà không thu nhỏ logo dự kiến

Quyết định chiều rộng nói đến hình nhìn thấy hay toàn tệp có lề. Ở chiều rộng tệp 170 px, hình ví dụ rộng 150 px và lề 10 px. Ở chiều rộng tệp 340 px, hình rộng 300 px và lề 20 px. Quy tắc tỷ lệ giữ nguyên khi phóng thu đều.

Nếu yêu cầu logo nhìn thấy rộng 300 px, đặt tệp có lề này rộng 340 px. Đặt tệp có lề thành 300 px chỉ cho hình nhìn thấy khoảng 264,7 px, vì 300 × 150 / 170 xấp xỉ 264,7.

Ghi chú phương pháp: chúng tôi kết xuất đầy đủ SVG khung sát và có lề trong Chromium. Giới hạn hình học là 150 × 40 đơn vị. Tại chiều rộng có lề 170 px và 340 px, chiều rộng hình đo được là 150 px và 300 px, với lề 10 px và 20 px. Điều này xác minh ví dụ trình duyệt tự tạo, không xác định hành vi nhập của mọi trình chỉnh sửa.

Khi logo trông quá nhỏ, kiểm tra khung vẽ tệp trước khi phóng các đối tượng ngẫu nhiên. Khi khoảng trống mất sau nhập, kiểm tra giới hạn đã nhập ở đích và khôi phục lề theo quy tắc X đã viết. Với logo ngang trong khung khác, dùng khớp tỷ lệ khung hình SVG để hiểu khoảng trống bổ sung do vị trí đặt.

PerfectVector phù hợp ở đâu khi bàn giao logo

PerfectVector có thể khôi phục hình vector khi thương hiệu chỉ có bản raster. Sau khi có hình, so toàn dấu với tham chiếu đã duyệt, dọn phần nền ngoài ý muốn và áp dụng riêng quy tắc khoảng trống trong tài liệu thương hiệu. Quy trình vector hóa logo giải quyết bước khôi phục hình.

Hỏi bản vector gốc và hướng dẫn thương hiệu trước. Các tệp đó giữ thiết kế cùng quyết định khoảng cách tốt hơn bản đồ mới. Viền trống JPG có thể là lề xuất vô tình, không chứng minh chính sách thương hiệu. Hướng dẫn định dạng tệp logo giúp chọn tệp bàn giao, còn hướng dẫn vector hóa logo trình bày chuẩn bị và kiểm tra nguồn.

Hoàn tất bằng kiểm tra toàn hình, định nghĩa X đã viết, kích thước tệp có lề và bố cục thực xung quanh. Giữ bản gốc khung sát cùng tài nguyên đặt dự kiến. Các kiểm tra bàn giao khác có trong thư viện quy trình blog.

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

Khoảng trống logo có luôn bằng một phần tư chiều cao logo không?

Không. Một phần tư chiều cao hình tròn là quy tắc chọn cho ví dụ tự tạo này. Thương hiệu hiện có có thể định nghĩa đơn vị, tỷ lệ và ngoại lệ khác cho ứng dụng cụ thể.

Có nên thêm hình chữ nhật trắng để giữ khoảng trống không?

Bạn có thể dành chỗ trống bằng SVG viewBox mà không thêm hình chữ nhật có tô. Hình trắng thay đổi thiết kế trên nền màu. Thử tệp trong suốt có lề ở vị trí dự kiến.

SVG có lề có tự động thực thi hướng dẫn thương hiệu không?

Không. Nó mang chỗ trống trong vùng hiển thị, nhưng bộ nhập có thể cắt giới hạn và đối tượng bố cục có thể chồng lên. Quy tắc đã viết cùng kiểm tra vị trí cuối vẫn cần thiết.

Nguồn

1. University at Buffalo — Khoảng trống — Ví dụ chính thức về đơn vị dựa trên dấu và ngoại lệ theo ứng dụng.
2. Vevo — Khoảng trống logo — Cho thấy hướng dẫn đổi theo cỡ dấu và ngữ cảnh kỹ thuật số.
3. MDN — SVG viewBox — Giải thích hình chữ nhật tọa độ dùng mang lề trống của ví dụ.

Nếu thiếu vector gốc, khôi phục logo raster bằng PerfectVector. Kiểm tra toàn bố cục với tham chiếu, rồi áp dụng quy tắc khoảng trống đã duyệt và kiểm tra cỡ logo nhìn thấy ở vị trí cuối.