ГЛАВА I
Анатомия флэта
Понятие графической системы. Стиль и элементы стиля.
Стилизация. Стилистические приемы

Мой гайд — не истина в последней инстанции, и определения, приведенные в гайде, не претендуют на академическую точность. Это авторский рецепт, основанный на 5-ти летнем опыте работы дизайнером и иллюстратором.
Относить флэт к разряду стиля ошибочно. Флэт — способ упрощения графических элементов или графическая система.
Флэт как графическая система
На заре развития интернета иллюстрации не были похожи друг на друга из-за отсутствия единого стандарта . Сейчас все унифицируется, потому что на первый план выходит ЧТО ты хочешь сказать, а не КАК. Появление графической системы в данных условиях стало естественным итогом.

Плюсы и минусы внедрения графической системы:

+ предсказуемый результат
+ сокращение времени и издержек на визуализацию

- однообразность большинства работ
Отличительные особенности
плоской графики

Отказ от объема
Строгие геометрические
формы
Отсутствие перспективных
сокращений
Что значит «отсутствие перспективных сокращений»?
Флэт — это графическая система, а не стиль.
Стиль и элементы стиля
Стиль (или визуальный язык)набор приёмов, за счет которых дизайн становится узнаваемым.
Составные элементы стиля — это стилевые ограничения, стилеобразующие элементы и цветовая схема.
Стилевые ограниченияправила, которые нельзя нарушать, чтобы не потерять узнаваемость стиля. Например, уровень детализации, геометричность форм, тип стилизации объема и тд.

Стилеобразующие элементыизюминки стиля. Когда я работаю над стилеобразующими элементами, я отвечаю на вопросы: как изобразить форму теней объектов, за счет чего объект будет выделяться на фоне, как передать визуальный вес объектов на заднем плане и тд.
Объект выделяется на фоне за счет собственного контрастного цвета.
Объект выделяется на фоне за счет контрастного цвета контура.
Визуальный вес объектов на заднем плане передан с помощью менее контрастных цветов.
В этом примере я убрал заливку у объектов заднего плана, оставив лишь обводку.
Их визуальный вес стал еще меньше.
Цветовая схемаограниченный набор цветов, которые обязательно используются в каждой сцене.
Рассмотрим на примерах
Ссылки на авторов из приведенных примеров:

ElliotLim — https://www.behance.net/ElliotLim
Raul Aguiar — https://www.behance.net/raulaguiar
Andreas Kronbeck — https://www.behance.net/kronbeck
Tobias Knipf — https://www.behance.net/tobiasknipf
MAD RABBIT — https://www.behance.net/mr_mad_rabbit
Пример из моей практики
Стилевые ограничения: геометричный флэт, формальный уровень упрощения (что это такое, читаем ниже).

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

Стилизация
Главная задача иллюстратора — найти максимально выразительный способ изобразить объект в рамках стилистики.
Стилизация (в граф. дизайне) — упрощение формы, объема и материала изображаемого объекта.
У стилизации плоской графики есть два крайних уровня упрощения — абстрактный и формальный.
Уровни упрощения
Абстрактный — уровень упрощения, при котором выделяются только главные черты объекта, а остальные игнорируются..

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

А теперь рассмотрим виды стилизации.

1. Стилизация формы
Форма очертание границ объекта.

Форму надо рисовать не так, как видишь, а так, как понимаешь. Звучит сложно? Однако на практике все просто: сначала любую форму представляешь в виде простых геометрических фигур, затем анализируешь их конструкцию (например, рука — это два прямоугольника, которые сгибаются в локтевом суставе), и только потом рисуешь.
1. Представляю тело таксы в виде комбинации простых геометрических фигур.

2. Уточняю форму и дорабатываю элементы.

3. Отделяю места пересечения тела и ног и добавляю детали.
2. Стилизация объема
Объем создает ощущение реалистичности изображения.

Иллюзию объема в плоской графике можно создать при помощи блика, света, собственной и падающей теней.

Свет и типы освещения
А. Рассеянное освещение, обычное состояние объекта.

Б. Направленный источник света, подсвечивается верхняя грань объекта.

В. Направленный источник света под углом 45 градусов слева от объекта, подсвечивается верхняя и левая грань.

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

Собственная тень
Собственная тень помогает нам понять форму изображаемого предмета.
Есть много способов стилизовать тень предметов округлой формы:
А. Cтандартный вариант, тень с четким контуром по форме объекта.

Б.
Нежно-любимая фишка Kurzgesagt. Давно вышло из моды, но у mail.ru другое мнение на этот счет.

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

Г.
Напоминает мазок кисти. Классная штука.

Д.
Тень в виде текстуры, состоящей из точек.

Е.
Тень с зернистым эффектом. Появляется ощущение, что графика нарисована от руки.

В плоской графике допустимо не показывать собственную тень, а так же изменять ее форму в угоду стилю. Или когда она просто невыигрышно смотрится
(см. пример ниже).
В примере А тёмный участок в точности повторяет форму падающей тени, это смотрится не вкусно. Вариант Б выглядит привлекательнее.
При стилизации собственной тени главное не сломать форму. А сделать это очень просто, если неправильно подобрать тон тени (1) или днеправильно стилизовать подсвеченную часть сигареты (2). В итоге сигарета справа приобрела граненную форму, хотя должна иметь цилиндрическую
Падающая тень
Активно участвует в стилизации объема.

С помощью нее можно показать, что одна часть объекта выступает над другой:

Или показать направление источника света:
Или форму объекта, на который падает тень:
Контрастные падающие тени приближают объект к зрителю (А), а неконтрастные — отдаляют его (Б):
Для падающих теней объектов, находящихся на заднем плане, уместно применять негативное пространство. Это модная фишка, но ее стоит использовать с умом: на объектах переднего плана она будет смотреться нелепо, т.к. зрителю будет казаться, что в этом месте форма разрезана.
Падающая тень так же может быть произвольной длины и формы, выступая таким образом стилеобразующим элементом:
Фаски
В реальности многие окружающие нас объекты не имеют идеально-острых углов на стыке двух сторон. Чаще всего там находится небольшое скругление (галтель) или скошенный край (фаска). Последний нас и интересует.
Размер фаски зависит от степени скошенности. Даже если ты не видишь фаску, это не значит, что ее нет.
Фаски помогают понять, из какого материала состоит поверхность изображаемого предмета. На матовых объектах фаска может быть едва заметна, в то время как на глянцевых — очень контрастна.
Графический дизайн предполагает огромное количество визуальных решений для акцентирования фаски. Однако в плоской графике использование фасок не является панацеей: показывать их или нет, зависит от стиля, в котором работает автор (А, В, Г, Д). Или от материала объекта (Б):
Кстати о материале. Если мы хотим сказать, что изображаемый предмет имеет стеклянный (или любой другой прозрачный) тип поверхности, то без фаски никуда:
Ноутбук без фаски выглядит негармонично: он похож на аппликацию, приклеенную к фону (А).
С добавлением фасок приходит объем, и ноутбук выглядит «вкуснее» (Б).
С помощью фаски можно сделать резкие очертания объекта мягче (Б).
Все приведенные здесь правила допустимо
игнорировать в угоду стилистике.
Но не знать — нельзя.

3. Стилизация материала и фактуры
3.1 Материал — то, из чего изготовлен объект.

Бумага, золото, стекло — это все материал. Задача иллюстратора — помочь зрителю понять, из чего сделан объект.

А. Золото. Основной цвет желтый, теневая часть оранжевая, подсвеченная часть желтая с зеленоватым оттенком. Достаточно много бликов.

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

В.
Газета и бумажные изделия. При рисовании таких объектов нужно обязательно загибать один из уголков: этот маленький штрих сообщает зрителю, что перед ним не просто прямоугольник, а бумага. Бумагу также можно сворачивать. Или мять. Если чуть срезать один уголок, создастся ощущение, что бумага потрепанна. Самое главное — объект из бумаги не должен быть похож на прямоугольник.

Г.
Стеклянная колба и все другое из стекла. Яркий контур по форме и сочный блик — весь секрет успеха.
3.2 Фактура узор, который находится на поверхности объекта.

В плоской графике фактура используется:

1) в качестве стилеобразующие элемента
(А);
2) чтобы показать текстуру изображаемого объекта (листья на рисунке Б);
3) для композиционных целей, например, увеличения визуального веса
главного объекта, заполнения пустых пространств
(горшок на рисунке Б).
(подробнее о визуальном весе в главе II)
Фактура может иметь форму собственной тени, падающей, показывать текстуру объекта или использоваться в декоративных или композиционных целях.

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

Уменьшает визуальный вес второстепенных объектов или объектов на заднем плане. Повторяет форму падающей тени (1, 2) или выступает в качестве визуальных разделителей между отдельными частями объектов (3)
Негативное пространство так же можно использовать в качестве визуальных разделителей для объектов на переднем плане, чтобы избавиться от ощущения «скомканности» (А).
Или для объектов, залитых одинаковым цветом (всплывающие баблы, контурные иконки, пиктограммы), чтобы добавить изображению глубины и объема. Негативное пространство будет в местах пересечения частей одного объекта или в местах пересечения двух разных объектов:
Негативное пространство часто используется в дизайне логотипов и монограмм.
Негативное пространство формирует контр-форму, с помощью которой можно привносить новые смыслы:
2. Линии с наклоном, кратным 45 градусам

Если в форме объекта много наклонных линий, желательно использовать угол 45° (А). Будет гораздо лучше, чем при хаотичным угле наклона (Б).
3. Шурёшки

Шуречки позволяют добавить композиции динамики
(подробнее о статичной/динамичной композиции в главе II), уравновесить ее, избавиться от больших пустых пространств или сделать иллюстрацию сочнее, за счет дополнительных цветовых пятен.
На рисунке А композиция скучная. Не хватает динамики: монета висит в воздухе. Напрашиваются линии, которые акцентировали бы её падение. Нет равновесия: левая часть композиционно тяжелее правой. А в цветовой гамме не хватает холодных оттенков.
(в иллюстрации должны присутствовать как теплые, так и холодные оттенки, подробнее об этом в главе IV).
На рисунке Б этих проблем нет.

Шурешки могут быть:

I.
В виде абстрактных геометрических фигур (квадраты, круги, треугольники, точки, прямые или зигзагообразные линии)

II.
В виде подходящих по смыслу фигур узнаваемой формы (сердечки, баблы с сообщениями, иконки приложений).
В моушн-дизайне шурёшки используют, чтобы сохранять динамику, когда основное действие закончилось.
4. Контрастные тени

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

Этот прием также выигрышно смотрится, если его применять к собственным теням объекта:
С помощью этого приема графика приобретает более строгий вид:
5. Визуальные разделители

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

Применяется в местах пересечений частей объекта, чтобы они
не сливались в сплошное пятно.

А. Самый простой вариант — разделение по цвету. Тяжеловесно, примитивно, немодно.

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

В. Когда в иллюстрации есть контуры, разделители не нужны, т.к. контуры сами выполняют роль разделителей.

Г. Дизайнерский вариант — на сгибе передней части контрастная падающая тень, на сгибе задней части — негативное пространство.

Эти варианты можно комбинировать (например, в вариант В добавить падающие тени из варианта Г), добиваясь интересного результата. В этом и заключается прелесть графического дизайна — огромный простор для самовыражения и возможность миксовать различные стили.


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

6. Отказ от дополнительных оттенков

Не обязательно делать заливку у всех объектов. Многообразие цветов и оттенков для плоской графики — это плохо.
Узнаваемый стиль формируются за счет системы ограничений. Это правило не теряет актуальности и при выборе цветовой палитры.

7. Ракурс

Есть объекты, которые лучше размещать только в ракурсе 3/4, потому что их простая геометрическая форма вызывает сложности с распознаванием анфас или в профиль.
Под буквой А ракурсы выбраны неудачно — тяжело понять, что за объект изображен. У Б этого недостатка нет.

Cтарайся по возможности избегать ракурсов анфас и в профиль — они малоинформативны.

ДОПОЛНЕНИЕ
Что читать
1. Николай Ли «Основы учебного академического рисунка»
Настоятельно рекомендую прочитать эту книгу всем без исключения начинающим дизайнерам (и тем более иллюстраторам). Она поможет понять, как распространяется свет по форме предмета, постичь необходимые основы академического рисунка и понять, как лепить объем.
Чтобы делать профессиональные иллюстрации, совершенно необходимо понимать как распространяется свет по геометрическим примитивам.


2. Моя статья «Дурные штампы в плоской графике»

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

3. Моя статья «Что модно в плоской графике»
Если в предыдущей статье я рассказал «как не надо делать», то в этой я рассказываю «как надо».

Что дальше?
Дорогой друг, я очень рад, что ты дочитал третью главу моего гайда до конца. Надеюсь, ты узнал для себя что-то новое.
Теперь есть 2 варианта дальнейшего развития событий.


1 вариант — «Я тебе обязательно позвоню»

Ты почерпнул полезные фишки (хоть и далеко не все) из моего арсенала и продолжишь совершенствоваться в искусстве плоской графики сам.
Хороший план. Если, конечно, не пугает статистика:

2 вариант — «Я хочу от тебя детей!»

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

У этих трех групп людей есть кое-что общее. Для них актуальна формула:

стоимость моего свободного времени > стоимости обучения
Что включено в стоимость?
— теоретический материал с поясняющими иллюстрациями

— сборник видео-материалов с подробным объяснением процесса работы и отрисовки реальных объектов (6 часов)

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


— бесплатный доступ ко всем моим вебинарам и мастер-классам (в т.ч. видеозаписи уже вышедших) в 2017 году

Подробнее о доступных форматах, а так же о том, как проходит обучение прочитать можно в статье "Центр подготовки графических дизайнеров"
А если ты вообще молодец, тогда я возьму
тебя к себе в команду и мы будем работать вместе.
Но только если ты вообще молодец.
Имей это ввиду.
Сколько стоит полноценный гайд?
5 000 рублей

Для всех, кто участвовал в конкурсе репостов, при покупке гайда до 7 марта
7 500 рублей

Для тех, кто не участвовал в конкурсе репостов, а так же при покупке гайда после 7 марта
Сомневаешься, стоит ли оно своих денег?
Правильно сомневаешься! Поэтому
обязательно ознакомься с отзывами тех,
кто полностью или частично
прошел у меня обучение

По вопросам приобретения (и по всем остальным вопросам) пиши
Вконтакте http://vk.com/mr.mad_rabbit или в Телеграме @imadrabbit




И помни: путей много, но истинный лишь один.

Твой добрый и немного безумный друг,
MAD RABBIT.


Материал
подготовили:
MAD RABBIT
Текст, иллюстрации
Мария Симоненко
Редактор
Егор Ворон
Саунд-дизайн
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website