Уроки Анимация Зинаида Лукьянова 17 сентября 2007

Анимация

Сложность урока: Средний

В этом Фотошоп уроке вы узнаете, как сделать анимацию для фона.

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

Шаг 1.

Создайте новый документ 350х350 px с белым фоном.
Откройте картинку, которую вы будете разрезать, в Фотошоп. Разместите ее в центре вашего документа.

Картинка должна быть меньше, чем сам документ.

Установите Линейки следующим образом (разделите на четыре равные части).
Чтобы сделать этот инструмент активным нажмите CTRL+R или View > Rulers (Просмотр - Линейки)

Шаг 2.

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

Затем нажмите Ctrl+J, чтобы скопировать выделение на новый слой.
То же самое можно сделать Layer > New > Layer via Copy (Слой - Новый - скопировать на новый слой)

Теперь вернитесь к основному изображению и проделайте то же самое с каждым квадратом. В конце просто удалите слой с картинкой.

Шаг 3.

Каждому кусочку картинки примените такие стили:

Layer > Layer Style > Blending Options (Слой - Стиль слоя - Параметры наложения)

Тень:

Обводка:

Затем нажмите Ctrl+T или Edit > Free Transform (Редактирование - свободная трансформация) и примените данный инструмент к каждому кусочку. Разверните их каким-нибудь уникальным образом.

Шаг 4.

Теперь оставьте видимым только один слой на фоне (здесь это layer 3)

Нажмите Shift+Ctrl+M чтобы переслать данные в ImageReady.

Там также как в Фотошоп будет рабочее окно, но кроме этого вы увидите еще полоску для кадров.

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

Затем нажмите на кнопку Duplicates current frame (Создать дубликат текущего кадра), которая находится в окне с кадрами.

После чего перетащите картинку в рабочем окне снова на положенное место.

Выделите эти два кадра и нажмите на кнопку Tween (Добавить промежуточные кадры).

В окне Tween установите такие настройки:

Начать с: Выделенный кадр
Добавить кадров: 8
Слои: Все слои

После ОК кадры ваши станут быстро размножаться. Если нажать на кнопку Play (Воспроизвести), то получится вот так:

Шаг 5.

Далее на последнем кадре делаем видимым еще один слой в палитре и проделываем те же действия. Так с каждым кусочком.

Когда у вас все будет готово, зайдите в меню File > Save Optimized As... (Файл - Сохранить оптимизированный как...)

Вот и результат:

У Вас получилось?

Работа одного фотошоп-мастера:

До встречи на www.creativo.one!

Источник: www.PhotoshopTutes.com

243 тыс. 422
Печать Жалоба

Комментарии 422

Есть вопрос. Есть кисточка в виде пазла. Можно наложить такую пазловую сетку на картинку. Вот проблема разрезать все на кусочки. Знает кто как это сделать? Очень надо.

Ещё вариант. По другому уроку

Спасибо! Делала по другому уроку

Спасибо. Анимация здесь: https://jpegshare.net/cb/b3/cbb3b165217e528946414fa582800307.gif.html

Спасибо. Ссылка на гифку: http://jpegshare.net/38/e0/38e022f5b1488c9548c461539d4e4473.gif.html

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

Вопросы по уроку задавайте на форуме. В конце каждого урока есть ссылка "Задать вопрос на форуме"

Спасибо! Я решила не двигать кадры, и в конце добавила обратную анимацию
http://savepic.ru/13241643.gif

Спасибо за очень хороший урок! http://savepic.ru/12583431.gif

Спасибо за урок!_http://savepic.ru/10241690.gif

Спасибо за урок.
http://savepic.ru/8777636.gif

Так вот получилось-а в GIFе видно,что там происходит?

Спасибо, очень пригодилась идея!
http://savepic.ru/6095656.gif

Спасибо за интересный урок. Ссылка на анимацию http://savepic.org/6046585.gif

Спасибо за отличный урок!

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

Спасибо за урок!

Спасибо за урок. Анимация здесь:
http://savepic.ru/4170230.gif

Спасибо! У меня все получилось почти с первого раза! Кривовато немного, но суть поняла.
Только я не смогла активировать линейки, они включаются, но не появляются... Разделила по сетке.

Классно с д. с. в. всех

Спасибо, потрясающе эффектный урок!!!!!

Прошу пояснить пункт 4, при создании дубликата слоя в обоих появляется картинка, хоть убей. Что делать?

спасибо! сделала показ новогодних открыток, поэтому картинки все разные, но принцип тот же! на каждом последнем кадре отдельной картинки я делала 2 секунды просмотра, чтобы можно было разглядеть каждую по отдельности.
получилось интересно

Спасибо за урок!
s59.radikal.ru/i166/1208/66/d8fdc37d3ec7.gif

Спасибо! Довольно красивый gif получается!

Спасибо! Получилось! :)))

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее