«Металлическое» меню для сайта. Изучение инструмента создания контура.

Задача:

Создать стилизованные под лакированный, хромированный металл надписи для сайта.

Урок:

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

Теперь научимся производить одни и те же действия с несколькими объектами одновременно. Переведите текст в кривые (shift+ctrl+s) и один раз разгруппируйте. Что это даст? В Xara очень чёткая иерархия объектов, как в любом ООП языке. Текстовый объект представляет из себя вот такой объект - Текст.Строка.Буква. То есть когда Вы перевели текст в кривые, то получили группу строк, а строки являются группами букв. Запомните это.

Выделите полученные строки, клонируйте (ctrl+k) и задайте серый цвет. Обратите внимание на маленькие чёрные квадратики в углу каждой надписи. Каждый такой квадратик означает отдельный объект или группу.

Не снимая выделения воспользуйтесь инструментом Contour tool. На верхней панели включите опцию Inset Path - это значит, что контур будет всего один. Так же можно поиграть с опциями соединения углов. Я выбрал округление. Теперь можно потянуть за одну из красных стрелочек и увеличить контур строк. Заметьте именно строк, а не всего выделения целиком. Каждый объект здесь сам за себя. Если бы Вы делали это в группе, то все контуры просто объединились бы.

После применения инструмента контура передвиньте эти строки назад (ctrl+b), что бы впереди оказались чёрные надписи, созданные изначально. Снимите выделение нажав ESC или кликнув на пустое поле. Выделите одну из серых строк и задайте следующий градиент.

Как я сделал такой градиент? Сначала я задал обычный линейный градиент, что бы создать новые ключевые точки на линии нужно просто сделать двойной клик мышкой по ней. Будьте внимательны, кликнуть нужно именно по линии, Вы увидите как меняется курсор, находясь над линией градиента. Задайте всем точкам нужные цвета. Я для наглядности сделал градиент всего из четырёх ключевых точек, на самом деле гораздо красивее было бы добавить сюда белых бликов, чёрных теней и т.д. С этим Вы сможете поэксперементировать самостоятельно.

После того как Вы задали градиент одной строке - скопируйте её в буфер обмена (ctrl+c). Теперь выделите остальные серые строки и нажмите shift+ctrl+a, что бы применить атрибуты строки из буфера обмена. Опять же возвращаемся к наследованию объектов. Если бы эти строки были в группе, то вся группа получила бы один градиент на всех.

Что бы придать немного объёма контуру - выделите все серые строки, клонируйте (ctrl+k), задайте сплошной чёрный цвет, сместите на пару пикселов по диагонали вниз-вправо и поместите позади всех объектов (ctrl+b).

 

Переходим к внутренней части букв. Выделите все чёрные строки и клонируйте (ctrl+k). Задайте одной строке градиенты как показано ниже на рисунке, скопируйте её в буфер обмена (ctrl+c), выделите все строки и задайте атрибуты (shift+ctrl+a). Затем примените Contour tool. Всё как и с серыми строками, но только сейчас Вы должны сделать контур внутрь, а не наружу. Буквально 2-3 пиксела будет достаточно, что бы показать объём.

Объедините все строки в группы. То есть все строки надписи «ГЛАВНАЯ» в одну группу, строки «НОВОСТИ» в другую и т.д. Считайте что надписи почти готовы. Осталось только добавить немного тени и можно ставить на сайт.

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