в

Как создать значок космической обсерватории в Adobe Illustrator

Final product image

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

1. Настраиваем новый документ

Как обычно,в первую очередь мы создадим новый пользовательский документ (Файл > Новый или Control-N), применив следующие параметры: Advertisement

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

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

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

Подсказка: большинство обозначенных настроек можно запустить, установив Профиль документа на Веб; вручную нужно будет выбрать только Размер.

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

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

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

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

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

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

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

3. Настраиваем слои

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

Шаг 1

Инструментом “Скруглённый прямоугольник” создайте фигуру 148 х 188 пикселей с Угловым радиусом 14 пикселей, окрасьте её в цвет #32323a и поместите в центр Монтажной области при помощи панели Выравнивания

creating and aligning the badges main shape

Подсказка: при выравнивании всегда устанавливайте функцию Выравнивания на Выравнивание по монтажной области, иначе выделенные объекты останутся на своих местах.Advertisement

Шаг 2

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

adjusting the bottom corners of the badges main shape

Подсказка: если вы не можете по отдельности изменить углы, то, скорее всего, активирована функция Link Corner Radius Values. Это легко можно исправить, нажав на иконку с цепью, после чего вы сможете изменить каждый угол, не беспокоясь о том, что одинаковое значение будет применено ко всем углам. 

Шаг 3

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

Сначала выделите фигуру, затем перейдите в Объект > Контур > Создать параллельный контур и введите 8 пикселей в первое поле, оставив остальные по умолчанию, и нажмите ОК.

creating the outline for the badges main shape using the offset path method

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

Шаг 4

Т.к. нужно, чтобы контур выделялся на фоне фигуры заливки, мы изменим его цвет на более тёмный (#1f1e23).

changing the color of the badges outline

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

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

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

4. Создаём космическую обсерваторию

Начнём создавать первую часть значка с космической обсерватории, что будет достаточно просто.Advertisement

Шаг 1

Инструментом “Прямоугольник” (М) создайте фигуру 84 х 26 пикселей, окрасьте её в цвет #68514c и поместите в центре Монтажной области, выровняв по боковой стороне основной фигуры заливки значка.

creating and positioning the main shape for the observatorys base

Шаг 2

Выделите только что созданную фигуру и создайте для неё контур 8 пикселей (#1f1e23) при помощи метода Параллельного контура (выделить > Объект > Контур > Параллельный контур > 8 пикселей).

adding an outline to the observatorys base

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

example of using a precise workflow

Шаг 3

Когда контур будет на месте, начните добавлять детали на основании обсерватории, создав прямоугольник 84 х 4 пикселей, который окрасим в цвет #1f1e23 и выровняем по верхней стороне, снизив Непрозрачность до 40%, чтобы он стал тенью.

adding a shadow to the top section of the observatorys base

Шаг 4

Далее добавьте горизонтальный разделитель 84 х 4 пикселей, окрасьте его в цвет #1f1e23, и поместите под тенью, добавленной в предыдущем шаге. Advertisement

adding the first horizontal divider to the observatorys base

Шаг 5

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

adding the secondary horizontal divider to the observatorys base

Шаг 6

Создайте ещё один белый прямоугольник 84 х 4 пикселей (#FFFFFF), расположите его за более толстым горизонтальным разделителем, установив его Режим наложения на Перекрытие и снизив Непрозрачность до 40%. 

creating and adding the first highlight onto the observatorys base

Шаг 7

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

adding the set of vertical dividers to the observatorys base

Подсказка: вы можете взять под полный контроль фигуры и их соотношения, переключившись в режим Предпросмотра пикселей (Alt-Control-Y или Вид > Предпросмотр пикселей, что позволит вам зафиксировать и двигать каждую фигуру, взяв лежащую ниже пиксельную сетку за систему отсчёта.

example of using the pixel preview mode

Шаг 8

Инструментом “Прямоугольник” (М) добавьте пару вертикальных бликов на основании обсерватории, установив их цвет на белый (#FFFFFF), Режим наложения – на Перекрытие и Непрозрачность – на 40%.

adding some vertical highlights to the observatorys base

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

Шаг 9

Инструментом “Прямоугольник” (М) создайте фигуру 92 х 6 пикселей, окрасьте её в цвет #ced0d8 и создайте контур толщиной 8 пикселей (#1f1e23). Расположите две фигуры ближе к верхней части основы обсерватории, сделав так, чтобы два контура пересекались.

creating the main shapes for the observatorys second segment

Шаг 10

Добавьте прямоугольник 92 х 2 пикселей (#FFFFFF) ближе к верхней части серой фигуры, установив его Режим наложения на Перекрытие и снизив Непрозрачность до 60%. Затем добавьте два вертикальных блика за ним, применив те же значения прозрачности, выровняйте их по правому краю тонкого блика, добавленного на коричневый сегмент. 

adding some highlights to the observatorys grey section

Шаг 11

Далее добавьте горизонтальный разделитель 92 х 2 пикселей (#1f1e23) на серую фигуру, расположив его ближе к центру. 

adding the horizontal divider to the observatorys grey section

Шаг 12

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

adding the horizontal lines to the grey section of the observatory

Когда будет готово, выделите и сгруппируйте элементы текущей части обсерватории, нажав Control-G.

Шаг 13

Создайте прямоугольник 84 х 4 пикселей, окрасьте его в цвет #706f7a, создайте контур толщиной 8 пикселей (#1f1e23) и расположите обе фигуры ближе к верхней части серой фигуры, сделав так, чтобы их контуры пересекались.

adding the main shapes for the third section of the observatory

Шаг 14

Инструментом “Прямоугольник” (М) создайте фигуру 84 х 2 пикселей (#1f1e23), выровняйте её по центру верхней стороны тёмной фигуры заливки и превратите в тень, снизив Непрозрачность до 40%.

adding a shadow to the third section of the observatory

Шаг 15

Придайте этой части немного объёма, добавив прямоугольник 16 х 2 пикселей (#1f1e23) в центре, расположив его за только что созданной тенью.

adding some depth to the third section of the observatory

Не забудьте выделить и сгруппировать элементы частей, нажав Control-G.

Шаг 16

Инструментом “Эллипс” (L) создайте круг 92 х 92 пикселей (#ced0d8), выделите и удалите его нижнюю опорную точку Инструментом “Прямое выделение” (А), а затем создайте контур толщиной 8 пикселей (#1f1e23), расположив две фигуры ближе к верхней части обсерватории. 

creating the dome for the observatory

Шаг 17

Создайте копию фигуры заливки купола (Control-C > Control-F) (1), а затем добавьте круг 84 х 84 пикселей (отмечено красным), при помощи которого мы сделаем вырез, войдя в режим Вычитания передней фигуры на панели Обработки контуров (2). Измените цвет получившейся фигуры на белый (#FFFFFF) и превратите её в блик, установив Режим наложения на Перекрытие, снизив Непрозрачность до 60% (3). 

creating the highlight for the observatorys dome

Шаг 18

Инструментом “Прямоугольник” (М) создайте горизонтальную разделительную линию 108 х 2 пикселей (#1f1e23) и расположите её ближе к нижней части купола, оставив пустой промежуток в 2 пикселя между ним и большим контуром. 

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

adding the horizontal divider to the observatorys dome

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

Шаг 19

Добавьте прямоугольник 12 х 54 пикселей (#1f1e23) в центре купола, который будет внутренней тёмной частью, где находятся линзы и механизмы. Выровняйте фигуру по нижней стороне объекта, находящегося позади, вырежьте и вставьте (Control-X > Control-F) внутри Обтравочной маски, созданной для горизонтального разделителя. 

adding the inner darker section of the dome

Шаг 20

Далее начните работать над арочными балками, создав скруглённый прямоугольник 8 х 50 пикселей (#706f7a) с Угловым радиусом 2 пикселя, удалите округлость нижних углов и создайте контур 8 пикселей (#1f1e23) при помощи метода Параллельного контура, расположив две фигуры ближе к левой стороне фигуры, созданной в предыдущем шаге. 

adding the main shapes for the left arch girder

Шаг 21

Добавьте пару бликов (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 20%) и тени (цвет#1f1e23Непрозрачность: 40%) на балке при помощи базовых прямоугольников, убедившись, что они не пересекаются. 

adding highlights and shadows to the left arch girder

Шаг 22

Завершите создание арочной балки, добавив скруглённый прямоугольник 12 х 4 пикселей (#1f1e23) с Угловым радиусом 2 пикселя на левой стороне, перекрыв контур, а затем поместите его над горизонтальным разделителем на расстоянии 2 пикселя от него.

adding the final segment to the left arch girder

Когда будет готово, выделите и сгруппируйте все балочные элементы, нажав Control-G.

Шаг 23

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

adding the second arch girder to the right side of the dome

Шаг 24

Инструментом “Эллипс” (L) создайте круг 14 х 14 пикселей, окрасьте его в белый цвет (#FFFFFF) и поместите ближе к центру купола на расстоянии 12 пикселей от нижней стороны.

Превратите фигуру в линзу, установив её Режим наложения на Перекрытие, снизив Непрозрачность до 80%.

creating the main shape for the lens

Шаг 25

Добавьте несколько деталей на линзе, добавив кольцевидный блик (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 20%), отражение верхней половины (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 60%) и два круга 2 х 2 пикселей для маленьких отражений (цвет: белый; Режим наложения: Перекрытие; Непрозрачность: 60%, 20%). 

adding details to the lens

Не забудьте выделить и сгруппировать все фигуры, нажав Control-G.

Шаг 26

Завершите создание купола, добавив два прямоугольника 4 х 54 пикселей (#1f1e23) на каждой балке, снизив их Непрозрачность до 20%, т.к. они будут тенями. 

Когда будет готово, выделите все элементы купола и сгруппируйте их (Control-G).

adding final touches to the dome

Шаг 27

Инструментом “Скруглённый прямоугольник” создайте фигуру 12 х 22 пикселей (#ced0d8) с Угловым радиусом 6 пикселей, кольцевой блик 2 пикселя (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 60%) и контур толщиной 8 пикселей (#1f1e23), а затем сгруппируйте (Control-G) и поместите фигуры ближе к нижней части обсерватории, оставив промежуток 2 пикселя между ними и горизонтальным разделителем. 

adding the final piece to the observatory

На этом этапе можем выделить все отдельные части обсерватории и сгруппировать их, нажав Control-G

Шаг 28

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

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

creating a clipping mask to hide the lower section of the observatory

Как видите, обсерватория сейчас идеально замаскирована, и это значит, что мы можем начать работать над фоном и оживить наш значок.

observatory masked using clipping mask

5. Создаём горный ландшафт

Первым элементом фона будет горный ландшафт, который придаст иллюстрации объёма, что нужно на данном этапе. 

Шаг 1

Инструментом “Перо” (Р) нарисуйте две горные вершины, взяв цвет заливки #9b9ea8 и использовав обсерваторию как основную точку привязки. Т.к. на этом этапе процесса больше свободы, вы можете проявить креативность и создать что-то своё. 

creating the main shape for the mountain landscape

Шаг 2

Когда будет готово, создайте контур 8 пикселей (#1f1e23), сгруппируйте две фигуры (Control-G), вырежьте их и вставьте (Control-X > Control-F) внутри Обтравочной маски обсерватории, отправив их на задний план (щелчок правой кнопкой > Монтаж > На задний план).

adding an outline to the mountain landscape

Подсказка: вы легко можете войти в Обтравочную маску, дважды кликнув на объектах, являющихся её частью, либо кликнув правой кнопкой мыши и выбрав “Изолировать выбранную обтравочную маску”.

Шаг 3

Изолируйте горный ландшафт и затем Инструментом “Перо” (Р) начните добавлять свободные линии с каждой стороны обсерватории, взяв цвет #1f1e23 для тёмных частей и #9b9ea8 – для более светлых перекрывающих частей.

adding rough lines to the mountain landscape

Шаг 4

Когда будет готово, добавьте пару бликов (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 40), расположив их за линиями и сегментами, созданными только что.

adding finishing touches to the mountain landscape

Подсказка: вы можете легко выйти из Режима изоляции, когда закончите работать над определённой частью иллюстрации, нажав Escape или кликнув правой кнопкой и выбрав “Выйти из режима изоляции”.

6. Создаём фон

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

Шаг 1

Добавьте круговой внутренний блик на значке, выделив фигуру заливки и создав её копию (Control-C > Control-F).

Затем примените значение параллельности -4 пикселя для того, чтобы вырезать фигуру при помощи функции Вычитания передней фигуры на панели Обработки контуров.

Когда получится нужная фигура, нам нужно изменить её прозрачность, установив белый цвет (#FFFFFF) и Режим наложения на Перекрытие, снизив Непрозрачность до 80%, а затем сгруппировать и отправить на задний план вместе со значком.

adding the main highlight to the badge

Шаг 2

При помощи пяти концентрических прямоугольников с разными значениями ширины создайте световые лучи, изменив их опорные точки и добавив новые, пока не получатся диагональные фигуры. Затем установите их цвет на белый (#FFFFFF) и измените их прозрачность, установив Режим наложения на Мягкий свет и Непрозрачность – на 10%.

creating and positioning the light beams onto the badge

Шаг 3

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

Для этого выделите основные фигуры, из которых состоят эти элементы, и примените к ним Параллельный контур 8 пикселей, который мы затем вырежем (Control-X) и вставим (Control-F) внутрь группы значка.

creating the main shapes for the badges inner shadow using offset paths

Шаг 4

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

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

using a clipping mask to mask the inner badge shadow

Шаг 5

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

lowering the opacity of the badges inner shadow

Шаг 6

Последнее, что нам нужно сделать, – это добавить маленькие звёзды, поэтому создайте интересный узор, взяв цвет заливки #b2a45f, и когда будет готово, выйдите из группы значка, затем выделите все элементы иллюстрации и сгруппируйте их, нажав Control-G.

adding the star pattern to the badge

Готово

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

Надеюсь, что вы поняли и следовали каждому шагу и, самое главное, научились чему-то новому. 

illustration finished

Автор: Andrei Stefan

Добавить комментарий

Ваш адрес email не будет опубликован.

63e18737 f9f6 4f59 9ecd 70adaf6e9f32

Макет визитной карточки

kak sozdat fon s dlinnoj prokrutkoj dlya sajta

Как создать фон с длинной прокруткой для сайта