Иконки в стиле Карбон

Иконки в стиле Карбон - уроки фотошоп

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

Сложность: низкая Время: до 30 минут

Создайте новый документ размерами 600 × 200 пикс, но Вы можете использовать другие размеры, в зависимости от того, сколько иконок Вы хотите. Также лучше использовать яркий фон, для того, чтобы все было видно. Выберите инструмент Rounded Rectangle Tool = Прямоугольник со скругленными углами, измените настройки в верхней панели инструментов, как показано на изображении ниже. Иконки в стиле Карбон - уроки фотошоп Нарисуйте Вашу иконку, она должна выглядеть так. Иконки в стиле Карбон - уроки фотошоп Теперь активируйте инструмент Pen Tool = Перо, затем щелчок правой кнопкой мыши Fill path = Выполнить заливку контура, цвет можете выбрать любой, т.к его мы будем изменять. Далее  щелкните правой кнопкой мыши еще раз Delete path = Удалить контур. Иконки в стиле Карбон - уроки фотошоп Теперь добавим следующие стили слоя: Иконки в стиле Карбон - уроки фотошоп Иконки в стиле Карбон - уроки фотошоп Иконки в стиле Карбон - уроки фотошоп Иконки в стиле Карбон - уроки фотошоп У Вас должно получиться следующее Иконки в стиле Карбон - уроки фотошоп Дальше, нам необходимо создать свой Узор, для этого создадим новый документ размерами 4 × 4 пикселя, Увеличим изображение, чтобы мы могли выполнить то, что показанно ниже. Иконки в стиле Карбон - уроки фотошоп После того как Вы это выполнили, необходимо перейти Edit > Define Pattern = Определить узор сохраните его под любым названием. Теперь вернитесь к своему исходному изображению и нажмите на уменьшенную копию в палитре слоев, удерживая клавишу Ctrl, это создаст выделение. Создайте новый слой, над Вашим слоем с прямоугольником, назовите его Картинка. Выберите инструмент Paint Bucket tool = Заливка, в верхней панели выберите узор, которых мы создали. Иконки в стиле Карбон - уроки фотошоп Ваше выделение должно быть активным. Заполните свой прямоугольник выбранным узором. Далее Вам нужно увеличить свой прямоугольник и добавить маску слоя. Нажмите клавишу D  на своей клавиатуре, это выставит цвета по умолчанию, а зате нажмите X чтобы переключить цвет. Выберите инструмент, зеркальный Gradient tool = Градиент. Перетащите его из точки 1 в точку 2 (как показано на рисунке ниже) Иконки в стиле Карбон - уроки фотошоп Сделайте щелчок правой кнопкой мыши по маске слоя, и перейдите Apply layer mask = Применить слой-маску, это должно объединить слой-маску, со слоем, в один слой. Теперь добавьте еще один слой маски, на этот раз выберите линейный градиент. Нажмите кнопку X на клавиатуре, чтобы переключить цвета снова. Перетащите из точки 3 в точку 4 (как показано на рисунке ниже). Иконки в стиле Карбон - уроки фотошоп Примените маску слоя еще раз. Вот что должно получиться. Иконки в стиле Карбон - уроки фотошоп Используйте инструмент Pen tool = Перо, чтобы сделать путь, как на картинке ниже. Иконки в стиле Карбон - уроки фотошоп Залейте выделение белым цветом, на новом слое, над слоем с прямоугольником. Установите непрозрачность слоя до 5%. Иконки в стиле Карбон - уроки фотошоп Выберите инструмент Rectangular tool = Прямоугольная область, чтобы создать небольшой прямоугольник в нижней части иконки. Иконки в стиле Карбон - уроки фотошоп Добавьте стили слоя: Иконки в стиле Карбон - уроки фотошоп Иконки в стиле Карбон - уроки фотошоп Вот что должно получиться. Увеличьте Ваше изображение, с помощью инструмента Polygonal Lasso tool = Прямолинейное лассо, сделайте выделение, как на изображении ниже. Иконки в стиле Карбон - уроки фотошоп Заполните выделении цветом, немного светлее Вашего прямоугольника. Сделать это нужно, с обеих сторон. Иконки в стиле Карбон - уроки фотошоп С помощью простого шрифта Arial добавьте Вашу надпись, а так же свой значок, который бы Вы хотели видеть на Вашей иконке. Иконки в стиле Карбон - уроки фотошоп Вот таким способом Вы можете создать свой шедевр! Ссылка на источник: www.hv-designs.co.uk

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика