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

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

Создание иллюстрации по фотографии

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

Если, к примеру, работаете в Adobe Photoshop, то, уменьшив прозрачность фотографии и создав новый слой, можете смело, мазок за мазками создавать иллюстрацию, повторяя все линии и сгибы объектов. Это можно сделать как мышкой, так и при помощи специального планшета со стилусом – аксессуаром в виде маленького тонкого пера для управления устройством с сенсорным интерфейсом.

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

Создание иллюстрации по отсканированному рисунку

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

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

Следующие видео продемонстрируют данный метод на практике:

https://youtu.be/UVGxAJL7dSQ

Создание иллюстрации сразу на компьютере

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

Соответствующие видео прилагаются:

В течении последних нескольких недель я пробовал пользоваться полутоновыми фильтрами, мне был интересен результат и на что они способны. К тому же, к большому удивлению, я обнаружил инструмент 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:

Заключение

Иллюстрация готова. Здесь уже подчищены от полутонов зубы и глаза.
Таким же образом, вы можете использовать полутона для создания иллюстраций в стиле Роя Лихтенштейна, как в нашем эксперименте.
Спасибо за внимание.

Это топик является переводом

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

Милая осенняя иллюстрация в Adobe Illustrator

Шаг 1

Начнем с создания овала при помощи инструмента Ellipse/Эллипс (L). Создайте фигуру размером 241 x 214 px коричневого цвета. Инструментом Direct Selection/Прямое выделение (A) кликните по нижней точке и нажмите Delete чтобы удалить эту точку.

Шаг 2

Рисуем еще один овал, на этот раз размером 62 x 192 px и бежевого цвета. Выделите обе фигуры и в палитре Align/Выравнивание кликните по иконке Horizontal Align Center/Горизонтальное выравнивание по центру.

Шаг 3

Давайте немного изменим форму ножки гриба. Выделите ее и в меню выберите Effect > Warp > Fish/Эффект>Искажение>Рыба. Настройте параметры как показано ниже и нажмите OK.

Шаг 4

Выберите в меню Object > Expand Appearance/Объект>Разобрать оформление. Теперь кликните правой кнопкой мыши по фигуре и выберите Arrange > Send to Back/Упорядочить>На задний план.

Шаг 5

Добавим немного деталей шляпке нашего гриба. Инструментом Ellipse/Эллипс (L) рисуем кружочки разных размеров и оттенков - чуть более светлых чем цвет гриба.

Шаг 6

Теперь давайте создадим кисть для того, чтобы потом рисовать листья. Начнем с темно-серого овала размером 5 x 25 px. Выделите нижнюю точку овала инструментом Direct Selection/Прямое выделение (A) и в верхней панели выберите Convert Selected anchor points to corner/Преобразовать точку в угол. Сделайте то же с верхней точкой.

Шаг 7

Откройте палитру Brushes/Кисти (в меню Window/Окно) и перетащите нашу фигуру в палитру. В появившемся окне выберите Art Brush/Объектная кисть.

Шаг 8

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

Шаг 9

Давайте создадим листву в новом слое. Для этого создайте его в палитре Layers/Слои. Теперь возьмите инструмент Paintbrush/Кисть (B) и нарисуйте стебель.

Шаг 10

Используйте ту же кисть, чтобы нарисовать листики. Чтобы листья были потолще, увеличьте толщину Stroke/Обводки. Также выберите оранжевый цвет обводки, чтобы сделать листья цветными.

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

Затем, в 2014 году, вместе со своей командой я запустил онлайн-тренинг по созданию векторных иллюстраций для микростоков. Тренинг оказался очень востребованным и успешным - мы 4 раза набирали группы по 50-70 человек.

За время прохождения курса многие наши студенты смогли не только создать качественные портфолио - они действительно начали зарабатывать на микростоках!

Несколько работ участников тренинга

Для просмотра изображения целиком кликните по его миниатюре

Выпускники нашего тренинга по Adobe Illustrator часто спрашивали меня, не планирую ли я подготовить новый тренинг для продвинутых иллюстраторов .

Вопрос вполне закономерный, ведь в векторной иллюстрации, как и в дизайне, нет предела совершенству!

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

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

Чтобы ваши работы заметили, они должны чем-то отличаться, иметь свою «изюминку» .

Для этого существует 2 пути:

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

Путь второй: найти нишу с относительно небольшой конкуренцией и стать в ней одним из лучших.

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

Но как найти такую нишу? И как понять, что вы действительно можете добиться в ней успеха?

Однажды, в процессе поиска материалов для уроков по работе с градиентной сеткой в Adobe Illustrator, я нашел в Сети иллюстрации Андрея Панченко .

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

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

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

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

Также я узнал, что Андрей и сам давно подумывал о том, чтобы заняться обучением других, даже записал несколько роликов для YouTube, но вот до чего-то большего - руки не дошли… Словом, он с готовностью согласился стать одним из преподавателей нашей Виртуальной школы.

Знакомьтесь:
Андрей Панченко
Художник-иллюстратор,
микростокер.

«Я занимаюсь иллюстрацией около 10 лет. Вначале это было хобби, теперь же это моя основная профессиональная деятельность.

Участвовал во многих фриланс-проектах, в частности, выполнял работы для канала Дисней. Работал с несколькими крупными мебельными фирмами, такими как ОАО «Вектор» и «Лидер», над оформлением дошкольной продукции.

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

Портфолио Андрея:

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

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

Во-вторых, рисование векторных персонажей требует высокого уровня владения инструментами Adobe Illustrator. Поэтому, такой курс будет особенно полезен всем тем, кто хочет как следует «отточить» свои профессиональные навыки.

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

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

Самое интересное, что в своей работе Андрей сознательно не использует графический планшет - все иллюстрации он рисует обычной мышкой! Более того, у него вообще нет планшета. Тем самым он наглядно развенчивает миф о том, что качественные иллюстрации можно создавать только с помощью планшета Wacom.

Не забудьте включить звук на вашем компьютере

На разработку и создание курса у нас ушло более полугода. В результате, Андрей записал 30 подробных видеоуроков, в которых детально показал процесс создания профессиональной персонажной векторной иллюстрации - от карандашного наброска до финальной реализации в Adobe Illustrator.

Здравствуйте!
Сегодня продолжаем воровать хлеб у иллюстраторов и дизайнеров, и будем делать иллюстрации для статей с использованием эмодзи.

Это статья будет полезна тем, кто уже разбирается в фотошопе на базовом уровне. Будем делать иллюстрации, которые идут внутрь статьи. Ещё эту технику можно использовать, чтобы создавать обложки к публикациям.

Иллюстрация внутри статьи Перезвони на Спарке
Иллюстрация для статьи «Как я использую Трело » на личном блоге
Иллюстрация для обложки к статье SMMplanner




Что понадобится


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

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

Базовые знания верстки.

Идея для иллюстрации.

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



Делаем

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

Создаем картинку. Я создаю картинку с размерами 1800×945 пикселей, потому что она хорошо смотрится на большом экране, во всех социальных сетях и влезает в блог.


Можно создавать любые картинки, вертикальные, квадратные, даже круг!

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


Накидываю текст
Ищем подходящие эмодзи

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



Копируем картинку которые находятся внизу

Скопировав картинку на Эмодзипедии, её можно вставить в Фотошоп.


В моем случае картинка великовата, поэтому я её редактирую и изменяю до нужного размера. Для этого нужно использовать режим «Трансформирование форм», зажав сочетание клавиш ctrl+T (⌘+T). В панели настройки инструмента можно задать подходящий размер в %. Чтобы сохранить пропорции картинки, нажмите кнопку «Сохранять пропорции»


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


Получилось вот так

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

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

Прямоугольник — это самая лучшая фигура. Чтобы большая иллюстрация смотрелось хорошо, нужно большую иллюстрацию разбить на маленькие прямоугольники (квадрат — тоже прямоугольник) и разместить контент иллюстрации в эти прямоугольники. Если это возможно сделать из мелких деталей иллюстрации, маленькие аккуратные прямоугольники. Маленькие прямоугольники легко расставить на большой картинке, и в целом все будет смотреться хорошо.

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


Итоговый результат, когда я поместил все направляющие
Лайфхак. Если создать один универсальный шаблон для блога, и сохранить его в PSD, направляющие сохранятся. Тогда можно будет постоянно открывать этот шаблон и сразу рисовать по направляющим.



Выглядит неряшливо, поэтому я решил выровнять внутри по левому краю

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

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


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



Лайфхак. Перед тем как сохранять картинку, подумайте где она будет использоваться. Белая картинка на сайте с белым фоном смотрится плохо, нужно создать однопиксельную рамочку, чтобы отделить картинку от фона. Или намеренно создать жирную рамку. Можно вместо белого фона, использовать сероватый, если картинка заливается на сайт с белым фоном, или если она заливается на сайт с сероватым фоном, её можно оставить белой.

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


Просто дурачусь
К статье про здоровое питание