Как создавалась фавиконка для «Автодетей» (часть 2)
Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп :)
Вот весь процесс:
Перечислю основные средства фотошопа, которые нам понадобятся, чтобы во время рисования не было вопросов. Это пипетка, карандаш, стирательная резинка, выделение (прямоугольное и овальное), работа со слоями (создать слой, изменить порядок) и задание степени эффекта в процентах (будь то карандаш, ластик или прозрачность слоя). Нужно заново отрисовать логотип Автодетей — — в размере 16 на 16 пикселей. Уменьшаем логотип до этого размера и вставляем в новый документ (размер холста лучше сделать побольше: когда вокруг есть белые поля, удобнее работать): Для начала нарисуем плашку со скруглёнными углами. Чтобы границы плашки попали в пиксели и не размазалась, лучше установить галочку «Snap to Pixels». Я попробовал сделать радиус скругления 1, а потом 2 пикселя. Второй результат лучше, так как скругления стали видны: Теперь скопируем стиль плашки из файла с логотипом на маленькую плашку. Это делается в меню слоёв: Copy or Paste Layer Style. Сильно увеличим документ лупой, чтобы было легче работать дальше: Круто, если бы на экране мы видели сразу два размера иконки: большую и маленькую (16×16). Откройте Window/Navigator и увидите следующее: К сожалению, иконка там ресайзится (сейчас это не так заметно, но она будет из-за этого размазываться). Однако, 1) Выделяем овал, ориентируясь по медведю-образцу, создаём новый слой, заливаем его белым цветом (Alt Del), потом выделяем кружочком стопу, стираем (Del) и ещё раз стираем. 2) Заливаем прямоугольник в новом слое, и при помощи овального выделения стираем часть слоя ластиком (прозрачность ластика 50%). 3) Рисуем овал в новом слое, потом для удобства меняем прозрачность слоя (чтобы увидеть слой-образец с медведем) и стираем внутреннюю часть. 4) На исходнике медведя инструментом «Лассо» при зажатой кнопке Alt выделяем всё вокруг правой лапы. Переходим на наше «коромысло» и стираем ненужный кусок. А также стираем еле видные пиксели (комбинацией прямоугольных выделений). 5) Стираем правую половину слоя с лапами. Выбираем левую половину. Нажимаем Ctrl Alt ВПРАВО (получили копию выделенного куска в том же слое). Переворачиваем то, что выделено (Edit/Transform/Flip Horizontal). А потом стрелочками возвращаем левую лапу на нужное место. Думаю, что теперь принципы очень хорошо понятны, поэтому дальнейшую часть опишу короче. 6) Вариант с глазами фееричен: 7) 8) Рисуем тень карандашом (в слое под мишкой), слегка размываем её, стираем лишние части тени, меняем цвет тени и ремешка. А также проходимся по всей картинке карандашом и ластиком: делаем более резкие края, делаем шире голову и уши. Без крайней необходимости в фавиконках лучше не использовать тени. Потому что там и так мало места, и лишние детали ни к чему. Вместо тени на фоне в том же месте можно сделать более тёмный градиент: Однако, мишка по-прежнему не очень хорошо виден. Детали у него достаточно резкие, но из-за светлого оранжевого фона контрастность получается не очень. Попробуем обвести мишку градиентной обводкой. Заодно градиент подложки можно немного приукрасить: в тех местах, где он светлеет, добавить желтизны. Теперь он выглядит насыщеннее: Компромисс: так как хуже всего видна голова, оставим обводку только на ней. Получилась красивая насыщенная иконка, и медведь хорошо виден: Теперь можно устроить фавиконке тест-драйв: Что ж, не всё так хорошо, как казалось. Иконка слишком насыщенная по сравнению с логотипом в шапке сайта. Поэтому есть два пути: Конечно, более трезвым выглядит второе решение. Так мы и поступим. Осталось сохранить фавиконку в формате В предыдущей части статьи я упомянул про один хороший метод оценки качества отрисовки. Итак, возмьмём Комментарии закрыты. По всем вопросам обращайтесь ко мне по почте, через Вотсап или Вконтакте, см. раздел КонтактыЗадача
Готовим почву
на каждую хитрую ж... мы умеем подгонять под ответ: если сделать размер холста таким же, как размер окошечка навигатора (у меня получилось 86×86 пикселей), то будет то, что надо:Начинаем рисовать
Голова и ремень
Финальная доводка
Тест-драйв для фавиконки
Добавка для самых терпеливых
Смотрите также
Фавиконки (favicon)
Векторные иконки для ретины
Адаптивная вёрстка для NENCOM
Визитка магазина Автодети
http://site-sbs.ru/podskazki/favikonka-dlya-sayta-piktogramma-znachok.htmlСледующая заметка