3 типичные ошибки в флэт-иллюстрации | by Саша Окунев | /designer
И как их исправить.
Это вольная адаптация статьи Мэд Рэбита. Она о том, как сделать флэт-иллюстрации более выразительными. Мэд отличный иллюстратор с неоднозначным чувством юмора.
Мэд учит иллюстрации. В этой статье он рассказывает о самых частых косяках, которые видел у своих студентов.
Достаточно было добавить еле-заметную теньСигарета справа приобрела гранёную форму, потому что художник не знал, как работать со светом и тенью. Хорошей базой для таких знаний была бы школа академического рисунка. Для тренировки нужно рисовать шары и другие простые геометрические формы.
Мотивы решения ясны: захотелось сделать форму сочнее и графичнее, но из-за лишнего перехода из тёмно-серого в белый образовалась ненужная грань.
Плоские тени — основной способ показать форму иллюстрации в флэте. Вот два объекта:
Оба варианта наложения тени имеют право на существование. От чего зависит, какой вариант выбрать?
В рисунке А нижняя поверхность плоская.
В Б тень падает на цилиндр. Посмотри на реальный объект. Тень ведёт себя так же:
В плоской графике мы сознательно упрощаем детали, чтобы сделать их чище. При этом мы не хотим терять ощущение объёма. В этом ракурсе линия горизонта находится на на уровне глаз и у объекта видна только одна сторона. Если бы не падающая тень, цилиндр ничем бы не отличался от прямоугольника.
У объекта А него нет глубины, потому что нет этой зацепки. Его неинтересно разглядывать. В объекте Б появился объем, видно направление источника света.
Вывод:
Задача флэт-иллюстратора не игнорировать объем, а стилизовать его.
Упрощать так, чтобы подчеркнуть форму предмета, не меняя её.
Ссылки по теме
- Николай Ли — Основы академического рисунка (Озон, 700 р.)
- Основы объёмного рисования в Photoshop. Большой часовой урок, из которого можно узнать, как правильно работать с тенями.
- academic drawing simple shape на Пинтересте
Они работают только в анфас. Но большинство предметов в в этом ракурсе смотрятся скучно и не передают своей реальной формы.
На разборе одной из работ Мэд назвал ракурс в анфас в честь ученицы:
Флэт-иллюстрация совершенно не отменяет того что можно использовать интересную перспективу. Классический вариант — это изометрия.
Не обязательно избегать прямого ракурса, но тогда нужно подсказывать объём, делая картинку многослойной и выделяя, что ближе к зрителю.
UnsplashВот два рисунка чашки:
Первое, что мы определяем — источник света. В данном случае он слева.
На рисунке А объем недостаточно проработан: высота кружки и положение рукоятки находятся на одном уровне и сливаются в одну форму. Однако, рукоятка должна быть дальше от зрителя, чем край кружки. Значит, на неё должна падать тень.
Исправляем ошибку на рисунке Б. Стало лучше, но пока всё-ещё скучно. Что если добавить блюдце?
Форма стала более узнаваемой, а иллюстрация глубже, её стало интереснее разглядывать.
Хороший приём:
Клади объекты друг на друга.
Мэд активно применяет его в своих иллюстрациях:
Объекты могут не только лежать друг на друге, но и парить. Это классно смотрятся в изометрических иллюстрациях, о которых мы поговорим в другой раз:
Чтобы делать ракурс выразительным, нужно много практиковаться в работе с композицией. Нужно больше смотреть на чужие работы, замечать детали, копировать фишки и анализировать.
Для них покрасить объект — это неприятная необходимая процедура. Причина провала в том, что нет понимания, как смешивать цвета.
Cлева показано, как многие новички любят подбирать цвет тени: берут исходный цвет, смешивают его с его же оттенком потемнее. Это скучно. В реальном мире тени всегда имеют оттенок в зависимости от освещения. В мире флэт-иллюстрации этот оттенок можно дополнительно подчеркнуть.
Что делать:
Смешивай исходный цвет с его комплиментарным аналогом.
Чтобы найти комплиментарный, воспользуйся цветовым кругом Йоханнеса Иттена:
Цветовой круг подсказывает комбинации цветов.
Комплиментарные цвета — один из способов создавать приятную глазу палитру. Главное, чтобы комплиментарного цвета было совсем чуть-чуть. Подробнее про цвета — в ролике Beginning Graphic Design: Color.
Курсы Мэд Рэбита. Подробнее:
Центр подготовки графических дизайнеров и иллюстраторов
Объявляет набор в свои ряды.
designpub.ru
Я веду /designer — телеграм-канал о Скетче и дизайне интерфейсов. В нём я рассказываю о горячих клавишах, плагинах, прототипах, дизайн-системах и UI-анимации.
Почему веб-дизайн отходит от привычных flat-иллюстраций к 3D — Дизайн на vc.ru
Дизайн
Alente
Почти 10 лет flat-дизайн был одним из главных направлений в вебе.
Сегодня его сменяют другие тренды, по которым в очередной раз становится становится понятно: новое — это хорошо забытое старое. Тщательно переработанное и переосмысленное.
3278 просмотров
Flat господствовал в мировом веб-дизайне с момента своего появления в начале 2010-х. В России он начал развиваться чуть позже, но и тут уже утратил свои позиции.
Да, плоские изображения лаконичны и понятны. Они отлично вписываются в интерфейс и не перегружают его, быстро считываются пользователями. Но, как и любое дизайн-направление, flat в чистом виде постепенно устаревает, и на смену ему приходят новые тенденции.
Уже два года подряд западные источники называют одним из главных трендов в веб-дизайне 3d-иллюстрации. Что может показаться удивительным, ведь эта технология давно используется в индивидуальной разработке дизайна сайтов. Однако именно в 2020-х эксперты заговорили о её нарастающей актуальности.
Почему 3d-иллюстрации вновь становятся популярными
Во-первых, это связано с ростом качества 3d-изображений.
Во-вторых, 3d-иллюстрации стали интерактивными — теперь их проще анимировать. То есть, картинка не просто объёмная, она ещё и двигается. Это позволяет в простой и понятной форме объяснить принцип работы продукта, показать его внутреннее устройство, способы применения.
Анимированные 3d-иллюстрации обращаются к чувствам и эмоциям пользователя. Формы, цвета, динамика, текстура — всё это оказывает прямое влияние на восприятие вашего бренда.
Пользователи любят истории. Использование анимированных 3d-иллюстраций — отличная возможность эти истории рассказать. И эффект от них будет гораздо сильнее, чем от статичной картинки и, тем более, от текста.
Как использовать 3d-иллюстрации в разработке дизайна сайта
Анимированные 3d-изображения находят широкое применение в веб-дизайне в 2021 году.
Причём они никак не противоречат современному принципу минимализма и акценту на типографику, а напротив, отлично их дополняют.
Их интегрируют в интерфейсы, шоурилы. Также с помощью 3d-технологии создаются рендеры, которые выглядят максимально реалистично. Или, наоборот, реальному объекту можно добавить футуристичных черт, если это соответствует позиционированию бренда.
При разработке дизайна сайта 3d-иллюстрации не обязательно использовать в чистом виде. Их сочетают с элементами того же flat-дизайна или фото, создают объёмную типографику и memoji — анимированные аватары в стиле emoji. Ещё один вариант — сделать целую галерею изображений, которые станут частью фирменного стиля и будут активно использоваться в дальнейшем.
Одним словом, 3d-иллюстрации можно отлично вписать в концепцию вашего веб-ресурса. Они не просто делают сайт более запоминающимся, но и улучшают пользовательский опыт, позволяют управлять вниманием посетителя. Главное в этом деле — не переусердствовать: такие элементы должны выглядеть уместно, не усложнять взаимодействие с сайтом и не замедлять его загрузку.
Плоские иллюстрации для веб-сайтов и приложений
100 элементов иллюстраций100 сцен
Обязательный пакет иллюстраций для пользовательского интерфейса веб-сайта и приложения. Мы сосредоточились на создании наиболее востребованных композиций для бизнеса, интернет-магазинов и маркетинга. Этот большой набор иллюстраций определенно улучшит ваш дизайн.
Название может указывать на то, что эти иллюстрации плоские и лишены индивидуальности, но угадайте еще раз. Этим персонажам так много нужно сказать, что они почти выпрыгивают из вашего экрана. Плоские иллюстрации — это наш новейший обязательный пакет иллюстраций, который придаст вашим дизайнерским проектам большое измерение и привлечет ваших пользователей красочными иллюстрациями.
Набор плоских иллюстраций представляет собой большую коллекцию персонажей в различных позах и сценах, предоставляя вам разнообразный выбор в соответствии с вашими потребностями. Все наши наборы иллюстраций являются векторными, поэтому их очень легко редактировать, менять цвет и размер, чтобы сделать их наиболее подходящими для вас.
Включены библиотеки Figma, Sketch, Ai, SVG, PNG, Adobe XD и Iconjar.
Варианты покупки
Получить этот пакет $ 65,00 /бесплатные обновления
Получить полный доступПокупка одного набора предоставит вам доступ ко всем иллюстрациям в этом наборе, а получение полного доступа разблокирует все наши наборы.
Типы файлов
Лицензия
Лицензия на коммерческое и личное использование
Стиль
Flat
Темы
файлы и папки, Бизнес, Ошибка, покупки, электронная коммерция, Инструменты, видеоигры, учетные записи, медиа, Дизайн , мобильный устройство, финансы, сообщения, поиск, эмоции, хобби, расположение, веб-разработка, настройки, связь, рабочий процесс, маркетинг, разговор, рейтинг, электронная почта, поддержка, доставка, достижения, дизайн, путешествия, навигация, рабочая область, фотография, социальные сети, Безопасность, хранение, офис, занятость, природа, одежда, наука, домашние животные, животные, музыка, Скачать
Не можете найти то, что ищете?
Запросить индивидуальный дизайн
Ищете значки премиум-класса
Чтобы соответствовать вашему веб-сайту и иллюстрациям?
Проверьте самый большой в мире набор иконок с более чем 42 000 уникальных премиальных иконок, выполненных в разных стилях
Другие упаковки для рассмотрения
Посмотреть все 145 упаковок Придумать уникальный стиль уже не так просто, как раньше, но эти иллюстрации, безусловно, сделают ваши проекты особенными.
Мазки карандашом и приглушенные цвета делают эти иллюстрации привлекательными и впечатляющими, в то время как дизайн остается чистым и простым.
Полностью редактируемый
Коммерческая лицензия
Вектор
В комплекте
Набор элементов, в котором простой контур сочетается с нарисованным от руки элементом, напоминающим меловой контур. Используя мягкие монотонные цвета, эти иллюстрации выделяются, не отвлекая от вашего дизайна.
Полностью редактируемый
Коммерческая лицензия
Вектор
В комплекте
Если вы ищете простую линейку комиксов, вы обратились по адресу. Эти иллюстрации забавны и чрезвычайно разнообразны, чтобы выразить любую концепцию, которую вы хотите показать.
Полностью редактируемый
Коммерческая лицензия
Вектор
В комплекте
Если вы ищете симпатичное и уникальное дополнение к своему дизайн-проекту, обратите внимание на этот новый набор иллюстраций, в котором продолжают течь очаровательные истории.
Полностью редактируемый
Коммерческая лицензия
Персонаж + бг
Вектор
В комплекте
Хотите нестандартные иллюстрации?
Ничто не сравнится с полностью персонализированной иллюстрацией, специально созданной для вашего бренда. Если у вас есть концепция, стиль или сцена, которые вы не можете найти в нашей библиотеке иллюстраций, просто свяжитесь с нами, чтобы получить предложение, и мы свяжемся с вами в течение максимум 24 часов. .
За последние несколько лет наша команда иллюстраторов помогла многим брендам создать и переосмыслить свою индивидуальность, создав современные и привлекательные логотипы, иллюстрации и значки. Это довольно просто, просто свяжитесь с нами, объясните свои идеи и позвольте нам сделать тяжелую работу!
🔮 Мы читаем мысли, в этом наша магическая сила 🧙
Получить цитатуУчебник по плоской иллюстрации — 5 лучших советов для дизайнеров — Anniko
Вот 5 полезных советов для всех, кто интересуется, как рисовать крутые плоские иллюстрации.
Независимо от того, являетесь ли вы новичком в творчестве или уже сделали это своей работой, вам необходимо освоиться с созданием плоских иллюстраций. Причина проста — это сильная тенденция, которая не собирается замедляться в ближайшее время.Так что же такое плоский дизайн иллюстрации стиль ?
Это минималистичный и лаконичный стиль в графическом дизайне и дизайне пользовательского интерфейса, известный своей простотой, минимумом деталей и эффектов и гладкими формами. В настоящее время вы можете найти его практически везде — на веб-сайтах, в приложениях для смартфонов, в брендинге и даже в редакциях и рекламе. Плоский дизайн оказывает огромное влияние на современную иллюстрацию и значительно определяет тенденции в создании визуальных эффектов.
Будь то иллюстрация для веб-сайта, инфо-графика, набор иконок или ключевой образ бренда, вот мои 5 основных советов, которые помогут вам сделать все правильно.
1. Простота и сбалансированность
Плоский дизайн — это простота и минимализм. Чтобы ваш дизайн выглядел аккуратно, не усложняйте его ненужными деталями или эффектами. Вы должны определить ключевой элемент (например, персонаж или объект) и построить свою сцену вокруг него. Конечно, вы можете добавить небольшие детали, чтобы сделать всю композицию более яркой. Но простота всегда является ключом.
2. Добавьте пробелы
Один из основных способов сделать вашу композицию более сбалансированной и сделать акцент на правильном элементе — использовать пробелы. Когда у вас сложная композиция (например, группа персонажей или среда с большим количеством объектов), пустое пространство действительно помогает сделать изображение более чистым и минималистичным. Это может показаться простым, но может быть довольно сложно, когда дело доходит до реальной работы. Все дело в практике.
3. Использовать геометрию
Плоский дизайн часто основан на геометрических формах и повторяющихся углах.
Это делает Adobe Illustrator очень удобным инструментом для такого стиля. Даже если у вас нет художественного образования, вы можете создать что-то красивое, используя прямоугольники и круги, если знаете простые законы композиции. Я уверен, что это еще одна причина, которая сделала плоский дизайн таким популярным в наши дни 🙂
4. Не бойтесь использовать яркие цвета
У плоского дизайна есть свои ограничения. Цвет и контрастность играют важную роль в том, чтобы ваше изображение выделялось в ряду похожих изображений. Не бойтесь использовать смелые цвета и высокие контрасты в своей работе. Также рекомендуется использовать яркие цвета, добавляя один-два нейтральных цвета, чтобы сделать его более глубоким и сбалансированным.
5. Добавьте дополнительные детали
С тонами плоских иллюстраций, созданных разными художниками на протяжении многих лет, иногда трудно сделать ваши плоские изображения уникальными. Возможно, вы уже видели множество веб-иллюстраций в голубых и розовых тонах, множество плоских голубоволосых девушек и множество безликих бородатых парней с ноутбуками 😉
К счастью, мы видим рост нового тренда полуплоского дизайна.