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

 

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

Урок сделан в версии фотошопа 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
Спасибо. Согласна, действительно, неплохо.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Введите Ваше имя, или зарегистрируйтесь на сайте, что бы имя в ответах вставлялось автоматически: это займёт 2 минуты! После регистрации вы сможете редактировать свои сообщения и не придётся вводить подтверждение.
Ваш аватар к комментарию возможен, если вы зарегистрированы в системе Gravatar. Если нет - зарегистрируйтесь, это бесплатно.


Кто на сайте

Сейчас 219 гостей и ни одного зарегистрированного пользователя на сайте

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму.

Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу, при желании, укажите свои данные.

Пользователи, внесшие вклад

Вход на сайт

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

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

 

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

Соглашение

 

 

 

 

Поиск по сайту

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

Что в сундучке?

  • Текстовых уроков - 1152
  • Видеоуроков - 765
  • Вебинаров и тренингов - 66
  • Практических советов - 167
  • Программ - 7
  • Шаблонов, обоев и клипартов - 368
  • Наборов кистей, фигур - 320
  • Календарей - 117
  • Наборов рамок - 560
  • Книг, журналов - 125
  • Текстур, узоров и фонов - 44
  • Наборов иконок - 28
  • Наборов логотипов - 3
  • Наборов стилей - 51
  • Шрифтов - 78
  • Разное - 70