Animate with krita

1. Запуск Krita

Чтобы запустить Krita дважды щёлкните на иконку программы на рабочем столе:

Когда программа запустится, нажмите кнопку «New File» (Новый файл) в центре её окна:

В появившемся окне выберите слева «Пользовательский документ», потом поставьте ширину документа равную 1280, а высоту — 720. Это стандартный размер документа с которым мы будем работать большую часть времени. Затем нажмите кнопку «Create» (Создать).

2. Сброс интерфейса к настройкам по-умолчанию

В Krita вы можете настраивать интерфейс как вам нравится, просто перетаскивая панели, можете включать и выключать их. Поэтому, очень может быть что интерфейс у вас выглядит не так, как у меня. С помощью кнопки в правом верхнем углу вы можете быстро переключать раскладки интерфейса под разные задачи. Чтобы вернуть его к исходному виду выберите «Default».

3. Работа с графическим планшетом

4. Выбор кисти

Выбирать кисть можно двумя способами.

Способ первый — через панель «Профили кистей» в правом-нижнем углу.

Чтобы увидеть все доступные кисти, убедитесь, что вверху панели в списке выбран пункт «All» (Все).

Второй способ выбрать кисть — использовать специальную кнопку вверху окна:

После щелчка на кнопку появляется выпадающее меню с шаблонами кистей.

5. Выбор цвета

Для выбора цвета используйте панель с цветовым кругом в правом-верхнем углу экрана (1) или щёлкните на квадратик с цветом на верхней панели (2).

6. Изменение размера кисти

Для изменения размера кисти переместите курсор в область рисования, зажмите клавишу Shift на клавиатуре и (клавишу Shift не отпускайте!) коснувшись кончиком пера поверхности планшета начните водить пером вправо-влево.

Размер кисти на экране будет увеличиваться или уменьшаться в зависимости от направления движения.

Значение размера можно посмотреть на панели вверху:

7. Ластик

Переключить кисточку в режим ластика можно нажатием кнопки «E» (английская) на клавиатуре.

При этом, автоматически подсветится соответствующая кнопка на панели вверху.

8. Сохранение и открытие файлов

Для сохранения документа выберите из меню команду «Файл» — «Сохранить».

Аналогично, для открытия файла выбираем «Файл» — «Открыть».

Обратите внимание, что Krita может одновременно открывать несколько файлов в одном окне. Чтобы переключиться между открытыми файлами используйте вкладки сверху

Export

If you make something really cool, you probably want to export it. Krita doesn’t tie into any encoder yet (although the latest beta builds, at the time of this writing, do), but exporting to an image sequence and then converting with FFmpeg or ImageMagick is simple. If you don’t have FFmpeg and ImageMagick installed, install them now.

Then go to the File menu and select Export Animation.

In the file manager window that appears, create a folder for your animation frames.

Title your first frame , and save it into your new folder. You should name your first frame as an integer or else it’ll be harder to stitch together later.

Once the export is done (it might take a few moments even for 12 frames, since the frames must be composited together 12 times), you can close Krita or switch to another desktop.

Open a terminal window and navigate to the directory containing your frame exports. If you’re not sure where that is or how to get there from a terminal, you can just type into the terminal and then open a file manager, find the directory, and then drag and drop the directory into a terminal window.

Assuming you have FFmpeg installed, you can create a WebM video:

For example:

Or create an animated gif with ImageMagick, using your chosen frame rate as the setting for the option:

The option set to zero indicates an infinite loop.

Оглавление

Начиная с версии 3.0 Krita позволяет художникам работать с анимацией. Это замечательная новость для тех, кто хочет создавать видеоролики и мультфильмы.

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

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

Чтобы появились вкладки и окна для работы с анимацией, необходимо изменить рабочее пространство на Animation. В плане рабочих пространств Krita очень похожа на другие графические редакторы. Чтобы пользователям было удобнее использовать различные возможности программы, были внедрены некоторые рабочие пространства.

Сделать это можно так: Окно (Window) → Рабочее пространство (Workspace) → Animation

После этого, на экране будет отображено все необходимое для настроек.

Дополним нашу анимацию

Чтобы сдвинуть кадры и образовать немного пустого пространства нажмите Alt + Правая кнопка мыши и двигайте их. Это можно сделать разом.

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

Чем больше кадров, тем тяжелее делать их похожими друг на друга. Нарисуйте плавные движения ног на каждом кадре, будто бы нарисованный персонаж и вправду шагает. Пройдитесь пару раз сами и внимательно проследите за движением Ваших ног.

Параметры onion skin можно изменить в специальной вкладке. Здесь Вы можете настроить количество видимых кадров, их цвета и уровень непрозрачности.

Теперь анимация выглядит немного более естественной и плавной.

Подробные руководства

• Как начать работать в программе Крита
• Сохранение файлов для загрузки в интернет
• Навигация по интерфейсу программы Krita
• Подробное описание работы с инструментами Выделения
• Создание и редактирование пресетов в Krita
• Как использовать режим цветопробы для печати в Крита
• Краткий гайд по Маскам в Крита

Вы опытный художник с внушительным стажем работы? А может, наоборот, новичок, который представляет себе работу в графическом редакторе весьма смутно, но полон решимости освоить этот красивый труд? Полные вдохновения вы скачиваете и устанавливаете программу, горя нетерпением рисовать новые шедевры — но чтобы при помощи программы вы смогли полностью реализовать свой творческий потенциал, сначала ее нужно настроить. Krita — современная программа для работы с разными видами графики, и большим количеством различных функций, поэтому иногда легко зайти в тупик даже при поиске самой простой опции, такой, как, например, переключение языка или настройка горячих клавиш. Наше руководство поможет вам начать риосвать в Krita быстрее!

Меню настроек в Krita выглядит следующим образом

Настройка действий холста

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

Настройка горячих клавиш

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

Переключения языка

Если вам нужно поменять языковую раскладку, выберите пункт “Настройки”, затем подменю “Переключить язык приложения”.

В Krita есть возможность добавлять резервные языки.

Сброс настроек

Отмена всех вновь введенных настроек с возвращением к стандартным. Кнопка Restore Defaults находится в нижнем левом углу

Внимание! При нажатии на нее все ваши настройки сбросятся

Сохранение файла в Krita

После окончания процесса готовую работу нужно сохранить. Выберите пункт «Файл», затем «Сохранить как…», после чего выберите папку для хранения изображений.

Программа по умолчанию предлагает сохранять файлы в режиме *.krr, также есть возможность сохранить эскиз в формате профилей кистей Kripta *.kpp. Дополнительно вы можете ознакомиться с Рекомендацией по сохранению файлов для загрузки в интернет.

Сохранение анимации в Krita

Чтобы сохранить анимацию на свой компьютер выберите Файл — Экспорт анимации. Урок по созданию анимации в Крите

Настройка цвета для интерфейса

Вы можете выбрать цвет рабочего окна Криты по своему усмотрению. Для изменения темы интерфейса нажмите Настройки — Темы… и установите понравившийся вариант.

Как пользоваться кистями?

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

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

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

Если вы хотите сделать собственный набор наиболее часто употребляемых кистей, откройте Редактор кистей. Это еще можно сделать нажав F5.

Выбирайте кисть кликнув на квадратик с нужным инструментов. Для смены рабочего цвета рисования нажмите на треугольник Расширенного выбора цвета.

Krita

From its humble beginnings as «that painter app, the one that comes with KOffice» to a premiere open source freehand paint emulator, Krita has been a favourite graphics tool of mine for years. (I’m not an illustrator, so the boost that Krita gives me to trick people into thinking I have skill with a brush or pen is much appreciated.) As an actual animation program, however, it’s very much a new player. Just last year (2015), Krita crowdfunded development, and as a stretch goal, funders voted for an animation plugin. I personally didn’t vote for animation; I felt it would only distract Krita from its main purpose. Luckily, I was in the minority, and Krita 3.x features a remarkably stable and capable animation interface.

To be clear: Krita is not a dedicated animation application. It’s a paint application that happens to do some animation. It doesn’t support advanced digital tweening or soundtrack integration; it just provides onion skinning and a timeline. I’ll cover a more advanced animation software in two months; I’m covering Krita here because it’s a robust illustration application with a stable animation interface, and it’s just plain fun to work with.

Onion skin

One thing about the setup so far is that it really is no different than using any other graphic application to animate; we can only see one key frame at a time, so it’s hard to tell where the ball was in the past or where it is going to later in the animation. That’s important for an animator, because the next step in this process is to draw all those little frames in-between the keys. It helps to see through each layer, at least to some degree, so you know what you’re drawing towards.

This is called using an «onion skin», named after the semi-transparent (or semi-opaque?) layers of an onion. To activate this in your animation layer, click the lightbulb icon in either the layer name or the timeline label.

Now that you have a sense for where all the important parts of your animation happen, fill in the gaps. You know the drill: New Frame, draw, rinse, and repeat.

Your first cel

Just like that, you’re ready to start animating. Let’s start with something simple, a bouncing ball.

Let’s have the ball come into the frame at the start of our animation. To achieve that, leave the first frame empty.

Progress to the next frame by clicking on the next frame button in the Animation docker, or clicking one frame to the right in the Timeline.

The first appearance of our bouncing ball, you might think, ought to be a circle; after all, most balls (rugby and football excluded) are round. But thinking about velocity and physics and fancy things like that, you’ll find it looks more, well, animated, if you make it somewhat oblong, preferably pointing toward the direction you want it to be moving.

Now you have your object at its starting position. Different people animate differently, but I’ve always been taught to animate based on the theory of key frames. That is, draw the major steps of a complete action first, and then fill in the gaps in between. If we’re animating a ball bouncing (and we are, conveniently), then there are three significant points of action:

• The ball is up in the air heading toward the floor.
• The ball hits the floor.
• The ball is back up in the air.

Knowing that you have three main points of action, we can create the frames (and even cheat a little) for each point.

Setting Up Krita for Exporting Animations¶

You will need to download an extra application and link it in Krita for it to work. The application is pretty big (50MB), so the Krita developers didn’t want to bundle it with the normal application. The software that we will use is free and called FFmpeg. The following instructions will explain how to get it and set it up. The setup is a one-time thing so you won’t have to do it again.

Step 1 — Downloading FFmpeg

For Windows

Go to the FFmpeg website. The URL that had the link for me was here…

Watch out for the extremely annoying google and that looks like a download button! There is no big button for what we need. Either get the 64-bit STATIC version or 32-bit STATIC version that is shown later down the page. If you bought a computer in the past 5 years, you probably want the 64-bit version. Make sure you get a exe file, if you hover over the options they will give more information about what exactly you are downloading.

For OSX

Please see the section above. However, FFmpeg is obtained from here instead. Just pick the big green button on the left under the FFmpeg heading. You will also need an archiving utility that supports .7z, since FFmpeg provides their OSX builds in .7z format. If you don’t have one, try something like Keka.

For Linux

FFmpeg can be installed from the repositories on most Linux systems. Version 2.6 is required for proper gif support, as we use the palettegen functionality.

Step 2 — Unzipping and Linking to Krita

For Windows

Unzip the package that was just downloaded. Rename the long folder name to just ffmpeg. Let’s put this folder in a easy to find location. Go to your C:and place it there. You can put it wherever you want, but that is where I put it.

Open Krita back up and go to File ‣ Render Animation. Click the Browse button on the last item called FFmpeg. Select this file and click OK.

For OSX

After downloading FFmpeg, you just need to extract it and then simply point to it in the FFmpeg location in Krita like (assuming you downloaded and extracted the .7z file to /Users/user/Downloads).

For Linux

FFmpeg is, if installed from the repositories, usually found in .

Step 3 — Testing out an animation

ffmpeg.exe is what Krita uses to do all of its animation export magic. Now that it is hooked up, let us test it out.

Let’s make an animated GIF. In the Render Animation dialog, change the Render As field to “GIF image”. Choose the file location where it will save with the “File” menu below. I just saved it to my desktop and called it “export.gif”. When it is done, you should be able to open it up and see the animation.

Warning

By default, FFmpeg will render MP4 files with a too new codec, which means that Windows Media Player won’t be able to play it. So for Windows, select “baseline” for the profile instead of “high422” before rendering.

Note

OSX does not come with any software to play MP4 and MKV files. If you use Chrome for your web browser, you can drag the video file into that and the video should play. Otherwise you will need to get a program like VLC to see the video.

Layer Styles (Стили слоев)

Layer Styles позволяет накладывать эффекты поверх других слоев. Стили можно активировать и деактивировать, их также можно полностью настроить. Чтобы добавить стиль, перейдите во вкладку Layer (Слой) → Layer Style (Стили Слоев). Более того, это можно сделать гораздо быстрее, если кликнуть правой кнопкой мыши по слою.

Когда окно настроек будет открыто, убедитесь, что чекбокс Включить эффекты (Enable Effects) активирован. В данном окне представлено множество настроек, с помощью которых можно сделать изображение полностью оригинальным и неповторимым. Здесь можно включить внутренние и внешние тени, свечение, добавить текстуру или цвет, выделить границы и контур, атакже многое другое. Эффекты помогут добиться интересного результата. Их можно быстро включать и отключать, нажимая на значок Fx рядом с иконкой слоя.

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

Імпортування кадрів анімації¶

У Krita 3.0 ви можете імпортувати кадри анімації.

Спочатку слід отримати набір спрайтів з Open Game Art. (Це крокування чоловічка з Libre Pixel Cup)

Далі, скористаймося пунктом меню Зображення ‣ Поділ зображень, щоб розділити набір спрайтів.

Спрайти розподілено рівномірно, тому для набору з 9 спрайтів скористайтеся 8 вертикальними розрізами та 0 горизонтальних розрізів. Надайте документу відповідної назви і збережіть його як png.

Далі, створіть нове полотно і виберіть у меню пункт Файл ‣ Імпортувати кадри анімації. У відповідь буде відкрито невеличке вікно. Натисніть кнопку Додати зображення. У відповідь буде відкрито вікно навігації файловою системою, за допомогою якого ви зможете вибрати ваші зображення.

Ви можете позначити декілька зображень одночасно.

Тепер кадри має бути автоматично упорядковано. Ви можете встановити упорядкування за допомогою двох спадних списків угорі ліворуч.

Початок

Вказує, у якій точці має бути імпортовано анімацію.

Крок

Вказує на відмінність між імпортованою анімацією та частотою кадрів документа. Наша анімація складається з 8 кадрів, а частота кадрів у документі дорівнює 24 кадрам за секунду. Отже, що розподілити кадри рівномірно, крок має дорівнювати 3. Як бачите, у вікні буде показано дані щодо того, якою буде частота кадрів імпортованої анімації за поточного вибраного кроку.

Натисніть кнопку Гаразд, і програма імпортує вашу анімацію як новий шар.

Урок для любителей рисовать милых мультяшных героев!

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

Создание, раскраска и наложение теней на изображение

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

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

А рисунок штриховки я кладу во вторую папку потому, что позже его мы тоже раскрасим.

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

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

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

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

Далее займемся прической. Я отдельно поясню, как это сделать.

Представим, что это наши волосы до наложения теневого эффекта.

Нанесите несколько линий другого цвета в произвольном порядке.

Возьмите любой инструмент для Растушевки и слегка размажьте линии по краям.

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

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

А как же сделать нашему красавчику глаза? Постараюсь объяснить покороче.

Для начала заливаем всю область радужки сплошным цветом.

Нарисуем темную область зрачка — так, чтобы между линией штриховки и зрачком остались небольшие отступы. Растушуем Градиентом — чем ниже, тем светлее пятно.

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

Я не профи в рисовании одежды, но попробуем.

1. Наметим несколько расплывчатых линий в том месте, где вы собираетесь делать тени от одежных складок.
2. Добавьте линий похожего цвета, чтобы создать эффект неоднородности материала. Можно это сделать и при помощи инструмента Тени.
3. Хорошенько растушуйте, и при необходимости, добавьте деталей.

Если вы рисуете для 3D анимации, то старайтесь избегать острых углов. Чем более темные и острые складки у вас получатся, тем сильней они будут выпирать. Постарайтесь на этом этапе сделать все максимально плавно.

Теперь этап с нанесением теней можно считать законченным. Вот так выглядело меню слоев на финальном этапе рисования.

Как считаете, наш котейка уже выглядит достаточно классно или можно его еще улучшить?

Если вы готовы дальше прокачивать свои навыки рисования кавайных шедевров, вам сюда:

Как нарисовать кота в стиле аниме? Часть 2

Animation walkthrough

The best way to describe it is to do it. This assumes some familiarity with Krita, but you can probably follow along just by knowing the general workflow of a paint application. And if not, read on anyway; you might be pleased with how gentle the learning curve is.

Krita is easy to install; just download the latest stable version from its website. On Linux, if your distribution doesn’t have Krita 3.x, then download the Krita AppImage from the site. Make the AppImage executable and run it by either clicking its icon or from a shell; it contains everything you need to run the application.

When Krita launches, create a new empty project using the Custom Document option. Yes, there are templates specific to animation, but those are overkill for the purposes of this walkthrough.

Choose whatever page size (or in this case, frame size) you think your computer can handle. Set the resolution to 72 ppi unless you really plan on printing your animation out to physical media.

The default mode of Krita is paint mode, so to see the animation tools switch to the Animation Workspace using the Workspace Switcher button in the upper right corner of the Krita window.

The animation workspace provides new dockers: the timeline docker along the bottom of the window and the animation and onion skin docker in the lower corner. Krita uses the Qt framework, so you can undock these panels and place them anywhere you find convenient.

In your layers docker you’ll already have one layer. Click on that layer’s name to give it a proper label like «backdrop». Then create a new layer above that one and call it «ball», because we’re going to use it to draw a bouncing ball.

With the backdrop layer active, fill it in with a solid color. To keep things simple, that’s all we’ll do with that layer, and that’s pretty common. Next time you watch a classic Looney Tunes episode, or even something more recent, like Batman The Animated Series, watch the background instead of the main characters to see if you can detect which layer is the backdrop, or matte as it is called.

Next, make the ball layer active.

More key frames

We’ve already created the first key frame.

Create the second frame by right-clicking on frame 6 and selecting New Frame. In this frame, draw your bouncing ball as it would appear when hitting the «floor». What might a ball look like when it comes crashing into the floor? Well, it might look round but more likely it looks «squashed», compressed and distorted by the impact. So draw an oblong ball shape wherever you imagine your floor is in this animation.

For the third frame we can cheat and re-use the first frame, flipped. With such a simple animation it’s probably not really worth the effort, but we’ll do it any way just to see how the interface works.

To duplicate the first key frame, right-click on frame 2 (that’s the third from the right, since Krita starts at 0) and select Copy Frame. This doesn’t copy the empty slot in the timeline, it copies the previous frame into the one you’ve right-clicked. Once you’ve got your duplicated frame, click and drag the frame over to frame 11 in the timeline.

To flip the frame so that your bouncing ball is flying off in the other direction, go to the Layer menu and select Mirror Layer Horizontally from the Transform section.

Now you have three key frames in what promises to be a very exciting animation.

Импорт

В редактор также можно импортировать готовые кадры. Покажем данное действие на примере спрайтов из Open Game Art (Это мужская походка Libre Pixel Cup).

У нас есть лента с изображениями, нам нужно разделить ее. Image (Изображение) → Split Image (Разделить изображение). Сделайте 8 вертикальных разрезов и 0 горизонтальных, так как спрайтов всего 9 в одном ряду. Сохраните все в формате PNG.

Создайте новый холст и кликните на File (Файл) → Import Animation Frames (Импортировать кадры анимации). После нажмите Add Image (Добавить картинку), выделите все разом и вставьте.

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

Параметр Step(Шаг) позволяет настроить частоту кадров, сравнивая исходный документ и импортируемый.

Нажмите ОК и новый слой будет импортирован.