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

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



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

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

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

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

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

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


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

Мигающие аватары повсеместно встречаются на различных форумах и вызывают у некоторых пользователей что-то похожее на зависть. Как люди выходят из этого положения? Некоторые, чтобы найти что-то подходящее своей натуре, отправляются прямиком на поисковик, а более продвинутые открывают Adobe Photoshop и мастерят такой аватар самостоятельно.
Вам понадобится
  • - Русифицированная версия Adobe Photoshop
Инструкция
1
Запустите программу и откройте картинку, которую хотите сделать мигающей: нажмите пункт меню «Файл, затем «Открыть», выберите изображение и кликните «Открыть».
2
Для начала превратите фон в слой: на панели «Слои» (если его нет, нажмите F7) сделайте двойной клик по фоновому слою и в появившемся окне сразу нажмите «ОК».
3
Нажмите пункт меню «Окно» > «Анимация». Внизу программы появится новая панель. Первый кадр на ней – это открытое вами изображение. В нижней части кадра указано время, которое он будет находиться на экране, щелкните по нему и установите 0,1 сек.
4
Нажмите кнопочку «Создание выделенных кадров», которая находится внизу панели анимации. В панели слоев найдите поле «Непрозрачность» (оно находится в верхней правой части окна) и установите там 0%. Зажмите клавишу Ctrl и выделите оба кадра. Кликните кнопку «Создание промежуточных кадров» в виде цепочки из четырех круглых звеньев, которая находится по соседству с «Созданием выделенных кадров». В появившемся окне в поле установите, к примеру, 12 кадров. Эта величина будет влиять на скорость мерцания картинки.
5
Как вы видите, на панели анимации, появилось еще 12 кадров, которые разместились между двумя изначальными. Щелкните на кнопочку Play, чтобы убедиться, что картинка затухает.
6
Теперь создайте анимацию появления, т.е. вторую фазу мигания картинки. Создайте еще один кадр и установите у него «Непрозрачность» равную 100%. Выделите 14 и 15 кадры, нажмите «Создание выделенных кадров» и сразу кликните «ОК». Щелкните Play и убедитесь, что анимация мигания готова.
7
Чтобы сохранить результат, нажмите Alt+Shift+Ctrl+S, в поле «параметры просмотров» установите «Постоянно» и кликните «Сохранить». В следующем окне укажите путь для анимационной картинки и снова нажмите «Сохранить».
Полезный совет
Учтите, что не все ресурсы поддерживают GIF, который является форматом анимационных изображений. Например, социальная сеть «Вконтакте» - один из них.

Совет 3: Как анимировать в фотошопе

Анимация создается путем прокручивания в определенной последовательности и с заданным интервалом времени нескольких отличающихся друг от друга кадров. Простые инструменты графического редактора Adobe Photoshop позволяют анимировать изображения даже новичкам. Сам процесс требует от пользователя лишь внимательности и логического подхода.
Вам понадобится
  • Аdobe Photoshop
Инструкция
1
Запустите Adobe Photoshop и подготовьте изображения, которые станут кадрами вашей анимации. Поместите каждый кадр на новый слой одного холста. Чтобы легче было ориентироваться в кадрах, расположите слои друг за другом в той же последовательности, в которой они будут прокручиваться в анимации.
2
Вызовите окно для работы с анимацией. Для этого в верхней строке меню выберите пункт «Окно». В выпадающем подменю щелкните левой кнопкой мыши по пункту «Анимация». По умолчанию в открывшемся окне будет находиться всего один кадр, соответствующий выделенному на данный момент слою.
3
Щелкните левой кнопкой мыши по кнопке с изображением треугольника в правом верхнем углу окна «Анимация» и выберите в выпадающем меню пункт «Новый кадр». Вы можете создать сразу столько кадров, сколько будет в вашей анимации. В каждом новом кадре будет активный слой – это не должно вас смущать.
4
Щелкните в окне «Анимация» по первому кадру, чтобы сделать его активным. На панели работы со слоями сделайте невидимыми все слои, кроме того, который станет вашим первым кадром. Щелкните по нему левой кнопкой мыши, вы увидите, что первый кадр теперь содержит изображение с активного слоя.
5
Кликните по второму кадру в окне «Анимации», скройте на холсте все слои, которые вам пока не нужны и сделайте активным слой второго кадра на холсте. Переключитесь на следующий кадр. Повторяйте данную последовательность действий до тех пор, пока каждому кадру не будет назначен соответствующий слой изображения с холста.
6
Когда вы сопоставите слои с кадрами, определите, как часто они должны повторяться. По умолчанию задана цикличная анимация, при которой за последним кадром вновь и вновь прокручивается вся последовательность кадров, начиная с первого. Выставьте нужные вам настройки, щелкнув по значку треугольника первой кнопки, расположенной в левом нижнем углу окна «Анимация».
7
Под каждым кадром находится выпадающее меню, с помощью которого можно выбрать время задержки одного кадра. Если необходимо, измените эти параметры. Проиграйте анимацию, нажав на значок Play, чтобы убедиться, что вы все сделали правильно.
8
Закройте по желанию окно анимации и сохраните документ в формате .gif. Для этого в меню «Файл» выберите пункт «Сохранить для Web и устройств». Откроется новое окно, в котором вы сможете еще раз прокрутить весь ролик и задать дополнительные параметры файлу.
Обратите внимание
Время показа разных кадров не обязательно должно совпадать.
Полезный совет
Нажав на кнопку «Просмотр» в левом нижнем углу окна сохранения файла, вы сможете увидеть, как ваше анимированное изображение будет отображаться при загрузке в интернет.

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

Один из способов заставить двигаться статичное изображение заключается в создании из него несложной двух или трехкадровой анимации в формате 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.
Видео по теме
Источники:
  • Прыгающие смайлики в Фотошоп

Совет 5: Как заставить мигать картинку

Если вы хотите сделать анимацию, такую как мигающая картинка, для привлечения внимания на веб-странице, вы можете потратить деньги чтобы приобрести специализированную программу или скачать с интернет условно-бесплатную программу с ограниченными возможностями. Но если у вас есть программа Adobe Photoshop – в вашем распоряжении уже есть небольшая студия. Для несложной анимации это идеальный выбор.
Вам понадобится
  • Программа Adobe Photoshop
Инструкция
1
Откройте программу Adobe Photoshop и перейдите к «Файл» – «Открыть». Найдите изображение, которое вы будете анимировать. Другой вариант – просто перетяните изображение мышью прямо в программу.
2
Если у вас не открыта палитра слоев, откройте ее. Для этого зайдите в «Окно» и выберите «Слои» (F7).
3
Создайте пустой слой. В верхнем строковом меню выберите «Слой» а затем «Новый». Или нажмите кнопку слева от иконки, изображающей корзину.
4
Возьмите инструмент заливка (G). Выберите черный цвет и щелкните в пределах изображения. Изображение станет полностью черным. Затем поставьте тип наложения «Перекрытие» и отрегулируйте непрозрачность. При этом, нижний слой, на котором у вас находится исходное изображение станет проступать сквозь верхний слой. Управляя непрозрачностью верхнего слоя, отрегулируйте степень затемнения изображения.
Можно создать еще слой, но уже с белой заливкой. Для этого повторите 3 и 4-е шаги, но выбирайте для заливки белый цвет.
Как заставить мигать <strong>картинку</strong>
5
Теперь «оживите» мигающую картинку. Если у вас не раскрыта палитра анимации, выберите в «Окно» пункт «Анимация». По умолчанию, эта палитра содержит один текущий кадр. Вам нужно создать еще 1 или 2 в зависимости от того, сколько у вас слоев. Для каждого слоя – отдельный кадр. На палитре анимации нажмите на иконку слева от корзины с правой стороны. Нажмите на нее один или два раза.
6
Вернитесь к первому кадру на панели анимации. Затем перейдите к палитре слоев и отключите все слои кроме самого нижнего. Вы можете сделать это, нажав на глаз слева от слоя, после чего слой исчезнет.
Теперь на палитре анимации нажмите на второй кадр. Вернитесь к палитре слоев, и включите верхний слой. Повторите это столько раз, сколько у вас кадров содержит ваша мигающая анимация.
Как заставить мигать <strong>картинку</strong>
7
Как только вы закончите, нажмите кнопку «Play» на палитре анимации, чтобы убедится, что все работает правильно.
8
Теперь сохраните изображение. Выберите «Файл» а затем «Сохранить для Web и устройств». Появится окно. В раскрывающемся списке выберите формат GIF, и нажмите кнопку «Сохранить».
9
Примечание: для того чтобы сделать цветную мигающую картинку, заливайте слои разными цветами (шаг 4 и 5). Чтобы заставить мигать часть картинки, выделите с помощью «Лассо» часть изображения и заливайте цветом только это выделение (шаг 4 и 5).
Как заставить мигать <strong>картинку</strong>
Видео по теме
Источники:
  • как анимировать картинку самому
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500