С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.

Дизайн эффектной кнопки Play

В этом уроке мы с нуля нарисуем очень красивую кнопку Play в программе Photoshop. В ходе занятия мы будем использовать очень простые приёмы, которые будет очень легко повторить даже самому неподготовленному человеку. Мы будем практиковать некоторые базовые навыки рисования и добавления световых эффектов на различные элементы, а также использование инстркмента Перо (Pen Tool), режимы наложения слоя и многое другое.

 

Вот финальный результат кнопки: (нажмите для увеличения)

 

 

Дизайн эффектной кнопки Play

 

 

Шаг 1

 

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

 

 

Дизайн эффектной кнопки Play

 

 

Создайте новый слой и нарисуйте желтый круг в центре холста.


 

 

Дизайн эффектной кнопки Play

 

 

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

 

 

Дизайн эффектной кнопки Play

 

 

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

 

 

Дизайн эффектной кнопки Play

 

 

Создайте новый слой и разместите его под слоем с кругом, используйте мягкую черную кисть для рисования тени под ним. Используя инструмент Свободная трансформация (Free Transform Tool) сожмите её как показано на изображении ниже.

 

 

Дизайн эффектной кнопки Play

 

 


Вот что получилось на данный момент.

 

 

Дизайн эффектной кнопки Play

 

 

Шаг 2

 

 

Теперь добавьте треугольник на кнопку.  Для этого создайте новый слой и выберите инструмент Многоугольник (Polygon Tool) из панели инструментов.

 

 

Дизайн эффектной кнопки Play

 

 

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

 

 

Дизайн эффектной кнопки Play

 

 

Нарисуйте треугольник, как показано ниже (Для ровности и пропорции будет полезно включить отображение сетки сочетанием клавиш Ctrl + ' ).

 

 

Дизайн эффектной кнопки Play

 

 

Примените следующие параметры наложения к слою с треугольником.

 

Внутренняя тень:

 

 

Дизайн эффектной кнопки Play

 

 

Наложение градиента:

 

 

Дизайн эффектной кнопки Play

 

 

Вот что должно получиться на данный момент.

 

 

Дизайн эффектной кнопки Play

 

 

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

 

 

Дизайн эффектной кнопки Play

 

 

Дублируйте этот слой, сожмите пятно вниз используя инструмент Свободная трансформация (Free Transform Tool). Поверните его и приложите к одной из линий треугольника - это создаст дополнительный эффект свечения.

 

 

Дизайн эффектной кнопки Play

 

 

Продублируйте этот слой два раза и расположите световые пятна у остальных сторон треугольника.

 

 

Дизайн эффектной кнопки Play

 

 

Вот что получилось на данный момент.

 

 

Дизайн эффектной кнопки Play

 

 

Шаг 3

 

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

 

Возьмите инструмент Перо (Pen Tool), нарисуйте некую изогнутую линию жёлтого цвета и толщиной в 5 пикселей.  

 

 

Дизайн эффектной кнопки Play

 

 

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

 

 

Дизайн эффектной кнопки Play

 

 

 Немного его измените.

 

 

Дизайн эффектной кнопки Play

 

 

Для того, чтобы всё это выглядело реалистичным добавьте текстуру к линии и  примените следующие параметры наложения к этому слою.

 

Внутреннее свечение:

 

 

Дизайн эффектной кнопки Play

 

 

Тиснение:

 

 

Дизайн эффектной кнопки Play

 

 

Наложение градиента:

 

 

Дизайн эффектной кнопки Play

 

 

Наложение узора:

 

 

Дизайн эффектной кнопки Play

 

 

Вот что получилось на данный момент.

 

 

Дизайн эффектной кнопки Play

 

 

Шаг 4

 

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

 

 

Дизайн эффектной кнопки Play

 

 

Отмените выделение, переместите этот слой немного вправо, получится вот такой эффект.

 

 

Дизайн эффектной кнопки Play

 

 

Продублируйте слой со свечением и переместите его в левую часть кнопки.

 

 

Дизайн эффектной кнопки Play

 

 

Вот что получилось на данный момент.

 

 

Дизайн эффектной кнопки Play

 

 

Теперь добавьте  несколько ярких точек вокруг кнопки. Чтобы это сделать, возьмите мягкую кисть и примените следующие параметры для кисти.

 

Динамика формы:

 

 

 

 

Рассеивание:

 

 

 

 

Передача:

 

 

 

 

Убедитесь, что стоит галочка Сглаживание.

 

Теперь лёгким прикосновение выбранной кисти нарисуйте несколько светлых пятнышек вокруг кнопки.

 

 

Дизайн эффектной кнопки Play

 

 

Шаг 5

 

Кнопка почти закончена! Настало время сделать небольшие корректировки. Можно добавить немного жёлтого мягкого свечения на кнопку. Для этого создайте новый слой, расположите его под слоем с кругом. Возьмите мягкую жёлтую кисть и нарисуйте свечение.  

 

 

Дизайн эффектной кнопки Play

 

 

Поиграйте с цветом используя палитру Цветовой баланс.

 

 

 

 

 

 

 

 

Вот финальный результат.

 

 

Дизайн эффектной кнопки Play

 

 

Очень надеемся, что вам понравился данный урок. 

 

 


Автор урока: Команда сайта PSD Vault


Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 30.01.2012
  •   Просмотров: 3669
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки