Трансформируем вашу панель меню в Зимний сказочный мир в Иллюстраторе.
Russian (Pусский) translation by Mavka (you can also view the original English article)



Следуйте этому уроку и узнайте, как трансформировать сайт в зимнюю страну чудес. Вы можете создавать полоски и кнопки меню с нуля, или воспользоваться этими методами и украсить любые другие предметы. Сначала вы создадите основную панель меню, а затем научитесь добавлять снег и сосульки, снежинки, блестки и другие зимние украшения. Наконец, мы будем экспериментировать с большим количеством цветов и дизайна, поэтому давайте начнем!
1. Начнем новый проект
Запустите Иллюстратор и перейдите к Файл > Новый, чтобы открыть пустой документ. Введите имя файла, настройте размеры, выберите Пиксели как Единицы и Цветовой режим как RGB. Убедитесь, что нет галочки выровнять новые объекты по пиксельной сетке.Затем перейдите в меню Редактирование > Установки >Основные и установите Перемещение курсора на 1 рх, и перейдите к Единицам измерения, чтобы убедиться, что они установлены, как на следующем рисунке. Обычно я работаю с этими настройками, и они помогут вам в течение всего процесса рисования.



2. Создадим основную панель меню
Шаг 1
Возьмите Прямоугольник с закругленными углами и нарисуйте первую форму с приведенными размерами. Выберите фиолетовый цвет заливки.



Шаг 2
Если прямоугольник все еще выделен, перейдите на панель Оформление, выберите атрибут фиолетовой Заливки и нажмите внизу значок Дублировать выделенный элемент. И вы получите второй атрибут Заливки выше. Примените бело-черный линейный градиент под углом -90 градусов и установите Режим наложения на Рассеянный свет.



Шаг 3
С все еще выделенным прямоугольником снова дублируйте фиолетовый атрибут Заливки. Выберите новый атрибут Заливки внизу, оставьте тот же цвет заливки, выделите меню Эффект> Стилизовать> Тень и примените этот эффект четыре раза. Назовите эту форму «меню - основа».



Это параметры эффектов Тень:



Шаг 4
Далее, Скопируйте и Вставьте на передний план (Control-F) "меню-основание", а затем удалите все существующие атрибуты, нажав значок Очистить оформление в нижней части панели Оформление. Выберите черный цвет заливки, далее Объект> Создать сетчатый градиент выберите Рядов 3 и Столбцов 6 и нажмите OK. В результате вы получите градиентную сетку, как на следующем изображении.



Шаг 5
Теперь возьмите инструмент Прямое выделение (A) и выберите только три точки сетки, указанные ниже, и измените их цвет заливки с черного на соответствующий. После окончания примените к форме Режим наложения Рассеянный свет. Назовите ее «меню-сетка».



Шаг 6
Возьмите инструмент Прямоугольник (M) и нарисуйте прямоугольник с такой же высотой, и панель меню, и разместите его в центре. Выберите светло-синий для заливки.



Шаг 7
С выбранным синим прямоугольником, перейдите к меню Объект> Контур> Добавить опорные точки, чтобы добавить четыре дополнительные точки по сторонам (1). Воспользуйтесь Прямым выделением (A), чтобы выбрать только левую и правую точки изнутри и переместить их на 10 px внутрь, нажав Левую и Правую клавиши со стрелками на вашей (2) клавиатуре.
Затем перейдите на панель Оформление и дублируйте имеющийся синий атрибут Заливки. Для новой Заливки в верхней части выделите линейный градиент от белого к черному с углом -90 градусов и установите Режим наложения на Рассеянный свет (3).



Шаг 8
Посмотрите ближе на правый бок голубой формы. Возьмите Перо (P), нарисуйте V-образный путь, следуя по опорным точкам синей формы, и предоставьте ему 1 pt белой Обводки. Скопируйте и Вставьте на передний план (Ctrl + F) этот путь, а затем сдвиньте копию на 1 px вправо, нажав клавишу со стрелкой вправо один раз. Выберите 1 pt черной Обводки для второго пути. Теперь, Сгруппируйте (Control-G) оба пути и установите группы на Режим наложения Рассеянный свет.
Не забудьте сделать то же самое с левой стороны синей формы или просто отразить зеркально существующую группу.



3. Создадим снег на верхней части панели меню
Шаг 1
Теперь, когда наша простая панель меню готова, мы можем продолжить создавать снег и другие украшения. Чтобы добавить снег, я рекомендую воспользоваться инструментом Карандаш (N), а не инструментом Перо (P), поскольку он проще, и мы также получим тот рукописно / естественный вид, который в данном случае для снега будет к лучшему. Дважды щелкните инструмент Карандаш (N), чтобы открыть окно Настроек и изменить их. Вы можете увидеть ниже использованные мной, но не стесняйтесь корректировать Точность и Плавность на свой вкус.
После этого, увеличьте масштаб правой части панели меню и нарисуйте путь, подобный приведенному ниже. Он не должен быть слишком точным, чем случайнее, тем лучше.



Шаг 2
С помощью инструмента Карандаш (N), нарисуйте другой случайный путь под первым и убедитесь, что вы только немного перекрываете панель меню. Если конечные точки двух путей не перекрываются, вы можете воспользоваться инструментом Прямое выделение (A), чтобы сместить их друг на друга, как показано крупным планом.
Далее, пора объединить два пути в один. Перетащите выделение с помощью инструмента Прямое выделение (A) на две конечные опорные точки справа (сначала заблокируйте меню) и нажмите Control-J, чтобы Объединить их. Проверьте параметр Угол и нажмите OK. После этого перетащите выделение на две конечные точки слева и Объедините их. Залейте полученную форму белым цветом.



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



Шаг 4
Заполните указанным цветом форму, полученную в предыдущем шаге, и теперь первая "часть" снега готова.



Шаг 5
Снова возьмите Карандаш (N) и нарисуйте меньшую форму на правом конце панели меню, залейте ее белым цветом (1). Нарисуйте другой путь под ней и убедитесь, что правая и левая конечные точки перекрываются (2), закройте путь в верхней части, как и раньше, с помощью функции Соединить или Пера (P) (3). Скопируйте и Вставьте на передний план (Control-F) маленькую белую форму и нажмите Shift-Control-], чтобы отправить ее поверх всего. Выделите эту белую копию вместе с голубой формой и нажмите Минус верхний в панели Обработка контуров. Залейте полученную форму таким же цветом (4). Это вторая "часть" снега.



Шаг 6
Давайте добавим больше снега с левой стороны панели меню, применяя ту же технику. Сначала нарисуйте Карандашом (N) белую форму (1), а затем создайте форму под ней, отнимите (2), и залейте ее тем же светло-синим цветом (3).



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



Шаг 8
Воспользуйтесь Карандашом (N) или Пером (P), чтобы нарисовать форму, подобную приведенной ниже, и залейте ее линейным градиентом. Вы также можете нарисовать несколько небольших фигур рядом с ним, залитых одним градиентом, а затем выделить все фигуры и Сгруппировать (Control-G) их.



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



4. Создадим сосульки под панелью меню
Шаг 1
С помощью Карандаша (N), нарисуйте случайную форму в нижнем правом углу строки меню и выберите белый цвет заливки. Теперь возьмите инструмент Добавить опорную точку (+) и примените его, чтобы добавить несколько дополнительных точек внизу этой формы (1). Затем перейдите к инструменту Прямое выделение (A) и перетащите только три из этих точек вниз, чтобы создать первые сосульки (2). Добавьте больше точек с помощью инструмента Добавить опорную точку (+) по длине сосулек и поиграйте с их ручками, чтобы создать волнистый вид (3).



Шаг 2
Нарисуйте новую случайную форму рядом с первой, а затем добавьте дополнительные точки внизу с помощью пункта Добавить опорную точку (+) (1). Примените инструмент Прямое выделение (A), чтобы перетащить две из этих точек вниз и создать две новые сосульки (2). Добавляйте больше опорных точек по длине сосулек и двигайте их ручки, чтобы создать волнистый вид (3).



Шаг 3
Я добавила еще одну белую форму рядом со второй, но вы можете добавить столько, сколько пожелаете. В этом уроке дизайн зависит от вас.



Шаг 4
Теперь выделите три белые фигуры в нижней правой части строки меню, а затем Скопируйте и Вставьте на задний план (Control-B). Переместите эти три копии немного вниз, нажав клавишу Стрелка вниз на клавиатуре один или два раза, и выберите светло-голубой цвет заливки.



Шаг 5
Для обеспечения глубины, нарисуйте с помощью Карандаша (N) или Пера (P) более тонкую форму на вершине каждой сосульки и заполните их все с помощью показанного градиента.



Шаг 6
Чтобы добавить больше деталей, нарисуйте несколько небольших фигур, в свободных местах, и залейте их указанным цветом.



Шаг 7
Нижняя правая часть панели меню готова, но вы можете добавить больше сосулек по левой стороне. Они меньше размером, поэтому не отнимут много времени. Воспользуйтесь той же техникою, что и выше. Сначала нарисуйте белую форму (1), а затем Скопируйте и Вставьте на задний план (Control-B) эту форму, сдвиньте ее немного вниз и измените цвет заливки (2). В конце, используйте небольшие формы, залитые тем же градиентом, чтобы добавить так много деталей, как пожелаете (3).



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



5. Создадим и применим кисть для рассеивания снежинок
Шаг 1
Перейдите к Снежинкам и загрузите набор векторных снежинок, созданный All-Silhouettes. Затем откройте файл иллюстратору в архиве и скопируйте снежинку, выделенную синим цветом, в документ. Выберите белый цвет заливки и перетащите снежинку на панель Кисти, чтобы сохранить ее как Новую дискретную кисть. В окне Параметры дискретной кисти установите значение Поворот относительно Контура и оставьте остальные параметры как есть. Введите название кисти и нажмите ОК.



Шаг 2
Нам снова нужен Карандаш (N), чтобы нарисовать несколько путей над снегом, как на следующем изображении. Обведите эти пути с помощью дискретной кисти, сохраненной ранее, и откройте окно Параметры Обводки в панели Оформление. Измените настройки, как показано, и нажмите ОК. Установите Толщину обводки для этих путей на уровне 0,25 pt, 0,3 pt, 0,35 pt и 0,5 pt, чтобы получить снежинки разного размера.



6. Добавим разнообразные зимние украшения
Шаг 1
Скопируйте снежинки, выделенные синим и зеленым со снежинок, которые находятся в вашем документе. Затем залейте их белым, масштабируйте и расположите слева в строке меню.



Шаг 2
Далее на панели Символы в меню Библиотеки символов, и в категории Природа найдите символ «Trees 1». Перетяните символ на артборд и нажмите значок удалить ссылку на символ в нижней части панели Символы, чтобы разобрать его. Масштабируйте и разместите деревья поверх снега и размножьте их по своему желанию.



Шаг 3
Теперь приблизим деревья. Возьмите инструмент Карандаш (N) и нарисуйте несколько коротких путей, следуя за ветвями большого дерева. Обведите эти пути художественной кистью Charcoal-Thin, которую можно найти в меню Библиотеки кистей> Художественный> Художественный_МелУголь. Установите значение Толщины обводки на 0,5 pt, а цвет на белый для всех путей.



Шаг 4
Повторите тот же процесс для других деревьев, но убавьте Толщину обводки, даже если деревья меньше.



Шаг 5
Размножьте созданные вами снежные деревья, и расположите их с другой стороны панели меню.



Шаг 6
Чтобы создать небольшой дом, сначала нарисуйте простую форму дома, заполненную белым цветом. Для крыши нарисуйте путь с Обводкой 1 pt и добавьте небольшое красную форму для дымохода. Для дверей и окон примените инструмент Прямоугольник (M) и показанный градиент. Чтобы создать снег на крыше, просто нарисуйте два пути на вершине крыши и обведите их с помощью кисти Charcoal-Thin, как с деревьями ранее.



Шаг 7
Далее, возьмите инструмент Эллипс (L) и нарисуйте три эллипса, чтобы создать снеговика. Залейте их показанным радиальным градиентом, а затем добавьте маленькие черные круги для глаз и кнопок. Примените Перо (P), чтобы нарисовать нос и шарф, и вы закончили.



Шаг 8
Теперь вы можете разместить небольшой дом и снеговика, где пожелаете.



Шаг 9
Кажется необходимым добавить много блеска, верно? Я уже объясняла, как создать его в уроке Glitter Text Effect. Размножьте блеск и расположите столько, насколько хотите улучшить свой дизайн.



7. Создадим и оформим веб-кнопки
Шаг 1
Если вам удалось добиться этого, то вы сможете создать и украсить простую кнопку, а не только ленту. Сначала нарисуйте меньший скругленный прямоугольник (1), а затем создайте сетчатый градиент, как в начале урока (2). Добавьте "кусочки" снега на вершине и сосульки внизу (3) и примените дискретную кисть снежинок, чтобы добавить больше снега (4). Приведите в порядок созданные вами украшения (5) и, наконец, добавьте несколько блесток (6). Все техники остаются теми же.



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



8. Создадим дополнительные панели меню
Шаг 1
Дублируйте фиолетовую панель меню со снегом в верхней части, снежинки и сосульки, но без других украшений. Выберите «основу панели меню" и замените фиолетовый цвет на оттенки зеленого. Сохраните другие настройки как есть.



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



Шаг 3
Чтобы создать серую полоску меню, дублируйте фиолетовую панель меню. Выберите "основу меню" и замените ее фиолетовый цвет на указанный серый. После этого выделите форму по центру и замените светло-голубой в этот раз в розовый. Остальные параметры останутся неизменными. Наконец, расположите все декорации, как пожелаете.



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



