Анимация для сайта

в фотошопе

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

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

Я буду использовать для своей работы логотип Google. Так же я буду использовать фон для этой работы, который я нашла в Интернете и вот какая анимированная шапка для сайта у меня получилась:

0

Интересна тема анимации? Тогда посмотрите видеокурс и вебинар:

Смотреть бесплатный видеокурс по анимации

Смотреть бесплатный вебинар по анимации

 

 

Итак, приступим к созданию анимированной шапки для сайта.
Создадим новый документ CTRL+N и в открывшемся окне я поставлю значения ширины и высоты документа в соответствии с требованиями сайта Ютуб.
Ширина = 2560 пикселей и Высота =1440 пикселей

1

2

Далее выполним команду Файл-Поместить:

3

В открывшемся окне Проводника компьютера нужно найти фон и нажать ОК:

4

В результате на поле документа появится фон, который уже имеет рамку Трансформации. Нужно потянуть за узелки рамки, чтобы растянуть фон на всё поле документа, а затем дважды щёлкнуть левой клавишей мышки, чтобы рамка исчезла:

5

6

7

Теперь я таким же способом помещу на фон логотип Google, который находится у меня в формате PNG, то есть текст логотипа находится на прозрачном фоне:

8

9

10

Теперь приступим к анимации. Выполним команду Окно-Шкала времени:

11

В результате на нижней панели откроется шкала времени, где нужно нажать на длинную кнопку Создать временную шкалу для видео:

12

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

13

В результате мы получили первый кадр в шкале времени:

14

Внизу кадра нажмём на стрелочку и выберем время 0,1 секунду:

15

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

16

17

18

Далее нажмём на значок Создание копии выделенных кадров и появится новый кадр:

19

Возвращаемся в палитру Слои и опять вызываем окно Стиль слоя дважды щёлкнув по слою Google и уменьшаем непрозрачность Внешнего свечения приблизительно на 20%:

20

Далее опять создаём новый кадр и уменьшаем непрозрачность Внешнего свечения. Я сделала таких 3 кадра. Внизу нажимаем на стрелочку Выбор параметров цикла и выбираем Постоянно:

21

Теперь нажимаем на стрелочку Запуск воспроизведения анимации и проверяем работу анимации. Затем сохраняем анимацию выполнив команду Файл-Сохранить для Web:

22

23

24

25

На этом урок "Анимация для сайта в фотошопе" окончен.
Желаю удачи!

 

РАСКРЫТЬ ВСЕ СЕКРЕТЫ АНИМАЦИИ

 

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

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


Кто на сайте

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

  • Alex76

Помощь сайту

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

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

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

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

Вход на сайт

ВСЕ РАССЫЛКИ САЙТА НА EMAIL

 

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

 

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

Основная полезная рассылка сайта.

Соглашение

 

 

 

 

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

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

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

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