В этом уроке мы будем экспериментировать в Adobe Illustrator, чтобы создать крутые эффекты градиентов ярких цветов, перетекающих один в другой. Для начала мы создадим яркие шары, которые позже модифицируем при помощи инструмента Warp/Деформация. Все объекты останутся в векторном формате, а это значит, что вы сможете использовать их в работах любого типа и масштабировать до любых необходимых размеров.
Шаг 1
Градиенты такого стиля очень популярны в последнее время. Их можно увидеть в различных дизайн-проектов в брендинге, мобильных приложениях и даже на фонах в iPhone X. Каждый раз, выбирая новые цвета и создавая различные выделения, вы сможете создавать уникальный объект.
Шаг 2
Для начала создайте новый документ в Adobe Illustrator любого размера, однако используйте цветовой режим RGB, чтобы получить в распоряжение полную палитру ярких оттенков. Инструментом Ellipse / Эллипс нарисуйте круг. Удерживайте Shift , чтобы круг был идеальных пропорций. Снимите обводку и укажите яркий цвет заливки.
Шаг 3
Возьмите инструмент Gradient Mesh / Сетчатый градиент и кликните в любом месте внутри круга. Смените цвет появившейся точки на другой яркий оттенок. Это может быть оттенок фонового цвета, или наоборот - контрастный цвет.
Шаг 4
Добавьте еще одну точку в сетку градиента и выберите другой цвет. Цвета будут плавно перетекать один в другой, создавая красивые переходы.
Шаг 5
Когда вы добавляете новые точки внутри круга, автоматически создаются дополнительные точки и по краям фигуры. Выделяйте их - несколько сразу - при помощи инструмента Lasso / Лассо .
Шаг 6
Попробуйте подбирать новые интересные оттенки, перемещая слайдеры в палитре Color / Цвет . При помощи инструмента Еye-dropping / Пипетка выберите цвет, затем кликните дважды по заливке в панели инструментов, чтобы открыть палитру цветов как в Photoshop.
Шаг 7
Продолжайте выделять точки при помощи инструмента Lasso / Лассо и добавляйте новые цвета. Старайтесь сделать так, чтобы практически не осталось областей с оригинальным цветом заливки.
Шаг 8
Выделите только крайние точки и укажите им светлый оттенок. Таким образом у вас получится эффект свечения. Круг должен быть залит различными цветами, создавая градиенты, плавно переходящие друг в друга.
Шаг 9
Чтобы смешать цвета, используйте инструмент Twirl / Воронки под инструментом Warp / Деформация в панели инструментов. Кликните дважды по инструменту, чтобы настроить параметры. Настройте размер воронки близкий по размеру к диаметру круга и снизьте Intensity / Интенсивность до 10% .
Шаг 10
Осторожно кликните в центр круга, чтобы немного смешать цвета. Создавайте эти изменения короткими кликами, чтобы избежать некрасивого и чрезмерного закручивания.
Шаг 11
Дважды кликните по инструменту Twirl / Воронка снова, чтобы снизить размер кисти. В нашем случае это 200px .
Шаг 12
Используйте Воронку меньшего размера, чтобы создать закручивания в разных областях круга. Опять же создавайте маленькие изменения, короткими кликами, чтобы не переусердствовать.
Шаг 13
Создайте несколько кругов, чтобы собрать красивую коллекцию различных градиентов в кругах. Это очень увлекательно. Экспериментируйте!
Шаг 14
Круги выглядят неплохо, однако мы можем пойти дальше и создать абстрактные фигуры. Сделайте это при помощи инструмента Warp / Деформация . Кликайте по кругу и тяните, чтобы деформировать объект.
Результат
В итоге вы можете получить очень крутые результаты. Даже небольшое искажение позволит создать стильную фигуру. Искажайте фигуры больше, чтобы создать эффект текучести.
October 20th, 2014 , 07:04 pm
Безумно захотелось научиться делать в Иллюстраторе что-то более сложное, чем Flat style. Выбор упал на простые фигуры в пространстве. Поскольку на носу Рождество и НГ, то выбор пал на шар. Шар-то нарисовала без проблем, тренировки ради делала его из головы, а не по уроку. Ладно, ок. Шар не идеален, но это только первый шаг на пути развития. Следующий шаг - пространство, т.е боке. Хочу шары, в будущем другие предметы, уметь размывать, да так размывать, чтобы картинка была полностью векторная.
Я делала мешами и так и сяк, делала градиентами, делала эффекты с размытием и растушевкой. Простите, у меня сто лет в обед стоит иллюстратор и он на русском языке. Но последние два пункта стоят в разделе эффектов.
Зато я сейчас отлично разобралась в Mesh Tormentor, в некоторых эффектах, в кистях и еще разных мелочах. Одним словом, знания подтянула хорошо. Но до истины не докопалась.
Картинка Меша
А это фотшопный эффект размытие. Монтажная область в Люстре 300рх, чтобы файл не так много весил, т.к. уже 500рх в EPS формате превышает допустимые нормы веса на стоки. Ширина/высота растровой картинки 4000рх, чтобы все стоки приняли. Результат не очень утешительный, т.к. при 100% увеличении видны пикселы.
Картинка размытия 100% увеличение
А вот эффект иллюстраторский "растушевка". Даже при размере монтажной области в 300рх, EPS файл весит уже 18 мб. Уже не подходит. Но все-равно сделала растровую картинку размером 4000 на 4000 рх и видно, что тут тоже есть эти противные квадратики при 100% увеличении.
Картинка растушевки 100% увеличение
Везде эти квадратики! Параллельный вопрос, а с этими эффектами вообще на стоки берут картинки? Смысла в этом, конечно, нет, ведь при увеличении картинка дает эти противные квадратики. А кому нужны эти квадратики? Но тем не менее, я никогда не применяла эти эффекты к объектам и не знаю можно ли их использовать для стоков или нет?
А вот векторные картинки на стоках.
Так как они это сделали?
КАРТИНКИ СО СТОКОВ
А вот на эту зеленую красоту сначала любовалась и только потом обратила внимание на ник:) Оказалось, что автор Кот
Цель Урока
В этом уроке мы научимся создавать оригинальный бесшовный паттерн, используя режим Draw Inside и Pattern Maker . В процессе создания шара мы будем использовать градиентные заливки и Opacity Mask. И наконец, для создания световых акцентов мы применим режим смешиван ия Color Dodge. С наступающими праздниками!
Шаг 1
Создадим новый документ (File> New…). В открывшемся диалоговом окне выбираем цветовой режим - RGB color.
Шаг 2
Приступим к созданию фона. Нарисуем пятиконечную и восьмиконечную звезды, используя Star Tool (для изменения числа лучей используйте стрелку вверх и вниз в момент создания формы). Цвет заливки или обводки не имеет никакого значения, просто старайтесь, чтобы все созданные объекты были приблизительно одного размера.
Шаг 3
Создадим две окружности одинакового размера при помощи Ellipse Tool (L), и поместим их, как показано на рисунке ниже. Выделяем обе окружности, затем нажимаем на Minus Front в панели Pathfinder.
Так мы создали форму месяца.
Шаг 4
При помощи Rectangle Tool (M) создадим два прямоугольника. При помощи Ellipse Tool (L) создадим окружность. Разместим три этих объекта, как показано на рисунке ниже. Выровнять объекты по горизонтали вам поможет панель Align.
Шаг 5
Нарисуем новый эллипс, затем сместим в сторону его правую точку, используя Direct Selection Tool (A).
Повернем этот объект на некоторый угол и разместим так, как показано ниже.
Не снимая выделения с этого объекта, берем Reflect Tool (O) и кликаем в центре одного из прямоугольников, удерживая клавишу Opt/Alt. В открывшемся диалоговом окне выбираем опцию Vertical, затем нажимаем на кнопку Copy.
Выделяем все объекты, созданные в 4-5 шаге, затем нажимаем Unite в панели Pathfinder. Форма подарочной коробки готова.
Шаг 6
Создадим окружность и прямоугольник с округленными углами при помощи Rounded Rectangle Tool. Выровняем оба объекта по горизонтали. Теперь объединим эти объекты в одну форму, нажав на Unite в панели Pathfinder. Мы создали форму новогоднего шараl.
Шаг 7
При помощи Pen Tool (P) создадим путь, состоящий из пяти прямолинейных сегментов, как это показано ниже.
Выделяем весь путь, берем Reflect Tool (O) и кликаем по верхней точке пути, удерживая клавишу Opt/Alt. В открывшемся диалоговом окне выбираем опцию Vertical, затем нажимаем на кнопку Copy.
Выделим верхние точки обоих путей и соединим их, используя комбинацию горячих клавиш Cmd/Ctrl + J. Нижние точки путей соединим при помощи Pen Tool (P). Форма елки готова.
Шаг 8
Выделяем одну из созданных форм и нажимаем на кнопку Draw Inside в панели Tools.
Теперь берем Line Tool (\) и создаем несколько прямолинейных сегментов, которые будут видны только внутри выделенной формы.
После того как необходимое количество линий будет создано, заливку объекта нужно отключить.
Подобным образом создайте множество линий внутри каждого объекта. Ширина обводки составляет 1px. Я использовал голубой цвет (R= 0; G= 191; B= 255).
Шаг 9
Выделяем все объекты, затем переходим Object > Pattern > Make. Дублируем объекты несколько раз, размещая их на некотором расстоянии друг относительно друга. Некоторые объекты могут быть повернуты. В промежутках между объектами создаем окружности и звездочки. После того как вид бесшовного паттерна вас устроит, нажимаем на кнопку Done, которая расположена ниже панели Control.
Шаг 10
Создадим прямоугольник, размер которого соответствует размеру вашей рабочей области. Заливаем прямоугольник синим цветом (R= 0; G= 88; B= 148).
Добавим новую заливку к прямоугольнику, нажав на соответствующую кнопку в панели Appearance (Window > Appearance). Применяем к новой заливке паттерн, созданный в предыдущем шаге.
Шаг 11
Уменьшим непрозрачность верхней заливки до 35% в панели Appearance.
Создадим еще одну заливку прямоугольника в панели Appearance и применим к ней линейный градиент, который содержит несколько белых и серых слайдеров. Установим для градиента угол -30 градусов.
Применим к верхней заливке режим смешивания Multiply.
Шаг 12
Приступим к созданию новогоднего шара. Нарисуем окружность, затем применим к ней радиальный градиент, который содержит белый цвет и три оттенка красного цвета(1 (R= 223; G= 0; B= 0), 2 (R= 94; G= 0; B= 0), 3 (R= 223; G= 0; B= 0) слева направо).
Шаг 13
Создадим прямоугольник, залитый линейным градиентом, который содержит белый цвет и четыре оттенка красного цвета (1 (R= 223; G= 0; B= 0), 2 (R= 223; G= 0; B= 0)и 3 (R= 94; G= 0; B= 0) и 4 (R= 223; G= 0; B= 0) слева направо).
Шаг 14
Создадим выше еще один прямоугольник (Cmd/Ctrl + C; Cmd/Ctrl + F). Округлим немного верхние углы этого объекта и зальем его черно-белым радиальным градиентом, как это показано на рисунке ниже.
Выделяем оба прямоугольника и нажимаем Make Mask в панели Transparency.
Opacity Mask позволила нам создать плавный переход между поверхностями шара.
Шаг 15
Создадим по обе стороны верхней части шара два вертикальных прямолинейных сегмента. Установим в панели Stroke подходящую ширину и выберем рпцию Round Cap.
Выделяем оба сегмента, затем переходим Object > Blend > Make, затем переходим Object > Blend > Blend Options…, выбираем Specified Distance и подбираем величину, которая в моем случае равна 10px.
Шаг 16
Переходим Object > Blend > Expand, затем Object > Path > Outline Stroke.
Нажимаем Unite в панели Pathfinder.
Шаг 17
Выделяем верхнюю часть шара и черную форму, затем берем Shape Builder Tool и кликаем по части формы, которая выходит за пределы формы шара, удерживая Opt/Alt. Это действие приведет к удалению выбранной части.
Заливаем полученную форму линейным градиентом, который содержит белый цвет и четыре оттенка желтого цвета (1 (R= 163; G= 123; B= 2), 2 (R= 223; G= 186; B= 0)и 3 (R= 94; G= 67; B= 0) и 4 (R= 223; G= 186; B= 0) слева направо).
Шаг 18
Копируем форму крепления и вставляем ее назад (Cmd/Ctrl + C; Cmd/Ctrl + B). Сдвигаем новый объект немного вниз. Заливаем его серым цветом и применяем режим смешивания Multiply в панели Transparency.
Так мы создали падающую тень от крепления шара.
Шаг 19
Создадим вытянутый по высоте прямоугольник и поместим его ниже всех объектов шара. Заливаем его вертикальным линейным градиентом. Здесь вы можете использовать те же цвета, что и для градиента крепления.
Шаг 20
Создадим окружность с заливкой радиальным градиентом от белого к черному цвету. Применим к этой окружности режим смешивания Color Dodge.
Используя такие объекты, мы можем создать блики в разных местах фона и на шаре.
Шаг 21
Превратим один из таких объектов в эллипс, деформировав его при помощи Selection Tool (V).
Не снимая выделения с эллипса, переходим Object > Transform > Rotate…. В открывшемся диалоговом окне устанавливаем угол 60 градусов и нажимаем на кнопку Copy.
Теперь для повторения последнего действия используем комбинацию горячих клавиш Cmd/Ctrl + D.
Таким образом, мы создали блик в виде звездочки на краю шара.
Шаг 22
Нам осталось только при помощи Type Tool (T) создать надпись на шаре. Для этих целей я использовал Freehand521 BT font.
С наступающим Новым Годом и Рождеством!
Мы начнем с определения структуры для нашего объекта.
Создайте несколько красочных, равномерно расположенных прямоугольников, как я.
Мы должны из них создать символ, так что выберите их всех и тяните их к Symbols Panel.
Нарисуйте круг и удалите одну из точек привязки. Таким образом у Вас останется только половина круга. Закрасьте ее черным цветом.
Выберите объект, который Вы только создали, и пойдите в Effect>3D>Revolve, чтобы создать черную сферу.
В опции Revolve выберите Map Art, и из выпадающего меню выбирают символ, который мы только что создали (цветные полоски).
Корректируйте ширину, высоту и вращение символа. Важно выбрать пункт Shade Artwork, иначе свет, который мы будем настраивать в следующем шаге, не будет затрагивать полосы, и все будет выглядеть неуклюжим.
Мы должны играть немного с опцией освещения. Включите Plastic Shading, потому что она даст высшее качество. Добавьте еще некоторые огни, я добавил только один, но если Вам хочется, то можете добавить и больше. Также важен параметр Blend Steps – чем больше, тем выше качество. Если Ваше изображение будет маленьким, оставьте 25, но если Вы нуждаетесь в изображении большого размера, то я рекомендую увеличить это до максимума.
Шаг 2
Теперь, когда Вы знаете основы, Вы можете экспериментировать с различными структурами и настройками освещения.
Сфера с орнаментом из прямоугольников и 3 огнями.
Вы можете сделать такой образец орнамента, помещая несколько рядов квадратов как на картине ниже. Используйте Object>Transform Each, чтобы вращать каждый квадрат индивидуально.
Шаг 3
Этот объект был создан с диагональными линиями, который я согнул с помощью эффекта Effect>Wrap>Arc. Чтобы сделать сферу частично прозрачной, я использовал “Невидимую Геометрию”, это галочка “Invisible Geometry” в окне Effect>3D>Revolve>Map Art.
Шаг 4
В этом шаге я нанес на сферу простой линейный градиент. Я также измененный цвет штриховки (Shading color) в моих опциях освещения, чтобы дать сфере хороший красный оттенок.
Вы можете экспериментировать с цветной штриховкой и установками цвета, чтобы придумать довольно интересные эффекты.
Шаг 5
Теперь создадим тень. Нарисуйте два эллипса, как на картине ниже. Сделайте маленький черным, больший белым. Установите для большого в 0 % прозрачность. Выделите оба овала.
Используйте инструмент Blend , чтобы соединить эти два эллипса и установить смешивание (Spacing) в «Smooth Color»(Вы можете сделать это, дважды щелкая по инструменту Blend).
Шаг 6
Чтобы создать отражение копируют сферу и перемещают ее на передний план (ctrl/cmd+F). Выберите копию и пойдите в Object>Expand Appearance. После этого поместите ее вертикально и ниже первоначальной сферы.
Создайте прямоугольник по размерам сферы и заполните его бело-черным градиентом.
Выберите отраженную сферу и прямоугольник. Пойдите в панель Transparency и выберите Make Opacity Mask.
Вы можете нажать на уменьшенное изображение маски и поэкспериментировать с градиентом.
Все!!!
(Маска прозрачности(Make Opacity Mask) не поддерживается форматом EPS8, сохраняйте только в EPS10 !!!)
У вас остались вопросы или есть что добавить по теме статьи?