Иллюстрации флэт: Флэт-иллюстрация // Дизайн в цифровой среде

20 уроков по созданию флэт иллюстраций в Adobe Illustrator

Подборка из 20 уроков по рисованию плоских иллюстраций в Adobe Illustrator.

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

Фото на обложке: ShutterStock

Стиль flat — понятие, особенности, основные проблемы и примеры стиля

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

Что такое плоский дизайн

Плоский дизайн или flat дизайн стал популярным направлением в 2010-х годах, когда Microsoft выпустила новую систему в минималистичном стиле, в противовес скевоморфизму Apple — дизайну, в котором преобладают реалистичные эффекты.

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

Главные принципы плоского дизайна

Принцип 1. Ничего лишнего

Плоским этот стиль называется потому, что все элементы не выглядят объемными. Такого эффекта добиваются отсутствием различных декоративных деталей: теней, текстур, бликов, градиента и так далее. В основе лежат простые формы с двумерными изображениями.

Контуры форм четкие и лаконичные. Акцент делается на простоте интерфейса, контенте, как текстовом, так и графическом. Благодаря таким приемам дизайн становится легким и невесомым.

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

Принцип 2. Двумерная графика

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

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

Фотографии и другие картинки также применяют в плоском дизайне и оформляют их как отдельную область на сайте. Например:

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

Принцип 3. Читаемая типографика

Стиль flat убрал все лишнее из дизайна и вывел на первый план контент на сайте. Поэтому для пользователя стало особенно важно, какая типографика используется на ресурсе.

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

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

Принцип 4. Цветовые акценты

Еще одна особенность flat дизайна — используемая цветовая схема. Преимущественно это белый фон, один главный цвет для элементов (часто приглушенный) и различные цветовые акценты. Очень хорошо эту схему видно на примере:

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

Обычно палитра включает в себя 2-3 цвета, также используются нескольких цветовых акцентов для мелких элементов — иконок, деталей в иллюстрациях. Однако, некоторые дизайнеры отходят от общепринятых правил подбора цветовой схемы и используют все цвета их спектра.

Принцип 5. Белое пространство

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

Дизайнер располагает элементы с учетом пробелов и воздуха между ними, как в этом примере:

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

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

Юзабилити для плоского дизайна

Flat дизайн — сильный инструмент для создания эстетически привлекательного дизайна. С помощью плоского дизайна:

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

Однако, несмотря на все преимущества стиля flat есть несколько проблем, которые разработчик должен учитывать, создавая дизайн сайта.

Проблемы flat дизайна

Несмотря на все преимущества пользователи периодически сталкиваются с проблемами в использовании интерфейса, основанном на плоском дизайне. Некоторые дизайнеры зацикливаются на простоте и эстетически привлекательном виде и забывают о юзабилити. Разберем некоторые проблемы во взаимодействии с пользователем и способы их устранения.

1. Интерактивность элементов

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

Непонятно, на какой из этих элементов можно кликнуть. В результате пользователь начинает проверять все элементы подряд.

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

2. Индивидуальность

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

Решение: использовать яркие цвета, нестандартную композицию, уникальные иллюстрации и текстовый контент. Так совпадения с другими веб-страницами сведутся к минимуму и ресурс будет уникальным по сравнению с конкурирующими сайтами.

3. Шрифты

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

Решение: использовать читабельные шрифты, делать тексты интересными и полезными для пользователя.

4. Навигация

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

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

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

Если пользователь не может определить, какие элементы на странице активные, не может прочитать текст и не знает, как совершить целевое действие, он уйдет с сайта несмотря на эстетически привлекательный «легкий» дизайн. Поэтому при разработке дизайна нужно в первую очередь учитывать удобство пользователя.

Кому подойдет плоский дизайн

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

• нужны небольшие тексты и простая структура. В данном случае плоский дизайн будет уместен и с легкостью будет воспринят пользователем. Если же компания планирует писать лонгриды и создавать многостраничный ресурс, данная концепция не подойдет;
• целевая аудитория — молодые современные люди. Такие группы всегда приветствуют современный подход в дизайне и с легкостью разбираются в навигации;
• низкая степень интерактивности. Сложные ресурсы с большим количеством вложений очень трудно разработать с помощью плоского дизайна, где главный параметр — простота в использовании.

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

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

Такой эффект глубины позволяет уйти от множества проблем с юзабилити и в то же время оставаться современным и модным решением в дизайне.

5 примеров плоского дизайна для вдохновения

Некоторым дизайнерам для творческого порыва нужно смотреть на природу, а другим — на работы других дизайнеров. Больше о поиске идей можно почитать в этой статье, а мы приведем несколько примеров плоского дизайна для вдохновения.

1. Уникальные иллюстрации

Дизайнеры сами становятся иллюстраторами и создают целые произведения для главных экранов.

2. Цветовые решения

Другие любят работать с цветом и выбирают яркие и сочные оттенки для создания атмосферы на сайте.

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

3. Функциональность

Еще один подход — отойти от иллюстраций и создать минималистичный дизайн, делая упор на цвет и формы:

4. Фотографии

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

5. Структура

Блочная структура тоже может быть интересной. Яркие акценты и типографика — с помощью двух элементов можно привлечь внимание пользователя и удержать на страницах сайта.

Студия дизайна IDBI использует в своих работах как принципы плоского дизайна, так и другие стили. Мы следим за тенденциями в веб-разработке и работаем как с классическими интерфейсами, так и применяя различные подходы других дизайн-систем. Больше о наших проектах можно узнать в разделе «Портфолио».

27 лучших примеров – Canva

Что такое флэт дизайн: 27 лучших примеров – Canva

Your browser is not supported and may not give the best experience.

ВойтиЗарегистрироваться

Один из самых распространенных и современных стилей сейчас — флэт дизайн или плоский дизайн. Что это такое, чем он хорош и для каких проектов подходит?

Что такое флэт дизайн

Флэт дизайн в переводе с английского flat design — буквально «плоский дизайн». Это простой двухмерный дизайн без теней и объема, который берет истоки в минимализме, швейцарском стиле и Баухаусе. Подробно о влиянии последнего на современный дизайн мы рассказали в этой статье. А вот так выглядит плакат в швейцарском стиле — незамысловатая графика, контрастные цвета, плоский дизайн.

Одна из первых компаний, которая стала использовать этот стиль в дигитальном дизайне — Windows.

В 2013 году флэт дизайн начала использовать компания Apple. С переходом на iOS 7 иконки стали простыми, плоскими и графичными. И вот тогда это направление массово подхватили уже и другие мировые бренды.

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

Правила флэт дизайна

Двухмерность

Никакого объема: теней, фактур, бликов, отражений и трехмерных изображений. Флэт дизайн = плоский дизайн.

Иллюстрация блога компании Osome

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

А вот такой можно сделать самостоятельно на платформе графического дизайна Canva.

Четкие контуры

Изображения во флэт дизайне должны быть упрощенные, без лишних деталей. Часто достаточно схематичных или даже намеренно упрощенных изображений.

Контраст

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

В 2015 году такие компании, как YouTube и Google стали массово переходить на флэт дизайн, чтобы выглядеть современнее. Обратите внимание, главное отличие старых от новых логотипов в том, что пропали блики и объем, этого легко достичь, просто убрав переходы цвета.

Слева старые версии логотипов YouTube и Google, а справа — новые

Простая типографика

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

Буквы необязательно должны быть геометрически правильными, надписи художницы @lelevina тоже пример флэт дизайна. Она использует простой рукописный шрифт и контрастные фоны.

Подробно о видах шрифтов с засечками и без мы рассказали в этой статье.

Все эти правила флэт дизайна сегодня соблюдаются не так строго, как раньше. Допустимы небольшие нарушения, но тогда и сам дизайн будет правильнее назвать Semi Flat Design — то есть полуфлэт дизайн. Уже есть и такое понятие для тех, кто не придерживается строгих правил.

Примеры флэт дизайна

Ретроплакаты

Флэт дизайн — это не только современные сайты и графика. Упрощенные формы, отсутствие деталей и плоский дизайн — такими часто создавали плакаты еще в то время, когда не было дигитального дизайна.

И все больше графики в таком стиле встречается и сейчас.

Источники: слева Simone LeBlanc, справа Dans le Sac

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

Рассылка Spotify

В конце года Spotify отправил своим пользователям письмо с очень лаконичным, но ярким флэт дизайном. Благодаря простоте и цветам они здорово выделились в ленте пестрых рассылок и привлекли внимание. Обратите внимание, никаких графических элементов, кроме логотипа. Здесь вся магия в цветах, контрасте и предельно простой типографике.

Искусство

Вдохновиться примерами флэт дизайна можно не только на примере сайтов, рассылок и плакатов. Примеры есть и в искусстве! Например, в супрематизме Казимира Малевича.

Казимир Малевич. Супрематизм. 1915 год

Упаковка Pocky

А вот еще один пример флэт дизайна, на этот раз в упаковке — коллекция сладостей Pocky с лимитированным дизайном.

Контраст можно создать не только при помощи ярких цветов и прямых линий. Пастельный флэт дизайн с плавными линиями набора кард Mindfulness Cards — еще один удачный пример современного плоского дизайна.

Обложки для книг и журналов

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

А здесь можно посмотреть еще 50 идей обложек, которые легко самостоятельно сделать в Canva.

Ролик журнала Monocle

Видео на главной странице сообщества Monocle — пример современного флэт дизайна. Черные контуры изображений и цветные пятна выглядят, как детская раскраска. Простые и понятные картинки, а главное, никакого объема.

Иконки MAMM в инстаграме

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

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

Иллюстрация коллекции косметики Givenchy

Художник Мэтт Эдвардс уже в 2010 году создал для Givenchy иллюстрацию в стиле флэт дизайн. Даже сейчас она выглядит вполне современно, а тогда это направление только появлялось. Это пример еще без соблюдения строгих правил плоского дизайна. Состоит изображение из цветовых пятен без мягких переходов, но благодаря сочетанию геометрических форм и цветов художник все же показывает объем носа, губ, век модели.

Можно взять такой пример на заметку, если вы не хотите соблюдать принципы флэт дизайна на 100%, но хотите поэкспериментировать на эту тему.

Лендинг дизайнера Максима Арбузова

Большинство современных лендингов выполнены в стиле флэт дизайна. Особенно много таких примеров среди личных страниц дизайнеров, например, Максима Арбузова. Простой шрифт, четкие формы и немного фотографий.

Портреты

Портреты в стиле флэт дизайна часто можно встретить у блогеров. Они выделяются на фоне фотографий и благодаря контрасту и необычности привлекают внимание даже в маленьком формате — на профильном изображении в соцсетях.

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

Автор

Алиса Ястремская-Семенова

Рекомендации для вас

Реализуйте свои идеи за минуты.

Выразите себя с помощью самой простой в мире программы дизайна.

Навигация по нижнему колонтитулу

---

© 2021 г. Все права защищены. Canva^®

Уроки по созданию флэт иллюстраций: бесплатные видео для начинающих

Уроки по созданию флэт иллюстраций: бесплатные видео для начинающих

Современным трендом в сфере веб-дизайна и графики сегодня является флэт дизайн (плоский). Простые формы элементов без эффектов — особенность такого стиля. Кнопки, значки и иллюстрации, веб-страницы становятся двухмерными. Бесплатные уроки помогут прокачать свои умения тем, кто хочет освоить новый подход к этому искусству.

Подборка видео даст представление об направлении flat design и поможет научиться рисовать стильные иллюстрации.

Принципы флэт дизайна

Характерными признаками флэт дизайна можно отметить минимализм, отсутствие градиентов, переходов, эффектов, простоту элементов, красочность, правильное использование шрифтов. В таком стиле создаются графические изображения в векторном формате. Для этого пригодится владение Illustrator или CorelDraw. В видеоуроке показана разработка иконки Like (в виде руки) в CorelDraw в стиле флэт. Рисунок выполняется с помощью простых фигур или инструментов для свободного рисования. 

Иконка ракеты

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

Мужской персонаж 

Мастер-класс по созданию векторной иллюстрации в Adobe Illustrator. Векторная графика отличается от растровой тем, что она не теряет качество при увеличении до любых размеров. Для тех, кто впервые столкнулся с Illustrator, автор проведет краткий вводный инструктаж по инструментам, которые есть в программе. Рисовать будем мужчину и начнем с формирования фигуры. Сначала рисуется общий контур рисунка, который потом детализируется. Все это проделывается пером. Каждая деталь прорисовывается отдельно. При этом важно изначально поделить объект на составляющие, чтобы четко представлять этапы работы.

Персонажи на фоне

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

Рисуем логотип

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

Кубок победителя 

В уроке из 2-х частей вместе с автором рисуем кубок в стиле флэт. В первой части будет делаться сам кубок, добавляться на него блики и декоративные элементы. Во второй — на кубок наносится надпись, и его размещают на 4 разных узорных фонах. Использоваться будет Illustrator СС. Если работа выполняется в программе другой версии, возможно отсутствие некоторых функций. Как и все плоские изображения, оно состоит из базовых прямоугольников, которые преобразовываются путем скругления краев. 

Ночное небо

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

Новогодняя композиция

Illustrator представляет собой мощный инструмент для работы с векторной графикой. Все его панели могут быть настроены под нужды пользователя. Начиная знакомство с этой программой, не забывайте о наличии горячих кнопок, чтобы облегчить работу в будущем. Есть русскоязычная и англоязычная версии. Этот урок подходит для новичков, которые еще не очень хорошо ориентируются в Illustrator СС на английском языке. Автор очень подробно рассказывает, какие инструменты используются для получения того или иного элемента, как настроить их и т.д. Создавать будем новогодний рисунок, состоящий из чашки-домика с соломинкой, елки, гирлянды, санок, пушистых шапок снега. В нем следует избегать сложных элементов. Поэтому все композиции создаются простыми, но без детализации. 

Пейзаж в броских цветах

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

Десять полезных уроков

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

+ БОНУС

5 основных принципов / Все о дизайне / Pollskill

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

Home

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

https://dribbble.com/rikitanone

Хочется отметить, что «плоско» — не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.

• Принцип №1: долой ненужные эффекты

«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.

https://dribbble.com/dylanopet

• Принцип №2: чем проще, тем лучше

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

• Принцип №3: типографика и ее важность

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

http://www.tvlcorp.com/

• Принцип №4: цветовые акценты

Не только шрифт, но и цвет —существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.

https://dribbble.com/fffabs

• Принцип №5: выбор в пользу минимализма

Flat дизайн — это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.

http://www.flatvsrealism.com/

Плоский или почти плоский? Ищем компромисс!

В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.

Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

https://www.behance.net/gallery/45942097/Resourse-UIUX-Tool-for-Web-Services

Flat Design — от истоков до наших дней

Flat Design или плоский дизайн стал активно развиваться и внедряться в 2010 году и пришел на смену детальному и осязаемому скевоморфизму с его тенями, бликами и текстурами.

Плоский дизайн выступал против методов «реальной» визуализации объектов в пользу более упрощенных и эстетически простых решений.

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

Вот парочка примеров скевоморфизма, активно развиваемого в свое время Apple.

Прообразом для плоского дизайна стали три направления в искусстве: минимализм, баухауз и Международный типографический стиль(также известный, как швейцарский стиль). А первым ярким продуктом в стиле плоского дизайна был интерфейс Metro от Windows.

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

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

1. Никаких лишних эффектов. Тени, блики, текстуры — всего это нет в плоском дизайне. Он описывает лишь контуры реального предмета и использует двумерную визуализацию объектов.
2. Простота элементов. Использование простых фигур и четких контуров подчеркивает легкость дизайна. Элементы должны стимулировать желание взаимодействовать с объектом: нажать, прикоснуться, потрогать. Простота элементов не означает простоту их дизайна, только простоту форм и очертаний. Простые формы интуитивно понятны пользователю и улучшают удобство использования.
3. Аккуратная работа с шрифтами. Они должны быть контрастными и дополнять существующий дизайн. Шрифты могут быть сложными и необычными, но понятными пользователю.
4. Яркие цвета. Цвет также как и шрифт является значимой частью плоского дизайна. Большинство цветовых палитр плоского дизайна основаны на 2-3 основных цветах, но встречаются и более разнообразные по цвету примеры. В плоском дизайне используются чистые яркие цвета, без лишних переходов и градиентов.
5. Минимализм. В плоском дизайне следует избегать излишних «наворотов», сложных подходов к визуализации элементов.

Со временем стало понятно, что обойтись только контурами и цветами не всегда возможно и флэт слегка изменился, добавились тени, подсветки и блики. Вот хороший пример из серии «было-стало».

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

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

Flat Design пнг образ | Векторы и PSD-файлы

Графический дизайн: 24 необычных плоских иллюстрации для вашего вдохновения | by tubik

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

В чем причина их успеха?

1. Пользовательские иллюстрации создают прочную основу оригинальности и художественной гармонии, они добавляют щепотку стиля и творчества к интерфейсу, печатной продукции или фирменным материалам.
2. Иллюстрация создает визуальные триггеры и метафоры, которые быстро передают необходимое сообщение.
3. Графика обеспечивает эффективную поддержку копии, применяемой в веб-интерфейсе или мобильном интерфейсе.
4. Иллюстрации — проверенный инструмент творческого повествования.
5. Иллюстрации обладают значительной силой создания эмоциональной привлекательности.
6. Индивидуальный графический дизайн создает основу для эстетического удовлетворения, которое увеличивает желательность проекта.
7. Иллюстрации запоминаются и запоминаются, поэтому они хорошо работают для повышения узнаваемости и узнаваемости бренда.
8. Цифровая иллюстрация эффективна при создании коротких анимированных видеороликов и интерактивных элементов, которые делают взаимодействие живым и элегантным.
9. Иллюстрации, основанные на интересных визуальных метафорах, делают дизайн уникальным и увлекательным.
10. Люди воспринимают изображения быстрее, чем слова, поэтому разумное использование иллюстраций может упростить и ускорить взаимодействие.

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

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

На иллюстрации показано, как может выглядеть процесс проектирования интерфейса — он был создан для презентации статьи о Гештальт-теории в UX-дизайне . Здесь дизайнер использует статичную композицию и создает броский образ с цветовым контрастом и разнообразием фактур.

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

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

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

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

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

Еще одна картинка, посвященная теме Дизайн кнопок CTA в UI применяет символ, отражающий идею уверенности и решительности. Дизайнер использует необычную перспективу, что делает композицию оригинальной и запоминающейся.

Пожалуй, каждый UI-дизайнер сталкивался с ощущением, что творческий процесс можно сравнить с возведением нового здания: нужно учесть массу факторов, продумать функциональность, структуру и «фасад» и постепенно сделать это жить из цифровых кирпичей и строительного раствора.Это метафора, стоящая за иллюстрацией.

Эта иллюстрация была создана для статьи по UX-дизайну под названием 3C of Interface Design: Color, Contrast, Content. Ключевое слово «Цвет» используется как основной семантический элемент и показывает буквальный процесс раскрашивания чего-либо краской. Контраст отражен в цветовой палитре произведения искусства, в то время как содержание показано с элементами мебели в офисе, показанными на картинке. Кот становится яркой деталью, которая добавляет сцене динамики и юмора.

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

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

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

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

Еще одна серия работ была создана, чтобы представить различные темы личной и профессиональной жизни.

Успех бизнеса часто определяется продуктивным сотрудничеством и командной работой: один солдат, каким бы талантливым и умелым он ни был, не вступает в бой. Объединяя сильные стороны каждого игрока, команды могут свернуть горы и принять вызовы, которые невозможно решить в одиночку. Эта идея лежит в основе иллюстрации. Он также служил заголовком для статьи о стратегиях дизайна для B2B .

Эта иллюстрация носит глубоко социальный характер: она посвящена Всемирному дню борьбы с раком, который отмечался во всем мире 4 февраля. Девизом этого года было «Мы можем. Могу »- и так увидел дизайнер на одной иллюстрации, показывающей весь путь от боли к жизни. Вместе мы будем бороться с этим!

Работа отражает дух зимних Олимпийских игр, охвативших мир в январе. В его основе — хорошо узнаваемый символ мероприятия — Олимпийские круги. В них вписаны динамичные образы спортсменов, представляющих разные виды спорта, создавая целостную композицию.Если вы хотите увидеть все детали и пошаговый процесс создания этого произведения искусства, ознакомьтесь с новым примером иллюстрации в нашем блоге.

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

Еще одно произведение, задающее тему статьи: глядя на него, легко уловить атмосферу дизайна для спорта и фитнеса .

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

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

Любовь витает в воздухе, и Интернет не исключение. Вот концепция целевой страницы приложения для знакомств, позволяющая людям найти свою идеальную пару. На иллюстрации представлена ​​тема, создающая яркий визуальный триггер и эффектно сочетающая образ устройства, объединяющего людей.

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

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

Вот набор взаимодействий для Perfect Recipes , мобильного приложения для удобного приготовления пищи и покупок. Здесь вы видите экраны, которые позволяют пользователям устанавливать цели и персонализировать список рецептов. Иллюстрация используется для яркой и оригинальной визуализации целей.

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

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

Почему редакционные иллюстрации выглядят так похоже в наши дни — Quartz

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

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

Вот пример в приложении Quartz:

Другой экземпляр в разделе отзывов New York Times:

На обложке журнала Los Angeles

Журнал On Time:

Недавний экземпляр в Le Monde:

Иллюстрация стиль даже регулярно появляется на обложке The New Yorker:

Обратите внимание, что все эти примеры были сделаны разными иллюстраторами.

Введите слово «иллюстрация» в поиске картинок Google, и вы увидите результаты такого типа.

Quartz

Результаты поиска изображений Google по запросу «иллюстрация»

Векторный стиль, характеризующийся плоскими цветами, простыми формами и урезанной цветовой палитрой, не имеет официального названия. Его чаще всего называют «плоской иллюстрацией» или, уничижительно, «корпоративным Мемфисом», имея в виду частое появление в рекламе и интерфейсах таких технологических компаний, как Lyft, Spotify, Oscar, Airtable и многих других.Facebook называет своих «многоруких» мультипликационных фигурок «Алегрия».

Алекс Эбен Мейер, иллюстратор из Бруклина, работающий в этом стиле, предпочитает описывать свою работу как компьютерный коллаж. «Я думаю, что моя работа больше ориентирована на форму», — объясняет он. «Когда я создаю свои изображения, я складываю фигуры и кусочки, практически коллаж из вырезанных из бумаги иллюстраций».

Полезно отметить, что слово «плоский» не означает скучный или скучный. На самом деле есть много редакционных иллюстраторов, работающих в этом стиле, которым удается привнести остроумие, индивидуальность и изобретательность, как, например, Мейер и иллюстраторы в цитированных выше публикациях.

Как этот стиль стал определять сегодняшнюю практику иллюстрации? Ответ сводится к трем «Т»: технология, вкус и ужасная оплата.

Технологическая ловушка

Плоские иллюстрации, за неимением лучшего термина, представляют собой подмножество стиля, называемого «плоский дизайн». Это принцип дизайна, лежащий в основе бедствия минималистичных преобразований логотипов, преобладающих в корпоративном брендинге. Отвергнув тенденцию скевоморфизма в 2000-х, конечная цель плоского дизайна — обеспечить хорошую работу графических элементов на различных цифровых дисплеях — от крошечных экранов Apple Watch до баннеров размером со здание.

«Плоский дизайн — это использование естественного цифрового формата», — объясняет Эндрю Аллен, руководитель отдела продуктов WeTransfer, который участвовал в разработке популярного приложения для рисования под названием Paper. «Компьютеры хотят отображать простые формы. Даже на экранах высокой четкости плоские формы загружаются быстрее и легче масштабируются ».

Как и в любом другом художественном средстве, технологические тенденции проявляются в готовой работе. В таких программах, как Adobe Illustrator, есть множество ярлыков, которые помогают иллюстраторам автоматизировать создание геометрических форм, цветовых палитр и других эффектов.Обученный глаз распознает стандартные инструменты и предварительно запрограммированные кисти, такие как часто используемые кисти Кайла Вебстера в Photoshop.

Большинство редакторов-иллюстраторов сегодня предпочитают работать на компьютере ради эффективности. «Работа в Adobe Illustrator позволяет мне изменять размеры, перемещать элементы, что дает мне большую гибкость в редакционной работе», — объясняет Мейер. «Это позволяет мне быстро и легко вносить изменения, чтобы получить нужную деталь».

Цифровые иллюстрации также легче анимировать.Time Out, Bloomberg Businessweek, The New Yorker и Elle входят в растущий список публикаций, экспериментирующих с анимацией и дополненной реальностью в качестве бонуса для цифровых подписчиков. Заманчивые зарисовки Дэвида Хокни для iPad, представленные в The New Yorker, являются ранними примерами этого нововведения.

Художник-иллюстратор из Шанхая Сяо Хуа Ян говорит, что технологии могут одновременно освобождать и ограничивать. «Это упрощает и ускоряет работу. Но между вашим мозгом, вашей рукой и компьютером всегда будет разрыв, — объясняет он.Ян говорит, что даже после многих лет использования Photoshop он все еще изучает новые функции каждый день. Из-за частых обновлений программного обеспечения рисование с помощью программного обеспечения Adobe часто напоминает работу с бесконечно изменяющей форму кистью. «Никто не может в совершенстве владеть технологиями», — отмечает он.

Ян говорит, что социальные сети также способствуют отсутствию неоднородности в редакционной работе. «Если вы видите, что иллюстрация в Instagram набрала 10 000 лайков, вам, вероятно, будет интересно узнать, какие методы используются.«

Эффект технологий не заканчивается рисованием», — добавляет Аллен. «Думаю, это тоже влияет на процесс. Вы берете в качестве иллюстрации некоторые идеи создания продукта [разработки программного обеспечения], например, метод agile, который заключается в том, чтобы работать быстро и повторять, а не производить одну конечную часть ». Способность иллюстратора изменять элементы на лету позволяет им быстрее и дешевле отвечать на запросы клиентов. Это не обязательно относится к акварельной живописи.

Вкус и терпимость к векторной графике

Ранее в этом году твит арт-директора The Baffler Линдси Баллант вызвал бурю.

Многие были возмущены тем, как она пристыдила профессиональных иллюстраторов в Твиттере. Суть критики Балланта заключалась в содержании и тоне, в котором он утверждал, что «миловидные, дружелюбные, утопические» произведения искусства не подходят для пьянящих статей The Baffler о внешней политике НАТО или неудачном возрождении Аппалачей.Однако все были зациклены на словах «плоская эстетика».

Икко Танака:

Кумир дизайна: Нихон Буйо Икко Танаки, 1981.

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

Хой Винь, старший главный дизайнер Adobe и бывший директор по дизайну New York Times, предполагает, что в «преобладании единой, монокультурной эстетики» можно винить компании-разработчики программного обеспечения, которые придерживаются эстетики плоского дизайна. В сообщении в блоге 2018 года Винь предупреждает нас не объединять все цифровые иллюстрации в одну категорию или доску Pinterest. «Иллюстрации продуктов предназначены для облегчения работы пользователя; редакционные иллюстрации призваны сделать работу читателя более интересной — даже более сложной.

Мейер, иллюстрации которого публиковались в журналах New York Times, Time и Chicago, утверждает, что речь идет не столько о средствах массовой информации, сколько о качестве идей. Его не особо беспокоит, что другие иллюстраторы используют похожие векторные инструменты. «Я думаю, что дело не столько в художнике, работающем в определенном жанре, сколько в наличии сильной точки зрения, идей, стиля и ремесла», — объясняет он. «Лично для меня цвет (независимо от глубины) и юмор — одни из самых важных моих качеств.

Экономика редакционной иллюстрации

В конечном счете, это вопрос денег. Иллюстраторы стремятся к эффективности, чтобы выполнять больше заданий, чтобы заработать прожиточный минимум. По данным сайта о вакансиях Indeed.com, редактор-иллюстратор из США зарабатывает в среднем 47 000 долларов в год. В Бюро статистики труда США нет категории иллюстраторов. Они находятся между «ремесленными и прекрасными художниками» и «мультимедийными художниками и аниматорами», которые представляют собой существенно разные профессии.Средняя годовая зарплата в этих двух категориях составляет 48 960 и 72 520 долларов соответственно.

Мрачная зарплата — это не только американское явление. В ходе глобального опроса 1400 иллюстраторов, проведенного в 2018 году, Бен О’Брайен, иллюстратор-фрилансер из Сомерсета, обнаружил, что 70% иллюстраторов считают, что они не могут выжить только за счет рисования. Более половины респондентов признались, что часто чувствуют себя некомфортно при переговорах по ставкам.

Когда я писал книгу о славных днях журнального дизайна, я узнал, что в 1970-х годах журнал в Нью-Йорке платил иллюстраторам то, что тогда считалось «мизерной суммой» в 100 долларов за точечные иллюстрации.С поправкой на инфляцию это 650 долларов, что все равно несколько больше, чем сегодня могут рассчитывать иллюстраторы от 250 до 500 долларов.

В качестве иллюстрации к обложке бывший арт-директор Time Уолтер Бернард вспоминает, что заплатил 2000 долларов (что эквивалентно 8 473 долларам в 2019 году) во время его пребывания на посту арт-директора с 1977 по 1980 год (для контекста, средний доход семьи в США в 1977 году составлял 13 570 долларов. ) Четыре десятилетия спустя скорость Time, похоже, почти не сдвинулась с места. Согласно опросу, опубликованному на сайте Format, в 2014 году журнал заплатил 3000 долларов за иллюстрацию для обложки.

Тема справедливой компенсации снова поднялась на этой неделе среди иллюстраторов из Бруклина. Дело не только в унылой зарплате. Похоже, что иллюстраторов все еще постоянно просят о безвозмездной работе.

«Замечательно, как часто меня все еще просят работать бесплатно или по сниженной ставке, как будто создание искусства — это что-то вроде глупого хобби», — пишет британский иллюстратор Джон Бургерман в Instagram. «Всего месяц назад меня пригласили создать симпатичный мультяшный логотип для нового бизнеса здесь, в Нью-Йорке… и плата была пуста! Вместо этого мне предложили «одолжение в мире искусства»! »

Бернар говорит, что было время, когда иллюстраторы могли жить красиво.Норман Роквелл, наиболее известный своими любимыми обложками Saturday Evening Post и рекламой Coca-Cola, был миллионером, когда умер в 1978 году. «Роквелл не был стереотипным художником, который« изо всех сил сводил концы с концами », — пишет экономист Эллиот Морсс. Он оставил имение стоимостью более 26 миллионов долларов.

Помимо скользящих ставок редакции, иллюстраторы также должны конкурировать со стандартными иллюстрациями, предлагаемыми на таких сайтах, как iStock (принадлежит Getty), Adobe Stock, iSpot, IKON Images и Источник иллюстраций.Например, задумчивая обезьяна наверху этого поста может быть мгновенно загружена менее чем за 10 долларов с планом подписки с Getty.

Стремление производить больше работы избавляет от времени на эксперименты и уточнения. В то время как иллюстраторы, такие как Джеймс Макмаллан, могут нанимать живых моделей или наблюдать за театральными артистами, чтобы нарисовать фигуры, сегодня иллюстратор с ограниченными возможностями и деньгами будет цепляться за доступные ярлыки. Об этом свидетельствует обилие статей о «советах и ​​уловках иллюстратора».

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

Как создавать оригинальные плоские иллюстрации: советы дизайнера

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

Что такое плоский дизайн?

Начнем с терминологии. Сегодня термин «плоский дизайн» применяется к графике для множества целей и задач, имеющих общие стилистические особенности.Плоский дизайн — это направление, которое нашло свое широкое и разнообразное выражение в цифровом искусстве и известно минималистичным и лаконичным использованием средств визуальной выразительности. В настоящее время этот термин широко используется как противоположность «богатому дизайну» из-за гармонической простоты, взятой за основу этого дизайнерского подхода. Самая заметная особенность, которая фактически вдохновила название этого направления, — применение плоских двухмерных визуальных деталей в противоположность высокореалистичным и детализированным скевоморфным изображениям.Плоский дизайн развивался в течение последних двух лет, охватывая все больше и больше областей графического дизайна, все еще находя самое широкое и разнообразное применение в сфере цифрового дизайна для веб-интерфейсов и мобильных интерфейсов. Такой подход к дизайну считается стилем, благоприятным для повышения удобства использования и визуальной гармонии пользовательских интерфейсов.

Очевидно, плоский дизайн возник не на пустом месте. Его корни обычно уходят корнями в швейцарский стиль, прямым предком которого историки дизайна считают.Швейцарский стиль, также известный как международный типографский стиль или сокращенно Международный стиль, — это направление, которое появилось и подверглось критике в 1920-х годах, а затем получило яркое выражение в графическом дизайне в Швейцарии 1940-50-х годов, став прочной основой графики. дизайн середины 20 века по всему миру.

Хотя этот стиль получил множество выражений в сфере визуального дизайна для печати, например плакаты, марки, открытки, обложки книг, журналы и т. Д., С эпохой цифрового дизайна он значительно расширил свои горизонты, особенно в области дизайна. для пользовательских интерфейсов.Веб-сайты и мобильные приложения, находящиеся в процессе динамичного развития творческого поиска, открыли удивительные и плодотворные перспективы для этого минималистичного и функционального подхода к дизайнерским решениям. Стиль получил название «плоский дизайн» (или плоский графический дизайн), который мгновенно стал популярным и положил начало новому направлению в графическом дизайне, смелому скевоморфизму и «богатому дизайну» и поддержанному новыми проблемами, открытыми областью дизайна взаимодействия. Разнообразие доступных и развивающихся направлений дизайна в наши дни привлекает плоскую иллюстрацию дизайна как гибкий и художественный подход, успешно завоевавший себе место.Подробнее о плоском дизайне, его истории и преимуществах читайте в нашей предыдущей статье.

Как сделать плоские иллюстрации оригинальными и придать им индивидуальный стиль?

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

Вот советы по созданию плоских иллюстраций от графического дизайнера Tubik Ярославы Яцубы, которые она получила из своей повседневной практики.

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

— Анализируйте работы других иллюстраторов. Не упустите шанс понять, какие принципы и подходы они применяют. Подумайте, какие элементы или цветовые решения сделали их работы привлекательными для вас.

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

— Определившись с композицией, представьте, как сцена будет выглядеть под разными углами : в перспективе с третьей точкой схождения, через линзу «рыбий глаз», с точки зрения трехлетнего ребенка или, наоборот, как это увидит сверхвысокий баскетболист. Этот трюк поможет вам понять, какой из углов будет наиболее выгодным для цели и послания иллюстрации.

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

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

— Использование текстур добавляет яркости рисунку, придает индивидуальность и эффект «ручной работы». Кроме того, это смягчит векторные изображения.

Текстуры могут имитировать:

• реальные физические материалы и детали (например, царапины или потертости)
• геометрических деталей (линии, полосы, точки)
• поделки с не идеально ровными линиями

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

6 особенностей хорошей плоской иллюстрации

Подытоживая все советы, можно определить особенности эффективных плоских дизайнерских иллюстраций.

1. Оригинальная стилизация
2. Продуманная композиция
3. Нестандартная перспектива
4. Тщательно подобранная цветовая палитра
5. Применение текстур
6. Использование метафор

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

Еще примеры плоских иллюстраций

Вот еще несколько иллюстраций Ярославы с практическими примерами творческого применения приведенных выше советов. Дизайнер показывает, что некоторые ограничения этого стиля — еще одна причина для новаторских экспериментов с плоскими цветами дизайна, перспективами, персонажами и метафорами.

Рекомендуемая литература

Плоский дизайн.История, преимущества и практика
Глоссарий дизайна: Цвет. Термины и определения
Современное состояние: 15 концепций креативного графического дизайна
Современный графический дизайн: направления и цель
Иллюстрация в пользовательском интерфейсе. Искусство в действии

Добро пожаловать, чтобы увидеть дизайн Tubik на Dribbble и Behance

Язык дизайна IBM — плоский стиль

Плоский стиль — это самый смелый и самый графический стиль иллюстрации, используемый в IBM. В качестве
название предполагает, что плоский стиль использует основные геометрические формы для создания людей,
предметы, места и даже идеи.Также требуется продуманное нанесение цвета.
и тон, чтобы очерчивать формы восхитительными и интересными способами. Пожалуйста примите к сведению
следующие рекомендации при создании иллюстраций в плоском стиле.

Мы создали стартовый набор Adobe Illustrator, который вы можете использовать, чтобы повысить свои навыки в создании убедительных иллюстраций, связанных с брендом. В нем вы найдете правильно нарисованные сетки для иллюстраций в плоском стиле, руководство по анатомии, лежащей в основе стиля, и основной набор простых элементов, которые вы можете использовать или перекомбинировать, чтобы сформировать свое собственное повествование с иллюстрациями.В комплект входит вдохновляющая галерея примеров, демонстрирующих техники, которые вы можете использовать в этом стиле. Эти примеры не являются библиотекой готовых произведений искусства; они предназначены исключительно для того, чтобы помочь вам в исследованиях. Используйте их, чтобы изучить и проанализировать технические аспекты этого восхитительно смелого стиля.

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

Два квадрата и два круга, чтобы сделать глаз.

Два круга и один квадрат в форме сердца.

Размер и интервал

Все объекты в плоской иллюстрации должны быть не менее 8 пикселей в ширину или
высокий. Это измерение очень важно, так как используйте форму тоньше или короче.
будет отображаться как линия и изменит характер вашей иллюстрации.
Точно так же любое отрицательное пространство или расстояние между фигурами также должно быть минимальным.
размером 8 пикселей.

Построение 2х Сети,
базовая сетка для плоского стиля была установлена ​​на 8 пикселей, в отличие от 4 пикселей для
сетка стиля линии.Этот метод гарантирует, что ваш минимальный размер формы и
интервал не менее 8 пикселей, что также поможет убедиться, что ваши иллюстрации
не становитесь слишком переполненными и занятыми.

Иллюстрации в плоском стиле должны быть созданы с использованием функции «привязки к сетке».
в Adobe Illustrator. Этот параметр гарантирует, что точки вдоль вашего рисунка
можно привязать к линиям сетки под вашей линией. Расположение сетки
line дает точную и продуманную эстетику, которая жизненно важна для любого IBM
иллюстрация.

Убедитесь, что точка привязки четко прилегает к пересекающимся линиям сетки.

Не забывайте использовать «привязку к сетке», иначе это может привести к смещению точек привязки.

При наложении фигур должна быть безопасная область не менее 8 пикселей, чтобы
объекты четко пересекаются друг с другом.

Используйте четко расположенные формы с разделением не менее 8 пикселей.

Не используйте случайно размещенные фигуры с разделением менее 8 пикселей.

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

Используйте стандартные углы — предпочтительны 15 °, 30 °, 45 °, 60 °, 75 ° и 90 °. С использованием
эти стандартные углы помогут вашим иллюстрациям выглядеть последовательными. Несмотря на то что
вы можете использовать любой угол, мы рекомендуем придерживаться стандартных предлагаемых углов
здесь.

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

По возможности используйте четкие и правильные кривые.

Не используйте неправильные кривые, если их можно избежать.

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

Закругленные углы и размещение

В Adobe Illustrator можно закруглить углы углов для плавного и
контролируемый вид.Вот некоторые характеристики, которые следует использовать при применении радиуса к
ваш объект.

Вложенные линии этой кривой должны оставаться на одинаковом расстоянии с увеличением радиуса.

Избегайте использования угловых углов разного радиуса во вложенной конструкции.

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

Градиенты и штриховка

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

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

веб-сайтов с плоскими иллюстрациями — лучшие примеры

Вдохновение • Примеры сайтов Натали Берч • 13 декабря 2013 г. • 6 минут ПРОЧИТАТЬ

Хотя год подходит к концу, плоский стиль все еще находится на пике своей популярности и вряд ли покинет нас в следующем году.Мы опубликовали множество информативных статей по этой теме, начиная с Flat Design и Color Trends и заканчивая полезными уроками о том, как его освоить, но все же есть небольшая лазейка, которую мы упустили — дизайн веб-сайтов с плоскими иллюстрациями , которые имеют стали чрезвычайно популярными в последнее время. Итак, давайте углубимся в этот вопрос.

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

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

Давайте рассмотрим некоторые характерные примеры иллюстраций с плоским дизайном

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

У Робби Леонарди великолепное, поистине необычное онлайн-резюме, в котором чувствуется атмосфера олдскульных игр. Он полностью основан на ярких плоских иллюстрациях, где даже «фальшивые» трехмерные элементы создаются с помощью простых плоских форм. Приключение маленького забавного персонажа просто интригует.

Конструктор электронных писем

С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны писем быстрее, чем когда-либо прежде.

Попробуйте бесплатноДругие продукты

Mashauri — это сложный корпоративный веб-сайт, который также использует подход визуального повествования. Веб-разработчик использует вертикальный параллакс, чтобы воплотить его в жизнь. Веб-сайт состоит из простых основных компонентов по всему дизайну.

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

TeamGeek — это чистое и открытое портфолио, в котором используется множество плоских значков и графики. Таким образом, раздел «Что мы делаем» включает красивую привлекательную сетку с понятными значками, выполненными в дерзком плоском стиле, в то время как другие подстраницы дополнены современной графикой с элегантными длинными тенями «5 часов».

Play It Forward — это некоммерческий веб-сайт, цель которого — раскрыть детям преимущества спорта с помощью небольшой увлекательной игры.Плоский иллюстрированный фон в сочетании с яркой позитивной цветовой палитрой создает здоровую атмосферу и легко передает веселое настроение.

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

Full English — это чистое и аккуратное онлайн-портфолио двух гуру Magento.Разработчики предпочитают использовать мультяшный подход, чтобы создать дружескую атмосферу. Веб-сайт эффективно сочетает в себе пакеты плоской графики с динамическими компонентами, придавая веб-сайту прекрасную передовую привлекательность.

Flat Guitars — это специальный веб-сайт, посвященный року, а если быть более точным, он демонстрирует различные популярные модели гитар. Он очень напоминает веб-сайт об окнах Нью-Йорка, на котором также используются плоские иллюстрации, чтобы эффективно привлекать внимание к обычным вещам.

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

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

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

Volume 1 — интерактивный сногсшибательный веб-сайт, который использует фантастические плоские рисунки с прекрасными динамическими эффектами, чтобы привлечь внимание читателей и сделать руководство привлекательным.

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

Wrist — Как и в примере № 9, этот веб-сайт также графически отображает различные модели, и в этом случае он показывает разные запястья.Дизайнер выбрал плоский стиль, поскольку он не загромождает дизайн и достаточно эффектно демонстрирует мелкие детали. Более того, плоская графика лаконично сочетается с фоном и контентом.

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

Adcade — это тонкий веб-сайт, созданный с учетом плоского стиля.Есть много фигур в контурном стиле, плоских иллюстраций и гладкой типографии. Разработчик умело смешивает графику и динамические эффекты, делая сайт интерактивным.

Google Adwords всегда идет в ногу со временем, поэтому неудивительно, что на его веб-сайте также используются яркие плоские иллюстрации для пояснений.

Caramel Budgie — Дизайнер эффективно использует набор однотонных цветов, придавая сайту мягкий и современный вид.Все значки и графика также выполнены в плоском стиле, чтобы эффективно дополнять тему.

Cuisines Schmidt — Набор ярких плоских иллюстраций является центральным элементом этого веб-сайта. Более того, каждая интерактивная картинка снабжена увлекательными динамическими элементами и виджетами, чтобы привлечь как можно больше внимания.

Tiga Tech — это небольшое, но продуктивное онлайн-портфолио, построенное с помощью плоских захватывающих рисунков.Каждый раздел включает в себя свою мультяшную картинку.

Отражение

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

Что вы думаете о таких сайтах? Нравится или ненавидеть? Почему? Знаете ли вы какие-либо другие хорошие примеры веб-сайтов, использующих плоские иллюстрации?

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

Flat Illustration в Photoshop (Виллиан Сантьяго). Онлайн-курс

Мы глубоко сожалеем о потере Виллиана Сантьяго, бразильского иллюстратора и преподавателя этого курса. Его артистический талант будет и дальше делать жизнь ярче и радовать всех членов сообщества «Доместика».

Можете ли вы представить себе возможность транспонировать яркие цвета, органические мазки кисти, простые формы и естественные текстуры в свои цифровые иллюстрации? Эти плоские элементы — особенность дизайнера и иллюстратора Виллиана Сантьяго.Его опыт позволил ему сотрудничать с такими брендами, как Adobe, Havaianas и Natura. Его композиции передают всплеск цвета и контраста, который черпает вдохновение в игривой вселенной в бразильском стиле.

В этом курсе вы научитесь составлять плоскую иллюстрацию в Adobe Photoshop с помощью кистей, основанных на ручных методах, таких как цветные карандаши, мел и акварель. Виллиан учит использовать каждую кисть и призывает вас исследовать множество различных текстур.После того, как вы закончите этот курс, вы будете знать, как применять каждый элемент вашей композиции для различных типов мокапов.

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

Во втором разделе создайте доску настроения и соберите ссылки, которые будут служить руководством для создания ваших первых набросков. Затем Виллиан покажет вам широкий выбор кистей в Adobe Photoshop, имитирующих аналогичные техники, такие как мел, акварель и карандаши.

После того, как вы создали свой эскиз и протестировали множество различных элементов, вы перейдете к этапу производства. Начните свою финальную иллюстрацию в плоском стиле с помощью Photoshop и узнайте, как использовать определенные функции и методы, такие как организация слоев, прямой доступ, кисти, отделка и текстуры.

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

На заключительном этапе вы узнаете, как адаптировать свою композицию к другим форматам, чтобы улучшить свое портфолио и применить ее к макетам (кружки, тарелки, бумага и т. Д.). И, наконец, Виллан посоветует, как продвигать свои работы на Behance и Instagram.

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

Вы создадите плоскую иллюстрацию и исследуете цифровые текстуры в Photoshop. Ваша последняя иллюстрация будет содержать различные элементы, которые будут применены к макетам (обложки книг, кружки, тарелки, канцелярские товары и другие).

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

Вам потребуются базовые знания Adobe Photoshop.

Что касается материалов, вам понадобится компьютер с Adobe Photoshop и графический планшет.

Как создать плоскую иллюстрацию за 5 шагов

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

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

Шаг 1. Эскиз

Начало моего процесса — это определение композиции, размеров и замысла произведения, над которым я работаю. Я делаю это, делая наброски на своем iPad, но также работаю с карандашом и бумагой.Имейте в виду, что этот шаг не должен занимать много времени (обычно я трачу на наброски не более 15-20 минут), потому что прямо сейчас вам нужно только мысленно перенести изображение на бумагу. Не беспокойтесь о том, что потратите кучу времени на доведение до совершенства деталей. Просто нарисуйте что-то, что вам понятно, а обо всем остальном позаботьтесь позже.

Шаг 2: Схема

Затем я превращаю свой набросок в векторный контур, импортируя его в Adobe Illustrator и обводя линии с помощью инструмента «Перо и форма».После того, как я закончил обводку, мне нравится сглаживать линии с помощью инструмента сглаживания, и когда меня устраивают все линии, я начинаю вносить коррективы в композицию.

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

Шаг 3: Цвет

Пора начинать заливать все контуры цветом. Это нормально, если для вашего дизайна не предусмотрена полная цветовая палитра. Существует множество отличных веб-сайтов, которые могут помочь вам определить цветовую палитру (некоторые из моих любимых — Adobe Color CC и Flat UI Colors). Постарайтесь не переборщить и добавить кучу цветов, если в этом нет крайней необходимости. Визуально привлекательнее, если цветовая палитра будет как можно более простой.Я считаю, что сочетание оттенков одного цвета с другим контрастным цветом дает лучший визуальный эффект.

Шаг 4: подробности

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

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

Шаг 5: Текстура

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

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

Заключительные мысли

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