3 типичные ошибки в флэт-иллюстрации
И как их исправить.
Это вольная адаптация статьи Мэд Рэбита. Она о том, как сделать флэт-иллюстрации более выразительными. Мэд отличный иллюстратор с неоднозначным чувством юмора.
Мэд учит иллюстрации. В этой статье он рассказывает о самых частых косяках, которые видел у своих студентов.
Ошибка 1. Начинающие ломают форму
Сигарета справа приобрела гранёную форму, потому что художник не знал, как работать со светом и тенью. Хорошей базой для таких знаний была бы школа академического рисунка. Для тренировки нужно рисовать шары и другие простые геометрические формы.
Мотивы решения ясны: захотелось сделать форму сочнее и графичнее, но из-за лишнего перехода из тёмно-серого в белый образовалась ненужная грань.
Плоские тени — основной способ показать форму иллюстрации в флэте. Вот два объекта:
Оба варианта наложения тени имеют право на существование. От чего зависит, какой вариант выбрать?
В рисунке А нижняя поверхность плоская. В Б тень падает на цилиндр. Посмотри на реальный объект. Тень ведёт себя так же:
В плоской графике мы сознательно упрощаем детали, чтобы сделать их чище. При этом мы не хотим терять ощущение объёма. В этом ракурсе линия горизонта находится на на уровне глаз и у объекта видна только одна сторона. Если бы не падающая тень, цилиндр ничем бы не отличался от прямоугольника.
У объекта А него нет глубины, потому что нет этой зацепки. Его неинтересно разглядывать. В объекте Б появился объем, видно направление источника света.
Задача флэт-иллюстратора не игнорировать объем, а стилизовать его.
Упрощать так, чтобы подчеркнуть форму предмета, не меняя её.
Ссылки по теме
Ошибка 2. Начинающие выбирают невыразительный ракурс
Они работают только в анфас. Но большинство предметов в в этом ракурсе смотрятся скучно и не передают своей реальной формы.
На разборе одной из работ Мэд назвал ракурс в анфас в честь ученицы:
Флэт-иллюстрация совершенно не отменяет того что можно использовать интересную перспективу. Классический вариант — это изометрия.
Не обязательно избегать прямого ракурса, но тогда нужно подсказывать объём, делая картинку многослойной и выделяя, что ближе к зрителю.
Вот два рисунка чашки:
Первое, что мы определяем — источник света. В данном случае он слева.
На рисунке А объем недостаточно проработан: высота кружки и положение рукоятки находятся на одном уровне и сливаются в одну форму. Однако, рукоятка должна быть дальше от зрителя, чем край кружки. Значит, на неё должна падать тень.
Исправляем ошибку на рисунке Б. Стало лучше, но пока всё-ещё скучно. Что если добавить блюдце?
Форма стала более узнаваемой, а иллюстрация глубже, её стало интереснее разглядывать.
Мэд активно применяет его в своих иллюстрациях:
Объекты могут не только лежать друг на друге, но и парить. Это классно смотрятся в изометрических иллюстрациях, о которых мы поговорим в другой раз:
Чтобы делать ракурс выразительным, нужно много практиковаться в работе с композицией. Нужно больше смотреть на чужие работы, замечать детали, копировать фишки и анализировать.
Ошибка 3. Начинающие не используют потенциал цвета
Для них покрасить объект — это неприятная необходимая процедура. Причина провала в том, что нет понимания, как смешивать цвета.
Cлева показано, как многие новички любят подбирать цвет тени: берут исходный цвет, смешивают его с его же оттенком потемнее. Это скучно. В реальном мире тени всегда имеют оттенок в зависимости от освещения. В мире флэт-иллюстрации этот оттенок можно дополнительно подчеркнуть.
Как нарисовать персонажа-дизайнера в плоском стиле в Adobe Illustrator
В этом руководстве мы будем создавать персонажа-дизайнера за работой, сидящего за своим столом и рисующего на планшете. Для создания иллюстрации в модном плоском стиле, мы будем использовать множество базовых геометрических фигур, объединяя и трансформируя их при помощи Эффектов деформации, панели Обработки контуров, Инструмента «Создание фигур» и других полезных инструментов, которые помогут нам создать иллюстрацию без использования графического планшета и не требующую особых навыков рисования.
Как вы можете увидеть на картинке ниже, мы можем добавить ещё несколько объектов интерьера к нашей иллюстрации, сделав её более детальной. Взгляните на расширенную версию Иллюстрации хипстера-дизайнера на Envato Elements, где вы найдёте дополнительные элементы и альтернативные цветовые решения!
1. Как создать стол в Adobe Illustrator
Шаг 1
Давайте начнём с создания столешницы. Возьмите Инструмент «Скруглённый прямоугольник» и создайте светло-коричневую фигуру 540 х 10 пикселей со скруглёнными углами.
Мы можем настроить Угловой радиус фигуры, если выделим её Инструментом «Прямое выделение» (А) и затем либо установим нужное значение (5 пикселей) на панели управления сверху, либо перетащим маркер круга Динамических углов вручную.
Скопируйте фигуру и Вставьте её на передний план (Control-C > Control-F). Сделайте новую фигуру короче (450 x 10 пикселей), сдвинув её левый край вправо. Сделайте цвет заливки слегка светлее.
Шаг 2
Теперь возьмём Инструмент «Карандаш» (N) и создадим простую деревянную текстуру на столе. Дважды кликните на Инструменте «Карандаш»(N) для редактирования настроек и начните рисовать плавные волнистые линии поперёк светло-коричневой части столешницы.
Выделите все линии, сгруппируйте (Control-G) их и установите Толщину на 1 пиксель на панели Обводки (Окно > Обводка). Настройте цвет Обводки линий на панели Цвета, сделав их слегка темнее цвета столешницы.
Шаг 3
Теперь спрячем ненужные кончики линий при помощи Обтравочной маски.
Скопируйте (Control-C > Control-F) светло-коричневую фигуру столешницы и Отправьте на передний план (Shift-Control-]).
Удалите цвет Заливки и Обводки верхней фигуры и выделите её вместе с линиями. Кликните правой кнопкой мыши и Создайте обтравочную маску. Готово! Теперь все линии спрятаны внутри верхней фигуры.
Проделайте то же самое с тёмной частью столешницы.
Шаг 4
Давайте перейдём к ножкам стола. Возьмите Инструмент «Прямоугольник» (М) и создайте два тёмно-серых столбика 12 х 85 пикселей под левой стороной столешницы.
Скопируйте (Control-C > Control-F) обе фигуры, сделайте их темнее и сожмите их, сдвинув нижнюю часть вверх, сформировав таким образом тень от столешницы.
Снова скопируйте столбики, удерживая Alt, и сожмите фигуры. Сдвиньте нижний край вниз, чтобы сделать ножки выше (7 x 215 пикселей).
Шаг 5
Создайте скруглённый прямоугольник 100 х 10 пикселей в нижней части ножек. Скопируйте его и сделайте верхнюю копию светлее и короче (80 х 20 пикселей), добавив немного объёма нашей плоской картинке.
Шаг 6
Сгруппируйте (Control-G) все части ножек, удерживая Alt-Shift, и перетащите фигуру на противоположную сторону стола, создав копию.
Отличная работа! Наш стол готов. Двигаемся дальше!
2. Как создать плоский компьютер и графический планшет
Шаг 1
Давайте начнём с создания монитора. Возьмите Инструмент «Скруглённый прямоугольник» и создайте фигуру 135 х 85 пикселей с Угловым радиусом 10 пикселей.
Скопируйте фигуру и Вставьте её дважды на Передний план (Control-C > Control-F > Control-F). Сдвиньте верхнюю фигуру вправо при помощи клавиши «Стрелка вправо» на клавиатуре, либо перетащите её Инструментом «Выделение» (V), удерживая клавишу Shift.
Теперь выделите верхнюю фигуру и ту, что под ней. Возьмите Инструмент «Создание фигур» (Shift-M), удерживая Alt, и наведите курсор на те части, которые нам нужно удалить. Кликните на ненужных частях, оставив только узкую полоску по левому краю прямоугольника. Сделайте фигуру слегка светлее, сформировав блик.
Шаг 2
Теперь, когда экран готов, давайте добавим подставку. При помощи Инструмента «Прямоугольник» (М) создайте прямоугольник 45 х 55 пикселей, слегка темнее экрана.
Выделите верхнюю правую опорную точку Инструментом «Прямое выделение» (А) и сделайте угол скруглённым, установив его Радиус на 15 пикселей.
Шаг 3
Скопируйте (Control-C > Control-F) подставку и сдвиньте копию далеко влево. Выделите обе фигуры и используйте Инструмент «Создание фигур» (Shift-M), удерживая клавишу Alt для удаления верхней фигуры и той части, где обе копии перекрывают друг друга.
Добавьте блик к подставке, как мы сделали это для экрана в Шаге 1.
Шаг 4
Поместите тёмно-серый прямоугольник на монитор, создав тень от подставки. Несколько раз нажмите Control-[, чтобы Отправить фигуру назад.
При помощи Инструмента «Прямоугольник» (М) поместите фигуру 60 х 5 пикселей в нижнюю часть подставки. Сделайте её левые углы полностью закруглёнными.
Завершите создание компьютера, украсив его круглым стикером 20 х 20 пикселей при помощи Инструмента «Эллипс» (L). Удерживайте Shift во время создания круга, чтобы сделать его ровным.
Шаг 5
Теперь изобразим графический планшет. Начните с создания скруглённого прямоугольника 100 х 50 пикселей с Угловым радиусом 10 пикселей.
Выделив фигуру, дважды кликните на Инструменте «Наклон» (вы можете найти его в том же выпадающем меню, где и Инструмент «Масштаб» (S)) и установите Угол наклона на 40 градусов. Нажмите ОК для применения изменений.
Создайте более светлую полоску для блика на левом крае фигуры.
Шаг 6
Теперь создадим тонкую подставку. Возьмите Инструмент «Прямоугольник» (М) и создайте фигуру 60 х 33 пикселей с тёмно-серой тонкой Обводкой и без Заливки.
Выделите нижние опорные точки Инструментом «Прямое выделение» (А) и нажмите Enter, чтобы открыть окно Перемещения. Установите Горизонтальную позицию на 10 пикселей, Вертикальную – на 0 пикселей и нажмите ОК, чтобы сдвинуть нижний край фигуры вправо.
Шаг 7
Выделив нижние опорные точки Инструментом «Прямое выделение» (А), сделайте углы скруглёнными на 8 пикселей. Завершите создание планшета, добавив сжатый эллиптический стикер в центре.
Похоже, устройства готовы! Продолжим!
3. Как нарисовать плоскую кофейную кружку
Шаг 1
Давайте создадим кружку из прямоугольника. Создайте зелёную фигуру 32 х 25 пикселей. Сделайте её верхние углы слегка скруглёнными и затем перейдите к нижним углам и установите Радиус на 9 пикселей.
Создайте светло-зелёный блик на левом крае кружки.
Шаг 2
Давайте добавим ручку. Создайте прямоугольник 12 х 15 пикселей. Выделите его верхнюю и нижнюю опорные точки Инструментом «Прямое выделение» (А) и сделайте углы скруглёнными на 5 пикселей.
Скопируйте (Control-C > Control-F) фигуру, удерживая Alt-Shift, и сделайте копию меньше. Выделите обе фигуры и примените функцию «Вычитание переднего» на панели Обработки контуров, чтобы вырезать верхнюю фигуру, проделав отверстие в центре ручки.
Шаг 3
Присоедините ручку к кружке и Отправьте её на задний план (Shift-Control-[). Завершите создание кружки, добавив маленький узкий прямоугольник на нижний край.
4. Как создать плоскую книгу
Шаг 1
Давайте создадим тёмно-серый прямоугольник 67 х 12 пикселей и сделаем его левые углы полностью скруглёнными. Перейдите в Объект > Контур > Параллельный контур и установите значение Параллельности на 2 пикселя. Сделайте внешнюю фигуру слегка светлее.
Скопируйте фигуру поменьше дважды (Control-C > Control-F > Control-F) и заполните обе копии белым цветом. Сдвиньте верхнюю копию вправо, сделав так, чтобы она перекрывала правый край книги.
Шаг 2
Выделите верхнюю копию и большую светло-серую фигуру и примените функцию «Вычитание переднего» на панели Обработки контуров, чтобы вырезать дыру в серой фигуре.
Сделайте кончики обложки книги скруглёнными.
Шаг 3
Используйте Инструмент «Перо» (Р) или «Отрезок линии» (\) и удерживайте Shift для создания прямых горизонтальных линий для листов бумаги. Спрячьте ненужные части внутри Обтравочной маски, как мы делали это с деревянной текстурой столешницы.
Создайте мягкую тень, скопировав фигуру бумаги и сдвинув её вправо. Удалите ненужную часть при помощи Инструмента «Создание фигур» (Shift-M), удерживая клавишу Alt.
Вот она! Наша книга готова!
Шаг 4
Теперь мы можем разместить все объекты на столе. Вы можете добавить больше книг, если хотите, изменив их размер и цвета.
5. Как нарисовать персонажа-хипстера в плоском стиле
Шаг 1
Давайте начнём с головы. Создайте скруглённый прямоугольник 50 х 80 пикселей. Установите Угловой радиус его верхних углов на 19 пикселей и нижние углы на 23 пикселя.
Используйте Инструмент «Скруглённый прямоугольник» и Инструмент «Эллипс» (L), чтобы добавить глаза, брови и нос.
Шаг 2
Теперь давайте создадим кисть, чтобы нарисовать хипстерские усы! Начните с создания маленького круга размером 10 х 10 пикселей. Выделите его левую опорную точку Инструментом «Прямое выделение» (А) и перетащите её подальше влево. Преобразуйте выделенную опорную точку в угол на панели управления наверху.
Шаг 3
Перетащите созданную фигуру на панель Кистей (Окно > Кисти) и создайте Объектную кисть. Оставьте все параметры по умолчанию. Вы всегда можете вернуться к этому окну Настроек, дважды кликнув на кисти на панели Кистей.
Теперь возьмите Инструмент «Кисть» (В) и нарисуйте закрученные усы. Настройте Толщину обводки, если нужно, и разберите оформление (Объект > Разобрать оформление) фигуры. Несколько раз нажмите Control-[, чтобы расположить усы под носом.
Шаг 4
Теперь добавим волосы. Скопируйте фигуру головы и дважды Вставьте её на передний план (Control-C > Control-F > Control-F). Сдвиньте верхнюю копию вниз и вправо, как показано на картинке внизу (синяя фигура).
Выделите верхнюю копию и ту, что под ней, и примените функцию «Вычитание переднего» на панели Обработки контуров. Заполните оставшуюся фигуру таким же тёмно-коричневым цветом, какой мы применили для усов.
Баки получились слишком длинными, поэтому давайте подровняем их. Возьмите Инструмент «Ластик» (Shift-E), удерживайте Alt и обрежьте нижнюю часть.
Шаг 5
Теперь нарисуем бороду при помощи той же техники. Скопируйте фигуру лица дважды и сдвиньте верхнюю копию вверх и вправо. Используйте функцию «Вычитание переднего», чтобы избавиться он ненужной части. Сделайте бороду темнее волос.
Шаг 6
Давайте придадим форму причёске персонажа. Возьмите Инструмент «Прямоугольник» (М) и создайте тёмно-коричневый прямоугольник 65 х 30 пикселей. Можно взять цвет бороды при помощи Инструмента «Пипетка» (I).
Давайте перейдём на панель Выравнивания, чтобы присоединить левый край волос к левой стороне головы. Выделите фигуру волос и головы и один раз кликните на фигуре головы, чтобы сделать её Ключевым объектом (вы увидите жирное выделение вокруг неё). Нажмите на Горизонтальное выравнивание по левой стороне, чтобы приделать волосы к голове.
Выделите верхний и нижний правые углы волос Инструментом «Прямое выделение» (А), чтобы сделать их полностью закруглёнными.
Наконец, выделите верхнюю левую опорную точку и сделайте этот угол скруглённым.
Шаг 7
Теперь, когда голова готова, давайте перейдём к телу! Начните формировать рубашку, создав тёмно-синий прямоугольник 70 х 135 пикселей. Дважды кликните на Инструменте «Наклон» и установите Угол наклона на 20 градусов. Сделайте углы скруглёнными на 20 пикселей.
Шаг 8
Добавьте маленький тёмно-коричневый прямоугольник со скруглённым низом для шеи. Добавьте розовый скруглённый прямоугольник побольше для воротника. Нажмите Control-[, чтобы разместить его под фигурой шеи.
Шаг 9
Теперь давайте сформируем руки. Создайте прямоугольник размером приблизительно 17 х 96 пикселей. Он не обязательно должен быть точно такой же высоты, просто убедитесь, что он вписывается в пространство между верхним краем рубашки и верхним краем стола.
Выделите его нижнюю левую опорную точку и сделайте угол полностью скруглённым, сформировав локоть. Скопируйте созданную фигуру и поверните её на 90 градусов, удерживая Shift.
Добавьте маленький круг для кулака и спрячьте его под графическим планшетом.
Шаг 10
Создайте белый стилус из узкого прямоугольника со скруглёнными углами. Поверните его и поместите в руку персонажа.
Давайте добавим рукав к верхней части руки. Скопируйте вертикальный элемент руки и используйте Инструмент «Ластик» (Shift-E), удерживая Alt для удаления нижней половины копии. Заполните оставшуюся фигуру ярко-розовым цветом.
Давайте добавим противоположную руку. Выделите вертикальные элементы руки и дважды кликните на Инструменте «Зеркальное отражение» (О). Отразите фигуру по Вертикальной оси и нажмите «Копировать». Присоедините вторую руку к телу и Отправьте её на Задний план (Shift-Control-[), за рубашку.
Шаг 11
Скопируйте фигуру и используйте Инструмент «Ластик» (Shift-E) для удаления верхней части, оставив только узкую часть под столом. Заполните её цветом потемнее – это будет тень. Скопируйте новую часть и снова сотрите, заполнив оставшуюся часть тёмно-синим цветом для джинсов.
Шаг 12
Теперь давайте создадим ноги. Создайте прямоугольник 23 х 130 пикселей более светлого синего цвета. Выделите его верхнюю правую опорную точку и оба нижних угла Инструментом «Прямое выделение» (А) и сделайте их полностью скруглёнными.
Добавьте прямоугольник поменьше на верхнюю часть ноги и сделайте его полностью скруглённым. Таким образом мы изображаем согнутое колено.
Шаг 13
Скопируйте ногу и используйте Инструмент «Ластик» (Shift-E) для удаления копии с её верхней части, оставив только маленький кусок внизу. Заполните его коричневым тоном кожи. Изобразите подвёрнутую штанину, добавив светло-голубой скруглённый прямоугольник поперёк ноги.
Шаг 14
Теперь добавим обувь. Начните с тёмно-синего прямоугольника 40 х 20 пикселей. Отправьте его на Задний план (Shift-Control-[) и присоедините к ноге.
Создайте белый прямоугольник 25 х 25 пикселей для кончика ботинка и присоедините его к правому краю тёмно-синей фигуры. Выделите её верхние углы и сделайте их скруглёнными на 12 пикселей.
Возьмите Инструмент «Карандаш» (N) и нарисуйте несколько линий вдоль носка ботинка. Используйте Обтравочную маску, чтобы спрятать ненужные часть линий.
Завершите создание ботинка, добавив узкий белый прямоугольник внизу для подошвы. Сделайте его нижний левый угол скруглённым и украсьте подошву узкой тёмно-серой полоской.
Шаг 15
Теперь добавим вторую ногу! Присоедините прямоугольник 80 х 23 пикселя к нижней части нашего персонажа. Добавьте более светлый прямоугольник поменьше на верх, выровняв его по левому краю предыдущей фигуры.
Сделайте левые углы новой фигуры полностью скруглёнными.
Теперь давайте согнём ногу в колене, добавив повёрнуты узкий прямоугольник. Я просто скопировала его с первой ноги и использовала Инструмент «Выделение» (V) для вращения на 250 градусов, подогнав под область колена.
Шаг 16
Добавьте второй ботинок и сделайте все элементы ноги слегка темнее, чтобы картинка получилась более трёхмерной.
Прекрасно! Похоже, наш персонаж готов. Давайте перейдём к финальной части нашего руководства.
6. Как нарисовать современный стул
Шаг 1
Наш персонаж всё ещё парит в воздухе, поэтому давайте добавим стул, чтобы ему было удобно.
Начните с создания коричневого прямоугольника 87 х 105 пикселей для спинки стула. Выделите его нижний левый угол и нажмите Enter, чтобы открыть окно Перемещения. Установите значение Горизонтального положения на 7 пикселей, Вертикального – на 0 пикселей и нажмите ОК, чтобы сдвинуть опорную точку на 7 пикселей вправо.
Повторите то же самое для противоположной опорной точки, но в этот раз установите Горизонтальное значение на -7 пикселей, сдвинув точку влево.
Наконец, выделите оба верхних угла и сделайте их полностью скруглёнными.
Шаг 2
Выделив фигуру, перейдите в Объект > Контур > Параллельный контур и установите значение Параллельности на -8 пикселей. Выделите обе фигуры и нажмите на «Вычитание переднего», чтобы вырезать дыру в центре.
Используйте Инструмент «Ластик» (Shift-E) и удерживайте клавишу Alt для удаления нижней части рамки.
Добавьте три вертикальные деревянные планки спинке стула, поместив их за рамку (Shift-Control-[).
Шаг 3
Добавьте спинку стула и деревянный низ. Украсьте их простой деревянной текстурой при помощи той же техники, что и для деревянной столешницы.
Шаг 4
Теперь нам нужно добавить ножку нашему стулу. Я хотела изобразить высокий стул, как те, что стоят в барах. Используйте Инструмент «Прямоугольник» (М) для формирования элементов, использовав ножки стола как образец для фигур и цветов.
Отлично! Наш дизайнер-хипстер и его творческое рабочее место готовы!
Отличная работа! Надеюсь, вам понравилось следовать этому руководству, и вы нашли для себя новые приёмы и советы, которые вдохновят вас на создание других иллюстраций в плоском стиле!
Не забудьте скачать Набор дизайнера-хипстера в плоском стиле на Envato Elements со всеми дополнительными элементами и альтернативным светловолосым персонажем!
Если вам нравится создавать плоских персонажей и интерьеры, у меня есть ещё одно интересное руководство для вас! Не упустите его:
