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

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

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

ПлашкаПлашка
ГрадиентГрадиент
Две лапы готовыДве лапы готовы
То, на чём сидит мишкаТо, на чём сидит мишка
Вот такие рукиВот такие руки
Правая лапаПравая лапа
Руки готовыРуки готовы
ГоловаГолова
Рисуем ременьРисуем ремень
Тень и носикТень и носик
Сочный градиентСочный градиент
Обводка головыОбводка головы
Итоговая версия фавиконкиИтоговая версия фавиконки

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

Задача

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

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

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

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

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

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

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

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

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

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

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

Окошечко NavigatorОкошечко Navigator

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

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

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

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

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

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

2) То, на чём сидит мишка Рисуем то, что между лап:

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

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

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

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

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

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

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

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

5) Руки готовы Заканчиваем верхние лапы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Благодарность автору

Перевод через Яндекс.Деньги:

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

Спонсоры поста

Комментарии

Саша
Кропотливая работа, а результат сомнительный.
Иван
Для 30-40 минут работы результат вполне оправданный. И, кроме результата, некоторые методы могут быть полезны тем, кто первый раз взялся рисовать favicon. Статья направлена в первую очередь на это.
Alex
Первая попытка сделать видеоурок. Как раз начал с Фавиконки)
http://site-sbs.ru/podskazki/favikonka-dlya-sayta-piktogramma-znachok.html

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

© 2011