Логотип онлайн: знак, напис, іконки

Бо саме там логотип і відмовляє. На екрані його збирають великим, а працює він маленьким: 16 пікселів у вкладці браузера, іконка на телефоні, кружечок аватара, відбиток на коробці. Знак із тонкими лініями та підписом із п’яти слів у цих розмірах перетворюється на сіру пляму, і дізнатися про це краще зараз, ніж після друку накладу. У тому ж ряду стоять версія в одну фарбу й симуляція дальтонізму: контраст буває пристойним, а червоне на зеленому для кожного дванадцятого чоловіка все одно зливається.

Так, і це головна відповідь на «у мене вже є знак». Файл SVG розбирається на контури й стає знаком нарівні з нашими: якщо він одноколірний, то перефарбовується разом із логотипом, а різнокольоровий зберігає свої кольори. Звичайну картинку — PNG, JPG, WebP, скан від руки — конструктор обводить по контуру й перетворює на вектор: далі вона масштабується без втрат, фарбується в колір палітри й потрапляє у SVG кривими, а не точками. Докладність обведення налаштовується повзунком, а якщо на картинці світлий малюнок на темному тлі, допомагає кнопка «Інвертувати». Коли обвести не вдається — наприклад, це фотографія, — її вставлено як є, і про це прямо сказано під переглядом: інакше обіцянка «справжній вектор» була б неправдою.

Тим, що він справді векторний і самодостатній. Часта підміна — картинка PNG, загорнута у SVG-файл: він відкривається, але при збільшенні розпливається. Друга — напис тегом text: на вашому комп’ютері він виглядає правильно, а в друкарні чи в дизайнера підставляється системний шрифт, і логотип мовчки змінює накреслення. Тут літери переведено в криві, тому файл ні від чого не залежить і правиться в будь-якому векторному редакторі. Варто знати й те, що в багатьох відомих конструкторах вектора немає взагалі: Adobe Express не вивантажує SVG на жодному тарифі, а Squarespace і конструктор Shopify віддають лише PNG.

Це чотири різні способи відмовити, і кожен ловиться своїм числом. «Контраст» — відношення яскравостей знака й тла за формулою WCAG: що більше, то впевненіше видно логотип; нижче трьох підпис загоряється попередженням, бо світло-сірий знак на білому гарно виглядає в макеті й зникає на візитівці. «Дальтонізм» — той самий контраст, порахований після симуляції найчастішого порушення кольоросприйняття: червоне на зеленому може дати пристойне перше число й злитися в другому. «На темному» міряє знак проти темного інтерфейсу — саме там зникає майже чорний напис. «У 16 px» попереджає, що підпис у цьому розмірі не читатиметься: його місце на великій версії, а не у фавіконі.

Favicon 16, 32 і 48 пікселів для вкладки браузера, зібраний із них favicon.ico для старих браузерів і ярликів Windows, apple-touch-icon 180 для екрана iPhone, іконки 192 і 512 для маніфесту, маскована іконка 512 із запасом по краях (її система сама обрізає під форму значка на Android), favicon.svg, готовий site.webmanifest і файл head.html із рядками підключення. Файли кладуть у корінь сайту, а рядки з head.html вставляють у розділ head сторінки. Прозорість в apple-touch-icon і в маскованої іконки навмисно прибрано: iOS кладе прозорий значок на чорне, і кути виходять чорними.

Знаки намальовано для цього інструмента, а не взято з загальнодоступного іконкового набору. Різниця не лише в схожості. У конструкторі Squarespace значки беруться з чужої бібліотеки, і в його власній довідці написано, що перед публікацією логотипа треба прочитати ліцензію конкретної іконки; частина вбудованих елементів Adobe Express іде за ліцензією, яка прямо забороняє вивантажувати їх окремим файлом, — а логотип це якраз окремий файл. З нашими знаками такого абзацу немає. Форми тут навмисно прості й геометричні: такі читаються в 16 пікселях, чого не вміє жодна докладна іконка. Якщо свого знака хочеться сильніше — завантажте малюнок або візьміть монограму з ініціалів.

Так. Якщо у вибраному декоративному шрифті потрібних літер немає — наприклад, у Bebas Neue немає ні кирилиці, ні хангилю, — напис набирається шрифтом, який їх містить, і під переглядом прямо сказано, яким саме. Мовчки підставити інший шрифт було б гірше: ви побачили б не свій логотип і не дізналися б про це. Арабське письмо збирається з правильним напрямком і з’єднанням літер.