Реклама


Кнопки для вашего сайта
Кнопки для вашего сайта


Запускаем Фотошоп и создаем новый документ шириной 500px, высотой 300px и белым фоновым цветом. С помощью инструмента Эллипс (Ellipse Tool) нарисуем черный круг – основу всей работы.

Кнопки для вашего сайта


Теперь дважды щелкаем мышкой по названию слоя в списке слоев (или команда LayerStyle ->BlendingOptions) и переходим к редактированию стилей. Итак, стили пропишите такие:

Наложение градиента (Gradient Overlay)

Кнопки для вашего сайта


Обводка (Stroke)

Кнопки для вашего сайта


Кнопки для вашего сайта


Переходим к созданию светового отблеска на иконке. В инструментальной панели берем Овальную область (Elliptical Marquee Tool) и создаем выделенную область примерно, как показано на скриншоте ниже.

Кнопки для вашего сайта


Получив нужное выделение, создаем новый слой командой Create New Layer или, нажав соответствующую иконку на панели списка слоев и выполняем градиентную заливку с переходом от #1c2133 к полной прозрачности.

Давайте избавимся от лишних участков на документе. Для этого выделим первый слой (тот, что с кругом), инвертируем это выделение командой Select –>Inverse и, перейдя на слой с овалом, удалим части этого овала, которые находятся за пределами круга. Сделать это можно, нажав на клавиатуре Delete.

Кнопки для вашего сайта


Снимаем выделение командой Ctrl + D и с помощью инструмента Эллипс (Ellipse Tool) создаем окружность с цветом #5ebf1a.

Кнопки для вашего сайта


Продолжим и отредактируем стили только что созданного круга. Эффекты стилей зеленого круга должны быть следующими:

Внутреннее свечение (Inner Glow):

Кнопки для вашего сайта


Обводка (Stroke):

Кнопки для вашего сайта


Кнопки для вашего сайта


Слой с зеленым кругом преобразуем в растровый (Rasterize –> Shape), затем воспользуемся Овальной областью (Elliptical Marquee Tool) и создадим выделенную область наподобие той, какую мы делали выше. С помощью Осветлителя (Dodge Tool) диаметром 100px, экспозицией 20% и диапазоном Средние тона осветляем нижнюю часть внутри выделения.

Кнопки для вашего сайта


Инвертируем выделение (Select –> Inverse или Ctrl+I) и Осветлителем в светлом диапазоне (highlights) осветляем верхнюю часть зеленого круга.

Кнопки для вашего сайта


Снова делаем инверсию выделения. На сей раз из палитры инструментов возьмем Затемнитель (Burn Tool), установим ему диаметр 100px, диапазон Средние тона и 30%-ю экспозицию и поводим этим инструментом по нижней части круга, пока не добьемся следующего результата:

Кнопки для вашего сайта


Наконец, снимаем выделение командой Ctrl+D и ставим галочку с помощью инструмента Custom Shape Tool (Произвольная фигура).

Кнопки для вашего сайта


Для этой фигуры настроим эффект стиля Отбрасывание тени (Drop Shadow) в режиме Умножения (Multiply).

Кнопки для вашего сайта


Кнопки для вашего сайта


Основная часть работы выполнена, осталось доработать детали. Сначала выполним слияние всех слоев в один, а после добавим перспективу иконке. На слое нажмем правой кнопкой мыши и в выпавшем меню выберем пункт Искажения (Transform –> Distort). Теперь надо подвигать маркеры ограничивающего прямоугольника так, чтобы получился примерно такой результат:

Кнопки для вашего сайта


Можно добавить боковину иконке, чтобы сделать ее объемней. Для этого скопируем слой, проследим, чтобы он располагался ниже оригинала, и передвинем его немного вправо и вниз.

Кнопки для вашего сайта


К слою-копии применяем эффект Наложения цвета (Layer Style -> Color Overlay):

Кнопки для вашего сайта


Кнопки для вашего сайта


Осталось иконке добавить тень. Создаем новый слой, выбрав в меню пункт Слой->Создать новый слой (Create New Layer), который будет располагаться над слоем фона. С помощью Овальной области (Elliptical Marquee Tool) создаем выделение ниже иконки и выполняем его заливку черным цветом.

Кнопки для вашего сайта


Избавляемся от текущего выделения командой Ctrl+D и слишком резкой черной тени применяем фильтр Gaussian Blur Filter (Размытие по гауссу).

Кнопки для вашего сайта


Немного растянем тень фильтром Motion Blur Filter (Размытие в движении).

Кнопки для вашего сайта


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

Кнопки для вашего сайта


Не останавливайтесь на достигнутом. Это лишь типовой урок, освоив который вы легко сможете создать целый набор авторских пиктограмм для своего сайта.

Источник: photoshopstar.com
Переведено специально для 8ART.RU


  • 29 августа 2012 18:00
  • Комментов: 0
  • Doris
  • Группа: Гости

слишком просто, я так делала когда только начинала фотошоп изучать
  • 29 августа 2012 22:22
  • Комментов: 0

Очень здорово смотрится! Мне нравится, когда делается просто, а смотрится прикольно!Фишка как раз в простоте и кроется!
  • 29 августа 2012 23:44
  • Комментов: 0

Такого подробного описания выполнения работы я еще нигде не встречала. Спасибо. Все так хорошо разъяснено, что не осталось больше никаких вопросов
Информация
Комментировать статьи на нашем сайте возможно только в течении 10 дней со дня публикации.