Привет! Давно не виделись и наверно еще больше не списывались. Сегодня я хочу передать тебе весь свой опыт, который я приобрел рисую для этого блога в течении прошедшего года . Понеслась!
Хотелось бы похвастаться большим его количеством, да еще и в качестве применения к газетам, журналам, новостным порталам, книгам, что могут оценить десятки тысяч человек ежедневно… но, опыт скромен и состоит из одной газеты для пенсионеров и этого блога.
Не буду говорить тебе что «нужно делать именно так, и никак иначе»… хотя, я в принципе никогда так не говорил, и всего лишь поделюсь своими наработками создания иллюстраций к статьям для блога сайт
Что такое иллюстрация
Вольное трактованные этого термина оставим в глубинах моей головы, а обратимся к глобальной паутине.
Иллюстрация – это рисунок или любое другое изображение, поясняющее текст, сюда можно отнести и фотографии, и гравюры, да и много чего еще .
Цель рисунка как правило выделить субъект, о котором идет речь, а не показать форму, объяснить или показать текстовое содержимое графическими методами.
Используется для передачи эмоций, атмосферы творящейся в тексте, изображении героев повествования, демонстрации объектов, пошаговых инструкций и схем в технической документации.
Как используются иллюстрации
Где мы встречаемся с ними чаще всего? ИМХО, приоритет такой — детские книги, затем сайты, газеты, журналы, остальные книги.
В газетах изображают в основном карикатуры, высмеивающие описываемую в тексте ситуацию, а журналы больше используют на фото коллажи и, если есть необходимость, рисунки, которые могут покупать на стоках.
Настоящий кладезь - это детские книги и сайты. Есть мнение, и не только мое, что на рисование иллюстраций к книге возьмут человека, у которого портфолио выполнено в одном стиле и схожей тематике, чем того, у кого сборная солянка из стилей, техник, тем и т.д.
И какой из этого напрашивается вывод? Правильно если ты хочешь заработать на рисовании картинок, сопровождающих текст, то это тебе необходимо подстраиваться под рынок, а не рынку под тебя.
На самом деле когда ты поймешь правила игры и перестанешь сопротивляться , выпячивая своего «Д’Артаньяна» на показ вот тогда ты можешь рассчитывать на работу в этой сфере.
С сайтами, на мой взгляд ситуация иная. Их много, и не смотря на то что ты все еще должен подстраиваться под клиента, тут тебе никто не запрещает, а даже рекомендует сделать свое портфолио как можно разнообразней, что бы заказчик мог выбрать стиль, в котором хочет сопровождать иллюстрации на своем портале.
Итак, подытожим, чтобы рисовать коммерческую иллюстрацию, а именно так называются оплачиваемые рисунки, тебе необходимо выбрать сферу, в которой ты хочешь применять свои таланты, создать богатое портфолио в одном стиле (для узкой сферы, вроде детских книг ), либо в разных (для сайтов и проектов с широкой тематикой ), чтобы продемонстрировать свой опыт заказчику.
Я надеюсь мы оба пониманием что сегодня будет опущен вопрос того как вообще рисовать и поговорим об идее и концепции, а не формах и линиях. Понеслась… опять!
1. Во первых строках нужно понять, а точнее спросить как видит иллюстрацию сам заказчик . Если ответ будет в стиле «На ваше усмотрение», то считай, что повезло, иные же заранее создают у себя в голове картинку и сетуют, когда она не совпадает с тем что вышло из-под твоего пера.
Я конечно сам себе заказчик и исполнитель, но если бы заказывал иллюстрации «кому-нибудь», то обязательно сказал бы, что конкретно нужно нарисовать и как я это вижу, а не «есть текст – иллюстрируйте».
2. Как правило мои иллюстрации опираются на подзаголовки , но не всегда информации хватает для составления четкой картины. В иных случаях, я перечитываю текст и вычленяю предложение из всего раздела, а еще лучше контекст и пытаюсь как-то его обыграть.
3. У меня блог и по моим наблюдениям большинство нарисованных для интернет-сайтов иллюстраций имеют развлекательный характер и хотят насмешить читателя, разбавить атмосферу, дать передохнуть.
Крупным интернет-изданиям, ну вроде adme, lookatme и иже с ними, часто нужны специфичные и креативные рисунки. С книгами проще – просто рисунок, иллюстрирующий текст, без всяких аллюзий и тайных смыслов.
4. Иллюстрации на сайтах нужны в первую очередь что бы читатель с катушек не съехал пока прочитает эту простыню . Поэтому чем больше будет рисунков, тем лучше. Однако осторожно, нарисовать восемь иллюстраций для одной статьи – сложно, но можно, а рисовать по восемь иллюстраций к десяти статьям, это бл*дь самоубийство (я знаю Т_Т).
То же справедливо и для книг. Если заказчик строго определяет количество рисунков на квадратный сантиметр, то в первую очередь необходимо оценить по силам ли тебе это. Как оценить? Возьми тестовое задание, можно даже не оплачиваемое, ведь если тебе подойдет, то с тобой будут сотрудничать, а если нет, то ты купишь себе СВОБОДУ от рабства над проектом, который в будущем будет ассоциироваться у тебя только с болью .
5. Цвет в иллюстрации задает настроение для всего текста . Светлые и яркие рисунки ассоциируются с хорошим настроением и говорят о том, что текст «настроен дружелюбно», не написан в депрессивных тонах, не стремиться тебя напугать. Темные цвета напротив могут сгустить краски что бы передать весь ужас, который описывается в тексте.
6. Черно-белые рисунки создаются быстрее цветных, но не так быстро, как кажется на первый взгляд … Ладно этот совет полезен, возможно, исключительно только для меня (с моим то стилем рисовки…), но в последнее время все чаще начинаю добавлять цвета и… не сказал бы что рисую заметно дольше. Так что это так, совет для тех, кто пока не умеет красить и думает «мой стиль будет черно-белым» — как думал я.
7. Оптимизируй задники . Часто в иллюстрации важен объект и совершенно не важен фон. Фон может быть абстрактным или просто каким-то пастельным. Если заказчик не требует от тебя подобной «Атмосферы», то не заморачивайся – кучу времени себе сэкономишь.
8. Старайся придерживаться одной рисовки . Да, весьма странный совет ответом, на который может служить фраза: «Ясен пень!». Но мы — начинающие художники (если ты нет, то что ты здесь забыл?) и каждый наш рисунок учит нас чему-то новому и после каждой работы мы рисуем все лучше и лучше.
9. Для сайтов, газет, журналов: когда ты выбираешь единый стиль рисовки, то иногда есть возможность придумать и персонажа . Если вспомнить иллюстрации к газете, которые я в детстве постоянно выискивал, то там был такой персонаж как Петрович. Честно скажу нарисован он был ужасно, но цепляло то как один и тот же персонаж попадает в разные ситуации.
Так и я сделал для своего блога, у меня два основных персонажа (ну и я на подстановке), которые иллюстрируют все происходящее в моих статьях.
10. Если текст описательный – рисуй объект, если повествовательный – действие . Сейчас объясню – если мне описывают, то какая шикарная ваза у моего соседа, то я рисую вазу, если мне рассказывают о том, как эта ваза к нему попала, то я могу нарисовать весь ее путь от фабрики до дома, как ее произвели, уронили, склеили, транспортировали и т.д.
11. Не самый категоричный совет, сугубо на мой взгляд, чем больше деталей, тем лучше . Да большое количество мелочей удлиняет процесс производства, но в то же время помогает читателю лучше прочитать картинку. Глаза цепляются то за одну вещь то за другую и образ откладывается в голове. Но есть тонкая грань между умеренным количеством и сильным переизбытком… эту грань ты должен найти сам;)
Ну, тут не так много, но как я и говорил это мой опыт создания иллюстраций и некоторые моменты которые я подметил лично для себя.
Надеюсь тебе было интересно, и ты получил парочку полезных знаний.
И, да, не забывай что для создания цифровых иллюстраций тебе необходим графический планшет)) Я последнее время присматриваюсь к Алиэкспрессу, там есть много планшетов по низким ценам . Я уже не раз покупал вещи у китайцев и в ближайшее время планирую купить себе новенький планшетик... а то мой ваком уже совсем стерся Т_Т
Всем творческого настроения друзья!
В течении последних нескольких недель я пробовал пользоваться полутоновыми фильтрами, мне был интересен результат и на что они способны. К тому же, к большому удивлению, я обнаружил инструмент Width Tool в Illustrator CS5. Имея эти два инструмента я решил найти им применение и создать иллюстрацию в стиле Роя Лихтенштейна.
Существует достаточно много уроков, рассказывающих как создать подобное изображение, но я решил пройти этот пусть сам. Я не интересовался другими уроками, т.к. мое занятие было лишь развлечением. Поэтому, если я вдруг скопировал чью-то технику, то я действительно не знал. К тому же, было бы совсем неплохо разместить на этом сайте урок по созданию иллюстраций в подобном стиле.
Рой Лихтенштейн (Roy Fox Lichtenstein; 27 октября 1923 - 29 сентября 1997) - американский художник, представитель поп-арта. Успех художнику принесли его работы на темы комиксов и журнальной графики. Википедия
Шаг 1
Начнем с работы в Иллюстраторе.Откройте фотографию в иллюстраторе с которой вы будете работать. Эту я нашел на Shutterstock , но вы можете выбрать любую другую.
Шаг 2
Выберите Pencil Tool (N) и начните рисовать поверх фото, используя его как фон. Я начал с глаз. Для зрачков использовал Эллипс (L).
Шаг 3
Продолжайте рисовать с помощью Pencil Tool (N) и Pen Tool (P), чтобы добиться большей точности, но не увлекайтесь, т.к. здесь не требуется идеальность.
Шаг 4
С помощью Pencil Tool (N) обведите контур волос девушки:
Шаг 5
Затем, этим же инструментов добавьте немного деталей для волос:
Шаг 6
В итоге у нас получились векторные элементы для создания девушки. Вы можете добавить больше элементов по желанию, это зависит от используемой фотографии.
Шаг 7
Удалите фоновую фотографию чтобы работать только с векторными элементами:
Шаг 8
Один из моих любимых инструментов в Иллюстраторе это Width Tool (Shift+W). Он позволяет изменить ширину штриха части нашей обводки. Посмотрите, это просто фантастика!
Шаг 9
Используя тот же инструмент, измените ширину некоторых штрихов примерно как здесь:
Шаг 10
Пришло время добавить немного цвета. Я использовал бежевый для кожи, желтый для волос, белый для глаз и черный для деталей. Блузка пусть будет зеленая:
Шаг 11
Теперь перейдем в Фотошоп. Откройте в Фотошопе текстуру бумаги. текстуру я нашел там же где и девушку, на Shutterstock.
Шаг 12
Поверх текстуры бумаги, создайте слой и наложите фото девушки с параметрами наложения Multiply. В данном случае она нам пригодится для импорта вектора из Иллюстратора и для создания полутонов.
Шаг 13
Обрежьте лишние части фотографии, которые выступают за края текстуры бумаги. Лучший способ сделать это, использовать маску слоя:
Шаг 14
Создайте новый слой под слоем фотографии девушки, но внутри той же папки с нашей маской. Измените режим наложения нового слоя на Multiply и залейте его голубым цветом:
Шаг 15
Скопируйте векторное изображение в иллюстраторе и вставьте в Фотошоп. При вставке я использовал опцию «Smart Objects», т.к. это позволяет редактировать вектор в любой момент прямо в Фотошопе.Как вы наверное заметили, я установил прозрачнось нового слоя в 70%, благодаря чему можно установить необходимое расположение слоя:
Шаг 16
Как только вы найдете необходимое расположение, сделайте слой непрозрачным (100%):
Шаг 17
Измените порядок слоёв таким образом, чтобы фотография девушки находилась поверх векторного слоя. После этого обесцветьте фото (Image > Adjustments > Desaturate). У вас получится черно-белое фото, примерно как у меня.Затем перейдите к редактированию уровней (Image > Adjustments > Levels).
Измените черный канал до 60 и белый до 195.
Задайте нашему слою режим наложения на Multiply:
Шаг 18
Выберите Filter > Pixelate > Color Halftone. В открывшемся окне укажите максимальный радиус 15 и значение 199 для всех каналов.Примечание: в зависимости от размера иллюстрации пропорционально изменяйте максимальный радиус.
Шаг 19
В итоге получаем данное изображение. Иллюстрация почти готова, осталось придать ей старый, потрепаный вид. Также нам нужно почистить от полутонов зубы и глаза:
Шаг 20
Поместите текстуру бумаги поверх всех слоев нашей иллюстрации и установите режим наложения Linear Burn:
Заключение
Иллюстрация готова. Здесь уже подчищены от полутонов зубы и глаза.Таким же образом, вы можете использовать полутона для создания иллюстраций в стиле Роя Лихтенштейна, как в нашем эксперименте.
Спасибо за внимание.
Это топик является переводом
Мне всё с таким же постоянством приходят письма с вопросами: "Хочу стать иллюстратором, с чего начать?", "Как мне научиться рисовать?", "Что делать, если у меня не получается рисовать, есть ли у меня шанс стать иллюстратором?"
На первый взгляд вопросы довольно странные. Не умеешь рисовать, не хочешь начинать и пробовать, не хочешь даже учиться рисовать - какой из тебя иллюстратор? Зачем тебе это нужно? Но всё не так просто, как кажется на первый взгляд.
Недавно я наткнулась в сети на высшую частную школу в Гамбурге, которая готовит узконаправленно только иллюстраторов. На первых же страницах "О себе" они сообщают, что иллюстратор - это дизайнер, который умеет рисовать.
Мне стало смешно, потому что я дизайнер графики и получила, без ложной скромности, хорошее образование. За долгие годы обучения нам неустанно твердили, что любой дизайнер должен уметь рисовать, обращаться с фотокамерой, понимать толк в типографике и разбираться в искусстве.
Наряду с такими предметами как типографика, нас учили рисунку и фотоделу - вещи, которые отразились и на моих представлениях об иллюстрации. Я посвятила влиянию фотографии на иллюстрацию в своей книге "Профессия - иллюстратор. Учимся мыслить творчески" сразу несколько разделов.
Высказывание, что иллюстратор - это дизайнер, который умеет рисовать, показалось мне очень странным. Сначала я решила, что люди просто не в курсе, чему учат современных дизайнеров. Но потом я, кажется, поняла, о чём они. А именно о том, что иллюстратор - профессионал, который владеет самыми разными навыками и техниками изображения, которые часто уже можно назвать скорее дизайнерскими.
Действительно, современный иллюстратор больше не привязан к традиционным изобразительным техникам: ему не обязательно работать только красками или карандашами на бумаге. Ему даже не обязательно уметь очень хорошо рисовать. Достаточно уметь обращаться с бумагой и ножницами, древесиной и стамеской, тканями и швейной машинкой, уметь рисовать лишь на уровне контуров и набросков и быть при этом не менее успешным и продаваемым иллюстратором, чем коллеги, работающие в традиционных техниках.
Сегодня мне бы хотелось заострить ваше внимание на техниках исполнения современных иллюстраций.
На вопросы вроде "С чего начать будущему иллюстратору?" я уже отвечала, и ниже можно проследовать по ссылке на мой ответ. А на вопрос, получится ли из кого-то иллюстратор, если он не научился рисовать традиционно, академически, утвердительно скажу, что да. Потому что если не даётся бумага и светотени, стоит попробовать себя в какой-то нетрадиционной технике, если вопреки всему хочется заниматься иллюстрацией профессионально.
Для вдохновения покажу вам красивую книгу - сборник работ иллюстраторов и художников, работающих в нетрадиционных иллюстраторских техниках.
Книга на американском амазоне:
Книга на немецком амазоне: Illustration Play: Craving for the Extraordinary
Обложка выполнена на очень красивой, фактурной бумаге с настоящими наклейками.
А так выглядит содержание - перечень представленных иллюстраторов.
Иллюстрации, выполненные с помощью выжигателя. Автор: Genevieve Dionne
Иллюстрации-инсталляции из различных материалов. Автор: Stephanie Dotson
Иллюстрации-инсталляции из бумаги и древесины. Автор: Aj Fosik
Иллюстрации на старых упаковках, конвертах и прочем. Автор Melvin Galapon
Готовы ли вы к рискам в веб-дизайне? Скорее всего, не каждый из вас даст утвердительный ответ. Тем не менее, существует риск, который с течением времени стал неким стандартом, трендом в современном веб-дизайне. Мы называем это «нечто» риском только потому, что важно не только фантазировать на тему и смешивать вариации элементов, но и представлять, насколько это уместно в вашем проекте дизайна сайта. Речь идет о сочетании фотографий и иллюстраций в одном дизайне.
Фотография в нынешнее время используется для придания реалистичности внешнему виду проекта, возможности акцентирования внимания посетителя на том, что речь идет о вполне важных и нужных вещах в жизни каждого человека. Иллюстрация или рисунок чаще подходит для узконаправленных проектов и подсознательно ассоциируются у человека с действом, «мультяшностью» или даже несерьезностью.
Но веб-дизайн - искусство новаторства и профессионализма работы в графических редакторах. А потому совместить два типа изображений вполне реально. Мы рассмотрим сегодня не только варианты того, как веб-мастера применяют такой вид изображений, но и тонкости их создания в Photoshop.
Пользовательские акценты
Включать иллюстрации в веб-дизайн можно практически легко, если они представляют собой элементы пользовательского интерфейса. Но они также не обязательно должны быть нарисованными от руки или представлять собой только специфические кнопочки/стрелочки. Это может быть качественная сюжетная векторная графика. На примерах ниже можно увидеть, как с помощью иллюстраций дизайн оживился (www.wittycookie.com), а герой-персонаж представляет возможности компании.
Иллюстрация лого-изображения
Если вы любите иллюстрацию как таковую и планируете сделать в веб-дизайне проекта акцент на неё, то хорошим вариантом станет использование иллюстрированного лого-изображения. Первый проект madebyfew.com отлично представляет это. Более того, рисунки везде использовались как отдельные дизайн-элементы в виде кружочков, лент серпантина, улыбок, миниатюр к материалам. Поскольку сайт посвящен конференции и отображает её участников, то такую картинку можно использовать вместо массовой фотографии участников.
Другой пример onehappycampernj.org несколько скромнее, ибо в качестве иллюстрации используется текстура с растительными элементами. Особенность в том, что изображение создано только для одной секции на главной странице. Это позволяет акцентировать внимание на информации, оживить сайт и подчеркнуть особенность информации. В одном из прошлых материалов мы уже рассказывали об огромных коллекциях текстур . Затем вам потребуется только сменить цвет в Photoshop, прозрачность.
Строительная компания Бельгии konosair.be решила также создать иллюстрацию над фотографией. При этом более в дизайне сайта рисованные от руки картинки уже не используются. Тем не менее, даже на начальной странице такое сочетание выглядит весьма занятно.
Иллюстрация типографики
Существует способ добавления надписей поверх фотографии. Но представьте себе именно рисованную типографику и даже анимированную (archrival.com). Такую «фишку» можно использовать поверх уже имеющегося видео или изображения.
Скромнее выглядит steptoandson.co.uk/about/, где типографика и шрифтовые пары использовались не как иллюстрация, а как текстовой слой. Тем не менее, правильно подобранный стиль создаёт впечатление того, что поверх фотографии именно рисовали и писали рукой, каллиграфически или по трафарету.
Расскажите историю
Проект mamyfactory.com/fr/ интересен тем, что рисунки используются буквально везде, но совмещаются с фотографиями. Создавать такое оформление сложнее. Во-первых, потребуется реальная фотография рук, занятых вязанием, а во-вторых, придется аккуратно в Photoshop выделять нитки и вязку магнитным лассо, а затем переводить все это в рисованный вид. Тут уже могут потребоваться плагины, умение рисовать, или простое знание того, как перевести фотографию в рисунок.
Красивым сочетанием иллюстрации и фотографии можно назвать и веб-дизайн проекта discoveryphototours.com/photo-tours/. Здесь и фотографии оформлены в разрывах страниц, и печати, заголовки созданы в виде мазков и иллюстрированная типографика.
Аналогичным выглядит и gili-lankanfushi.com, в дизайне которого поверх фотографии Мальдив расположились иллюстрированные иконки и надписи, листочки, в боковая панель и footer тем более усиливают своим видом эффект рисованности.
Правила применения иллюстраций
Использование иллюстраций и фотографий в одном проекте - это повод развить фантазию, добавить интриги в проект, придать дизайну немного изыска. Но при этом необходимо соблюдать некоторые правила . Да-да, увы, но даже для сочетания фоток и картинок они тоже есть.
- Стилистика иллюстраций должна соответствовать общему дизайну. Значит, и иконки, и пиктограммы, а также и текст также должны быть выдержаны в общем стиле.
- Использовать иллюстрации лучше для иконок и кнопок, дополнительных небольших картинок, но для визуального акцента и взаимодействия с пользователями - только фотографии.
- В начале работы создайте шаблон с иллюстрациями и затем расставьте акценты, добавив фотографии и видео.
- Близ фотографий отлично смотрятся не просто картинки, но анимированные элементы. Например, tmfp.co.uk; они едва заметны близ фотографий и совершенно не отвлекают пользователя от изучения информации.
- В виде рисунков уместно создавать лейбл или логотип компании и размещать их рядом или поверх фотографий.
- Иллюстрации помогают посетителю сориентироваться на сайте, рассказывают ему некую историю и проводят пользователя по страницам проекта.
Создание иллюстраций в Photoshop
Несмотря на то, что «риск», о котором мы рассказали в начале, оказался не таким уж и страшным, встает вопрос о том, как проще всего создать иллюстрацию. С одной стороны, вы можете использовать клипарты (clipart), которых в интернете со свободной лицензией много. Но с другой стороны, можно создать рисунок и самостоятельно.
Важно то, что качество конечного материала можно долго еще улучшать, осветлять, затемнять, играть с контрастом, цветностью. И да, стилей иллюстраций, рисования от руки очень много.
Но мы приведем небольшой пример того, как можно создать иллюстрацию вообще и как использовать дальше. Помните, что затем её можно будет перевести в вектор или сделать вексельной, можно ластиком удалить лишние детали и оставить только контуры. Например, вам требуется рисунок сумочки или туфельки, но клипарта или стиля рисунка подходящих нет. Переведите в Photoshop и затем удалите все лишнее, сделайте более насыщенными контурные линии и..вуа-ля, рисунок готов.
Например, возьмем котенка.
Открываем Photoshop, копируем фотку на новый слой, создаем копию слоя. Так чтобы был фон и два слоя с фотографией.
Выбираем последний слой (верхний) и размываем его по Гаусу . Параметр подбирается «на глазок», ибо все фотографии разные по детализированности и цветности. Но после пары попыток при разном уровне размытия, вы будете видеть, что именно вам нужно.
После этого примените свойства данного слоя - Разделить . Вы уже получите заготовку под карандашный рисунок.
Теперь дело за малым. Скопируйте содержимое на новый слой (Ctrl+Shift+Alt+E) и Обесцветьте (Изображение-Коррекция-Обесцветить).
Создайте теперь копию этого слоя и выберите параметр Линейный затемнитель.
Вот и все. Теперь особо черные места можно Осветлить с панели инструментов. Можно создавать еще больше слоев, добиваясь прорисованности. Можно подкрашивать кисточкой серые места, чтобы избежать пятен. Но все зависит от конкретного материала и вашей фантазии.
Что теперь делать, казалось бы, с непонятной иллюстрацией? Её можно вставить в шаблон. Мы выбрали с котятами, где есть секция с разделами и в один из них вставили нашего котенка. Дополнительно наложили еще слоев и сделали его более четким. Если рядом использовать другие рисунки котят в разных позах, придать немного иной стиль, сделать котят более контурными, то как раз и получится олицетворение темы нашего материала. Исходник брали отсюда: templatemonster.com/ru/demo/47111.html.
Что же касается текста под лапкой, его можно раздвинуть в этом месте, а фон котенка украсить разрывом страницы. Дополнительно отрегулировать край, поправить ластиком пятна вокруг, применить резкость или даже отправить в Illustrator для трассировки и перевода в векторное. Удобнее переводить в рисунок архитектуру, лица.
Завершение
Использовать иллюстрации в сочетании с фотографиями в пределах дизайна одного сайта вполне реально. Это выглядит даже потрясающе, но это трудно создать, если в доступности нет именно тех рисунков, что требуются и вам приходится самостоятельно создавать в графических редакторах. Это сложнее сделать, если вы от природы и по жизни не особо умеете рисовать. Тем не менее, создать иллюстрацию возможно, только нужно представлять, какой стиль вам требуется. Если аналог mamyfactory.com/fr/, то здание магазина можно рисовать самому, а вот песика перевести из фотографии, выделить контуры, а все что будет появляться внутри (точки, артефакты, пикселы) удалить ластиком.
Веб-дизайн - профессия творческая и требующая не только времени, но и фантазии, любви к искусству и поиска вдохновений. И знаний тоже.
От дизайн-студии Al Power о том, почему любому бренду важно разработать свой стиль иллюстраций и как создать по ним доступный гайдлайн.
Иллюстрация - это одна из форм дизайна. Без прописанных ограничений - это всего лишь элемент искусства. Мы используем гайдлайны для того, чтобы внести в наши иллюстрации ясность.
Для чего это нужно
Ключом к идентификации вашего стиля служит определение основных ценностей и обоснование необходимости использования иллюстраций. Когда вы создадите определённую стилистическую последовательность, у вас появится общий стиль, который будет гармонировать с вашими изображениями. Это будет означать, что любой иллюстратор сможет без труда работать с вашей платформой и быть уверенным в том, что он не нарушит общего стиля.
Для создания согласованного стиля крайне необходимо обозначить ключевые показатели, такие как цветовая схема или толщина шрифта. Однако не стоит забывать о значении иллюстраций для стиля в целом и той функции, которую они выполняют на вашей платформе.
Пример стиля иллюстрации
Нельзя просто взять и нарисовать
Прежде, чем вы начнёте любой проект, важно определиться, чего вы и ваш стейкхолдер хотите достичь при помощи этого проекта.
Обычно я задаю несколько вопросов, которые помогают мне и стейкхолдеру лучше понять, что мы пытаемся получить от проекта.
Цели
- Зачем вы хотите добавить иллюстрации?
- Каким образом вы будете оценивать проект?
Существующий гид по стилю
Как правило, уже существующий гид по стилю очень помогает. Он не должен быть основан на иллюстрациях. Основные гайдлайны дизайна и всё, что отличает данный бренд на платформе, помогут вам правильно сфокусироваться на проекте.
Также необходимо понимать, как иллюстрации будут вписываться в существующую цветовую схему. То, что у компании есть своя цветовая схема, ещё не означает, что иллюстрации будут гармонично сочетаться с ней. Ведь иллюстрации должны выделяться на фоне остальных элементов интерфейса, поэтому использование брендовых цветов в изображениях может иметь негативный эффект.
Ценности
Насколько, на ваш взгляд, иллюстрации подходят для вашей платформы? Как вы думаете, будут ли они подчёркивать индивидуальность вашего бренда? Будут ли они чёткими, ясными, забавными, детализированными и так далее?
В сущности это и является основной характеристикой стиля. Даже до начала работы вы должны понимать то, какую роль иллюстрациям вы отводите в интерфейсе. Как вы будете их использовать: в роли пособия для пользователя, для заполнения пустот или просто для придания вашему проекту индивидуальности.
Мудборды
Создайте мудборды стиля, которые станут хорошим дополнением вашего продукта. Это упростит понимание иллюстратора в момент, когда стейкхолдер покажет пальцем в элемент стиля и скажет: «я хочу это». Конечно, это не станет окончательным решением, но, по крайней мере, даст дизайнеру понимание того, что от него хотят.
При создании мудборда не стоит вдаваться в детали. Мудборды больше служат для того, чтобы задать вектор направления для дальнейшей работы. Для исследования в данной области существует масса ресурсов, таких как Behance, Dribbble, Pinterest, iStock или тот же старый добрый поиск изображений в Google. Это всё делается для того, чтобы собрать как можно больше информации прежде, чем приступить к созданию первого артборда.
Не спешите сразу браться за работу. Для начала поймите, что и для чего вы делаете.
Время засучить рукава
К счастью, я создавал такие гайдлайны ранее. Когда я попал в команду Globoforce, мне поступила задача создать иллюстрированный стиль для использования на нашей white-label платформе.
Основной целью иллюстраций было внесение некой индивидуальности в области, где наш проект казался незавершённым. На самом простом уровне это звучало так: создать общий иллюстративный стиль, который внесёт последовательность для всей платформы.
Пробуйте, пробуйте и еще раз пробуйте
Никто не говорит, что этот процесс быстрый и простой. Мы исследовали множество стилей, которые в итоге нам не подошли. Вся суть заключается в исследовании идей. Ничего не делается зря, все идеи помогают формировать финальное решение. Это как перепрыгнуть через ещё одно препятствие перед финишем.
Некоторые стили работают, некоторые нет. И вы должны быть готовы отбросить заведомо хорошие, но не подходящие вашему проекту, идеи.
Язык иллюстраций
Важно, чтобы все говорили на одном языке, когда дело доходит до терминологии. Вам необходимо создать язык терминов, который будет понятен и удобен для всех. Найти термины, которые будет понятны людям. Не нужно вдаваться в детали: вам нужен просто специфический набор слов, который позволит общаться дизайнерам и стейкхолдерам.
Наши иконки
Для повышения удобства использования нашего сайта мы используем иконки. В нашем гиде по стилю прописаны правила их использования, а также выбора их размера (от 12 до 64 пикселей).
Иконографика
Наши текстовые иллюстрации
Текстовая иллюстрация помогает продемонстрировать определённую особенность или описать некоторый опыт. Такие иллюстрации радуют глаз, не занимают много места на странице и придают индивидуальность интерфейсу.
Текстовые иллюстрации
Наши иллюстрации незанятого состояния
Иллюстрации незанятого состояния используются для объяснения особенности, но никогда - в качестве основного акцента на компоненте. В большинстве случаев они нужны для отображения необходимости заполнить пустое место.
Иллюстрации незанятого состояния
Иллюстрации сцен
Иллюстрации сцен размещаются на большем пространстве и выполняют функцию объяснения пользователю фичи или сценария более детально.
Иллюстрации сцен
Наш подход
Иллюстрации могут использоваться для того, чтобы «оживить» интерфейс. Они служат для информирования пользователя и привлечения его внимания.
Придерживайтесь простоты
Так как наш продукт относится к white-label, иллюстрации будут использоваться в расчёте на самые разнообразные категории клиентов. Именно поэтому мы решили придерживаться максимально простого и пассивного стиля.
Использование персонажей
Мы воздерживаемся от использования персонажей повсеместно. Использование персонажей ставит вопросы о принадлежности к определенной расе и полу, а учитывая разнообразие наших клиентов, простота - лучше всего.
Цветовая схема
Наша цветовая схема была выбрана на основе целей бизнеса. Её ненавязчивый характер отражает наш широкий круг клиентов. Наша цель - радовать пользователей иллюстрациями, а не углубляться в понимание брендовых цветов.
Баланс цвета
В целом мы отказались от использования множества цветов в иллюстрациях. Мы попытались сделать упор на наш «призрачно-белый», используя остальные цвета в схеме исключительно для баланса.
Белый цвет у нас является основным. Попробуйте использовать его для ключевых элементов в иллюстрации
Причины
Цвет не должен выбираться субъективно. Иллюстрации должны быть пассивными и не привлекать слишком много внимания. Цвета можно использовать, но избирательно. Стиль должен быть аккуратным и неярким.
Цветовая схема для иллюстраций неактивных состояний
Для опции неактивных состояний мы использовали наш «призрачный белый» цвет и обводку. Тут используется только тень и никаких цветов. Для того, чтобы снизить визуальную нагрузку, мы использовали прозрачность в 50%.
Иллюстрация пустого состояния
Обводка
Обычно мы используем шестипиксельную обводку. При наличии мелких деталей выбираем обводку в три пикселя. Также везде используем скругления на углах. Цвет обводки всегда один - #8A8EA0.
Итак
Основная цель гайдлайна для иллюстраций - это создание последовательного, узнаваемого стиля, который отражает основные ценности вашей платформы. Для этого нужно следовать трём шагам:
- Определить, зачем вам нужны иллюстрации.
- Создать стиль, который будет работать для вас и ваших бизнес-целей.
- Задокументировать ваш стиль таким образом, чтобы вы могли запросто клонировать его для других концепций.
Полное исследование можно посмотреть .