рисуем иконку в фотошоп

Давно не было уроков Photoshop, поэтому буду стараться пополнять этот раздел блога. Будем рисовать такие простенькие, но в то же время красивые иконки, как на скриншоте выше. Урок легкий и рассчитан для начинающих, так как расписано все очень подробно. Вопросы, жалобы, результаты, всё в комментарий.

  1. Создаем новый документ, размером 200х200px.
  1. Теперь создадим новый слой и назовем его “фон”. Выберем инструмент Rounded Rectangle Tool , выставим радиус 12px и с зажатой клавишей Shift, нарисуем квадрат с закругленными углами.
  1. Кликаем правой кнопкой по слою “фон” и выбираем пункт “Blending Options”(“Параметры наложения”). Устанавливаем там свойства параметров, так как показано на картинках:


Должно получиться примерно так:

  1. Теперь займемся текстом. Выбираем текстовый инструмент и подходящий шрифт (например “Segoe UI”), укажем размер и напишем какую-нибудь комбинацию букв, например “Ps”, соответственно для Photoshop.

Выровняем текст по центру, для этого Ctrl+клик левой кнопкой мыши по слою “фон”, затем выберите инструмент перемещения “Move Tool”(V) и кликнем по кнопкам выравнивания, как показано на скриншоте:

Выровняли? Отлично, теперь текст расположен точно по центру.

Добавим к тексту несколько эффектов, для этого кликаем правой кнопкой по слою с текстом и выбираем “Blending Options”. Устанавливаем параметры, как на картинке:

Результат:

  1. Осталось добавить немного блеска или так называемый эффект стекла.

Для этого создаем новый слой (Ctrl+Shift+N), выберите инструмент кисточки (Brush Tool) и заодно цвет #4aaee8. Затем снова выделите область иконки(Ctrl + клик по слою “фон”) и кисть размером в 100px в левом верхнем углу и правом нижнем оставить кистью два пятна. И в завершении снизим прозрачность слоя(opacity) до 50%.

  1. Создадим еще один новый слой (Ctrl+Shift+N), снова выделим иконку и немного уменьшим выделенную область. Для этого выбираем в меню – “Select-> Modify-> Contract”(Выделение-> Модификация-> Сжать) и указываем радиус размером в 3px.

Далее возьмем инструмент Gradient Tool с бело-прозрачным градиентом (White to Transparent):

[](http://artslab.kissr.com/img/gradient.jpg)</center> И с помощью градиента зальем выделенную область, для этого кликните левой кнопкой мыши выше выделенной области и тяните ее вниз по диагонали, примерно до половины, а затем отпускайте. Вот скриншот для наглядности:
7. Ну и наконец, последний шаг. Возьмем Elliptical Marquee Tool(M) [](http://artslab.kissr.com/img/elipmarqtool.gif), выделим область, как показано на рисунке ниже и удалим(Del) ненужную часть от нашего блеска:
Готово!
Вот так мы сегодня научились рисовать иконку в стиле Photoshop, которую можно использовать и в качестве иконки для, например, своего сайта, просто заменив текст или вообще заменив его какой-либо иконкой.
создать иконку twitter в фотошоп рисуем иконку вконтакте в фотошоп
Так же выкладываю свои PSD-файл готовой иконки – [скачать](files.artslab.info/psd_icon.rar). > Автор урока: Dewald Hein > Оригинал: WebDesign Library > Дополнения к уроку и перевод: [serEga](http://artslab.info)
Опубликовано
Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo