Как создавалась фавиконка для «Автодетей» (часть 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. А правый сделаем чётче «руками», добавляя оранжевые или белые пиксели с разной прозрачностью:

Искусственное и естественное поднятие резкостиИскусственное и естественное поднятие резкости

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

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

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

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

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

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

Следующая заметка

© 2011