в

Рисуем авианосец из «Звёздного пути»

Если вы настоящий фанат «Звёздного пути», вам понравится это руководство, т.к. мы собираемся создать легендарный звездолёт NCC-1701 на основе пошагового процесса и некоторых базовых геометрических фигур и инструментов.  

1. Как настроить новый файл проекта

Запустите Illustrator  и настройте Новый документ (Файл > Новый или Control-N) при помощи следующих параметров: 

  • Количество монтажных областей: 1
  • Ширина: 800 пикселей
  • Высота: 600 пикселей
  • Единицы измерения: пиксели

Во вкладке с Расширенными настройками: 

  • Цветовой режим: RGB
  • Растровые эффекты: осветление (72 точек на дюйм)
  • Режим предпросмотра: по умолчанию
setting up a new document

2. Как настроить пользовательскую сетку

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

Шаг 1

Перейдите в Редактировать > Установки > Направляющие и сетка и задайте следующие параметры: 

  • Сетка через каждые: 1 пиксель
  • Разделы: 1
setting up a custom grid

Подсказка: вы можете узнать больше о сетках, почитав это подробное руководство по работе системы сеток в Illustrator.

Шаг 2

Когда настроим пользовательскую сетку, для чёткости фигур нам нужно активировать функцию Привязки к сетке под меню Вид (если вы используете старую версию Illustrator).

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

3. Как настроить слои

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

Откройте панель Слоёв и создайте четыре слоя, которые назовём следующим образом: 

  • слой 1: фон 
  • слой 2: звездолёт 
  • слой 3: Линии деформации 
  • слой 4: текстура
setting up the layers

Подсказка: я окрасил все свои слои в одинаковый оттенок зелёного, т.к. на нём лучше всего видно выделенные фигуры (с открытыми или закрытыми контурами). 

4. Как создать фон

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

Шаг 1

Создайте круг 360 х 360 пикселей, который окрасим в цвет #343434,  и затем выровняйте по центру монтажной области, расположив его на расстоянии 108 пикселей от верхнего края. 

creating and positioning the background

Шаг 2

Добавьте статичные звёзды из пары кругов 4 х 4 пикселей, которые окрасим в светло-оранжевый (#EFC36C) и тёмно-оранжевый (#EF986C), а затем расположим на фоне, как показано на образце. Когда будет готово, выделите и сгруппируйте все фигуры при помощи комбинации клавиш Control-G.

adding the static stars

Шаг 3

Начните работать над первым двигающимся объектом, создав его хвост из прямоугольника 4 х 16 пикселей, к которому мы применим Линейный градиент 90º взяв цвет #6FCDE2 для обоих краёв. Установите Непрозрачность правого цвета на 0%, расположив получившуюся фигуру возле одной из статичных звёзд.  

creating the tail for the moving object

Шаг 4

Добавьте область головы из круга 4 х 4 пикселей, который окрасим в цвет #6FCDE2, и затем поместите его на хвост, как показано на картинке. Когда фигура будет на месте, выделите и сгруппируйте  (Control-G) две фигуры перед тем, как перейти к следующему шагу.  

adding the head to the moving object

Шаг 5

Добавьте ещё несколько объектов из копий (Control-C > Control-F) фигуры, над которой мы только что закончили работать, и расположите их по бокам фона, как показано на образце. Когда будет готово, не забудьте выделить и сгруппировать (Control-G) все фигуры.  

adding the moving objects to the background

Шаг 6

Когда закончите работать над фоном, можете выделить и сгруппировать (Control-G) все составляющие фигуры, заблокировав слой перед переходом к следующему шагу.  

locking the background layer

5. Как создать звездолёт

Перейдите на следующий слой (второй) и начните создавать легендарный звездолёт NCC-1701!

Шаг 1

Создайте основную фигуру вторичного корпуса корабля из прямоугольника 28 х 64 пикселей, который окрасим в цвет #AAAAAA и затем выровняем по центру фона, расположив фигуру на расстоянии 140 пикселей от верхнего края. 

creating the upper section of the secondary hull

Шаг 2

Добавьте центральную секцию корпуса из прямоугольника 28 х 80 пикселей (#AAAAAA), по отдельности выделите его нижние опорные точки Инструментом «Прямое выделение» (А), а затем сдвиньте их внутрь на 4 пикселя Инструментом «Перемещение» (щелчок правой кнопкой > Трансформирование > Перемещение > По горизонтали > +/- 4  пикселя, в зависимости от стороны, с которой начнёте).  Когда будет готово, поместите получившуюся фигуру, как показано на образце. 

creating the center section of the secondary hull

Шаг 3

Поместите ещё один маленький прямоугольник 20 х 4 пикселей (#AAAAAA) под тем, который мы только что изменили, и затем выделите и объедините все три фигуры в одну большую при помощи Режима объединения фигур на панели Обработки контуров.  

creating the lower section of the secondary hull

Шаг 4

Создайте внутреннюю секцию ангара из прямоугольника 12 х 4 пикселей (#7F7F7F),  установив Радиус его нижних углов на 4 пикселя в Свойствах прямоугольника на панели Трансформирования. Поместите получившуюся фигуру под большим корпусом, оставив расстояние 4 пикселя между ними, которое будет плотной тенью. 

adding the hangar section to the secondary hull

Шаг 5

Начните добавлять детали текущей секции корабля, создав круг 8 х 8 пикселей (#7F7F7F),  на который добавим маленький круг 4 х 4 пикселей (#F2A16B), а затем сгруппируем (Control-G) и расположим на расстоянии 2 пикселя от нижнего края.  

adding the circular detail to the secondary hull

Шаг 6

Добавьте вертикальную линию из скруглённого прямоугольника 2 х 56 пикселей (#7F7F7F) с Угловым радиусом 1 пиксель, который выровняем по центру корпуса, расположив на расстоянии 2 пикселя от круглой детали.  

adding the vertical detail line to the secondary hull

Шаг 7

Создайте скруглённый прямоугольник побольше (8 х 24 пикселей) (#7F7F7F) с Угловым радиусом 4 пикселя, который поместим на вертикальную линию, чтобы он перекрывал её нижнюю часть на 4 пикселя.

adding the rounded rectangle to the secondary hull

Шаг 8

Далее добавьте маленькие прямоугольные детали из четырнадцати прямоугольников 2 х 4 пикселей (#7F7F7F), которые расположим по бокам корпуса, как показано на образце. Когда будет готово, выделите и сгруппируйте все фигуры, нажав комбинацию клавиш Control-G.

adding the rectangular details to the secondary hull

Шаг 9

Добавьте тень от основного корпуса корабля из круга 152 х 152 пикселей, который окрасим в цвет #343434 и затем выровняем по центру верхнего края текущей фигуры.  

adding the projected shadow to the secondary hull

Шаг 10

Замаскируйте только что созданную тень при помощи копии (Control-C) вторичного корпуса (отмечено красным), которую вставим на переднем плане (Control-F) и затем, выделив обе фигуры, щёлкнем правой кнопкой мыши > Создать обтравочную маску. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры текущей секции перед тем, как перейти к следующему шагу. 

masking the circular shadow

Шаг 11

Для основного корпуса корабля создайте круг 136 х 136 пикселей, который окрасим в цвет #D8D8D8 и затем выровняем по центру верхнего края предыдущей области.  

creating the main hull

Шаг 12

Добавьте мягкий блик, создав две копии (Control-C > Control-F дважды) круга, и сдвиньте верхнюю копию вниз на 4 пикселя, а затем вырезав её из нижней фигуры при помощи Режима вычитания фигур на панели Обработки контуров.  Окрасьте получившуюся фигуру в белый цвет (#FFFFFF) перед тем, как перейти к следующему шагу. 

adding the highlight to the main hull

Шаг 13

Добавьте кольцевые области из пяти кругов толщиной 2 пикселя (#AAAAAA) со следующими параметрами Ширины и Высоты

  • первый круг: 126 x 126 пикселей 
  • второй круг: 106 x 106 пикселей 
  • третий круг: 86 x 86 пикселей 
  • четвёртый круг: 66 x 66 пикселей 
  • пятый круг: 46 x 46 пикселей

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

adding the ring sections to the main hull

Шаг 14

Создайте вертикальную линию из Обводки высотой 140 пикселей и толщиной 2 пикселя (#AAAAAA), которую выровняем по центру основного корпуса корабля. 

adding the vertical detail line to the main hull

Шаг 15

Создайте вторую линию Инструментом «Поворот», выделив уже имеющуюся и затем щёлкнув правой кнопкой мыши > Трансформировать> Вращение > Угол > 360 / 16 (что даст вам угол 22.5º ), применив функцию Копирования. Первое значение это сама окружность круга, а второе – количество сегментов, которое мы хотим создать после добавления всех деталей линий.  

adding the second detail line to the main hull

Шаг 16

Постепенно добавьте все оставшиеся линии при помощи функции повторения, нажав Control-D шесть раз, пока у вас не получится такой же результат, как на образце. 

adding the remaining detail lines to the main hull

Шаг 17

Убедитесь, что все опорные точки линий привязаны к пиксельной сетке, включив режим Предпросмотра пикселей (Alt-Control-Y) и затем вручную выделив и переместив их при помощи Инструмента «Прямое выделение» (А). Когда будет готово, выделите и сгруппируйте все изменённые линии, нажав комбинацию клавиш Control-G.

example of anchor snapping

Шаг 18

Создайте прямоугольник 8 х 6 пикселей, который окрасим в цвет #7F7F7F и затем выровняем по центру нижнего края круга.

adding the bottom rectangular detail to the main hull

Шаг 19

Добавьте прямоугольник 4 х 24 пикселей (#7F7F7F) над только что созданной фигурой, а затем установите Радиус его верхних углов на 2 пикселя в Свойствах прямоугольника на панели Трансформирования.  

adding the taller detail shape to the main hull

Шаг 20

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

masking the details of the main hull

Шаг 21

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

creating the main shape for the bridge section

Шаг 22

Выделите нижнюю опорную точку только что созданного круга Инструментом «Прямое выделение» (А) и затем сдвиньте её вниз на 12 пикселей Инструментом «Перемещение» (щелчок правой кнопкой > Трансформировать > Перемещение > По вертикали > 12 пикселей). 

adjusting the shape of the bridge section

Шаг 23

Создайте для области перехода блик высотой 2 пикселя, окрасив его в цвет #FFFFFF.

adding the highlight to the bridge section

Шаг 24

Добавьте плотную тень при помощи копии (Control-C > Control-B) фигуры, которую мы изменили несколько шагов назад, и окрасьте её в цвет #343434, а затем сдвиньте вниз на 4 пикселя при помощи направляющих стрелок на клавиатуре или Инструментом «Перемещение» (щелчок правой кнопкой > Трансформировать > Перемещение > По вертикали > 4 пикселя).  

adding the shadow to the bridge section

Шаг 25

Создайте центральную область перехода из круга 12 х 12 пикселей (#7F7F7F), поверх которого добавим маленький круг 4 х 4 пикселей (#EDEDED),  а затем сгруппируем (Control-G) и выровняем по центру большой нижней фигуры. 

adding the center section to the bridge

Шаг 26

Добавьте несколько деталей перехода из нескольких прямоугольников (#7F7F7F) и круга (#7F7F7F),  которые расположим, как показано на образце. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры текущей секции перед тем, как перейти к следующему шагу.  

adding the little details to the bridge section

Шаг 27

Создайте прямоугольные детали на верху второй кольцевой секции корпуса из четырёх прямоугольников 8 х 4 пикселей (#AAAAAA), которые повернём на 45º градусов (щелчок правой кнопкой > Трансформировать > Поворот > 45º), привязав их опорные точки к Пиксельной сетке.  

adding the detail rectangles to the main hull

Шаг 28

В завершение добавьте две круглые детали из кругов 8 х 8 пикселей (#7F7F7F), поверх которых добавим маленький круг 4 х 4 пикселей (#F2A16B), который сгруппируем (Control-G), скопируем (Control-C > Control-F) и расположим по бокам, как показано на образце.  Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры текущей секции перед переходом к следующему шагу.  

adding the circular details to the main hull

Шаг 29

Начните работать над левым двигателем, создав прямоугольник 24 х 24 пикселей (#D8D8D8), который расположим на расстоянии 22 пикселя от нижнего края вторичного корпуса и 6 пикселей от вертикальной линии.  

creating the main shape for the left wing

Шаг 30

Создайте для только что созданной фигуры мягкий блик из прямоугольника 24 х 2 пикселей, который окрасим в цвет #FFFFFF  и затем выровняем по центру верхнего края. 

adding the highlight to the left wing

Шаг 31

Добавьте три квадрата 4 х 4 пикселей (#7F7F7F) на расстоянии 2 пикселя друг от друга, которые сгруппируем (Control-G) и расположим на расстоянии 2 пикселя от левого края крыла и верхнего блика. Когда все фигуры будут на своих местах, выделите и сгруппируйте  (Control-G) все составляющие фигуры текущей секции перед тем, как перейти к следующему шагу.  

adding the detail squares to the left wing

Шаг 32

Создайте основную фигуру левого складного двигателя корабля из прямоугольника 16 х 128 пикселей, который окрасим в цвет #EDEDED и затем расположим на расстоянии 4 пикселя от маленького крыла и 28 пикселей от основного корпуса корабля.  

creating and positioning the main shape for the left warp drive

Шаг 33

Добавьте кончик из круга 12 х 12 пикселей (#F2A16B), который выровняем по центру высокого прямоугольника, расположив его на расстоянии 8 пикселей от верхнего края.  

adding the tip to the left warp drive

Шаг 34

Создайте прямоугольник 16 х 8 пикселей  (#EDEDED), который изменим, как показано на образце и расположим получившуюся фигуру на нижней половине кончика. 

adding the upper rectangular detail to the left warp drive

Шаг 35

Заполните пространство между основной фигурой складного двигателя и его кончиком, поместив прямоугольник 16 х 2 пикселей, который окрасим в цвет #EDEDED.

adding the smaller detail rectangle to the left warp drive

Шаг 36

Добавьте несколько бликов текущей секции (#FFFFFF), как на картинке. Когда будет готово, переходите к следующему шагу.   

adding the highlights to the left warp drive

Шаг 37

Создайте левую часть крыла из прямоугольника 4 х 32 пикселей (#AAAAAA) и измените Радиус левых углов на 2 пикселя, перейдя в Свойства прямоугольника на панели Трансформирования. Выровняйте прямоугольник 2 х 12 пикселей  (#7F7F7F) по центру правого края получившейся фигуры, сгруппировав  (Control-G) и поместив две фигуры на расстоянии 2 пикселя от нижнего края текущей секции.  

adding the left wing to the left warp drive

Шаг 38

Добавьте правое крыло из копии  (Control-C > Control-F) только что созданной фигуры, а затем вертикально отразите (щелчок правой кнопкой > Трансформировать > Зеркальное отражение > По вертикали) и затем поместите на противоположной стороне складного двигателя.  

adding the right wing to the left warp drive

Шаг 39

Создайте прямоугольник 16 х 4 пикселей, который окрасим в цвет #636363  и поместим его под основную фигуру складного двигателя. 

adding the bottom rectangle to the left warp drive

Шаг 40

Добавьте хвостовую часть двигателя из квадрата 16 х 16 пикселей (#7F7F7F),  настроив Радиус его нижних углов на 6 пикселей. 

adding the rear end to the left warp drive

Шаг 41

Создайте четыре прямоугольника 2 х 16 пикселей (#636363) на расстоянии 2 пикселя друг от друга, сгруппируйте  (Control-G) и замаскируйте. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие части левого складного двигателя перед переходом к следующему шагу.  

adding the vertical lines to the rear end of the left warp drive

Шаг 42

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

adding the right warp drive

6. Как создать линии деформации

Заблокируйте предыдущий слой и перейдите к следующему (третьему). Давайте добавим маленькие линии деформации, создающие иллюзию движения. 

Шаг 1

Создайте линии деформации слева из пяти скруглённых прямоугольников шириной 2 пикселя (#FFFFFF) с Угловым радиусом в 1 пиксель и разными высотами, а затем расположите, как показано на образце, выделив и сгруппировав  (Control-G) в конце. 

creating the left warp lines

Шаг 2

Добавьте линии деформации справа при помощи копии (Control-C > Control-F) только что созданных линий, которые мы вертикально отразим (щелчок правой кнопкой > Трансформировать > Зеркальное отражение > По вертикали) и затем расположим на противоположной стороне корабля.  

adding the right warp lines

Шаг 3

Добавьте нижние линии деформации (#FFFFFF),  а затем выделите и сгруппируйте все линии при помощи комбинации клавиш Control-G.

adding the bottom warp lines

7. Как создать текстуру

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

Шаг 1

Разблокируйте первые два слоя и затем возьмите копию (Control-C) фона и тех областей корабля, которые выходят за пределы её поверхности, а затем вставьте (Control-F) на слой текстуры, окрасив в чёрный цвет (#000000).

creating the main shapes for the texture

Шаг 2

Выделите все фигуры, которые мы только что вставили, и объедините их в одну при помощи расширенной функции «Создать составной контур» на панели Обработки контуров. 

turning the texture shapes into a compound shape

Шаг 3

Выделите получившийся составной контур и превратите его в текстуру, перейдя в Эффект > Эффекты Photoshop > Текстура > Зерно и настроив Интенсивность на 58, а Тип зерна на Брызги.

texture settings

Шаг 4

Установите Режим наложения получившейся текстуры на Мягкий свет, снизив её Непрозрачность до 20%. 

adjusting the blending mode

Живите долго и процветайте!

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

final result preview

Автор: Andrei Stefan

Проголосуйте:

Аватар
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
neon brushes preview 1

Кисти — Neon

sozdaem tekst iz pozdravitelnyh svechek 1

Создаем текст из поздравительных свечек