1. Design & Illustration
  2. UI Design

Трансформируем вашу панель меню в Зимний сказочный мир в Иллюстраторе.

by
Read Time:14 minsLanguages:

Russian (Pусский) translation by Mavka (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

1. Начнем новый проект

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

New document settingsNew document settingsNew document settings

2. Создадим основную панель меню

Шаг 1

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

Create menu bar 1Create menu bar 1Create menu bar 1

Шаг 2

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

Create menu bar 2Create menu bar 2Create menu bar 2

Шаг 3

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

Add shadow to menu barAdd shadow to menu barAdd shadow to menu bar

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

Drop Shadow effect settingsDrop Shadow effect settingsDrop Shadow effect settings

Шаг 4

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

Create gradient meshCreate gradient meshCreate gradient mesh

Шаг 5

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

Color gradient meshColor gradient meshColor gradient mesh

Шаг 6

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

Create menu bar 3Create menu bar 3Create menu bar 3

Шаг 7

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

Затем перейдите на панель Оформление и дублируйте имеющийся синий атрибут Заливки. Для новой Заливки в верхней части выделите линейный градиент от белого к черному с углом -90 градусов и установите Режим наложения на Рассеянный свет (3).

Create menu bar 4Create menu bar 4Create menu bar 4

Шаг 8

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

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

Create menu bar 5Create menu bar 5Create menu bar 5

3. Создадим снег на верхней части панели меню

Шаг 1

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

После этого, увеличьте масштаб правой части панели меню и нарисуйте путь, подобный приведенному ниже. Он не должен быть слишком точным, чем случайнее, тем лучше.

Create snow 1Create snow 1Create snow 1

Шаг 2

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

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

Create snow 2Create snow 2Create snow 2

Шаг 3

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

Create snow 3Create snow 3Create snow 3

Шаг 4

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

Create snow 4Create snow 4Create snow 4

Шаг 5

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

Create snow 5Create snow 5Create snow 5

Шаг 6

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

Create snow 6Create snow 6Create snow 6

Шаг 7

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

Create snow 7Create snow 7Create snow 7

Шаг 8

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

Add details on snow 1Add details on snow 1Add details on snow 1

Шаг 9

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

Add details on snow 2Add details on snow 2Add details on snow 2

4. Создадим сосульки под панелью меню

Шаг 1

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

Create icicles 1Create icicles 1Create icicles 1

Шаг 2

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

Create icicles 2Create icicles 2Create icicles 2

Шаг 3

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

Create icicles 3Create icicles 3Create icicles 3

Шаг 4

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

Create icicles 4Create icicles 4Create icicles 4

Шаг 5

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

Create icicle 5Create icicle 5Create icicle 5

Шаг 6

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

Create icicles 6Create icicles 6Create icicles 6

Шаг 7

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

Create icicles 7Create icicles 7Create icicles 7

Шаг 8

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

Create icicles 8Create icicles 8Create icicles 8

5. Создадим и применим кисть для рассеивания снежинок

Шаг 1

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

Create Snowflake Scatter BrushCreate Snowflake Scatter BrushCreate Snowflake Scatter Brush

Шаг 2

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

Apply Snowflake Scatter BrushApply Snowflake Scatter BrushApply Snowflake Scatter Brush

6. Добавим разнообразные зимние украшения

Шаг 1

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

Add snowflakes decorationsAdd snowflakes decorationsAdd snowflakes decorations

Шаг 2

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

Add trees on the barAdd trees on the barAdd trees on the bar

Шаг 3

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

Add snow on trees 1Add snow on trees 1Add snow on trees 1

Шаг 4

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

Add snow on trees 2Add snow on trees 2Add snow on trees 2

Шаг 5

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

Add snow on trees 3Add snow on trees 3Add snow on trees 3

Шаг 6

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

Draw a small houseDraw a small houseDraw a small house

Шаг 7

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

Draw a small snowmanDraw a small snowmanDraw a small snowman

Шаг 8

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

Add house and snowmanAdd house and snowmanAdd house and snowman

Шаг 9

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

Add sparkles Add sparkles Add sparkles

7. Создадим и оформим веб-кнопки

Шаг 1

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

Create winter buttons 1Create winter buttons 1Create winter buttons 1

Шаг 2

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

Create winter buttons 2Create winter buttons 2Create winter buttons 2

8. Создадим дополнительные панели меню

Шаг 1

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

Create green menu bar 1Create green menu bar 1Create green menu bar 1

Шаг 2

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

Create green menu bar 2Create green menu bar 2Create green menu bar 2

Шаг 3

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

Create gray menu barCreate gray menu barCreate gray menu bar

Ваша зимняя страна чудес готова!

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

Final ResultFinal ResultFinal Result
One subscription.
Unlimited Downloads.
Get unlimited downloads