17. Оптимизация логотипа
Вы всегда должны следить за деталями. Лишние точки убирать, лишние элементы удалять, очищать логотип, сдувать с него пылинки. Именно так можно дойти до финальной версии логотипа. Как это сделать — читайте дальше.
17.1. Попадание в пиксели
Никогда не стоит забывать, что хоть вы работаете с векторной графикой, но отображаться она будет на мониторе, который выводит изображение попиксельно. В предыдущих разделах была отмечена важность этого момента, но в этом разделе будет детальный разбор реального примера.
Пример оптимизации будет рассматривать на таком простом логотипе. Здесь довольно простая геометрия и, казалось бы, проблем никаких возникать не должно.
Но стоит включить "Просмотр в виде пикселов" и тут же видно, что не все так хорошо.
В этом режиме мы видим, что края логотипа немного не четкие, смазанные. Почему так получилось? Дело в том, что просто точки не попали в пиксельную сетку и из-за этого получается такой эффект.
Если приблизить ещё больше, то мы теперь четко можем увидеть ошибку. Точка не попала в пиксельную сетку. Нужно будет исправить эту ситуацию для каждой такой точки, чтобы избежать эффекта размытия краев. Для этого нужно включить привязку к пикселям: Просмотр > Привязать к пикселу.
После того, как все точки были выставлены по пиксельной сетке проблема с размытыми краями логотипа пропала. Размытые пиксели остались только на диагоналях, но это нормальная ситуация.
Совет. Всегда проверяйте, попадают ли точки фигур в пиксельную сетку.
Геометрия самого логотипа изменилась на минимум, но теперь после экспорта мы не получим смазанные края в логотипе. Проверяйте каждый логотип перед экспортом на наличие в нем точек, которые размещены не по пиксельной сетке и исправляйте это.
17.1.1. Целочисленные значения
В SVG целочисленные значения — это хорошо, а дробные — это плохо. Старайтесь всегда делать так, чтобы точки были по пиксельной сетке — это убережет вас от размытых краев. Аналогичная ситуация и с размерами монтажной области перед экспортом.
Если ваша монтажная область имеет в ширине или высоте дробные значения — постарайтесь привести их к целочисленным.
Также если присмотреться, то мы видим размеры монтажной области 243,72x233,41 пикселя. Врятли нужно будет где-то использовать логотип такого размера. Если нужен логотип для favicon — делайте изначально монтажную область 16x16 пикселей, если нужен логотип для сайта — делайте в зависимости от требований веб-дизайнера.
17.2. Нахлыст и острые углы
Острые и длинные углы использовать в дизайне логотипов крайне опасно из-за того, что могут возникнуть проблемы при отображении. Это как тонкие линии — в маленьком размере будут почти не видны.
Нахлыст — это ситуация, когда в остром угле контура пересекаются дважды. Это нужно исправлять, потому что на выходе можно будет получить не ожидаемый результат.
Советую никогда не использовать столь острые и длинные углы, потому что это сможет вызвать кучу проблем в будущем. Например, при печати такие тонкие и острые углы будут передаваться не так идеально, при вырезке плоттером или другим станком тоже смогут возникнуть проблемы.
Совет. Старайтесь избегать острых и длинных углов, а также следите, чтобы нигде не было нахлыста.
17.3. Чистота и объем кода
Векторная графика прекрасна тем, что мы можем заглянуть в код, посмотреть что там и по надобности внести свои изменения. Именно по коду результирующего SVG можно отличить новичка от профессионала.
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.72 233.41"><defs><style>.cls-1{fill:#e30613;}</style></defs><title>logos and marks</title><polygon class="cls-1" points="169.78 0.24 96.53 116.45 96.53 39.54 0 39.54 64 168.07 64 168.07 96.53 233.41 243.72 0 169.78 0.24"/></svg>
Вот код SVG первой версии логотипа, до оптимизации. Что мы здесь видим? Здесь мы видим кучу дробных значений — 169.78, 0.24, 96.53 и это плохо. Именно из-за этих дробных значений у нас могут быть проблемы с логотипом: он может быть размытым, особенно в маленьком размере.
Теперь посмотрим на вторую версию логотипа, который мы оптимизировали.
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 233"><defs><style>.cls-1{fill:#e30613;}</style></defs><title>logos and marks</title><polygon class="cls-1" points="170 0 97 116 97 40 0 40 97 233 244 0 170 0"/></svg>
Здесь же мы видим чистоту и порядок в плане значений координат точек. Данный код даже меньше по размеру и это хорошо, так и должно быть.
17.3.1. Оптимизация объема кода
Если для оптимизации растровой графики мы можем сохранить её в формате JPEG и понизить качество до 8 или 9 из 10, или же уменьшить размер картинки в онлайн-сервисе для сжатия изображений, то с SVG дела обстоят немного не так.
Чтобы оптимизировать SVG нужно просто немного почистить код. Это можно сделать вручную, с помощью онлайн-сервисов или даже настольных программ.
17.3.1.1. Оптимизация вручную
Данный способ оптимизации может выявится самым эффективным, если вы разбираетесь в коде и нужно оптимизировать не большой SVG файл. Если же нужно оптимизировать большой SVG файл, лучше воспользоваться онлайн-сервисом или программой.
Код до оптимизации (254 символа; 262 байта):
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 233"><defs><style>.cls-1{fill:#e30613;}</style></defs><title>logos and marks</title><polygon class="cls-1" points="170 0 97 116 97 40 0 40 97 233 244 0 170 0"/></svg>
Код после оптимизации (130 символов; 130 байт):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 233"><polygon points="170 0 97 116 97 40 0 40 97 233 244 0 170 0"/></svg>
Я осознанно убрал красный цвет для того, чтобы показать чудеса оптимизации SVG. Остается только научиться экспортировать SVG с нужным размером монтажной области, чтобы не было таких страшных значений в viewBox:
Чтобы научиться вручную оптимизировать SVG нужно иметь немного опыта в HTML и XML.
17.3.1.2. Оптимизация с помощью онлайн-сервиса
Если же у вас нет уверенных знаний в HTML и XML, то вы всегда сможете оптимизировать ваш SVG с помощью онлайн сервисов.
Код после оптимизации в онлайн-сервисе (150 символов; 154 байта):
<svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 233"><path fill="#e30613" d="M170 0L97 116V40H0l97 193L244 0h-74z"/></svg>
Оптимизация есть по сравнению с вариантом, который оптимизирован не был, но не идеально.
17.3.1.3. Оптимизация с помощью программы
Есть ещё один вариант оптимизации SVG, который мы рассмотрим — оптимизация с помощью программы (Download and use).
Код после оптимизации с помощью программы (215 символов; 215 байт):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 233"><defs><style>.cls-1{fill:#e30613;}</style></defs><title>logos and marks</title><path class="cls-1" d="M170 0l-73 116v-76h-97l97 193 147-233h-74z"/></svg>
Данный способ тоже не идеальный, но имеет место быть.
17.4. Упрощение контура
Всегда нужно стремиться к минимизации точек в вашем логотипе. Лишние точки могут только приводить к проблемам и увеличению веса SVG. Разберем простой пример логотипа, который был создан с помощью сеток. Из-за принципа его создания на форме остались лишние точки и их нужно убрать.
17.4.1. Прямой контур
Всего есть два способа упрощения контура — вручную или автоматически. Вручную упрощаем контур с помощью инструмента "Перо-". Можете смело удалять точки, которые лежат на одной линии.
Также есть способ автоматического упрощения контура. Для этого нужно кликнуть правой кнопкой мышки и выбрать "Упростить...". Там даже есть настройки уровня упрощения.
17.4.2. Круглые формы
Если же нужно упростить логотип, где есть много точек и они лежат на круглой форме, которая близится к кругу или овалу, то здесь нужно быть осторожнее.
Для начала вам нужно знать, что 4 точек достаточно для того, чтобы создать идеальный круг, который будет идеально рендерится в браузерах и приложениях. В любом графическом редакторе при создании круга вы получите 4 точки в фигуре. Но что если точек будет 2?
При оптимизации округлых форм, которые стремятся к кругу или квадрату нам нужно помнить, что можно удалять лишние точки, но оставлять те 4, которые нужны для построение круглой кривой.
Посмотрите короткий видеоурок по работе с упрощением контура круглых форм и тогда вы сможете ещё лучше минимизировать количество точек в вашем логотипе. В видеоуроке будет пример на букве, потому что там много лишних точек, но это сути работы не меняет, главное — принцип работы. Кстати, не забывайте зажимать Shift при использовании инструмента Перо-.
В итоге можно сократить количество точек с 25 до 10 и при этом разница в форме или минимальна, или на столько не значительна, что в меньшем размере глазом будет не различима.
Совет. Не допускайте, чтобы в вашем логотипе было много ненужных точек.
17.5. Проверка наложения
Важно помнить о том, что не только точки и линии нужно чистить. В логотипе иногда бывают лишние фигуры, которые просто находятся под другими фигурами. Удаляйте их. Тогда после экспорта SVG-файл будет легче и вообще оставлять мусор в логотипе — это дурной тон.
Например, на сайте одного их агентств я увидел, что этот совет не был учтен перед тем, как добавлять логотип в один из разделов сайта.
17.6. Проверка на контрастность
Если вы не уверены в контрастности вашего логотипа, то проверьте это в онлайн тесте на контраст. Обычно данную проверку делают для сайтов, где проверяют контраст текста и фона, но ничего вам не мешает похожим образом выбрать цвета логотипа и проверить.
Ссылки на другие тесты на контраст: ссылка 1, ссылка 2, ссылка 3.
Но вы должны помнить, что требования WCAG не всегда оптимальны. Руководство по обеспечению доступности веб-контента (WCAG) используется в качестве стандарта для определения доступного цветового контраста. Однако эти рекомендации не всегда соответствуют практическому применению. Вместо того, чтобы следовать им как догме, вы должны использовать эти рекомендации, чтобы направлять свои дизайн-решения, а не диктовать их.
Один из случаев, когда стандарты WCAG неприменимы, это контраст яркости белого текста. Обе кнопки на изображении ниже имеют синий фон, но одна кнопка имеет белый текст, а другая – черный. Когда вы спросите пользователей, какая кнопка легче читается, большинство скажет, что кнопка с белым текстом более читабельна. Но коэффициенты контрастности цвета говорят о другом.
Коэффициент контрастности для черного текста составляет 5,41, что соответствует требованию WCAG. Тем не менее, коэффициент контрастности для белого текста составляет 2,94, что не соответствует требованиям. В соответствии с требованиями к контрасту, кнопка с белым текстом должна быть менее читабельной, но она оказывается более читабельной.
Эта неточность контраста, кажется, происходит с белым текстом на синем и оранжевом фоне. Коэффициенты контрастности WCAG не всегда учитывают высокую контрастность белого текста. Белый – это чистая яркость без оттенка или насыщенности, которая является самой сильной формой контраста.
17.7. Проверка на фоне
Это может вам и не понадобится, но попробуйте проверить ваш логотип на разных фонах — как минимум на чёрном и белом. Особенно это касается ярких логотипов в цвете. Если цвет вашего логотипа довольно гибкий, то он будет не только хорошо контрастировать на белом и черном фоне, но и будет иметь возможности пошире. Например, как логотип Apple.
Также важно учитывать простоту вашего логотипа, потому что чем проще логотип — тем больше вариаций его использования.
17.8. Допечатная подготовка и CMYK
Если ваш логотип будет печататься, то всегда нужно придерживаться правил подготовки к печати вашего логотипа, чтобы после печати вы получили именно то, что видели на экране.
17.8.1. Чистый цвет
Чем меньше красок будет использоваться для печати того или иного цвета — тем чище он будет. Посмотреть процент красок, который будет использован для печати цвета можно в палитре цветов.
Максимальная яркость и насыщенность красок добивается при стопроцентной плотности какой-либо из красок. Если хотите получить чистый желтый цвет, то введите 100 в панели плотности желтой краски.
Чем больше красок будет использоваться для печати вашего цвета, тем грязнее этот цвет будет. Этого нужно всегда избегать.
Совет. Не используйте больше 2-3 красок для вашего цвета в CMYK. Идеально использовать 2 краски. Крайняя мера — использовать 3 краски. Если нужно затемнить — увеличивайте K.
17.8.2. Другие советы
Другие советы при подготовке вашего макета для печати:
- Работаем только в CMYK.
- Шрифты нужно перевести в кривые.
- Не забываем о вылетах для обреза.
- Разрешение при экспорте — 300 ppi, но не всегда.
- Процент цвета — не меньше 5%.
- Все эффекты растрированы с расширением 300 ppi.
- Для растровых изображений нужно работать с яркостью, насыщенностью и резкостью.
- Цветовой профиль — FOGRA39.
Если у вас в логотипе используются цвета, где процент цвета от 3% до 5%, то нет гарантий, что цвет будет напечатан. Этот момент лучше уточнять уже в типографии, с которой вы будете работать. Желательно делать цвета в наименьшее количество красок. Чем меньше красок будет в цвете — тем чище он будет. Обратите на это внимание.
17.9. Итоги по разделу
Запомните, действительно качественная работа требует больших усилий и тщательной проверки. Никогда не спешите быстрее сдать логотип и закончить работу. Проверяйте все, что делаете. Пусть ваш контур будет идеальным, все точки будут попадать в пиксельную сетку, цвета будут яркими и чистыми.
Не поленитесь проверить работу два или даже три раза, вдруг где-то закралась маленькая ошибка, которая сможет потом вылезть и принести кучу проблем.