() translation by (you can also view the original English article)
В этом уроке вы узнаете как создать стилизованную навигационную панель. Вы узнаете как использовать панель Оформления, чтобы стилизовать навигационную панель, и как использовать Фрагменты, чтобы "нарезать" элементы и экспортировать изображения, так чтобы они были готовы к использованию на вебсайте. Давайте начнем!
Шаг 1
Откройте Иллюстратор и нажмите Control + N, чтобы создать новый документ. Введите 1025 для ширины и 53 для высоты и нажмите кнопку Дополнительно (Advanced). Выберите RGB, установите для Растровых Эффектов Экранное разрешение (72 ppi), и убедитесь, что у вас убрана галочка для Выравнивать Новые Объекты по Сетке (Align New Objects to Pixel Grid), прежде чем нажать ОК. Включите Сетку (Grid) (Просмотр > Показать Сетку) и Выравнивать по Сетке (Просмотр > Выравнивать по Сетке).
Вам понадобится сетка с шагом 5 рх. Для этого зайдите в Редактирование > Установки > Направляющие и Сетка и введите 5 для Линия через Каждые и 1 для Внутренне деление на. Вы так же можете открыть панель Информации (Info) (Окно > Информация), что бы иметь возможность видеть размер и положение ваших объектов в режиме просмотра. Не забудьте установить единицы измерения на пиксели в окне Редактирование > Установки > Единицы Измерения > Основные. Все проделанные нами установки значительно ускорят процесс вашей работы.
Шаг 2
Выберите инструмент Прямоугольник (М) (Rectangle Tool), создайте фигуру размером 1025 х 50 рх, залейте ее линейным градиентом, показанным ниже и зайдите в Эффект > Стилизация > Скругленные углы (Filter > Stylize > Round Corner). Введите радиус 3 рх, нажмите ОК и зайдите в Объект > Разобрать Оформление (Object > Expand Appearance).
Шаг 3
Для следующего шага вам понадобится сетка через 1 рх. Для этого зайдите в Редактирование > Установки > Направляющие и Сетка и введите 1 для Линия через Каждые. Продолжайте работать с левой частью фигуры, созданной на предыдущем шаге. Возьмите инструмент Перо (Р) (Pen Tool) и нарисуйте вертикальную линию размером 50 рх и расположите ее, как показано на рисунке. Добавьте черную обводку тольщиной 1 pt, для этой линии, чтобы ее было проще видеть.
Шаг 4
Выберите заново вертикальную линию, созданную на предыдущем шаге, и потяните на 128 рх в право. Вы можете сделать это вручную или зайти в Объект > Трансформировать > Перемещение. Введите 128 рх в окне для Горизонтального перемещения и нажмите ввод.
Шаг 5
Выберите эту вертикальную линию и зайдите в Эффект > Исказить и Трансформировать > Трансформировать (Effect > Distort & Transform > Transform). Введите параметры показанные на следующей картинке, нажмите Ок и зайдите в Объект > Разобрать Оформление (Object > Expand Appearance).
Шаг 6
Выберите группу вертикальных линий, созданных на предыдущем шаге вместе с скругленным прямоугольником, созданным на втором шаге, и нажмите кнопку Разделение (Divide) на панели Обработка Контуров (Pathfinder). Перейдите в панель Слои, выберите получившуюся группу и разгруппируйте ее (Shift + Control + G). Продолжите работу в панели Слои, и назовите ваши объекты с "1" по "8" (начиная с левой фигуры).
Шаг 7
Отключите Привязку к Сетке (Просмотр > Привязка к Сетке) и затем зайдите в Редактирование > Установки > Основные (Edit > Preferences > General) и убедитесь, что у вас для Перемещения Курсора (Keyboard Increment ) задано значение 1 рх. Выберите фигуру "1" и поместите вперед две ее копии (Control + C > Control + F > Control + F). Выберите верхнюю копию и сдвиньте ее на 1 рх влево, используя стрелку влево на клавиатуре. Заново выберите обе копии и нажмите кнопку Минус Верхний (Minus Front) на панели Обработка Контуров (Pahtfinder). Поместите получившийся объект вперед (Shift + Control + ]), залейте его черным цветом и измените Режим Наложения (Blending Mode) на Перекрытие (Overlay).
Шаг 8
Выберите фигуру "1" и поместите вперед две ее копии (Control + C > Control + F > Control + F). Перейдите в панель Слои и выберите нижнюю копию и сдвиньте ее на 1 рх вправо, используя стрелку влево на клавиатуре. Заново выберите обе копии и нажмите кнопку Минус Верхний (Minus Front) на панели Обработка Контуров (Pahtfinder). Поместите получившийся объект вперед (Shift + Control + ]), залейте его белым цветом и измените Режим Наложения (Blending Mode) на Перекрытие (Overlay).
Шаг 9
Выберите два объекта, полученных в последних двух шагах и сгруппируйте их (Control + G). Сделайте копию этой группы (Control + C > Control + F), выберите ее и нажмите кнопку Соединение (Unite) на панели Обработка Контуров (Pahtfinder). Залейте получившиеся объекты линейным градиентом, как показано на второй картинке.
Шаг 10
Откройте панель Прозрачность (Transparency panel). Выберите фигуру и группу созданные в предыдущем шаге, откройте меню Прозрачности и щелкните по кнопке Создать Маску. В результате ваша группа с маской должна выглядеть, как на второй картинке.
Шаг 11
Заново выберите группу с маской, созданную на предыдущем шаге и зайдите в Объект > Трансформировать > Перемещение. Введите 128 в Горизонтальной окне и нажмите кнопку Копировать. Очевидно, что у вас получится копия ваше группы на 128 рх правее. Выберите эту копию и повторите команду Перемещение. Сделайте так, пока у вас не получится семь таких групп.
Шаг 12
Отключите Привязку к Сетке (Объект > Привязка к Сетке). Возьмите инструмент Прямоугольник (М), создайте четыре квадрата, размером 3 рх и поместите их как на следующей картинке. Так же залейте их черным и белым, как на рисунке. Выберите четыре объекта и просто забросьте их в панель Образцы (Swatches), чтобы создать из них паттерн. После того, как вы создали паттерн, вы можете удалить эти четыре квадрата из панели Слои.
Шаг 13
Отключите Сетку (Просмотр > Сетка) и Выравнивание по Сетке (Объект > Выравнивание по Сетке). Вернемся к фигуре "1". Выберите ее, и перейдите в панель Оформление и добавьте вторую заливку используя кнопку Добавить Новую Заливку (Add New Fill). Выберите ее, задайте цвет R=28 G=117 B=188 и измените режим наложения на Затемнение Основы (Color Burn).
Шаг 14
Выберите фигуру "1" и продолжайте работать в панели Оформление и добавьте третью заливку. Выберите ее, уменьшите непрозрачность до 15%, измените режим наложения на Расс.Свет (Soft Light) и добавьте паттерн, полученный на 12 шаге.
Шаг 15
Выберите фигуру "1" и продолжайте работать в панели Оформление, убедитесь, что не выбраны ни обводка ни заливка и зайдите в Эффект > Стилизация > Тень (Effect > Stylize > Drop Shadow). Введите параметры как в верхней окне картинки, нажмите ОК и снова зайдите в Эффект > Стилизация > Тень (Effect > Stylize > Drop Shadow). Введите параметры, как в среднем окне, нажмите ОК и еще раз зайдите в Эффект > Стилизация > Тень. Введите параметры из нижнего окна и нажмите ОК.
Шаг 16
Теперь вам необходимо копировать свойства которые используются для фигуры "1" и вставить их в другие фигуры. Вот как легко можно это сделать. Зайдите в панель Слои, обратите внимание на правую часть, и вы увидите что у каждой фигуры, стоит маленький серый кружок. Он называется мишень. Удерживая Alt, щелкните по иконке мишени, которая находится напротив фигуры "1" и потяните ее на кружочек, напротив фигуры "2". Используйте эту технику, чтобы перенести свойства на другие шесть фигур.
Шаг 17
Выберите фигуру "2", продолжайте работать в панели Оформление, и добавьте четвертую заливку. Выберите ее, сделайте ее белой, уменьшите непрозрачность до 50% и измените режим наложения на Расс.Свет. Это будет ховер-режим (когда над кнопкой заносят курсор мышки) для вашей навигационной панели.
Шаг 18
Возьмите Инструмент Текст (Т) и добавьте текст как на картинке. Используйте шрифт Calibri размером 15pt, установите полужирный шрифт и выберите цвет R=0 G=86 B=140. Убедитесь, что все элементы текста выделены и зайдите в Эффект > Стилизация > Тень (Effect > Stylize > Drop Shadow). Введите данные, как на картинке и нажмите ОК.
Шаг 19
Теперь давайте разделим меню на фрагменты. Начните работать с группой с маской, что слева и выберите инструмент Фрагменты (Shift + K) (Slice Tool). Сначала, нарисуйте фрагмент 6 х 53 рх, вдоль фигуры "1", как показано на следующей картинке. Продолжайте работать с инструментом Фрагменты (Shift+K) и нарисуйте второй фрагмент размером 6 х 53 рх, вдоль фигуры "2", как показано ниже.
Шаг 20
Теперь когда у вас есть первая нарезка, зайдите в Файл > Экспорт > Сохранить для Браузеров (Alt + Control + Shift + S). Выберите инструмент Фрагменты (Shift + K) (Slice Tool) и дважды щелкните по левому фрагменту 6 х 53 рх. Введите "nav" в окне для имени и нажмите ОК.
Сосредоточьтесь на втором куске 6 х 53 рх. Дважды щелкните по нему и введите "nav.hoover" в окне для имени и нажмите ОК. Выберите формат PNG-24 и нажмите Сохранить. Выберите, куда вы будете сохранять изображение и нажмите Сохранить. Перейдите в эту папку и вы увидите в ней набор новых изображений. Уберите файлы "nav.png" и "nav.hoover.png" из папки и затем удалите папку.
Шаг 21
Вернемся в Аi, выберите инструмент Фрагменты (Shift + K) (Slice Tool) и нарисуйте фрагмент 2 х 53 рх, вдоль левой фигуры-группы с маской. Перейдите в панель Слои и отключите отображение для всех фигур, за исключением группы с маской слева.
Шаг 22
Снова зайдите в Файл > Экспорт > Сохранить для Браузеров (Alt + Control + Shift + S). Выберите инструмент Фрагменты (Shift + K) (Slice Tool) и дважды щелкните по новому фрагменту созданному на предыдущем шаге. Назовите его "divider" и нажмите ОК. Убедитесь, что выбра формат PNG-24 и нажмите Сохранить. Опять выберите, куда вы будете сохранять изображение и нажмите Сохранить. Перейдите в эту папку и уберите файл "divider.png" из папки и затем удалите папку. В результате у вас должно получиться три картинки: "nav", "nav.hoover" и "divider.png".
Шаг 23
И наконец, вы можете легко изменять цвета для вашей навигационной панели. Просто замените цвета которые используются в тексте и во второй заливке, на цвета, как на второй картинке.
Заключение
Теперь вы все сделали. Вот как должен выглядеть ваш результат.
