Pole ochronne logo: oblicz i zachowaj margines

Oblicz pole ochronne logo na podstawie określonej jednostki zatwierdzonej grafiki, a potem mierz na zewnątrz widocznych granic całego logo. Jeśli jednostka wynosi 10, a logo ma 150 na 40, pole ochronne po jednej jednostce z każdej strony zajmuje 170 na 60. Samo logo nadal ma 150 na 40.

Pole ochronne to obszar, który inna treść musi pozostawić pusty wokół logo. Margines pliku może pomóc przenieść tę przestrzeń do układu, ale pusty obszar roboczy jest tylko jedną metodą przekazania. Regułę definiują wytyczne marki. Przygotowując zasoby istniejącej marki, zastosuj zatwierdzoną regułę przed tworzeniem nowej.

Poradnik prowadzi autorski zestaw znaku i logotypu przez obliczenia, eksport SVG i zmianę rozmiaru. Jeśli źródłem jest tylko raster, najpierw odzyskaj widoczne kształty; wektoryzator nie potrafi wywnioskować zatwierdzonego pola ochronnego.

Wybierz jednostkę należącą do tego logo

Użyj mierzalnej cechy zachowującej proporcje przy skalowaniu zatwierdzonego logo: wysokości symbolu, wymiaru konkretnej litery lub określonej części całej grafiki. Nazwij dokładnie mierzony element. Unikaj reguły „zostaw trochę miejsca” lub niewyjaśnionego kwadratu X.

Oficjalne wytyczne pokazują, dlaczego jest to polityka projektowa, a nie uniwersalny współczynnik. Poradnik pola ochronnego University at Buffalo używa wysokości połączonych liter UB wokół głównego zestawienia marki, z oddzielnymi wskazówkami dla grafiki liniowej. Poradnik Vevo rozróżnia znaki powyżej i poniżej 30 px wysokości oraz podaje odstępy zależne od kontekstu internetowego i tabletu. Stosuj regułę rzeczywistego znaku i zastosowania.

W autorskim przykładzie okrągły symbol ma 40 jednostek wysokości. Wybieramy X jako jedną czwartą: X = 10. Wymagany margines to jedno X z każdej strony. To wymyślona zasada tego przykładu, a nie zalecenie 25% wysokości symbolu dla każdej marki.

Zapisz regułę prostym językiem: „Dla tego poziomego zestawienia X jest jedną czwartą średnicy koła. Pozostaw co najmniej jedno X poza każdą krawędzią pełnego zestawienia”. Słowa przenoszą zasadę nawet wtedy, gdy aplikacja przytnie pusty obszar roboczy.

Zmierz pełne zestawienie, potem dodaj margines

Zestawienie to zatwierdzony układ symbolu i logotypu używanych razem. Zmierz całość. Użycie granic samego koła pozostawiłoby litery poza obliczeniem pola ochronnego.

Nasze koło i trzy narysowane litery rozciągają się od x = 0 do 150 i od y = 0 do 40. Nie ma obrysów, cieni ani ukrytych obiektów. Prostokąt wyłączenia biegnie więc od x = -10 do 160 i od y = -10 do 50.

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

Jeśli grafika ma widoczne obrysy lub efekty, uwzględnij ich widoczny zasięg w przeglądzie. Pomiar samej geometrii może różnić się od namalowanego wyniku. Poradnik prostokąta ograniczającego SVG wyjaśnia tę różnicę; tutaj celowo używamy prostej wypełnionej geometrii.

Przenieś regułę w SVG z marginesem

SVG viewBox mapuje wewnętrzny prostokąt współrzędnych na wyświetlany viewport. Tutaj viewBox="-10 -10 170 60" obejmuje obliczony margines bez przesuwania lub powiększania grafiki.

Zapisz kompletny przykład jako logo-padded.svg. Litery logotypu są narysowanymi kształtami, więc nie zależą od czcionki. Projekt koła i liter jest autorską grafiką przykładową, a nie zatwierdzonym zasobem innej marki.

<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>

Aby utworzyć ciasny plik towarzyszący, użyj width="150", height="40" i viewBox="0 0 150 40", zachowując koło i ścieżki. Nazwij pliki tak, aby odbiorca rozróżniał wariant z marginesem. Prowadnice pomiarowe trzymaj w dokumentacji marki lub oddzielnej warstwie przeglądu, a nie w umieszczanej grafice.

Zmień rozmiar zasobu bez zmniejszania zamierzonego logo

Ustal, czy szerokość dotyczy widocznej grafiki, czy całego pliku z marginesem. Przy szerokości pliku 170 px grafika ma 150 px, a margines 10 px. Przy 340 px grafika ma 300 px, a margines 20 px. Proporcjonalna zasada przetrwa równomierne skalowanie.

Jeśli zlecenie wymaga widocznego logo 300 px, ustaw ten plik z marginesem na 340 px szerokości. Ustawienie całego pliku na 300 px da tylko około 264.7 px grafiki, bo 300 × 150 / 170 to około 264.7.

Uwaga o metodzie: wyrenderowaliśmy pełne SVG ciasne i z marginesem w Chromium. Granice geometryczne grafiki miały 150 na 40 jednostek. Przy szerokościach z marginesem 170 px i 340 px zmierzone poziome szerokości grafiki wyniosły 150 px i 300 px, a marginesy 10 px i 20 px. Weryfikuje to autorski przykład przeglądarkowy, a nie import każdego edytora.

Gdy logo wygląda za małe, sprawdź obszar roboczy pliku przed powiększaniem przypadkowych obiektów. Gdy przestrzeń znika po imporcie, sprawdź zaimportowane granice i przywróć margines według pisemnej reguły X. Dla szerokiego logo w innej ramce użyj dopasowania proporcji SVG, aby zrozumieć dodatkowe puste miejsce wynikające z umieszczenia.

Gdzie PerfectVector pomaga w przekazywaniu logo

PerfectVector odzyskuje kształty wektorowe, gdy marka ma tylko rastrową kopię logo. Po odzyskaniu porównaj cały znak z zatwierdzonym wzorcem, usuń niezamierzone fragmenty tła i osobno zastosuj udokumentowane pole ochronne. Proces wektoryzacji logo dotyczy odzyskiwania kształtów.

Najpierw poproś o oryginalny wektorowy plik główny i wytyczne marki. Lepiej zachowują zamierzoną grafikę i decyzje o odstępach niż nowe trasowanie. Pusta ramka JPG może być przypadkowym marginesem eksportu; nie dowodzi polityki marki. Poradnik formatów logo pomaga wybrać pliki do przekazania, a poradnik wektoryzacji logo opisuje przygotowanie i kontrolę źródła.

Zakończ kontrolą pełnej grafiki, pisemnej definicji X, wymiarów pliku z marginesem i rzeczywistego otaczającego układu. Zachowaj ciasny plik główny i zamierzony zasób do umieszczania. Dalsze kontrole przekazania znajdziesz w bibliotece procesów bloga.

FAQ

Czy pole ochronne logo zawsze wynosi jedną czwartą wysokości?

Nie. Jedna czwarta wysokości koła to reguła wybrana dla tego autorskiego przykładu. Istniejące marki mogą definiować inne jednostki, proporcje i wyjątki zastosowań.

Czy dodać biały prostokąt, aby zachować pole ochronne?

Możesz zarezerwować pustą przestrzeń za pomocą SVG viewBox bez dodawania malowanego prostokąta. Biały prostokąt zmienia grafikę na kolorowym tle. Przetestuj przezroczysty plik z marginesem w docelowym położeniu.

Czy SVG z marginesem automatycznie wymusza wytyczne marki?

Nie. Przenosi pustą przestrzeń wewnątrz viewportu, ale importer może przyciąć granice, a obiekty układu mogą ją nachodzić. Pisemna reguła i końcowa kontrola położenia nadal są konieczne.

Źródła

1. University at Buffalo — pole ochronne — oficjalny przykład jednostki opartej na znaku i wyjątków zależnych od zastosowania.
2. Vevo — pole ochronne logo — pokazuje zmianę wskazówek wraz z rozmiarem znaku i kontekstem cyfrowym.
3. MDN — SVG viewBox — wyjaśnia prostokąt współrzędnych przenoszący pusty margines przykładu.

Jeśli brakuje oryginalnego wektora, odzyskaj rastrowe logo za pomocą PerfectVector. Sprawdź pełne zestawienie względem wzorca, zastosuj zatwierdzone pole ochronne i sprawdź widoczny rozmiar logo w końcowym położeniu.