ДомойДизайнВеб-дизайнКарандаш. Создаем иконку для сайта

Карандаш. Создаем иконку для сайта

Интернет пестрит различными иконками и аватарками, но для собственного сайта предпочтительно сделать их индивидуальными. Сделаем иконку карандаша, которую можно применить к функциям «Редактирование» либо «Добавить текст» и др.

Создаем новый файл размером 600*600 пикселей, в последующем уменьшим картинку.

Во вкладке «Просмотр» нужно выставить «Вспомогательные элементы» и выбрать «Привязать к» – «Направляющие», чтобы рисовать линии карандаша было проще.

карандаш иконка сайта-01

Настраиваем направляющие линии.

карандаш иконка сайта-02

Задаем расстояния между линиями, цвет и прочее.

карандаш иконка сайта-03

Рисуем срез края карандаша, где расположен грифель. Для этой цели могут подойти инструменты: «Перо», «Прямолинейное лассо».

карандаш иконка сайта-04

Изменяя цвет, рисуем средний срез и крайний левый такого же цвета, как и правый.

Цвет крайних срезов #e9c8ab и среднего среза #d5aa84.

карандаш иконка сайта-05

В окне слоев выделяем три слоя (удерживая нажатой, клавишу Shift в окне слоев нажимаем на слои, которые нужно выделить) со срезом и инструментом «Перемещение» сдвигаем слои вниз.

Создаем новый слой и инструментом «Прямоугольная область» выделяем крайнюю полосу, которая сформирует длину карандаша, и заливаем цветом #2c7e00. Снова создаем новый слой и в нем такой же ширины делаем полосу и заливаем цветом.

карандаш иконка сайта-06

Создаем новый слой и создаем третью полосу.

Становимся на слой с крайней полосой и заходим во вкладку «Слои» и выполняем действия: «Стиль слоя» – «Параметры наложения».

Устанавливаем галочку возле параметра «Наложение градиента». Раскрываем палитру градиента и одну из контрольных точек делаем тем же цветом, что и полоса, а другую темнее на пару тонов. К другой крайней полосе применим те же настройки градиента, и чтобы их не задавать по новой, то нажмем «Использовать по умолчанию».

карандаш иконка сайта-07

карандаш иконка сайта-08

Для средней полосы зададим градиент с цветом второй контрольной точки светлее, чем в предыдущей настройке.

карандаш иконка сайта-09

Создаем кончик карандаша с грифелем. Создаем новый слой и выделяем небольшой квадратик, который заливаем черным цветом.

карандаш иконка сайта-10

Выделяем слои со срезами карандаша (кончик) и объединяем их, нажав клавиши Ctrl +E.

Слой с черной заливкой – грифель делаем обтравочной маской. Располагаем слой с грифелем над слоем со срезами карандаша и удерживая нажатой клавишу Alt нажимаем по границе слоев.

карандаш иконка сайта-11

Дорабатываем зеленые полосы карандаша. Им необходимо придать закругление. Становимся на слой с полосой и заходим во вкладку «Редактирование» и выполняем действия: «Трансформация» – «Деформация». Мышкой оттягиваем линии вниз, формируя окружность.

карандаш иконка сайта-12

Проделываем то же самое с другими полосами.

Теперь необходимо полосам придать вид граней. Вызываем «Параметры наложения» и устанавливаем галочку возле параметра «Тиснение». Настраиваем значения. Также нажимаем «Использовать по умолчанию» и применяем к другим полосам.

карандаш иконка сайта-13

Формируем ластик на конце карандаша. Создаем новый слой, в котором «Овальной область» выделяем небольшой круг и заливаем его цветом #9f734d.

карандаш иконка сайта-14

«Прямоугольной областью» выделяем низ круга и нажимаем клавишу Delete.

В «Параметрах наложения» устанавливаем галочку возле параметра «Наложения градиента» и настраиваем значения. Тип градиента необходим «Радиальный», чтобы середина ластика была темнее, чем боковые части.

карандаш иконка сайта-15

Создаем металлический держатель ластика. Создаем новый слой и в нем «Прямоугольной областью» выделяем прямоугольник и создаем слегка округлый верх держателя. Для этого нужно удерживая клавишу Shift «Овальной область» добавить к области выделения округлость. Заливаем выделенную область цветом #847a71

карандаш иконка сайта-16

В «Параметрах наложения» устанавливаем галочку возле параметра «Наложение градиента». Настраиваем значения.

карандаш иконка сайта-17

Для крепежа необходимо придать объемный эффект. Для этого в «Параметрах наложения» устанавливаем галочку возле параметра «Тиснение» и настраиваем значения.

карандаш иконка сайта-18

Придать тени ластику и крепежу. Создаем новый слой над крепежом и в нем цветом на пару тонов темнее цвета крепежа прорисовываем мягкой кистью пятна, имитирующие тень. Лишние участки тени, которые выходят за пределы крепежа стираем.

карандаш иконка сайта-19

То же самое делаем с ластиком. Для слоев с тенями изменяем режим наложения на «Умножение».

карандаш иконка сайта-20

Становимся на верхний слой, отключаем видимость с фона (нижний белый слой), нажав на глазик возле миниатюры в окне слоев. Заходим во вкладку «Редактирование» и выбираем «Скопировать совмещенные данные» и «Вставить».  Копируем слой с совмещенными данными. Снимаем видимость со всех ниже находящихся слоев.

Один из слоев с карандашом сделаем тенью. Изменяем режим наложения на «Яркость» и заходим во вкладку «Изображение», выполняем действия: «Коррекция» – «Уровни».

В открывшемся окошке сдвигам значения так, чтобы карандаш стал черным.

карандаш иконка сайта-21

Заходим во вкладку «Фильтр» и выполняем действия: «Размытие» – «Размытие по Гауссу».

Значения делаем предельные.

карандаш иконка сайта-22

Под слоями с карандашом создаем новый слой и заливаем его цветом #93a48a. Заходим во вкладку «Фильтр» и выполняем действия: «Имитация» – «Зернистость фотопленки».

карандаш иконка сайта-23

Чтобы изменить размер изображения заходим во вкладку «Изображение» и выбираем «Размер изображения» и в открывшемся окошке задаем размер будущей иконки.

карандаш иконка сайта

Источникfotokomok.ru

ОСТАВЬТЕ КОММЕНТАРИЙ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

ПОХОЖИЕ СТАТЬИ