Красивый дизайн кнопочек для сайта

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

Шаг №1. Создайте новый документ и установите размер 500px на 300px.

Шаг №2. Возьмите инструмент Rectangle Tool (Прямоугольник) и нарисуйте небольшой прямоугольник на холсте:

Шаг №3. Щелкните два раза мышкой по слою с прямоугольником, откроется окно со стилями, там выберите Inner Glow (Внутренние свечение), установите цвет переднего плана #fab051, непрозрачность 22% и размер в 2px:

Далее в стилях слоя выбираем Gradient overlay (Наложение градиента) настройки цвета указываем примерно такие:

Так же в параметрах, установите угол в 90 градусов:

И последний параметр Stroke (Обводка), используйте цвет #ad680e и размер в 1px:

Шаг №4. Я поставил направляющие, главное убедитесь что они одинаковы с обеих сторон:

Теперь щелкните правой кнопкой по слою с прямоугольником и выберите Rasterize Layer (Растрировать слой):

Шаг №5. Выберите Pen Tool (Перо) и поставите две точки как показано на рисунке, для перемещения точек используйте клавишу Ctrl :

Затем ставим третью точку и жмем мышкой на первую. Должен получиться некий треугольник:

Теперь щелкаем по треугольнику правой кнопкой и выбираем Make Selection (Образовать выделенную область):

Затем жмем клавишу Del и снимаем выделение Ctrl + D. Повторите данную операцию с правой стороной. Вот что должно получиться:

Шаг №6. Далее добавляем текст, я использую шрифт League Gothic размер 26pt и цвет #a0610e:

Шаг №7. Теперь добавьте слою с текстом стили как показано на картинке ниже:

Шаг №8. И напоследок добавим тень нашей кнопочке. Щелкаем два раза мышью на слое с нашей кнопочкой и выбираем параметр Drop Shadow (Тень). Установите следующие настройки:

На этом урок окончен, вот конечный результат:

Такие кнопочки на мой взгляд отлично подойдут для навигации веб-сайта.

Объединение ИНТЕКС оказывает услуги в сфере строительства и проектирования домов, а также предоставляет на выбор каталог проектов коттеджей и домов из дерева, кирпича, пеноблоков и проч.

Правила перепечатки материалов сайта

Все материалы сайта являются интеллектуальной собственностью данного проекта (кроме случаев, когда прямо указано другое авторство) и охраняются законом "Об авторском праве и смежных правах".

Перепечатка, распространение, в том числе в переводе, любых материалов сайта возможны с соблюдением правил цитирования, а при размещении их в сети Интернет необходима ссылка на www.photoshop-training.ru.

Надеемся, вас не затруднит соблюдение этих условий.

Похожие Записи

• Раскаленный текст
• Парящий в воздухе ледяной текст
• Текстовый “махровый” эффект
• Реалистичный текст из печенья

Кнопка для сайта с анимацией на CSS3

Интересные записи

• СДЕЛАТЬ КРАСИВЫЕ ФОТО ОНЛАЙН
• Как рисовать иконки в фотошопе на русском
• Бархат женских будней
• Новый Photoshop слишком дорог для частного пользователя
• Как выбрать и купить правильный графический планшет для рисования, фотошопа, компьютера
• Как создать круглую печать в фотошопе