Как создавалась фавиконка для «Автодетей» (часть 1)

Как рисовать фавиконку? Покажу на реальном примере.

Старая фавиконка

На старой фавиконке, прослужившей верой и правдой несколько лет, красовались дети:

(девочка постарше и мальчик помладше). Иконка на момент создания соответствовала тематике сайта.

Старая фавиконка была получена простым уменьшением знака «Осторожно, дети!» до размера 16×16 пикселей и раскрашиванием в фирменные цвета: серый и оранжевый.

Разберём по шагам, что происходит на картинке, а заодно повторим горячие клавиши фотошопа:

1) обводим нужный фрагмент знака, копируем и вставляем в новый документ (Ctrl+C → Ctrl+N → Enter → Ctrl+V);
2) обесцвечиваем (Shift+Ctrl+U);
3) регулируем уровни (Ctrl+L), чтобы нужный силуэт был чисто чёрным, а фон — белым (в настройке уровней надо подвигать чёрный и белый ползунки, сузив общую полосу пропускания);

Кстати, в новом фотошопе при помощи настройки Black&White можно получить тот же результат одним движением.

4) обводим мальчика (с зажатым Alt это делать эффективнее);
5) создаём новый слой поверх и заливаем его оранжевым цветом (Alt+Del);
6) задаём этому слою свойство наложения «Screen»;
7) с девочкой поступаем аналогично, только слой заливаем серым цветом;
8) склеиваем все слои (Layer / Flatten Image) и выделяем детей квадратным контуром так, чтобы вокруг детей ещё оставалась белая граница (чтобы сохранить пропорции квадрата, удерживайте клавишу Shift);
9) копируем, вставляем в новый документ, склеиваем слой с бэкграундом и изменяем размер до 16 на 16 пикселей.

Новая фавиконка

Посмотрим, что у нас имеется из символов?

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

Медведь

 — это упрощённая версия , без градиентов, бликов и без кресла.

Посмотрим, что с ними будет при уменьшении до размеров фавиконки:

Как видно, медведь в кресле

сразу отпадает: слишком много деталей, которые при уменьшении превращаются в «кашу». Остаются медведь на плашке и более крупный медведь на прозрачном фоне .

Пробуем получившиеся фавиконки в деле: на вкладках браузера, в выдаче Яндекса и так далее...

Медведь без плашки

в Яндексе смотрится, возможно, интереснее. Однако:

1) Медведь НА плашке

 — это часть логотипа, зарегистрированный товарный знак. Без веских оснований «против» — лучше использовать его.

2) Фавиконки живут на вкладках браузеров, в избранном и так далее (у них может быть любой фон, вплоть до чёрного или цветного). Сравним, как будут смотреться медведь на плашке и прозрачная фавиконка:

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

Почему лучше отрисовать заново?

Вот эта фавиконка —

— смотрится уже неплохо, но всё-таки не идеально. Фавиконка — это лицо сайта, она одна, и вполне можно потратить минут 20 на её рисование (тем, кто это умеет делать). Дополнительный приток посетителей, которым просто понравился ваш значок в выдаче Яндекса, никогда не помешает 😃

Мы уже поняли, что при уменьшении иконки её детали размываются и пропадают. Давайте посмотрим наглядно:

Зелёным помечено то, что нельзя изобразить в размере 16×16 пикселей. От этих деталей надо отказаться или попробовать их перерисовать под мелкий размер (в данном случае, например, можно оставить медведю только глаза).

Добавлю ещё один важный довод в пользу того, что фавиконку нужно именно рисовать с нуля. Сравним кружок, полученный ресайзом (уменьшением), и заново отрисованный кружок в мелком размере:

Левый кружок более смазанный. Но это не единственная проблема. В палитре левого изображения присутствуют дополнительные цвета (тёмно-оранжевая каёмка по внешней границе кружка). Это лишняя информация и лишние байты в весе фавиконки. Конечно, лишние 50-100 байт — это смешно по нынешним меркам. Но это, тем не менее, хороший показатель качества отрисовки фавиконки.

А теперь попробуем левый кружок сделать резче, контрастнее, чётче, т.е. применим фильтр Sharpen. А правый сделаем чётче «руками», добавляя оранжевые или белые пиксели с разной прозрачностью:

Итог:
те же самые огрехи — размытость, грязь, лишние оттенки — стали ещё заметнее.

«Точка, точка, огуречик, вот и вышел человечек»

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

Продолжение будет...

Смотрите также

Фавиконки (favicon)Логотип «Автодетей»Векторизация иконокЛендинг для привлечения сотрудниковОтдел продаж по принципу конвеера

• ▸ Как создавалась фавиконка для «Автодетей» (часть 2)

Комментарии

Дальнейшие комментарии закрыты. По всем вопросам пишите или звоните мне лично, см. раздел Контакты