Как сделать анимированную кнопку для сайта

анимированные-кнопки

Такая анимированная кнопка для сайта пригодится для кнопок регистрации, создания кнопок download (скачать), кнопок-баннеров, логотипов и прочее.

Для начала нужно создать кнопку в фотошопе.

Мы создали кнопку в стиле Vista. Напомню, как создать такую кнопку:

  1. Создайте новый документ с заданными размерами (например, 200 на 45 пикселей), фон – прозрачный:
    создать-документ
  2. Возьмите инструмент “Прямоугольник с закругленными углами”, в верхнем меню настроек задайте радиус закругления углов. В нашем случае радиус закругления равен 2.Создайте фигуру произвольного цвета:
    фигура_кнопки
    Внимательно посмотрите на скриншот, на нем выделены настройки, необходимые для создания основы кнопки.
  3. Теперь обращаемся к палитре слоев и дважды кликаем по слою с прямоугольником. Попадаем в стили слоя. Активируем стили “Внутреннее свечение”, Градиент” и “Обводка”. Для каждого из стилей применяем настройки:
    • Внутреннее свечение:
      внутренннее_свечение
    • Наложение градиента:
      градиент_кнопки
      Редактируя градиент, кликните по цветной полосе и укажите цвета с непрозрачностью 100% # 8d245a, # 4d1331 (в позиции 68 – чуть правее середины градиента) и снова # 4d1331 в крайнем правом положении. Градиент – вертикальный (угол – 90 градусов).
    • Обводка черным, размер 1 пиксель:
      обводка
  4. Последний этап создания кнопки – создайте новый слой, кликните по иконке слоя с прямоугольником с зажатой клавишей Ctrl – загрузится выделение вокруг фигуры.
    выделение-кнопки
  5. Возьмите инструмент “Прямоугольная область”, в настройках укажите “Вычитание из выделенной области” и создайте выделение, проходящее через нижнюю часть кнопки примерно с середине:
    Untitled
    Если вы не видите анимации на скриншоте выше, то обновите страницу.
  6. При активном новом слое, выполните заливку выделенной области белым цветом.
  7. Уменьшите непрозрачность нового слоя примерно до 20-30%. Получилась кнопка:
    кнопка

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

Как сделать анимированную кнопку

У нас готова кнопка, теперь мы должны добавить анимацию для того, чтобы привлечь внимание к нашей кнопки и добиться некого действия от пользователей (регистрация, скачивание, переход по ссылке).

Сначала нужно написать текст на кнопке. Для этого вам могут пригодиться русские рукописные шрифты.

Далее выбираем инструмент “Произвольная Фигура”. Смотрите ниже инструкцию добавления стандартного набора “Стрелки” в набор фигур:

добавляем_стрелки

Выберите из нового набора стрелку, как на скриншоте:

стрелка

Создайте три такие стрелки на кнопке. Проще сначала нарисовать одну, дублировать дважды слои со стрелкой и переместить их, чтобы получилось следующим образом:

кнопка_без_анимации

  1. Теперь нужно активировать окно “Анимация” с помощью соответствующих команд Окно –> Анимация.
  2. У нижнего слоя со стрелкой уменьшите непрозрачность до 50%:

    анимированная кнопка
  3. Перейдите на окно анимация и добавьте первый кадр:
    добавить_кадр
  4. Теперь у нижнего слоя со стрелкой верните непрозрачность 100%, а у среднего слоя со стрелкой уменьшите непрозрачность до 50% и снова добавьте кадр анимации.
  5. У среднего слоя со стрелкой верните непрозрачность 100%, у верхнего слоя непрозрачность 50% и снова добавьте кадр анимации.
  6. У верхнего слоя непрозрачность 100%, у среднего – 50%, кадр анимации.
  7. Выставьте длительность каждого кадра анимации, равное 0,2сек и повтор – постоянно:
    1

 

 

 

2 комментария

Add a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

На нашем Портале графики вы узнаете все о Photoshop и обо всем, что связано с дизайном. Все уроки имеют подробное описание и скриншоты, поэтому будут особенно полезны для начинающих дизайнеров. Вы познакомитесь и с другими программами графики и работой в них. Например, Gimp - отличный бесплатный редактор, в котором вы можете проводить полноценную обработку фото. Наша коллекция дополнений сделает вашу работу более легкой и приятной. Вы можете стать нашим соавтором и заработать. Добавляйте новости на сайт через удобную форму обратной связи, размещать дополнения фотошоп со ссылкой на файлообменники. Если вам понравились наш сайт, то не забудьте подписаться на рассылку или rss, поделиться с друзьями в социальных сетях или добавить в закладки!