Как создать персонажа в фотошопе. Уроки фотошопа. Создание персонажа в фотошопе. III. Анимирование персонажа

Важное примечание. Если вам нужно быстро создать простейшую Анимацию из нескольких кадров в Фотошопе, перейдите на урок - .

Я довольно-таки давно интересуюсь покадровой анимацией, хотя и изучила мало материалов. Все книги, которые я начинала читать, довольно длинные, трудные и «сухие».

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

Многие советовали мне переходить на другие программы (например, 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. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения...

Но, надеюсь, вы почерпнули для себя что-то новое и интересное!

В этом уроке Вы узнаете, как нарисовать персонажа и ознакомитесь с мини обзором планшета 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. Т.к. считаю, что на нем более ярко можно показать узоры на броне.

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

Персонаж, обведенный контур, и поправленные кривые линии.

Когда начинаете красить, сначала разложите цвета без тени и света

Послесловие

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

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

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

В этом уроке вы узнаете, как в Photoshop создать забавного 3D-персонажа, используя несложные техники и приемы.

Шаг 1. Создаем новый документ размером 3000 х 2500 пикселей разрешением 300 точек на дюйм. Берем Pen Tool (Перо) (P), выбираем режим Shape Layer (Слой-фигура) и создаем базовую форму персонажа. Называем этот слой "Основа" и меняем цвет на #71d0e8 .

Шаг 2. Перед тем, как продолжить, давайте настроим панель слоев. Кликаем в правом верхнем углу панели, чтобы открыть меню. Выбираем Layers Panel Options (Параметры панели слоев) и в появившемся окне устанавливаем следующие настройки:

Шаг 3. Создаем новый слой, зажимаем CTRL и кликаем по миниатюре слоя "Основа", чтобы загрузить его выделение. Берем мягкую кисть (В) цветом #118ab2 и создаем тень в левой части персонажа.

Шаг 4. Снова создаем новый слой, устанавливаем цвет переднего плана на #1e8cb4 и начинаем рисовать тень по краю основы.

Шаг 5. Берем мягкую кисть цветом #44b3d7 и рисуем по левому краю персонажа свет. Для того, чтобы быстро выбрать необходимый оттенок, можете воспользоваться пипеткой (I).

Шаг 6. Теперь мы определим основные детали персонажа, для этого берем мягкую кисть цветом #064168 и начинаем рисовать контур рта.

Шаг 7. Берем Pen Tool (Перо) (Р), меняем режим на Shape Layer (Слой-фигура) и создаем базовую форму рта на слое "Рот". Меняем цвет на черный.

Шаг 8. Определившись с расположением рта, нарисуем губы. Для этого, с помощью пера (Р) создаем базовую форму верхней губы цветом #00406c на слое "Верхняя губа". Добавляем тени для большего реализма.

Шаг 9. Таким же образом создаем нижнюю губу цветом #4aabce . Добавляем теней и свет, чтобы добавить глубины.

Берем Pen Tool (Перо) (Р), меняем режим на Path (Контур) и создаем складку под нижней губой. Жмем CTRL+ENTER , чтобы создать выделение, берем мягкую кисть цветом #17749 a и рисуем по краю выделения. Добавляем тени и свет. Если все сделано правильно, результат будет таким.

Шаг 11. Теперь мы создадим глаза. Рисуем базовую форму глаза и заливаем ее белым цветом. Называем этот слой "Правый глаз". Удерживая CTRL, кликаем по миниатюре слоя, чтобы загрузить его выделение, берем мягкую кисть (В) цветом #237a9c и рисуем тени вокруг глаза.

Шаг 12. Создаем новый документ для радужки. Берем Ellipse Tool (Эллипс) (U) и создаем окружность. Меняем ее цвет на #4dc9df и применяем стиль слоя Inner Glow (Внутреннее свечение) с такими параметрами. Называем слой с окружностью "Радужка".

Шаг 13. Создаем еще одну маленькую окружность черного цвета, располагаем ее в центре радужки и называем слой "Зрачок". Берем кисть (В), устанавливаем цвет переднего плана на #006082 , затем открываем в Photoshop кисти SS light beams и создаем текстуру радужки. Применяем фильтр Filter - Blur - Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) с радиусом 2.5 пикселей, чтобы сделать текстуру сглаженной. Выбираем черную окружность и применяем к ней этот фильтр с радиусом 20 пикселей.

Шаг 14. Группируем все слои и импортируем на основной рабочий документ. Меняем цвет переднего плана на #e6deb5, берем мягкую кисть и рисуем по краю глаза, чтобы добавить немного желтизны. Меняем цвет на #d8cea6 , открываем в Photoshop кисти Veins и рисуем капилляры внутри глаза. Называем этот слой "Капилляры".

Шаг 15. Теперь добавим веко на глаз. Для этого создаем основу цветом #00b7d6 . Дублируем (CTRL+J) слой с веком и меняем цвет копии на #007da1 . Добавляем на копию маску, кликнув внизу панели слоев на кнопку Add layer mask (Добавить слой-маску), берем большую мягкую кисть черного цвета размером 250 пикселей и рисуем ею по центру века, чтобы освободить его светлую часть.

Шаг 16 . Добавляем больше теней внутри и снаружи века мягкой кистью размером 100 пикселей и цветом #0e5a79 . Меняем цвет кисти на #00425d и рисуем контур века. Далее, зажимаем CTRL и кликаем по миниатюре слоя с созданным элементом, чтобы загрузить его выделение и создаем новый слой. Рисуем свет на верхней части созданного контура мягкой кистью размером 100 пикселей и цветом #236e8b .

Шаг 17. Теперь добавим на контур свет. Для этого берем Pen Tool (Перо) (Р) в режиме Path (Контур) и создаем линию, как на скриншоте ниже. Затем активируем кисть (В) и настраиваем ее: размер 2 пикселя, белый цвет и hardness (жесткость) 100%. Возвращаемся к перу, кликаем правой кнопкой мышки по созданному контуру и выбираем Stroke Path (Обводка контура). В выпадающем меню выбираем Brush (Кисть).

Шаг 18. Повторяем шаги 16 и 17, чтобы нарисовать нижнее веко, затем объединяем слои в группу и называем ее "Нижнее веко". Берем Pen Tool (Перо) (Р) в режиме Shape Layer (Слой-фигура) и создаем линии цветами #0b506a и #15698b .

Шаг 19. Теперь добавим немного теней вокруг галаз и повторяем шаги 11-17, чтобы создать левый глаз. Добавляем теней на левый глаз, группируем все слои и называем группу "Левый глаз".

Шаг 20 - Создаем складки на щеках
Пришло время поработать над складками, начнем с щек. Создаем фигуру цветом #c2e7f1 и применяем фильтр Gaussian Blur (Размытие по Гауссу) с радиусом 17 пикселей.

Шаг 21. Создаем выделение складки, берем мягкую кисть размером 100 пикселей цветом #004576 и рисуем по краю выделенной складки. Перед тем, как снять выделение, сохраняем его, создаем новую полосу цветом #add8eb и применяем к ней Gaussian Blur

Шаг 22. Загружаем выделение, которое мы сохранили в предыдущем шаге, жмем CTRL+I, чтобы его инвертировать, и добавляем тени снаружи складки с помощью мягкой кисти цветом #0d5983 . Группируем слои с складкой и называем группу "Левая складка". Таким же образом создаем правую складку.

Шаг 23 - Создаем складки на теле
Теперь мы должны создать складки в нижней части персонажа. Для этого берем мягкую кисть размером 175 пикселей с hardness (жесткость) 0% и opacity (непрозрачность) 50%. Выбираем цвет #0d6897 и рисуем кистью в том месте, где будет складка.

Шаг 24. Берем Pen Tool (Перо) (Р) в режиме Path (Контур) и создаем контур основной складки. Сохраняем этот контур и жмем CTRL+ENTER , чтобы конвертировать его в выделение. Берем мягкую кисть размером 200 пикселей и цветом #0e547b , инвертируем выделение и начинаем рисовать тени на складке. При необходимости меняем непрозрачность кисти.

Шаг 25. Добавляем тени в нижней части персонажа с помощью мягкой кисти и цвета #0a6791. Меняем цвет кисти на #0f5b83 и добавляем еще теней.

Шаг 26. Берем Pen Tool (Перо) (Р) и рисуем контур для выделения складки. Далее берем мягкую кисть цветом #004e7a и добавляем тени. Создаем выделение с помощью пера (Р), чтобы добавить тени, меняем цвет переднего плана на #007299 , инвертируем выделение и рисуем тени снаружи. Таким же образом добавляем больше теней внутри выделения, чтобы придать складке больше реализма.

Шаг 27 - Создаем маленькие складки
Чтобы создать маленькие складки, берем перо (Р) в режиме Shape Layer (Слой-фигура) и создаем фигуру, затем зажимаем CTRL и кликаем по миниатюре слоя, чтобы загрузить его выделение. Берем мягкую кисть размером 200 пикселей и цветом #0198bd и начинаем рисовать тени на маленьких складках.

Шаг 28. Повторяем шаг 27 и создаем больше маленьких складок. Группируем слои с складками и добавляем к группе маску, чтобы скрыть лишние области.

Шаг 29 - Добавляем блики
Теперь мы добавим блики, чтобы наш персонаж выглядел реалистичнее. Берем Pen Tool (Перо) (Р) и создаем форму для основной большой складки, меняем ее цвет на #ceecf1 и применяем фильтр Gaussian Blur (Размытие по Гауссу) с радиусом 15 пикселей.

Шаг 30. Создаем другую фигуру цветом #ceecf1 и применяем Gaussian Blur (Размытие по Гауссу) с радиусом 25 пикселей. Далее создаем новую узкую полосу тем же цветом и применяем размытие с радиусом 18 пикселей.

Шаг 31. Повторяем шаги 29 и 30, чтобы добавить больше бликов. Добавляем блики на других складках в зависимости от расположения источника света.

Шаг 32 - Добавляем блики на голове
Чтобы добавить блики на голове, берем Pen Tool (Перо) (Р) и создаем фигуру цветом #ceecf1, затем применяем Gaussian Blur (Размытие по Гауссу) с радиусом 40 пикселей. Далее создаем другую узкую полосу вокруг глаз тем же цветом и применяем Gaussian Blur (Размытие по Гауссу) с радиусом 25 пикселей. Если все сделано правильно, то персонаж должен выглядеть вот так.

Шаг 33. Создаем новую фигуру посредине головы цветом #ceecf1 и применяем Gaussian Blur (Размытие по Гауссу) с радиусом 46 пикселей. Результат должен быть вот таким.

Шаг 34. Повторяем шаги 29 и 30, чтобы добавить бликов на теле персонажа и сделать его более реалистичным.

Шаг 35 - Создаем руку
Создаем основу руки с помощью Pen Tool (Перо) (Р), не забываем переключиться в режим Shape Layer (Слой-фигура). Меняем цвет на #00a4cb , берем мягкую кисть размером 200 пикселей и рисуем тени на руке.

Шаг 36. Теперь мы будем детализировать руку. Начнем с указательного пальца, создаем складку цветом #006384 и применяем Gaussian Blur (Размытие по Гауссу) с радиусом 3.5 пикселей.

Шаг 37. Повторяем шаг 36 и создаем больше складок на обеих пальцах. Чтобы добавить свет, создаем овал цветом #cfebf1 и применяем Gaussian Blur (Размытие по Гауссу) с радиусом 7.5 пикселей.

Шаг 38. Создаем больше бликов на пальце, повторяя шаг 37, затем добавляем свет на руке.

Шаг 39. Теперь с помощью Pen Tool (Перо) (Р) создаем основу большого пальца, меняем его цвет на #029fc4 , затем берем мягкую кисть цветом #017798 и добавляем тени. Повторяем шаг 37 и добавляем блики.

Шаг 40. Далее мы должны создать ноготь на большом пальце. Создаем основу и применяем стиль слоя Gradient Overlay (Наложение градиента) с цветами #42a51e и #3dd567 . Добавляем стиль слоя Stroke (Обводка) цветом #008bab и шириной 2 пикселя.

Шаг 41. Ноготь выглядит великолепно, теперь добавим стиль слоя Outer Glow (Внешнее свечение). Создаем новое выделение, заливаем его цветом #d3fdcd и применяем фильтр Gaussian Blur (Размытие по Гауссу) с радиусом 4 пикселя. Если все сделано правильно, то ноготь должен выглядеть вот так.

Шаг 42. Создаем мизинец, повторяя шаги 39-41, добавляем свет и тени в необходимых местах. Группируем все слои с рукой и называем группу "Правая рука". Затем дублируем группу, отражаем с помощью Edit - Transform - Flip Horizontal (Редактирование - Трансформация - Отразить по горизонтали) и прикрепляем к левой части персонажа. Называем ее "Левая рука".

Шаг 43 - Цветовая коррекция
Пришло время немного подкорректировать цвета. Группируем все слои и называем группу "Монстр". Дублируем ее и объединяем копию в один слои (CTRL+E). Дублируем слой (CTRL+J) и устанавливаем режим смешивания копии на Soft Light (Мягкий свет) и уменьшаем opacity (непрозрачность) до 70%.

Шаг 44. Дублируем слой "Монстр", переходим Filter - Filter Gallery (Фильтр - Галерея фильтров) и применяем фильтр Plastic Wrap (Целофановая упаковка). Называем этот слой "Фильтр".

Шаг 45. Выбираем слой "Фильтр" и меняем его режим смешивания на Overlay (Перекрытие) и уменьшаем opacity (непрозрачность) до 60%. Это придаст интересный эффект персонажу и сделает его реалистичнее.

Шаг 46. Мы подошли к концу урока. Теперь нам необходимо изменить цвет глаз. Для этого добавляем корректирующий слой Hue/Saturation (Цветовой тон/Насыщенность) и меняем параметр Hue (Цветовой тон) на -98. Называем этот слой "Цвет глаз".

Шаг 47. Добавляем векторную маску к корректирующему слою "Цвет глаз", выделяем маску и заливаем ее черным цветом, чтобы полностью скрыть ее действие. Берем мягкую кисть белого цвета и зарисовываем радужку глаз.

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

Шаг 49. После применения фильтра Plastic Wrap (Целофановая упаковка) вы могли заметить, что появились лишние блики по краям персонажа, которые мы должны удалить, чтобы придать ему реалистичный вид.

Шаг 50. Удаляем все лишние части персонажа: на руках, пальцах, краях тела.

Шаг 51. Это последний шаг урока. Поэкспериментируйте с кистями, чтобы создать подходящий фон. Поздравляю! Мы закончили. Это все, друзья. Надеюсь, вам понравился этот урок. Вот финальный результат.

(нажмите на изображение, чтобы увеличить)

В этом уроке вы научитесь рисовать и анимировать персонажей в технике 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.

На временной шкале сделайте следующее: