Когда не нашлось картинки на стоках. Техники быстрого создания иллюстраций

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

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

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

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

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

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

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

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

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

Можно начать с техники псевдо "low-poly" где все обьекты будут совсем примитивными, и состоять из кубиков и шаров. Это и быстрее, и иногда интереснее смотрится.

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

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

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