Уроки Анимация Зинаида Лукьянова 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

241 тыс. 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-адрес, помогающих нам сделать его удобнее для вас. Подробнее