Как сделать анимацию в программе Photoshop

Найди все необходимое в разделе материалы для творчества
Как сделать анимацию в программе Photoshop | Ярмарка Мастеров - ручная работа, handmade

Сижу в позе русалочки на гранитном камешке, песок мокрый и холодный, а вокруг янтарики на солнышке блестят после шторма.

Этот мастер-класс по созданию анимационной гифки в фотошопе для тех, кто фотошоп уже освоил и свободно работает со слоями.

Итак. Необходимо создать (или открыть готовые) несколько слоев, или файлов и сделать один многослойный файл psd. Открыть окно анимации. Сделать несколько кадров включая и выключая нужные слои по порядку. Задать временные интервалы. Сохранить с оптимизацие в gif.

1. В моём случае двигатся будут только лопости ветряка, поэтому к слою фон я буду добавлять слои с лопастями.

фотошоп

2. Для этого я и отрезала, скопировала.

photoshop

3. Слой с новыми лопостями сдвинула инструментом перемещение, чтобы он не мешал. А старые лопости на фоновом слое затерла инструментом штамп, а могла также пользоваться заплаткой.

фотография

4. Слой с отрезанными лопастями инструментом "перемещение" приставила опять к столбу.

изображение

5. слой с лопастями продублировала (слой - дубликат слоя) и повернула (редактирование - свободное редактирование)

компьютерная графика

6. У меня получилось 4 слоя: фон и 3 слоя с лопастями под разными углами.

анимация

7. Когда все слои заготовлены, можно доставать панель анимации (окно - анимация)

мастер-класс

8. Первый кадр появляется автоматически. Активными должны быть слой фон и первый слой с лопастями, остальные "глазиком" сделать невидимыми

обработка фотографий

9. Второй кадр появится , если в нижней панели окна анимации нажать "чистый лист с загнутым уголком",

Для второго кадра активными должны быть слой фон и второй слой с лопастями.

обработка фото

10. Для третьего кадра активными должны быть слой фон и третий слой с лопастями.

Внизу каждого кадра выставляется временной интервал.

11. Самое важное правильно сохранить.

своими руками

Сохраняем "для web и устройств", в более ранних версия фотошопа эта строка называлась " сохранить под интернет" "сохранить для сети" .

На экране появляется окно оптимизации. Т.к у нас фотография с большим количеством полутонов, то ставим максимально количество цветов 256.

Давно, когда девевья были большие, компьютеры слабые, а интернет медленный, я уменьшала количество цветов, чтобы файл стал легче.

При сохранении дайте файлу новое имя обязательно латиницей, иначе он не будет распознаваться браузерами.

Комментарии (32)

у меня тоже получилось))) прикольно. спасибо.

Большое спасибо за МК. Только что сделала себе на сайт баннер. Раньше работала в каких-то других анимационных программах, которые уже устарели, и даже названия их не помню. Все хотела поискать аналоги, а тут ваш МК попался. Оказывается все так просто и можно сделать в Фотошопе. Ура! Еще раз спасибо!

Natalimarket 27.06.2013

ууу, я то думала, что там все сверчет и вращается))

Natalimarket 27.06.2013

{#}а как увидеть, что там крутится и сверкает? у меня просто статичная картинка{#}

{#} Картинка на самом деле статичная, но если её хорошо увеличить (ctrl +) она немного рябит. Это происходит из за того, что оптимизация (замена цветов на индексированные) в каждом слое происходит по разному и итоговые пиксели не совпадают.

Ирина, а какая у вас версия Фотошопа?

У меня CS5 {#}

Что-то я в своём Фотошопе, в окне, не нашла функции анимации... старая версия что ли...(( 8-мая..

К старым версиям фотошопа комплектом грузилась программа "имидж рейди" (пуск - все программы - адоб - имидж рейди) там была анимация. Лет 8-10 назад эта функция вошла в основную программу, а до этого я в ней всё тоже самое делала.

p.s. написала, а сама сижу и думаю, как же давно это было..., вот же время летит... сейчас пришла с торжественной части выпускного у сына..., а фотошоп я осваивала сразу после родов, когда в декрете с ним была....

image

Показать еще
Рубрики мастер-классов