Урок «Бегающее Насекомое» / Анимация

Вторник, 22 Мая 2012 г. 19:53 + в цитатник

Цитата сообщения LenysikR

Прочитать целиком В свой цитатник или сообщество!

Урок «Бегающее Насекомое» / Анимация

Автор урока: Ленусик

Материал для урока: исходное Изображение и Клипарт любого насекомого (муравей, бабка-коровка и т.д)

Мои исходники: для того чтобы скачать кликните на баннер сайта и зайдите в раздел Уроки Adobe Photoshop

1. Открываем Основное изображение: Файл-Открыть

2. В окне слои снимаем замочек, как это сделать см. Здесь

3. Если нужно, придаем изображению необходимый размер: Изображение-Размер изображения (ширину - меняем, высота - меняется автоматически или наоборот и жмём OK)
Слой называем - «Фон

4. Открываем клипарт Насекомого: Файл-Открыть

Перемещаем клипарт на наш основной фон:
Ctrl+А - выделить холст

Ctrl+C - скопировать в буфер обмена

Переходим на наше изображение и жмём Ctrl+V - вставить
Воспользуемся Свободным Трансформированием - Ctrl+T и придадим насекомому необходимый размер
Совет: Что бы не сбить пропорции, зажимаем Shift и тянем за уголок/маркер по диагонали, отпускаем сначала мышку, потом клавишу Shift
Что бы повернуть - подводим мышку к угловому маркеру, видим стрелочки и поворачиваем, Enter - применить

5. Так как клипарт я выбрала муравья, соответственно и слои я буду называть «Муравей»
Давайте решим сколько муравьев будет на изображении, у меня два: значит стоим на слое «Муравей» и копируем его Ctrl+J один раз (если у вас больше, то скопируйте соответственное число раз)
Слои назовём - «Муравей 1» и «Муравей 2»...

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

Теперь нам надо каждого муравья определить в «Группу»:
Встаём на нижний слой с муравьём и жмём сочетание клавиш Ctrl+G - группу называем «Муравей 1», переходим на следующий слой с муравьём и повторяем действия - группу называем «Муравей 2» и т.д.

Пока «Группы» свернём

7. Нам необходимо скрыть появление и исчезание муравья, для этого к нашему изображению добавим простую рамочку:

В окне «Слои» нажмём на листик и создадим «Новый слой» - назовём его «Рамочка»

Ctrl+А - выделить холст

Идём: Редактирование - Выполнить обводку

Ctrl+D - отменить выделение

8. Работаем с группой «Муравей 1», будем выстраивать передвижение первого муравья:

Открываем группу, встаём на слой с муравьём и с помощью инструмента «Перемещение» или стрелочками на клавиатуре размещаем клипарт в нужном месте

С помощью «Свободного трансформирования» - Ctrl+T - поворачиваем

Совет: Что бы повернуть - подводим мышку к угловому маркеру, видим стрелочки и поворачиваем, Enter - применить

Дублируем слой Ctrl+J и перемещаем (попа муравья должна оказаться на его голове)
Совет: Я передвигаю стрелочками на клавиатуре, это гораздо удобнее, чем инструментом «Перемещение»

Снова дублируем слой Ctrl+J, перемещаем и где необходимо поворачиваем, в итоге у меня получилось вот что:

Совет: на некоторый частях изображения муравей должен быть невидим, например обратите внимание, на то место, где он пробегает как-будто под листиком, в этом месте его просто нет, можно использовать инструмент «Ластик» и стереть в этих местах лишние части муравья

Закончили работу с группой «Муравей 1»

Отключаем все глазки в этой группе и сворачиваем её

9. Переходим к следующей группе «Муравей 2» и повторяем - 8 Шаг

10. Теперь приступаем к сбору анимации, будьте очень внимательны!

Переходим в окно «Анимация»:

В окне «Анимация» у нас уже есть 1-ый кадр - глазки в каждой группе с муравьями - выкл.

Слой «Фон» и слой «Рамочка» - глазки вкл. всегда!

Время зададим примерно - 0,15 сек.

Открываем группу с муравьём, в которой самое большое количество слоёв (у меня это группа «Муравей 2»)

Создаём 2-ой кадр нажатием на листик в окне «Анимация» - вкл. видимость первого слоя в выбранной группе

Создаём 3-ий кадр нажатием на листик в окне «Анимация» - вкл. видимость следующего слоя в выбранной группе, а видимость предыдущего слоя - выкл.

Совет: В тех местах, где муравей пробегает как-будто под листиком, несколько кадров (это зависит на каком расстоянии должен быть скрыт муравей) - видимость только слой «Фон» и слой «Рамочка»

Продолжайте таким образом собирать анимацию этой группы...

Можете нажать на «Запуск воспроизведения анимации» и проверить, как бегает ваш муравей, если всё устраивает, продолжаем...

Закрываем эту группу - больше её не трогаем и открываем следующую группу

Так как в этой группе у меня уже меньше слоёв, значит анимацию можно начать расставлять например с 9 кадра

И так, встаём на 9-ый кадр - и вкл. видимость первого слоя в следующей группе

Переходим на 10-ый кадр - включаем видимость следующего слоя, а на предыдущем слое - глазик выключаем

Надеюсь, что я понятно объяснила сбор анимации, далее продолжайте сами....для тех кто дружит с анимацией, это не составит особого труда, а для тех кто нет, наверно придётся повозиться, здесь главное понять принцип сбора анимации и тогда всё обязательно получиться...
Жмём в окне «Анимации» на «Запуск воспроизведения анимации»

проверяем и если всё устраивает сохраняем: Файл - Сохранить для Web в формате GIF

Как скопировать и сохранить урок к себе на компьютер см. Здесь

Серия сообщений "Фотошоп":
Часть 1 - Рамочка ретро
Часть 2 - Мои коллажи - Лида Юринец
Часть 3 - Урок «Экшен - PanosFX Fan - Рисунок на веере» / Анимация
Часть 4 - Урок «Бегающее Насекомое» / Анимация
Часть 5 - ~ Kоллажи "Fleur de Lotus", "cida-prata.voila" ~
Часть 6 - ~ МОЯ РАБОТА-AKINA ~
...
Часть 10 - ~ "ἁρμονία" © Павловская Елена ~
Часть 11 - ~ Коллажи и флеш в Алео Баннер - Mariea ~
Часть 12 - ~ Мои работы в фотошоп - от Валентина 999 ~

<a href="https://www.liveinternet.ru/users/helene_p/post221096514/">РЈСЂРѕРє В«Р‘РµРіР°СЋС‰РµРµ РќР°СЃРµРєРѕРјРѕРµВ» / РђРЅРёРјР°С†РёСЏ</a><br/>
РЈСЂРѕРє В«Р‘РµРіР°СЋС‰РµРµ РќР°СЃРµРєРѕРјРѕРµВ» / РђРЅРёРјР°С†РёСЏ
РђРІС‚РѕСЂ СѓСЂРѕРєР°: Р›РµРЅСѓСЃРёРє

РњР°С‚РµСЂРёР°Р» РґР»СЏ СѓСЂРѕРєР°: РёСЃС…РѕРґРЅРѕРµ РР·РѕР±СЂР°Р¶РµРЅРёРµ Рё РљР»РёРїР°СЂС‚ Р»СЋР±РѕРіРѕ РЅР°СЃРµРєРѕРјРѕРіРѕ (РјСѓСЂР°РІРµР№, Р±Р°Р±РєР°-РєРѕСЂРѕРІРєР° Рё С‚.Рґ)
РњРѕРё РёСЃС…РѕРґРЅРёРєРё: РґР»СЏ С‚РѕРіРѕ С‡С‚РѕР±С‹ СЃРєР°С‡Р°С‚СЊ РєР»РёРєРЅРёС‚Рµ РЅР° Р±Р°РЅРЅРµСЂ СЃР°Р№С‚Р° Рё Р·Р°Р№РґРёС‚Рµ РІ СЂР°Р·РґРµР» РЈСЂРѕРєРё Adobe Photoshop

1. РћС‚РєСЂС‹РІР°РµРј РћСЃРЅРѕРІРЅРѕРµ РёР·РѕР±СЂР°Р¶РµРЅРёРµ: Р¤Р°Р№Р»-РћС‚РєСЂС‹С‚СЊ
2. Р’ РѕРєРЅРµ СЃР»РѕРё СЃРЅРёРјР°РµРј Р·Р°РјРѕС‡РµРє, РєР°Рє СЌС‚Рѕ СЃРґРµР»Р°С‚СЊ СЃРј. Р—РґРµСЃСЊ
3. Р•СЃР»Рё РЅСѓР¶РЅРѕ, РїСЂРёРґР°РµРј РёР·РѕР±СЂР°Р¶РµРЅРёСЋ РЅРµРѕР±С…РѕРґРёРјС‹Р№ СЂР°Р·РјРµСЂ: РР·РѕР±СЂР°Р¶РµРЅРёРµ-Р Р°Р·РјРµСЂ РёР·РѕР±СЂР°Р¶РµРЅРёСЏ (С€РёСЂРёРЅСѓ - РјРµРЅСЏРµРј, РІС‹СЃРѕС‚Р° - РјРµРЅСЏРµС‚СЃСЏ Р°РІС‚РѕРјР°С‚РёС‡РµСЃРєРё РёР»Рё РЅР°РѕР±РѕСЂРѕС‚ Рё Р¶РјС‘Рј OK)РЎР»РѕР№ РЅР°Р·С‹РІР°РµРј - В«Р¤РѕРЅ 
4. РћС‚РєСЂС‹РІР°РµРј РєР»РёРїР°СЂС‚ РќР°СЃРµРєРѕРјРѕРіРѕ: Р¤Р°Р№Р»-... <a href="https://www.liveinternet.ru/users/helene_p/post221096514/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>