Рубрика: Photoshop Уроки | Урок прочитали: 700
 (голосов: 0)

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

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

Шаг 1. Создайте новый документ, цвет фона задайте показателем: #f7f5f6. Активизируйте инструмент Rounded reqtangle Tool (Прямоугольник со скругленными углами) с радиусом скругления 10 пикселей. В качестве цвета для переднего плана установите цвет с показателем: #2f88bb.  На новом слое создайте небольшой скругленный прямоугольник.

Шаг 2. Теперь перейдите в Layer Style (Стили слоя) и примените для нарисованного прямоугольника Outer Glow (Внешнее свечение) и Inner Glow (Внутреннее свечение) со следующими настройками:

Шаг 3. Удерживая клавишу <Ctrl>, щелкните мышкой на пиктограмме слоя с прямоугольником, для того, чтобы загрузить на него выделение. Создайте новый слой, войдите в меню: Select> Modify> Contract (Выделение -Модификация - Сжать) и в параметре «размер сжатия» установите значение: 1 пиксел. Активизируйте инструмент Elliptical marquee Tool (Овальная область выделения), и, удерживая нажатой клавишу <Alt>, начинайте вычитать выделение, как показано на рисунке. После того, как останется необходимая часть выделения, заполните это выделение белым прозрачным градиентом, режим наложения градиента установите «Перекрытие», непрозрачность слоя-48%, и снимите выделение, нажав комбинацию клавиш <CTRL+D>.

Шаг 4. Создайте новый слой и, используя инструмент Elliptical marquee Tool (Овальная область выделения), создайте эллипс, как показано на рисунке. Теперь, используя инструмент Gradient (Градиент), стиль - от основного к прозрачному, и создайте градиентную заливку по овальному выделению. Этот градиент будет выполнять функцию тени.

Шаг 5. Далее, удерживая клавишу <Ctrl>, щелкните мышкой на пиктограмме слоя с прямоугольником, для того, чтобы загрузить на него выделение. Теперь, войдите в меню Select> Inverse (Выделение - Инверсия), и нажмите клавишу <Delete>. Этим действием мы уберем лишнюю тень с кнопки.

Шаг 6. Установите непрозрачность для слоя с кнопкой до 32%. Удерживая клавишу <Ctrl>, щелкните мышкой на пиктограмме  первого слоя, для того, чтобы загрузить на него выделение, а затем, удерживая клавишу <Alt> и используя Rectangular marquee Tool (Прямоугольную область выделения), вычтите половину выделения.

Шаг 7. Залейте созданное выделение белым цветом, и измените непрозрачность до 11%.

Шаг 8. Теперь создайте  новый слой, и нарисуйте круг, как показано ниже.

Шаг 9. Далее, войдите в меню: Layer Style (Стили слоя) и выберите команду Gradient Overlay (Наложение градиента) для заливки градиентом созданного небольшого круга.

Шаг 10. Теперь можно добавить немного сияния для круга.

Шаг 11. Теперь добавьте необходимый текст и веб - кнопка готова!

Желаю Вам успехов!
Автор: Jack
Перевод:  Луговских Татьяна
Ссылка на источник

           

Похожие файлы и публикации:

Рисуем кнопку для сайта
В данном уроке мы будем учиться создавать информационный блок для сайта.
Рисуем кнопку для сайта
Сегодня мы будем учиться делать  привлекательное портфолио для веб-сайта.
Рисуем кнопку для сайта
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Рисуем кнопку для сайта
В этом уроке я расскажу Вам о том, как создать торшер с нуля.
Рисуем кнопку для сайта
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Рисуем кнопку для сайта
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Рисуем кнопку для сайта
В данном уроке мы будем учиться создавать «цветовую» шапку для сайта.
Рисуем кнопку для сайта
Привет друзья! Вы знаете, как создать изображение женской туфельки в программе Фотошоп? Давайте посмотрим, как это можно сделать.
Рисуем кнопку для сайта
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Рисуем кнопку для сайта
Друзья! Вы знаете, как в программе Фотошоп создать изображение медиа-плеера?
Рисуем кнопку для сайта
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Рисуем кнопку для сайта
Привет друзья! Вы знаете, как в программе Фотошоп создать изображение электронных часов? Если нет, то я предлагаю освоить эту несложную технику рисования пером!
Рисуем кнопку для сайта
Вот такой домик получится после данного урока
Рисуем кнопку для сайта
Сегодня мы будем рисовать вот такой карандаш.
Рисуем кнопку для сайта
В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.
Рисуем кнопку для сайта
В этом уроке Вы узнаете, как создать иконку в виде дома. Вот так будет выглядеть иконка в конце этого урока:
Рисуем кнопку для сайта
Шаг 1. Создайте новый документ размером 500px на 400px с разрешением 72 dpi в режиме RGB.
Рисуем кнопку для сайта
В этом уроке мы научимся рисовать губную помаду. Вот, что у нас получится.
Рисуем кнопку для сайта
31 октября состоится страшный праздник "Halloween"! Какой же праздник без тыквы?