Создайте простые иллюстрации для веб

Sep 12, 2025

Инструкции

Я сел, сыграл музыку, затемнул огни и открыл мой ноутбук. У меня было много, чтобы сделать. В попытке вызывать вдохновение, я начал рисовать Doodle Art. Линии от одного угла экрана на другой, когда я увидел форму кометы. "Хм," мой мозг медленно начал: "Что, если я их подключу и добавлю планеты?"

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

Стиль иллюстрации

Прежде чем я начну работать на иллюстрации, я уверен, что я понимаю его цель и контекст, где он будет жить. Это в приложении или веб-сайт или обои? Будет ли текст на нем, и он будет расположен в оживленной среде? Это должно быть символизировать действие, или это просто там, чтобы отдать определенную атмосферу?

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

Эстетические правила

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

Геометрические правила, логические прогрессии, симметрия. Есть что-то очень привлекательное, имеющее строгие математические правила, применяемые к искусству. Это похоже на магию обратной машины; Он понижает мистический элемент в искусстве, чтобы он почти хотел раскрыть науку за ним.

Сложная иллюстрация; Простая цветная палитра

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Иллюстрация города со сложным уровнем детализации, которая объединялась с простой, аналогичной цветовой палитрой (Кредит на кредит: Нина геометриева)

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

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

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

Монохроматические палитры

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Аналогичные или монохромные палитры эффективно работают, когда есть визуальное прогрессирование или повторение элементов (Кредит на кредит: Нина геометриева)

Монохроматическая цветовая палитра состоит из оттенков или оттенков одного цвета. Оттенки случаются, когда цвет постепенно смешивается с белым; Оттенки случаются, когда это постепенно смешано с черным. Одним из проблем у меня всегда было монохроматические палитры, заключается в том, что оттенки и оттенки постепенно теряют вибрацию из-за природы смешивания цвета белыми или черными, оба из которых имеют нулевое насыщение.

Чтобы избежать этого постепенного унижения, я использую простой чит: а также добавление белого или черного, я постепенно смещаю оттенок немного. Это, по сути, имеет тонкую аналогичную палитру вместо монохроматической палитры. Например, если я хочу создать красные монохроматические оттенки, я бы сдвинул оттенок к апельсину. Если я хочу создать красные монохроматические оттенки, я бы сдвинул оттенок в направлении Magenta, как оно темнеет. Если я хочу получить более легкие оттенки синего, я сдвинулся к голую; Для темных оттенков синего цвета я смещусь в другом направлении к фиолетовому.

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

Простая иллюстрация; Комплексная цветовая палитра

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

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

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

Воспринимаемая яркости

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

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

Акцент против цветов по умолчанию

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Иллюстрация для домашней страницы ZOPIM. Голубые оттенки доминируют, с оранжевым, обеспечивая акценты (Кредит на кредит: Нина геометриева)

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

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

Проверка визуального баланса

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

Эта статья изначально появилась в Чистый журнал Выпуск 286; Купить это здесь !

Статьи по Теме

7 веб-дизайн DOS и что нельзя
6 лучших внештатных портфолио 2016 года
6 лучших инструментов Photoshop для веб-дизайнеров

Создайте простые иллюстрации для веб

Стиль иллюстрации

Эстетические правила

Сложная иллюстрация; Простая цветная палитра

Монохроматические палитры

Простая иллюстрация; Комплексная цветовая палитра

Воспринимаемая яркости

Акцент против цветов по умолчанию

Проверка визуального баланса

Инструкции - Самые популярные статьи

Управление состоянием rection Form с Formik

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

Как использовать React Spring для анимации компонентов

Правила отзывчивой веб-типографии

Как нарисовать металлические отражения

Оставьте инструмент ножа

Краска, как импрессионист

Создавайте идеальные сообщения во всех клиентах электронной почты

Категории