Анимация для баннера с плавным переходом.
Вот тут я выложила свой урок о том, как сделать анимированную картинку в одном лишь фотошопе.
Меня попросили объяснить, как сделать так, чтобы картинка сменялась плавным растворением, чтобы делать баннер для сайта.
Сегодняшняя запись будет освещать этот вопрос.
Итак, создадим новый документ.
Откроем палитру Animation, по умолчанию она открывается в режиме (frames).
У нас один слой, и залейте видимую область белым цветом. (вы можете вставить первую картинку, которая будет переходить в другую).
Создаем второй слой, в который будет растворяться первая картинка. Я заливаю область красным цветом. Теперь расположите слой с первой картинкой сверху.
Выделите его.
Переключаем палитру анимации в режим (timeline). Это делается нажатием на кнопку в нижнем правом углу палитры, рис.1:
рис.1
Получаем следующий вид, рис. 2
рис. 2
Открываем на панели анимации свойства слоя (мы находимся в нулевом), для этого нажимаем на треугольничек, обведенный красным кружком на рис.2. Появляются свойства анимации слоя: position (позиция), opacity (прозрачность), стиль (style).
рис.3
По рис. 3:
1. Сдвигаем бегунок времени вправо, например, до позиции 02:00f.
2. Нажимаем на значок будильничка на линейке свойств анимации opaсity, на пересечении бегунка времени с линей прозрачности появится ромбик маркера.
3. Передвигаем бегунок времени вправо, например до отметки 08:00f.
4. На палитре слоев (справа) в свойстве слоя прозрачность ставим 0% вместо 100%
на пересечении бегунка времени с линей прозрачности будет появится второй маркер. При этом на значок будильника больше жать не нужно. Ромбики кстати можно двигать.
Переместите бегунок времени в начало и запустите просмотр анимации. До отметки 02:00f показывается первая картинка, с 02:00f до 08:00f первая картинка плавно растворяется (плавность зависит от времени, заложенного на растворение), с 08:00f до конца показывается вторая картинка.
Ну и по аналогии можно создавать плавное перемещение объектов, пользуясь линейкой position и плавным изменением стиля, пользуясь линейкой style.
Сохраняйте в анимационный гиф, чтобы картинка была анимированной, а не статичной. Сохраните и в tiff, если хотите потом еще внести правки в анимацию.
Если перевести панель анимации в режим фреймов, то автоматически появится нужное количество фреймов прорисовки изменения прозрачности. Если после этого перейти в обратный режим, маркеры исчезнут, будут показаны куча фреймов.
Если что-то осталось непонятным - велкам в комменты.
____________
Upd
Для того чтобы сделать плавный переход от последней картинки к первой:
Рассмотрим вариант с тремя слоями. Если слоев больше, механизм аналогичный.
1. в панели анимации, когда она в режиме таймлайн, слева открываем первый слой, нажимаем на значок будильничка на линейке свойств анимации opaсity, на пересечении бегунка времени со строкой прозрачности появится ромбик маркера. Ставим значение прозрачности 0%
Не сдвигая бегунок времени открываем следующий слой, щелкаем по будильнику в линейке непрозрачность, появится и тут ромбик, ставим 0%. Так для каждого слоя кроме последнего, там должно оставаться 100%.
2. Сдвигаем бегунок времени вправо, например, до позиции 01:00f.
Щелкаем в первом слое на строку opaсity, тут задаем для первого слоя 100%, появится маркер(ромбик).
3. Передвигаем бегунок времени вправо, например до отметки 02:00f.
В первом слое выделяем строку opaсity, ставим значение 0%.
Во втором слое выделяем строку opaсity, ставим значение непрозрачности 100%
4. сдвигаем бегунок времени на 03:00f, выделяем во втором слое строку opaсity и ставим значение 0.
Получается так:
Теперь переключаемся в покадровый режим.
Здесь важно поставить режим воспроизведения forever (постоянно) и изменить время воспроизведения последнего кадра на такое же, как и у остальных получившихся промежуточных кадров. Мне надо 7с изменить на 0,03с:
Готово.
Меня попросили объяснить, как сделать так, чтобы картинка сменялась плавным растворением, чтобы делать баннер для сайта.
Сегодняшняя запись будет освещать этот вопрос.
Итак, создадим новый документ.
Откроем палитру Animation, по умолчанию она открывается в режиме (frames).
У нас один слой, и залейте видимую область белым цветом. (вы можете вставить первую картинку, которая будет переходить в другую).
Создаем второй слой, в который будет растворяться первая картинка. Я заливаю область красным цветом. Теперь расположите слой с первой картинкой сверху.
Выделите его.
Переключаем палитру анимации в режим (timeline). Это делается нажатием на кнопку в нижнем правом углу палитры, рис.1:
рис.1
Получаем следующий вид, рис. 2
рис. 2
Открываем на панели анимации свойства слоя (мы находимся в нулевом), для этого нажимаем на треугольничек, обведенный красным кружком на рис.2. Появляются свойства анимации слоя: position (позиция), opacity (прозрачность), стиль (style).
рис.3
По рис. 3:
1. Сдвигаем бегунок времени вправо, например, до позиции 02:00f.
2. Нажимаем на значок будильничка на линейке свойств анимации opaсity, на пересечении бегунка времени с линей прозрачности появится ромбик маркера.
3. Передвигаем бегунок времени вправо, например до отметки 08:00f.
4. На палитре слоев (справа) в свойстве слоя прозрачность ставим 0% вместо 100%
на пересечении бегунка времени с линей прозрачности будет появится второй маркер. При этом на значок будильника больше жать не нужно. Ромбики кстати можно двигать.
Переместите бегунок времени в начало и запустите просмотр анимации. До отметки 02:00f показывается первая картинка, с 02:00f до 08:00f первая картинка плавно растворяется (плавность зависит от времени, заложенного на растворение), с 08:00f до конца показывается вторая картинка.
Ну и по аналогии можно создавать плавное перемещение объектов, пользуясь линейкой position и плавным изменением стиля, пользуясь линейкой style.
Сохраняйте в анимационный гиф, чтобы картинка была анимированной, а не статичной. Сохраните и в tiff, если хотите потом еще внести правки в анимацию.
Если перевести панель анимации в режим фреймов, то автоматически появится нужное количество фреймов прорисовки изменения прозрачности. Если после этого перейти в обратный режим, маркеры исчезнут, будут показаны куча фреймов.
Если что-то осталось непонятным - велкам в комменты.
____________
Upd
Для того чтобы сделать плавный переход от последней картинки к первой:
Рассмотрим вариант с тремя слоями. Если слоев больше, механизм аналогичный.
1. в панели анимации, когда она в режиме таймлайн, слева открываем первый слой, нажимаем на значок будильничка на линейке свойств анимации opaсity, на пересечении бегунка времени со строкой прозрачности появится ромбик маркера. Ставим значение прозрачности 0%
Не сдвигая бегунок времени открываем следующий слой, щелкаем по будильнику в линейке непрозрачность, появится и тут ромбик, ставим 0%. Так для каждого слоя кроме последнего, там должно оставаться 100%.
2. Сдвигаем бегунок времени вправо, например, до позиции 01:00f.
Щелкаем в первом слое на строку opaсity, тут задаем для первого слоя 100%, появится маркер(ромбик).
3. Передвигаем бегунок времени вправо, например до отметки 02:00f.
В первом слое выделяем строку opaсity, ставим значение 0%.
Во втором слое выделяем строку opaсity, ставим значение непрозрачности 100%
4. сдвигаем бегунок времени на 03:00f, выделяем во втором слое строку opaсity и ставим значение 0.
Получается так:
Теперь переключаемся в покадровый режим.
Здесь важно поставить режим воспроизведения forever (постоянно) и изменить время воспроизведения последнего кадра на такое же, как и у остальных получившихся промежуточных кадров. Мне надо 7с изменить на 0,03с:
Готово.