Пошаговое руководство по созданию пользовательских иллюстраций без каких-либо навыков рисования

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

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

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

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

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

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

Воссоздайте знаменитую космическую иллюстрацию.

Дизайнер и иллюстратор Нина Георгиева является первопроходцем этой печально известной работы Dribbble, и теперь этот стиль стал отдельной тенденцией.

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

Это то, что вы получите в конце.

1. Начните со звезд.

Используя «инструмент звезды» в Illustrator, создайте четырехконечную звезду. Затем сделайте его прозрачным на 75 процентов.

Выделив его, продублируйте его на месте, нажав Ctrl+C, затем Ctrl+F.

Уменьшите форму спереди.

Затем добавьте эффект свечения; выберите большую форму; и примените эффект «Размытие по Гауссу» на панели «Внешний вид».

Наконец, вы можете сохранить форму звезды на панели «Символы», чтобы использовать ее позже в композиции.

2. Создайте форму облака.

Сложите прямоугольники вместе с различной шириной.

Объедините их вместе с панелью «Pathfinder».

Завершите, придав всей форме большое значение «радиуса угла».

3. Сделайте текстуру планеты из облаков

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

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

4. Настройте текстуру.

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

Удалите лишние точки на одной стороне текстуры и сгладьте ее.

5. Создайте текстурированную планету.

Перекройте волнистый узор кругом и создайте разделение с помощью параметра «Разделить» на панели «Обработка контуров».

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

6. Добавьте атмосферу на планету.

Создайте два больших круга и вставьте их позади планеты с помощью Ctrl+X, затем Ctrl+B.

Выровняйте их правильно.

Добавьте прозрачность новым кругам и эффект размытия третьему кругу (на панели «Внешний вид»).

Сгруппируйте (Ctrl+G) и сохраните результат на панели «Символ».

7. Дублируйте и раскрасьте планеты.

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

Используйте инструмент «Прямое выделение» (A) для выбора и инструмент «Пипетка» (I) для выбора и применения цвета.

8. Масштабируйте и размещайте свои планеты

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

9. Добавьте кольца.

Нарисуйте несколько кругов вокруг планет, чтобы получились кольца.

Чтобы вставить меньшие планеты перед кольцами, выделите их, затем нажмите Ctrl+X (вырезать) и Ctrl+F (вставить впереди).

10. Добавьте облака и звезды на небе.

Вернувшись к панели «Символ», перетащите несколько фигур облаков и звезд.

Дублируйте, масштабируйте и размещайте их по своему усмотрению.

Вот окончательный результат.

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

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

Воссоздайте стиль иллюстраций блога Toptal

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

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

Это то, что вы получите в конце.

1. Рисуем простого малька.

Чтобы создать малька, начните с длинного прямоугольника и добавьте несколько точек по краям с помощью инструмента «Перо» (P).

Измените форму, перемещая точки с помощью «Инструмента «Прямое выделение» (А)».

2. Создайте контейнер для майонеза.

Создайте три круга с уменьшающимися размерами сзади вперед.

Внешний круг — контейнер, средний (белый) — майонез, а внутренний, меньший круг (с цветной обводкой) — световой эффект.

Разрежьте внутренний круг пополам и убедитесь, что «Крышка» и «Угол» на панели «Обводка» круглые.

3. Приготовьте кетчуп и горчицу.

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

Просто нанесите на соус разные цвета и подсветите, как было предложено выше.

4. Добавьте листья салата в форме волны.

Инструментом Pen Tool (P) проведите прямую линию и добавьте к ней несколько точек.

Распределите их горизонтальное расстояние на панели «Выровнять».

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

5. Создайте ломтик хлеба.

Создайте длинный овал; наложите его на форму волны и создайте разделение с помощью параметра «Разделить» на панели «Обработка контуров».

Удалите лишнюю форму, которую вы получили с помощью инструмента «Разделить», затем перекрасьте ломтик хлеба.

6. Приготовьте хлеб для гамбургеров.

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

Закруглите этот край, чтобы получилась гладкая булочка для гамбургера.

7. Готовьте бургер.

Раскрасьте салат зеленым цветом.

Затем создайте разные «прямоугольники со скругленными углами» для мяса, сыра и помидоров, используя соответственно коричневый, желтый и красный цвета.

Перемещайте предметы, чтобы правильно выложить гамбургер слоями.

8. Сделайте хот-дог из бургера.

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

9. Придумайте форму пиццы.

Начните с верхнего слоя гамбургера, переместите нижние точки вниз и сблизьте их.

Дублируйте треугольную форму, уменьшите ее масштаб и сделайте ее желтой для сырной основы.

10. Добавьте формы помидоров.

Перекройте большой красный круг меньшими внутренними кругами и используйте параметр «Минус спереди» на панели «Навигатор».

Поместите несколько ломтиков помидоров разного размера и положения на форму для пиццы.

11. Создайте несколько кусочков мяса.

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

12. Добавьте дополнительные начинки.

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

13. Создайте соломинку.

Звезда с длинным белым прямоугольником.

Добавьте две точки с помощью Pen Tool (P) и сдвиньте верхние края, чтобы согнуть соломинку.

Скопируйте и вставьте среднюю точку на правом краю, затем примените красную обводку без заливки.

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

14. Создайте форму банки с газировкой.

Нарисуйте восьмиугольник; добавить банку; переместите верхние четыре точки вверх; и масштабируйте (S) верхний и нижний края наружу, чтобы он больше походил на банку.

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

15. Измените форму банки и масштабируйте соломинку.

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

16. Закончите волнообразным рисунком на банке.

Нарисуйте органическую и волнистую форму для дизайна на банке.

Затем создайте разделение с помощью панели «Pathfinder» и удалите лишние внешние формы.

Вот окончательный результат.

Воссоздайте иллюстрацию, вдохновленную игрой «Долина монументов».

Monument Valley — игра-бестселлер, созданная студией UsTwo. Она завоевала десятки наград, в том числе стала лучшей игрой Apple для iPad в 2014 году, а ее стиль иллюстраций вдохновлен красивыми геометрическими работами Эшера.

Теперь вы узнаете, как легко создать такой же визуальный стиль, который принес этой игре такой огромный успех.

Это то, что вы получите в конце.

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

Цветовая палитра включает четыре цвета для воды, травы, дерева и зданий — каждый в трех оттенках для имитации естественного света.

1. Создайте изометрическую плоскость.

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

Мы назовем это «Изометрический эффект».

Перейдите в «Эффект»> «3D»> «Выдавливание и скос». Выберите «Изометрический верх» в раскрывающемся списке «Положение» на появившейся панели параметров. Установите «Глубину вытягивания» на ноль в первой опции «Выдавливание и скос».

Теперь у вас есть изометрическая плоскость.

Чтобы лучше поиграть с формой, перейдите в Объект > Разобрать внешний вид.

Это позволит вам изменить цвет плоскости и свободно перемещать точки.

Мы назовем это «Эффект расширения».

2. Обведите лица острова.

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

Повторите «Изометрический эффект» на каждом.

На втором этапе примените «Изометрический верх», «Изометрический левый» и «Изометрический правый» соответственно.

3. Соберите и раскрасьте основание острова.

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

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

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

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

5. Соберите куб.

Освободите фигуры с помощью «Эффекта расширения», соедините лица и примените три оттенка серого для имитации освещения.

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

6. Запустите базу дерева.

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

Затем примените три оттенка коричневого, чтобы обозначить дерево.

7. Закончите дерево.

Уменьшите кору дерева; дублировать куб; и раскрасьте его лица, как форму земли, в зеленый цвет.

8. Используйте куб для создания строительных блоков

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

Играйте с масштабом; сдвиньте нижние точки вниз, чтобы создать основание башни; и уменьшите его, чтобы создать столб.

9. Соберите башни.

Совместите основание башни и розовый куб.

Оставьте между ними некоторое пространство и поместите в него три столба.

Для идеального выравнивания убедитесь, что вы установили «Привязать к точке» и «Умные направляющие» в пункте меню «Вид».

10. Соедините башни.

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

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

11. Создайте лестницу.

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

Дублируйте и расположите шаги несколько раз.

12. Закройте лестницу.

Совместите точки с левых сторон, чтобы закрыть промежутки от лестницы.

13. Переверните лестницу.

Выберите законченную лестницу и используйте «Инструмент «Отражение» (O)», чтобы создать второй блок, обращенный влево.

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

14. Свяжите лестницу.

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

15. Создайте эффект глубины воды.

Дублируйте и уменьшите голубую поверхность.

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

16. Начните колоду, используя существующие самолеты.

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

17. Добавьте столбы на палубу.

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

Вот окончательный результат.

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

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

В заключение

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

Все, что вам нужно помнить, это эти 3 принципа:

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт