Как Создать Иконку для Почтового Ящика в Adobe Illustrator

() translation by (you can also view the original English article)

В этом уроке вы узнаете, как создать простую иконку для почтового ящика. Мы будем работать с базовыми элементами, использовать панель Обработки Контуров и Градиеты, чтобы создать стильную иконку в Adobe Illustrator.

Шаг 1

Откройте Иллюстратор и нажмите Control + N, чтобы создать новый документ. Введите 600 для высоты и ширины и нажмите кнопку Дополнительно (Advanced). Выберите RGB, установите для Растровых Эффектов Экранное разрешение (72 ppi), и убедитесь, что у вас убрана галочка для Выравнивать Новые Объекты по Сетке (Align New Objects to Pixel Grid), прежде чем нажать ОК.

Далее, вам понадобится сетка, через каждые 5 рх. Для этого зайдите в Редактирование > Установки > Направляющие и Сетка и введите 5 для Линия через Каждые и 1 для Внутренне деление на. Вы так же можете открыть панель Информации (Info) (Окно > Информация), что бы иметь возможность видеть размер и положение ваших объектов в режиме просмотра. Не забудьте установить единицы измерения на пиксели в окне Редактирование > Установки > Единицы Измерения > Основные. Все проделанные нами установки значительно ускорят процесс вашей работы.

Шаг 2

Используя инструмент Прямоугольник (М) (Rectangle Tool), нарисуйте фигуру размером 200 х 125 рх, и залейте ее линейным градиентом, как на картинке ниже, а потом зайдите в Эффект > Стилизация > Скругленные углы (Filter > Stylize > Round Corner). Введите радиус 10 рх, нажмите ОК, а потом зайдите в Объект > Разобрать (Object > Expand).

Шаг 3

Выберите заново фигуру нарисованную на предыдущем шаге и поставьте вперед ее копию (Control + C > Control + F). Используйте инструмент Прямоугольник (М), создайте фигуру размером 220 х 95 рх, залейте цветом R=119 G=154 B=99 и разместите ее, как показано на рисунке втором. Теперь продолжим работу с верхней стороной этого прямоугольника, для этого возьмите инструмент Прямое Выделение (А) (Direct Selection Tool). Выберите две опорные токи (которые обозначены на второй картинке) и зайдите в Объект > Контур > Усреднить (Alt + Control + J) (Object > Path > Average). Выберите вариант Оба (Both) и нажмите ОК. В результате этого ваш зеленый прямоугольник превратиться в треугольник. Выберите его копию, сделанную в начале шага, и нажмите кнопку Пересечение (Intersect) на панели Обработка Контуров (Pathfinder). В результате, ваша зеленая фигура, будет выглядеть, как на четвертой картинке.

Шаг 4

Отключите выравнивание по Сетке (Просмотр > Выравнивание по Сетке) и зайдите в Редактирование > Установки > Основные (Edit > Preferences > General) и убедитесь, что у вас для Перемещения Курсора (Keyboard Increment ) задано значение 1 рх. Выберите зеленую фигуру сделанную на предыдущем шаге и вставьте вперед две ее копии (Control + C > Control + F > Control + F). Перейдите в панель Слои (Layers), выберите нижнюю копию и переместите ее на 2 рх вверх, используя клавишу стрелки на клавиатуре. Заново выберите две копии созданные на этом шаге и нажмите кнопку Минус Верхний (Minus Front) на панели Обработка Контуров (Pahtfinder). Начните работать с получившейся фигурой, возьмите инструмент Перо- (-) (Delete Anchor Point Tool ) и удалите две опорные точки отмеченные стрелками на третьей картинке ниже. Залейте эту тонкую фигуру линейным градиентом, как на последней картинке, а затем уменьшите ее Непрозрачность (Opacity) до 15% и измените Режим Наложения (Blending Mode) на Умножение (Multiply). Желтый номер ("55") на рисунке для Градиента обозначает Непрозрачность в процентах.

Шаг 5

Выберите зеленую фигуру и зайдите в Объект > Контур > Создать Параллельный Контур (Object > Path > Offset Path). Введите -1рх для Смещения и нажмите ОК. Выберите получившуюся фигуру и поместите вперед ее копию (Control + C > Control + F). Выберите эту копию и сместите на 1 рх вверх используя стрелку на клавиатуре. Снова выберите обе фигуры, которые сделали на этом шаге и нажмите Минус Верхний на панели Обработка Контуров. Залейте получившийся объект линейным градиентом, как на следующей картинке. Помните, что желтый ноль на рисунке для Градиента обозначает Непрозрачность в процентах.

Шаг 6

Выберите скругленный прямоугольник полученный на Шаге 2 и поместите вперед две его копии (Control + C > Control + F > Control + F). Выберите верхнюю копию и подвиньте ее на 1 рх вверх. Снова выберите обе копии и нажмите кнопку Минус Верхний на панели Обработка Контуров. Выберите получившийся объект, поместите его вперед (Shift + Control + ]), залейте линейным градиентом, как показано на следующей картинке и измените Режим Наложения на Расс.Свет (Soft Light).

Шаг 7

Выберите зеленую фигуру и замените заливку на линейный градиент, как на следующей картинке. Белые цифры ("50") на рисунке для Градиента обозначают Положение узла в процентах.

Шаг 8

Включите Привязку к Сетке (Control-'). Выберите скругленный прямоугольник, полученный на шаге 2 и поместите вперед его копию (Control + C > Control + F). Используя Прямоугольник (М), создайте объект 220 х 80 рх, и залейте его цветом R=119 G=154 B=99 и поместите, как показано на втором рисунке. Начните работать с нижней частью зеленого прямоугольника и переключитесь на инструмент Прямое Выделение (А). Выберите две опорные токи (которые обозначены на второй картинке) и зайдите в Объект > Контур > Усреднить (Alt + Control + J) (Object > Path > Average). Выберите вариант Оба (Both) и нажмите ОК. Выберите получившийся треугольник с копией сделанной в начале шага и нажмите кнопку Пересечение (Intersect) на панели Обработка Контуров (Pathfinder). В результате, ваша зеленая фигура, будет выглядеть, как на четвертой картинке.

Шаг 9

Отключите выравнивание по Сетке (Просмотр > Выравнивание по Сетке). Выберите зеленую фигуру сделанную на предыдущем шаге и вставьте вперед две ее копии (Control + C > Control + F > Control + F). Выберите верхнюю копию и переместите ее на 2 рх вверх, используя клавишу стрелки на клавиатуре. Заново выберите две копии созданные на этом шаге и нажмите кнопку Минус Верхний (Minus Front) на панели Обработка Контуров (Pahtfinder).

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

Шаг 10

Заново выберите зеленую фигуру и поместите вперед две ее копии (Control + C > Control + F > Control + F). Выберите верхнюю копию и подвиньте ее на 1 рх вниз. Снова выберите обе копии и нажмите кнопку Минус Верхний на панели Обработка Контуров. Залейте получившийся объект линейным градиентом, как показано на третьей картинке, уменьшите его Непрозрачность до 50% и измените Режим Наложения на Расс.Свет.

Шаг 11

Снова выделите зеленую фигуру и поместите вперед ее копию (Control + C > Control + F). Выберите ее сместите на 1px вниз, а замет дублируйте (Control + C > Control + F). Выберите копию и сместите ее на 1 рх вниз. Снова выберите обе копии и нажмите кнопку Минус Верхний на панели Обработка Контуров. Залейте получившуюся фигуру линейным градиентом, как на следующем изображении.

Шаг 11

Выберите зеленую фигуру и поместите вперед две ее копии (Control + C > Control + F > Control + F). Перейдите в панель Слои, выберите нижнюю копию и сдвиньте ее на 1 рх вниз, используя стрелку клавиатуры. Снова выберите обе копии и нажмите кнопку Минус Верхний на панели Обработка Контуров. Начните работать с получившейся формой, возьмите инструмент Перо- (-) (Delete Anchor Point Tool ) и удалите две опорные точки отмеченные стрелками на третьей картинке ниже. Залейте получившийся объект линейным градиентом, как показано на следующей картинке, уменьшите его Непрозрачность до 10% и измените Режим Наложения на Умножение.

Шаг 13

Включите Привязку к Сетке (Control-'). Используя Прямоугольник (М), создайте фигуру 180 х 75 рх, залейте цветом R=173 G=149 B=116 и разместите ее, как на первой картинке. Сосредоточьтесь на нижней части этого коричневого прямоугольника и возьмите инструмент Прямое Выделение (А). Выберите две опорные точки (помеченные на первом рисунке) и зайдите в Объект > Контур > Усреднить (Alt + Control + J). Выберите вариант Оба (Both) и нажмите ОК. Перейдите в панель Слои, выберите этот коричневый треугольник, понизьте Непрозрачность до 15%, поместите его под зеленой фигурой и зайдите в Эффект > Размытие > Размытие по Гауссу ( Effect > Blur > Gaussian Blur). Введите радиус 4 рх и нажмите ОК.

Шаг 14

Заново выберите зеленую фигуру и замените однотонную заливку на линейный градиент, как показано на следующей картинке.

Шаг 15

Отключите Привязку к Сетке (Control-'). Заново выберите скругленный прямоугольник сделанный на шаге 2 и зайдите в Объект > Контур > Создать Параллельный Контур. Введите -1 рх для Смещения и нажмите ОК. Выберите получившуюся фигуру и поставьте вперед ее копию (Control + C > Control + F). Выберите эту копию и сдвиньте ее на 1 рх влево. Снова выберите обе копии и нажмите кнопку Минус Верхний на панели Обработка Контуров. Залейте получившийся объект линейным градиентом, как показано на следующей картинке.

Шаг 16

Заново выберите скругленный прямоугольник сделанный на шаге 2 и зайдите в Объект > Контур > Создать Параллельный Контур. Введите -1 рх для Смещения и нажмите ОК. Выберите получившуюся фигуру и поставьте вперед ее копию (Control + C > Control + F). Выберите эту копию и сдвиньте ее на 1 рх вправо. Снова выберите обе копии и нажмите кнопку Минус Верхний на панели Обработка Контуров. Залейте получившийся объект линейным градиентом, как показано на следующей картинке.

Шаг 17

Выберите скругленный прямоугольник, созданный на Шаге 2, откройте панель Оформление (Appearance), добавьте вторую заливку используя кнопку Добавить Новую Заливку (Add New Fill button ) (отмечена маленькой голубой стрелкой) и переместите ее вниз на панели. Продолжайте работать в панели Оформление, выберите новую заливку, добавьте линейный градиент, как показно на следующей картинке и зайдите в Эффект > Исказить и Трансформировать > Трансформировать (Effect > Distort & Transform > Transform). Введите данные показанные ниже и нажмет ОК.

Шаг 18

Заново выберите скругленный прямоугольник полученный на 2м шаге, и добавьте для него третью заливку и разместите ее внизу, в панели Оформление. Выберите ее и задайте цвет R=235 G=231 B=216, а затем зайдите в в Эффект > Исказить и Трансформировать > Трансформировать (Effect > Distort & Transform > Transform). Введите данные показанные ниже и нажмет ОК.

Шаг 19

Заново выберите скругленный прямоугольник полученный на 2м шаге, и добавьте для него две черные заливки и разместите их внизу, в панели Оформление. Выберите верхнюю черную заливку, уменьшите непрозрачность до 5%, а затем зайдите в Объект > Контур > Создать Параллельный Контур. Введите 1 рх для Смещения и нажмите ОК. Затем зайдите в Эффект > Исказить и Трансформировать > Трансформировать. Введите параметры как на рисунке ниже и нажмите ОК. Выберите нижнюю черную заливку, уменьшите непрозрачность до 5%, а затем зайдите в Объект > Контур > Создать Параллельный Контур. Введите 1 рх для Смещения и нажмите ОК.

Шаг 20

Включите Привязку к Сетке (Control-') и продолжите работу с верхним правым углом конверта. Возьмите инструмент Эллипс (L) (Ellipse Tool), создайте окружность размером 45 рх, залейте ее линейным градиентом, как на рисунке ниже, разместите как показано на первом рисунке и зайдите в Объект > Контур > Создать Параллельный Контур. Введите -1 рх для Смещения и нажмите ОК. Выберите получившуюся фигуру, поставьте вперед ее копию (Control + C > Control + F) и Отключите Привязку к Сетке (Control-'). Выберите копию и подвиньте ее на 1 рх вниз. Выберите обе кружка и нажмите кнопку Минус Верхний на панели Обработка Контуров. Залейте получившийся объект цветом R=255 G=104 B=109.

Шаг 21

Выберите окружность полученную на предыдущем шаге и зайдите в Эффект > Стилизация > Тень (Effect > Stylize > Drop Shadow). Введите данные из левого окна и нажмите Ок, а потом снова зайдите в Эффект > Стилизация > Тень. Введите параметры приведенные в правом окне и нажмите ОК. Убедившись, что ваша окружность выделена, продолжите работу в панели Оформление и добавьте обводку толщиной 1 рt. Сделайте чтобы обводка размещалась внутри контура и задайте цвет для нее R=135 G=30 B=45.

Шаг 22

Выберите инструмент Текст (Т) (Type Tool) и введите номер, как показано на следующей картинке. Используйте шрифт "American Purpose" размером 22 pt. Выберите наш маленький текст, и продолжите работу в панели Оформелние, где создайте две новых заливки используя кнопку Добавить Новую Заливку. Выберите новую заливку и сделайте ее белой, затем выберите нижнюю и задайте для нее линейный градиент, как на следующей картинке. Измените Режим Наложения на Перекрытие и зайдите в Эффекты > Контур > Создать Параллельный Контур (Effect > Path > Offset Path). Введите 1 рх для смещения, нажмите ОК и зайдите в Эффект > Стилизация > Тень. Введите параметры, как на следующей картинке и нажмите ОК.

Шаг 23

Для последних шагов, вам понадобится сетка, через каждые 1 рх. Для этого зайдите в Редактирование > Установки > Направляющие и Сетка и введите 1 для Линия через Каждые и для Внутренне деление на - 1. Если вам не нравится этот кружок, вы можете заменить его на ленточку. Продолжите работу, в правом углу вашего конверта и используйте инструмент Прямоугольник (М), создайте фигуру размером 50 х 10 рх, залейте ее линейным градиентом, как показано ниже. Разместите ее как показано на следующей картинке и зайдите в Эффект > Стилизация > Скругленные углы (Filter > Stylize > Round Corner). Введите 5 рх для радиуса и нажмите ОК. Выберите это скругленный прямоугольник и отправьте его назад (Shift + Control + [ ).

Шаг 24

Используя Прямоугольник (М), создайте фигуру 40 х 65 рх, залейте ее линейным градиентом, как показано на рисунке ниже, и разместите как показано на рисунке.

Шаг 25

Выберите заново прямоугольник сделанный на предыдущем шаге и зайдите в Объект > Контур > Добавить Опорную Точку (Object > Path > Add Anchor Points). Переключитесь на инструмент Прямое Выделение (А), выберите верхнюю среднюю точку и потяните ее на 15 рх вниз. В результате ваш объект должен выглядеть, как на второй картинке.

Шаг 26

Выберите объект созданный на предыдущем шаге, и продолжите работу в панели Оформление, выберите заливку и зайдите в Эффект > Деформация > Панцирь Вверх (Effect > Warp > Shell Upper). Введите параметры, как на картинке ниже, нажмите ОК и вернитесь в панель Оформление. Добавьте две черные заливки и разместите их внизу, в панели Оформление. Выберите верхнюю черную заливку, уменьшите непрозрачность до 15%, а затем зайдите в Эффект > Исказить и Трансформировать > Трансформировать. Введите параметры как на рисунке ниже и нажмите ОК. Выберите нижнюю черную заливку, уменьшите непрозрачность до 25%, а затем зайдите в Объект > Контур > Создать Параллельный Контур. Введите -1 рх для Смещения и нажмите ОК, а затем зайдите в Эффект > Исказить и Трансформировать > Трансформировать. Введите параметры как на рисунке ниже и нажмите ОК, и потом зайдите в Эффект > Размытие > Размытие по Гауссу ( Effect > Blur > Gaussian Blur). Введите радиус - 2 рх и нажмите ОК.

Шаг 27

Заново выберите фигуру, которую редактировали на предыдущем шаге, и продолжите работу в панели Оформление, где добавьте две новых обводки, используя кнопку Добавить Новую Обводку (Add New Stroke ) (отмечено маленькой голубой стрелочкой). Выберите верхнюю обводку, задайте для нее толщину 1 pt, разместите ее внутри контура и задайте цвет R=135 G=30 B=45, уменьшите ее Непрозрачность до 80%, измените Режим Наложения на Затемнение Основы (Color Burn) и зайдите в эффект Эффект > Деформация > Панцирь Вверх (Effect > Warp > Shell Upper). Введите параметры, как на картинке ниже и нажмите ОК. Выберите другую обводку, задайте для нее толщину 2 pt, разместите ее внутри контура и задайте белый цвет , уменьшите ее Непрозрачность до 75%, измените Режим Наложения на Перекрытие и зайдите в эффект Эффект > Деформация > Панцирь Вверх. Введите параметры, как на картинке ниже и нажмите ОК.