Основы создания иллюстраций от Highlights. Как создать иллюстрации к детской книжке

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

Милая осенняя иллюстрация в 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/Обводки. Также выберите оранжевый цвет обводки, чтобы сделать листья цветными.

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

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

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




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


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

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

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

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

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



Делаем

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

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


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

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


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

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



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

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


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


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


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

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

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

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

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


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



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

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

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


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



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

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


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

Курс: «Основы создания иллюстраций от Highlights» . Материал по иллюстратору с нуля от известной компании! Подойдет для новичков. Отзывы только положительные, местами даже шикарные! Материал получает метку эксклюзивного материала! Материал могут быстро удалить, рекомендуем сохранять/скачивать сразу. Материал прислал Web с комментарием:

Всем привет! Материал по обучению С НУЛЯ иллюстратору. Авторы — профессионалы своего дела и за несколько лет собрали множество шикарных отзывов. Курс очень подробный и подойдет для всех категорий людей и любого уровня подготовки. Данный труд достаточно хорошо оплачивается. Советую изучить и применять навыки на практике. Про практику не забывайте, перед предложением услуг потренируйтесь. Всем успехов и хорошего завершения лета!

Материал может быть удален по запросу правообладателя!

Описание курса:

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

Преимущества:

  • Курс длится 4 недели и состоит из 8 уроков по 2 часа каждый.
  • Огромное количество полезного материала и бонусов на протяжении всего обучения.
  • Вы не только изучите азы программы Adobe illustrator , азы иллюстрации, но и сформируете свое портфолио, которое позволит брать коммерческие заказы сразу по окончанию курсов!

Программа курса:

ЗАНЯТИЕ № 1. ВВЕДЕНИЕ В ПРОГРАММУ:

  • Отличия Adobe illustrator от других векторных редакторов.
  • Введение в понятие вектора (растр и вектор).
  • Создание документа. Настройки документа.
  • Настройка программы (размерность, интерфейс).
  • Знакомство с интерфейсом.
  • Построение пером, методика Безье.
  • Узлы векторной кривой.

ДЗ: Создание сложного векторного объекта.

ЗАНЯТИЕ № 2. ВЕКТОР И ЕГО СВОЙСТВА:

  • Взаимодействие нескольких объектов.
  • Работа со слоями.
  • Группировка. Разгруппировка.
  • Изоляция. Уровни изоляции.
  • Цвет и обводка.
  • Работа с градиентом и градиентной сеткой.

ДЗ: Создание персонажа

ЗАНЯТИЕ № 3. МАНИПУЛЯЦИИ С ОБЪЕКТАМИ:

  • Построение кривых.
  • Углубленная работа с узлами.
  • Объединение объектов. Виды, способы.
  • Операции с объектами.
  • Создание паттернов.
  • Шейп-билдер.

ДЗ: Создание комплекса векторной графики.

ЗАНЯТИЕ № 4. РАБОТА С ТЕКСТОМ:

  • Виды текста.
  • Основы типографики — интерлиньяжи, кернинг, трекинг.
  • Способы создания шрифтов.
  • Создание афиши. Погружение в полиграфию
  • Триангуляция.

ДЗ: Отрисовка шрифта несколькими способами. Создание афиши

ЗАНЯТИЕ № 5. ЭФФЕКТЫ ДЛЯ ВЕКТОРА. РАСТРОВАЯ ГРАФИКА:

  • Эффекты, меняющие визуализацию векторных объектов.
  • Управление эффектами векторных объектов.
  • Виды прозрачности объектов.
  • Совмещение вектора с растром.
  • Трассировка.
  • Растрирование.
  • Маска векторных объектов.

ДЗ: Соединение вектора, растра и текста. Применение эффектов.

ЗАНЯТИЕ № 6. ДОПОЛНИТЕЛЬНЫЕ ТЕХНИКИ И ИНСТРУМЕНТЫ. ЧАСТЬ 1:

  • Новый иллюстратор — фишки 2018.
  • Глитч, длинные тени и прочие графические приемы.
  • Работа с планшетом.
  • Рисование. Создание кисти

ДЗ:

ЗАНЯТИЕ № 7. ДОПОЛНИТЕЛЬНЫЕ ТЕХНИКИ И ИНСТРУМЕНТЫ. ЧАСТЬ 2:

  • Марионеточная деформация.
  • Сетка перспективы.
  • Разбор и отрисовка разных видов иллюстрации.
  • Создание штампа на носителе.

ДЗ: Использовать одну из техник по созданию графики с урока, и применить в своем проекте или на свободную тему.

ЗАНЯТИЕ № 8. АВТОМАТИЗАЦИЯ ПРОЦЕССА. СОХРАНЕНИЕ ПРОЕКТА. СОВЕТЫ:

  • Цветовые настройки и цветовые схемы.
  • Скрипты и плагины.
  • Интерграция с другими программами. Подготовка файла, сохранение и экспорт.
  • Рынок труда и советы

ИТОГОВОЕ ЗАДАНИЕ: Создание логотипа, иконки и в целом меню на основе выбранной темы.

Ссылка на скачивание этого материала доступна только зарегистрированным пользователям сайта. Регистрация на сайте бесплатная и не займет много времени. Если у Вас уже есть аккаунт — Вы можете авторизоваться.

Материал предоставлен исключительно для ознакомления!

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

Заключение

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

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

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

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

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

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

 
Примеры работ в категории создание иллюстраций

 
Создание векторных иллюстраций для шахматного учебника