Создаем иконки для веб-сайта


[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

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

Откройте Adobe Illustrator и создайте новый документ со следующими настройками: 800×600 пикселей, 72dpi, цвет RGB, единицы в пикселях и белый фон.

Создав новый документ, откройте палитру слоев, нажав Window > Layers (в случае, если она не открыта) и создайте 4 новых слоя. Назовите их “base”, “icon”, “light” и “overlay”

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 2

Работая со слоем “base”, который Вы только что создали, выберите Rounded Rectangle Tool, выберите светло серый цвет, и кликните в любую точку на полотне. В диалоговом окне, которое появится, выберите следующее: Width “42px”, Height “42px”, Corner Radius “10px” и нажмите OK.

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 3

Перейдите на слой “light”, выберите снова Rounded Rectangle Tool, выберите серый цвет, но более темный и кликните на холст. На этот раз выберите : Width “38px”, Height “38px”, Corner Radius “8px” и OK.

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 4

Оставаясь на слое “light”, выберите в последний раз Rounded Rectangle Tool, темно-серый цвет и клик по холсту. Width “34px”, Height “34px”, Corner Radius “6px” OK.

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 5

Удерживайте Shift и выделите два внутренних прямоугольника двойным кликом. Выделив фигуры, пройдите в палитру Pathfinder (Window > Pathfinder) и выберите иконку “Minus Front”. Это создаст полый прямоугольник.

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 6

Выделив полый прямоугольник, пройдите в палитру градиентов (Window > Gradient) и выберите линейный градиент, от белого до белого, установите 90 градусов, с прозрачностью левого якоря градиента в 0%. Прозрачность правого якоря градиента установите до 80% и локацию градиента – 80% Откройте палитру Transparency (Window > Transparency) и установите Blending Mode в “Soft Light”.

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 7

Переключитесь на слой “overlay”. Выберите любой цвет и создайте другой заокругленный прямоугольник используя Width “38px”, Height “38px”, Corner Radius “8px”. Используя инструмент элипс, нарисуйте овал и разместите над прямоугольником, как показано на рисунке

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 8

Удерживайте Shift и кликните на элипсе и прямоугольнике, чтобы выделить их. Используя палитру Pathfinder, кликните на иконку “Minus Front”. Это действие оставит форму слоя

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 9

С выделенной формой слоя, зайдите в палитру Gradient и выберите линейный градиент, от белого к белому, установите 0 градусов, с прозрачностью левого якоря градиента в 25 %, правого – 0%, и локации градиента в 50%. Установите Blending Mode к “Soft Light”.

Верите или нет, но только что мы закончили с основными установками и теперь можем поиграть с цветом!

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 10

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

Создайте два новых образца, кликнув на иконку “New Swatch” в палитре Swatches (Window > Swatches). Определите образцы следующим образом:
Swatch One: “gradient bottom” значения: R “31″, G “117″, B “196″
Swatch Two: “gradient top” значения: R “113″, G “188″, B “237″

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 11

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

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 12

Лого Vimeo основанно на шрифте Black Rose. Скачайте шрифт и наберите букву “v” . Убедитесь, что Вы работаете на слое “icon” . Мы набрали текст в 55pt и светло-сером цвете. Сконвертируйте текст в кривые (Type > Create Outlines) и разместите "v" в центре прямоугольника.

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 13

Выберите форму лого и нажмите CTRL/CMD+C, чтобы создать копию. Нажмите CTRL/CMD+B, чтобы вставить копию за оригиналом. С выделенной скопированной формой нажмите enter, чтобы отрегулировать позиционирование. Измените горизонтальное расположение на 0.5px и вертикальное на -0.5px и кликните OK

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 14

Измените цвет скопированной формы на черный, установите Blending Mode в “Soft Light” и измените прозрачность на 50%

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Шаг 15

Создаем тень для всей иконки. Работая в слое “base”, создайте маленький элипс внизу иконки. Заполните эту иконку радиальным градиентом, от черного к черному, установив 0 градусов, с прозрачностью левыого якоря градиента в 60%, правого – 0%, aspect ratio – 8%, и локацию градиента в 60% .

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

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

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...]