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

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

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

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

Заметка понравилась? → Поделитесь в соцсетях:

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

Ваш комментарий

comments powered by HyperComments

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

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2011