Анимация в фотошоп.

Анимация в фотошоп.

Продолжаем рубрику Анимация в фотошоп.

Практически все блоггеры рекламируют какие то продукты. Не важно чьи, свои или партнерские. Для этого всегда нужна кнопочка скачать. В принципе, написать можно что угодно: скачать, нажать, подписаться и т.п. Сделать ее можно самостоятельно в фотошоп, используя принцип анимации.

Рассмотрим, как это можно сделать.

Как рисовать кнопку смотрим тут.

1. Открываем изображение кнопки или рисуем ее.

2.Рисуем стрелку:

— Активируем инструмент "произвольная фигура" (1)

— выбираем форму растровой точки- стрелка (2)

— Рисуем стрелку любого размера

— с помощью свободной трансформации ( CTHL + T)  подгоняем под размер и поворачиваем вертикально.

3.Задаем нужные стили слоя для стрелки.

4. Пишем надпись на кнопке и задаем стили слоя для надписи.

5. Открываем окно анимации. Проверяем, что на первом кадре будет только кнопка с надписью. Видимость стрелки отключаем.

6. делаем второй кадр. Видимость стрелки включена. Положение стрелки первое (откуда она начнет движение)

7. Делаем третий кадр. Положение стрелки- конечное. Перемещаем ее по прямой, зажав клавишу SHIFT.

8. Выделяем второй и третий кадры, жмем иконку "создать промежуточные кадры" и выбираем сколько кадров будет Я поставила 20.

9. Выставляем время показа каждого кадра. Я оставила без задержки.

Теперь регулируем мигание надписи:

1-4 кадры видимость слоя с текстом включена, 5-9 видимость на каждом кадре отключаем, 10-14 оставляем включенным, 15 — 20 отключаем.

Остается только проверить, как работает анимация. Жмем Play и наслаждаемся результатом.

Напомню основные этапы создания анимации:

— делаем кнопку или открываем готовую

-рисуем стрелку

-выстраиваем анимацию.

— смотрим…

 

Анимация в фотошоп на сегодня закончена.

 

Если Вам понравилась статья, шлепните по социальным кнопочкам.
Если хотите получать все новости сразу и на почту, подпишитесь на обновления.

На главную

Интересное по теме:

Метки: . Закладка Постоянная ссылка.

15 комментариев: Анимация в фотошоп.

  1. Елена пишет:

    Очень полезные, а главное простые шаги по созданию анимации в фотошоп! Ещё немного подучиться, и можно самостоятельно менять внешний вид сайта 🙂 Спасибо!

  2. Лариса пишет:

    Спасибо за отличные советы! Обязательно ими воспользуюсь.

  3. Наталья пишет:

    Давно я анимацию не делала. Мне кнопка понравилась.  У нее эффект объема имеется. Стильная такая кнопочка. Кадры промежуточные не всегда получаются, навк еще слабоватый, мало делала и путаюсь иногда

  4. Сергей пишет:

    Действительно, пора заняться анимацией в фотошопе, должно получиться)))

  5. Елена пишет:

    Наташ! Извини за дилетанский вопрос, но потом как эту картинку всатвалять на блог? Как обычную картинку? Или как код?

  6. Сергей пишет:

    Загорелся желанием создать такую стрелочку, а можно и змейку, в полёте. Но говорят инициатива наказуема. Придётся ломать голову, как вставить её в тект или код. Но это уже второе. Спасибо!

  7. Оксана пишет:

    Всё просто и ясно показано, спасибо за статью.

  8. jonny_30 пишет:

    О!
    Полезный урок. На блоге в постах можно кнопку «Далее» можно будет заменить на такую анимашку…. стоит подумать, наверное, чем и займусь на досуге «)
    спасибо «)

    • Для меня всегда было проблемой не нарисовать, а установить коды. Например, когда я смотрю, как нарисовать дизайн сайта в ФШ, все время поражаюсь, как эту картинку можно сделать, что она работает! Нажимаются кнопки, открываются окошки. Просто фантастика. Нарисовать для меня проще в 10-ки раз.
      Единственно, на кнопку (именно эту) далее стоит ли делать анимацию. Дело в том, что она крошечная. И картинка, нарисованная в ФШ может оказаться «не вместимой» по размеру. Т.е. окажется либо большой, либо «слепой». Но если есть желание, почему бы не попробовать.

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

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