Анимация для сайта в фотошопе
Анимация для сайта
в фотошопе
В уроке "Анимация для сайта в фотошопе" мы будем создавать анимированную шапку для сайта.
Требования сайтов к анимированной шапке имеют определённые условия, которые ограничивают размер и вес анимированной картинки, поэтому в этом уроке я показала, как сделать лёгкую анимацию шапки для сайта, чтобы вес анимированной картинки не был слишком большим.
Я буду использовать для своей работы логотип Google. Так же я буду использовать фон для этой работы, который я нашла в Интернете и вот какая анимированная шапка для сайта у меня получилась:
Интересна тема анимации? Тогда посмотрите видеокурс и вебинар:
Смотреть бесплатный видеокурс по анимации
Смотреть бесплатный вебинар по анимации
Итак, приступим к созданию анимированной шапки для сайта.
Создадим новый документ CTRL+N и в открывшемся окне я поставлю значения ширины и высоты документа в соответствии с требованиями сайта Ютуб.
Ширина = 2560 пикселей и Высота =1440 пикселей
Далее выполним команду Файл-Поместить:
В открывшемся окне Проводника компьютера нужно найти фон и нажать ОК:
В результате на поле документа появится фон, который уже имеет рамку Трансформации. Нужно потянуть за узелки рамки, чтобы растянуть фон на всё поле документа, а затем дважды щёлкнуть левой клавишей мышки, чтобы рамка исчезла:
Теперь я таким же способом помещу на фон логотип Google, который находится у меня в формате PNG, то есть текст логотипа находится на прозрачном фоне:
Теперь приступим к анимации. Выполним команду Окно-Шкала времени:
В результате на нижней панели откроется шкала времени, где нужно нажать на длинную кнопку Создать временную шкалу для видео:
Шкала примет другой вид. В левом нижнем углу шкалы нужно найти значок Преобразовать в покадровую анимацию и нажать на него:
В результате мы получили первый кадр в шкале времени:
Внизу кадра нажмём на стрелочку и выберем время 0,1 секунду:
Теперь перейдём к палитре Слои и дважды щёлкнем левой кнопкой мыши по слою Google. В результате откроется окно Стиль слоя, где нужно выбрать стиль внешнее свечение и установить параметры, как показано на скриншоте:
Далее нажмём на значок Создание копии выделенных кадров и появится новый кадр:
Возвращаемся в палитру Слои и опять вызываем окно Стиль слоя дважды щёлкнув по слою Google и уменьшаем непрозрачность Внешнего свечения приблизительно на 20%:
Далее опять создаём новый кадр и уменьшаем непрозрачность Внешнего свечения. Я сделала таких 3 кадра. Внизу нажимаем на стрелочку Выбор параметров цикла и выбираем Постоянно:
Теперь нажимаем на стрелочку Запуск воспроизведения анимации и проверяем работу анимации. Затем сохраняем анимацию выполнив команду Файл-Сохранить для Web:
На этом урок "Анимация для сайта в фотошопе" окончен.
Желаю удачи!
Временно закрыто комментирование для гостей, нужна обязательная регистрация, ввиду засилья спамботов.
зарегистрируйтесь на сайте, что бы оставлять комментарии!
Подробнее...