Как cделать «облачка» для комиксов?
Выноска (облако с текстом, пузырёк со словами, баллон, текстовый баллон, баббл, спич-баббл от англ. Speech Balloon) — это графическое прием, который применяется в комиксах для отображения речи и мыслей персонажа.
Начнем мы с создания эскиза нашей выноски. Определите несколько угловых точек, чем их будет меньше, тем лучше — это просто вспомогательные ориентиры. Вы можете это сделать на бумаге или мысленно продумать их местоположение. Во время процесса представляйте что-то наподобие коробки, в которой хранится ваш текст.
Выберите инструмент Ручка (чтобы рисовать одной линией) и нажмите сочетание клавиш Shift+Alt+S для перехода на окно параметров Наложения.
Здесь мы выбираем инструмент Кривая Безье (Bezier Curve Tool). Далее в Настройках задайте команду Залить фон (цвет должен быть белым) и назначьте Контурный параметр для кисти.
Для вызова Кривой безье не предусмотрено горячих клавиш по умолчанию, попробуйте самостоятельно назначить клавишу z.
Далее подключаем функцию Автоматическое сглаживание кривой (Autosmooth Curve).
Объясню, зачем нам это, ведь можно было просто включить функцию угловой привязки к координатам. Но Автоматическое сглаживание даст нам показатель формирования угла дельта на 15% больше, чем просто включенная угловая привязка. А наша цель — максимально округлые бабблы с гладкими краями.
Теперь прикоснитесь к своим граничным точкам. И форма выносок станет круглой автоматически.
Чтобы было понятно, к какому именно персонажу текст относится под кругляшком обычно делают треугольную, указательную стрелку. Принцип ее создания такой же, только для ее создания прикоснитесь не к 4 точкам, а только к 3. Автоматическое сглаживание кривых может оставаться включенным, но можно и отключить его на данном этапе. Если вы решили оставить его включенным, то нарисованная внизу выноски стрелка будет выходить немного тоньше назначенной кисти. Попрактикуйтесь и протестируйте результаты.
Стрелка в своей самой широкой части должна быть примерно равна средней высоте текста в своей выноске.
Чтобы создать впечатление что выноска парит над основным рисунком, создайте слой с режимом Перекрытия слоя в главной группе слоев. Чтобы выноска наоборот пряталась за границу картинки создайте слой с режимом Подлежащий слой.
Но не пытайтесь применить этот метод для создания больших, слитных выносок. Такие операции можно делать только в режиме Наложения.
Сочетания горячих клавиш облегчают рабочий процесс:
- Shift + Alt + S — Оконный режим Наложения
- Shift + Alt + O — Перекрывающий режим Наложения
- Shift + Alt +N — Полноэкранный режим Наложения
Чтобы увеличить размер выноски, запустите Оконный режим Наложения и заново повторите весь процесс рисования. Чтобы нарисовать трубочки перехода обязательно отключите Автоматическое сглаживание кривых. Сольется основное тело выноски с соединяющей трубочкой автоматически.
Если нужно нарисовать несколько выносок рядом друг с другом, так чтобы одна выглядывала из-за другой. Для создания выноски ПЕРЕД уже существующей выбирайте режим Normal (Обычный). Для создания выноски ПОЗАДИ уже существующей выбирайте режим Overlay (Перекрытие). Для создания указательных стрелок переключитесь обратно на Screen (полноэкранный режим).
Создание анимации в Krita
Начиная с версии 3.0 Krita позволяет художникам работать с анимацией. Это замечательная новость для тех, кто хочет создавать видеоролики и мультфильмы.
Многим художникам хотелось бы попробовать свои силы в этом виде искусства. Создание анимации дело непростое и требует не только навыков рисования, но умения быть усидчивым, внимательным и терпеливым.
Анимация в Крита является покадрово растровой. Иными словами, пользователю необходимо прорисовывать кадр за кадром, чтобы при воспроизведении все это выглядело как настоящая мультипликация.
Чтобы появились вкладки и окна для работы с анимацией, необходимо изменить рабочее пространство на Animation. В плане рабочих пространств Krita очень похожа на другие графические редакторы. Чтобы пользователям было удобнее использовать различные возможности программы, были внедрены некоторые рабочие пространства.
Сделать это можно так: Окно (Window) → Рабочее пространство (Workspace) → Animation
После этого, на экране будет отображено все необходимое для настроек.
Анимационная кривая
Чтобы создать новую кривую, откройте вкладку New Frame (Новый кадр) и кликните на Add Opacity Keyframe (Добавить ключевой кадр непрозрачности). Теперь Вы сможете изменять параметры непрозрачности напрямую. Добавляя или уменьшая ключевые кадры, можно заставить картинку исчезать или появляться. Кривая помогает полностью распределить ключевые кадры для плавной анимации.
Рабочий процесс
Разберем работу с анимацией немного детальнее. Ее суть заключается в том, чтобы создавать ключевые кадры с важными деталями или позами, в которых находится персонаж. Обозначив ключевые точки, художник рисует картинку на кадрах, расположенных между ними. На профессиональном жаргоне это называется tweening или inbetweening.
В работе Вам помогут следующие вкладки:
- Временная шкала (Timeline). Отображает и позволяет настраивать все кадры вашей анимации, также управляет слоями. Созданные здесь слои также отображаются на обычной вкладке со слоями.
- Вкладка Анимация (Animation). Здесь отображены кнопки запуска, паузы и перемотки. На панели также отображены различные настройки — скорость воспроизведения, частота смены кадров и так далее.
- Луковая кожа (Onion Skin). Данная панель запускается путем нажатия на иконку с луковицей. Опция позволяет художнику видеть предыдущий кадр.
Введение. Как сделать анимацию в Крита
Опыт и знания приходят с практикой. Поэтому очень важно освоить и практиковаться в создании базовой анимации. Рассмотрим пример с классическим вариантом — циклом ходьбы. Все, что нужно сделать — это нарисовать персонажа, который будет ходить. Такая тренировка поможет освоить программу и научиться базовым приемам.
Для начала создадим новый файл.
Дадим название нашей анимации и выставим параметры разрешения. Оптимальными настройками будут: разрешение — 1280×1024, а dpi — 72.
После этого выберем цвет заднего фона. Выберите задний фон как цвет холста (As canvas color). Это означает, что программа сама зальет каждый пустой участок этим цветом. Данный параметр можно изменить в Image (Изображение) → Image Properties (Свойства). Это очень важно при работе с анимацей, ведь все фоны должны быть полупрозрачными.
Примечание:
Krita предлагает широкий спектр изменения мета-данных. Здесь есть и название, и описание, а также комментарии, которые помогут большой группе людей работать над одним проектом. Во время индивидуальной работы они могут и не пригодиться, но для команды подойдут в самый раз. Таким образом, члены одной группы смогут делиться своими мыслями и оставлять описания кадров, которые они создают. Это повышает эффективность их работы.
Нажмите создать (Create).
Чтобы быстро сменить рабочее пространство, кликните на значок в правом верхнем углу экрана и выберите Animation. Красная стрелка, представленная на скриншоте ниже, указывает на расположение необходимой кнопки.
Окно станет таким. (Расположение панелей может меняться в зависимости от версии программы и личных настроек).
Теперь нам необходимо создать два прозрачных слоя. Назовем один “Environment” (Окружение), а другой — “Walkcycle” (Цикл ходьбы). Для этого дважды кликнете на их имена.
Слой “Environment” будет представлять среду, в которой находится наш персонаж. Можно нарисовать какие-нибудь декорации или дополнить изображение фоном.
Слой “Walkcycle” содержит иллюстрации нашего героя.
Используйте инструмент Straight Line Tool (Прямая линия), чтобы нарисовать горизонтальную линию. Это будет нашей Землей или любой другой твердой поверхностью.
На слое “Walkcycle” Вам необходимо нарисовать голову и туловище. Сделать это можно любой кистью, какой Вам будет удобно.
Теперь даже если мы выберем новый кадр, он не будет анимирован, ведь Krita не распознает слой “Walkcycle” как анимированный. Нам необходимо, чтобы программа действовала именно так, как мы хотим.
Поэтому сделаем его таковым, добавив слой на временную шкалу. Откройте контекстное меню путем нажатия правой кнопки мыши и выберите New Frame (Новый кадр).
Вы поймете, что слой стал анимированным благодаря значку луковицы.
Используйте правую кнопку мышки, чтобы продублировать слой и перенесите его на второй кадр. Используйте инструмент передвижения и комбинацию Shift + ↑, чтобы поднять слой. Теперь мы видим, что слой полупрозрачный благодаря луковой коже (onionskinning). Предыдущий кадр будет выделен красным.
Примечание:
Программа принимает белый цвет не как прозрачный, поэтому убедитесь, что слой, на котором Вы рисуете, является полностью прозрачным. Старайтесь не допускать ошибок. В случае необходимости, Вы можете воспользоваться специальным фильтром Color to Alpha.
Идущие следом кадры будут отображены зеленым цветом. Все оттенки, которыми изображаются предыдущие и последующие кадры, можно настроить в соответствующих вкладках.
Теперь перейдем непосредственно к анимации. Нам понадобится два кадра. Они станут ключевыми в нашем коротком видео. На одном ключевом фрейме ноги должны располагаться как можно дальше друг от друга. На другом одна нога должна быть максимально вытянута. Это будет имитацией шагов.
Копируем их. Для этого можно использовать комбинацию Ctrl + правая кнопка мыши и перетаскивание.
Выделять кадры можно так же, нажав Ctrl + правую кнопку мыши.
Копировать кадры можно другой комбинацией — Ctrl + правая кнопка мыши + перетаскивание. Однако стоит отметить, что первый кадр должен быть выделен оранжевым, иначе он не будет скопирован.
Должно получиться так:
- Скопируйте кадр 0 на ячейку кадра 2
- Продублируйте кадр 1 на ячейку кадра 3
- Установите frame-rate (частоту кадров) на 4
- Выделите все кадры Вашей анимации
- Нажмите кнопку Старт/ Воспроизвести (Play)
- Наслаждайтесь Вашей первой анимацией
Дополним нашу анимацию
Чтобы сдвинуть кадры и образовать немного пустого пространства нажмите Alt + Правая кнопка мыши и двигайте их. Это можно сделать разом.
Так как мы создали наши ключевые кадры и оставили немного места между ними, то теперь займемся inbetweening’ом и нарисуем кадры между ключевыми.
Чем больше кадров, тем тяжелее делать их похожими друг на друга. Нарисуйте плавные движения ног на каждом кадре, будто бы нарисованный персонаж и вправду шагает. Пройдитесь пару раз сами и внимательно проследите за движением Ваших ног.
Параметры onion skin можно изменить в специальной вкладке. Здесь Вы можете настроить количество видимых кадров, их цвета и уровень непрозрачности.
Теперь анимация выглядит немного более естественной и плавной.
Анимирование нескольких слоев
У нашего шагающего человечка кое-чего не хватает — рук. Давайте нарисуем их на отдельном слое.
С временной шкалы исчезли предыдущие фреймы. Не пугайтесь! Это специальная особенность программы, которая помогает облегчить работу, ведь специалистам иногда приходится сталкиваться с большим количеством слоев. Поэтому программа временно скрывает неиспользуемые. Вы можете добавить их вручную. Кликните правой кнопкой мышки и нажмите Show in Timeline (Показывать на временной шкале).
Экспорт
Готовую анимацию можно экспортировать в отдельный файл. Нажмите на вкладку Файл (File) → Экспортировать анимацию (Export Animation).
Krita может экспортировать только отдельные картинки, поэтому рекомендуется сохранять кадры в формате PNG в одну отдельную папку.
Процесс экспорт отображен на специальной панели с процентом.
Картинки будут сохранены в правильном порядке с соответствующими именами и номерами.
Используйте какую-нибудь программу для создания файлов формата GIF (GIMP, ImageMagick). Так Вы сможете собрать все свои файлы воедино.
Обновление:
В версии Krita 3.1 добавлена функция, которая позволяет рендерить анимацию.
Импорт
В редактор также можно импортировать готовые кадры. Покажем данное действие на примере спрайтов из Open Game Art (Это мужская походка Libre Pixel Cup).
У нас есть лента с изображениями, нам нужно разделить ее. Image (Изображение) → Split Image (Разделить изображение). Сделайте 8 вертикальных разрезов и 0 горизонтальных, так как спрайтов всего 9 в одном ряду. Сохраните все в формате PNG.
Создайте новый холст и кликните на File (Файл) → Import Animation Frames (Импортировать кадры анимации). После нажмите Add Image (Добавить картинку), выделите все разом и вставьте.
Кадры расположены в определенном порядке, а чтобы определить точку старта, настройте параметр START.
Параметр Step(Шаг) позволяет настроить частоту кадров, сравнивая исходный документ и импортируемый.
Нажмите ОК и новый слой будет импортирован.
Text Tool¶
The text layout got reworked in Krita 5.2, however the text tool itself has not yet received an update. For now, if you want to use features like inline-size for wrapping or writing-mode:vertical-rl for vertical text, you will need to use the SVG source editor. We will update the text tool in future versions of Krita.
You use it by doing + drag to create a rectangular selection. When releasing a default text will be created and the text editor window will pop-up.
Hovering over other text shapes will highlight their bounding box. on a highlighted text will select it as the active text.
Tool Options¶
Create new texts with…
This contains features with which to create new texts, the following items are available:
The letter type used by newly created texts.
The letter-size used by newly created texts. It is in pts (points), which is a common standard for fonts that is measured 72 points per inch. It therefore will stay proportionally the same size if you increase or decrease canvas dpi.
Anchor/Align text to the left/middle/right
Text alignment. This allows you to align text to the left, center it, or to the right. This is called text-anchor because SVG 1.1’s multiline text only uses text-anchor, and this is a slight bit different than text-align (and also the reason justify isn’t available at the moment).
The letter spacing used by newly created texts.
This will summon the text editor for the currently selected shape. This can be quickly invoked with either pressing the Enter key or double — click + shortcut on the shape.
Text Editor¶
A small window for all your text editing needs. The Text Editor has two tabs: Rich text and SVG source.
Activating
You can use the Text tool to first create a text box. There are a few options in the tool options if you want to customize how the text will be adding. You will need to drag a rectangle on the canvas to create the text area. Once your text is created, you can edit the text from two ways:
- Select the text with the shape selection tool (first tool). Press the Enter key. The text editor will appear.
- Select the text with the shape selection tool (first tool). Then click the Text tool. In the tool options there is an Edit Text button. When you click that the text editor window will appear.
If you are unfamiliar with the way SVG text works, use the rich text tab, it will allow you to edit the text as you see it, at the cost of not having all functionality.
If you are a little bit more familiar with SVG text, you can directly edit the SVG source. Do note that not all attributes and properties are converted back to the rich text editor, so do be careful when switching back.
Press Save as you’re done with your edits to preview them on canvas.
File Save Ctrl + S
Save current edits to the text on canvas.
Close the editor.
Basic editing functions:
Undo the last action in the text editor.
Redo Ctrl + Shift + Z
Redo the last undone action in the text editor.
Cut selected text to the clipboard.
Copy selected text to the clipboard.
Paste text from the clipboard.
Select all Ctrl + A
Select all text in the active editor.
Deselect Ctrl + Shift + A
Deselect any selected text.
Pops up a window with an input to find the given text in the active editor.
Searches for the next text using the last search key.
Find Previous Shift + F3
Searches for the last text using the last search key.
Replace… Ctrl + R
Pops up a dialog with two inputs: The string you wish to find, and the string you wish to replace it with. Will always replace ALL found instances.
View Zoom Out Ctrl + —
Zoom out the text.
Zoom in the text.
Insert Special Character… Alt + Shift + C
Pops up a dialog that allows you to search for special characters that are difficult to type in with your keyboard.
Format Bold Ctrl + B
Set the font-weight to bold.
Sets the selected text italic.
Underline Ctrl + U
Underline the selected text.
Adds a strike-through text decoration.
Superscript Ctrl + Shift + P
Sets the text to super-script baseline.
Subscript Ctrl + Shift + B
Sets the text to subscript baseline.
Sets the font weight a little more specifically. Possibilities are… Light, Normal, Bold, and Black.
Align the selected paragraph to the left.
Align Center Ctrl + Alt + C
Center the selected paragraph.
Align Right Ctrl + Alt + R
Align the selected paragraph to the right.
Toggles kerning for selected text.
Calls up the text-editor settings dialog.
Text Editor Settings¶
The settings that can be configured for the text editor.
Whether you want both the Rich Text Editor and the SVG Source Editor, or only one of either.
Here you can configure the syntax highlighting for the SVG source.
These highlights important characters like .
The format for highlighting the element tag name. text and tspan are examples of element names.
The format for highlighting the attributes of the tag. For example, font-family , when it isn’t in the style tag is usually written as an attribute.
The format for highlighting value of attributes.
This highlights XML comments, which are written as following: . Comments are pieces of text that never get interpreted.
Editor Text Color
The main color of the editor.
Editor background color
The main background color of the editor.
This allows you to filter the selection of fonts in the editor by writing system. Some systems have a lot of fonts specifically for showing foreign languages properly, but these might not be useful for you. You just tick the writing systems which you use yourself, and the font drop-down will only show fonts that have full support for that language.
Fine typographic control with the SVG Source tab¶
So, the rich text editor cannot control all functionality that SVG text allows for. For that, you will need to touch the SVG source directly. But to do that, you will first need to go to the text editor settings and enable either SVG Source or Both editor mode. The Rich Text editor will lose some information, so if you go all out, use SVG Source .
Word-spacing, Letter-spacing and Kerning¶
These three are written and read from the rich text tab, but only two of them can be controlled from Rich Text tab.
Kerning, in SVG 1.1 behaves slightly differently than font-kerning in CSS. Krita by default uses the auto property for this, which means it is on. To turn it off use kerning: 0; in the style section of the text. Any other numeric value will be added to current letter-spacing .
text style="kerning:0; font-family:Dancing Script; font-size:18pt; font-size-adjust:0.265625"> tspan>No Kerning on Valhalla Tower.tspan> text>
Letter-spacing
This is the distance between letters in pts, usually. Just write letter-spacing in the style and add a distance in pts behind it. A negative value will decrease the value between letters.
This is the extra distance between words, defaulting to pts. By default, word-spacing: 0; will have it use only the width of the space character for that font. A negative value will decrease the amount of space between words:
text style="font-family:Noto Serif; font-size:12pt; font-size-adjust:0.389915; text-anchor:middle"> tspan>No Adjustment.tspan> tspan style="letter-spacing:2" x="0" dy="22pt">Letter spacing: 2tspan> tspan style="letter-spacing:-2" x="0" dy="22pt">Letter spacing: -2tspan> tspan style="word-spacing:5" x="0" dy="22pt">Word spacing: 5tspan> tspan style="word-spacing:-5" x="0" dy="22pt">Word spacing: -5tspan> text>
x, y, dx, dy¶
These are even finer-grained controls that can be used to position text. However, they CANNOT be reliably converted to the format of the rich text editor, because the rich text editor uses these to figure out if a line is a new-line and thus writes to these.
X and Y are absolute coordinates. But because you cannot change the absolute coordinates of the text from the editor, these get added to the position when they show up in a tspan.
These are relative coordinates to the position of the previous letter.
Font-stretch and Small-caps¶
These can also be stored and written to the rich text tab’s internal format, but they don’t get used in the on screen text object.
Dominant Baseline, Alignment baseline, Font-size-adjust, Writing mode, Glyph-orientation, rotate¶
These are not stored in the rich text right now, and while they can be written into the SVG text, the SVG text-shape doesn’t do anything with them.
Krita generates font-size-adjust for the font when coming from rich text, as this can help designers when they want to use the SVG source as a basis for later adjustments.
© Copyright licensed under the GNU Free Documentation License 1.3+ unless stated otherwise. Build 2493.