Как нарисовать облака в adobe illustrator
Не так давно на блоге Записки Микростокового Иллюстратора мы публиковали урок Как нарисовать самолет в Adobe Illustrator. Ну, так вот, как нарисовать самолет, мы теперь знаем, а вот про небо с облаками в этом уроке ничего рассказано не было. А так как люди просят, то очередной урок будет посвящен как раз этой теме.
Облака мы будем рисовать с помощью объектной (дискретной) кисти Scatter Brush. Урок очень простой и предназначен в первую очередь для начинающих иллюстраторов.
Много других уроков Adobe Illustrator можно найти по тегу "Уроки Adobe Illustrator". Если у вас возникли какие-либо затруднения при выполнении этого урока, то можете обратиться за подсказкой к разделам курса "Изучи Adobe Illustrator за 30 дней!". Вы также можете взять онлайн консультацию по Adobe Illustrator через Skype.
Автор: Роман aka dacascas
Уровень: для начинающих
Версия Adobe Illustrator: любая
Начнем с фона. Размер рабочей области у меня 500x350 px, поэтому чтобы сделать фон, нужно нарисовать прямоугольник с такими же размерами. Заливку для прямоугольника выбираем градиентную голубых тонов. Если при работе с градиентом у вас возникают затруднения, то посмотрите вот этот видеоурок: Основы работы с градиентом.
Далее нарисуйте небольшой кружочек. В моем случае его размеры 30x30 px. Этот кружок необходимо перетащить в панель кистей Brushes. В появившемся окне выберите New Scatter Brush и нажмите OK. Настройки кисти, которые появятся после этого, можно пока не трогать – опять жмем OK.
Теперь если мы воспользуемся инструментом Paintbrush Tool, и проведем им любую линию, то кружочки будут выстраиваться вдоль неё. Не очень похоже на облако, но это только пока.
Чтобы изменить настройки кисти, сделайте двойной клик по её иконке в панели Brushes. И в появившемся окне выставите Size, Spacing и Scatter в значение Random. Теперь эти параметры будут случайно изменяться в заданных диапазонах. Выставите галочку Preview, чтобы видеть, как наши изменения будут отображаться на экране, и установите ползунки в заданные значения, как на следующем скриншоте. Возможно, в вашем конкретном случае они будут отличаться. Все зависит от размеров исходных объектов. Как только вы добьетесь нужного результата, нажмите OK, затем подтвердите, что согласны с изменениями. Подробнее про работу с кистями вы можете узнать из этого урока: Adobe Illustrator за 30 дней. День 8: Использование кистей.
Теперь с помощью нашей облачной кисти можно нарисовать множество самых разных облаков.
Когда облаков будет достаточно, нужно преобразовать их в простые формы. Выделяем все и идем Object > Expand Appearance. Если вы работаете в Adobe Illustrator CS6, то велика вероятность получить ненужные объекты без заливки и обводки после этой команды (пустые квадратные рамки). В этом случае нужно еще дополнительно вычистить все. Для этого идем Object > Path > Clean up.
После экспанда наши облака состоят из множества кружочков. Их нужно объединить в одну форму. Для этого воспользуйтесь командой Unite (Add) в панели PathFinder. Более подробный урок про функционал PathFinder можно посмотреть здесь: Adobe Illustrator за 30 дней. День 9: Создаем составные контуры.
Осталось закрасить облака в белый цвет. Значение Opacity в панели Transparency выставите в 50%, чтобы облака стали полупрозрачными.
Теперь расставляем облака на небе.
Чтобы нарисовать солнце, используйте инструмент Flare Tool. Возьмите инструмент, сделайте левый клик в верхнем левом углу рабочей области и потяните. Появится блик. Затем еще раз кликните в правом нижнем углу рабочей области.
Солнце готово. Все излишние элементы, которые торчат за границы рабочей области, можно скрыть маской. Как работать с Clipping Mask, можно узнать из этого урока: Adobe Illustrator за 30 дней. День 26: Создаем обтравочную маску и непрозрачную маску.
На этом урок закончен. Используя подобную технику, можно создавать самые разные облака. Для примера вот еще два урока посложнее, которые я делал для Vectortuts+
Quick Tip: How to Illustrate a Valentine’s Card with Cloudy Text Effect
Create a Quick and Easy Tranquil Sky in Adobe Illustrator
Роман aka dacascas специально для блога Записки микростокового иллюстратора
Видеоуроки Adobe Illustrator на YouTube. Всё, начиная от первых шагов в иллюстраторе и заканчивая подготовкой работ для экзаменов и для продажи на микростоках. Получи доступ к видеокурсу для начинающих прямо сейчас! Подробности в этой статье: Экспресс курс Adobe Illustrator для начинающих
Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:
Привет! Сегодня у нас в гостях Ирина Двилюк со своим очередным уроком Adobe Illustrator. Вместе с Ириной мы будем рисовать алое, используя градиентные сетки Mesh. Это уже не первый урок от Ирины. Если что, то предыдущий вы можете посмотреть по этой ссылке: Как делать акварельные паттерны для Creative Market с помощью скриптов.
Ирина приглашает вас заглянуть в её инстаграм 👉 @iradvilyuk
А теперь давайте перейдём к уроку. Передаю Ирине слово.
Всем привет! Сегодня я хочу рассказать вам о технике создания реалистичных изображений с помощью градиентной сетки или меш на примере алоэ вера. Для начала посмотрим на готовую картинку и разберём из чего она состоит. Чтобы добиться натуралистичности в этом изображении, нам понадобится качественно изобразить детали, такие как иголки на листьях алоэ, а также капли росы. В этом нам помогут референсы, с помощью которых мы будем воссоздавать реалистичность живой природы.
Выбрав парочку понравившиеся мне фото из сети, я представляю, как будет выглядеть моё будущее изображение, и делаю небольшой эскиз карандашом на бумаге, или же вы можете рисовать сразу прямо в иллюстраторе, если вам так удобнее. Если иллюстрация создаётся для микростоков, то помним: мы никогда не обрисовываем один в один референсы из сети, так как на стоках это может плохо кончиться 🙂
На этой картинке моё алоэ состоит из девяти листьев разной формы, оттенков и длины. Но если присмотреться вы видите, что это один и тот же лист алоэ но немного деформированный и в разных цветовых оттенках.
Поэтому мы начнем свою работу с создания этого базового листа, с которого потом будем собирать весь кустик алоэ.
Сначала рисуем форму листа с помощью инструмента «Карандаш» (клавиша N) и закрашиваем ее в цельный зеленый цвет. Заранее подготовьте себе четыре тона зеленого от светлого до темного, которыми будете пользоваться как основными цветами. Дальше берем инструмент «Градиентная сетка» (клавиша U) и ставим точку как показано на картинке.
Эта точка задает нам структуру сетки, по которой мы будем дальше выстраивать цветовую форму листа. По вертикальной оси от этой точки мы ставим ещё точки, задавая каждый цвет по выбранной цветовой схеме, используя инструмент «Пипетка» (клавиша І).
Закончив с этой осью, мы ставим ещё точки, чтобы создать остальные вертикальной оси без задавания цвета, и в конце вы можете добавить ещё несколько оттенков для придания большей реалистичности нашему листу алоэ.
Теперь создадим иголки. Рисуем треугольник с помощью того же инструмента «Карандаш» (клавиша N), и раскрашиваем точки по указанной на рисунке схеме, используя все те же инструменты «Градиентная сетка» (клавиша U) и «Пипетка» (клавиша І).
Дальше копируем иголки в ряд в нужном количестве и размещаем за листом, одновременно масштабируя и разворачивая их, чтобы выглядело естественно.
Проделываем то же с другой стороны листа. Теперь группируем лист и иголки, и копируем себе куда-нибудь на поля этот ещё не изогнутый лист, чтобы можно было вернуться к нему, когда он понадобится как начальная заготовка.
Дальше мы будем работать с изгибами листа. Идём в меню Объект >Искажения оболочки > деформация > деформация по сетке. Для нашего листа достаточно установить 4 строки и 4 столбца сетки деформации. Дальше берем белую стрелку (А) и перемещаем точки сетки так, чтобы лист принял естественную форму и изгиб.
Сразу представляем, где может размещаться этот лист в нашем кустике алое, при этом ориентируемся на референсы. Далее разбираем оболочку с помощью команды Объект > Искажения оболочки > освободить или командой Expand (Разобрать).
Дальше по такому же принципу создаем другие листья кустика алоэ, отзеркаливая или разворачивая их в нужном направлении. Если нужно, возвращаемся к сохраненному исходному листу на полях и работаем на его основе. Как видите на рисунке, некоторым листьям я изменила цвета с помощью инструмента Recolor Object «перекрасить графический объект», а некоторым листьям я просто задала меньшую прозрачность. Если вы до этого не пользовались никогда Recolor Object, то тут можно посмотреть видео 👉 Как подбирать цвета через Recolor Artwork.
Чтобы наше алоэ выглядело натурально, нам нужны тени между листьями и за ними. Для этого мы будем создавать овалы белого цвета, и превращать их в градиентные сетки. Ставим тёмно-зелёные точки в середине, оставляя овалы белыми по краями, и применяем к этим сеткам режим наложения Multiply.
Так мы получим мягкие тени без видимых контуров.
Хочу заметить, что для меня самым важным средством для создания реалистичных иллюстраций является градиентная сетка с черным или белым цветом краёв и с применением режима наложения multiply (умножение) или screen (осветление). Так они превращаются в мягкие тени или свет в нужных местах изображения.
Завершающим аккордом нашей картинки будут капельки росы которые можно выполнить по вот этому уроку 👉 Как создать капельку воды в Adobe Illustrator.
Теперь наш алое вэра готов.
Ещё уроки по сеткам Gradient Mesh с этого блога:
Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:
Всем привет! У нас новый урок Adobe Illustrator, где мы рассмотрим технику создания облачного текстового эффекта. С помощью специальных кистей вы сможете любые буквы, линии и даже объекты превратить в облака. Урок рассчитан в первую очередь на опытных пользователей Adobe Illustrator, так что если вы совсем новичёк и возникли трудности при выполнении урока, то лучше начать с курса для начинающих Adobe Illustrator шаг за шагом.
Создайте новый документ Ctrl+N. Цветовая модель должна быть RGB, чтобы корректно сработали режимы наложения. Размеры у меня 3000x2000 px, так что вы тоже можете выставить примерно такие же, чтобы при настройке эффектов результат получился как в уроке. И первое, что нужно сделать, это создать фон — нарисуйте прямоугольник точно под размеры артборда, используя инструмент Rectangle Tool(M). Обводку у прямоугольника нужно выключить, заливку сделать голубого цвета. Да, это будет небо.
Слой с фоном можно заблокировать для удобства, а сверху создать новый слой для текста. Панель слоёв вызывается с помощью хоткея F7. Затем инструментом Type Tool (T) пишем свой текст. Шрифт желательно выбрать такой, чтобы буквы были потоньше. В моём случае это Fira Sans. Обратите внимание, что я сделал большое расстояние между буквами. Вызовите панель с настройками текста — Ctrl+T. И увеличьте tracking, чтобы раздвинуть буквы (подчёркнуто красным на картинке ниже). Так как облачный текст станет довольно пухлым, нужно заранее позаботиться, чтобы буквы не слились в одно непонятное вытянутое облако.
Текст готов, теперь можно приступать к созданию волшебной облачной кисти. Нарисуйте кружочек, с помощью инструмента Ellipse Tool (L). Заливка белая, обводку нужно выключить. Размеры в моём случае 130x130 px. Вы тоже можете придерживаться этих размеров, чтобы эффект в следующих шагах дал такой же результат. Когда кружочек готов, откройте панель кистей Brushes (F5), и перетащите его туда, чтобы создать новую кисть.
В опциях выбираем дискретную кисть Scatter Brush и нажимаем OK.
Далее появится большое окно с настройками. Нужно выбрать случайное варьирование Random для всех параметров кроме вращения Rotation. Смотрите скриншот ниже, там все пункты выделены красным.
Когда все настройки выставлены, нажимаем OK, чтобы создать новую кисть. Она появится в панели кистей Brushes (F5). Теперь можно вернуться к тексту. Его нужно преобразовать в кривые с помощью команды Create Outlines (Shift+Ctrl+O).
Текст превратится в векторные формы, нужно будет выключить заливку у букв, и затем выбрать нашу кисть в панели Brushes (F5). Тогда эта кисть применится к буквам, распределив вдоль обводок белые кружочки в хаотичном порядке, как раз именно так, как было выставлено в настройках.
Когда вы закончите корректировку текста, нужно разобрать его. Выполните команду Object > Expand Appearance (объект > разобрать оформление), и текст станет представлять из себя массу кружочков. Нужно будет их обязательно разгруппировать, чтобы можно было выделить каждый отдельно. Для этого удобно использовать команду Ungroup (Shift+Ctrl+G). Как показала практика, там две группы, так что Shift+Ctrl+G нужно нажать два раза, чтобы всё разгруппировать до отдельных кругов.
Уже сейчас текст выглядит как белые облака, но они больше похожи на плоскую мультяшную графику. Чтобы добавить реализма, используем градиент. Вызовите панель градиента Gradient (Ctrl+F9). Выставите стандартный чёрно-белый радиальный градиент. Проверьте обязательно чёрный цвет: он должен быть в режиме RGB, и все три канала по нулям (R=0, G=0, B=0). Если чёрный цвет будет в градациях серого Grayscale или отличаться от R=0, G=0, B=0, то в следующем шаге эффект наложения сработает некорректно.
Итак, вы настроили градиент — идём в панель прозрачности Transparency (Shift+Ctrl+F10). Устанавливаем там режим наложения Screen (осветление). И градиентные круги станут выглядеть словно пушистые облака, так как внешний чёрный край станет прозрачным.
В моём примере получилось так, что буквы стали довольно тонкими.
Куцие вышли облака 😄
Если у вас наблюдается такая же проблема, то это дело поправимо. Выделяем все круги, вызываем Transform Each (Alt+Shift+Ctrl+D), увеличиваем там размеры Scale до 150%. Можно даже все 200% выкрутить, если вдруг окажется мало.
Все круги увеличатся, и теперь облачный текст выглядит более пушисто.
Теперь можно использовать облачную кисть, чтобы добавлять такой же эффект к любым объектам и линиям. Например, снизу картинки рисуем несколько линий карандашом, применяем к этим линиям кисть, далее разбираем и применяем градиент как в предыдущих шагах. Некоторые круги можно будет сильно увеличить, чтобы добавить побольше дымки. Ещё можно добавить блик с помощью Flare Tool.
Более подробно про рисование таких облаков вы можете посмотреть в другом уроке: Как нарисовать облака с помощью Scatter Brush.
Понравилось делать текстовые эффекты — ловите ещё один урок: как сделать яркий текстовый эффект со свечением в Adobe Illustrator.
Если у вас есть вопросы, то можете задавать в комментариях. Если вам интересно помотреть видео уроки по Adobe Illustrator, то заглядывайте на мой YouTube канал 👉 нажми меня.
Надеюсь Иллюстратор у вас уже запущен и работает, так что давайте настроим Новый документ ( Файл > новый или Control-N), используя следующие настройки:
И во вкладке Дополнительно:
2. Как выставить направляющие
Хоть сегодня мы и не работаем над иконками, мы все равно хотим создать иллюстрацию с идеальной пиксельной обработкой, так что использование направляющих сетки даст нам полный контроль над объектами.
Шаг 1
Пройдите Редактирование > Предпочтения > Сетка и направляющие, и примените следующие настройки:
Быстрый совет: вы можете узнать больше о сетках, прочитав этот исчерпывающий материал “О том, как система направляющих сеток работает в Иллюстраторе” .
Шаг 2
Когда мы выставили наши направляющие, все что нам нужно сделать, чтобы наши формы выглядели четкими – это включить опцию привязка к направляющим в меню Просмотр (если вы используете устаревшую версию Иллюстратора).
Теперь, если вы новичок в целой концепции идеального пиксельного рабочего процесса, настоятельно советую пройти мой урок ” Как создать идеальную пиксельную Иллюстрацию” , который моментально расширит ваши технические навыки.
3. Как настроить слои
Когда мы закончим настройку нашего файла, будет отличной идеей структурировать наш документ, используя несколько слоев, и тогда мы сможем поддерживать устойчивый рабочий процесс, фокусируясь на одной секции иллюстрации единовременно.
Вызовите панель Слои, создайте шесть слоев и переименуйте как показано ниже:
Быстрый совет: я задал цвет всех моих слоев одним и тем же зеленым, так как это самый простой способ просмотреть выделение нужной формы (не важно, закрытый или открытый путь).
4. Как создать фон
Начнем наш проект, создав фон заката, так что убедитесь что вы стоите на нужной слое (который должен быть первым), и затем заблокируйте остальные слои чтобы мы могли начать.
Шаг 1
Шаг 2
Шаг 3
Шаг 4
5. Как создать часть с водой
Принимая во внимание, что мы закончили, убедитесь, что вы встали на нужный слой ( который у нас второй), и давайте поработаем над следующей частью изображения.
Шаг 1
Быстрый совет: вы заметили, что мы задали прямоугольнику отступ в 16 пикселей по низу, правой и левой стороне, для безопасности нашего дизайна, так как следующие шаги мы спрячем под маской.
Шаг 2
Спрячем под маску фигуру которую мы только что создали, копируя фон (Control-C), который мы вставим на текущий слой (Control-F), выделим оба и фигуру, и копию фона и затем правый клик > Создать обтравочную маску.
Шаг 3
Шаг 4
Шаг 5
Отрегулируйте прямоугольники, что мы создали, отрезав от них круг 32 х 32 пикселя (показано красным) от каждой стороны, используя меню Обработки Контуров Минус верхний.
Шаг 6
Шаг 7
Откорректируйте получившуюся форму, по одному выбирая каждый центральный нижний угол Инструментом Прямое Выделение (А), и затем выставьте радиус в 32 пикселя с помощью инструмента Скругление углов. Повторите процесс и для квадратных углов, используя меньшую величину (16 пикс) для радиуса.
Шаг 8
Шаг 9
Так как мы хотим, чтобы большое отражение и его кусочки работали как одна большая фигура, мы выделим их все, и, используя меню Обработка Контуров, создадим Составную Фигуру.
Шаг 10
Мы создали составной контур, и можем применить миленький гладенький белый линейный градиент, с 20% прозрачностью для левого цвета и 60% для правого, угол выставьте на 90º.
Шаг 11
Добавьте маленькое отражение, используя копию (Control-C > Control-F) большого отражения, которое мы уменьшим с помощью инструмента Масштабирование (правый клик > Трансформирование > Масштабирование > Равномерно > 50%).
Шаг 12
Разместите получившуюся фигуру по верхней границе отражения, выделите и сгруппируйте (Control-G) все фигуры вместе, перед тем, как перейти к следующему шагу.
6. Как создать горизонтальные детали
Убедитесь, что вы стоите на верном слое (это должен быть третий слой), и давайте начнем добавление нескольких деталей в центральную секцию иллюстрации.
Шаг 1
Шаг 2
Шаг 3
Шаг 4
Так как правая часть острова выходит за пределы фона, мы спрячем ее под маской копии (Control-C) большего круга, который мы вставим (Control-F) в текущий слой (Правый клик > Создать Обтравочную маску).
7. Как создать часть с облаками
Принимая во внимание что вы закончили предыдущий шаг, перейдите на следующий слой (уже четвертый), где мы быстро создадим облака.
Шаг 1
Шаг 2
Шаг 3
Шаг 4
Шаг 5
Создайте вторую группу облаков тем же образом, но в этот раз в паре моментов поиграйте длиной сегментов, размещая получившиеся фигуры на правой стороне фона.
Шаг 6
Выделите обе группы облаков и сделайте из них одну большую составную фигуру, примените линейный градиент с углом поворота в 90º, задайте 80% прозрачность для первого цвета и 20% для второго.
Шаг 7
8. Как создать круглую подсветку
Встаньте на нужный слой( он должен быть пятым) и быстро создайте круглую подсветку.
Шаг 1
Шаг 2
Доделайте подсветку, задав фигуре прозрачность в 30%.
9. как создать текстуру
Мы переходим к последней стадии иллюстрации, заблокируйте предыдущий слой и перейдите к следующему( уже шестому) слою, давайте закругляться!
Шаг 1
Шаг 2
Выделите круг и примените текстуру Зерно поверх него, пройдя Эффекты > Фотошоп Эффекты > Текстура > Зерно и выставьте настройки Интенсивности на 11, Контраста на 100, Тип Зерна на Брызги.
Шаг 3
Откорректируйте получившуюся текстуру, выставив Режим Смешивания на Рассеянный Свет и Прозрачность на 20% в панели Прозрачности.
Шаг 4
Закончите иллюстрацию, спрятав под маску текстуру, чтобы она оставалась привязанной к фону.
Это все!
Ну вот — короткий и простой урок о том, как создать вашу собственную летнюю иллюстрацию. Я надеюсь, вы разобрались в каждом шаге и научились чему-то новому в процессе.
Всем привет. В этом уроке я покажу, как рисовать облака с помощью объектной (дискретной) кисти Scatter Brush. Урок очень простой и предназначен в первую очередь для начинающих иллюстраторов.
Начнем с фона. Размер рабочей области у меня 500×350 px, поэтому чтобы сделать фон, нужно нарисовать прямоугольник с такими же размерами. Заливку для прямоугольника выбираем градиентную голубых тонов.
Далее нарисуйте небольшой кружочек. В моем случае его размеры 30×30 px. Этот кружок необходимо перетащить в панель кистей Brushes. В появившемся окне выберите New Scatter Brush и нажмите OK. Настройки кисти, которые появятся после этого, можно пока не трогать – опять жмем OK.
Теперь если мы воспользуемся инструментом Paintbrush Tool, и проведем им любую линию, то кружочки будут выстраиваться вдоль неё. Не очень похоже на облако, но это только пока.
Чтобы изменить настройки кисти, сделайте двойной клик по её иконке в панели Brushes. И в появившемся окне выставите Size, Spacing и Scatter в значение Random. Теперь эти параметры будут случайно изменяться в заданных диапазонах. Выставите галочку Preview, чтобы видеть, как наши изменения будут отображаться на экране, и установите ползунки в заданные значения, как на следующем скриншоте. Возможно, в вашем конкретном случае они будут отличаться. Все зависит от размеров исходных объектов. Как только вы добьетесь нужного результата, нажмите OK, затем подтвердите, что согласны с изменениями.
Теперь с помощью нашей облачной кисти можно нарисовать множество самых разных облаков.
Когда облаков будет достаточно, нужно преобразовать их в простые формы. Выделяем все и идем Object > Expand Appearance. Если вы работаете в Adobe Illustrator CS6, то велика вероятность получить ненужные объекты без заливки и обводки после этой команды (пустые квадратные рамки). В этом случае нужно еще дополнительно вычистить все. Для этого идемObject > Path > Clean up.
После экспанда наши облака состоят из множества кружочков. Их нужно объединить в одну форму. Для этого воспользуйтесь командой Unite (Add) в панели PathFinder.
Осталось закрасить облака в белый цвет. Значение Opacity в панели Transparency выставите в 50%, чтобы облака стали полупрозрачными.
Теперь расставляем облака на небе.
Чтобы нарисовать солнце, используйте инструмент Flare Too. Возьмите инструмент, сделайте левый клик в верхнем левом углу рабочей области и потяните. Появится блик. Затем еще раз кликните в правом нижнем углу рабочей области.
Солнце готово. Все излишние элементы, которые торчат за границы рабочей области, можно скрыть маской.
На этом у меня все. До скорого!
Подписывайтесь на канал Иллюстратор, чтоб не пропускать новые интересные уроки.
Читайте также: