Основы создания иллюстраций от 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, либо же акварель, переведенная в вектор. В начале работ мы всегда предлагаем несколько набросков, эскизов или идей, чтобы определиться с композицией, а потом уже по утвержденному макету тщательно отрисовывается финальная картинка.
 
Примеры работ в категории создание иллюстраций
 
Создание векторных иллюстраций для шахматного учебника