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

02.06.2021 alexxlab

Содержание

Создание иллюстрации для сайта в стиле 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 недорого

Цена договорная

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

Мне нужно сделать подачу дизайн проекта интерьера комнаты,все чертежы и визуализация есть,скину в личку)

Рина В.

Цена договорная

Cрочная печать баннера 2,5х3,5м

Здравствуйте! Необходима срочная печать баннера 2,5х3,5м Изготовление необходимо сегодня.

Дмитрий П.

1 200 руб

Необходим качественный макет

Необходимо подготовить макет до печати на хосте ширина примерно 80-90 см, высота, чтобы был прямоугольник Бюджет 500-700₽

Никита

Цена договорная

Разработать логотип

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

Попов В.

Цена договорная

Ищем Графического дизайнера для постоянной работы

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

Лена К.

Как можно быстро научиться рисовать во FLAT на достойном уровне? | by MAD RABBIT

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

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

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

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

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

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

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

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

Но теперь ближе к сути.

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

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

Требования к желающим попасть в тестовую группу: возраст 18+, дизайнерская или около-дизайнерская профессия, базовое умение работать в AI.

Количество мест: 5 человек.

Чтобы принять участие достаточно сделать репост вот этой записи в ВК и написать мне в ЛС краткий рассказ о себе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Брэндинг

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

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

Источник

Flat Design — от истоков до наших дней. Flat Design — от истоков до наших дней Результат рисования иллюстрации в стиле «Флэт»

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

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

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

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

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

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

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

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

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

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

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

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

2. Modus Leadership

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

Читайте также: Психология влияния цвета на конверсию сайта

3. Pitch Tents

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

4. Minergie

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

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

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

6. ABC Dental

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

Читайте также: Анимация по правилам UX-дизайна: полное руководство

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

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для сасйта.

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

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

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

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

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

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

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

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

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

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

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

Для данной иллюстрации используем любой уплотненный . Найти уплотненные шрифты вы можете на сайте fonts4web.ru , выбрав категорию «Уплотненные».

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

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

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

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

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

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

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

Как создать городской пейзаж в стиле flat в Adobe Illustrator

Вы хотели когда-нибудь почувствовать себя архитектором и создать модель города? Тогда этот урок точно для вас. В нем вы научитесь создавать стильные дома в модном плоском (flat) стиле. Давайте начнем.

1. Создаем набор плоских домов с простыми формами.

Шаг 1

Давайте начнем строить первый дом. Убедитесь, что вы включили Smart Guides (View->Smart Guides). Это поможет вам облегчить организацию и передвижение объектов.

Выберите Rectangle Tool (M) и кликните левой кнопкой мыши на Монтажной области (Artboard). Задайте размер прямоугольника: width 45px, height 60px. Заполните его светло серым цветом (около 20% черного).

Шаг 2

Один из главных элементов любого здания — это крыша. Создайте узкий прямоугольник серого цвета и поверните его на 45 градусов (удерживая кнопку Shift). Кликните дважды на Reflect Tool (R), чтобы открылось окно с настройками и отразите объект в вертикальной плоскости, кликнув на кнопке Copy, создав таким образом вторую часть крыши. Сдвиньте две части крыши под прямым углом друг к другу.

Шаг 3

Выделите все созданные объекты с помощью Selection Tool (V), удерживайте кнопку Alt и кликните на основании дома. Рамка станет толще, указывая на то, что вы сейчас выравниваете к Главному объекту (Key Object). Перейдите на панель Align и кликните кнопку Horizontal Align Center.

Шаг 4

Давайте избавимся от пустого пространства между домом и крышей. Выберите основание дома и перейдите в Object->Path->Add Anchor Points. Выберите верхнюю среднюю якорную точку (anchor point) с помощью Direct Selection Tool (А) и перетащите ее прямо вверх, удерживая клавишу Shift на клавиатуре, до тех пор пока она не скроется за крышей.

Шаг 5

Добавьте небольшой квадрат к левой части дома в качестве трубы дымохода и выполните команду Arrange-> Send to Back (Shift-Control-[), чтобы передвинуть его на задний план.

Добавьте бордюр к дымоходу и такой же бордюр к основанию дома.

Шаг 6

Давайте теперь сделаем входную дверь. Начнем с создания прямоугольника со скругленными углами серого цвета в центре нижней части дома. Возьмите Eraser Tool (Shift-E), удерживайте клавишу Alt, кликните мышкой и начните двигать мышкой в нижней части нашей двери. Часть, покрытая белой рамкой Eraser Tool будет удалена, после того как вы отпустите кнопку мыши.

Шаг 7

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

Шаг 8

Выровняйте ступеньки и основание выполнил команду Vertical Align Bottom в панели Align.

Шаг 9

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

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

Шаг 10

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

Шаг 11

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

Добавьте круглое окно в верхней части здания с помощью элемента Ellipse Tool (L).

Шаг 12

Давайте сделаем входной проем более детальным. Выберите элемент двери и перейдите в Object->Path->Offset Path и задайте значение Offset -1px, таким образом создав еще одну фигуру внутри двери. Расширьте ее вниз, чтобы она касалась ступенек и заполните ее более темным серым цветом. Добавьте простую круглую ручку для двери.

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

Шаг 13

Давайте вернемся к окнам и используем ту же технику Offset Path для создания рамок вокруг окон. Добавим узкий прямоугольник, разделяющий наши окна на две части. Используем Rotate Tool (R) для установки прямоугольника перпендикулярно к его начальной позиции и кликнем кнопку Copy в окне опций Rotate, таким образом создав копию, мы получим две пересекающиеся полоски.

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

Шаг 14

Придадим объем к мансардному окну, добавив темный круг меньшего радиуса. Дважды скопируйте меньший круг (Control-C > Control-F > Control-F) и передвиньте верхнюю копию вверх и вправо. Отрежьте ненужные части с помощью Pathfinder и заполните внутренний круг темно серым цветом для придания глубины.

Шаг 15

Добавим легкую тень под декоративным бордюров в центре фасада. Заполним теневую фигуру с помощью линейного градиента от белого к темно серому и переключим на Multiply Blending Mode.

Используем ту же технику, чтобы добавить тень под крышей. Скопируйте фигуры крыши и передвиньте копию немного вниз. Удалите ненужные части с помощью Shape Builder Tool (Shift-M), выбрав основную фигуру дома и фигуру с тенью и кликнув на нужные участки, удерживая клавишу Alt.

Шаг 16

Давайте перейдем к созданию следующего здания — небольшого магазина. Начнем с создания прямоугольника размерами 55 на 40 px, и присоединения к нему основания и ступенек, как мы делали это с предыдущим домом. Добавьте широкий светло-серый прямоугольник в качестве окна и разделите его тремя темными прямоугольниками. Добавьте тени.

Шаг 17

Начнем создавать навес путем добавления скругленного прямоугольника в верхний левый угол, и скопируем его — удерживая клавиши Shift и Alt передвинем вправо. Нажмите Control-D несколько раз, добавляя больше копий, чтобы полностью покрыть верхнюю часть здания. Сделайте некоторые копии темнее (через одну).

Удалите верхнюю часть навеса, сделав его плоским. Добавьте тень в Multiple Blending Mode под навесом, отделяя его от фасада. Добавьте светлые кирпичи на фасад, сохраняя стиль нашего предыдущего здания.

Шаг 18

Давайте сделаем еще один жилой дом с большим гаражом перед домом. Добавьте основную фигуру дома — прямоугольник размером 50 на 80 px и начните формировать гаражные ворота с помощью Rectangle Tool (M) и функции Offset Path.

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

Шаг 19

Сделаем простую плоскую крышу для нашего дома. Для начала сделайте светло-серый прямоугольник, затем выберите его нижний правый угол (якорную точку) с помощью Direct Selection Tool (A). Нажмите Enter для вызова окна опций Move и установите горизонтальную позицию (Horizontal Position) в значение 3px, а вертикальную (Vertical) в значение 0px. Остальные настройки оставьте по умолчанию и нажмите кнопку Ок, таким образом мы сдвинем точку дальше вправо. Повторим то же самое с левой якорной точкой, на этот раз установив значение Horizontal в -3px, сделав таким образом нижнюю границу крыши шире.

Шаг 20

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

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

Шаг 21

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

Шаг 22

Возьмем декоративный бордюр и скругленные окна из нашего первого дома и размножим их и расположим в нужном порядке на фасаде. Объедените (Unite) элементы крыши в Pathfinder и добавьте обводку на краях с помощью Offset Path.

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

Шаг 23

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

Продублируйте созданую цепочку плитки ниже, расположив ее так, чтобы она была немного перекрыта верхним слоем плитки ( Control-[ ). Спрячьте ненужные части плитки, удалив их с помощью инструмента Eraser Tool (Shift-E) или спрятав их под боковой планкой ( Shift-Control-] ). Сделайте некоторые плитки темнее, чтобы крыша была более стильной.

Шаг 24

Добавьте вход, декоративный бордюр и группу окон, взяв их из другого дома и добавив легкую тень под крышей с помощью Multiply Blending Mode.

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

Шаг 25

Давайте перейдем к последнему зданию — часовой башне. Это будет самое высокое и самое узкое здание размерами 25 на 100 px. Добавим фундамент, выделенный полупрозрачной тенью и начнем формировать часы, добавляя окружность с помощью Ellipse Tool (L), удерживая клавишу Shift. Добавим еще одну окружность поменьше внутри и определим границы, сделав их темнее.

Шаг 26

Добавим две тонкие ленты для выделения шкалы времени и выравняем их по вертикальному центру внутреннего круга. Выделяем эти две ленты и используем Rotate Tool (R), поворачивая их на 90 градусов. Нажимаем кнопку Copy в окне опций Rotate для создания еще двух линий. Испоьзуем Polygon Tool и устанавливаем значение Sides 3 для формирования треугольника. Растягиваем треугольник так, чтобы получилась часовая стрелка.

Выделите часовую стрелку и сдвиньте ее с помощью Rotate Tool (R). Добавьте более длинный треугольник для минутной стрелки и поверните ее. Добавьте легкое отражение на циферблат для того, чтобы он выглядел более реалистичным.

Шаг 27

Давайте добавим стильную плиточную крышу к башне. Комбинируем треугольник и набор плиток в одну фигуру с использованием Uniting в панели Pathfinder. Возьмем набор плиток из предыдущего дома и поместим их под созданной фигурой треугольника. Выделим группу плиток и фигуру крыши одновременно и кликнем правой кнопкой мыши и выберем Make Clipping Mask, делая невидимыми ненужные части.

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