Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Game Art
Design

Создаем ретро автомобили в виде с высоты птичьего полета в Адобе Иллюстратор

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Grease Movie Week.
How to Use Adobe Fuse to Recreate the Drive-in Scene From Grease
How to Create a Beauty-Inspired Illustration in Adobe Illustrator

Russian (Pусский) translation by Mavka (you can also view the original English article)

Final product image
What You'll Be Creating

Каждый чувствует определенную страсть к ретро стилю! Эта удивительная одежда, эти фантастические прически, музыка и, конечно же, машины! В этом уроке мы совместим нашу любовь к 50-и годам, кинематографу и играм, создав безумную смесь. Мы создадим стилизированный ретро-автомобиль с высоты птичьего полета с блестящими молниями, используя основные формы, различные типы градиентов и режимы наложения, работая с панелью Обработка контуров и другими функциями Адобе Иллюстратор.

Это слово - Бриолин. Фильм, который представляет чистую суть 1950-х годов - историю любви, радости, красивых вещей и замечательных автомобилей. Это ретро кабриолеты с гладкой округлой формой и раскладными крышами. Они, безусловно, остаются стильными и незабываемыми.

Вдохновленные этим фильмом, мы создадим вид ретро-автомобиля с узором в форме молний. Вы можете воспользоваться этими методы, чтобы создать любой вид автомобиля, и убедитесь, что вы проверили автомобили в виде сверху на Envato Market, чтобы легче представлять транспортные средства под таким углом зрения. Просмотр ретро автомобилей на Envato Market также может быть весьма полезным для получения хороших референcов автомобилей.

Готовы приступить к рисованию? Давайте начнем!

1. Создаем основные контуры

Шаг 1

Начнем создание основных частей нашего автомобиля. Возьмите Эллипс (L) и давайте сформируем вид сверху на шасси. Создайте овал размером 130 х 300 px, выберите Прямое выделение (A) и перетащите обе боковые опорные точки вниз, в результате чего нижняя часть станет плоской и широкой.

start forming chassis from ellipse

Шаг 2

Продолжайте, создав меньший овал 55 х 155 px и разместите его на левой стороне корпуса. Он станет основой для фары. Перетащите боковые опорные точки вверх, сделав нижнюю часть формы более точной.

add a smaller ellipse for the headlights

Шаг 3

Теперь сформируем нижнюю часть, которая расположена на задней части автомобиля. Создайте прямоугольник 130 х 125 px при помощи инструмента Прямоугольник (M). Прямым выделением (A) выберите обе нижние опорные точки и примените Динамические углы, чтобы скруглить нижние углы, потянув за маркеры Динамических углов вверх.

Если вы используете более ранние версии Адобе Иллюстратор, не стесняйтесь применить Эффект> Стилизация> Закругленные углы. Однако он повлияет на все углы формы. Затем вы можете применить Ластик (Shift-E), удерживая Alt, чтобы удалить верхнюю часть формы, сделав верхние углы снова острыми.  

form the back of the car with rectangle

Шаг 4

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

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

use the reflect tool

Шаг 5

Теперь давайте сделаем ветровое стекло для нашего автомобиля. Создайте маленький прямоугольник размером примерно 110 х 18 рх, и разместите его внутри корпуса. Далее в меню Эффект> Деформация> Дуга вверх со значением Горизонтального Искажения 20%, и мы получим арку в верхней части формы. Далее Объект> Разобрать оформление, чтобы применить эффект.

Затем перейдите к Объект> Контур> Создать параллельный контур и установите значение Смещения -5 px, создав меньшую форму внутри. Нажмите OK.

form a windscreen from rectangle with arc upper effect

Шаг 6

Наконец, давайте добавим внутренние части автомобиля. Воспользуйтесь Прямоугольником (M), чтобы создать два маленьких прямоугольника, пригодных для внутренних мест автомобиля. Это будут сиденья. Закруглите внешние углы формы при помощи функции Динамических углов.

Наконец, создайте простой руль, сделанный из трех эллипсов, один внутри другого.

Прекрасно! Теперь все основные части готовы и мы можем перейти к раскрашиванию!

make the seats and the steering wheel inside the car

2. Применим цвета и добавим детали

Шаг 1

Прежде всего, давайте выберем наибольший элемент - основу нашего автомобиля, и применим яркий радиальный градиент от ярко-красного в центре до темно-красного по краям. Используйте Градиент (G), чтобы уменьшить форму градиента, и сделать его более овальным, и, таким образом, мы добавим тонкую тень к краям нашего автомобиля.

apply a red radial gradient to the base of the car

Шаг 2

Выделите эллипсы фар и примените Пипетку (I), чтобы скопировать градиент с основы автомобиля. Измените Тип градиента на Линейный и разместите его вертикально со светлым красным вверху, чтобы более темный красный цвет был внизу.

Добавьте небольшой прямоугольник с закругленными углами под шасси (нажмите Shift-Control-[), чтобы Отправить его На задний план) и залейте его похожим красным цветом, чтобы заполнить пробелы на передней части автомобиля.

apply colors to the headlights

Шаг 3

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

Apply the same red linear gradient to the wings

Шаг 4

К нижнему элементу (в задней части автомобиля), давайте применим овальную форму радиального градиента, а затем Отправим эту часть На задний план (Shift-control-[), разместив его под основанием автомобиля.  

apply a red radial gradient to the back of the car

Шаг 5

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

apply colors to the windscreen

Шаг 6

Давайте добавим блестящий эффект к ветровому стеклу. Примените Прямоугольник (M), для создания двух узких вертикальных полос любого цвета (для того, чтобы сделать их видимыми на белом фоне). Установите Режим наложения на Осветление в панели Прозрачность.

Удерживая Shift, поверните формы на 45 градусов, расположив их над ветровым стеклом. Теперь выберите полоски вместе с синей формой стекла и возьмите инструмент Создание фигур (Shift-M). Удерживая Alt, нажмите на ненужные куски вне стеклом, чтобы удалить их.

Наконец, установите цвет Заливки на белый в панели Цвет и мы это получили!

add highlights to the windscreen

Шаг 7

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

Создайте прямоугольник 13 х 60 px и залейте его с горизонтальным линейным градиентом от белого до светло-серого.

Удерживая Alt-Shift перетащите фигуру вправо, сделав копию. Нажмите Control-D несколько раз, чтобы сделать еще семь копий. Сгруппируйте (Control -G) все формы.

make the seats texture from rectangles

Шаг 8

Теперь давайте вернемся к машине, выберите сиденья, Скопируйте (Ctrl-C) их и Вставьте на передний план (Ctrl-F). Разместите нашу текстуру под сиденья (нажмите Control- [ несколько раз, чтобы переместить объект на несколько позиций вниз). Удерживая Alt-Shift, перетащите текстуру, создав копию второй половины сидений.

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

Как видно, сейчас текстура скрыта внутри сиденья, создавая приятную рыхлую текстуру.

place texture inside of a clipping mask

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

place texture inside of a clipping mask 2

Шаг 9

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

Выберите верхнюю половину и залейте ее тем же бело-серым линейным градиентом, который мы применяли для текстуры сидений (вы можете воспользоваться Пипеткой (I), чтобы скопировать цвет), но на этот раз разместите градиент вертикально. Включите Режим наложения на Умножение, что создаст более темную полупрозрачную форму.

И повторите то же для второй половины сидений.

apply shadows to the seats in Multiply mode

Шаг 10

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

adjust the shape of the seats

Шаг 11

Теперь давайте перейдем к рулю. Выберите два круга (которые за рулем), щелкните правой кнопкой мыши и создайте Составной контур (или просто нажмите Control-8). Залейте созданную форму пончика с радиальным градиентом, состоящий из трех цветов: темно-серого, белого и светло-серого цвета. Залейте центр руля простым радиальным градиентом от светло-серого до темно-серого цвета.

apply colors to the steering wheel

Шаг 12

Теперь давайте изменим заднюю часть нашего автомобиля, добавив раскладную крышу. Скопируйте нижнюю форму и Вставьте ее На передний план (Control-C> Control-F> Shift-Control-]). Заполните форму вертикальным линейным градиентом от белого до светло-серого.

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

Наконец, дублируйте (Ctrl + C> Ctrl-F) светло-серую форму, созданную нами, сделайте копию меньше и отразите цвета градиента наоборот, создав внутреннюю часть раскладной тканной крыши кабриолета.

add the folding roof

Шаг 13

Теперь давайте создадим внутреннюю часть автомобиля, сделав его гораздо темнее. Выделите основу автомобиля и перейдите к меню Объект> Контур> Создать параллельный контур. Установите значение Смещения на -5 px, создав меньшую форму внутри основы.

Теперь выделите новую форму вместе с внешней частью ветрового стекла (красная), возьмите Создание фигур (Shift-M), и, удерживая клавишу Alt нажмите на верхнюю часть, чтобы удалить ее. Таким образом мы сформировали интерьер автомобиля.

make the inner part of the car

Шаг 14

У нас уже есть основа для фары, но мы пока нет самих фар. Давайте создадим их!

Сделайте овальную форму 35 х 8 px с помощью Эллипса (L). Залейте ее вертикальным линейным градиентом от светло-серого до белого. Скопируйте форму и Вставьте на задний план (Control-C> Control-B).

Выберите нижнюю опорную точку задней формы с помощью Прямого выделения (A) и перетащите ее вниз, удерживая Shift.

И, наконец, заполните вырезанную форму ярко-красным радиальным градиентом, скопировав цвет с шасси, с помощью Пипетки (I).

Вуаля! Теперь мы можем прикрепить фары к автомобилю.

shape the headlights from the ellipse

Разместите фары на верхней части автомобиля. Они должны выглядеть вот так.

Place the headlights at the top part of the car

Шаг 15

Теперь давайте добавим блестящий хромированный элемент в передней части автомобиля. Возьмите Прямоугольник со скругленными углами и нарисуйте узкую вертикальную полосу в верхней части автомобиля.

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

make a chrome stripe with linear gradient

3. Добавим узор молнии к автомобилю

Шаг 1

Теперь пришло время сделать нашу ретро-машину уникальной и связать ее с кинофильмом Бриолин! Возьмите Карандаш (N) и нарисуйте эти плавные линии, создавая причудливый узор молнии для нашего автомобиля. Попробуйте сделать это проще.

Вы можете дважды щелкнуть на Карандаш (N), чтобы поиграть с настройками Точности, сделав ее более гладкой. Я рисую эти фигуры лишь мышью, и, как видите, Адобе Иллюстратор прекрасно справляется с правильным формированием линий.

draw lightning with the pencil tool

Шаг 2

Сделайте еще три различные формы молнии.

Make three more different shapes of lightning

Шаг 3

Начните располагать формы молний на левой половине автомобиля. Вращайте их и двигайте вокруг, чтобы они прекрасно подходили к элементам автомобиля. Но не забывайте пользоваться инструментом Создание фигур (Shift-M), чтобы удалить ненужные части молнии снаружи автомобиля.

Как только вас удовлетворит положение элементов, выберите их и примените Зеркальное отражение (O), чтобы отобразить форму по Вертикальной оси, создав зеркальные копии и прикрепите их к противоположной стороне автомобиля.

add patterns to the car

Шаг 4

Теперь давайте добавим здесь немного больше объема. Выберите две зеркальные формы молнии на передней части автомобиля и создайте Составной контур (Control-8). Примените яркий радиальный градиент от белого до серовато-розового цвета, в результате чего мы получим шаблон серебра и блеска. Примените один и тот же цвет ко всем другим формам молнии.

apply silver gradients to the patterns

Шаг 5

Теперь давайте добавим несколько бликов к автомобилю, и сделаем его поверхность блестящей и полированной. Выберите самый элемент шасси и примените Объект> Контур> Создать параллельный контур со значением Смещения -7px. Залейте новую форму вертикальным линейным градиентом от розового до черного и установите Режим наложения на Осветление. Вы увидите, как черная часть станет прозрачной, создав хороший глянцевый эффект.

Сделайте то же самое с овальными фигурами под фарами.

add highlights to the car in Screen Blending mode

Шаг 6

Добавьте аналогичные блики к задней части автомобиля. Обязательно установите шаблоны молнии под бликами.

add highlights to the car in Screen Blending mode 2

Шаг 7

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

Создайте прямоугольник 8 х 35 px для выхлопной трубы и залейте его тем же хромированным линейным градиентом, что и декоративная полоска на носу автомобиля (примените Пипетку (I), чтобы скопировать градиент).

Удерживая Alt-Shift, перетащите фигуру вправо, сделав копию. Выделите обе выхлопные трубы и Отправьте их На задний план (Shift-Control- [).

make a chrome tailpipe from rectangle

Шаг 8

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

Начните с овала черного цвета 7 х 30 px, и прикрепите его к кончику выхлопной трубы. Создайте меньший овал поверх, залив его ярко-оранжевым цветом.

make flames from the exhaust using Blend

Шаг 9

Выделите оба овала и перейдите к Объект> Переход> Создать. Таким образом мы создадим плавный переход между цветами, создав эффект пламени.

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

Перетащите боковые и нижние опорные точки форм вниз, пользуясь Прямым выделением (A), чтобы расширить пламя.

make flames from the exhaust using Blend 2

Шаг 10

Чтобы получить полупрозрачный эффект пламени, сначала нам нужно создать любой фон под нашим автомобилем. Для этой цели создайте серый прямоугольник 800 х 600 рх и расположите его под автомобилем (Shift-Command-[).

Выделите пламя и переключите Режим наложения на Осветление.

 switch the Blending Mode of flames to Screen

4. Создадим фон и добавим финальные штрихи

Шаг 1

Теперь, когда мы уже перешли к созданию фона, давайте продолжим, и сделаем нашу композицию полной и сбалансированной.

У нас уже есть прямоугольник размером 800 х 600 px под нашим автомобилем. Примените радиальный градиент от серого до темно-серого, изобразив поверхность асфальта.

make an asphalt background

Шаг 2

Теперь давайте вернемся к нашему автомобилю и немного настроим его, добавив нежную плоскую тень. Выберите все части автомобиля, дублируйте их (Control-B> Control-F) и примените Соединение в панели Обработка контуров, создавая единый силуэт.

Воспользуйтесь Отрезком линии (\), чтобы нарисовать красную вертикальную линию поперек автомобиля.

create a silhouette with Unite function of Pathfinder

Шаг 3

Давайте выровняем объекты. Выделите красную линию с силуэтом автомобиля, удерживая Alt и нажмите на силуэт, чтобы сделать его Ключевым объектом. Вы увидите толстое выделение которое показывает, что все выбранные элементы будут выровняны по этому объекту. Отправляйтесь в панели Выравнивание и нажмите Горизонтальное выравнивание, центр.

В то время как оба объекта по-прежнему выделены, перейдите на панель Обработка контуров и нажмите кнопку Разделение, чтобы разделить силуэт на две равные половины. Удалите правую половину и примените Режим наложения Умножение для левой половины, что сделает ее полупрозрачной, и, таким образом, затемнит левый бок автомобиля.

make a shadow in Multiply mode

Шаг 4

Давайте создадим землю под текстурированной машиной для большего реализма. Дублируйте (Control-C> Ctrl-F), фоновый прямоугольник и отправляйтесь в панель Образцы. Здесь нажмите на значок меню Библиотеки образцов и найдите Узоры> Базовая графика> Базовая графика_Текстуры. Примените к нашему прямоугольника текстуру USGS 22 Gravel Beach.

apply a swatch pattern to the ground

Шаг 5

Теперь давайте добавим падающую тень от нашего автомобиля. С помощью Эллипса (L), создайте овал немного большего размера, чем автомобиль. Разместите его под транспортным средством и нанесите сжатый радиальный градиент от серо-розового в центре до белого по краям. Включите его в Режим наложения Умножение, образовав на земле размытую тень.

add a shadow ellipse beneath the car

Вот что мы получили!

top view retro car

Бриолин, Давай, Бриолин!

Отличная работа! Мы успешно перешли финишную линию нашей гонки и создали ретро-автомобиль, напоминающий фильм Бриолин. Эти методы могут быть использованы для создания любого другого транспортного средства с видом сверху или симметричного объекта, который идеально подойдет для простых гоночных игр и простых анимаций.

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

Создавайте интересные вещи и делитесь своими результатами! Желаю успехов!

grease movie aerial view of retro cars with lightning pattern
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.