В этом уроке по работе с фотошопом мы будем создавать с "нуля" кнопку для сайта, а потом сделаем её анимированной.

Анимированная кнопка

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


Смотреть другие уроки по созданию анимации в фотошопе.

{smooth-scroll-top}

Создадим новый документ произвольных размеров, к примеру, 200 на 100 пикселов. Выберем инструмент "Прямоугольник со скруглёнными углами", будем применять его в режиме "Слой-фигура".

Инструмент "Прямоугольник со скруглёнными углами"

Нарисуем кнопку в нашем документе. Так как у меня цвет переднего плана чёрный, то кнопка получилась чёрного цвета.

Нарисованная кнопка

Перейдём в палитру "Стили" и выберем какой-нибудь подходящий стиль для нашей кнопки, я выбрал "Бирюзовое стекло".

Палитра Стили

Растрируем верхний слой: "Слой - Растрировать - Слой".

Слой - Растрировать - Слой

Удерживая клавишу Ctrl, щёлкаем левой кнопкой мыши по иконке верхнего слоя.

Палитра Слои

Загрузится выделение кнопки.

Кнопка

Создадим по краям кнопки небольшую каёмку. Идём в "Выделение - Модификация - Сжать".

Выделение - Модификация - Сжать

В появившемся окне ставим 3 пиксела.

Окно "Сжать область"

Вот что у нас получилось.

Кнопка

Инвертируем выделение - Shift+Ctrl+I, а потом копируем выделение на новый слой - Ctrl+I. В палитре "Слои" появился третий слой.

Палитра Слои

Придадим нашей небольшой каёмочке (всего 3 пиксела) какой-нибудь стиль. Переходим в палитру "Стили" и выбираем подходящий. Я применил "Пурпурное стекло".

Палитра Стили

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

Кнопка

Сливаем все видимые слои - Shift+Ctrl+E.

Палитра Слои

Открываем окно "Анимация" - "Окно - Анимация". Там мы увидим всего один слой.

Палитра Анимация

Нажимаем на вторую справа иконку в палитре "Анимация" и создаём два новых кадра.

Палитра Анимация

Делаем активным первый кадр и смотрим, чтобы в палитре "Слои" была включена видимость нашего единственного слоя.

Палитра Анимация и палитра Слои

Делаем активным второй кадр и смотрим, чтобы в палитре "Слои" была выключена видимость слоя.

Палитра Анимация и палитра Слои

Делаем активным третий кадр и смотрим, чтобы в палитре "Слои" была включена видимость нашего единственного слоя.

Палитра Анимация и палитра Слои

Делаем активным первый кадр и нажимаем на третью справа иконку в палитре "Анимация". Появляется окно "Создать промежуточные кадры", выставляем 10 кадров, остальные параметры не изменяем.

Палитра Анимация и палитра Слои

Делаем активным двенадцатый кадр (первый кадр плюс десять вновь созданных) и опять жмём ту же кнопку в палитре "Анимация". Добавляем ещё 10 кадров.

Палитра Анимация и палитра Слои

Делаем активным последний кадр, щёлкаем по чёрной стрелочке рядом с полем "0 сек",  и выбираем время задержки 1,0 сек.

Палитра Анимация

При активном последнем кадре опять щёлкаем по третьей кнопке и добавляем пять кадров.

Палитра Анимация и палитра Слои

Всё наша анимация готова. Нажимаем "Play" и любуемся готовой работой. Чтобы Ваша анимация работала не только в программе фотошоп, её необходимо правильно сохранить. Переходим в "Файл - Сохранить для WEB и устройств..." и выбираем формат файла GIF и сохраняем в любом месте на Вашем компьютере. Ещё один момент я забыл. После того, как Вы слили все видимые слои, напишите на кнопке необходимый текст. Я написал "Скачать".

КНОПКА

Анимированная кнопка

{smooth-scroll-top}

Комментарии  

Виктор
0 # Виктор 16.01.2013 03:43
Все понятно написанно с первого раза все зделал а у кого не получилось учите фотошоп нормально
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 08.04.2012 15:06
урааааааааааааааааа! сделал :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: :woohoo:
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 09.03.2012 01:13
Алиса! Что Вы имеете ввиду? Эту кнопку надо сделать самому по уроку.
Ответить | Ответить с цитатой | Цитировать
алиса
0 # алиса 08.03.2012 21:08
где находится эта анимация? :0
Ответить | Ответить с цитатой | Цитировать
Татьяна
0 # Татьяна 31.01.2012 21:46
Описано всё СУПЕР!!! наваяла кнопку за минуту :woohoo: Теперь вопрос - как сделать, чтобы кнопка реагировала на мышь, а не просто мигала?...
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 01.02.2012 13:15
Татьяна! Можно сделать, чтобы после клика по кнопке люди переходили на нужный Вам сайт. А чтобы кнопка реагировала на мышь - то это к программистам.
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 17.12.2011 19:32
Саша! Очевидно сайт "В контакте" не поддерживает анимацию. Посмотрите в своём аккаунте, может быть там есть возможность включения анимации или обратитесь к администрации сайта.
Ответить | Ответить с цитатой | Цитировать
Саша
0 # Саша 17.12.2011 19:18
Все сделал на компе анимируется а вконтакте нет почему???
Ответить | Ответить с цитатой | Цитировать
alex
0 # alex 24.11.2011 10:30
сохраняю в GIF для WEB. анимация отдельно без фотошопа не работает.просто изображение кнопки.
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 24.11.2011 12:11
alex! Если у Вас анимация нормально работает в фотошопе и Вы сохраняете её в GIF формате, то она обязательно будет работать в программах для просмотра изображений. Очевидно, что та программа, которой Вы пользуетесь, не поддерживает этот формат или не установлена соответствующая галочка в настройках программы.
Ответить | Ответить с цитатой | Цитировать
alex
0 # alex 24.11.2011 20:22
вы не могли-бы написать название программы в которой работает анимация??
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 24.11.2011 23:52
alex! Я использую ACDSee. А вообще анимация работает даже в стандартной программе, которая устанавливается по умолчанию - программа просмотра изображений и факсов.
Ответить | Ответить с цитатой | Цитировать
alex
0 # alex 25.11.2011 01:28
ясно. спасибо
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 09.03.2012 03:16
Странно..А у меня в программе просмотра изображений и факсов анимация почему-то не работала, а выглядела как обычное, неподвижное изображение :0
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 15.12.2011 01:07
Анимации корректно отображаются например, в браузере. :-)
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 09.03.2012 02:41
Программ, в которых будет работать анимация-множество. В том числе, известный всем броузер-программа для просмотра веб-страниц. ;-)
Ответить | Ответить с цитатой | Цитировать
Норм чел
0 # Норм чел 23.08.2011 13:54
:woohoo: класс :woohoo:
Ответить | Ответить с цитатой | Цитировать
niko
+1 # niko 15.08.2011 17:49
вот сделал
Ответить | Ответить с цитатой | Цитировать
Никита
0 # Никита 08.08.2011 17:52
а как сделать аву на форум ввиде анимации?
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 08.08.2011 17:51
а как сделать аватар на форум ввиде анимации?
Ответить | Ответить с цитатой | Цитировать
AmonRa
0 # AmonRa 23.07.2011 16:22
НЕОЧЕНЬ ПОНЯТНО ОПИСАНО, за скрины 5 баллов
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 01.08.2011 15:10
Что конкретно непонятно? Напишите и я переделаю урок, чтобы всем было ясно!
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 13.07.2011 00:31
:woohoo: :huh: ;-)
Ответить | Ответить с цитатой | Цитировать
Андрей
+1 # Андрей 28.06.2011 14:19
спосибо B)
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 09.06.2011 20:56
Если ей дать функцию перехода по ссылке. Нажимаем на картинку и переходим по ссылке.
Ответить | Ответить с цитатой | Цитировать
маша
0 # маша 20.09.2011 01:01
а как сделать эту функцию??? :D
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 20.09.2011 02:09
Маша, какую функцию Вы имеете ввиду?
Ответить | Ответить с цитатой | Цитировать
Guest
+1 # Guest 09.06.2011 20:49
А на неё нажать можно? ;-)
Ответить | Ответить с цитатой | Цитировать

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

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


Кто на сайте

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

  • OlegNakroshaev

Помощь сайту

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

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

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

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

Вход на сайт

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

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

 

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

Соглашение

 

 

 

 

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

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

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

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