Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
СКАЧАТЬ кнопки для форума ucoz Скачать голубой шаблон для сайта Скачать Адаптация из DLE под ucoz AllForYou Скачать иконки ucoz Красивый шаблон для ucoz Скачать шаблон для СОФТПОРТАЛА Черно-белый портрет в Фотошоп Шаблон на тему CS black by AleX Шаблон для дизайн студии Шаблон сайта для ucoz Как сделать Анимированный аватар в PhotoShop wow шаблон Как сделать оригинальный логотип в PhotoShop? icons for ucoz Меняем цвет автомобиля в фотошопе Шаблон на тему кино Скачать бесплатно шаблон для UCOZ от STEAM GAME by eKa Скачать бесплатно шаблон Design Vista Шаблон для uCoz в стиле "VISTA" Скачать кнопки для форума Шаблон для сайта КС Скачать шаблон для ucoz на тему ВАРЕЗ пОртаЛ Скачать кнопки для форума ucoz Граффити Скачать кнопки для UCOZ
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

Красивая кнопка для сайта

Красивая кнопка для сайта »

В этом уроке я вам покажу как нарисовать в фотошопе красивую модную кнопку для сайта...

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

Вроде пояснил. А теперь приступим к рисованию. Надеюсь, вы уже заранее запустили фотошоп... :)

Рисуем красивую кнопку для сайта

1. Создадим новое изображение размерами чуть больше будущей кнопки:

нарисовать в фотошопе красивую модную кнопку для сайта

2. Наша кнопка будет с немного закруглёнными краями, по этому лучше её нарисовать в векторном формате. Для этого выбираем инструмент Rounded Rectangle Tool, радиус закругления углов (Radius) поставим равным 4 пикселя, цвет любой, и нарисуем такую фигуру:

нарисовать в фотошопе красивую кнопку для сайта

3. А сейчас будем добавлять к нашей фигуре спецэффекты. Сразу, для начала, нужно выставить прозрачность Fill слоя с фигурой в 0%, а затем залазим в Blending Options (правый клик на слое, и там выбираем такой пункт) на вкладку Gradient Overlay — это мы будем раскрашивать нашу кнопку. Выставим там такие параметры:

нарисовать кнопку для сайта в фотошопе

4. На вкладке Stroke (обводка или же бордюр) выставим такие значения:

кнопка для сайта в фотошопе

5. На вкладке Inner Glow (внутреннее свечение) такие:

нарисовать в фотошопе кнопку для сайта

6. А тут добавим внутреннюю тень (вкладка Inner Shadow):

нарисовать в PhotoShop кнопку для сайта

7. Наконец-то сделаем так, чтобы наша кнопка отбросила тень (вкладка Drop Shadow), и тем самым казалась более объёмной (типа она не на плоскости а в пространстве):

нарисовать в фотошопе кнопку для сайта

После этого наша кнопка примет следующий вид:

нарисовать в фотошопе красивую кнопку для сайта

8. Сейчас добавим штриховку, блики и пару эффектов. Для этого сразу создадим новый слой и выделим нашу фигуру (зажимаем клавишу Ctrl и кликаем на слой с фигурой, затем отпускаем Ctrl):

нарисовать в фотошопе оригинальную кнопку для сайта

9. Не снимая выделения кликаем на новом слое (на панели слоёв) и зальём выделение любым цветом (с помощью инструмента Paint Bucket Tool):

нарисовать в фотошопе кнопку для сайта

10. Теперь прозрачность Fill нашего нового слоя (точнее непрозрачность) выставим в 0% и в Blending Options добавим несколько эффектов. Сразу добавим внутреннее свечение (Inner Glow):

нарисовать кнопку для сайта в фотошопе

11. Затем добавим блики с помощью градиента (вкладка называется Gradient Overlay):

нарисовать кнопку для сайта в фотошопе

Вот тут вы можете увидеть более подробно какой я применил градиент (чтобы открыть данное окошко — кликните на полоске справа от надписи Gradient. Нижние квадратики определяют цвет нашего блика — кликаем по ним и в пункте Color выбираем белый цвет. Верхние квадратики — это прозрачность — выставьте значения прозрачности как я показал на рисунке ниже (кликаем по верхним квадратам и в поле Opacity вписываем соответствующее ему значение). Потом кликаем по среднему верхнему квадрату и ромбики, которые по бокам, пододвигаем как можно ближе к нему:

нарисовать кнопку для сайта в фотошопе

12. Сейчас добавим штриховку. Для этого нам сразу нужно создать текстуру штриховки (как её создавать вы можете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5)), а потом на вкладке Pattern Overlay выставить следующие значения параметров:

нарисовать кнопку для сайта в фотошопе

И как результат получаем красивую кнопку для применения на вашем сайте:

модная кнопка для сайта, нарисованная в фотошопе

13. И напоследок было бы неплохо добавить к нашей кнопки какой-нибудь текст (шрифт, который я для этого использовал, можно скачать чуть ниже). Финальная версия моей кнопки выглядит следующим образом:

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

Осталось пожелать вам удачи! Экспериментируйте и у вас обязательно всё получится!

.: Дополнительно :.

Скачать шрифт « Mistral » | ZIP, 115 КБ



Категория: Для сайта | Добавил: cinemania (28.12.2008)
Просмотров: 1655 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Воскресенье, 07.06.2020, 03:51
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Логин:
Пароль:
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz