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

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

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

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

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

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

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

http://bewilder.tv/

Знакомство с 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. Минимализм. В плоском дизайне следует избегать излишних «наворотов», сложных подходов к визуализации элементов.

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

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

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

20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне

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

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

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

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

1. Creddy

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

2. Modus Leadership

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

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

3. Pitch Tents

Запоминающийся сайт лондонский фирмы по прокату кемпинговых палаток. Кнопки призывов к действию оформлены в едином стиле с забавными иллюстрациями.

4. Minergie

Юбилейный сайт швейцарской строительной компании использует плоский дизайн, CSS3/HTML5 и анимированные векторные иллюстрации на компактной главной странице.

5. Психология и бизнес

Новый дизайн для сайта компании «Психология и бизнес» от веб-студии ReConcept. Разработчик уверяет, что на подбор стиля для иллюстраций ушло 90% времени. В результате решено было иллюстрировать сайт в спокойной палитре цветов.

6. ABC Dental

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

7. Debiopharm Group

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

8. Insurance Experiments

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

9. 911 LEGAL TEAM

Сайт калифорнийской правовой компании из 40 юристов. Название юр.фирмы и доменное имя символизируют 911-помощь (в рунете есть адвокат-911.рф, www.9111.ru). Тут, для лаконичного представления услуг подходит компактный дизайн с понятным интерфейсом, интерактивом и флэт-иллюстрациями.

10. Inside the Head

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

11. Kasra Design

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

12. Reech

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

13. Studio Pigeon

Польская студия специализируется на разработке персонажей. Сайт наполнен плоскими иллюстрациями и flat-видео.

14. HEADSPACE

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

15. Ruya

Сайт дубайского бренд-маркетингового агентства добавляет градиентную тень, делая векторные иллюстрации «мягкими». Главный экран и разделы, оформленные в оригинальном стилистике с эффектом осветления выглядят чистенькими и аккуратными. WordPress сайт использует Css3/Html5, Jquery,WebGL.

16. Etch Design Studio

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

17. Malika Favre

Впечатляюще оформлен плитками персональный сайт-портфолио иллюстраторши Малики Фавр, которая выросла во Франции, в семье хиппи. Потомственная художница стала замечательным иллюстратором и графическим дизайнером, а бунтарский дух движения проявился в творчестве (См. eCommerce проект 18+ Малики The Kamasutra). Смелое совмещение стилей Поп-Арт и Optical Art оценили престижные клиенты: издания The New Yorker, Vogue, BAFTA, агентство Sephora and Penguin. Портфолио на главной странице представлено сплошным коллажем иллюстраций с красиво анимированными GIF.

И напоследок

Сайты известных иллюстраторов, интересно и оригинально использующих в своем творчестве стиль Flat:

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

creative flat design illustration

800*800

Изометрические плоский дизайн концепции дизайна веб страницы

2501*2501

Поп стиль плоский геометрический орнамент декоративный элемент дизайна

2000*2000

man character illustration exquisite character hand drawn elements

2000*2000

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

1200*1200

millennials и социальных медиа Изометрические иллюстрации концепции Изометрические плоский дизайн концепции дизайна веб страницы для веб сайта и мобильного сайта векторные иллюстрации

2000*2000

веб разработка концепции плоский дизайн

1200*1200

flat icon camera basket

1024*1369

eps flow chart infographic design flat design icon

2000*2000

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

2000*2000

brown rock flat border free download flat design wave paper cut wind

1668*2388

teenager man character illustration exquisite character

2000*2000

Современный плоский дизайн концепции коллективной работы дизайн с персонажами в собрании и презентации можно использовать для бизнес маркетинга баннер бизнес контента содержание веб дизайна плоский векторные иллюстрации

4375*4375

управление работой иконы квартиру дизайн иллюстраций

800*800

flat icon camera baseball

3072*4107

Иллюстрация двух человек говорящих в плоском дизайне

1200*1200

flat spaceship ufo cartoon

2000*2000

teachers day teaching reading knowledge

2500*2500

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

4375*4375

интернет магазин отправляющий пакет иллюстраций в стиле плоский дизайн

5000*5000

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

4167*4167

Современный плоский дизайн концепции коллективной работы дизайн с персонажами в совещании и презентации можно использовать веб дизайн плоский маркетинг стратегии содержания бизнеса

4375*4375

Современный плоский дизайн концепции маркетинга в социальных сетях можно использовать для анализа бизнес контента мобильного приложения целевой страницы веб дизайн шаблона плоский векторные иллюстрации

4375*4375

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

8333*8333

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

4375*4375

Стратегия маркетинга иллюстрации вектора дизайна деловой встречи плоская при люди изолированные

2334*2334

Современный плоский дизайн концепции анализа веб seo с персонажами можно использовать для оптимизации seo бизнес стратегии содержимого мобильного приложения целевой страницы шаблон веб дизайна плоский векторные иллюстрации

4375*4375

Вакцинация от коронавируса covid 19 в день время для вакцинации плоский дизайн иллюстрации врачи готовы вводить вакцины

2000*2000

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

2334*2334

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

4375*4375

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

2000*2000

цифровая концепция маркетинга с плоским дизайном набор цифрового маркетинга связанных значок на изолированных фоне

4167*4167

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

4375*4375

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

3967*3967

знак вопроса знак плоский дизайн

1200*1200

одноразовая кофейная чашка векторная иллюстрация с плоским дизайном

4167*4167

розовый фламинго плоский дизайн

1200*1200

серый дельфин плоский дизайн

1200*1200

Современный плоский дизайн концепции маркетинга в социальных сетях можно использовать для анализа бизнес контента мобильного приложения целевой страницы веб дизайн шаблона плоский векторные иллюстрации

4375*4375

красный осьминог плоский дизайн

1200*1200

красный зонт плоский дизайн

1200*1200

Счастливый выпускной 2021 рамка с плоским дизайном

2000*2000

зеленый логотип халяль с плоским дизайном

1200*1200

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

4375*4375

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

2334*2334

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

1200*1200

маска плоский дизайн

1200*1200

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

4375*4375

график роста торговли криптовалютой или цифровой монетой в плоском стиле

5000*5000

Аль Коран Рамадан плоский дизайн

1200*1200

семья смотрит телевизор оставаться дома активность во время пандемии v 2019 коронавирусная концепция плоский дизайн иллюстрация

2000*2000

свяжитесь с нами плоский стиль дизайна

2000*2000

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

1200*1200

современная плоская концепция разработки мобильных приложений с построением персонажей и созданием приложения которое разработчик может использовать для бизнеса Целевая страница мобильного приложения веб дизайн плоская векторная иллюстрация

4375*4375

плоский дизайн иллюстрация цифровой маркетинговой стратегии

1200*1200

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

4375*4375

Современная плоская концепция дизайна пользовательского интерфейса ui с символами и текстом место можно использовать для баннера Инфографика мобильное приложение целевой страницы веб дизайн шаблона плоский векторные иллюстрации

4375*4375

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

4375*4375

Анализ данных Изометрические иллюстрации концепция Изометрические плоский дизайн концепции дизайна веб страницы для веб сайта и мобильного сайта векторные иллюстрации

2501*2501

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

1200*1200

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

4167*4167

человек который играет в видеоигры с гаджетом векторная иллюстрация плоский дизайн

5001*5001

маленький ресторан здание вектор с плоским дизайном

4167*4167

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

4375*4375

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

1200*1200

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

4167*4167

сеть передачи данных изометрическая концепция иллюстрации современная плоская концепция дизайна веб страницы для веб сайта и мобильного веб сайта векторная иллюстрация eps 10

2501*2501

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

4375*4375

Создание иллюстрации для сайта в стиле Flat (Урок)

Всем привет!

Сегодня мы рассмотрим создание иллюстрации для сайта в стиле Флэт.

Для начала откроем Photoshop и создадим документ, указав следующие размеры:

Создадим новый слой и зальем его цветом #81b0d5:

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

Сделаем подставку для девайсов. Для этого создадим два прямоугольника разной толщины и зальем верхний цветом #6982A1, а нижний цветом #7591AE:

Теперь нарисуем тучки. Для этого создадим прямоугольник с закругленными углами и два круга инструментом «Эллипс». Вторую тучку сделаем копированием первой и отзеркаливанием с уменьшением масштаба:

Преобразуем наши тучки в смарт объекты и применим к ним следующий стили:

Фон для наших девайсов готов, теперь приступим к созданию самих объектов иллюстрации.

Для начала нарисуем флетовый ноутбук. Нарисуем основу ноута инструментом «Прямоугольник». Ширина основы 230 пикс., высота – 10:

Зальем основание цветом #8EA1AB. Сделаем низ основания закругленным. Для этого инструментом перспектива сблизим нижние точки прямоугольника:

И инструментом «Перо» с нажатой кнопкой Alt добавим закругления:

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

Создадим экран ноутбука. Сделаем это прямоугольником со скругленными углами. Радиус закругление, ориентировочно, 7 пикс. Зальем форму цветом #71838B:

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

Еще важный момент – экран должен быть уже основания. Так как он находится дальше, по правилам перспективы он должен быть меньше.

Добавим у основания небольшую выемку. Можно просто скопировать основание, уменьшить и закрасить более светлым цветом:

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

Добавим экран и блик веб-камеры. Так как экран у ноутов светится, было бы логичным сделать его чисто белым. Соблюдаем пропорции.

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

Инструментами «Прямоугольник» и «Текст» наполним экран разноцветными графиками и текстом:

Создадим группу слоев и отправим в нее все детали ноутбука.

Создадим еще одну группу слоев и поместим ее под группой с ноутбуком. Приступим к рисованию монитора.

Точно также, как и у первой иллюстрации – ноута, создадим экран с закругленными углами. Зальем рамку монитора цветом #8EA1AB.

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

Не забываем, также, «лечить» алиасы масштабированием:

Добавим внизу рамки монитора некое подобие логотипа или кнопки и нарисуем подставку. Стойку подставки растягиваем в небольшой треугольник трансформированием перспективы. Цвет стойки и логотипа: #71838E, цвет основания стойки – такое-же, как основания ноута — #8EA1AB:

Выравниваем элементы по центру выделив рамку, относительно которой хотим применить выравнивание и сам элемент:

Сверху слева нарисуем в мониторе квадратик и напишем рандомный нечитаемый текст, как это делали в экране первой иллюстрации:

Для данной иллюстрации используем любой уплотненный шрифт.

Внизу иллюстрации монитора добавим 6 разноцветных квадратиков, размером 10 х 10. Цвета квадратиков будут соответствовать цветам точек на диаграмме — #728CB8, #FF7285, #F1B23A, #728CB8, #59BBFF и #CFC8CC:

Сгруппируем квадраты и выровняем по центру относительно иллюстрации монитора.

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

Ниже всех точек создадим слой и нарисуем кривую, соединяющую центры всех точек инструментом «Перо», предварительно выбрав режим пера – «Контур»:

Далее из контекстного меню, по щелчку правой кнопкой мыши, выбираем пункт «Выполнить обводку контура». Инструмент устанавливаем – «Кисть».

Параметры кисти:

Непрозрачность кисти – 100%.

На получившуюся фигуру делаем наложение цвета #5E7BAC:

Нарисуем лупу, которая будет увеличивать второй узел диаграммы. Для этого создадим новый круг, зальем его цветом #E7EEF8. Добавим к кругу обводку 3 пикс., цветом #CFC8CC:

Инструментом «Прямоугольник со скругленными углами» нарисуем вытянутую ручку лупы цветом #74838E и разместим ее под углом:

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

В результате, у нас должен получиться такой монитор:

Нарисуем иллюстрацию iPad. Не забываем про пропорции, веб-камеру и кнопочку внизу девайса. Рамка цветом таким-же, как рамка ноута. Вебку и кнопку можем скопировать с ноута и монитора. Цвет кнопки #889BA3:

Скопируем 3 первых квадратика из монитора и вставим их вниз iPad. Ниже напишем рандомный текст светло-серым цветом:

Нарисуем разноцветную круговую диаграмму:

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

Заключительным этапом рисуем иллюстрацию iPhone, в которой размещаем контент. Контент рисуем примитивными фигурами – «Эллипс» и «Прямоугольник»:

Фон нашей иллюстрации можно сделать «Шумным». Для этого выделяем фон, заходим в меню «Фильтр > Добавить шум» и выставляем следующие параметры:

Наша иллюстрация готова. Спасибо за внимание и всем творческих успехов!

Результат рисования иллюстрации в стиле «Флэт»:

Премиум уроки от WebDesign Master

Другие уроки по теме «Иллюстрации и Инфографика»

история, преимущества и применение на практике

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

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

Определение флэт дизайна

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

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

История флэт дизайна

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

Согласно сайту Design Is History, краткое описание ключевых особенностей этого стиля заключается в следующем: «… стиль ориентировался на простоту, удобочитаемость и объективность. Наследие этого стиля — использование шрифтов без засечек, сеток и асимметричных макетов. Также выделяется сочетание типографики и фотографии как средства визуальной коммуникации. Основные влиятельные работы были разработаны как плакаты, которые считались наиболее эффективным средством предоставления информации».

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

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

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

Первый шаг к повышению популярности плоского UI в цифровых продуктах был сделан Microsoft, это движение началось в начале 2000-х годов и широко развилось в продуктах 2010 года, в частности, в разработке мобильных интерфейсов для Windows Phone 7. Основные особенности плоского дизайна, такие как интуитивные простые формы, жирная четкая типография, яркие контрастные цвета, длинные тени, отсутствие сложных деталей и текстур, хорошо прижились. Следующий скачок популярности флэт дизайна произошел в 2013 году, когда Apple выпустила iOS 7 на основе принципов плоской графики в качестве основы для удобных интуитивно понятных интерфейсов. Можно также сказать, что некоторые ключевые принципы плоского дизайна нашли свое выражение в Material Design от Google.

Так основными особенностями плоского дизайна стали:

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

Преимущества плоского дизайна

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

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

Со всем вышесказанным, плоский дизайн обеспечивает широкое поле для творческого поиска и стилистических концепций.

Флэт дизайн — применение на практике

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

Проектирование пользовательского интерфейса

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

Дизайн пользовательского интерфейса

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

Тематические иллюстрации

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

Печатные иллюстрации

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

Брэндинг

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

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

 
Источник

Как создавать оригинальные плоские иллюстрации: советы графического дизайнера. | by tubik

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

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

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

Пользователь мобильного телефона »XO PIXEL

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

Золотое членство

Участники

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

Шаг 1: Нарисуйте!

Первый шаг в этом уроке — просто нарисовать! Я уже набросал этот рисунок на листе бумаги обычным карандашом.

Как видите, я отнюдь не лучший в рисовании, поэтому цифровая иллюстрация — лучшее, что может случиться с теми из нас, кто не умеет рисовать!

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

Эскиз иллюстрации персонажей

Шаг 2. От бумаги к монтажной области

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

Шаг 3. Загрузите и разместите

В Adobe Illustrator создайте новый документ для Интернета и выберите набор настроек «Обычный» — 1366×768 пикселей.

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

Я также разместил иллюстрацию на монтажной области.

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

Бумажный эскиз на монтажную область

Шаг 4: Трассировка инструмента «Перо»

Выберите инструмент «Перо». Поскольку мы собираемся обводить иллюстрацию, я собираюсь изменить цвет обводки на более заметный цвет, в данном случае красный, а затем увеличу толщину обводки до 2 пунктов.Теперь просто обведите формы на нашей иллюстрации с помощью инструмента «Перо».

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

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

Обводка иллюстрации с помощью инструмента «Перо»

Шаг 5: Инструмент сглаживания

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

Шаг 6: Нанесите цвет

Выберите фигуру, возьмите инструмент «Пипетка» (I) и выберите цвет, которым вы хотите заполнить фигуру в цветовой палитре.

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

Шаг 7: Дополнительные настройки

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

Я также сделал некоторые дополнительные корректировки лица и формы тела.

Шаг 8: Формы фона

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

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

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

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

Заключение

Вот и все! Вы только что превратили этот набросок в цифровую иллюстрацию прямо в Adobe Illustrator! Не забудьте оценить это видео и подписаться на XO PIXEL, чтобы смотреть больше таких же отличных видео, как это. Как всегда, спасибо за просмотр! Увидимся в следующем видео.

Сообщение навигации

Почему редакционные иллюстрации выглядят так похожи в наши дни — 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) историк искусства Эрнст Гомбрих напоминает нам, что каждое художественное движение в истории является отражением интересов той или иной эпохи.В нашем случае золотой век плоской иллюстрации говорит о нашей одержимости технологиями, скоростью и выживанием.

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

Изображение Катарины Бреннер. Иллюстрации находятся под лицензией Creative Commons Attribution 4.0 International. Иллюстрации Пабло Стэнли, из библиотеки дизайна humaaans. Все иллюстрации отредактированы.

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

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

Facebook стал тесно связан с этим стилем, который его создатели из Buck метко окрестили «Алегрия», что в переводе с испанского означает «радость». Но компания совсем недавно приняла то, что стало подавляющим трендом в редакционной и веб-иллюстрации за последние несколько лет, особенно в сфере технологий. Airbnb, Hinge, Lyft, Airtable, Google и YouTube — все в этом повальном увлечении, как и, по-видимому, все существующие новые приложения или стартапы.Для этих компаний использование визуального языка, сигнализирующего о позитивности и взаимосвязанности, является инструментом, позволяющим скрыть социальный и политический вред и разногласия, которые создают их продукты, а иллюстрации все чаще становятся центральным элементом стратегии.

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

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

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

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

По мере того, как Интернет становится все более ориентированным на изображения и анимацию, технические и медийные сферы все больше полагаются на иллюстрацию, которая заполняет пустое пространство и добавляет характер в свои приложения и веб-страницы. Плоский стиль Alegria превратился в простой, масштабируемый и смягчающий имидж инструмент для технологических компаний. Социальные сети, такие как «Маленькие мультяшные человечки, создающие большие интерфейсы» и «Корпоративный Мемфис» на are.na, а также резкий аккаунт Twitter «Люди плоского дизайна», стали документировать эту тенденцию, которая распространилась по различным брендам и приложениям. , и веб-сайты до такой степени, что они стали тревожными.

По словам Эрреры, стиль Alegria был намеренно изменен для воспроизводимости в процессе разработки и с тех пор прошел через ряд студий иллюстрации. «Изначально стиль начинался как нечто более интуитивное и сложное, — говорит Херерра. «Но после различных обзоров он начал переходить к чему-то более простому для копирования и реализации. Есть руководство по использованию и иллюстрациям, которое прошло через множество различных студий по всему миру, так что я думаю, что сейчас оно отпечатано во многих сетчатках.”

В тематическом исследовании на своем веб-сайте Эррера пишет, что персонажи «созданы для выражения, а не для индивидуальной идентичности. Они этнически неспецифичны, чтобы представлять разнообразие ». Оранжевая или пурпурная кожа естественно вписывается в мультяшный стиль Алегрии; если персонажи изображены без привязки к расе, любой может увидеть себя отраженным в персонажах. Эта логика также влияет на идиосинкразические формы тел персонажей в такой же степени, как и технические соображения. Как в ваших иллюстрациях не отдавать предпочтение типам телосложения одних людей по сравнению с другими? Придайте вашим персонажам тип телосложения, которого нет ни у кого.

Эскизы Xoana Herrera для системы иллюстраций Facebook. Изображения любезно предоставлены художником.

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

Как и во многих системах иллюстраций в стиле Alegria, трудно пролистать жизнерадостные, готовые к сотрудничеству фигуры в тематическом исследовании Airbnb и не проникнуться каким-то утопическим оптимизмом. Человеческая связь! Взаимовыгодные сделки! Тот факт, что Airbnb в настоящее время участвует в общенациональной лоббистской битве за то, чтобы не платить налоги, которые он должен местным органам власти по всей стране, является неудобным, и ему нет места ни в каком раю, прилегающем к Алегрии.

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

Политическое затруднение, с которым сталкивается стиль Alegria, связано не столько с эстетикой, сколько с вредными корпорациями, для которых он стал счастливым, динамичным лицом. Этот стиль, кажется, служит иллюстрацией намеренного развертывания жизнерадостного минимализма, чтобы замаскировать коварство многонациональных технологических корпораций дружелюбием и доступностью.Линдси Баллант, арт-директор The Baffler , связывает подъем стиля с тенденциями мировой политики того времени.

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

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

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

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

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

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

Шаг 1. Эскиз

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

Шаг 2: Схема

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

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

Шаг 3: Цвет

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

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

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

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

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

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

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

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

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

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

TOP 20 советов по плоскому дизайну (СТАНЬТЕ ПЛОСКИМ ДИЗАЙНОМ NINJA)

Плоский дизайн — одна из самых прекрасных вещей, которые случились со мной.Я узнал, что красота в простоте. Я не просто создаю с помощью методов плоского дизайна, я живу в плоском дизайне. Моя жизнь проста и прекрасна, окрашена невероятными красками 😉 Наслаждайтесь!

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

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

Фигуры 😀 Моя любимая часть плоского дизайна. Я люблю рисовать на бумаге, планшете и телефоне, но не помню, когда использовал Pen Tool в Adobe Illustrator. 🙂 Мой процесс рисования стал таким простым, когда я погрузился в мир плоского дизайна. Обычно я использую инструменты «Прямоугольник», «Прямоугольник со скругленными углами» и «Эллипс» в Adobe Illustrator. Вот и все. Все мои плоские дизайнерские иллюстрации сделаны всего из трех простых форм. Поэтому, если вы хотите добиться точного и чистого плоского дизайна, используйте эти три геометрические формы.Здесь вы можете ознакомиться с моими иллюстрациями.

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

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

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

Если вы хотите немного улучшить плоский дизайн, используйте обрезанные тени. Я создал стиль Gigantic 2.0, где вы можете увидеть, как я использую плоский дизайн для вырезания теней. Зачем вырезать? Я стараюсь избегать таких эффектов, как градиент, поэтому вырезаю объект и формы, чтобы добиться трехмерного вида и сохранить плоский дизайн в безопасности. Это простой процесс. Всего несколько шагов, и ваш плоский дизайн будет выглядеть стильно и неотразимо.

Свечение важно, так как длинные и режущие тени в плоском дизайне.Это небольшие уловки, которые помогут вам вывести плоский дизайн на более высокий уровень. Если вы хотите добиться эффекта свечения плоского дизайна, вы можете использовать инструмент «Разделение» на панели Обработки контуров или Маски (программа Adobe Illustrator). Итак, если вы создаете блестящую поверхность на своей плоской дизайнерской иллюстрации, используйте этот тип свечения 😉

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

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

Первое, что вы услышите о плоском дизайне, — ДЕРЖАТЬ ЭТО ПРОСТО. Как? Попробуйте создать набросок на бумаге, просто из геометрических фигур и простых линий. Это может вам очень помочь. Для хорошей плоской дизайнерской иллюстрации решающее значение имеет набросок.Делайте простые детские наброски. Играть с этим. Когда вы конвертируете простой рисунок в векторные в Adobe Illustrator, ваш плоский дизайн будет профессиональным и красивым. Плоский дизайн — это самый быстрый способ превратить простой рисунок с бумаги в идеальную векторную графику.

Как вы уже знаете, плоский дизайн — это особый стиль. Поэтому, если вы хотите, чтобы он оставался плоским, используйте правильные шрифты. Вам нужно научиться различать шрифты с засечками и шрифты SANS с засечками. Для плоского дизайна используйте Sans Fonts.Это логичное объяснение. Намного меньше деталей! Засечки — это небольшая линия, прикрепленная к концу штриха в букве или символе. Слишком много всего. Плоский дизайн требует минимализма, поэтому используйте шрифты без засечек. Здесь вы найдете шрифты, которые подойдут для вашего плоского дизайна.

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

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

Хорошо, пора пойти дальше с плоским дизайном.FLAT 2.0 — это сочетание плоских форм дизайна, цветов, длинных и срезанных теней. Если вы хотите быть частью современного плоского дизайна, используйте стиль Flat 2.0. Здесь я покажу вам, как различать стили Flat 1.0 и Flat 2.0. Это не самая важная вещь в мире, но если вы хотите научиться плоскому дизайну, это полезно знать.

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

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

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

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

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

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

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

Вдохновение • Примеры сайтов Натали Берч • 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 компонента, чтобы он выглядел сложным, современным и свободным от лишних помех. Плоские иллюстрации отлично сочетаются с четким шрифтом и однотонным фоном.

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

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

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

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

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

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

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

Отражение

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

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

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