Покадровая анимация в фотошопе. Создание оригинального персонажа в Adobe Photoshop
В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.
Программа: Adobe Photoshop Сложность: новички, средний уровень Понадобится времени: 30 мин – час
I. Настройка документа и инструментов
Шаг 1
Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.
Шаг 2
В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.
Шаг 3
Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.
Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.
Шаг 4
В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.
В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.
II. Создание персонажа
Шаг 1
И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.
Сделайте эскиз вашего персонажа с четким контуром, стараясь, при этом, не перегружать его мелкими деталями. На данном этапе цвет не имеет никакого значения, главное, чтобы контур был четко прорисован, и вы понимали, как будет выглядеть персонаж. Вот такой эскиз был подготовлен специально для этого урока.
Шаг 2
Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.
Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.
Шаг 3
Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).
Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.
Шаг 4
Когда контур будет готов, можно выбрать основные цвета и раскрасить большие формы. Делайте это на отдельном слое под контуром.
Шаг 5
Сгладьте контур, дорисовывая тень по внутреннему краю.
Продолжайте добавлять тени. Как вы могли заметить по ходу рисования некоторые формы можно подправить.
Шаг 6
Создайте новый слой для бликов.
Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.
Дорисуйте картинку, а затем скопируйте и отзеркальте готовую половинку рисунка, после чего объедините слои с половинками, чтобы получился цельный рисунок.
Шаг 7
Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).
Теперь персонаж готов к анимации.
III. Анимирование персонажа
Шаг 1
Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.
Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).
Шаг 2
Теперь согните руки и ноги персонажа так, как будто он бежит.
● Выделите левую руку инструментом Lasso
● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.
● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.
● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.
Шаг 3
Теперь вам нужно перерисовать начисто новую позицию рук и ног так, как было показано во втором разделе этого урока. Это нужно для того, чтобы изображение выглядело четким, ведь трансформация сильно искажает пиксельные линии.
Шаг 4
Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.
Шаг 5
Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.
На временной шкале сделайте следующее:
- Установите задержку времени в 0,15 сек
- Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
- Установите цикл повтора Forever
Шаг 6
Чтобы выбрать нужный слой для каждого кадра нажмите иконку Eye возле названия слоя на панели слоев. Порядок должен быть такой:
Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.
В этом уроке Вы узнаете, как нарисовать персонажа и ознакомитесь с мини обзором планшета Intuos 5 Medium.
Данный урок родился на волне эйфории приобретения мной планшета Wacom Intuos5 Medium. Это планшет с размером рабочей поверхности ~A5 и рекордной чувствительностью пера к давлению и наклону. 2048 уровней давления и 60 градусов наклона. Пропорции – 16:10. Это широкоформатка, которая идеально подошла моему монитору. У кого монитор 4:3, придется в настройках «отрезать» часть активной области планшета, чтобы сохранить корректные пропорции.
Вы наверное представляете какая буря эмоций у меня была по поводу приобретения. Т.к до этой таблетки я работал на стареньком Bamboo, который был приобретен, если не изменяет мне память в 2007-2008 годах, а может и раньше. И что уж, не буду врать, я даже touch ring’ом тогда не пользовался. Т.к. оно было ужасным по чувствительности и не понимало, когда я пытался, например, увеличить картинку, водя пальцем по нему. Срабатывало через раз, если не реже. Но свой планшет от Wacom я любил и сильно не хотел расставаться с ним.
Радость у меня была еще из-за того, что имел «удовольствие» поработать на других планшетах, даже фирмы не хочу писать. Ужас, просто ужас. Возвращаемся к тому моменту, когда у меня появился Intuos. Настроил я его и погрузился в мир профессионального оборудования. Ну что Вам сказать друзья, товарищи?! Читайте ниже, буду все описывать. И еще, я – не профессиональный художник. В смысле не обучался этому. Самоучка и могу делать что-то не так как надо. Не придирайтесь сильно.
Урок предназначен для людей, минимально понимающих, как у фотошопа переключаются кисти и где ластик, каких-то супер-приемов я не покажу. Просто покажу этапы создания персонажа.
Часть 1. Эскиз:
Возьмем за аксиому то, что изначально у нас уже известно в каком ракурсе и какого размера будет наш герой. И учитывайте, друзья, что вас, возможно, попросят разработать таких персонажей десятки. Мы же будет рассматривать только одного. А то это затянется надолго.
Я начинаю разработку персонажей или раскадровку анимации всегда с эскиза. Это обязательно, особенно если проект не собственный, а работаешь на кого-то. Клиенту нужно понять, уловил ли ты смысл его идеи или нужно еще проработать детали и поправить ракурс.
Мы будем делать с вами персонажа для гипотетической игры казуального фентезийного плана. А героя в таком стиле как чиби. С некоторыми вольностями.
Сперва нарисуем вот такую болванку. Думаю, не сложно будет нарисовать такого чубрика. Если все же возникли какие-то трудности, на каком- то из этапов. Берите за основу любой из набросков ниже. И пробуйте, пробуйте. Только так можно чего-то достичь.
Далее делаем более проработанный эскиз и еще одна небольшая хитрость, которую я применяю для будущей анимации. Сразу разрезаю персонажа на отдельные части, смотри рис. 2. Только я так делаю, если изначально известно, что игра будет делаться в растровой графике, не переводится в векторную.
Как выглядят слои. Не забывайте именовать их.
Это просто болванка, которая ни о чем нам не говорит. Ни о характере персонажа, ни о том, какой класс он представляет. Будем предполагать, что у нас по Тех. Заданию. главный герой воин. Т.к. его проще анимировать, у него нет особых эффектов. Бойца проще нам рассмотреть для простоты понимания основных шагов.
Давайте прикинем, какое лицо может быть у персонажа и его шлем. Т.к. обычно можно отдельно шлем не рисовать, если только его не надо анимировать или головной убор должен меняться по игре. А мы с вами и будем исходить из того, что шлем у нас вместе с головой анимироваться будет.
Мы с вами помним, что по нашему тех.заданию у нас будет графика растровой. Это дает нам возможность сделать более тонкую прорисовку деталей. И я для себя на этом этапе создаю СЛОЙ РАСТУШЕВКИ, где находится вся штриховка. Слой, который располагается отдельно от контура. Чтобы потом не мешал покраске объекта. Чтобы было понятнее, как получается у меня персонаж. И если говорить откровенно, так проще утвердить у заказчика. Т.к. не многие люди могут представить болванку с тенями, а здесь все выглядит более симпатично для глаз.
Немного отдохнем от Главного Героя и вспомним, в предисловии я писал, что приобрел Intuos5 Мedium и у меня есть пару слов, что сказать по этому инструменту. Как раз это чувствуется при проработке мелких деталей и штриховке.
Когда я работал на старой таблетке, у меня при большом увеличении картинки видно было, что перо попадает не в тот пиксель, на который я нацелился. Но с годами я настолько привык к этой маленькой неточности, что уже не замечал этого. А сейчас при том же масштабе, куда бы я ни метился, всегда перо попадает туда куда нужно, пиксель в пиксель. Изначально это даже создало для меня некоторый дискомфорт. Я-то привык к неточности.
Теперь же это настолько райское ощущение контроля над рисунком, что сложно передать словами и объясняется такой характеристикой планшета, как разрешение, которое у Intuos5 составляет 5080 линий на дюйм, а в стареньком Bamboo была в 2 раза ниже – 2540 lpi.
Возвращаемся к персонажу. Сзади шлема я нарисовал плюмаж, который позже я тоже отрежу отдельно, для анимации. Это создаст более интересные возможности для движения.
Если я рисую персонажа для игры, то стараюсь избегать острых углов в графике, так как мягкие линии не вызывают агрессии и отторжения образа у пользователя. А мы рисуем не предмет искусства, и на нашего персонажа люди будут смотреть не одну минуту, и не пять, если повезет, то часами. И у человека не должно оставаться отрицательных впечатлений от своего Альтер эго.
Чтобы было удобно вам работать с увеличенным изображением, можно создать окно, которое будет показывать уменьшенную копию вашего рабочего листа. Заходим в окно à упорядочить à новое окно для… (название вашего документа). На английском я не помню, как называются пункты. Но находятся именно там же смотри рис.5
В итоге у меня рабочие окна выглядят так. В центре я рисую, а справа вверху висит уменьшенная копия персонажа.
В итоге у нас с вами должен получится примерно такой шаблон нашего персонажа.
Как видите, продолжаем рисовать на разрезанных частях, а не на одном слое. Конечно можно и на одном, но потом если нужно будет анимировать. Все равно будете разрезать картинку, и дорисовывать недостающее.
Часть 2. Цвет и настройки планшета.
Начну эту часть с того, что расскажу, как я настроил планшет. Наверное, есть более удобные раскладки. Я сделал так под себя. Настраивать в Intuos5 Medium можно 8 клавиш Express Keys и сенсорное кольцо Touch Ring. В свойствах планшета Wacom можно поставить настройки для каждого приложения отдельно. Это ооочень удобно. Первым делом я настроил Photoshop и chrome)))). Покажу настройки шопа.
На touch ring я повесил увеличение масштаба и увеличение кисти. На кольцо можно повесить четыре действия. Но я два отменил. Может позже что-нибудь добавлю.
С чего начинается разукрашивание нашего персонажа? Это подбор оптимального цвета.
Я сделал два набора цвета. Иногда приходится делать много наборов. Т.к. задание бывает размытым. И приходится искать. Мы же с вами рассмотрим два варианта. Светлый персонаж и темный.
Не страшно, что покрашено коряво. Главное показать наборы и выбрать цвет. Я для нашего урока выбираю более темного героя с рисунка №10. Т.к. считаю, что на нем более ярко можно показать узоры на броне.
Начиная покраску, сначала заливайте все основным цветом. И выделите контур, т.к. человечек будет мелким в игре и не должен сливаться в обстановкой. И на стадии покраски, я отделю плюмаж от шлема (хвост красный). Т.к не сделал этого ранее.
Персонаж, обведенный контур, и поправленные кривые линии.
Когда начинаете красить, сначала разложите цвета без тени и света
Послесловие
В резюме к уроку я могу сказать, что кто-то нарисует лучше, кто-то немного хуже. Кто-то вообще делает по-другому своих персонажей. Мой же урок я затеял, как вы помните, с целью немножко рассказать о планшете, на котором теперь работаю. Надеюсь, вам хоть толика моей радости передалась, если так, то я был очень рад. Ну и конечно же я хотел показать тем, кому интересна тема, как я создаю персонажей в стиле чиби.
Сколько времени я потратил бы на прорисовку деталей, контуров и теней без точного и чувствительного к давлению пера таблетки, я представить боюсь. На этого персонажа я потратил два дня. И то потому, что писал урок.
В следующем уроке я расскажу, как анимировать наш персонаж во флеше. И вам домашнее задание. Нарисуйте меч к этому персонажу. Или топор. Т.к. я буду использовать оружие в анимации. Добрых дней. И до свидания!
Детали урока
- Приложение: Adobe Photoshop
- Сложность: Продвинутый
- Время на урок: 2 часа
Превью финального изображения
На этом уроке по фотошопу, мы объясним как нарисовать мультяшного монстра. Давайте начнем! Этот урок является совместной работой с талантливым дизайнером Bei Hasan.
Перед тем, как начать: проведите исследование
Для этого проекта, клиенты запросили, чтобы персонаж был смешным Суданским монстром. Чтобы начать наш первый шаг сделайте некоторые исследования. Один из самых заметных персонажей можете найти в Wayang Golek. В Wayang Golek, очень много смешных и симпатичных персонажей названых Si Cepot. Вы можете легко найти очень много ссылок на Si Cepot немного по Гуглив.
Наш персонаж будет походить на Cepot, с заношенной Сарунгой на грудной клетке. Суданская Сарунга обычно имеет клетчатый узор, как на изображении ниже.
Шаг 1: Набросок и обводка
Наш первый шаг – это начертить набросок. Приготовьте бумагу и карандаш. Традиционный способ всегда быстрее. Даже такой мощный инструмент, как Wacom, никогда не заменит карандаш и бумагу. Начните чертеж персонажа с туловища. Возьмите карандаш жесткостью HB, чтобы сделать тонкие линии.
Шаг 2
Дайте большей отчетливости персонажу, используя карандаш 2B.
Шаг 3
Отсканируйте набросок, используя очень большое разрешение и затем откройте его в Photoshop. Нажмите Ctrl+L чтобы открыть диалоговое окно Уровни (Levels) и затем двигайте бегунок до тех пор, пока все края не станут черными.
Шаг 4
Активируйте инструмент Кисть и откройте Панель кистей. Уменьшите расстояние и активируйте Динамичные формы (Shape Dynamic). Установите ее на Давление Пера (Pen Pressure), чтобы кисть получила эффект суживания, основываясь на том, какое давление мы используем во время рисования.
Шаг 5
Создайте новый слой. Обводку и зачистку мы проделали ранее.
Ниже вы можете увидеть суживающий эффект, сделанный параметрами Динамичной формы в панели кисти.
Шаг 6: Сарунг
Здесь поработаем на его Сарунгой (одеждой). Сохраняйте слои упорядоченными, хорошая идея для этого использовать группы слоев. В напели слоев, сделайте новую группу слоев и назовите ее “Sarung”. С этого шага и далее, помещайте все ваши изображения в новый слой внутри этой группы.
Выделите Сарунг на его груди, щелкнув Волшебной палочкой (Magic Wand tool). Если ваше выделение выходит за пределы сарунги, это значит у вас есть не соединенные линии на сарунге и для начала вам нужно это устранить. Елси вы не можете выделить всю сарунгу за один раз, вам необходимо добавить больше выделений зажав клавишу Shift и щелкая по области, которую необходимо выделить.
Шаг 7
Мы хотим убедиться, что наше выделение немного больше и не имеет ни какой бреши между выделениями и его линиями. Пройдите в Выделение – Изменить – Увеличить (Select – Modify – Expand), увеличьте выделение на 1 пиксель. Установите основной цвет на #daccba.
Создайте новый слой и поместите его под наброском. Активируйте инструмент Заливка (Paint Bucket tool) и щелкните внутри выделенной области, чтобы залить ее.
Шаг 8
Активируйте инструмент Кисть. В панели кисти, уменьшите ее Жесткость (Hardness) и Колебание размера (Size Jitter) на 0%.
Шаг 9
Нарисуйте темную тень на его сарунге. Не нужно беспокоится, если результат получился грубоват.
Шаг 10
Пройдите в Фильтр – Размытие – Размытие по Гауссу (Filter – Blur – Gaussian blur), чтобы смягчить тень.
Шаг 11
Удалите ненужные тени за пределами сарунги.
Шаг 12
Повторите этот шаг еще раз, чтобы добавить тени.
Шаг 13
Начертите полоску внутри сарунги, чтобы добавит узор.
Шаг 14
Удалите ненужные полосы за пределами сарунги.
Шаг 16
Нарисуйте черным цветом линии на сарунге, используя Кисть с жесткостью 100%. Уменьшите непрозрачность до 10%.
Шаг 17
Нарисуйте тень от головы.
Важное примечание. Если вам нужно быстро создать простейшую Анимацию из нескольких кадров в Фотошопе, перейдите на урок - .
Я довольно-таки давно интересуюсь покадровой анимацией, хотя и изучила мало материалов. Все книги, которые я начинала читать, довольно длинные, трудные и «сухие».
Поэтому после того, как я стала чуть-чуть понимать технологию создания анимаций, я начала искать способы их воплощения в жизнь при помощи Фотошопа.
Многие советовали мне переходить на другие программы (например, TVP Animation Pro ), но я, не желая подстраиваться под новые интерфейсы других программ, решила делать всё в Фотошопе.
А этот урок я написала специально для тех, кто не понимал технологию создания покадровых анимаций конкретно в Фотошопе. Кто не хотел чуть-чуть покопаться и понять, что к чему.
Я затрону две темы: короткие анимации и длинные. Не стоит пролистывать неинтересный вам тип анимаций: там может быть информация, которая вам пригодится для анимаций нужного вам типа.
Короткие анимации – это анимированные аватарки, смайлики и т.д.
Длинные анимации – это мультфильмы, видео и т.п.
Сначала я расскажу теорию, а затем мы создадим анимацию на практике.
Важное дополнение
Многие спрашивают: «Почему моя анимация такая дёрганная, мой персонаж/объект быстро/медленно двигается?»
Отвечаю: ваш персонаж/объект двигается быстро
, потому что вы нарисовали мало
кадров.
Ваш персонаж/объект двигается медленно , потому что вы нарисовали много кадров.
Ваш персонаж/объект дёргается, потому что вы не проследили за предыдущим движением и нарисовали следующее, которое не согласованно с предыдущим.
Запомните: в одной секунде 24 кадра!
Поэтому, когда вы соберётесь создавать свою анимацию, помните: 24 кадра = 1 секунда, 24 кадра = 1 секунда. Никогда не забывайте об этой очень важной детали.
Короткие анимации
Я думаю, вы часто сталкивались с анимациями на аватарках, с анимированными смайликами.
Некоторые смайлики сделаны во Flash’e
, но свои я рисую в Фотошопе. Не стоит думать, что такие короткие анимации делать легко. С одной стороны – да, они небольшие по размеру, но с другой – пока отрисуешь эти 15
-30
кадров, замаешься (а представьте, если вы хотите создать трёхминутный клип, то вам придётся делать 4320
кадров!).
Что вы должны помнить и знать?
Допустим, вы захотели нарисовать себе на аватарку девушку с развевающимися от ветра волосами. Значит:
Во-первых, волосы это вам не картон – под воздействием ветра средней силы они будут являться поперечными волнами.
Примерно так это показано на схеме:
Под воздействием сильного ветра волосы будут почти прямыми, но вашему персонажу придётся сильно зажмуриться и схватиться за что-нибудь, чтобы его не сдуло, так как в реальности такой ветер мало кто способен вынести. хотя такой тип анимации можно использовать, когда ваш персонаж едет на велосипеде, например.
И, наконец, слабый ветерок аккуратно приподнимает и опускает волосы.
Слабый ветер:
Средний ветер:
Всё то же самое относится к ткани и одежде - они будут вести себя примерно так же, как и волосы.
А теперь, например, вы захотели нарисовать анимацию с движением своего персонажаобъекта. значит:
Во-вторых, любое действие с чего-то начинается. Вы никогда не замечали, что, например, чтобы встать со стула, вы его сначала чуть-чуть отодвигаете, и немного наклоняетесь вперёд, а только потом уже встаёте? или, что захотев сделать удар ракеткой вы сначала её отводите и поворачиваетесь корпусом вместе с ней, а только потом делаете удар?
Таких примеров можно привести огромнейшую кучу, но лучше посмотреть:
Чтобы не попасть впросак с этими движениями перед действиями (ДПД), чаще анализируйте и наблюдайте за движениями людей или животных.
Небольшое дополнение
В общем, никогда не забывайте о физике. Вес объектов, материалы, из которых они сделаны (упругость, мягкость, жёсткость и т.п.), всё это нужно.
Поймите, что без этого ваша анимация будет мёртвой, ужасной и некрасивой!
Лучше поработайте над ней и никогда не спешите.
Длинные анимации
Ооо, вот тут-то и начинается всё самое интересное!
Частенько ли вы, смотря мультики или аниме, восхищались анимацией и завидовали тем, кто умеет их делать? Все эти прекрасные сцены, пластика движений и мн. др.? Я честно признаюсь - да. Каждый раз, когда я что-то смотрю, я пытаюсь понять, как же аниматоры с этим работали? Как они всё это создавали?
Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.
И знаете, я ведь нахожу ответы на все свои вопросы!
Но давайте будем разбирать всё по порядку.
Процесс создания длинной анимации
1. Изначально нам нужна ИДЕЯ
Например, вы решили сделать небольшой клип, в котором будут танцевать несколько девушек.
Если вы матёрый художник-аниматор, вы можете в своём клипе «заставить танцевать» от 3 и более девушек.
Но в начале своего пути аниматора лучше ограничиться одной-двумя.
2. Теперь вам необходимо составить раскадровку по сценам (РПС)
Что это такое, и с чем её едят?
Представьте себе фильм. Теперь представьте кол-во различных видов из разных камер. Крупный план, пейзаж, камера, следующая за персонажем...
Ладно, когда их не так много. Но когда мы делаем целый клип их может быть больше 30
штук!
Поэтому умные дяденьки и тётеньки аниматоры пользуются такой прекрасной штукой, похожей на расчерченную книжечку.
В ней они изображают сцены.
Только одни рисуют в каждом отсеке таблицы одну сцену, потом другую, третью и т.д., а другие рисуют в каждом отсеке таблицы изображения через несколько секунд (извиняюсь, если непонятно объяснила).
Очень удобно и то, что можно делать сбоку описания, а то, бывает, нарисуешь, потом через некоторое время посмотришь, и не поймёшь - что это я тут изобразила?
Так что берём себе на заметку такую раскадровку по сценам и пользуемся такими книжечками.
Можно даже не делать книжку, а просто создать большой файл в Фотошопе и там все сцены отрисовывать.
3. Теперь вам нужно придумать фон, концепт персонажей и движения
Движения рисуем в книжечке РПС.
Если у вас не одна сцена в клипе, то придётся рисовать несколько разных фонов. Рисуйте их в отдельных файлах.
И запомните одну вещь - фон не появляется из ничего. Так что если вы хотите, чтобы камера как бы отъезжала вбок, то фон там тоже должен быть. т.е. придётся рисовать фон по длине (или по ширине, а может и по тому, и по другому) больше.
Затем вы продумываете внешний вид вашего персонажа и начинаете создавать анимацию.
От теории переходим к практике
Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24 -72 -кадровой анимации.
Что ж, начнём!
1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.
2. Теперь, если у вас нет внизу слева окна «Анимация », смотрим наверх, открываем вкладку «Окно » - «Анимация ».*
* - В примерах используется русифицированная версия Photoshop CS2 .
На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:
Всегда/однажды - выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная - где показан принцип ДПД, воспроизводимая один раз - где показана смена сцен).
Выберите первый кадр - возвращает нас к самому началу.
Выбирает предыдущий кадр - не будем звать Кэпа. (=
Играет анимацию/Останавливает анимацию - Play/Stop.
Выбирает следующие кадры - следующий кадр. Ваш Кэп!
Tweens кадры анимации - с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.
Дублирует выбранные кадры - не совсем верное название... Лучше бы было «Добавление нового кадра».
Удаляет выбранные кадры - корзина.
3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).
4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.
4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.
Создаём новый кадр, и... Тут есть два варианта:
А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..
Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).
Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).
Вариант А:
1. Мы нарисовали наш первый кадр.
2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.
3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.
Вариант Б:
1. Создаем кадр с персонажем и делаем этот слой невидимым.
2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.
3. Теперь делаем второй слой видимым и начинаем его изменять.
Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.
5. Сидим, рисуем кадров 10 -15 ...
6. И смотрим, что получилось.
Получился бегущий кролик.
Причём ни одна его часть не скопирована: каждый кадр нарисован заново.
Смотрите сами:
В процессе создания анимации следует помнить, что довольно-таки трудно переключаться между сотней слоёв, и поэтому не стоит откладывать покраску или изменение чего-либо на потом. Делайте сразу.
Почти конец
Выше я оговорилась об инструменте ().
Пользоваться им стоит тогда, когда вы например, хотите отдалить камеру, приблизить её, повернуть и т.д. (Если вам нужно только переместить фон, воспользуйтесь видео-редакторами, вам же будет легче). Не стоит пользоваться искажением, наклоном и другими инструментами трансформации без надобности.
И, после того, как мы сохранили нашу gif
-анимацию как видео файл формата .avi
, например, можно смело идти в Киностудию Windows Live
.
Там уже делайте с вашим клипом всё, что душе угодно.
А затем вы можете загрузить свой клип на youtube.com и наслаждаться проделанной работой.
Всем БОЛЬШОЕ СПАСИБО за внимание, с вами была Lero-art. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения...
Но, надеюсь, вы почерпнули для себя что-то новое и интересное!
В этом уроке мы будем рисовать необычного персонажа. Однако урок отличается от тех, что мы обычно публикуем. Здесь нет детальных описаний техник, зато доступно рассказано о том, какие этапы нужно пройти для создания такой иллюстрации. Настоятельно рекомендуем не пытаться повторить шаг за шагом урок, а работать по этим же шагам, но с собственной иллюстрацией, используя урок как руководство и источник вдохновения.
Результат
Шаг 1
Создаем новый документ. Размер выбирайте по своему усмотрению, однако старайтесь сохранить примерно квадратные пропорции.
Шаг 2
Давайте убедимся в том, что включены параметры Shape dynamics/Динамика формы и Transfer/Передача.
Шаг 3
Для начала создадим вспомогательные линии и линии движения, на базе которых создадим тело персонажа.
Шаг 4
Прорабатываем детали все еще на этапе наброска.
Шаг 5
Создаем новый слой и работаем в нем уже как в чистовике.
Шаг 6
Добавляем серый фон, который поможет нам работать со светом, так как по задумке изображение должно быть темным.
Шаг 7
На этом этапе мы корректируем линии, которые кажутся нам неидеальны и добавляем детали, возможно какое-то описание, историю, дополняющие картину.
Шаг 8
Добавляем базовые цвета.
Шаг 9
Укажите слою с наброском режим наложения Multiply/Умножение и настройте прозрачность так, чтобы вы видели лини как ориентир.
Шаг 10
Выбираем слой с цветом для лица и рисуем блики и тени.
Шаг 11
Создайте новый слой поверх оригинала и, удерживая клавишу ALT кликните между слоями. Верхний слой станет обстравочной маской для нижнего. Теперь вы можете спокойно рисовать в этом слое, не боясь испортить контур.
Шаг 12
Убедитесь, что у каждой части тела есть своя группа слоев. Следите за тем, чтобы система слоев была четко организована.
Шаг 13
В этом шаге мы можем корректировать детали и пропорции тела, которые нравятся нам меньше, или теперь выглядят иначе.
Шаг 14
Если вы хотите добавить деталей, которых не было в наброске, найдите референсы, чтобы четко понимать что именно вы хотите нарисовать.
Шаг 15
Шаг 16
Чтобы произвести цветокоррекцию новых деталей, создайте новый слой в режиме Multiply/Умножение, сделайте его обтравочной маской для оригинального слоя, выберите цвет из вашей палитры, подходящей к той части, которую редактируете, и рисуйте.
Шаг 17
Добавляем дополнительных деталей, не выходя за пределы нашей палитры.
Шаг 18
Повторяем предыдущие шаги там, где хотим добавить деталей.
Шаг 19
Таким же образом работаем над ногами: корректируем цвет и добавляем деталей.
Шаг 20
В процессе рисования у вас может появиться желание переделать какие-то части рисунка. В нашем случае это меч.
Шаг 21
Добавляем завершающие детали.
Шаг 22
Убедитесь что вы закончили редизайн того, что хотели переделать, и движемся дальше.
Шаг 23
В этом шаге мы займемся свободным рисованием: без набросков, просто кистями, учитывая, естественно, цветовую палитру изображение.
Шаг 24
Убедитесь что не вылетели за пределы цветовой палитры, и переходим к следующему шагу.
Шаг 25
Несколько дополнительных эффектов для создания антуража.
Шаг 26
Отключаем слои с персонажем и беремся за фон. Делаем свободные штрихи на темном фоне, чтобы выделить персонажа.
Шаг 27
Помещаем все слои в папку под соответствующим названием и применяем Photofilter/Фотофильтр.
Шаг 28
Температура цвета с фотофильтром становится равномернее во всей работе.
Шаг 29
Дайте волю творческим порывам и добавьте необычных деталей.
Шаг 30
Чтобы сделать цвета и температуру цвета более компактными, создаем новый слой в режиме Multiply/Умножение, и в нем доабвляем оттенков цветом, который наиболее превалирует в изображении.
Шаг 31
Теперь мы папку со всем, что у нас есть. Дублируем ее и объединяем все в один слой. Отключаем видимость оригинальной папки, но сохраняем ее.
