Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!
Введение. Где и как делается анимация?
Способ 1. Через окно анимации в фотошопе
Открываем "Window - Animation" (Окно - Анимация). В новых версиях ФШ "Шкала времени".
# увеличивается по клику
Способ 2. Через Image Ready
Adobe ImageReady CS - это приложение фотошопа для работы с анимацией. Открывается как отдельная программа.
Необходимо сначала провести в самом фотошопе предварительную работу, потом сохранить файл в формате psd (Файл > Сохранить как...), а затем открыть сохраненный файл в ImageReady.
Сохранять в ImageReady нужно через оптимизацию:
# увеличивается по клику
Подробней о работе в Image Ready
Чем, собственно, удобно это приложение - это тем, что в нем хорошо работать, если у вас нет необходимости создавать/обрабатывать картинки в фотошопе. Например, если у вас есть несколько любимых аватарок одинакового размера и вы хотели бы совместить их в одну анимированную. Сохраняем каждое изображение (для простоты в отдельную папочку) и называем их тоже циферками - в том порядке, в котором они должны "проигрываться".
(это позволит нам избежать лишних операций при экспорте файлов)
# увеличивается по клику
Открываем Acrobe ImageReady CS
Файл > Импортировать > Файлы как Фреймы. Выбираем папочку с нашими рисунками.
У вас появятся ваши картинки в окне анимации в виде отдельных кадров.
Далее можно настроить анимацию и поработать с стилями слоев.
Редактирование анимированных изображений
Для этого тоже оптимален ImageReady.
Размер изображения: Допустим мы хотим сделать из изображения размеров 100х100 пкс иконку размером 40х40. Перетаскиваем гифку в Acrobe ImageReady CS.
# увеличивается по клику
затем Image > Size и устанавливаем нужный размер
# увеличивается по клику
Изменить порядок слайдов: Это можно сделать простым перетаскиванием:
# увеличивается по клику
Зажимаете мышкой фрагмент и перетаскиваете на этой панельке его в то место, где вы бы хотели его видеть.
Видоизменение анимированного изображения/раскадрировать анимацию.
Для этого сначала нужно перетащить его в Acrobe ImageReady CS. Затем жмете Файл > Экспорт > Фрагменты анимации как файлы. Там выбираем папочку, в которую нам нужно сохранить файлы.
Открываем папочку и перетаскиваем все фрагменты в фотошоп. И видоизменяем файлы. (например, я сделала все файлы черно-белыми). Каждый видоизмененный фрагмент сохраняем (можно сохранить поверх старых с теми же именами).
Снова экспортируем видоизмененные файлы в Acrobe ImageReady CS. Затем выбираем интервал показа слайдов и сохраняем. (как это все делается см. предыдущие посты). Вот что у меня получилось:
!!! Черно-белыми кадры можно сделать и в самом ImageReady, как и множество других манипуляций. (я это сделала только для примера) Поэтому при работе стоит сначала поискать стандартные функции фотошоп, чем маяться с обработкой целой кучи кадров по отдельности.
Инструменты окна анимации
# увеличивается по клику
создать дубликат кадра
удалить кадр
время отображения кадра
создать промежуточные кадры
панель управления выделением кадра (в начало, предыдущий кадр, проиграть, следующий кадр)
Часть 1. Анимация - чередование картинок
Шаг 1. Подготовка кадров
Файл > Новый: создаем холст нужного размера и рисуем на нем (или вставляем в него нужные картинки).
# увеличивается по клику
затем создаем новый слой и размещаем на нем второй кадр (рисунок).
# увеличивается по клику
Для примера, я создала 5 слоев и нарисовала на них цифры.
Шаг 2. Создание анимации
переходим в Image Ready или открываем окно анимации.
Перед нами окошко из 1 кадра. Создаем 4 дубликата кадра (всего должно получиться 5 кадров).
# увеличивается по клику
Теперь работаем со слоями. Делаем невидимыми те слои, которые нам не нужны в конкретном кадре. Например, в первом кадре убираем слои 2, 3,4 и 5, во втором 1, 3,4 и 5 и т.д.
# увеличивается по клику
Настраиваем время отображения кадров
# увеличивается по клику
Сохраняем: Файл > Сохранить для Web, ставим формат gif
Часть 2. Анимация - плавный переход кадров (растворение)
Часто могли видеть красивые переходы на баннерах (плавно появляющиеся надписи, "перетекание" картинок одно в другую). Делается это с помощью кнопки промежуточных кадров. Итак, я создала 2 слоя с рисунками и фоновый слой.
# увеличивается по клику
Работаем с анимацией. Создаем дубликат кадра, на первом кадре оставляем видимым только первый слой, а на втором кадре - второй слой. Можно еще заранее настроить время отображения кадров. (Если тут что-то не понятно, читаете предыдущий пост)
# увеличивается по клику
Выделяем второй кадр и нажимаем кнопку создания промежуточных кадров.
# увеличивается по клику
В выскочившем окошке задаем количество промежуточных кадров. (чем больше их будет, тем медленней/плавней будет переход)
# увеличивается по клику
Сохраняем в формате gif.
Вот пример картинки, где применялась такая анимация:
Поиграйте с настройками кадров, порядком их "перетекания" - и может получиться много интересных вариантов.
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.