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

Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп 😃

Вот весь процесс:

Плашка

Градиент

Две лапы готовы

То, на чём сидит мишка

Вот такие руки

Правая лапа

Руки готовы

Голова

Рисуем ремень

Тень и носик

Сочный градиент

Обводка головы

Итоговая версия фавиконки

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

Задача

Нужно заново отрисовать логотип Автодетей —

Мишка на оранжевой плашке

— в размере 16 на 16 пикселей.

Готовим почву

Уменьшаем логотип до этого размера и вставляем в новый документ (размер холста лучше сделать побольше: когда вокруг есть белые поля, удобнее работать):

Логотип в размере фавиконки

Для начала нарисуем плашку со скруглёнными углами. Чтобы границы плашки попали в пиксели и не размазалась, лучше установить галочку «Snap to Pixels». Я попробовал сделать радиус скругления 1, а потом 2 пикселя. Второй результат лучше, так как скругления стали видны:

Радиус 2px окей, и увеличивать его не надо

Теперь скопируем стиль плашки из файла с логотипом на маленькую плашку. Это делается в меню слоёв: Copy or Paste Layer Style. Сильно увеличим документ лупой, чтобы было легче работать дальше:

Иконка в масштабе 1200%

Круто, если бы на экране мы видели сразу два размера иконки: большую и маленькую (16×16). Откройте Window/Navigator и увидите следующее:

Окошечко Navigator

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

Теперь иконка в окошечке не ресайзится

Начинаем рисовать

1) Например, вот так можно изобразить лапы:

Рисуем медведю лапы

Выделяем овал, ориентируясь по медведю-образцу, создаём новый слой, заливаем его белым цветом (Alt Del), потом выделяем кружочком стопу, стираем (Del) и ещё раз стираем.

2) Рисуем то, что между лап:

Рисуем то, на чём сидит наш мишка

Заливаем прямоугольник в новом слое, и при помощи овального выделения стираем часть слоя ластиком (прозрачность ластика 50%).

3) Начинаем рисовать «руки»:

Руки воздеты к небу

Рисуем овал в новом слое, потом для удобства меняем прозрачность слоя (чтобы увидеть слой-образец с медведем) и стираем внутреннюю часть.

4) Доделываем правую лапу:

Правая лапа вырисовывается

На исходнике медведя инструментом «Лассо» при зажатой кнопке Alt выделяем всё вокруг правой лапы. Переходим на наше «коромысло» и стираем ненужный кусок. А также стираем еле видные пиксели (комбинацией прямоугольных выделений).

5) Заканчиваем верхние лапы:

Верхние лапы готовы

Стираем правую половину слоя с лапами. Выбираем левую половину. Нажимаем Ctrl Alt ВПРАВО (получили копию выделенного куска в том же слое). Переворачиваем то, что выделено (Edit/Transform/Flip Horizontal). А потом стрелочками возвращаем левую лапу на нужное место.

Думаю, что теперь принципы очень хорошо понятны, поэтому дальнейшую часть опишу короче.

Голова и ремень

6) Голова — два уха:

Рисуем карандашом или выделением ластиком

Вариант с глазами фееричен: 😃

7) Пробуем нарисовать ремень:

Карандашом не получается, копирую с оригинала при помощи овалов

8) Добавляем тень и «наводим порядок»:

Рисуем тень пиксельным карандашом с разной прозрачностью

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

Финальная доводка

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

Убираем тень, настраиваем цветовой градиент

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

Слева с обводкой, справа без

Компромисс: так как хуже всего видна голова, оставим обводку только на ней.

Тест-драйв для фавиконки

Получилась красивая насыщенная иконка, и медведь хорошо виден:

Финальная версия?

Теперь можно устроить фавиконке тест-драйв:

Вот так это выглядит в браузере

Что ж, не всё так хорошо, как казалось. Иконка слишком насыщенная по сравнению с логотипом в шапке сайта. Поэтому есть два пути:

Добавить насыщенности главному логотипу

Успокоить фавиконку, уменьшить её насыщенность

Конечно, более трезвым выглядит второе решение. Так мы и поступим. Осталось сохранить фавиконку в формате .ico, причём чтобы закруглённые края остались прозрачными. Как это сделать — напишу в следующий раз.

Добавка для самых терпеливых

В предыдущей части статьи я упомянул про один хороший метод оценки качества отрисовки. Итак, возмьмём уменьшенный логотип и нарисованную иконку, и сравним реальные палитры:

Работа проделана не зря 😃

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

Комментарии