Сегодня мы рассмотрим создание иллюстрации для сайта в стиле Флэт.
Для начала откроем Photoshop и создадим документ, указав следующие размеры:
![Новый документ Photoshop Новый документ Photoshop](img/blog/web-design/sozdaniye-flat-illustracii-1/6c0877.png)
Создадим новый слой и зальем его цветом #81b0d5:
![Новый слой Новый слой](img/blog/web-design/sozdaniye-flat-illustracii-1/b82586.png)
Сделаем эффект голубого неба. Для этого создадим новый слой и мягкой кистью белого цвета с непрозрачностью 25% нарисуем еле заметное пятно достаточно большого размера внизу прямоугольника:
![Создание неба Создание неба](img/blog/web-design/sozdaniye-flat-illustracii-1/13204c.png)
Сделаем подставку для девайсов. Для этого создадим два прямоугольника разной толщины и зальем верхний цветом #6982A1, а нижний цветом #7591AE:
![Подставка в иллюстрации Подставка в иллюстрации](img/blog/web-design/sozdaniye-flat-illustracii-1/a3a847.png)
Теперь нарисуем тучки. Для этого создадим прямоугольник с закругленными углами и два круга инструментом «Эллипс». Вторую тучку сделаем копированием первой и отзеркаливанием с уменьшением масштаба:
![Рисуем тучки - 1 Рисуем тучки - 1](img/blog/web-design/sozdaniye-flat-illustracii-1/41d0f9.png)
![Рисуем тучки - 2 Рисуем тучки - 2](img/blog/web-design/sozdaniye-flat-illustracii-1/7ee89c.png)
![Рисуем тучки - 3 Рисуем тучки - 3](img/blog/web-design/sozdaniye-flat-illustracii-1/ce7a39.png)
Преобразуем наши тучки в смарт объекты и применим к ним следующий стили:
![Преобразуем в смарт объект Преобразуем в смарт объект](img/blog/web-design/sozdaniye-flat-illustracii-1/35c125.png)
![Преобразуем в смарт объект - 2 Преобразуем в смарт объект - 2](img/blog/web-design/sozdaniye-flat-illustracii-1/fb1708.png)
Фон для наших девайсов готов, теперь приступим к созданию самих объектов иллюстрации.
Для начала нарисуем флетовый ноутбук. Нарисуем основу ноута инструментом «Прямоугольник». Ширина основы 230 пикс., высота – 10:
![Основание иллюстрации ноутбука Основание иллюстрации ноутбука](img/blog/web-design/sozdaniye-flat-illustracii-1/9f215c.png)
Зальем основание цветом #8EA1AB. Сделаем низ основания закругленным. Для этого инструментом перспектива сблизим нижние точки прямоугольника:
![Основание иллюстрации - перспектива Основание иллюстрации - перспектива](img/blog/web-design/sozdaniye-flat-illustracii-1/0cd130.png)
И инструментом «Перо» с нажатой кнопкой Alt добавим закругления:
![Инструмент Перо Photoshop Инструмент Перо Photoshop](img/blog/web-design/sozdaniye-flat-illustracii-1/929b51.jpg)
Точно также сделаем и с другой стороны основания.
Создадим экран ноутбука. Сделаем это прямоугольником со скругленными углами. Радиус закругление, ориентировочно, 7 пикс. Зальем форму цветом #71838B:
![Экран ноута Экран ноута](img/blog/web-design/sozdaniye-flat-illustracii-1/84f562.jpg)
Обратите внимание, ширина и высота экрана ноута должна соответствовать размеру HD, чтобы картинка не выглядела слишком мультяшно. То-есть пропорции реальных девайсов должны быть соблюдены.
Еще важный момент – экран должен быть уже основания. Так как он находится дальше, по правилам перспективы он должен быть меньше.
Добавим у основания небольшую выемку. Можно просто скопировать основание, уменьшить и закрасить более светлым цветом:
![Углубление у основания Углубление у основания](img/blog/web-design/sozdaniye-flat-illustracii-1/29cb00.jpg)
Вообще, Флет стиль – это очень упрощенный стиль рисования иллюстраций и иконок. Но основные делали, которые придают объектам узнаваемую форму – должны быть.
Добавим экран и блик веб-камеры. Так как экран у ноутов светится, было бы логичным сделать его чисто белым. Соблюдаем пропорции.
![Добавляем белый экран к иллюстрации Добавляем белый экран к иллюстрации](img/blog/web-design/sozdaniye-flat-illustracii-1/887d02.jpg)
Обратите внимание. Элементы флетовой иллюстрации не должны быть размытыми. Для этого увеличиваем каждый элемент и корректируем инструментом «Масштаб»:
![Избавляемся от алиасов Избавляемся от алиасов](img/blog/web-design/sozdaniye-flat-illustracii-1/aea327.jpg)
Инструментами «Прямоугольник» и «Текст» наполним экран разноцветными графиками и текстом:
![Наполним экран текстом и графиками Наполним экран текстом и графиками](img/blog/web-design/sozdaniye-flat-illustracii-1/1af6aa.jpg)
Создадим группу слоев и отправим в нее все детали ноутбука.
Создадим еще одну группу слоев и поместим ее под группой с ноутбуком. Приступим к рисованию монитора.
Точно также, как и у первой иллюстрации – ноута, создадим экран с закругленными углами. Зальем рамку монитора цветом #8EA1AB.
Не забываем про пропорции. Если вы не знаете пропорции девайсов, лучше скачать из интернета их фотографии и измерить линейкой. Например, есть хорошая линейка mySize для Windows.
Не забываем, также, «лечить» алиасы масштабированием:
![Боремся с алиасами в иллюстрации Боремся с алиасами в иллюстрации](img/blog/web-design/sozdaniye-flat-illustracii-1/7fc537.jpg)
Добавим внизу рамки монитора некое подобие логотипа или кнопки и нарисуем подставку. Стойку подставки растягиваем в небольшой треугольник трансформированием перспективы. Цвет стойки и логотипа: #71838E, цвет основания стойки – такое-же, как основания ноута - #8EA1AB:
![Добавляем опору Добавляем опору](img/blog/web-design/sozdaniye-flat-illustracii-1/9b65bc.jpg)
Выравниваем элементы по центру выделив рамку, относительно которой хотим применить выравнивание и сам элемент:
![Выравнивание по центру в Photoshop Выравнивание по центру в Photoshop](img/blog/web-design/sozdaniye-flat-illustracii-1/c58502.jpg)
Сверху слева нарисуем в мониторе квадратик и напишем рандомный нечитаемый текст, как это делали в экране первой иллюстрации:
![Текст и иконка Текст и иконка](img/blog/web-design/sozdaniye-flat-illustracii-1/1b886b.jpg)
Для данной иллюстрации используем любой уплотненный шрифт.
Внизу иллюстрации монитора добавим 6 разноцветных квадратиков, размером 10 х 10. Цвета квадратиков будут соответствовать цветам точек на диаграмме - #728CB8, #FF7285, #F1B23A, #728CB8, #59BBFF и #CFC8CC:
![Палитра цветов для графика Палитра цветов для графика](img/blog/web-design/sozdaniye-flat-illustracii-1/c5ae32.jpg)
Сгруппируем квадраты и выровняем по центру относительно иллюстрации монитора.
Инструментом «Эллипс» нарисуем несколько кружков, рандомно разбросанных по графику соответствующего цвета. Внутри каждой точки графика нарисуем кружок белого цвета. Цвета для каждой точки можно брать из квадратиков:
![Палитра цветов для графика Палитра цветов для графика](img/blog/web-design/sozdaniye-flat-illustracii-1/6d4b1e.jpg)
Ниже всех точек создадим слой и нарисуем кривую, соединяющую центры всех точек инструментом «Перо», предварительно выбрав режим пера – «Контур»:
![Переключение режима кривой в Photoshop Переключение режима кривой в Photoshop](img/blog/web-design/sozdaniye-flat-illustracii-1/746146.jpg)
![Рисование пером Рисование пером](img/blog/web-design/sozdaniye-flat-illustracii-1/c5bd32.jpg)
Далее из контекстного меню, по щелчку правой кнопкой мыши, выбираем пункт «Выполнить обводку контура». Инструмент устанавливаем – «Кисть».
![Обводка контура Обводка контура](img/blog/web-design/sozdaniye-flat-illustracii-1/c16fc0.jpg)
![Обводка кистью Обводка кистью](img/blog/web-design/sozdaniye-flat-illustracii-1/b39990.jpg)
Параметры кисти:
![Параметры кисти Параметры кисти](img/blog/web-design/sozdaniye-flat-illustracii-1/8e9b2b.jpg)
Непрозрачность кисти – 100%.
На получившуюся фигуру делаем наложение цвета #5E7BAC:
![Наложение цвета на фигуру Наложение цвета на фигуру](img/blog/web-design/sozdaniye-flat-illustracii-1/d3ad9c.jpg)
Нарисуем лупу, которая будет увеличивать второй узел диаграммы. Для этого создадим новый круг, зальем его цветом #E7EEF8. Добавим к кругу обводку 3 пикс., цветом #CFC8CC:
![Рисование лупы Рисование лупы](img/blog/web-design/sozdaniye-flat-illustracii-1/234ff1.jpg)
Инструментом «Прямоугольник со скругленными углами» нарисуем вытянутую ручку лупы цветом #74838E и разместим ее под углом:
![Рисование ножки лупы Рисование ножки лупы](img/blog/web-design/sozdaniye-flat-illustracii-1/d54f60.jpg)
Теперь внутри лупы, в новой группе слоев, нарисуем прямоугольниками и круглешками увеличенный нод. Для того, чтобы увеличенный узел и соединительные линии не выходили за границы лупы, растрируем группу с увеличенным узлом и создадим обтравочную маску:
![Обтравочная маска для элементов Обтравочная маска для элементов](img/blog/web-design/sozdaniye-flat-illustracii-1/b7baff.jpg)
В результате, у нас должен получиться такой монитор:
![Иллюстрация монитора Иллюстрация монитора](img/blog/web-design/sozdaniye-flat-illustracii-1/c25152.jpg)
Нарисуем иллюстрацию iPad. Не забываем про пропорции, веб-камеру и кнопочку внизу девайса. Рамка цветом таким-же, как рамка ноута. Вебку и кнопку можем скопировать с ноута и монитора. Цвет кнопки #889BA3:
![Иллюстрация iPad Иллюстрация iPad](img/blog/web-design/sozdaniye-flat-illustracii-1/bb3e3f.jpg)
Скопируем 3 первых квадратика из монитора и вставим их вниз iPad. Ниже напишем рандомный текст светло-серым цветом:
![Квадратики Квадратики](img/blog/web-design/sozdaniye-flat-illustracii-1/b342f0.jpg)
Нарисуем разноцветную круговую диаграмму:
![Рисуем круговую диаграмму Рисуем круговую диаграмму](img/blog/web-design/sozdaniye-flat-illustracii-1/fae974.jpg)
Такую диаграмму можно нарисовать инструментом «Эллипс». Секции диаграммы делаем копированием круга и обрезанием контура. Для обрезки контура можно растрировать эллипс и вырезать ненужное инструментом «Прямолинейное лассо».
Заключительным этапом рисуем иллюстрацию iPhone, в которой размещаем контент. Контент рисуем примитивными фигурами – «Эллипс» и «Прямоугольник»:
![Иллюстрация iPhone Иллюстрация iPhone](img/blog/web-design/sozdaniye-flat-illustracii-1/33a6e0.jpg)
Фон нашей иллюстрации можно сделать «Шумным». Для этого выделяем фон, заходим в меню «Фильтр > Добавить шум» и выставляем следующие параметры:
![Добавлояем шум фоновуму изображению Добавлояем шум фоновуму изображению](img/blog/web-design/sozdaniye-flat-illustracii-1/2821e4.jpg)
Наша иллюстрация готова. Спасибо за внимание и всем творческих успехов!
Результат рисования иллюстрации в стиле «Флэт»:
![Создание иллюстрации для сайта в стиле Flat (Урок) Создание иллюстрации для сайта в стиле Flat (Урок)](img/blog/web-design/sozdaniye-flat-illustracii-1/sozdaniye-flat-illustracii-1.jpg)
Премиум уроки от WebDesign Master
Другие уроки по теме «Веб-дизайн»
- Создание дизайна сайта в Figma на реальном примере. Материалы урока
- Создание Bootstrap-сетки в Figma
- С чего начать работу над дизайном и где брать вдохновение
- Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
- Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
- Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение