Создаём объёмные кнопки - 10 Октября 2010 - Портфолио, методические материалы, развивающие игры

Категории раздела
Статистика


Код баннера
 
       

Главная » 2010 » Октябрь » 10 » Создаём объёмные кнопки
13:51
Создаём объёмные кнопки

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

Запустим Adobe Photoshop и создадим новый файл с размерами 300 на 200 пикселей. Назовем его Button (кнопка).

 

Создадим новый слой. Чтобы создать новый слой, можем воспользоваться кнопкой в окне слоев (как на рисунке ниже), меню «Слой – > Новый - > Слой» или использовать сочетание клавиш «Ctrl+Shift+N»

 В окне слоев отобразится новый слой – Слой 1. Для большей наглядности дадим ему имя «кнопка» (для изменения названия слоя дважды щелкнем на нем в окне слоев).

На панели инструментов выберем инструмент «овальное выделение». Если на панели инструментов находится выделение прямоугольником, то необходимо щелкнуть на этом инструменте правой кнопкой мыши. Затем в появившемся меню выбрать овальное выделение, как показано на рисунке ниже.

Выделенную область необходимо закрасить градиентом. Для этого нужно выполнить следующие действия:

  1. Выбрать инструмент «градиент» на панели инструментов (или нажать клавишу «G»)
  2. Выбрать тип градиента – линейный градиент («Linear Gradient»)
  3. Выбрать цвет градиента: основной цвет сделать красным, а цвет фона – черным (для изменения цветов воспользуемся квадратиками, на панели инструметов).

 

Выделенную область необходимо закрасить градиентом. Для этого нужно выполнить следующие действия:

Закрасим выделенную область градиентом. Чтобы выполнить закраску, необходимо перетянуть указатель по рисунку, удерживая левую кнопку мыши. Должно получиться так, как на рисунке ниже.

Теперь необходимо сжать выделение. Для этого используем меню Выбрать -> Модифицировать -> Сжать (Select -> Modify -> Contact). В открывшемся окне выставим радиус – 15 пикселей и нажмем "Ок"

 

 

 

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


Вновь используем градиент. Только на этот раз, заливаем нашу кнопку в другую сторону (перетягиваем курсор справа налево). Должно получиться, как показано ниже.

 

 


Практически все готово. Осталось только сделать надпись на кнопке. Для этого:

  1. В панели инструментов выбираем инструмент Текст («Horizontal Type Tool») или просто нажимаем клавишу «T».
  2. Выбираем шрифт – Impact.
  3. Устанавливаем размер шрифта – 10 пунктов;
  4. Выбираем цвет текста – желтый.

 

Делаем в центре кнопки любую надпись.

В конце удаляем фоновый слой. Выберем слой «background» в окне слоев и удаляем его, используя соответствующую кнопку.

 


Готово!

 

Не забудьте сохранить кнопку в формате .png.

Категория: Уроки | Просмотров: 1632 | Добавил: silvi310171 | Рейтинг: 5.0/3
Всего комментариев: 0
Имя *:
Email *:
Код *:
Поиск
Календарь
«  Октябрь 2010  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Block title
Block content
Друзья сайта
  Веснушки      
Участник конкурса
 




Записки учителя.Сайт Татьяны Красновой © 2017
Бесплатный конструктор сайтов - uCoz