July 27, 2020

14. Дополнительная информация


Чем больше вы будете знать о различных нюансах создания логотипа, тем меньше шансов у вас будет чтобы допустить какую-то ошибку. Понимание особенностей таких тем как пикселизация, акценты, оптические компенсации и иллюзии поднимет ваше мастерство на новый уровень.


14.1. Пикселизация

Хотя логотипы и создают в формате SVG, который может без потери качества масштабироваться до любых размеров, но мы всё ещё ограничены пикселями экранов наших устройств. Будь то смартфоны, планшеты или компьютеры — все они имеют своё разрешение экрана и плотность пикселей. Именно поэтому не стоит забывать о том, что вы, как дизайнер логотипов, должны предусмотреть как будет выглядеть ваш логотип на различных устройствах и в различных размерах.

Если пропустить этап работы с пикселями при создании логотипа, то на выходе он может быть смазанным, размытым просто из-за того, что точки не четко попадают в пиксели.


14.1.1. Места размещения логотипа

Перед сдачей логотипа клиенту вы должны точно знать, где будет использоваться логотип и точно знать размеры, чтобы должным образом проверить его читабельность. Например, самый меньший размер логотипа обычно бывает при использовании его в качестве favicon16x16 пикселей. На сайте зачастую логотип используется уже в большем размере, поэтому там проблем возникнуть не должно. Также в других местах использования логотипа на ПК он будет большего размера (иконки приложений, сайтов в меню Пуск и т.д.).

Что касается смартфонов, то самый маленький размер логотипа там 30x30 пикселей — favicon сайта в Safari, 32x32 пикселя — favicon сайта в Google Chrome. Другие минимальные размеры продиктованы приложениями, такими как Facebook и Instagram (потому что там зачастую используют логотип в качестве аватара пользователя) и составляют 30x30 пикселей.

Получается что самая опасная ситуация размещения логотипа в маленьком размере — это размещение в favicon в браузере для ПК. Для смартфонов и размеры больше, и плотность пикселей там выше.

Пример: логотип Fiverr в качестве иконки сайта очень слабо различим. Спасает только фирменный зеленый цвет.

Логотип Messenger даже в маленьком размере можно легко узнать.

Теперь вернитесь в раздел с правилами создания логотипов и вы поймете, почему так важно делать логотип без тонких линий. Тонкие линии в маленьком размере будут непонятными и нечитабельными. Никто не сможет разобрать, что же это за логотип.

Следующий вариант — иконка приложения, будь то приложение для ПК или смартфона. Вы должны знать для каких целей делаете логотип и если предполагается, что нужно будет делать приложение, где будет ваш логотип, то нужно учесть все нюансы.

Логотипы на иконках приложений в меню Пуск. Какие из них легко и быстро считываются, какие легко вы узнали, а какие непотяные?

Иконки приложений с логотипами. Какие из них более простые, понятные и легче считываются?

Перед тем, как делать логотип или адаптировать его для использования в иконке приложения, не забудьте поискать гайдлайны по этому поводу.

Гайдлайны по иконкам от iOS.

Ознакомиться с гайдлайнами вы можете по этим ссылкам: ссылка 1, ссылка 2, ссылка 3. Также есть гайдлайны от Google Material Design: ссылка.

Совет. Предусмотрите использование логотипа в различных размерах.

Выше были рассмотрены только самые маленькие форматы, где возможно будет размещаться ваш логотип, но именно эти форматы зачастую самые проблемные из-за своего размера. Остальные места, где возможно будет размещаться ваш логотип уже больше по размеру и особых проблем с ними быть не должно.


14.2. Акцент

Акцент может быть на цвет или на форму. Кроме самого пятна логотипа при его рассмотрении именно акценты вызывают интерес у людей. Чем интереснее будет акцент, тем с большим интересом его будут рассматривать.

Акцент на цвете и на форме.

Акцент на цвете, который показывает скрытый смысл логотипа.

Акцент на форме с помощью негативного пространства. Видите букву С?


14.3. Оптические компенсации

Очень часто дизайнеры логотипов полагаются исключительно на алгоритмы программы. Особенно остро эта проблема стоит, когда дело касается выравнивания блоков, работы с текстом и цветом.

Существуют так называемые «оптические компенсации», которые помогают нам благоприятно воспринимать информацию, если её масса даёт сбой. Проверить правильность компенсации всегда можно простым способом — прищурьте глаза и расфокусируйтесь, если у вас не возникает визуального дискомфорта, то все сделано правильно.


14.3.1. Компенсация выравниванием

Очень часто у объектов появляется смещение визуальной массы. Если у круга или квадрата центр массы находится точно по середине, то с треугольником могут возникать проблемы.

Слева треугольник выровнен по центру, справа — компенсирован выравниванием (немного сдвинут вправо).

Более наглядная инструкция на GIF изображении ниже:

Наглядная компенсация выравниваем треугольника.

Размещение треугольника внутри изогнутой или прямой формы может привести к тому, что элемент окажется оптически неуместным. Это связано с иллюзией деления треугольника. Центр тяжести треугольника рассчитывается на основе его минимальной граничной рамки. Поэтому, если бы вы поставили точку ровно посередине высоты равностороннего треугольника, оптически она бы казалась намного выше, чем на посередине.


14.3.2. Компенсация масштабом

В первом варианте ширина и высота квадрата и круга равны, но при этом они не выглядят равными. Округленные и острые углы имеют меньшую визуальную массу, чем тупые углы.

В варианте слева круг и квадрат одинакового размера и круг кажется меньшим за квадрат. В варианте справа круг больше по размеру и визуальный вес кажется более скомпенсированным.

Примеры логотипов, где учтена компенсация масштабом.

Довольно показательные примеры компенсации масштабом, которые учтены в символьных и текстовых логотипах. Также советую присмотреться ко всем круглым буквам в одном из шрифтов на выбор. Вы увидите, что там тоже учтена компенсация масштабом.


14.3.3. Компенсация цветом

Оптическая компенсация в цветах менее заметна. Но и в этом случае все дело в оптическом весе объекта. Если использовать один и тот же оттенок цвета как для символа, так и для текста, то текст будет смотреться немного тусклее.

Слева для символа и текста использован один цвет: #3F51B5, а справа для символа использованы два цвета, где цвет текста немного темнее.


14.3.4. Компенсация контрастом

Желательно чтобы в цвете объекта было смешивание с цветом фона или с цветом соседнего объекта. Не всегда нужно использовать чистый черный или белый цвета, чтобы не получить «грубый» контраст.

Вариант справа скомпенсирован цветом.


14.4. Оптические иллюзии

При создании логотипа желательно знать об оптических иллюзиях, чтобы по возможности использовать их в свою пользу, а не наоборот. Больше об иллюзиях вы сможете почитать в Википедии, а в этом разделе будет несколько иллюзий, которые касаются непосредственно дизайна логотипов.


14.4.1. Полосы Маха

Если вы будете создавать цветной логотип, где будут идти подряд оттенки одного цвета, то будьте готовы к тому, что присмотревшись, вы сможете увидеть ложную тень, которой на самом деле нет. Эта иллюзия известна как «полосы Маха». Никаких теней нет, но наши глаза их видят.

Кажется, что здесь есть ложные тени, но на самом деле здесь только оттенки зеленого.

Этот эффект связан с латеральным ограничением. То есть, более темная область ложно выглядит еще темнее, а более светлая — еще светлее.


14.4.2. Иллюзия Ястрова

Работая над логотипом, мы часто делим геометрические фигуры. Эта иллюзия возникает при работе с изогнутыми объектами. Два элемента выглядят разными по размеру, но если присмотреться, они на самом деле одинакового размера.

Иллюзия Ястрова.

Пока что нет определенного объяснения, почему мы воспринимаем сегменты так, будто они разного размера. Наш мозг введен в заблуждение разницей в размерах между меньшим и большим радиусом. Короткая сторона делает длинную сторону длинней, а длинная сторона короткую — еще короче.


14.5. Выворотка

Логотип может применяться на разных фонах. Для этого логотип делают в разных цветах, чтобы он был пригоден для размещения на белом и темном фоне. И так как зачастую цвет логотипа будет меняться в зависимости от фона, необходима выворотка.

Светлое на темном всегда смотрится больше и жирнее, чем темное на светлом.

Логотип в цветной и одноцветной версии.

Работа над вывороткой для лучшего восприятия формы.

Иногда бывает так, что нужно поработать с логотипом, немного изменить форму, чтобы нейтрализовать воздействие светлого цвета. Всегда проверяйте ваш логотип на светлом и темном фоне.


14.6. Экспорт

Важно учитывать и то, что не все знают о векторной графике и кто-то сможет сохранить ваш логотип в растровом формате и использовать где-то у себя. Или же непрофессиональный разработчик сохранит ваш логотип в растре и будет использовать на вашем сайте. Всякое может случиться и вы должны знать об этом.


14.6.1. Разрешение для экспорта

После того, как закончите делать логотип, всегда помните, что использовать его нужно только в векторном формате. Если даже экспортируете в растр, то помните, что 72 ppi — это экранное разрешение, для печати нужно использовать 300 ppi.

Экранное разрешение для экспорта — 72 ppi.

Разрешение экспорта для печати — 300 ppi.


14.6.2. Форматы для экспорта

Adobe Illustrator поддерживает функцию экспорта вашей работы в различные форматы, такие как: .bmp, .swf, .jpg, .psd, .svg, .tif, .targa, .css и т.д., но вам важно помнить, что желательно экспортировать ваш логотип в SVG, EPS, PNG или PDF формате.

  • SVG — векторный формат для экранов.
  • EPS — формат стандарта для экспорта и импорта, поддерживается многими программами.
  • PNG — растровый формат для экранов.
  • PDF — для печати.


14.6.3. Способы экспорта

Есть всего 3 способа экспорта:

  • Файл > Сохранить как...
  • Файл > Экспорт > Экспортировать как...
  • Файл > Экспорт > Сохранить для браузеров...

В чём отличие этих способов экспорта? С помощью Сохранить как... мы можем в большинстве случаев экспортировать в вектор, с помощью Экспортировать как... можно экспортировать в большинство нужных и не нужных форматов, которые только вам понадобятся.

Остаётся только способ экспорта через Сохранить для браузеров... Данный способ экспорта отлично подходит для того, чтобы вы экспортировали ваши работы на какие-нибудь сайты.

Например, изображения с градиентами, которые экспортированы последним способом, сжимались алгоритмами сжатия Instagram меньше, чем такие же изображения, которые были экспортированы через Экспорт > Сохранить как...

Возможные форматы экспорта в окне Сохранить как.

Возможные форматы экспорта в окне Экспорт.

Возможные форматы экспорта в окне Сохранить для Web.

Совет. Если вы хотите поделиться своим творчеством в соцсетях, то экспортируйте вашу работу с помощью окна "Сохранить для Web".


14.7. Тренды

Хоть дизайн логотипов не особо меняется с года в год, но всё-же некоторые дизайнеры и дизайн-cтудии стараются как-то разбавить скучную обстановку новыми выдумками и креативными идеями.

Например, Щука недавно представила новый дизайн логотипа Skyeng:

Старый и новый дизайн логотипа Skyeng.

Довольно непривычно видеть в дизайне логотипа такие эффекты как прозрачность с размытием фона. Такой приём применяется чаще в веб-дизайне и дизайне приложений. В целом, это решение довольно интересное и необычное, оно вызвало огромный резонанс среди людей.

Также популярная сейчас тема — коронавирус, которая неожиданно повлияла на дизайн логотипов. Многие дизайнеры начали фантазировать на эту тему, особенно внимание привлекает дизайн логотипов, которые соблюдают дистанцию.

Логотип Audi, который соблюдает дистанцию.

Даже MasterCard соблюдает дистанцию.

Также не стоит забывать о том, что провокация тоже может вызвать большой интерес. Именно этим приёмом и воспользовались дизайнеры Щуки, когда создавал дизайн логотипа для чемпионата мира по шахматам:

Логотип чемпионата мира по шахматам 2018.

Правда, было это в 2018 году, но я никак не могу забыть это. С помощью такого приёма был вызван огромный и неподдельный интерес к этому событию.

Уже многие годы всё самое графически-интересное происходит в оформлении Чемпионата Мира по Шахматам. Именно благодаря смелым решениям в графическом стиле, за последние 10 лет этот вид спорта стал вновь одним из самых популярных в мире. То, что сделали в дизайн-бюро Щука (https://shuka.design/world-chess-london) для ЧМ 2018 — настоящий эстетский восторг и одновременно провокативная бомба, благодаря которой о шахматах заговорили по всему миру. Именно такими нужно создавать современные бренды. Безусловно, это главный логотип 2017 года. Никакой другой столько и так ярко не обсуждали. Очень интересно, насколько провокативным изначально было задание от заказчика. Думаю, в этом заслуга не только дизайнеров: https://london2018.worldchess.com/. Источник.

Советую вам следить за трендами в дизайне логотипов, ведь если вы всегда будете делать всё по правилам и по законам, то у вас не сможет родиться интересная и провокативная идея.


14.8. Итоги по разделу

При разработке логотипов нужно учитывать все нюансы и использовать их по полной для улучшения дизайна ваших логотипов. Даже оптические компенсации и иллюзии смогут помочь вам разнообразить вашу работу.

Также не стоит забывать о трендах и быть на волне с другими дизайнерами.

< Предыдущий раздел


Оглавление


Следующий раздел >