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

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

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

 

Предварительный просмотр

 

 

Создайте новый документ размером в 500 на 300 пикселей и заполните холст белым цветом. Затем выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), установите Радиус (Radius) в 30 пикселей и нарисуйте следующую фигуру, используя цвет # d61d23.

 

 

После этого примените следующие стили слоя к этому слою: Внутренняя тень (Inner Shadow) и Наложение градиента (Gradient Overlay).

 

 


 

Ваша кнопка должна выглядеть так.

 

 

Теперь нужно сделать отражение кнопки снизу. Дублируйте текущий слой с помощью комбинации клавиш Ctrl + J, а затем переверните скопированный слой, поместите его как показано на изображении ниже. После этого отразите его по вертикали, для этого перейдите в меню Редактирование> Трансформирование> Отразить по вертикали (Edit> Transform> Flip Vertical), как показано на картинке ниже.

 

 

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

 

 

Затем вернитесь в стандартный режим. Теперь у вас есть выделенная область. Нажмите клавишу Delete на клавиатуре, чтобы очистить изображение в выделенной области.

 

 

Снимите выделение с помощью комбинации клавиш Ctrl + D. Теперь нужно добавить несколько бликов на кнопку. Для этого выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), установите Радиус (Radius) в 80 пикселей и создайте новую форму используя белый цвет.

 


 

Растрируйте этот слой, для этого перейдите в меню Слои> Растрировать> Фигуру (Layer> Rasterize> Shape). После этого примените режим быстрой маски еще раз и заполните её следующим градиентом.

 

 

Вернитесь в стандартный режим и вы снова получите выделенную область. Нажмите клавишу Delete на клавиатуре, чтобы очистить изображение в выделенной области.

 

 

Снимите выделение с помощью комбинации клавиш Ctrl + D, измените Режим наложения (Blend Mode) слоя на Перекрытие (Overlay).

 

 

С формой кнопки мы закончили. Теперь нужно разместить на ней некоторые элементы дизайна.  Выберите инструмент Элипс (Ellipse Tool) и создайте округлую форму, как показано на картинке ниже, с использованием белого цвета.

 

 

После этого примените такие стили слоя к этому слою: Внутренняя тень (Inner Shadow), Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay) и Обводка (Stroke).

 

 

 

 

 

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

 

 

Найдите изображение Земли в Google Images или используйте моё. Откройте его и уменьшите немного, а затем поместить изображение, как показано ниже.

 

 

Затем сделайте его черно-белым, для этого перейдите в меню Изображение> Коррекция> Обесцветить (Image> Adjustments> Desaturate) или нажмите комбинацию клавиш Ctrl + Shift + U, измените Режим наложения (Blend Mode) слоя на Перекрытие (Overlay).

 

 

Выберите инструмент Резкость (Sharpen Tool) (Кисть: 100 пикселей, Режим: Нормальный, Нажим: 40%), чтобы сделать этот фрагмент более чётким.

 

 

Теперь выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите что-нибудь используя белый цвет, как показано на картинке ниже.

 

 

В нашем примере используется шрифт Segoe UI, который является платным, но вы можете легко использовать любой другой, например, Arial Black. После этого примените стиль слоя Тень (Drop Shadow) к этому слою.

 

 

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

 

 

Вот и всё. Кнопка готова! Теперь самостоятельно попробуйте сделать кнопку другим цветом.

 

 

Урок по теме - Стильный баннер для вашего сайта.

 


Автор урока: photoshopstar.com

 

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

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



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


  • 18.04.2013
  •   Просмотров: 5841
Комментарии Вконтакте:
Комментарии 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
Партнерские ссылки