Совет 1: Как анимировать картинку

Анимированные картинки - довольно оригинальное решение, которое, к примеру, может привлекать больше посетителей на ваш сайт. Сделать такой трюк несложно, достаточно воспользоваться известным графическим редактором Adobe Photoshop или другой программой с похожим функционалом.
Как анимировать картинку



Установите и запустите программу Adobe Photoshop. Через меню «Файл» откройте вкладку «Импортировать» и кликните по пункту «Кадры в видеослои». Выберите анимацию для помещения на вашем изображении или фотографии (предварительно нужно записать или скопировать название файла данной картинки), и впишите в свободной строке появившегося окна название файла.

Дождитесь, пока программа не разделит анимацию на кадры и слои. Выберите инструмент «Волшебный ластик» (в виде иконки ластика со звездочкой) и почистите фон на каждом кадре и слое, кликая по ним мышкой. Для этого нужно щелкнуть инструментом по рабочему окну на фоне изображенной картинки. Если изображение очень маленькое и обладает множеством мелких деталей, можно увеличить ее с помощью комбинации Сtrl + колесико мышки вверх. Так вы сможете заметить, какие элементы изображения были удалены, а какие остались нетронутыми.


Разверните на весь экран изображение, на которое нужно добавить анимацию. Зажмите на клавиатуре левый Shift, чтобы выделить все слои. Перетащите все слои анимации на ваше изображение. В окне анимации нажмите правую кнопку мыши и в контекстном меню кликните по пункту «Создать кадры из слоев». Таким образом все слои будут разделены на кадры. Первый из них со статичной картинкой вам больше не понадобится, и его смело можно удалить.

Подгрузите на каждый кадр свою картинку, добавляя поочередно слой, затем кадр и нужное изображение. Разумеется, лучше следить за тем, чтобы все слои и кадры при этом соответствовали друг другу. В завершении выставьте необходимое время задержки (например, 0,15 секунд) и задействуйте анимацию. Проверьте получившийся результат.

Если вам нужна картинка с мигающей анимацией всего из нескольких кадров (например, для баннера), можно сделать это еще проще. Для начала создайте пустой слой, выбрав в главном меню функции «Слой» и «Новый». Можно также кликнуть по кнопке слева от изображающей корзину иконки.

Выберите инструмент «Заливка» (G). Выберите нужный вам цвет и кликните по изображению. Оно полностью изменит свой цвет. Укажите в качестве типа наложения «Перекрытие» и поставьте непрозрачность картинки. При этом нижний слой с расположенным на нем исходным изображением будет проступать сквозь верхний. Регулируя степень прозрачности верхнего слоя, поставьте нужную степень затемнения всего изображения. По желанию создайте еще один слой с белой заливкой. Далее настройте анимацию указанным выше способом.


Видео по теме
Источники:
  • как анимировать картинку самому
  • Делаем различную анимацию в фотошопе

Совет 2 : Как сделать движущуюся картинку

С выходом версии CS популярного графического редактора Photoshop, в пакет программного обеспечения от Adobe стало входить приложение Image Ready, которое, помимо других полезных функций, позволяет создавать движущиеся изображения или анимацию.
Image Ready позволяет создавать движущиеся изображения или анимацию
Инструкция
1
Чтобы сделать движущуюся картинку, вам понадобится несколько изображений, незначительно отличающихся друг от друга, и фиксирующих движение в разные моменты. Для примера, возьмем несколько кадров из культового фильма.
Как сделать движущуюся <strong>картинку</strong>
2
Создайте новую папку и поместите в нее несколько картинок. Теперь пронумеруйте их согласно порядка воспроизведения на экране. Все картинки обязательно должны быть одинакового размера!
Как сделать движущуюся <strong>картинку</strong>
3
Откройте программу Image Ready и выберите в меню File команду Import – Folder and frames. Найдите приготовленную папку с картинками и нажмите OK.
Как сделать движущуюся <strong>картинку</strong>
4
Перед вами откроется панель управления кадрами и окно предпросмотра.
Как сделать движущуюся <strong>картинку</strong>
5
По умолчанию скорость задержки каждого кадра составляет 0 сек. Щелкните на кнопку Play/Stop, чтобы посмотреть предложенный по умолчанию вариант движения кадров. Если скорость вас не устраивает, вы можете щелкнуть на кадре и выставить для каждого из них свою скорость задержки.
Как сделать движущуюся <strong>картинку</strong>
6
Теперь можно сохранить полученный результат одним файлом. Для этого откройте меню File – Save Optimized As, и сохраните движущуюся картинку в формате GIF на своем компьютере.
Как сделать движущуюся <strong>картинку</strong>

Совет 3 : Как заставить двигаться картинку

Один из способов заставить двигаться статичное изображение заключается в создании из него несложной двух или трехкадровой анимации в формате gif. Справиться с этой задачей поможет графический редактор Photoshop.
Как заставить двигаться картинку
Вам понадобится
  • - программа Photoshop;
  • - изображение.
Инструкция
1
Загрузите подходящую картинку в графический редактор. Если вы собираетесь анимировать движение объекта переднего плана или части этого объекта, окруженной фоном, выберите изображение с однотонным фоном. Желательно, чтобы фигура, которая будет двигаться, не отбрасывала тень, в противном случае вам придется обработать ее движение. Для анимации мимики персонажа фон особого значения не имеет.
2
Опцией Duplicate Layer, которая находится в меню Layer, создайте копию исходной картинки. Она будет основой второго кадра анимации.
3
Скопируйте на новый слой часть изображения, которая будет двигаться. Для выделения деталей сложной формы включите инструмент Lasso, объекты многоугольной формы можно выделить при помощи Polygonal Lasso. Для отделения от фона фрагмента с контрастными контурами подойдет Magnetic Lasso.
4
Выделив нужный фрагмент, примените опцию Layer via Copy группы New меню Layer. В документе образуется новый слой с выделенным фрагментом.
5
Трансформируйте выделенный объект так, чтобы получить картинку для второго кадра. Если анимированная фигура должна наклоняться, используйте опцию Rotate группы Transform меню Edit. Некрупные детали фигуры наподобие ушей, лап, хвостов и носов у животных можно трансформировать опцией Warp из той же группы или при помощи фильтра Liquify из меню Filter.
6
После трансформации часть исходного изображения показалась из-под деталей, форму которых вы изменили. Исправьте это, закрыв лишние фрагменты фоном. Для этого перейдите на слой, с которого была скопирована деталь, и включите инструмент Clone Stamp. Нажав на клавишу Alt, щелкните по фону, указав источник, из которого будут копироваться пиксели. Закрасьте ненужные фрагменты фигуры.
7
Если вы изменяли не соприкасающуюся с фоном часть фигуры, сделайте края трансформированного участка полупрозрачными так, чтобы резкой границы между исходной картинкой и измененной частью не было заметно. Для этого включите инструмент Erazer и присвойте параметру Hardness в панели настроек кисти этого инструмента значение меньше пятидесяти процентов. Сотрите края фрагмента настроенной кистью с мягкими краями.
8
Объедините трансформированную деталь с копией фонового слоя. Для этого перейдите на верхний слой и примените опцию Merge Down меню Layer.
9
Откройте палитру анимации опцией Animation меню Window. Первый кадр будущей движущейся картинки уже существует в палитре. Добавьте второй кадр, кликнув по кнопке со стрелкой в правом верхнем углу палитры и выбрав опцию New Frame в открывшемся меню. Скройте верхний слой документа опцией Hide Layers группы Layer.
10
Выделите оба созданных кадра и настройте их продолжительность, выбрав подходящее значение из меню в нижней части палитры.
11
Сохраните картинку, применив опцию Save for Web меню File в формат gif.
Видео по теме
Источники:
  • Прыгающие смайлики в Фотошоп

Совет 4 : Как анимировать картинку

Анимированные картинки - довольно оригинальное решение, которое, к примеру, может привлекать больше посетителей на ваш сайт. Сделать такой трюк несложно, достаточно воспользоваться известным графическим редактором Adobe Photoshop или другой программой с похожим функционалом.
Как анимировать картинку



Установите и запустите программу Adobe Photoshop. Через меню «Файл» откройте вкладку «Импортировать» и кликните по пункту «Кадры в видеослои». Выберите анимацию для помещения на вашем изображении или фотографии (предварительно нужно записать или скопировать название файла данной картинки), и впишите в свободной строке появившегося окна название файла.

Дождитесь, пока программа не разделит анимацию на кадры и слои. Выберите инструмент «Волшебный ластик» (в виде иконки ластика со звездочкой) и почистите фон на каждом кадре и слое, кликая по ним мышкой. Для этого нужно щелкнуть инструментом по рабочему окну на фоне изображенной картинки. Если изображение очень маленькое и обладает множеством мелких деталей, можно увеличить ее с помощью комбинации Сtrl + колесико мышки вверх. Так вы сможете заметить, какие элементы изображения были удалены, а какие остались нетронутыми.

Разверните на весь экран изображение, на которое нужно добавить анимацию. Зажмите на клавиатуре левый Shift, чтобы выделить все слои. Перетащите все слои анимации на ваше изображение. В окне анимации нажмите правую кнопку мыши и в контекстном меню кликните по пункту «Создать кадры из слоев». Таким образом все слои будут разделены на кадры. Первый из них со статичной картинкой вам больше не понадобится, и его смело можно удалить.

Подгрузите на каждый кадр свою картинку, добавляя поочередно слой, затем кадр и нужное изображение. Разумеется, лучше следить за тем, чтобы все слои и кадры при этом соответствовали друг другу. В завершении выставьте необходимое время задержки (например, 0,15 секунд) и задействуйте анимацию. Проверьте получившийся результат.

Если вам нужна картинка с мигающей анимацией всего из нескольких кадров (например, для баннера), можно сделать это еще проще. Для начала создайте пустой слой, выбрав в главном меню функции «Слой» и «Новый». Можно также кликнуть по кнопке слева от изображающей корзину иконки.

Выберите инструмент «Заливка» (G). Выберите нужный вам цвет и кликните по изображению. Оно полностью изменит свой цвет. Укажите в качестве типа наложения «Перекрытие» и поставьте непрозрачность картинки. При этом нижний слой с расположенным на нем исходным изображением будет проступать сквозь верхний. Регулируя степень прозрачности верхнего слоя, поставьте нужную степень затемнения всего изображения. По желанию создайте еще один слой с белой заливкой. Далее настройте анимацию указанным выше способом.


Видео по теме
Источники:
  • как анимировать картинку самому
  • Делаем различную анимацию в фотошопе
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500