Редактор
Если вы любите космос как и мы, присоединяйтесь, т.к. далее вы увидите, как легко создать значок космической обсерватории при помощи самых базовых фигур Illustrator и пары визуальных методов обработки.
1. Настраиваем новый документ
Как обычно,в первую очередь мы создадим новый пользовательский документ (Файл > Новый или Control-N), применив следующие параметры: Advertisement
- Количество монтажных областей: 1
- Ширина: 800 пикселей
- Высота: 600 пикселей
- Единицы измерения: пиксели
Во вкладке с Расширенными настройками:
- Цветовой режим: RGB
- Растровые эффекты: осветление (72 точек на дюйм)
- Выравнивать новые объекты по пиксельной сетке: отмечено
Подсказка: большинство обозначенных настроек можно запустить, установив Профиль документа на Веб; вручную нужно будет выбрать только Размер.
2. Настраиваем пользовательскую сетку
Как вы, вероятно, уже знаете, в Illustrator есть Сетка, при помощи которой можно устанавливать самые маленькие значения, чтобы создавать работы в точных пикселях. Таким образом,мы полностью возьмём под контроль наши фигуры, и наша иллюстрация будет очень чёткой.
Нужные нам настройки можно найти под подменю Редактировать > Установки >Направляющие и сетка и установить следующие параметры:
- Сетка через каждые: 1 пиксель
- Разделы: 1
Подсказка: вы можете узнать больше о пользовательских сетках, почитав это углубленное Advertisement
Когда настроите пользовательскую сетку, чтобы убедиться в чёткости наших фигур, нужно активировать функцию Привязки к сетке под меню Вид, которая трансформируется в Привязку к пикселям всякий раз при входе в режим Предпросмотра пикселей.
Т.к. мы собираемся создать иллюстрацию на основе точных пикселей, я очень рекомендую вам почитать моё , которое поможет вам расширить ваши технические навыки в короткий срок.
3. Настраиваем слои
В сравнении с некоторыми другими проектами, в этот раз мы будем использовать один слой, т.к. нам нужно сделать все наши фигуры сгруппированными, а не разделёнными по разным слоям.
Шаг 1
Инструментом “Скруглённый прямоугольник” создайте фигуру 148 х 188 пикселей с Угловым радиусом 14 пикселей, окрасьте её в цвет #32323a и поместите в центр Монтажной области при помощи панели Выравнивания.
Подсказка: при выравнивании всегда устанавливайте функцию Выравнивания на Выравнивание по монтажной области, иначе выделенные объекты останутся на своих местах.Advertisement
Шаг 2
Выделите созданную фигуру и используйте Панель трансформирования, чтобы по отдельности изменить округлости этих двух углов, увеличив их значения до 74 пикселей.
Подсказка: если вы не можете по отдельности изменить углы, то, скорее всего, активирована функция Link Corner Radius Values. Это легко можно исправить, нажав на иконку с цепью, после чего вы сможете изменить каждый угол, не беспокоясь о том, что одинаковое значение будет применено ко всем углам.
Шаг 3
Когда мы закончим изменять нижние углы основной фигуры, нужно создать контур при помощи метода Параллельного контура.
Сначала выделите фигуру, затем перейдите в Объект > Контур > Создать параллельный контур и введите 8 пикселей в первое поле, оставив остальные по умолчанию, и нажмите ОК.
Подсказка: если вы никогда раньше не пользовались параллельными контурами, но хотите узнать о них больше, я рекомендую почитать это Advertisement
Шаг 4
Т.к. нужно, чтобы контур выделялся на фоне фигуры заливки, мы изменим его цвет на более тёмный (#1f1e23).
На этом этапе есть основная фигура значка, но вместо того, чтобы продолжать работать над его внутренним фоном, мы перейдём к самой обсерватории и вернёмся для добавления мелких деталей, когда она будет готова.
Это потому, что нам нужно создать и разместить все остальные элементы по отношению к обсерватории.
Знаю, что мы могли бы начать с обсерватории, но я хотел показать вам, что творческий процесс не всегда прост и прямолинеен, как в руководствах.
4. Создаём космическую обсерваторию
Начнём создавать первую часть значка с космической обсерватории, что будет достаточно просто.Advertisement
Шаг 1
Инструментом “Прямоугольник” (М) создайте фигуру 84 х 26 пикселей, окрасьте её в цвет #68514c и поместите в центре Монтажной области, выровняв по боковой стороне основной фигуры заливки значка.
Шаг 2
Выделите только что созданную фигуру и создайте для неё контур 8 пикселей (#1f1e23) при помощи метода Параллельного контура (выделить > Объект > Контур > Параллельный контур > 8 пикселей).
Подсказка: как видите, мы намеренно выровняли коричневый отрезок по отношению к области заливки значка, чтобы их контуры пересекались, что позволит нам точно создать и расположить фигуры.
Шаг 3
Когда контур будет на месте, начните добавлять детали на основании обсерватории, создав прямоугольник 84 х 4 пикселей, который окрасим в цвет #1f1e23 и выровняем по верхней стороне, снизив Непрозрачность до 40%, чтобы он стал тенью.
Шаг 4
Далее добавьте горизонтальный разделитель 84 х 4 пикселей, окрасьте его в цвет #1f1e23, и поместите под тенью, добавленной в предыдущем шаге. Advertisement
Шаг 5
Добавьте другой разделитель 84 х 2 пикселей (#1f1e23) и поместите его на саму тень, выровняв новую фигуру по её центру.
Шаг 6
Создайте ещё один белый прямоугольник 84 х 4 пикселей (#FFFFFF), расположите его за более толстым горизонтальным разделителем, установив его Режим наложения на Перекрытие и снизив Непрозрачность до 40%.
Шаг 7
Далее создайте четырнадцать прямоугольников 2 х 18 пикселей (#1f1e23), расположенных на расстоянии 4 пикселя друг от друга, сгруппируйте их (Control-G) и расположите на нижней части основания обсерватории.
Подсказка: вы можете взять под полный контроль фигуры и их соотношения, переключившись в режим Предпросмотра пикселей (Alt-Control-Y или Вид > Предпросмотр пикселей, что позволит вам зафиксировать и двигать каждую фигуру, взяв лежащую ниже пиксельную сетку за систему отсчёта.
Шаг 8
Инструментом “Прямоугольник” (М) добавьте пару вертикальных бликов на основании обсерватории, установив их цвет на белый (#FFFFFF), Режим наложения – на Перекрытие и Непрозрачность – на 40%.
Когда будет готово, выделите все фигуры, из которых состоит основа обсерватории, и сгруппируйте их, нажав Control-G, чтобы можно было легко выделить и передвинуть их при необходимости.
Шаг 9
Инструментом “Прямоугольник” (М) создайте фигуру 92 х 6 пикселей, окрасьте её в цвет #ced0d8 и создайте контур толщиной 8 пикселей (#1f1e23). Расположите две фигуры ближе к верхней части основы обсерватории, сделав так, чтобы два контура пересекались.
Шаг 10
Добавьте прямоугольник 92 х 2 пикселей (#FFFFFF) ближе к верхней части серой фигуры, установив его Режим наложения на Перекрытие и снизив Непрозрачность до 60%. Затем добавьте два вертикальных блика за ним, применив те же значения прозрачности, выровняйте их по правому краю тонкого блика, добавленного на коричневый сегмент.
Шаг 11
Далее добавьте горизонтальный разделитель 92 х 2 пикселей (#1f1e23) на серую фигуру, расположив его ближе к центру.
Шаг 12
Завершите создание части обсерватории, добавив шесть скруглённых прямоугольника 112 х 2 пикселей (#1f1e23) с Угловым радиусом 1 пиксель, расположенных на расстоянии 2 пикселя друг от друга, сгруппируйте (Control-G) и разместите их над серой фигурой.
Когда будет готово, выделите и сгруппируйте элементы текущей части обсерватории, нажав Control-G.
Шаг 13
Создайте прямоугольник 84 х 4 пикселей, окрасьте его в цвет #706f7a, создайте контур толщиной 8 пикселей (#1f1e23) и расположите обе фигуры ближе к верхней части серой фигуры, сделав так, чтобы их контуры пересекались.
Шаг 14
Инструментом “Прямоугольник” (М) создайте фигуру 84 х 2 пикселей (#1f1e23), выровняйте её по центру верхней стороны тёмной фигуры заливки и превратите в тень, снизив Непрозрачность до 40%.
Шаг 15
Придайте этой части немного объёма, добавив прямоугольник 16 х 2 пикселей (#1f1e23) в центре, расположив его за только что созданной тенью.
Не забудьте выделить и сгруппировать элементы частей, нажав Control-G.
Шаг 16
Инструментом “Эллипс” (L) создайте круг 92 х 92 пикселей (#ced0d8), выделите и удалите его нижнюю опорную точку Инструментом “Прямое выделение” (А), а затем создайте контур толщиной 8 пикселей (#1f1e23), расположив две фигуры ближе к верхней части обсерватории.
Шаг 17
Создайте копию фигуры заливки купола (Control-C > Control-F) (1), а затем добавьте круг 84 х 84 пикселей (отмечено красным), при помощи которого мы сделаем вырез, войдя в режим Вычитания передней фигуры на панели Обработки контуров (2). Измените цвет получившейся фигуры на белый (#FFFFFF) и превратите её в блик, установив Режим наложения на Перекрытие, снизив Непрозрачность до 60% (3).
Шаг 18
Инструментом “Прямоугольник” (М) создайте горизонтальную разделительную линию 108 х 2 пикселей (#1f1e23) и расположите её ближе к нижней части купола, оставив пустой промежуток в 2 пикселя между ним и большим контуром.
Т.к. боковые части разделительной линии выходят за пределы поверхности контура купола, нам нужно создать копию синеватой фигуры заливки (Control-C > Control-F) и использовать её как Обтравочную маску (щелчок правой кнопкой > Создать обтравочную маску).
Подсказка: если вы никогда раньше не использовали Обтравочные маски, почитайте эту статью о
Шаг 19
Добавьте прямоугольник 12 х 54 пикселей (#1f1e23) в центре купола, который будет внутренней тёмной частью, где находятся линзы и механизмы. Выровняйте фигуру по нижней стороне объекта, находящегося позади, вырежьте и вставьте (Control-X > Control-F) внутри Обтравочной маски, созданной для горизонтального разделителя.
Шаг 20
Далее начните работать над арочными балками, создав скруглённый прямоугольник 8 х 50 пикселей (#706f7a) с Угловым радиусом 2 пикселя, удалите округлость нижних углов и создайте контур 8 пикселей (#1f1e23) при помощи метода Параллельного контура, расположив две фигуры ближе к левой стороне фигуры, созданной в предыдущем шаге.
Шаг 21
Добавьте пару бликов (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 20%) и тени (цвет: #1f1e23; Непрозрачность: 40%) на балке при помощи базовых прямоугольников, убедившись, что они не пересекаются.
Шаг 22
Завершите создание арочной балки, добавив скруглённый прямоугольник 12 х 4 пикселей (#1f1e23) с Угловым радиусом 2 пикселя на левой стороне, перекрыв контур, а затем поместите его над горизонтальным разделителем на расстоянии 2 пикселя от него.
Когда будет готово, выделите и сгруппируйте все балочные элементы, нажав Control-G.
Шаг 23
Выделите только что созданную балку и создайте её копию (Control-C > Control-F), которую поместим ближе к правой стороне купола, а затем отразите её по вертикали (щелчок правой кнопкой > Трансформировать > Отразить > По вертикали).
Шаг 24
Инструментом “Эллипс” (L) создайте круг 14 х 14 пикселей, окрасьте его в белый цвет (#FFFFFF) и поместите ближе к центру купола на расстоянии 12 пикселей от нижней стороны.
Превратите фигуру в линзу, установив её Режим наложения на Перекрытие, снизив Непрозрачность до 80%.
Шаг 25
Добавьте несколько деталей на линзе, добавив кольцевидный блик (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 20%), отражение верхней половины (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 60%) и два круга 2 х 2 пикселей для маленьких отражений (цвет: белый; Режим наложения: Перекрытие; Непрозрачность: 60%, 20%).
Не забудьте выделить и сгруппировать все фигуры, нажав Control-G.
Шаг 26
Завершите создание купола, добавив два прямоугольника 4 х 54 пикселей (#1f1e23) на каждой балке, снизив их Непрозрачность до 20%, т.к. они будут тенями.
Когда будет готово, выделите все элементы купола и сгруппируйте их (Control-G).
Шаг 27
Инструментом “Скруглённый прямоугольник” создайте фигуру 12 х 22 пикселей (#ced0d8) с Угловым радиусом 6 пикселей, кольцевой блик 2 пикселя (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 60%) и контур толщиной 8 пикселей (#1f1e23), а затем сгруппируйте (Control-G) и поместите фигуры ближе к нижней части обсерватории, оставив промежуток 2 пикселя между ними и горизонтальным разделителем.
На этом этапе можем выделить все отдельные части обсерватории и сгруппировать их, нажав Control-G.
Шаг 28
Теперь, когда мы закончили работать над обсерваторией, нам нужно замаскировать её нижнюю часть таким образом, чтобы она совпадала с изгибом значка.
Для этого выделите фигуру заливки значка, создайте и вставьте его копию (Control-C > Control-F) на всём остальном. Затем выделите копию и обсерваторию, щёлкните правой кнопкой > Создать обтравочную маску.
Как видите, обсерватория сейчас идеально замаскирована, и это значит, что мы можем начать работать над фоном и оживить наш значок.
5. Создаём горный ландшафт
Первым элементом фона будет горный ландшафт, который придаст иллюстрации объёма, что нужно на данном этапе.
Шаг 1
Инструментом “Перо” (Р) нарисуйте две горные вершины, взяв цвет заливки #9b9ea8 и использовав обсерваторию как основную точку привязки. Т.к. на этом этапе процесса больше свободы, вы можете проявить креативность и создать что-то своё.
Шаг 2
Когда будет готово, создайте контур 8 пикселей (#1f1e23), сгруппируйте две фигуры (Control-G), вырежьте их и вставьте (Control-X > Control-F) внутри Обтравочной маски обсерватории, отправив их на задний план (щелчок правой кнопкой > Монтаж > На задний план).
Подсказка: вы легко можете войти в Обтравочную маску, дважды кликнув на объектах, являющихся её частью, либо кликнув правой кнопкой мыши и выбрав “Изолировать выбранную обтравочную маску”.
Шаг 3
Изолируйте горный ландшафт и затем Инструментом “Перо” (Р) начните добавлять свободные линии с каждой стороны обсерватории, взяв цвет #1f1e23 для тёмных частей и #9b9ea8 – для более светлых перекрывающих частей.
Шаг 4
Когда будет готово, добавьте пару бликов (цвет: белый; Режим наложения: перекрытие; Непрозрачность: 40), расположив их за линиями и сегментами, созданными только что.
Подсказка: вы можете легко выйти из Режима изоляции, когда закончите работать над определённой частью иллюстрации, нажав Escape или кликнув правой кнопкой и выбрав “Выйти из режима изоляции”.
6. Создаём фон
Когда обсерватория и горный ландшафт будут готовы, можем перейти к фону и начать добавлять мелкие детали.
Шаг 1
Добавьте круговой внутренний блик на значке, выделив фигуру заливки и создав её копию (Control-C > Control-F).
Затем примените значение параллельности -4 пикселя для того, чтобы вырезать фигуру при помощи функции Вычитания передней фигуры на панели Обработки контуров.
Когда получится нужная фигура, нам нужно изменить её прозрачность, установив белый цвет (#FFFFFF) и Режим наложения на Перекрытие, снизив Непрозрачность до 80%, а затем сгруппировать и отправить на задний план вместе со значком.
Шаг 2
При помощи пяти концентрических прямоугольников с разными значениями ширины создайте световые лучи, изменив их опорные точки и добавив новые, пока не получатся диагональные фигуры. Затем установите их цвет на белый (#FFFFFF) и измените их прозрачность, установив Режим наложения на Мягкий свет и Непрозрачность – на 10%.
Шаг 3
Т.к. мы добавили световые лучи, можем создать перекрывающие тени от обсерватории и гор.
Для этого выделите основные фигуры, из которых состоят эти элементы, и примените к ним Параллельный контур 8 пикселей, который мы затем вырежем (Control-X) и вставим (Control-F) внутрь группы значка.
Шаг 4
Т.к. это именно то, что нам нужно, замаскируйте фигуры при помощи внутренней части кольцевидного блика.
Для этого создайте копию блика, вставьте его перед тенью и кликните правой кнопкой мыши > Отменить составной контур, затем выделите и используйте центральную фигуру как Обтравочную маску для тени, удалив оставшуюся фигуру.
Шаг 5
Теперь нам нужно только создать Составной контур, выделив тень и перейдя в подменю Обработки контуров, где нужно кликнуть на “Создать составной контур“, что позволит нам снизить Непрозрачность фигур, из которых состоит наша тень, до 40% и не даст перекрывающим областям нарушить однородность прозрачности.
Шаг 6
Последнее, что нам нужно сделать, – это добавить маленькие звёзды, поэтому создайте интересный узор, взяв цвет заливки #b2a45f, и когда будет готово, выйдите из группы значка, затем выделите все элементы иллюстрации и сгруппируйте их, нажав Control-G.
Готово
На это потребовалось время, но, вооружившись терпением, нам удалось создать этот чудесный значок, который можно использовать в любых будущих проектах.
Надеюсь, что вы поняли и следовали каждому шагу и, самое главное, научились чему-то новому.
Автор:
