7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Icon Design

Создаем набор иконок-марок, посвященных Нью-Йорку, в Adobe Illustrator

Scroll to top
Read Time: 13 mins

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

В этом уроке мы ненадолго станем архитекторами (надев соответствующие шляпы) и "построим" миниатюрные версии самых знаменитых зданий Нью-Йорка. Использовать мы будем базовые фигуры и инструменты.

Надеюсь, вы уже пополнили свою кружку с кофе? Тогда начнем!

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

1. Задаем параметры документа

Думаю, вы уже запустили Illustrator. Если нет, то сделайте это и создайте там новый документ (File> New, или при помощи сочетания Ctrl+N), с показанными ниже настройками:

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

А также в разделе Advanced:

  • Цветовой режим: RGB
  • Разрешение растровых эффектов: Screen (72ppi)
  • Режим отображения: Default
setting up a new documentsetting up a new documentsetting up a new document

Примечание. Вы могли заметить отсутствие пункта Align New Objects to Pixel Grid. Я работаю в версии CC 2017, где были сделаны большие изменения в алгоритмах выравнивания по базовой пиксельной сетке.

2. Настраиваем сетку

Так как мы будем создавать иконки в технике "pixel perfect", то нам необходимо задать определенные параметры сетки. Особенно это полезно в более старых версиях программы, нежели указанная выше.

Шаг 1

Откройте параметры сетки командой Edit> Preferences> Guides & Grid. Там необходимо указать следующие значения:

  • Gridline every: 1 пиксель
  • Subdivisions: 1

Примечание. Узнать больше о работе сетки в Illustrator можно в подробном обзоре.

Шаг 2

Сетка настроена. Теперь нужно включить, собственно, привязку к ней. Сделать это можно командой Snap to Grid из меню View. Если изменить режим просмотра на Pixel Preview, то метода привязки поменяется на Snap to Pixel.

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

3. Создаем необходимые слои

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

Создайте в панели Layers четыре слоя. Именуйте их указанным ниже образом:

  • слой 1: референсная сетка (reference grids)
  • слой 2: Эмпайр-стейт-билдинг (empire state building)
  • слой 3: здание Крайслера (chrysler building)
  • слой 4: Башня Свободы (ВТЦ 1; world trade center building)
setting up the layerssetting up the layerssetting up the layers

4. Создаем референсную сетку

Референсная сетка (или базовая сетка) определяет размеры как самой будущей иконки, так и основных ее элементов. Благодаря ей все иконки, построенные по одной сетке, имеют "четкий строй", то есть выглядят согласованно.

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

Итак, в нашем случае иконки будут иметь размер 128 x 128 пикселей.

Шаг 1

Активируйте инструмент Rectangle Tool (M). На слое "reference grid" нарисуйте оранжевый (#F15A24) квадрат размерами 128x128 пикселей. Он поможет наглядно видеть размер иконок.

creating the reference grids main shapecreating the reference grids main shapecreating the reference grids main shape

Шаг 2

Добавьте квадрат меньшего размера (120x120 пикселей) с белым цветом заливки (#FFFFFF). Расположите его по центру большего квадрата. Таким образом мы получим отступ в 4 пикселя с каждой стороны.

creating the main shape for the active drawing areacreating the main shape for the active drawing areacreating the main shape for the active drawing area

Шаг 3

Сгруппируйте квадраты (Ctrl+G), убедитесь, что эта группа расположена по центру артборда и сделайте три ее копии на расстоянии 40 пикселей друг от друга.

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

creating and positioning all three reference gridscreating and positioning all three reference gridscreating and positioning all three reference grids

5. Создаем "марочную" рамку

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

Шаг 1

Внешнюю границу рамки определит прямоугольник размерами 100x116 пикселей с цветом заливки #45576B.

creating and positioning the main shape for the stamp frames outer sectioncreating and positioning the main shape for the stamp frames outer sectioncreating and positioning the main shape for the stamp frames outer section

Шаг 2

Нарисуйте круг размерами 8x8 пикселей и сделайте много его дубликатов, расположив их на расстоянии 8 пикселей друг от друга по всему периметру прямоугольника (на изображении ниже у них красный цвет). Затем выделите их все и при помощи команды "Minus Front" с панели Pathfinder вырежьте из прямоугольника.

adjusting the stamp frames main sectionadjusting the stamp frames main sectionadjusting the stamp frames main section

Шаг 3

Не снимая выделения с получившейся фигуры, нажмите сочетание Shift+X, чтобы поменять обводку и заливку местами. На одноименной панели (Stroke) увеличьте толщину обводки до 4 пикселей.

turning the stamp frame into an outlineturning the stamp frame into an outlineturning the stamp frame into an outline

Шаг 4

Добавьте прямоугольник с размерами 76x92 пикселя и цветом #EFA28B. Выровняйте его по центру "марочной" рамки.

creating and positioning the main shape for the stamp frames colored fill sectioncreating and positioning the main shape for the stamp frames colored fill sectioncreating and positioning the main shape for the stamp frames colored fill section

Шаг 5

Завершим рамку, добавив ее внутреннюю часть. Используем для этого тот же прием с обводкой. Сделайте копию цветного прямоугольника (Ctrl+C, Ctrl+F), измените цвет его заливки на #45576B и уже знакомым сочетанием Shift+X поменяйте заливку и обводку местами. Толщину задайте такую же, как и у внешней рамки - 4 пикселя. По окончании сгруппируйте (Ctrl+G) все фигуры, относящиеся к "марочной" рамке.

finishing off the stamp framefinishing off the stamp framefinishing off the stamp frame

Шаг 6

Сделайте два дубликата рамки (Ctrl+C, Ctrl+F). Разместите их по центру двух оставшихся красных прямоугольников. Не забудьте перенести каждую копию на свой слой (третий и четвертый). Цвет прямоугольника внутри второй рамки измените на #8CC1ED, внутри третьей - на #8CEAC8.

creating and positioning the remaining stamp frames onto the reference gridscreating and positioning the remaining stamp frames onto the reference gridscreating and positioning the remaining stamp frames onto the reference grids

6. Иконка Эмпайр-стейт-билдинг

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

Шаг 1

Наш Эмпайр-стейт-билдинг начинается с прямоугольника размерами 22x18 пикселей; без заливки и с обводкой толщиной 4 пикселя и цветом #45576B. Расположите его по нижней части рамки в 5 пикселях от левой ее границы.

creating and positioning the main shape for the empire state buildings bottom-left base sectioncreating and positioning the main shape for the empire state buildings bottom-left base sectioncreating and positioning the main shape for the empire state buildings bottom-left base section

Шаг 2

По центру фигуры из предыдущего шага "поставьте" прямоугольник размерами 14x20 пикселей. Параметры обводки те же: 4 пикселя толщина и цвет #45576B.

creating and positioning the second shape for the empire state buildings bottom-left base sectioncreating and positioning the second shape for the empire state buildings bottom-left base sectioncreating and positioning the second shape for the empire state buildings bottom-left base section

Шаг 3

Скопируйте (Ctrl+C, Ctrl+F) фигуры, созданные в первых двух шагах этого раздела. Дубликат разместите в 5 пикселях от правой границы рамки.

creating and positioning the main shapes for the empire state buildings bottom-right base sectioncreating and positioning the main shapes for the empire state buildings bottom-right base sectioncreating and positioning the main shapes for the empire state buildings bottom-right base section

Шаг 4

По горизонтальному центру рамки добавьте прямоугольник размерами 38x10 пикселей с обводкой толщиной 4 пикселя и цветом #45576B. Он должен "скреплять" группы из предыдущих шагов.

creating and positioning the main shape for the empire state buildings center sectioncreating and positioning the main shape for the empire state buildings center sectioncreating and positioning the main shape for the empire state buildings center section

Шаг 5

Нижняя линия этого прямоугольника нам не нужна. Удалим ее следующим образом: инструментом Add Anchor Point Tool (+) добавьте опорную точку на этом отрезке и затем просто нажмите Delete на клавиатуре.

adjusting the main shape of the empire state buildings center sectionadjusting the main shape of the empire state buildings center sectionadjusting the main shape of the empire state buildings center section

Шаг 6

Добавьте сверху получившейся в предыдущем шаге фигуры прямоугольник размерами 30x12 пикселей всё с теми же параметрами обводки: толщина 4 пикселя и цвет #45576B.

creating and positioning the second shape for the empire state buildings center sectioncreating and positioning the second shape for the empire state buildings center sectioncreating and positioning the second shape for the empire state buildings center section

Шаг 7

Верхнюю часть здания откроет прямоугольник размерами 22x6 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

creating and positioning the main shape for the empire state buildings upper sectioncreating and positioning the main shape for the empire state buildings upper sectioncreating and positioning the main shape for the empire state buildings upper section

Шаг 8

Продолжит прямоугольник размерами 6x12 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

creating and positioning the second shape for the empire state buildings upper sectioncreating and positioning the second shape for the empire state buildings upper sectioncreating and positioning the second shape for the empire state buildings upper section

Шаг 9

И завершит антенна - линия длиной 14 пикселей (обводка всё так же толщиной 4 пикселя и с цветом #45576B), - которую удобнее нарисовать инструментом Line Segment Tool (\) .

adding the antenna to the empire state buildings upper sectionadding the antenna to the empire state buildings upper sectionadding the antenna to the empire state buildings upper section

Шаг 10

Далее мы создадим отражение солнца в окнах. Но сделаем это раньше, чем перейдем к самим окнам. Добавьте в верхней части практически во всех секциях здания прямоугольники толщиной 2 пикселя и с белым цветом заливки (#FFFFFF).

creating and positioning the main shapes for the empire state buildings highlightscreating and positioning the main shapes for the empire state buildings highlightscreating and positioning the main shapes for the empire state buildings highlights

Шаг 11

Выделите все белые объекты, добавленные в прошлом шаге, и уменьшите их непрозрачность до 60%.

adjusting the empire state buildings highlightsadjusting the empire state buildings highlightsadjusting the empire state buildings highlights

Шаг 12

Теперь нарисуем окна. Здесь это будут линии с толщиной обводки 2 пикселя и цветом #45576B, расположенные на расстоянии 4 пикселей друг от друга. Последнее удобно сделать при помощи функции Distribute Objects с панели Align. Когда все линии будут нарисованы, сгруппируйте (Ctrl+G) их по соответствующим частям здания.

creating and positioning the main shapes for the empire state buildings windowscreating and positioning the main shapes for the empire state buildings windowscreating and positioning the main shapes for the empire state buildings windows

Шаг 13

Если у нас есть блики, то должны быть и тени. Добавьте их, нарисовав несколько прямоугольников с заливкой цветом #45576B в показанных ниже местах.

creating and positioning the main shapes for the empire state buildings shadowscreating and positioning the main shapes for the empire state buildings shadowscreating and positioning the main shapes for the empire state buildings shadows

Шаг 14

"Скосите" все тени, кроме самой верхней. Для этого выделите верхнюю внутреннюю по отношению к центру здания опорную точку и опустите ее на 1 пиксель для вторых сверху фигур и на 2 пикселя для лежащих ниже. Для смещения можно использовать кнопки со стрелками на клавиатуре или команду Object> Transform> Move (Shift+Ctrl+M), указывая там соответствующее расстояние.

adjusting the shape of the empire state buildings shadowsadjusting the shape of the empire state buildings shadowsadjusting the shape of the empire state buildings shadows

Шаг 15

Завершим иконку, нарисовав "небо". Обозначьте его некоторым количеством линий разной длины с толщиной обводки 2 пикселя и цветом #45576B. Когда вы закончите сей процесс, сгруппируйте все линии (Ctrl+G). В будущем вообще и в этом уроке в частности группируйте все однотипные объекты (как "небо" или окна в данном случае) при создании любых иллюстраций.

finishing off the empire state building iconfinishing off the empire state building iconfinishing off the empire state building icon

7. Иконка здания Крайслера

Переключитесь на следующий слой (третий снизу), а предыдущий заблокируйте.

Шаг 1

Здесь основанием нам послужит прямоугольник размером 48x16 пикселей и всё теми же параметрами обводки (толщина 4 пикселя и цвет #45576B). Расположите его внизу по центру цветной области.

creating and positioning the main shape for the chrysler buildings bottom sectioncreating and positioning the main shape for the chrysler buildings bottom sectioncreating and positioning the main shape for the chrysler buildings bottom section

Шаг 2

"Поставьте" не предыдущую фигуру прямоугольник размерами 32x10 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

creating and positioning the second shape for the chrysler buildings bottom sectioncreating and positioning the second shape for the chrysler buildings bottom sectioncreating and positioning the second shape for the chrysler buildings bottom section

Шаг 3

Завершите эту секцию добавлением прямоугольника размерами 16x20 пикселей (обводка толщиной 4 пикселя и с цветом #45576B). Выделите у него две верхние опорные точки и в разделе Rectangle Properties панели Transform задайте радиус скругления углов 8 пикселей.

creating and positioning the third shape for the chrysler buildings bottom sectioncreating and positioning the third shape for the chrysler buildings bottom sectioncreating and positioning the third shape for the chrysler buildings bottom section

Шаг 4

Выделите все три фигуры данной секции и объедините их в один объект, прибегнув к операции "Unite" с панели Pathfinder.

uniting the main shapes of the chrysler buildings bottom section into a single larger shapeuniting the main shapes of the chrysler buildings bottom section into a single larger shapeuniting the main shapes of the chrysler buildings bottom section into a single larger shape

Шаг 5

На первой "ступеньке" полученной в предыдущем шаге фигуры, с левой стороны, нарисуйте прямоугольник размерами 6x18 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

creating and positioning the main shape for the chrysler buildings left side sectioncreating and positioning the main shape for the chrysler buildings left side sectioncreating and positioning the main shape for the chrysler buildings left side section

Шаг 6

От левого верхнего угла прямоугольника, нарисованного в прошлом шаге, проведите линию длиной 4 пикселя (обводка толщиной 4 пикселя и с цветом #45576B). После этого сгруппируйте (Ctrl+G) линию вместе с прямоугольником.

adding the little ledge to the main shape of the chrysler buildings left side sectionadding the little ledge to the main shape of the chrysler buildings left side sectionadding the little ledge to the main shape of the chrysler buildings left side section

Шаг 7

Скопируйте (Ctrl+C, Ctrl+F) группу из предшествующего шага. Перенесите ее на правую часть здания и отразите по вертикали (Object> Transform> Reflect> вариант "Vertical").

creating and positioning the main shapes for the chrysler buildings right side sectioncreating and positioning the main shapes for the chrysler buildings right side sectioncreating and positioning the main shapes for the chrysler buildings right side section

Шаг 8

По центру здания добавьте прямоугольник размерами 32x28 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

creating and positioning the main shape for the chrysler buildings center sectioncreating and positioning the main shape for the chrysler buildings center sectioncreating and positioning the main shape for the chrysler buildings center section

Шаг 9

В секции Rectangle Properties панели Transform верхним опорным точкам этого прямоугольника задайте радиус скругления 16 пикселей.

adjusting the roundness of the main shape of the chrysler buildings center sectionadjusting the roundness of the main shape of the chrysler buildings center sectionadjusting the roundness of the main shape of the chrysler buildings center section

Шаг 10

При помощи инструмента Add Anchor Point Tool (+) добавьте опорную точку на нижнем отрезке данной фигуры и затем просто удалите ее, нажав Delete на клавиатуре.

opening up the bottom section of the chrysler buildings main center shapeopening up the bottom section of the chrysler buildings main center shapeopening up the bottom section of the chrysler buildings main center shape

Шаг 11

Добавьте прямоугольник размерами 24x14 пикселей (обводка толщиной 4 пикселя и с цветом #45576B). Верхней части задайте радиус скругления 12 пикселей, а нижнюю удалите уже знакомым образом. По окончании разместите полученную фигуру поверх предыдущей.

creating and positioning the second shape for the chrysler buildings center sectioncreating and positioning the second shape for the chrysler buildings center sectioncreating and positioning the second shape for the chrysler buildings center section

Шаг 12

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

creating and positioning the third shape onto the chrysler buildings center sectioncreating and positioning the third shape onto the chrysler buildings center sectioncreating and positioning the third shape onto the chrysler buildings center section

Шаг 13

Начинаем работать над верхней секцией здания. Ее открывает прямоугольник с размерами 8x6 пикселей (обводка толщиной 4 пикселя и с цветом #45576B), радиусом скругления верхней части 4 пикселя, удаленным низом и размещением выше предшествующей фигуры.

creating and positioning the fourth shape onto the chrysler buildings center sectioncreating and positioning the fourth shape onto the chrysler buildings center sectioncreating and positioning the fourth shape onto the chrysler buildings center section

Шаг 14

Последней частью здания станет овал с размерами 6x16 пикселей (обводка толщиной 4 пикселя и с цветом #45576B), у которого необходимо удалить нижнюю опорную точку, чтобы открыть фигуру. Расположите ее по центру артборда в 4 пикселях от верхнего края внутренней рамки. Если длины оставшейся половинки овала не хватает до нижележащей фигуры, то увеличьте ее при помощи инструмента Pen Tool (P).

creating and positioning the last shape for the chrysler buildings upper sectioncreating and positioning the last shape for the chrysler buildings upper sectioncreating and positioning the last shape for the chrysler buildings upper section

Шаг 15

Добавьте линию-антенну длиной 8 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

adding the antenna to the chrysler buildingadding the antenna to the chrysler buildingadding the antenna to the chrysler building

Шаг 16

Как и для предыдущего здания, добавьте белые (#FFFFFF) блики в окнах. Не забудьте уменьшить их непрозрачность до 60%. Блики для фигур арочного типа необходимо отправить на задний план, чтобы они перекрывались вышележащими фигурами. Сделать это можно кликнув правой кнопкой мыши и выбрав в появившемся контекстном меню пункт Arrange> Send Backward, или воспользовавшись сокращением Ctrl+[.

adding the highlights to the chrysler buildingadding the highlights to the chrysler buildingadding the highlights to the chrysler building

Шаг 17

Детализацию данной иконки мы начнем с добавления круга 2x2 пикселя (цвет заливки #45576B) в показанном ниже месте.

adding the circular detail to the second shape of the chrysler buildings upper sectionadding the circular detail to the second shape of the chrysler buildings upper sectionadding the circular detail to the second shape of the chrysler buildings upper section

Шаг 18

Теперь нарисуйте три овала размерами 2x4 пикселя (цвет заливки #45576B), разместив их как показано ниже, на расстоянии 1 пиксель друг от друга. Центральный должен располагаться на 1 пиксель выше двух других. Не забудьте сгруппировать фигуры (Ctrl+G).

adding the first set of decorative ellipses to the third shape of the chrysler buildings upper sectionadding the first set of decorative ellipses to the third shape of the chrysler buildings upper sectionadding the first set of decorative ellipses to the third shape of the chrysler buildings upper section

Шаг 19

Нарисуйте еще три овала размерами 2x4 пикселя (цвет заливки #45576B). Они должны идти с шагом в 2 пикселя, как показано ниже. Также не забудьте сгруппировать их (Ctrl+G).

adding the second set of decorative ellipses to the fourth shape of the chrysler buildings upper sectionadding the second set of decorative ellipses to the fourth shape of the chrysler buildings upper sectionadding the second set of decorative ellipses to the fourth shape of the chrysler buildings upper section

Шаг 20

Теперь добавьте несколько квадратов 2x2 пикселя (цвет заливки #45576B), которые будут изображать небольшие окна. По окончании процесса сгруппируйте их (Ctrl+G).

adding the little windows to the chrysler buildings arched sectionadding the little windows to the chrysler buildings arched sectionadding the little windows to the chrysler buildings arched section

Шаг 21

По центру нижней секции здания нарисуйте прямоугольник с размерами 6x41 пиксель (обводка толщиной 2 пикселя и с цветом #45576B) и радиусом скругления верхних углов 3 пикселя.

adding the middle rounded shape to the chrysler buildings bottom sectionadding the middle rounded shape to the chrysler buildings bottom sectionadding the middle rounded shape to the chrysler buildings bottom section

Шаг 22

Знакомым по первому зданию образом добавьте окна. Не забудьте, что у них обводка толщиной 2 пикселя, ее цвет #45576B и располагаются они на расстоянии 2 пикселей друг от друга. По окончании процесса рисования сгруппируйте (Ctrl+G) данные объекты.

creating and positioning the windows onto the chrysler buildingcreating and positioning the windows onto the chrysler buildingcreating and positioning the windows onto the chrysler building

Шаг 23

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

creating and positioning the main shapes for the chrysler buildings shadowscreating and positioning the main shapes for the chrysler buildings shadowscreating and positioning the main shapes for the chrysler buildings shadows

Шаг 24

Верхнюю и внутреннюю по отношению к центру здания опорную точку этих прямоугольников следует сместить на 2 пикселя вниз (Object> Transform> Move).

adjusting the shape of the chrysler buildings shadowsadjusting the shape of the chrysler buildings shadowsadjusting the shape of the chrysler buildings shadows

Шаг 25

Знакомым образом добавьте "небо". Напомню, что у этих линий толщина обводки составляет 2 пикселя (цвет #45576B) Не забудьте сгруппировать (Ctrl+G) данный набор объектов.

finishing off the chrysler building iconfinishing off the chrysler building iconfinishing off the chrysler building icon

8. Иконка Башни Свободы

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

Шаг 1

И первым объектом для этого здания станет прямоугольник размерами 36x56 пикселей (обводка толщиной 4 пикселя и с цветом #45576B), который необходимо "установить" на нижнюю грань внутренней рамки и расположить по ее центру.

creating and positioning the main shape for the world trade centers bodycreating and positioning the main shape for the world trade centers bodycreating and positioning the main shape for the world trade centers body

Шаг 2

Следующий объект - антенна: линия длиной 36 пикселей с толщиной обводки 4 пикселя и цветом #45576B. Она должна "стоять" на предыдущей фигуре, размещаясь по ее центру.

creating and positioning the main shape for the world trade centers antennacreating and positioning the main shape for the world trade centers antennacreating and positioning the main shape for the world trade centers antenna

Шаг 3

Теперь нарисуйте линию длиной 28 пикселей (толщина обводки 4 пикселя, цвет #45576B). Это будет нижняя часть платформы для антенны. Расположите ее по центру иллюстрации на 6 пикселей выше основной фигуры здания.

creating and positioning the bottom section of the world trade centers roof platformcreating and positioning the bottom section of the world trade centers roof platformcreating and positioning the bottom section of the world trade centers roof platform

Шаг 4

Добавьте опоры для платформы. Они представлены прямоугольниками 16x6 пикселей (обводка толщиной 4 пикселя и с цветом #45576B). Их расположение показано ниже.

creating and positioning the support legs for the world trade centers roof platformcreating and positioning the support legs for the world trade centers roof platformcreating and positioning the support legs for the world trade centers roof platform

Шаг 5

Нарисуйте верхнюю часть платформы. Данная фигура идентична нижнему прямоугольнику (28x8 пикселей, толщина обводки 4 пикселя, цвет #45576B), потому можно просто его продублировать. Расположите верхнюю часть на расстоянии 6 пикселей от нижней.

creating and positioning the upper section of the world trade centers roof platformcreating and positioning the upper section of the world trade centers roof platformcreating and positioning the upper section of the world trade centers roof platform

Шаг 6

Проведите между нижней и верхней часть 4 линии длиной 6 пикселей (толщина обводки 4 пикселя, цвет #45576B). Разместите эти линии на расстоянии 4 пикселей друг от друга (это удобно сделать при помощи опции Distribute с панели Align).

creating and positioning the center support legs for the world trade centers roof platformcreating and positioning the center support legs for the world trade centers roof platformcreating and positioning the center support legs for the world trade centers roof platform

Шаг 7

Пером (Pen Tool (P)) нарисуйте две диагональные линии, исходящие из центра антенны к верхней части платформы. Толщина обводки у этих линий 2 пикселя, цвет #45576B.

creating and positioning the diagonal support rods for the world trade centers roof platformcreating and positioning the diagonal support rods for the world trade centers roof platformcreating and positioning the diagonal support rods for the world trade centers roof platform

Шаг 8

Завершим верхнюю секцию здания, добавив над пересечением поддерживающих антенну оттяжек, линию длиной 8 пикселей с толщиной обводки 4 пикселя и цветом #45576B. После этого сгруппируйте (Ctrl+G) все фигуры данной секции.

finishing off the world trade centers roof platformfinishing off the world trade centers roof platformfinishing off the world trade centers roof platform

Шаг 9

Добавим блики для основной части здания. Нарисуйте внутри нее семь прямоугольников размерами 32x2 пикселя с заливкой белого цвета и непрозрачностью 60%. Расположите их с шагом 6 пикселей. По окончании данного процесса - сгруппируйте (Ctrl+G).

adding the main highlights to the world trade center buildings main bodyadding the main highlights to the world trade center buildings main bodyadding the main highlights to the world trade center buildings main body

Шаг 10

Теперь нарисуем окна. Их в данном случае будут представлять двенадцать линий длиной 20 пикселей, толщиной обводки 2 пикселя и цветом #45576B. Из нужно разместить на расстоянии 4 пикселей друг от друга. Сгруппируйте (Ctrl+G) все линии. Группу расположите в 4 пикселях от верхнего края основной фигуры здания.

adding the front section windows to the world trade center buildings main bodyadding the front section windows to the world trade center buildings main bodyadding the front section windows to the world trade center buildings main body

Шаг 11

Добавьте между окнами блики: прямоугольники с размерами 20x2 пикселя с заливкой белого цвета, непрозрачностью 60% и с промежутком в 6 пикселей один от другого. Таким образом блики будут располагаться не под каждым окном, а через один, начиная от верхней линии с обводкой. Не забудьте сгруппировать их (Ctrl+G). Затем также сгруппируйте (Ctrl+G) окна вместе с бликами.

adding the highlights to the front section of the world trade center buildings main bodyadding the highlights to the front section of the world trade center buildings main bodyadding the highlights to the front section of the world trade center buildings main body

Шаг 12

По бокам от окон добавьте два прямоугольника с размерами 20x56 пикселей (обводка толщиной 4 пикселя и с цветом #45576B).

creating and positioning the main shape for the world trade centers front section outlinecreating and positioning the main shape for the world trade centers front section outlinecreating and positioning the main shape for the world trade centers front section outline

Шаг 13

Выделите одну из верхних опорных точек прямоугольника, добавленного в предыдущем шаге. Командой Object> Tranform> Move сместите ее по горизонтали на +/- 8 пикселей к центру здания в зависимости от того левая эта точка или правая соответственно.

adjusting the main shape of the world trade centers front sectionadjusting the main shape of the world trade centers front sectionadjusting the main shape of the world trade centers front section

Шаг 14

Продублируйте (Ctrl+C, Ctrl+F) полученную в прошлом шаге фигуру. Не снимая с копии выделения, отправьте ее на задний план (Object> Arrange> Send Backward, Ctrl+[). Добавьте к выделению центральную секцию окон и бликов, после чего создайте обтравочную маску (Ctrl+7). 

masking the world trade center buildings front section highlights and windowsmasking the world trade center buildings front section highlights and windowsmasking the world trade center buildings front section highlights and windows

Шаг 15

Нарисуйте окна в для оставшейся части основной фигуры здания. Это вновь будут линии с обводкой толщиной 2 пикселя, цветом #45576B и промежутком между друг другом в 4 пикселя. Рисуйте их от внешней толстой границы внутрь; так будет легче. По окончании данного процесса сгруппируйте все секции здания (Ctrl+G).

adding the background windows to the world trade centers bodyadding the background windows to the world trade centers bodyadding the background windows to the world trade centers body

Шаг 16

Завершите иконку, нарисовав "небо" (линии с обводкой толщиной 2 пикселя и цветом #45576B). Не забудьте сгруппировать эти линии (Ctrl+G).

finishing off the world trade center building iconfinishing off the world trade center building iconfinishing off the world trade center building icon

Снимаем шляпы!

Отличная работа! Наш набор небольших иконок, посвященных знаменитым зданиям Нью-Йорка окончен.

Надеюсь вам понравился урок и вы узнали что-то новое в процессе его выполнения.

final project previewfinal project previewfinal project preview
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.