Vectorboom
Уроки / Векторные Иконки / Comments: 18

Как создать почтовую иконку для iOS-приложений с помощью Adobe Illustrator

Ярослав Лазунов
18.09.2013
Цель Урока
как быстро создать абстрактный 3 д фон из снежинок

In this tutorial we will recreate the LEXXMT LTD logo. You can not sell or somehow get profit (commercial usage) for any materials copyrighted by LEXXMT LTD.

В этом уроке я расскажу вам, как создавать в Adobe Illustrator иконки для iOS-приложений, мы также поговорим про технические требования, которые предъявляются к такого рода продуктам. В процессе урока мы будем использовать уникальные техники, которые позволят вам создавать светотени и мягкие переливы цвета.

 

Шаг 1

 

Перед тем как создавать иконку для универсальных iOS-приложений вы должны точно знать, какого размера иконку вы создаете. Если вы делаете несколько иконок, то вам потребуется для каждого размера создавать новый рисунок. Для каждого конкретного размера требуется не просто уменьшать большую иконку с множеством деталей, но выделять важные (отбрасывая при этом второстепенные) элементы, иначе финальный результат превратится в «кашу». Сейчас мы создадим иконку размером 512 на 512 px. О других размерах и вариантах этой иконки мы поговорим в заключительной части этого урока. Итак, берем инструмент иллюстратора Rectangle Tool (M) и создаем квадрат 512 на 512 px., тем самым мы ограничиваем рабочее пространство нашей иконки.

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

Шаг 2

Теперь нам нужна идея (в этом уроке я буду использовать графику моего друга Valentine Sant, который любезно предоставил ее специально для данного урока). У многих профессиональных дизайнеров все начинается с эскиза.

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

Вставляем этот эскиз в рабочее пространство Adobe Illustrator (File > Place…).

Шаг 3

Основываясь на рабочий эскиз, создаем основные элементы нашей композиции. В этой работе я использую Pen Tool (P) и заливаю объекты разными цветами, для того чтобы расположить их в правильной последовательности.

Как вы видите, я сразу разместил все объекты внутри рамки, которая ограничивает размеры иконки.

Шаг 4

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

Давайте в этом шаге полностью оформим фон иконки, чтобы больше к нему не возвращаться. Для округления углов квадрата переходим Effect > Stylize > Round Corners… и устанавливаем в диалоговом окне радиус округления.

Шаг 5

Создадим рамку вокруг иконки. Открываем панель Appearance и дублируем заливку, нажав на кнопку Add New Fill.

Теперь выделяем верхнюю заливку в панеле Appearance и переходим Effect > Path > Offset Path… и устанавливаем величину смещения в диалоговом окне. Эта величина должна быть отрицательной, в противном случае размер иконки превысит стандартные 512 px.

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

Шаг 6

Теперь мы можем приступать к окраске голубя. Рассмотрим на примере тела голубя, как создаются сложные светотени и переливы цвета. Заливаем форму тела белым цветом.

Копируем эту форму, вставляем ее вперед (Cmd / Ctrl +C, Cmd / Ctrl + F) и заливаем голубым цветом.

Создадим форму с заливкой белого цвета. Для создания подобных форм я использую Pencil Tool (N).

Для наглядности я отключил видимость других объектов, для того чтобы ничего не мешало освоить вам эту технику.

Шаг 7

Не снимая выделения с формы, переходим Effect > Blur > Gaussian Blur… и останавливаем радиус размытия в диалоговом окне.

Создаем новую форму при помощи Pen Tool (P) и заливаем ее линейным черно-белым градиентом, как это показано на рисунке ниже.

К этой форме также применим эффект Gaussian Blur.

Используя эту технику, создадим еще два объекта, один с заливкой черно-белым линейным градиентом и второй заливкой белого цвета.

Шаг 8

Выделяем и группируем все формы, к которым применялся Gaussian Blur эффект (Cmd / Ctrl + G).

Теперь выделяем эту группу, голубую форму тела голубя и выбираем Make Opacity Mask из всплывающего меню панели Transparency.

Шаг 9

Давайте разберемся в том, что произошло. В местах, где находились белые формы, нижняя голубая форма стала полностью видна. За пределами белых форм голубая нижняя форма не видна. На границе белой формы мы получили плавный переход цвета из-за того что был применен Gaussian Blur эффект. Черный цвет после применения Opacity Mask становится прозрачным. Эта техника может показаться вам сложной, поэтому мы рассмотрим ее еще раз в этом уроке, а пока давайте посмотрим, как управлять этим эффектом, ведь нам не каждый раз удается получить нужный результат с первой попытки. Для получения доступа ко всем объектам, которые включает Opacity Mask вам необходимо кликнуть на правой миниатюре в панеле Transparency.

Теперь вы можете управлять формой объектов при помощи Direct Selection Tool (A) и управлять цветом и направлением градиентов при помощи Gradient Tool (G) и панели Gradient. После редактирования объектов перейдите в обычный режим, кликнув на левой миниатюре в панеле Transparency.

Шаг 10

Продолжим создавать светотени. Копируем белую форму тела голубя, вставляем ее вперед и размещаем выше Opacity Mask. Заливаем новую форму голубым цветом.

Устанавливаем для этой формы режим смешивания Multiply в панеле Transparency.

Шаг 11

Как и в случае с первой Opacity Mask создаем объекты с белой или градиентной заливкой.

Форма объектов и их местоположение должно соответствовать форме и местоположению теней. Теперь применим к созданным объектам Gaussian Blur эффект.

Радиус размытия для каждой формы разный и зависит от плавности перехода тени к свету. Группируем все формы, которые соответвуют теням, выделяем группу и форму тела, к которой применялся ражим смешивания Multiply. Не снимая выделения с этих объектов, применяем к ним Opacity Mask.

Шаг 12

Теперь создадим более глубокие тени. Копируем форму тела голубя еще раз и помещаем ее выше обеих масок прозрачности. Заливаем форму голубым цветом и устанавливаем для нее режим смешивания Multiply в панеле Transparency.

Используя технику, описанную выше, создаем формы глубоких теней и применяем к ним Gaussian Blur эффект.

Группируем все формы, которые передают глубокие тени, выделяем эту группу и форму, к которой применялся режим смешивания Multiply и создаем Opacity Mask.

Шаг 13

Итак, мы создавали тени при помощи Opacity Masks, двигаясь от светов к глубокой тени.

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

Шаг 14

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

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

Форму подобных объектов вы можете создавать при помощи Pen Tool (P) or Pencil Tool (N). Заливаем объекты разными оттенками серого цвета.

Группируем все мелкие объекты, выделяем группу и белую форму, после чего применяем Opacity Mask.

Теперь, я думаю, вы освоили эту технику в совершенстве.

Шаг 15

Игру света на всех элементах голубя и конверте выполняем при помощи описанных техник.

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

Шаг 16

Для придания большего объема крыльям в некоторых местах наложения перьев друг на друга добавим падающие тени. Создадим при помощи Pencil Tool (N) форму тени и применим к объекту Gaussian Blur эффект (Effect > Blur > Gaussian Blur…).

Шаг 17

Теперь, когда все элементы голубя готовы, группируем их, и не снимая выделения с группы, переходим Effect > Stylize > Drop Shadow… и устанавливаем параметры, указанные на рисунке ниже.

Иконка размером 512 на 512 px готова.

In this tutorial we recreated the LEXXMT LTD logo. You can not sell or somehow get profit (commercial usage) for any materials copyrighted by LEXXMT LTD.

 

Шаг 18

 

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

29 x 29 px – для приложения настроек на iPhone и iPad, а также для Spotlight на iPhone. Несмотря на свой небольшой размер, они очень важны.

48 x 48 px – для Spotlight на iPad. Здесь есть небольшой нюанс: в информации для разработчиков на сайте Apple говорится об иконках размером в 50 px, но на самом деле, конечный размер составляет 48 х 48 точек. Просто iOS «отрезает» по одному пикселю с каждой стороны и добавляет туда тень. Немного странное решение, но его стоит учитывать при рисовании иконки.

57 x 57 px – для iPhone и iPod с обычным дисплеем;

58 x 58 px — для приложения настроек и Spotlight в iPhone 4. Все верно, вы должны сделать две иконки практически идентичного размера.

64 x 64 px — для значка документа. Кто не знает, мобильные приложения в iOS могут предоставлять иконку документа.

72 x 72 px – для iPad;

114 x 114 px – для iPhone 4;

512 x 512 px – такой размер используется для отображения в iTunes, в том числе, для CoverFlow и App Store, где она уменьшается почти в 3 раза до 175 px;

Вот такое вот, друзья, многообразие.

Шаг 19

На рисунках ниже показано как выглядят те же иконки для размера 58 x 58 px и 48 на 48 px при увеличении и в натуральную величину.

Шаг 20

После того как все размеры иконки готовы, сохраняем их в формате PNG, для этого переходим File > Export… и выбираем нужный формат и устанавливаем параметры, указанные на рисунке ниже.

Я думаю, что Adobe Illustrator или другой векторный редактор отлично подходит для создания иконок, потому что вы можете использовать уже созданные формы для изготовления разных вариантов иконки, уменьшая или увеличивая их без потери качества. Кроме того, вы можете воспроизводить довольно сложные эффекты, в чем вы убедились на примере Mail App Icon.

Этот урок был мною создан для известного англоязычного интернет издания Designmodo.com

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.