Как сделать облачко из комиксов
Обновлено: 05.07.2024
Я и Алекс Xatchett написали этот урок, чтобы попытаться ответить на наибольшее количество основных вопросов по работе с баллонами и текстом в комиксах. Также мы хотели бы рассказать как сделать комикс доступнее.
Я постарался собрать наибольший обзор функций, которые явно или скрыто несут собой текст в комиксах и баллоны. Главная задача этого урока — максимально упростить чтение комикса и добиться его наибольшей функциональности. Запоминать это или заучивать — не следует, достаточно просто прочитать. Это не инструкция как надо делать, а как — не надо, это просто собранный мною список того, что я сам видел в комиксах. Здесь частично использованы материалы из других статей или книг о комиксах.
Основы о текстовом баллоне в комиксе
1. Форма баллона.
Баллон так или иначе должен представлять собой выпуклый многоугольник или эллипс. Чем ближе он к правильной фигуре, тем лучше. Потому что текст внутри него не должен искривляться, огибать препятствия или прерываться. Это сказывается на его читабельности.
2. Шрифт.
3. Хвосты баллонов
Хвосты баллонов указывают на источник реплики и бывают в общем случае двух видов: сужающейся к источнику полоской или уменьшающейся к источнику цепочкой пузырей. Хвост-линия обозначает прямую речь, хвост-пузыри — мысли. Несколько хвостов у баллона — говорит одновременно несколько персонажей.
4. Контур баллона
Контур у классического баллона сплошной, одной линией. Контур должен однозначно обозначать, что текст в баллоне является репликой, а не частью рисунка.
Игра по правилам
Под игрой по правилам я подразумеваю такие функции баллонов, которые не нарушают читабельности текста в баллоне и истории в целом.
1. Хорошая форма баллонов
Общая форма баллонов часто представляет собой овал. У овала есть изменяемое соотношение ширины и высоты.
Но не все виды овалов смотрятся хорошо. Например этот
— трудночитаем, потому что строки текста в вытянутом по горизонтали баллоне очень длинные и выглядят ужасно. Слишком длинные стоки текста трудно читать. Все наверняка попадались большие книги с мелким шрифтом и длинными строками, напрягает глаз и постоянно ищешь заново новую строку. В баллоне это также играет воспринимается очень негативно.
Но и вытянутые по вертикали баллоны не лучше. В подобных баллонах текст не умещается, на строке оказывается то одно слово, а то и только его часть. Переносы текста в баллонах — уже плохой тон (кроме случаев, когда этого совершенно невозможно избежать никакими способами), короткие строки в баллонах, где текст реплики длиннее двух-пяти слов читаются как заикание персонажа и очень цепляют глаз при чтении. От баллона же требуется удобно и однозначно донести до читателя текст.
Форма баллона должна облегчать процесс чтения текста. Плохо читается текст со слишком длинными и со слишком короткими строками. Поэтому соотношения предпочтительной формы баллона колеблется от 1:1 до 1:3. Дальнейшее вытягивание пропорций по вертикали или горизонтали сделает текст менее читабельным.
2. Пространство вокруг текста в баллоне
Увеличенный размер шрифта — это КРИК. Уменьшенный — шёпот.
Хороший эффект дает дополнительное увеличенное пространство вокруг текста, это подчеркивает саму реплику. Часто этим эффектом пользоваться не стоит, иначе он сойдет на нет.
3. Контур баллона
Если линия пунктирная — это обозначает шёпот.
4. Сложность текста в баллоне
Не помещайте в баллоны сложных предложений, разбивайте их на части. В одном текстовом баллоне должна излагаться одна мысль, фраза, предложение с единым эмоциональным окрасом, чтобы изображение в кадре однозначно соответствовало тексту персонажа. Точки и запятые в конце текста баллона не ставятся, они лишние. Закончился баллон – закончилась фраза, это и так понятно.
5. композиционное значение
Баллоны сами по себе представляют белые пустоты, заполненные внутри текстом. С точки зрения графики, это белые пятна и в то же время крупнее объекты. Они играют большую роль в композиции кадра, поэтому баллон не только участвует в композиции, но и может помочь в ее построении.
Баллоны без границ, с прозрачными или отсутствующими границами — больший акцент на графику.
И наоборот, изменение, подчеркивание границ баллона (отрисовка границ в виде виньеток) – это акцент на баллон как объект композиции. Придание ему особого значения и веса в кадре.
6. На какой стадии отрисовки комикса вставлять баллоны
Есть два варианта:
- баллоны надо врисовывать на этапе раскадровки и наброска
- баллоны следует добавлять при полностью отрисованной [и покрашенной] комикс-полосе.
Текстовый баллон это такое же мощное средство создание истории, как и другие графические элементы и он должен быть на своем месте, а не там, где получится.
7. Объем, занимаемый баллонами в кадре.
Комикс, это история, основанная в первую очередь на изображениях. Баллоны в ней вторичны, поэтому очень странно, если их будет больше, чем изображения.
Баллоны в кадре не должны занимать больше 40%-50% места. Такое большое количество белого и текста по отношению к картинке подавляет ее. Комикс может превратиться в прозу и фокус восприятия читателя уйдет от действия в кадре. Мозг начинает перестраиваться на восприятие текста и подобные переключения туда и обратно утомят читателя довольно быстро. Если у вас все равно слишком много текста для кадра и он занимает больше половины кадра, то, может, лучше увеличить кадр? Или разбить текст на несколько кадров.
Или, если текста в кадре очень много, но занимает он меньше 40%, например, кадр во всю полосу или на разворот, а текста там вагон и маленькая тележка, то имеет смысл разделить его на несколько баллонов. Текст легче читать небольшими порциями, чем когда он наваливается на вас огромной глыбой.
8. Количество баллонов для одного кадра.
Количество баллонов в кадре тоже не должно зашкаливать. Большое количество баллонов в кадре вызывает мельтешение и дробит кадр, разрушая его графическое наполнение.
Единственное допустимое использование большого количества баллонов, это для добавления жизни заднему плану. Например, гомон толпы или надоедливый шум, подавляющий или раздражающий героя.
9. Наложение баллонов
10. Разделение фразы на несколько баллонов
Одну фразу можно разделить между несколькими баллонами. Этим достигается эффект паузы между фразами. Злоупотреблять этим не стоит, иначе может показаться, что ваши персонажи заикаются или туго соображают.
11. Относительное положение баллонов в кадре
Важно также (распространённая ошибка), чтобы первый баллон в кадре был не ниже и не правее остальных, иначе читателю оказывается вовсе не очевидно откуда начинать.
Кроме того, близко расположеные баллоны провоцируют на то, чтобы их читали подряд, независимо от общего правила, чем провоцируют появление неоднозначностей.
Замечательно будет, если каждый последующий баллон расположится ближе к предыдущему, но при этом правила нарушаться не будут.
Нестандартную или более явную последовательность чтения баллонов можно задать их перемычками (хвост объединяющий баллоны) между собой (это будет справедливо для задания последовательности чтения баллонов реплик одного персонажа)
12. Относительное положение баллонов в двух соседних кадрах.
Взгляд читателя, захваченного историей будет двигаться туда, куда его ведут баллоны. Порядок баллонов образуют путь взгляда как точки остановок на маршруте читателя при прочтении комикса. Усложнение этого пути может запутать читателя, привести его к вопросу какую реплику читать следующей.
Пример неправильной расстановки баллонов:
- глянь ближе! очки надень!
- сам надень!
- я тебе понастаиваю!
- а я настаиваю!
- глянь ближе! очки надень!
- сам надень!
- а я настаиваю!
- я тебе понастаиваю!
13. Направление хвостов в баллонах. Хвост баллона как композиционное решение. Хитрые приемы.
Но это еще не все. Рассмотрите пример ниже:
Хвост баллона кажется наиболее бледным и простым из инструментов баллона, но все же им можно добиться интересных эффектов. Например, обыграть композицию кадра или добавить динамики.
Видите ли, никто не ограничивал длину хвоста баллона. Европейцы и частенько американцы делают хвост баллона даже частью авторского стиля. Придавая форму и изгибы хвосту — можно сделать кадр из ничего. Хотя скорее этим эффектом пользуются, чтобы сделать баллон менее скучным.
Хвост баллона может быть использован в качестве композиционного решения, когда его форма или длина является отдельным образующим композицию объектом.
Есть исключения: в манге, где задний план часто отсутствует, хвосты баллонов очень коротки и обозначают только направление на говорящего персонажа. Когда в кадре только один персонаж, хвост от баллона можно опустить.
Если не остается места на хвост от баллона, то есть хитрый прием: отрисовывания хвоста вовнутрь баллона:
13.1 Виды хвостов баллона
У хвостов есть общая форма. Подчиняя определенному закону эту форму мы можем достигать интересных эффектов:
13.2 Хвосты между баллонами
14. режиссерское использование баллонов (короткое время кадра и длинное время кадра, герой не может толкнуть тираду во время прыжка)
15. Контур баллона. Обводка.
Контур баллона это то, что делает баллон баллоном, а не просто текстом, написанном в кадре.
Баллон является частью комикса, но в то же время он отделен от рисунка. Находясь внутри рисунка, он постоянно должен быть вне его. При просмотре страницы комикса вы всегда должны четко и сразу увидеть где находится баллон и без труда прочитать написанный в нем текст.
В примере ниже граница баллонов и их хвосты затерялись в графике. Это затрудняет их чтение (и обнаружение кто же все-таки это говорит).
Чтобы сам баллон не терялся в рисунке, там, где это необходимо, можно увеличить толщину его обводки:
16. Подчеркивание композиции
Я уже писал, что баллон является частью композиции. Они могут поддерживать динамику кадра своей общей формой.
Например, острые концы баллона с криком длиннее в сторону направления крика – задают и подчеркивают направление этого самого крика.
Узкий баллон в узком кадре поддерживает общее композиционное решение и подчеркивает его отличие. Если в узком кадре сделать обычный квадратный баллон, то эффект будет совершенно другой.
Это пример формы баллонов, поддерживающий динамику кадра. Форма баллонов повторяет лини спидлайнов.
17. Форма баллона придающая эмоциональную окраску.
Баллон сам по себе может отражать свое содержимое. Если у баллона сосульки, это значит, что реплика была произнесена очень холодно. Также можно придумать вид баллона под сухие высказывания, плоские шуточки, колкие замечания и проч.
17.1 Текст и баллон для отражения манеры разговора.
Интересная задумка, для того, чтобы выделить специфическую манеру разговора персонажа. Тогда даже при отсутствии персонажей в кадре можно будет определить кому принадлежит реплика.
Например, ваш герой — каменный тролль. Его баллоны могут представлять из себя по форме стилизованные каменные плиты, если герой эльф — стилизованный лес или цветы, если у героя грубый надтреснутый голос, то потрескавшийся и рассыпающийся баллон это хорошо отразит.
И обратно, если вы видите баллон с подобной формой, намекающей на интонацию, вам легче идентифицировать персонажа и выделять его реплики среди остальных.
Персонажа можно сделать уникальным также при помощи текста. А именно — шрифта. Если вы для персонажа пользуетесь другим шрифтом это тоже его хорошо выделит в истории.
Нарушение правил
это раздел с функциями баллонов которые нарушают главное правило легкой восприимчивости баллона и текста в нем. В то же время это совершенно особенные функции, которые могут быть очень действенными при конкретных задачах.
18. Вложение баллонов
Вложение баллонов один в другой создает два эффекта:
- реплика на фоне другого разговора.
- перебивание самого себя на середине мысли.
19. Выход текста за границы баллона
Обозначает внезапность или резкую смену интонации. Вскрик, отличающийся по громкости от общей реплики, затихающий хрип.
20. Игра персонажей с баллонами
21. Прозрачность баллона
Еще один способ сделать баллон менее режущим глаз — назначить ему прозрачность. Этот эффект по читаемости может быть хуже подкраски, потому что за прозрачным баллоном может оказаться пестрый рисунок и текст в нем потеряется.
22. Выход баллона за границы кадра
Выход баллона за границы кадра выполняет по выбору автора две задачи:
— продлевает реплику за границы пространства и времени, ограниченных рамками кадра (например эхо) или еще можно сказать, что таким образом баллон продлевает звук или реплику на следующий кадр.
— нейтрализует пространство между кадрами, сокращая время между ними до текущего мгновения.
23. Изображения в баллонах
Баллон используется для передачи авторского текста или прямой речи. Как правило с этим хорошо справляются и буквы. Но это правило можно нарушить, если требуется некоторая образность или некоторое иносказание.
Если есть ситуация, когда персонаж тем или иным способом доносит свою мысль, говоря что-то, но не умеет это делать человеческим языком: собака, инопланетянин, иностранец (обладающий древним языком или неизвестным вовсе) — тогда изображение вместо текста спасает нас.
- Передача замаскированных фраз
- Передача мыслей персонажа через картинки
24. Форма баллона в виде изображения
Форма баллона может намекать на подтекст реплики.
Вопреки распространённому мнению, целевая аудитория комиксов не ограничивается детьми. Обладая навыками рисования, любой желающий может изобразить историю. В наши дни даже неподготовленному человеку под силу создавать собственные юмористические рассказы онлайн. Для этого достаточно лишь нескольких щелчков мыши.
При желании вы даже можете сотворить собственных оригинальных персонажей. Рекомендуем воспользоваться одним из 10 полезных и удобных онлайн инструментов из этой коллекции.
Create Your Own Comic от Marvel
Marvel Comics или Marvel Worldwide Inc. – американский издатель комиксов и связанных с ними медиа. Если существует компания, которая точно знает, что необходимо для создания грандиозного комикса, то это Marvel.
Этот крутой сайт весьма прост в использовании. Вы можете применить различные сцены, задействовать персонажей и объекты из вселенной комиксов Marvel, чтобы создать свои собственные истории онлайн.
Bitstrips
Bitstrips поможет создать мультипликационную версию самого себя. Вы можете обзавестись новой прической, добавить немного макияжа, изменить размер лица и наряд. Помимо браузерной версии, существует приложение Bitstrips, которое пользователи Apple признали одним из лучших скачиваемых приложений.
ToonDoo
ToonDoo даёт вашей фантазии больше свободы. Хотя здесь предусмотрен стандартный набор символов и вариантов фона, сервис позволяет вам создавать свои собственные обои и даже свободно рисовать некоторые объекты. Кроме того, вы можете использовать в комиксах свои фотографии и манипулировать ими как вам угодно.
Comic Master
Comic Master – флэш-сайт, в котором легко ориентироваться. С помощью этого сервиса, вы можете создавать собственных героев и оригинальные сюжеты для них. Здесь вас ждёт простой пошаговый процесс, который начинается с создания макета и заканчивается удивительным завершённым комиксом.
Chogger
Chogger – это бесплатный сервис для создания комиксов с хорошей коллекцией инструментов для редактирования. Вы можете использовать существующие изображения либо нарисовать свои собственные. С Chogger даже есть возможность сделать снимок через веб-камеру и вставьте его в своё произведение. Также доступна опция, позволяющая настроить каждый добавленный кадр.
Pixton
Pixton – инструмент для создания комиксов методом drag-and-drop / тащи-и-бросай, который позволяет любому пользователю создавать свои шедевры вне зависимости от наличия художественных талантов. Все, что вам нужно сделать, это присоединиться к сообществу Pixton, тогда вы сможете начать обмениваться своими творениями с другими.
Strip Generator
Strip Generator на самом деле даёт вам не так много пространства для проявления собственного стиля – вы можете использовать лишь существующие значки и шаблоны. Тем не менее, выбор представлен многими вариантами. Чтобы сделать комикс, подберите себе кадр и перетащите к нему символы и объекты.
Write Comics
Write Comics – ещё один простой сайт для создания комиксов и историй. Вам не нужно регистрироваться или заполнять различные формы. Выберите фон в меню, персонажа и пузыри для речи. Так просто у вас появляется собственный комикс.
Witty Comics
Witty Comics. Этот онлайн-инструмент станет чрезвычайно полезен для преподавателей и студентов, которые изучают языки. Сервис позволяет изобразить диалог между двумя персонажами. Всё, что вам нужно сделать, это выбрать заранее нарисованные сцены и героев, а затем добавить к ним текст.
В комиксах редко обходятся без текста. У него есть свои недостатки в плане передачи информации, но для комикса это единственно возможный способ передать речь и звуки. Вроде бы, что может быть проще, чем написать текст на картинке? Но на практике оказывается, что правильное расположение баллонов и текста в них – это не такая уж и простая задача, и даже в профессиональных работах встречаются ошибки. В этой статье я попробую разобрать основные принципы и правила расположения текста на станице комикса.
1. Форма баллона
Существует множество форм баллонов. Главное правило при выборе формы – она должна быть приближена к эллипсу или прямоугольнику, ничего не должно сильно искривляться внутрь, чтобы не мешать восприятию текста. Форма баллона должна способствовать прочтению текста, поэтому не стоит помещать в баллон слишком длинные или слишком короткие фразы.
Чересчур вытянутые по горизонтали баллоны сложны для чтения. Длинные строчки просматривать неудобно, на разбор такого текста уходит больше времени. Более того, смотрится это некрасиво. Однако вытянутые по вертикали баллоны тоже не стоит использовать. Длинные слова неизбежно понадобится переносить, а перенос в репликах комикса – дурной тон. В конце концов, мы пишем по горизонтали, а не по вертикали, так что и блок для слов должен быть горизонтальным.
Идеальное соотношение сторон баллона от 1:1 до 1:3, в таком случае текст в нем читается легко. Это правило работает для текстовых блоков любой формы и размера.
В манге есть свои общепринятые формы баллонов (чаще всего использующиеся в жанре сёдзе, где нет сложных фонов, либо фоны отсутствуют вовсе). Вот несколько самых частых примеров:
Баллон в виде свечения с лучами или белый эллипс, обрамленный расходящимися в разные стороны линиями. Такие баллоны обычно используют в случае, если персонажа посетила какая-то шокирующая мысль или когда кто-то говорит телепатически (голос с неба, слова призрака, таинственный голос в темноте и т.д.) Белый баллон – позитивный, черный – негативный. Для большего усиления эмоций возможно добавление стилизованной молнии, ударяющей в текстовый блок.
2. Цвет баллона
Обычно пространство внутри баллонов белое, т.к. читать черный текст на белом фоне проще всего. Но бывают случаи, когда белый цвет сильно отвлекает от рисунка (например, если рисунок очень темный). Эту проблему можно решить несколькими способами. Если комикс черно-белый, зоны для реплик можно покрасить бледно-серым (неприменимо, если вы используете скринтоны для полутонов: текст на скринтоне читать невозможно).
Окрашивать баллоны в черный цвет можно, но не все подряд, иначе это утомит читателя. Вообще, черные текстовые поля используются обычно для речи одного-двух персонажей на весь комикс (например, речь Песочного человека). Таким же образом можно выделить речь какого-то персонажа цветом, оставив высказывания остальных белыми (некоторые комиксы Deadpool , где реплики главного героя выделены желтым).
Часто в американских комиксах только речь автора выделяется цветом или даже градиентной заливкой, а реплики героев остаются белыми. Я бы советовала избегать градиентов: они смотрятся бульварно. Еще вариант – цветная подложка под авторским текстом, слегка смещенная по вертикали и горизонтали.
Еще можно сделать баллоны полупрозрачными. В этом случае видно фоновый рисунок, поэтому нужно быть внимательным: пестрый фон может мешать восприятию текста. Но такие баллоны подойдут далеко не к каждой графике, поэтому используйте их с умом. Уместнее всего они в цветных комиксах, нарисованных на компьютере.
3. Контур баллона
Стандартный баллон представляет собой белую (или цветную) область, ограниченную контуром.
Контур этот не должен быть слишком тонким (так он будет рябить) или слишком толстым (он будет отвлекать от рисунка). Идеальный вариант, когда толщина линии контура баллона равна средней толщине линий контура рисунка.
Есть вариант в виде реплик без контура, но их стоит использовать с осторожностью – фон кадра не должен его перебивать. Также возможны баллоны с нечеткими или размытыми контурами, но в таком случае и сам рисунок должен быть оформлен в соответствующем стиле.
Если персонаж говорит шепотом, то иногда используется баллон с пунктирной границей.
Также у баллона может быть цветной контур, а его фон при этом оставаться белым. Такой прием иногда используется в цветной манге, где под цвет контура даже красится текст в баллоне, который соответствует конкретному персонажу.
4. Хвосты баллонов
Хвост баллона играет важную роль: он обозначает, кому принадлежит реплика. Главное правило при рисовании хвоста – он должен указывать в направлении рта говорящего, немного не доходя до головы персонажа. Это особенно важно, когда на странице много героев или нарисован детальный фон. Если хвост будет указывать на затылок персонажа, то в большинстве случаев это означает его мысли.
Формы хвостов также разнообразны, как и формы баллонов. Но не стоит их делать просто прямыми, это смотрится ужасно. Самый распространенный вариант – дуга, оканчивающаяся острым углом. Сама дуга может быть разной степени искривления в зависимости от содержания кадра или стиля художника.
В случае, если персонаж говорит резко или кричит, дугу можно заменить резкой угловатой линией. Степень изломанности хвоста также зависит от стиля художника.
Если персонаж думает, то хвост часто рисуется в виде кружков.
Длина и расположение хвоста тоже важны. Хвост не должен перекрывать важных частей рисунка, но при этом должен указывать на рот персонажа. Лучше изогнуть дугу причудливым образом, нежели упереть ее в спину героя.
В манге обычно делают очень короткие хвостики, приблизительно указывающие в сторону говорящего. Часто хвост вообще отсутствует, если герой в кадре один или по контексту и так понятно, кому принадлежит реплика. Это обусловлено тем, что в такой манге просто нет фонов, либо они достаточно простые и не мешают определить говорящего. Если же изображен сложный фон, то хвосты обычно удлиняются, как и в комиксе.
Если одну фразу произносит сразу несколько героев, то от одного баллона идет множесто хвостов – каждому персонажу свой.
Первая публикация: muha. Текст в комиксе // Ruscomix magazine. – № 3. – 2012. С. 20-33.
На этом уроке мы научимся рисовать речевые и мыслительные выноски, которые применяются в комиксах. Нередко подобный комиксовый стиль можно увидеть на сайтах для детей и начнем как всегда с HTML разметки.
HTML разметка
Первый блок изобразит выноску с пузырьками, у второго блока внизу будет характерный треугольник. У обоих блоков будет одинаковая основа - прямоугольник с закругленными углами, за которую отвечает класс bubble. Для отличительных элементов, мы создадим отдельные классы (thought и speech).
Общие CSS стили
Сначала отрисуем прямоугольники с закругленными углами для обоих блоков.
Зададим общие стили для псевдоэлементов.
.bubble:before,
.bubble:after content: ' ';
position: absolute;
width: 0;
height: 0;
>
CSS стили для верхней выноски
/* Отрисовка и позиционирование мелкого пузырька */
.thought:after width: 20px;
height: 20px;
left: 5px;
bottom: -40px;
border-radius: 18px;
>
CSS стили для нижней выноски
Указываем у квадрата у правой и нижней рамки прозрачный цвет и в результате получаем треугольник с заливкой.
Внутри треугольника с фиолетовой заливкой рисуем треугольник поменьше с белой заливкой.
Читайте также: