Создание персонажных иллюстраций в Adobe Illustrator. Хочу быть иллюстратором
От дизайн-студии Al Power о том, почему любому бренду важно разработать свой стиль иллюстраций и как создать по ним доступный гайдлайн.
Иллюстрация - это одна из форм дизайна. Без прописанных ограничений - это всего лишь элемент искусства. Мы используем гайдлайны для того, чтобы внести в наши иллюстрации ясность.
Для чего это нужно
Ключом к идентификации вашего стиля служит определение основных ценностей и обоснование необходимости использования иллюстраций. Когда вы создадите определённую стилистическую последовательность, у вас появится общий стиль, который будет гармонировать с вашими изображениями. Это будет означать, что любой иллюстратор сможет без труда работать с вашей платформой и быть уверенным в том, что он не нарушит общего стиля.
Для создания согласованного стиля крайне необходимо обозначить ключевые показатели, такие как цветовая схема или толщина шрифта. Однако не стоит забывать о значении иллюстраций для стиля в целом и той функции, которую они выполняют на вашей платформе.
Пример стиля иллюстрации
Нельзя просто взять и нарисовать
Прежде, чем вы начнёте любой проект, важно определиться, чего вы и ваш стейкхолдер хотите достичь при помощи этого проекта.
Обычно я задаю несколько вопросов, которые помогают мне и стейкхолдеру лучше понять, что мы пытаемся получить от проекта.
Цели
- Зачем вы хотите добавить иллюстрации?
- Каким образом вы будете оценивать проект?
Существующий гид по стилю
Как правило, уже существующий гид по стилю очень помогает. Он не должен быть основан на иллюстрациях. Основные гайдлайны дизайна и всё, что отличает данный бренд на платформе, помогут вам правильно сфокусироваться на проекте.
Также необходимо понимать, как иллюстрации будут вписываться в существующую цветовую схему. То, что у компании есть своя цветовая схема, ещё не означает, что иллюстрации будут гармонично сочетаться с ней. Ведь иллюстрации должны выделяться на фоне остальных элементов интерфейса, поэтому использование брендовых цветов в изображениях может иметь негативный эффект.
Ценности
Насколько, на ваш взгляд, иллюстрации подходят для вашей платформы? Как вы думаете, будут ли они подчёркивать индивидуальность вашего бренда? Будут ли они чёткими, ясными, забавными, детализированными и так далее?
В сущности это и является основной характеристикой стиля. Даже до начала работы вы должны понимать то, какую роль иллюстрациям вы отводите в интерфейсе. Как вы будете их использовать: в роли пособия для пользователя, для заполнения пустот или просто для придания вашему проекту индивидуальности.
Мудборды
Создайте мудборды стиля, которые станут хорошим дополнением вашего продукта. Это упростит понимание иллюстратора в момент, когда стейкхолдер покажет пальцем в элемент стиля и скажет: «я хочу это». Конечно, это не станет окончательным решением, но, по крайней мере, даст дизайнеру понимание того, что от него хотят.
При создании мудборда не стоит вдаваться в детали. Мудборды больше служат для того, чтобы задать вектор направления для дальнейшей работы. Для исследования в данной области существует масса ресурсов, таких как Behance, Dribbble, Pinterest, iStock или тот же старый добрый поиск изображений в Google. Это всё делается для того, чтобы собрать как можно больше информации прежде, чем приступить к созданию первого артборда.
Не спешите сразу браться за работу. Для начала поймите, что и для чего вы делаете.
Время засучить рукава
К счастью, я создавал такие гайдлайны ранее. Когда я попал в команду Globoforce, мне поступила задача создать иллюстрированный стиль для использования на нашей white-label платформе.
Основной целью иллюстраций было внесение некой индивидуальности в области, где наш проект казался незавершённым. На самом простом уровне это звучало так: создать общий иллюстративный стиль, который внесёт последовательность для всей платформы.
Пробуйте, пробуйте и еще раз пробуйте
Никто не говорит, что этот процесс быстрый и простой. Мы исследовали множество стилей, которые в итоге нам не подошли. Вся суть заключается в исследовании идей. Ничего не делается зря, все идеи помогают формировать финальное решение. Это как перепрыгнуть через ещё одно препятствие перед финишем.
Некоторые стили работают, некоторые нет. И вы должны быть готовы отбросить заведомо хорошие, но не подходящие вашему проекту, идеи.
Язык иллюстраций
Важно, чтобы все говорили на одном языке, когда дело доходит до терминологии. Вам необходимо создать язык терминов, который будет понятен и удобен для всех. Найти термины, которые будет понятны людям. Не нужно вдаваться в детали: вам нужен просто специфический набор слов, который позволит общаться дизайнерам и стейкхолдерам.
Наши иконки
Для повышения удобства использования нашего сайта мы используем иконки. В нашем гиде по стилю прописаны правила их использования, а также выбора их размера (от 12 до 64 пикселей).
Иконографика
Наши текстовые иллюстрации
Текстовая иллюстрация помогает продемонстрировать определённую особенность или описать некоторый опыт. Такие иллюстрации радуют глаз, не занимают много места на странице и придают индивидуальность интерфейсу.
Текстовые иллюстрации
Наши иллюстрации незанятого состояния
Иллюстрации незанятого состояния используются для объяснения особенности, но никогда - в качестве основного акцента на компоненте. В большинстве случаев они нужны для отображения необходимости заполнить пустое место.
Иллюстрации незанятого состояния
Иллюстрации сцен
Иллюстрации сцен размещаются на большем пространстве и выполняют функцию объяснения пользователю фичи или сценария более детально.
Иллюстрации сцен
Наш подход
Иллюстрации могут использоваться для того, чтобы «оживить» интерфейс. Они служат для информирования пользователя и привлечения его внимания.
Придерживайтесь простоты
Так как наш продукт относится к white-label, иллюстрации будут использоваться в расчёте на самые разнообразные категории клиентов. Именно поэтому мы решили придерживаться максимально простого и пассивного стиля.
Использование персонажей
Мы воздерживаемся от использования персонажей повсеместно. Использование персонажей ставит вопросы о принадлежности к определенной расе и полу, а учитывая разнообразие наших клиентов, простота - лучше всего.
Цветовая схема
Наша цветовая схема была выбрана на основе целей бизнеса. Её ненавязчивый характер отражает наш широкий круг клиентов. Наша цель - радовать пользователей иллюстрациями, а не углубляться в понимание брендовых цветов.
Баланс цвета
В целом мы отказались от использования множества цветов в иллюстрациях. Мы попытались сделать упор на наш «призрачно-белый», используя остальные цвета в схеме исключительно для баланса.
Белый цвет у нас является основным. Попробуйте использовать его для ключевых элементов в иллюстрации
Причины
Цвет не должен выбираться субъективно. Иллюстрации должны быть пассивными и не привлекать слишком много внимания. Цвета можно использовать, но избирательно. Стиль должен быть аккуратным и неярким.
Цветовая схема для иллюстраций неактивных состояний
Для опции неактивных состояний мы использовали наш «призрачный белый» цвет и обводку. Тут используется только тень и никаких цветов. Для того, чтобы снизить визуальную нагрузку, мы использовали прозрачность в 50%.
Иллюстрация пустого состояния
Обводка
Обычно мы используем шестипиксельную обводку. При наличии мелких деталей выбираем обводку в три пикселя. Также везде используем скругления на углах. Цвет обводки всегда один - #8A8EA0.
Итак
Основная цель гайдлайна для иллюстраций - это создание последовательного, узнаваемого стиля, который отражает основные ценности вашей платформы. Для этого нужно следовать трём шагам:
- Определить, зачем вам нужны иллюстрации.
- Создать стиль, который будет работать для вас и ваших бизнес-целей.
- Задокументировать ваш стиль таким образом, чтобы вы могли запросто клонировать его для других концепций.
Полное исследование можно посмотреть .
Французский художник Ксавьер Коллет объясняет, как сделать процесс рисования эффективнее на примере своей работы с темной феей в окружении леса.
Я думаю, что следующие правила рисования могут помочь вам развить свои навыки, но иногда может показаться, что они пытаются вас ограничить. Пытаясь удовлетворить широкий спектр художественных критериев, таких как: дизайн персонажей, продуманные композиции и эффективные цветовые схемы – вы можете замедлиться, но быстрая работа не всегда бывает качественной, помните об этом.
Я считаю, что лучший путь к вершине – это научиться чувствовать, делать вещи инстинктивно. С практикой, видеть вещи, которые есть в изображении, и определять те элементы, которые до сих пор нуждаются в доработке – становится второй натурой, заполняют подсознание во время работы.
С практикой это становится второй натурой – видеть вещи, которые нуждаются в доработке
Единственное, что я сделал, прежде чем начать рисовать – отстранился от всех и фотографий в голове, чтобы мое подсознание начало генерировать идеи. После этого я полностью погрузился в процесс рисования.
Первоначальные эскизы
Я не знаю, как далеко я зайду с этой иллюстрацией. Зато я знаю, что хочу, чтобы главная героиня была своего рода королевой – кем-то, кто заставит вас бояться, ощущать тревогу, глядя ей в глаза.
Так что я начну с грубого наброска, чтобы понять, какая тут будет композиция. Она гуляет в лесу и наблюдает за вами. Ну, что ж, начнем рисовать кого-то, кто заставит вас почувствовать настоящий страх и завораживающий ужас.
Пятьдесят оттенков серого
Важно учесть глубину изображения и определиться с плоскостями: фон с двумя-тремя уровнями глубины; главная плоскость вашего героя и передний план.
Я начинаю в моно – это быстрее и будет легче что-то поменять. Я выбрал палитру из множества оттенков серого и, добавив персонажу рога и длинное платье во весь рост, я начал определять её характер.
Отправная точка
У нас у всех есть свои маленькие слабости. Моя заключается в том, что я не могу устоять на ранних стадиях перед прорисовыванием лица персонажа. Часто говорят, что детализация элементов в изоляции – не очень хорошая практика, потому что в конечном итоге нельзя увидеть общую картину.
Полезный совет, не спорю, но я не могу вынести того, что на лице будет лишь немного деталей, у меня ужасно чешутся руки дополнить их. Поэтому я потратил немного времени, чтобы нарисовать лицо, корону, рога и волосы.
Иногда очень трудно определить, в каких цветах будет иллюстрация. Так что вот вам маленький совет. Возьмите старый рисунок или даже фотографию, не имеет значения. Дублируйте слой изображения и примените эффект Размытия по Гауссу к дубликату. Затем измените Параметры наложения – Режим наложения – Перекрытие. И посмотрите, вдохновляет ли вас такая цветовая гамма для вашей рабочей иллюстрации.
Поиск цветовой темы
После этого я настроил Оттенок/Насыщенность и рисую кистью уже в цветном режиме. Еще один совет – примените Авто Уровни или Авто Контраст, а затем поиграйтесь с режимами смешивания слоя. Иногда счастливые случайности будут вдохновлять вас и помогать вам преодолевать стену «некреативности».
Добавляйте детали
Я начинаю рисовать детали персонажа, начиная с головы и бюста, прежде чем перейти к разработке одежды.
Я не воплощаю какие-либо идеи по поводу платья, как я сказал, я просто пролистываю большой набор из разнообразных изображений, чтобы мой креатив наполнился свежими соками и я смог придумать необычный дизайн для платья.
Контраст
Хорошо, если в рисунке будет контраст. Более конкретно: противопоставление форм, яркости и цвета. Мой выбор для этой иллюстрации – голубоватый свет, который будет указывать на магическую силу и контроль над всеми живыми существами на этом рисунке.
Больше деталей
Теперь, когда я удовлетворен в выборе цветов, я могу завершить разработку ее костюма, добавив такие детали как украшения, и изобразить ряд таких материалов как мех, кожу, металл, блестяшки, которые все вместе сделают дизайн более интересным.
Пластика ваш друг
Помните о преимуществах цифровых графических программ. Фотошоповский фильтр Пластика является мощной редакторской опцией. Здесь, в моей иллюстрации, я использую его, чтобы подправить лицо феи, так как я решил, что оно слишком длинное.
Заканчиваем с ней
Время дорисовывать последние детали персонажа. Я добавил последние мазки на её корсете, нарисовал на ее посохе череп, добавил голубого свечения к костюму и т.д.
А теперь пришло время оживить фон лучами света и некоторым шумом. Пятнистые кисти в режиме Осветление основы подойдут мне идеально.
Создаем домашних любимцев
Я хочу, чтобы у моей темной феи были…питомцы. В нижней части композиции немного свободно, так что это идеальное место, чтобы нарисовать существ, которые оживают с помощью её тёмной магии.
У меня нет определенного представления о том, что я собираюсь делать, так что я делаю набросок тёмной кистью, а затем использую кисть в режиме Осветление основы, чтобы добавить такие детали как глаза и рты, из которых выходят пучки магии.
Зверинец монстров
Пока что я работаю инстинктивно и я вполне доволен дизайном моего существа. Теперь я могу добавить другие. Я применяю один и тот же рабочий процесс: создаю небольшой эскиз, а затем добавляю детали, используя кисть в режиме Осветление основы.
Размытые элементы
Я почти закончил эту иллюстрацию и теперь буду применять некоторые хитрости, которым я научился за годы моей работы. Я хочу, чтобы моя фея смотрела на наблюдателя – зрителя, который скрывается в лесу.
Так что я дорисую ветки мазками жесткой кисти. Нет необходимости рисовать их в деталях. Затем я добавил к ним эффект Размытия по Гауссу и всё – они готовы!
Зерно добавляет текстуру
Я люблю добавлять текстуру к моим рисункам. Иногда это просто текстура бумаги, создана с помощью Наложения слоя. Но сейчас я буду делать что-то совершенно другое.
Я добавил нейтральный серый слой (Насыщенность – 0, Яркость – 50) и применил Фильтр>Шумы>Добавить шум дважды (поставить на максимум) и Фильтр>Размытие>Размытие трижды. Затем я поставил этот слой на Перекрытие (Наложение) и кликнул на Непрозрачность слоя, поставив настройки на 5-6%
Более волшебная жизнь
Я решил, что картине нужно больше жизни. Моё решение – быстренько дорисовать бабочек на переднем плане, снова дать рисунку больше глубины.
Последняя хитрость
Последний совет. Простой способ добавить немного больше разнообразия в ваше искусство – это создать новый слой и заполнить его с помощью мягкой облачной кисти.
Установите основной цвет на светло-серый и используйте мягкую облачную кисть, чтобы создать контраст. Затем поставьте этот слой в режим Наложения.
Я следовал моим же советам и закончил рисунок!
Мне всё с таким же постоянством приходят письма с вопросами: "Хочу стать иллюстратором, с чего начать?", "Как мне научиться рисовать?", "Что делать, если у меня не получается рисовать, есть ли у меня шанс стать иллюстратором?"
На первый взгляд вопросы довольно странные. Не умеешь рисовать, не хочешь начинать и пробовать, не хочешь даже учиться рисовать - какой из тебя иллюстратор? Зачем тебе это нужно? Но всё не так просто, как кажется на первый взгляд.
Недавно я наткнулась в сети на высшую частную школу в Гамбурге, которая готовит узконаправленно только иллюстраторов. На первых же страницах "О себе" они сообщают, что иллюстратор - это дизайнер, который умеет рисовать.
Мне стало смешно, потому что я дизайнер графики и получила, без ложной скромности, хорошее образование. За долгие годы обучения нам неустанно твердили, что любой дизайнер должен уметь рисовать, обращаться с фотокамерой, понимать толк в типографике и разбираться в искусстве.
Наряду с такими предметами как типографика, нас учили рисунку и фотоделу - вещи, которые отразились и на моих представлениях об иллюстрации. Я посвятила влиянию фотографии на иллюстрацию в своей книге "Профессия - иллюстратор. Учимся мыслить творчески" сразу несколько разделов.
Высказывание, что иллюстратор - это дизайнер, который умеет рисовать, показалось мне очень странным. Сначала я решила, что люди просто не в курсе, чему учат современных дизайнеров. Но потом я, кажется, поняла, о чём они. А именно о том, что иллюстратор - профессионал, который владеет самыми разными навыками и техниками изображения, которые часто уже можно назвать скорее дизайнерскими.
Действительно, современный иллюстратор больше не привязан к традиционным изобразительным техникам: ему не обязательно работать только красками или карандашами на бумаге. Ему даже не обязательно уметь очень хорошо рисовать. Достаточно уметь обращаться с бумагой и ножницами, древесиной и стамеской, тканями и швейной машинкой, уметь рисовать лишь на уровне контуров и набросков и быть при этом не менее успешным и продаваемым иллюстратором, чем коллеги, работающие в традиционных техниках.
Сегодня мне бы хотелось заострить ваше внимание на техниках исполнения современных иллюстраций.
На вопросы вроде "С чего начать будущему иллюстратору?" я уже отвечала, и ниже можно проследовать по ссылке на мой ответ. А на вопрос, получится ли из кого-то иллюстратор, если он не научился рисовать традиционно, академически, утвердительно скажу, что да. Потому что если не даётся бумага и светотени, стоит попробовать себя в какой-то нетрадиционной технике, если вопреки всему хочется заниматься иллюстрацией профессионально.
Для вдохновения покажу вам красивую книгу - сборник работ иллюстраторов и художников, работающих в нетрадиционных иллюстраторских техниках.
Книга на американском амазоне:
Книга на немецком амазоне: Illustration Play: Craving for the Extraordinary
Обложка выполнена на очень красивой, фактурной бумаге с настоящими наклейками.
А так выглядит содержание - перечень представленных иллюстраторов.
Иллюстрации, выполненные с помощью выжигателя. Автор: Genevieve Dionne
Иллюстрации-инсталляции из различных материалов. Автор: Stephanie Dotson
Иллюстрации-инсталляции из бумаги и древесины. Автор: Aj Fosik
Иллюстрации на старых упаковках, конвертах и прочем. Автор Melvin Galapon
Наверняка многие художники не раз задавались вопросом, как создавать цифровые иллюстрации, причём не просто удовлетворительного уровня, а качественные работы, от которых захватит дух у любого искушённого зрителя. Это, как и любое ремесло, требует постоянного внимания и времени.
Для начала же необходимо разобраться в самом процессе создания цифровой живописи, который может развиваться в нескольких направлениях. Статья расскажет вам об этих вариантах, среди которых вы можете выбрать подходящий для себя.
Создание иллюстрации по фотографии
Главное достоинство этого метода в том, что он подойдёт всем без исключения, даря возможность тем, кто не может похвастаться умением хорошо рисовать. Принцип такой обрисовки следующий: исходная фотография служит основой для рисунка до тех пор, пока художник не почувствует себя комфортно продолжать работу без неё.
Если, к примеру, работаете в Adobe Photoshop, то, уменьшив прозрачность фотографии и создав новый слой, можете смело, мазок за мазками создавать иллюстрацию, повторяя все линии и сгибы объектов. Это можно сделать как мышкой, так и при помощи специального планшета со стилусом – аксессуаром в виде маленького тонкого пера для управления устройством с сенсорным интерфейсом.
Ниже представлены видео, где показан данный метод создания таких иллюстраций:
Создание иллюстрации по отсканированному рисунку
Этот метод уже для людей, активно практикующих создание качественных иллюстраций, то бишь умеющих рисовать.
Так, готовую (или частично готовую) работу сканируют и открывают в соответствующей программе на компьютере для дальнейшего наложения штрихов поверх рисунка.
Следующие видео продемонстрируют данный метод на практике:
https://youtu.be/UVGxAJL7dSQ
Создание иллюстрации сразу на компьютере
Как видно по названию, это самый сложный уровень, который активно применяется профессионалами в этой сфере.
Соответствующие видео прилагаются:
Готовы ли вы к рискам в веб-дизайне? Скорее всего, не каждый из вас даст утвердительный ответ. Тем не менее, существует риск, который с течением времени стал неким стандартом, трендом в современном веб-дизайне. Мы называем это «нечто» риском только потому, что важно не только фантазировать на тему и смешивать вариации элементов, но и представлять, насколько это уместно в вашем проекте дизайна сайта. Речь идет о сочетании фотографий и иллюстраций в одном дизайне.
Фотография в нынешнее время используется для придания реалистичности внешнему виду проекта, возможности акцентирования внимания посетителя на том, что речь идет о вполне важных и нужных вещах в жизни каждого человека. Иллюстрация или рисунок чаще подходит для узконаправленных проектов и подсознательно ассоциируются у человека с действом, «мультяшностью» или даже несерьезностью.
Но веб-дизайн - искусство новаторства и профессионализма работы в графических редакторах. А потому совместить два типа изображений вполне реально. Мы рассмотрим сегодня не только варианты того, как веб-мастера применяют такой вид изображений, но и тонкости их создания в 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/, то здание магазина можно рисовать самому, а вот песика перевести из фотографии, выделить контуры, а все что будет появляться внутри (точки, артефакты, пикселы) удалить ластиком.
Веб-дизайн - профессия творческая и требующая не только времени, но и фантазии, любви к искусству и поиска вдохновений. И знаний тоже.
