PsLessonS Учебник Инструменты Обработка фото Эффекты Работа с текстом Дизайн Анимация Графика Фильтры Кисти Переводы терминов Фотошоп Online

Создаем анимацию похожую на Dendi или SEGA

В данном уроке по Фотошопу мы будем учиться создавать анимацию подобную той что мы наблюдали в играх Dendi или SEGA.

Примечание: урок под очень старую версию Photoshop CS2 (2005).


Вот примеры так называемых «Sprite sigs»:

Кто собственно, такие эти духи (sprites)? Духи-это изображения, которые показывают определенные действия, шаг за шагом. Как правило в одной последовательности: слева на право, в одном ряду. Где найти этих самых духов? Есть много вебсайтов, на которых они есть, в том числе и от различных видеоигр.


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

Нам нужна только часть изображения. Используя инструмент Rectangular Marquee Tool (Инструмент «Прямоугольная область» / Клавиша «M») выделите ту часть фона, которую бы вы хотели использовать для работы.

Скопируем выделение: Edit - Copy (Редактирование - Копировать / Сочетание клавиш «Ctrl+C»);

Создадим новый файл: File - New (Файл - Создать / Сочетание клавиш «Ctrl+N») - ok;

Создадим новый слой: Ctrl+Shift+N;

Вставим сохраненное выделение: Edit - Paste (Редактирование - Вставить / Сочетание клавиш «Ctrl+V»);

Теперь, когда у нас есть фон, нужно выбрать лист духов, который бы ему подходил.


Автор выбрал этот:

Выбирите линию действий, которые вы хотите, чтобы ваш Дух выполнил.

Теперь выберите одного Духа создав выделение и копируйте в документ с нашим фоном (Ctrl+C, открываете фон и Ctrl+V).


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

Вот работа автора со всеми выстроенными духами:

Ну что ж, пришло время открыть Imageready, это можно сделать кликнув на последнюю кнопку в панели инструментов (а можно и Ctrl+Shift+M):


Примечание: в новых версиях анимация создается в панели Window - Timeline (Окно - Шкала времени). Процесс создания анимации на примере Photoshop CC вы можете посмотреть в уроке - «Создание анимации в Photoshop CC».


Хорошо, как только вы откроете Imageready, вы должны увидеть окно animation.

В нем есть кнопка, дублирующая наше изображение, на изображении ниже она выделена красным квадратиком:

Создайте столько копий, с помощью этой кнопки, сколько у вас Духов.

У автора 6 Духов, поэтому он 5 раз нажал на кнопку (так как один слой уже есть).


Вот что у него получилось:

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


После того, как вы проделаете это с первым духом панель слоев должна выглядеть так:

Ну вот: у нас есть последовательность действий, сейчас нужно установить период времени, то есть Духи будут двигаться либо быстрее либо медленнее, зависит от того какой период вы поставите. Чтобы изменить скорость следует щелкнуть на маленькую стрелочку, которая расположена прямо рядом с показателем «0 sec.».

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


Автор выбрал период в 1 секунду.

Для того, чтобы проиграть ролик нажмите кнопки в панели анимации.

Сохраните файл как .gif (Ctrl+Shift+Alt+S).


Вот и все.

Финальный результат