//

ФотошопСундучок photoshopsunduchok

Начните свой путь в мир ФОТОШОПА сейчас!

 

 

 

БЕСПЛАТНЫЕ РАССЫЛКИ ВКОНТАКТЕ

(более 20 рассылок) 

 


Канал в Дзене:

 

Присоединяйтесь в

Вход на сайт

Профиль

Последние комментарии

Кто на сайте

Сейчас на сайте 118 гостей и нет пользователей

Яндекс.Метрика

Как сделать кнопку для сайта

Как сделать кнопку для сайта

 

В этом уроке по работе фотошопом будет показан простой способ создания кнопки для сайта.

Урок сделан в версии фотошопа CS3, но может быть легко выполнен и других версиях фотошопа.

Урок сделан по мотивам книги "Adobe Photoshop CS6. Мастер-класс Евгении Тучкевич".

Объёмная кнопка

Подобные публикации:



{smooth-scroll-top}

Создадим новый документ произвольного размера - Ctrl+N. Я выбрал предустановленный размер 640х480 из набора Web.


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


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


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


Проведём градиентом внутри выделения из верхнего левого угла в нижний правый.


Получаем вот такую объёмную кнопку.


Переходим в "Выделение - Модификация - Сжать".


В окне "Сжать область" ставим значение около 10 пикселов. Эта величина определяет размер будущего ободка вокруг кнопки.


Получаем вот такой результат.


Теперь тем же градиентом проводим в противоположном направлении.


Снимаем выделение - Ctrl+D и получаем вот такую симпатичную кнопочку.


Делаем активным инструмент "Перемещение" (V) и, удерживая клавишу Alt, щёлкаем по созданной кнопке, удерживаем левую клавишу мыши, и перетаскиваем курсор мыши вправо. Таким образом, мы создали дубликат кнопки. В палитре "Слои" образовался новый слой с только что скопированной кнопкой.


Таким образом, я быстро создал ещё четыре кнопки. Теперь я хочу особо, не напрягаясь, нанести рисунок на каждую кнопку. Делаем активным инструмент "Произвольная фигура" (U) в режиме "Слой-фигура", щёлкаю по чёрной стрелочке, направленной вниз, правее поля "Фигура". Открывается список активных в данный момент фигур. Щёлкаю в этом раскрывшемся списке по чёрной стрелочке, направленной вправо и в раскрывшемся списке выбираю предустановленный набор фигур "Web".


В открывшемся окне нажимаю "Да" и фигуры из набора "Web" заменяют фигуры, которые были активны в данный момент.


Вот так выглядит набор загрузившихся фигур.


Делаем активной любую из фигур (щёлкаем по ней один раз левой клавишей мыши) и, удерживая клавишу Shift (для сохранения пропорций), растягиваем фигуру внутри кнопки. На переднем плане у меня установлен чёрный цвет, поэтому фигуры получились чёрного цвета.


То же самой я проделал и с остальными фигурами и кнопками. Вот что получилось. Довольно неплохо.


Чтобы каждый раз не подгонять размер фигур, можно применить следующий приём. Щёлкаем по чёрной стрелочке, направленной вниз, правее иконки произвольной фигуры, в раскрывшемся списке выбираем "Заданный размер" и ставим необходимые размеры фигуры. Теперь достаточно щёлкнуть внутри кнопки, и появится выбранная фигура нужного размера. Останется только с помощью инструмента "Перемещение" (V) подогнать фигуру по месту.


Мы с Вами ответили на вопрос: "Как сделать кнопку для сайта?".

Если Вы не хотите пропустить интересные уроки, информацию о бесплатных видеокурсах и другие новости сайта - подпишитесь на рассылку сайта. Форма для подписки находится ниже.


Если Вам понравился совет, поделитесь ссылкой на него со своими друзьями в своих любимых социальных сетях, кнопки которых Вы видите перед комментариями. Спасибо!

{smooth-scroll-top}

Печать

Комментарии  

Марина
0 # Марина 03.09.2013 03:36
Спасибо. Согласна, действительно, неплохо.

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