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

Продолжение в статье: https://medium.com/@madrabbit/что-модно-в-плоской-графике-a36ce65e06d0

В честь праздника небольшая акция.

Сегодня с 15:00 до 00:00 по мск действует большая скидка на все форматы обучения: теперь их можно приобрести по старой цене (5; 10; 17,5).

После 00:00 цены становятся прежними.

Те, кто ждали скидки — вы ее дождались.

По вопросу приобретения писать в ЛС @imadrabbit

Вдогонку к посту «Что модно...».

Артем Кулик написал заметку «10 трендов дизайна логотипов в 2018 году». Если вы, как и я, плевались от нового жирненького логотипа Kickstarter'a, то вам 100% стоит почитать эту статью.

http://telegraf.design/10-trendov-dizai-na-logotipov-v-2018-godu/

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

Что добавится:

1. Раздел «Практика» в конце каждой главы. Живые примеры из моих проектов за 2017 год. Описание проблем, с которыми я столкнулся, и объяснение решений.

2. Подробный анализ ошибок студентов.

3. Пошаговые видео-уроки с процессом работы: от поиска референсов до воплощение иллюстрации в жизнь.

4. Больше примеров. Многие полюбили гайд за красивые наглядные примеры. Теперь их еще больше. Адски больше.

5. Появится 5-ая глава, с описанием реализации фишек в техническом плане, т.е. работе в программах (AI, PS).

Обновление будет выходить постепенно, глава за главой.
В феврале будет релиз 1-ой главы, которая уже на данный момент стала толще в 3 раза. Будет жарко.

Продолжаю раскрывать тему текстур.
В интерфейсе АИ можно добавлять объектам текстуру либо с помощью фильтра Зерно (Grain), либо используя более интересные способы. Сегодня я расскажу об одном из них, а точнее об инструменте Кисть (Brush).

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

В аттаче набор кистей, которыми я пользуюсь.

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

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

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

Дрибббл: https://dribbble.com/madmadmad/buckets/535108-FLAT

Биханс: https://www.behance.net/collection/119934021/Illustration

Вимео: https://vimeo.com/user52784517/likes

Открыл для себя (а теперь еще и для своих подписчиков) отличного иллюстратора из Тель-Авива. Стиль очень напоминает полюбившиеся с детства иллюстрации к книге Г. Остера «Вредные советы».

https://www.behance.net/gallery/61070679/Various-Editorials-2

Сегодня я расскажу о Half-tone shading (или полутон). Этот графический прием пришел из поп-арта, и использовался для смягчения резкой границы перехода между областью света и тени.

Иллюстраторам, работающим в плоском стиле, он тоже пришелся по вкусу. Так, например, в наикрутейшем ролике Man Seeking Woman ( https://vimeo.com/116876108 ), который выполнен в однотонной цветовой гамме, этот прием выполняет роль паттерна и заполняет пустые пространства объектов.

В работе "Head Shot Stickers Pack" ( https://www.behance.net/gallery/58164733/Head-Shot-Stickers-Pack ), с помощью этото приема Phu Twenty привносит в иллюстрацию объема.

А в моей работе для Solar DAO ( https://www.behance.net/gallery/59693373/Illustration-set-17 ) точечная текстура стала стилеобразующим элементом.

Как добиться такого эффекта в Иллюстраторе:

1. Создаем объект и заливаем его ЧБ градиентом
2. Применяем эффект Pixelate > Color Halftone

В параметрах Chanel выставляем значение 0, значение Max Radius зависит от желаемого результата. Советую поиграться с протяженностью градиента, чтобы добиться качественного результата.

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

Есть способ по-проще.

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

Windows > Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Dots

Выбираем подходящий под задачу паттерн и заливаем им наш объект.

К плюсам этого способа можно отнести скорость, к минусам — меньше возможностей контролировать результат.

В феврале аккурат к релизу обновленной первой главы проведу мастер-класс, на котором расскажу как эффективно использовать Half-tone shading (полутон) и Stipple-Shading (зерно), о котором шла речь ранее, в коммерческой иллюстрации.

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

Ниже я делюсь советами, как навести порядок в исходнике. Поехали.

1. Все элементы должны быть собраны в логические группы (все, что относится к клавиатуре — в группу keyboard, все, что к окну браузера - в группу browser и т.д.)

На объекты, к которым применена маска, вешаю бирку [mask] в начале названия, чтобы никогда не перепутать с обычными. Называть можно как угодно, лично мне привычнее так.

2. Внутри каждой группы я располагаю объекты в соответствии с их фактическим местонахождением на арт-борде.

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

3. Внутри каждой из подгрупп свои уровни вложенности. Просто запихнуть все в одну группу недостаточно.

Например, в группе browser_up у меня находится синяя полоска-подложка и вложенная группа btn с тремя круглыми кнопочками, которые находятся в левом верхнем углу каждого уважающего себя браузера.

4. Каждому объекту я даю название. Однако иногда бывает, что в иллюстрации используется много копи-пастных элементов, называть по отдельности которые лишено всякого смысла (например, если бы серых строк текста у меня было не 3, а 103). Чтобы они не мешались, я засовываю их в отдельную группу (text). Удобно.

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

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

В своей недавней статье «Что модно в плоской графике» я приводил в качестве примера замечательную работу “Workplace By Facebook” (https://www.behance.net/gallery/59906857/Workplace-By-Facebook) за авторством Rishab Soni, в которой очень круто применен эффект 3Д изгиба у баблов с сообщениями.

Сегодня я поделюсь советом как можно добиться такого эффекта в Адоб Иллюстраторе.

I. Создаем фигуру, по форме которой будет происходить вращение
Чтобы создать 3Д развертку цилиндра, рисуем прямоугольник и применяем к нему эффект Revolve (Effect > 3D > Revolve)


II. Создаем объект, который будем вращать
Рисуем прямоугольник со скругленными углами и перетаскиваем фигуру в панель Symbols (Window > Symbols)


III. Накладываем объект на форму
Выделяем наш цилиндр, открываем панель Appearance (Window > Appearance), открываем наш примененный эффект 3D Revolve, нажимаем на кнопку Map Art, в появившемся окне в графе Surface выбираем боковую поверхность (прим. — 3-я по счету), в графе Symbols выбираем наш прямоугольник. Перемещаем его в нужную область, немного играем с размером.

Чтобы скрыть цилиндр и посмотреть как прямоугольник будет выглядеть после вращения, ставим галочку напротив Invisible Geometry.


IV. Разбираем цилиндр
Выделяем наш цилиндр, разбираем его оформление (Object > Expand Appearance), избавляемся от обтравочных масок (Object > Clipping Mask > Release), удаляем все кроме нашей фигуры.

На выходе получаем то, что нам было нужно: