Форум
Для создания анимированного аватра нам необходимы следующие программы: плеер с возможностью сохранения кадров из видео (я остановилась на LightAlloy), Adobe Photoshop любой версии (я использовала 7.0 с русификацией) для обработки сохраненных кадров и Adobe ImageReady любой версии (я использовала 7.0) для создания анимации.
Первым нашим шагом будет выбор видео-фрагмента, на основе которого мы будем создавать анимацию. Это может любой понравившийся вам момент. Я остановилась на интервью Рихарда, где он очень забавно кивает головой.
Сохраняем нужное нам количество кадров. (В LightAlloy последовательность действий выглядит так: зажимаем CTRL, нажимаем клавишу со стрелкой направо, на более симпатичном для нас кадре нажимаем F12 и программа сохраняет изображение в выбранную заранее папку)
Запускаем Photoshop, открываем сохраненные кадры.
В свое время, когда я еще не совсем освоила Photoshop, я столкнулась с очень сложной проблемой – мне никак не удавалось добиться точности в ширине и высоте, потому что я делала все на глаз. В результате анимация у меня получалось дерганой. А всего-то и надо было – научиться работать со слоями. Этим мы сейчас и займемся.
Выберем любое открытое нами изображение, на Панели инструментов слева выберем инструмент Прямоугольная область и выделим все наше изображение.
В строке меню щелкаем по Редактирование и выбираем Копировать. Затем в Файл выбираем команду Новый (обратите внимание, что в строках Ширина и Высота отображается размер нашего изображения), внизу ставим галочку на Прозрачный, щелкаем ОК.
Вставляем скопированное изображение (Редактирование-Вставить). С помощью инструмента Прямоугольная область выделяем нужный нам участок изображения.
Щелкаем правой кнопкой мыши и в открывшемся контекстном меню выбираем Инвертировать выделение.
Наша картинка должна принять следующий вид
Затем, на Панели инструментов (она находится слева, помните?), выбираем инструмент Кисть,
чуть пониже щелкаем Установка цвета и выбираем черный.
После этого смело закрашиваем черным все выделенное нами на изображении. Должно получится следующее
Снова выбираем инструмент Прямоугольная область, щелкаем правой кнопкой мыши на изображении и выбираем Инвертировать выделение. На Панели инструментов выбираем инструмент Ластик
и стираем оставшийся фрагмент изображения. Поскольку при создании нового документа мы поставили галочку на Прозрачный, действие Ластика должно привести к такому результату.
Сохраняем полученное изображение под названием Рамка, я рекомендую сохранить в формате GIF, для чего выбираем Файл – Сохранить для Web.
Теперь переходим к обработке кадров.
Открываем файл Рамка, выделяем и копируем (инструмент Прямоугольная область, Редактирование-Копировать). Переходим на первый кадр и вставляем Рамку (Редактирование-Вставить). На Панели инструментов выбираем инструмент Волшебная палочка
и щелкаем по черному полю изображения, инвертируем выделение (правая кнопка мыши-Инвертировать выделение). Теперь обратим внимание на панель, расположенную внизу справа. Это слои нашего изображения.
Вставленная Рамка – это Слой 1. Нам нужно скрыть этот слой. Для этого щелкаем на основном слое (он называется Background),
а у Слоя 1 щелкаем на изображение глаза.
У нас должно получится следующее
Щелкаем Редактирование, выбираем пункт Копировать. Затем создаем новый документ (Файл-Новый-ОК) и вставляем скопированный фрагмент. Вновь нажимаем Файл, выбираем пункт Сохранить как… и сохраняем изображение в формате JPEG под именем Рихард 1.
На остальных кадрах выполняем вышеописанные действия (название для изображений продолжайте по возрастающей: Рихард 2, Рихард 3 и т.д.).
Открываем сохраненное изображение с именем Рихард 1. В строке меню щелкаем по Изображение, выбираем пункт Размер изображения.
В открывшемся окне ставим Ширину 100 (размер, необходимый для аватара),
остальные значения поменяются автоматически, жмем ОК. Наше изображение уменьшилось до нужного размера. Сохраняем под выбранным именем (Файл-Сохранить)
Подобным образом изменяем размер остальных изображений (Рихард 2, Рихард 3 и т.д.)
Теперь запускаем Adobe ImageReady
и открываем наши уменьшенные изображения.
Обратите внимание на Панель внизу слева, здесь мы будем создавать анимацию. Как известно анимация – это последовательность быстро сменяющихся множества изображений. У нас же пока здесь одно изображение. Чтобы создать нужное нам количество кадров, необходимо щелкнуть по кнопке создания дубликатов (Duplicates current frame).
Я решила сделать 8 дубликатов. Но это продублированное изображение, а нам нужно вставить сюда другие изображения. Та картинка, на которой мы создали дубликаты будет нашим первым кадром (Рихард 1). Переходим на изображение, которое будет у нас вторым кадром (Рихард 2), щелкаем правой кнопкой мыши, выбираем пункт Select All (выделить все), снова щелкаем правой кнопкой мыши и теперь уже выбираем пункт Copy (копировать). Возвращаемся на Рихард 1, и вставляем скопированное изображение (правая кнопка мыши-Paste). Так же копируем в Рихард 1 оставшиеся изображения.
Теперь нам необходимо изменить отображение слоев. Если мы этого не сделаем, наш аватар останется статичным.
На Панели анимации внизу слева выделяем наш первый кадр. На Панели слоев внизу справа щелкаем по изображению глаза на всех слоях, кроме первого (Layer 1).
Затем на Панели анимации выделяем второй кадр
и на Панели слоев убираем отображение всех слоев, кроме второго (Layer 2).
Обратите внимание, как изменяется изображение на Панели анимации. Подобные действия применяем к оставшимся кадрам.
По окончании работа со слоями мы можем полюбоваться нашей анимацией. Для этого на Панели анимации необходимо запустить проигрывание движения (Play/stop animation). Остановить проигрывание можно той же кнопкой.
На мой взгляд, движение на аватаре слишком быстрое, поэтому я изменяю скорость проигрывания, она указана внизу каждого кадра, щелкнув по стрелочке, расположенной рядом с числом, мы можем выбрать из открывшегося меню нужную нам скорость смены кадров. Я выбрала 0,1 saconds.
Теперь можно сохранить наш аватар. Но прежде обратите внимание на панель вверху справа, там должно стоять формат GIF.
Если нас все устраивает – жмем Файл, Сохранить.
Наш анимированный аватар готов!
Первым нашим шагом будет выбор видео-фрагмента, на основе которого мы будем создавать анимацию. Это может любой понравившийся вам момент. Я остановилась на интервью Рихарда, где он очень забавно кивает головой.
Сохраняем нужное нам количество кадров. (В LightAlloy последовательность действий выглядит так: зажимаем CTRL, нажимаем клавишу со стрелкой направо, на более симпатичном для нас кадре нажимаем F12 и программа сохраняет изображение в выбранную заранее папку)
Запускаем Photoshop, открываем сохраненные кадры.
В свое время, когда я еще не совсем освоила Photoshop, я столкнулась с очень сложной проблемой – мне никак не удавалось добиться точности в ширине и высоте, потому что я делала все на глаз. В результате анимация у меня получалось дерганой. А всего-то и надо было – научиться работать со слоями. Этим мы сейчас и займемся.
Выберем любое открытое нами изображение, на Панели инструментов слева выберем инструмент Прямоугольная область и выделим все наше изображение.
В строке меню щелкаем по Редактирование и выбираем Копировать. Затем в Файл выбираем команду Новый (обратите внимание, что в строках Ширина и Высота отображается размер нашего изображения), внизу ставим галочку на Прозрачный, щелкаем ОК.
Вставляем скопированное изображение (Редактирование-Вставить). С помощью инструмента Прямоугольная область выделяем нужный нам участок изображения.
Щелкаем правой кнопкой мыши и в открывшемся контекстном меню выбираем Инвертировать выделение.
Наша картинка должна принять следующий вид
Затем, на Панели инструментов (она находится слева, помните?), выбираем инструмент Кисть,
чуть пониже щелкаем Установка цвета и выбираем черный.
После этого смело закрашиваем черным все выделенное нами на изображении. Должно получится следующее
Снова выбираем инструмент Прямоугольная область, щелкаем правой кнопкой мыши на изображении и выбираем Инвертировать выделение. На Панели инструментов выбираем инструмент Ластик
и стираем оставшийся фрагмент изображения. Поскольку при создании нового документа мы поставили галочку на Прозрачный, действие Ластика должно привести к такому результату.
Сохраняем полученное изображение под названием Рамка, я рекомендую сохранить в формате GIF, для чего выбираем Файл – Сохранить для Web.
Теперь переходим к обработке кадров.
Открываем файл Рамка, выделяем и копируем (инструмент Прямоугольная область, Редактирование-Копировать). Переходим на первый кадр и вставляем Рамку (Редактирование-Вставить). На Панели инструментов выбираем инструмент Волшебная палочка
и щелкаем по черному полю изображения, инвертируем выделение (правая кнопка мыши-Инвертировать выделение). Теперь обратим внимание на панель, расположенную внизу справа. Это слои нашего изображения.
Вставленная Рамка – это Слой 1. Нам нужно скрыть этот слой. Для этого щелкаем на основном слое (он называется Background),
а у Слоя 1 щелкаем на изображение глаза.
У нас должно получится следующее
Щелкаем Редактирование, выбираем пункт Копировать. Затем создаем новый документ (Файл-Новый-ОК) и вставляем скопированный фрагмент. Вновь нажимаем Файл, выбираем пункт Сохранить как… и сохраняем изображение в формате JPEG под именем Рихард 1.
На остальных кадрах выполняем вышеописанные действия (название для изображений продолжайте по возрастающей: Рихард 2, Рихард 3 и т.д.).
Открываем сохраненное изображение с именем Рихард 1. В строке меню щелкаем по Изображение, выбираем пункт Размер изображения.
В открывшемся окне ставим Ширину 100 (размер, необходимый для аватара),
остальные значения поменяются автоматически, жмем ОК. Наше изображение уменьшилось до нужного размера. Сохраняем под выбранным именем (Файл-Сохранить)
Подобным образом изменяем размер остальных изображений (Рихард 2, Рихард 3 и т.д.)
Теперь запускаем Adobe ImageReady
и открываем наши уменьшенные изображения.
Обратите внимание на Панель внизу слева, здесь мы будем создавать анимацию. Как известно анимация – это последовательность быстро сменяющихся множества изображений. У нас же пока здесь одно изображение. Чтобы создать нужное нам количество кадров, необходимо щелкнуть по кнопке создания дубликатов (Duplicates current frame).
Я решила сделать 8 дубликатов. Но это продублированное изображение, а нам нужно вставить сюда другие изображения. Та картинка, на которой мы создали дубликаты будет нашим первым кадром (Рихард 1). Переходим на изображение, которое будет у нас вторым кадром (Рихард 2), щелкаем правой кнопкой мыши, выбираем пункт Select All (выделить все), снова щелкаем правой кнопкой мыши и теперь уже выбираем пункт Copy (копировать). Возвращаемся на Рихард 1, и вставляем скопированное изображение (правая кнопка мыши-Paste). Так же копируем в Рихард 1 оставшиеся изображения.
Теперь нам необходимо изменить отображение слоев. Если мы этого не сделаем, наш аватар останется статичным.
На Панели анимации внизу слева выделяем наш первый кадр. На Панели слоев внизу справа щелкаем по изображению глаза на всех слоях, кроме первого (Layer 1).
Затем на Панели анимации выделяем второй кадр
и на Панели слоев убираем отображение всех слоев, кроме второго (Layer 2).
Обратите внимание, как изменяется изображение на Панели анимации. Подобные действия применяем к оставшимся кадрам.
По окончании работа со слоями мы можем полюбоваться нашей анимацией. Для этого на Панели анимации необходимо запустить проигрывание движения (Play/stop animation). Остановить проигрывание можно той же кнопкой.
На мой взгляд, движение на аватаре слишком быстрое, поэтому я изменяю скорость проигрывания, она указана внизу каждого кадра, щелкнув по стрелочке, расположенной рядом с числом, мы можем выбрать из открывшегося меню нужную нам скорость смены кадров. Я выбрала 0,1 saconds.
Теперь можно сохранить наш аватар. Но прежде обратите внимание на панель вверху справа, там должно стоять формат GIF.
Если нас все устраивает – жмем Файл, Сохранить.
Наш анимированный аватар готов!
