Урок

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

Урок от авторов сайта Webdesign-Master по созданию иллюстрации для сасйта.


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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_1
Для начала откроем Photoshop и создадим документ, указав следующие размеры:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_2
Создадим новый слой и зальем его цветом #81b0d5:

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

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_6

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_7

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_8
Преобразуем наши тучки в смарт объекты и применим к ним следующий стили:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_9

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_10
Фон для наших девайсов готов, теперь приступим к созданию самих объектов иллюстрации.

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_12
И инструментом «Перо» с нажатой кнопкой Alt добавим закругления:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_13
Точно также сделаем и с другой стороны основания.

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

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

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

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

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

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_17
Инструментами «Прямоугольник» и «Текст» наполним экран разноцветными графиками и текстом:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_18
Создадим группу слоев и отправим в нее все детали ноутбука.

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

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

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

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_20
Выравниваем элементы по центру выделив рамку, относительно которой хотим применить выравнивание и сам элемент:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_21
Сверху слева нарисуем в мониторе квадратик и напишем рандомный нечитаемый текст, как это делали в экране первой иллюстрации:

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_23
Сгруппируем квадраты и выровняем по центру относительно иллюстрации монитора.

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_25

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_27

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_28
Параметры кисти:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_29
Непрозрачность кисти – 100%.

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_31
Инструментом «Прямоугольник со скругленными углами» нарисуем вытянутую ручку лупы цветом #74838E и разместим ее под углом:

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_33
В результате, у нас должен получиться такой монитор:

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_36
Нарисуем разноцветную круговую диаграмму:

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

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

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_39
Наша иллюстрация готова. Спасибо за внимание и всем творческих успехов!

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

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_1

Источник: webdesign-master

PS: ну а если вы хотите научиться рисовать интерфейсы в Иллюстраторе, то прочитайте статью Как создавать интерфейсы в Adobe Illustrator

  • http://facebook.com/profile.php?id=100000418566442 Игорь Шихов

    А зачем это делать в фотошопе? Для каждого дела есть свой инструмент. Я видел умника, который в фотошопе многостраничный журнал делал, ох и намаялся он с ним))

    • https://infogra.ru Infogra

      В целом не важно где, главное шейпами :-) Хотя автор урока об этом ни разу не написал…