Главная
Новости сайта
Рисование
Анимация
Теория
Обзоры аниме
Миры аниме


Чемпионат
Манга "Город"
Другая манга
Фан-Fiction
Пресса


Термины
Голосования
Поиск на сайте
Аниме - ссылки
Рассылка
Цветовая схема
Кнопка сайта

Прислать урок


Рисуем аниме!

Уроки рисования для начинающих. Основы gif-анимации в ImageReady. Паровозик.

отправить другу

Предисловие

В этой статье будет рассказано о том, как сделать анимированный gif в программе Adobe ImageReady cs2 (в дальнейшем - ImR). Статья рассчитана на тех, кто уже имел дело с графическими редакторами и имеет общее представление о том, как с ними работать.

Действия, описанные в статье, возможно не оптимальны и существуют другие варианты для выполнения того же самого - пробуйте и экспериментируйте. Не стоит считать все нижесказанное единственно верным способом, это всего лишь один из них ^^`

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

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

Сразу замечу о качестве картинки-примера. У меня нет планшета и лишнего свободного времени. Потому гифка нарисована в самом простом виде. Статья про анимацию, а не о том, как рисовать красиво ;)

Немного о формате Gif

  • Число цветов палитры - от 2 до 256.
  • Каждый цвет палитры имеет глубину 24 бита на 1 пиксел (выбор из 16 миллионов цветов).
  • Карта прозрачности - 1-битная (полупрозрачных цветов нет).
  • Число повторов анимации - от 1 до 65535, а также бесконечное.
  • Время показа одного кадра анимации - от 1/100 секунды до 655 секунд.
  • Число кадров анимации - неограниченно.

Цвета и палитра:

Формат gif поддерживает всего 256 цветов. Качество картинки зависит от применяемой палитры и исходного изображения. Обычно палитра выбирается при сохранении и оптимизации gifа. Но можно сразу выбрать палитру пользователя и использовать свой набор цветов.

Формат Jpeg, 16 миллионов цветов:
Gif 256 цветов локальная палитра:
Gif 128 цветов локальная палитра:
Gif системная Win и Web палитра:

Хотя с 256 цветами картинка и выглядит так же как с 16к, желательно избегать плавных переходов цветов. Так как в итоге на них могут появиться искажения.

Иногда полезно заранее решить какие цвета будут использоваться, и стараться применять только их (пользовательская палитра). Тоесть не использовать некоторые цвета с их оттенками вообще. Наличие искажений и шума в исходном изображении так же приводит к плохому качеству картинки и увеличению размера gifа. Потому желательно работать с оригинальными изображениями и не использовать уже сжатые изображения повторно. Если на используемой картинке есть шум и артефакты сжатия, то перед использованием их можно подчистить в Photoshop. Это касается того случая, когда кадры для гифки не нарисованы, а вытащены из видео или других картинок.

Анимация

Анимация это набор картинок-кадров сменяющих друг друга через заданный промежуток времени. Чем больше кадров, тем больше размер файла и более плавная анимация.

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

Много кадров на одно движение делать не стоит. Так как в итоге может не хватить скорости смены кадров даже с задержкой 0с. (не путать с общим числом кадров).

Например, для анимации вращающегося со средней скоростью колеса оптимальным будет 6 кадров.

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

Циклично повторяющиеся движения должны иметь кратное количество кадров. Не получится совместить два объекта, у которых некратное число кадров. Например, 5 и 3.

1234512345
12312*

При попытке вставить лишний кадр движение второго объекта будет задержано. Потому лучше сразу рисовать как 2/4 (2/6;3/6...) чтобы избавиться от последующих проблем совмещения.

Так же при создании анимации нужно сразу учитывать скорость движения объектов. Скорость объекта зависит от расстояния, на которое он переместится. Чем больше, тем интенсивнее получается движение. Нужно стараться рисовать все движения с учетом скорости, а не пытаться потом с помощью задержек между кадрами подобрать необходимую. Интервал смены кадров следует использовать для окончательной коррекции и вставки необходимых интервалов и пауз.

Если объект движется непрерывно, то движение должно быть отображено в каждом кадре. Многие неправильно поступают, вставляя промежуточные кадры, содержащие два соседних кадра, наложенных один на второй с полупрозрачностью. Движение в таком случае будет идти рывками. Все эффекты прозрачности, или проявления движущихся объектов, должны накладываться на само движение, а не вставляться после.

обычное движение:
правильно:
неправильно:

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

Прозрачность

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

Создаем gif`ку в ImR

Гифку можно создать из готовых кадров, вытащенных из видео, или чужих картинок с добавлением собственной анимации. Но мы будем делать гифку целиком в ImR.

Смотреть полноразмерное изображение

Вверху ImR находится меню. Под ним панелька с параметрами выбранного инструмента. Слева вертикальная панелька с кнопками инструментов, снизу окно анимации. Правые панельки выбрать по вкусу. У меня это Layers(Слои) и Swatches(цвета). Кнопкой с треугольником в кружке (панель Swatches) открывается меню, в котором можно выбрать палитру. На скриншоте выбрана Web Spectrum, но вы можете использовать любую другую. Панелька слоев требуется чаще всего, остальные панельки можно включать/выключать по мере необходимости (пункт меню Window(Окна)). Интерфейс ImR такой же, как в Photoshop. Потому проблем возникнуть не должно. Не забывайте периодически сохранять проект File - Save(Save as). Последнее действие может быть отменено Ctrl+Z. В меню Edit(правка) - Undo(отменить...)

Рабочее окно

Рассмотрим имеющиеся закладки:

  • Original - оригинальное изображение, на нём рисуем.
  • Optimized - сжатое, то что получится после оптимизации.
  • 2Up - две картинки для сравнения, оригинал и сжатое.
  • 4Up - 4 картинки с разным сжатием.

Последние 2 вкладки нужны при сохранении файла и оптимизации (вкладка Optimize в меню Window).

Слева внизу отображен масштаб (в данном случае 66,67%), увеличение картинки Ctrl++, уменьшение Ctrl+-

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

Окно анимации

Здесь расположены кадры. Под каждым из них время задержки (интервал между кадрами).

Кнопка внизу: Forever - анимация по кругу, всегда повторять. Once - 1 раз. Other - повторить заданное количество раз.

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

Стрелочки - выбор кадра влево/вправо.

Листик - добавить кадр.

Мусорный ящик - удалить кадр.

Под каждым кадром есть время задержи до отображения следующего кадра. На картинке 0,1 seс.

Щелкнув по нему можно выбрать из No delay - 0 sec, без задержки. Цифры - набор стандартных задержек. Other - ввести вручную.

Создаем рабочий файл

В меню нажимаем File(Файл), New(Новый) Ctrl+N, вводим параметры Width(Ширина) и Height(Высота) картинки. Первый слой оставляем White(белый) и жмем Ок. Лучше рисовать картинку в два или три раза крупнее, а потом уменьшить. Потому что на маленьком разрешении любые действия с изображением вносят больше искажений.

В данном примере на гифке изображено что-то типа паровозика )) Сам он будет стоять на месте, а вот колеса будут вращаться. Иллюзия движения будет создаваться за счет движущегося фона. Для вращения колеса мы будем использовать 6 кадров. Этого вполне хватит, чтобы передать вращение. Остальные объекты будут содержать 2 и 3 кадра.

Рисуем колесо

Так как на анимацию колеса выделено больше всего кадров, с него и начнем.

Если вы рисуете от руки, то на каждую деталь нужно создавать новый слой. Layer - New - Layer. Ctrl+Shift+N.

Мы же будем использовать фигуры. Каждая новая фигурка сама ложится отдельным слоем и кроме того ее можно легко редактировать. Изображения верхних слоев ложатся поверх изображений с нижних слоев. От порядка слоев зависит то, что будет видно в результате. Так же на видимое изображение влияет параметр слоя Opacity (прозрачность слоя). Эффекты прозрачности или проявления объектов можно создавать, изменяя данный параметр для каждого кадра. Для каждого кадра прозрачность и активные слои уникальны.

Выбираем черный цвет. Затем инструмент Pill Rectangle Tool(овалы/кружки) R. Вверху ставим галку Fixed Size(фиксированный размер) и вводим размер круга, например 70*70px (70 пикселей). Это позволит создать фигурку круга с заданным размером. Он будет четко круглый, что достичь рисованием от руки проблематично. Щелкаем на рисунок и добавляем черный круг. Изменяем цвет на темно серый. Выбираем тот же инструмент и ставим размер круга немного меньше, например 60*60. Добавляем второй круг. Вовсе не обязательно целиться в нужное место. Проще потом подвинуть. Выбираем Move Tool(перемещение) V и двигаем второй круг в центр первого. Двигать можно мышкой, а кнопками курсора на клавиатуре(стрелочки) можно подвинуть поточнее. Получаем серое колесо с черным ободом.

Выбираем Line Tool(линии) S, вверху ставим Weight(толщина) 6 px, выбираем черный цвет и рисуем вертикальную черную линию справа от кругов. Дело в том, что ImR пытается привязать один объект к другому, и это только мешает провести именно вертикальную прямую. Потому рисуем в стороне и сдвигаем в центр колеса. (Можно поискать в настройках и отключить автовыравнивание. Так же лучше отключить всплывающие подсказки, потому что они иногда мешают нажимать кнопки невовремя всплывая под курсором.)

На панельке инструментов выбираем Marquee Tool(выделение) M иначе трансформация не включится. Некоторые функции зависят от текущего инструмента.

Если линия вышла длинной или короткой, можно поправить ее с помощью Free Transform(свободная трансформация) щелкнуть по рисунку правой кнопкой и выбрать в менюшке, тянуть за края, когда появляются стрелочки. Так можно редактировать все фигурки или выделенный фрагмент картинки.

У нас получилась одна "спица". Будем добавлять ещё.

На панельке слоев выбираем слой с линией и создаем его копию (правой кнопкой мыши на слое открываем меню, выбираем Duplicate Layer(скопировать слой)). Выбираем Marquee Tool(выделение) M. Щелкаем правой кнопкой на рисунке и в меню выбираем Free Transform(свободная трансформация). Вверху в настройках инструмента вводим угол (Set rotation(поворот)) в 90 градусов. Жмем галку справа(применить). Теперь у нас крестик на колесе. Снова копируем текущий слой, но теперь поворачиваем на 45 градусов. Потом на -90. В итоге получится колесо со "спицами".

Добавляем противовес (красная штучка на колесе). Выбрав красный цвет, рисуем в стороне еще один круг 60*60px. (Должна существовать возможность перевести слой из векторного в растровый, но я её не нашел.) Потому создаем новый слой, перемещаем его под слой с красным кружком и объединяем оба слоя. Для этого выбираем слой с кружком, в меню Layer(Слои) Merge Down(слить с нижним) Ctrl+E.

Теперь можно выделить ненужную часть круга, и удалить лишнее, оставив только верх. Выделять можно несколькими способами, варианты находятся на этой же кнопке, просто подержать ее не отпуская. Самые нужные - это выделение прямоугольником, овалом и Poligonal Lasso Tool L. Используя фигуры и обрезая ненужное, вполне можно создавать простые объекты.

Сдвигаем полукруг на колесо и перемещаем текущий слой так, чтобы он был над слоем с серым кругом и под "спицами". Колесо готово ))

Так как слоев уже стало много, то проверяем, чтобы все было ровно. Ещё не поздно что-то подвинуть или укоротить/растянуть с помощью Free Transform.

Так же щелкнув на цветной квадратик (только на слое с фигуркой) можно сменить её цвет.

На слое:
Глаз - переключает видимый слой или нет.
Второй серый квадратик - можно связать два слоя вместе. Тогда они будут перемещаться вместе.
Черный квадрат - цвет фигуры, только для фигурок, на обычном слое нет.
Звено - переключает можно двигать фигуру или нет.
Перо - векторная маска для фигуры. Лучше не трогать ^^
Layer 6 - название слоя.

Если все хорошо, то объединяем слои с частями колеса вместе. Для этого выбираем самый верхний слой и жмем Ctrl+E или в меню Layer(Слои) Merge Down(слить с нижним). Но лучше сразу выучить клавиши быстрого вызова, меньше по меню щелкать придется ))

Повторить пока не останется 2 слоя, колесо и Background(фон). Объединять слои всегда нужно с самого верхнего. После этого получим картинку вместо фигур, тоесть растровое изображение вместо векторного.

Размножаем объект

Создаем новый слой и перемещаем его между картинкой и фоном. Проводим горизонтальную линию снизу, это будут рельсы, переименовываем слой в "рельсы". Сдвигаем колесо на свое место.

Так как слоев будет много, то лучше сразу переименовывать их в понятные названия. 2 раза щелкаем по названию слоя типа "Layer 1" и вводим свое понятное название, например "колесо 1". Создаем копию слоя с колесом 1. Переименовываем в "колесо 2".

Выбираем Free Transform и вносим угол 60 градусов. (круг 360/6 кадров).

Аналогично создаем еще 4 слоя, копируя последний созданный. Если скопируете предыдущий, то угол будет другой. Всего получится 6 фаз колеса наложенных друг на друга. Если какой-то слой уполз в сторону, то c помощью Move Tool сдвигаем на место.

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

Отключаем видимость верхних 5 слоев с колесами. Выбираем слой "колесо 1". Создаем 3 копии этого слоя. На каждом сдвигаем колесо в сторону, чтобы получился ряд из 4х колес.

Объединяем 4 слоя (тот, что был с колесом 1 и три только что созданных) в один слой. Включаем видимость слоя "колесо 2" и поступаем аналогично. Видимость слоя первого колеса не снимаем, так будет проще попадать, когда будете двигать колеса. Нужно стараться чтобы они совпадали один в один, иначе при вращении будет криво ))

Так поступаем для всех шести колес. В итоге получится 6 слоев с 6-ю фазами вращения, по 4 колеса в ряд на каждом слое.

Предварительная анимация

Теперь у нас есть колеса и можно посмотреть, как они будут крутиться. Для этого делаем все слои невидимыми. В окне анимации жмем листик - Duplicates current frame(создать новый кадр) всего должно быть 6 кадров. Теперь выбираем кадр 1 (щелкнув по нему) и включаем слои: "рельсы" "фон" и "колесо 1". Щелкаем на второй кадр, выбираем слой "рельсы" "фон" и "колесо 2" и т.д. для всех 6 кадров. После этого нажав кнопку Plays/Stops animation смотрим, что получилось ))

Смотреть полноразмерное изображение

Под каждым кадром есть время задержки. Чем меньше - тем быстрее кадры будут меняться. В нашем случае при остановленной анимации выделяем (с shiftом) все 6 кадров и ставим 0,1 sec. Но можно и по одному вручную.

Можно заметить, что уже при шести кадрах скорость небольшая. Выставив время в 0 sec можно посмотреть максимальную скорость. Если бы кадров было не 6, а 12 то колеса вращались бы в 2 раза медленнее, но более плавно. Но 10-12 кадров предел для такой скорости, вот потому и не стоит делать больше чем нужно.

Рисуем шатуны

Удаляем кадры из окна анимации, чтобы остался только первый. Включаем активным слой "колесо 1" отключив остальные. На отдельном слое рисуем цилиндр. Создаем линию и перемещаем на нужное место. На линию добавляем 3 кружка, по краям и по центру. Сливаем их со слоем линии. Это горизонтальный шатун.

Слои "шатун 1-1;1-2...1-6"

Включаем слой "колесо 2". Делаем копию слоя с шатуном. На созданной копии переместите шатун в нужное место ориентируясь по спице напротив противовеса. Так же сделать для всех шести фаз колеса.

Отключаем ненужные слои и возвращаемся к слою "колесо 1". На новом слое по аналогии рисуем вал цилиндра, делаем 6 копий, сдвигаем и дорисовываем на каждом наклонный шатун.

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

В итоге должно получиться вот так:

Смотреть полноразмерное изображение

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

Рисуем все остальное

Аналогично рисуем остальные объекты анимации на отдельных слоях. Так же рисуем корпус паровоза (все из тех же фигур объединяя слои) и прочее на своих слоях.

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

Окончательная анимация

Когда все нарисовано, на панельке анимации создаете нужное количество кадров. Выбираете нужный кадр и расставляя видимость и прозрачность слоёв "набираете" картинку для каждого кадра. То есть для первого кадра: 1 фаза колеса, 1 фаза шатуна, 1 фаза дым, 1 шпала, рельса, корпус, 1 фон. Для второго: 2 фаза колеса, 2 фаза шатуна, 2 фаза дым, 2 шпала, рельса, корпус, 2 фон. Для третьего: 3 фаза колеса, 3 фаза шатуна, 3 фаза дым, 1 шпала, рельса, корпус, 3 фон. Последующие кадры набираем аналогично. Слой корпуса паровоза и рельсы включен на всех кадрах.

Это неизменные детали.

Если же в гифке более 1 фона то, когда необходимо, переключаете на другие слои с вторым фоном и другой анимацией.

Оптимизация

Если вы рисовали в двойном размере, то нужно уменьшить картинку до нужного. В меню Image(Изображение) - Image size(размер изображения) ввести размер или %.

В рабочем окне выбираем Optimized.

Открываем вкладку Optimize в меню Window.

Смотреть полноразмерное изображение

В рабочем окне правее масштаба показан размер файла (104,1К). По нему можете ориентироваться.

Если там что то другое, то щелкнуть туда мышкой и выбрать Optimized Information.

Панелька оптимизации:

    Format (формат) - выбираем Gif.
    Color Table (палитра) - Perceptual или Adaptive (Сustom для пользовательской).
    Colors: количество цветов. 256 или меньше. Смотреть по качеству картинки и на размер файла.
    Dither: выключить.
    Transparency (прозрачность): включить.

Сохранение

В меню File - Save optimized as вводим название и сохраняем гифку.

Смотреть полноразмерное изображение

Неизвестный автор

Оцените статью: 1   2   3   4   5  
разработка и поддержка


© drawanime.gcmsite.ru 2006-2016
Все права защищены
Перепечатка материалов сайта запрещена!


Учимся рисовать мангу и аниме


Рисование ступней



Построение фигуры человека



Рисование головы и лица



Теория


Книги по рисованию



Стандарты видео