2002.06.102047 прочтений

"Aqua-подобный" интерфейс средствами CorelDRAW

Теги: Web designer Publish

В этой статье я расскажу о том, как можно создать кнопки интерфейса Aqua средствами CorelDRAW (названия команд и элементов меню относятся к десятой версии редактора).

В этой статье я расскажу о том, как можно создать кнопки интерфейса Aqua средствами CorelDRAW (названия команд и элементов меню относятся к десятой версии редактора).

Все, что так или иначе связано с Macintosh, сейчас в моде. Прозрачные iMac породили массу подражаний — прозрачные дисководы, системные блоки… Некоторые впечатлительные разработчики стремятся создать «Aqua-подобный» интерфейс для рабочего стола Windows; появились сайты, в дизайне которых без труда улавливается влияние оригинального интерфейса.

Итак, зададимся целью создать базовый элемент интерфейса некоего гипотетического сайта — кнопку прямоугольной формы.

1. По умолчанию DRAW настроен на работу для полиграфии (цветовая модель CMYK), и мы попросту не сможем воссоздать тона, использующиеся в интерфейсе Aqua (модель RGB). Для расширения диапазона отображаемых цветов отключим в программе цветокоррекцию. Заходим в меню Tools (Инструменты), Color Management (Управление цветом) и просто щелкаем по каждой стрелке, представляющей зависимость одного устройства от другого — до тех пор, пока целых стрелок не останется. Жмем ОK. Заметьте, насколько ярче стали образцы цветов на панели Color Palette.

2. Создадим прямоугольник, который будет играть роль основы для кнопки. Для этого выберем инструмент Rectangle Tool и нарисуем объект произвольной формы. Затем перейдем в панель свойств Property Bar и зададим для него размеры, например, 80x25 мм.

Основа кнопки готова

3. У всех Aqua-кнопок края закругленные — придадим кнопке «пухлость» и мы. Убедимся, что установлен режим Round Corner Together (панель Property Bar), и подведем курсор к любой из угловых точек прямоугольника — форма курсора изменится на специфическую (т. н. режим редактирования контрольных точек, Edit Mode). Нажав на мышку, «захватим» точку и просто протянем ее в любом направлении — углы прямоугольника начнут закругляться. Ведем курсор до тех пор, пока его боковые стороны не станут совсем полукруглыми. Отлично! Это и есть основа будущей кнопки.

4. Теперь позаботимся о ее внешности. Для этого нам понадобятся два дополнительных объекта, имитирующие блики света на объемном предмете, — один в нижней части кнопки, другой — в верхней. Начнем с нижнего, для чего продублируем имеющийся прямоугольник. Это можно сделать различными способами: просто передвинув объект правой кнопкой мыши или при помощи команды Duplicate (Edit, Duplicate) — новый объект автоматически смещается относительно источника на величину, указанную в Tools, Workspace, Edit, Duplicate placement, что не всегда удобно.

Я пользуюсь иным вариантом, помещая новый объект точно поверх другого, — для этого достаточно нажать клавишу <+> на цифровой клавиатуре. Сократим длину второго прямоугольника (80-85%) и высоту — до 3,5 мм (размеры удобно контролировать по Property Bar). Нажатие клавиши при изменении геометрии объекта с помощью контрольных узелков приводит к его симметричным трансформациям.
Нижний блик готов

5. Теперь разместим блик внизу нашей кнопки-основы, оставляя все же некоторый зазор между нижними границами двух объектов. Чтобы отцентрировать блик относительно главного элемента — кнопки, выделим оба объекта, перейдем в меню Arrange, после чего — в Arrange and Distribute. В появившемся окне выберем опцию Align Centers Horizontally. После применения операции центры обоих объектов окажутся выровнены. Еще проще добиться того же эффекта, нажав клавишу <С> (align Centers).

6. В качестве верхнего блика может выступать прямоугольник, по длине равный нижнему, а высоту его увеличим раза в полтора. Скруглим его края и выровним относительно базового прямоугольника любым из уже известных способов, а затем, зажав (фиксирует передвижение по осям), передвинем вверх, оставив некоторый просвет между верхними кромками объектов. Теперь оба блика выровнены относительно центра основного объекта и находятся на некотором расстоянии от его краев (см. рисунок).

 

Подготовительные работы завершены

 

7. Для придания нашей кнопке дополнительного «объема» дадим небольшое перспективное искажение верхнему блику. Для этого переходим в меню Effects, Perspective. Форма курсора меняется снова, сигнализируя о специфическом режиме работы. Щелкаем на нашем объекте и видим на нем сетку из пунктирных линий — она дается специально для оперативной оценки результата искажений. Подведя курсор к одному из контрольных угловых узелков эффекта, зажмем клавиши и и потянем узелок к центру объекта — пока фигура не примет форму, показанную на рисунке.Теперь настало время раскрасить кнопку. Чтобы присваивать объектам различные цвета, нам понадобится панель цветов Color Docker (меню Window, Docker, Color).

 

8. Самый удобный для подбора цветов — режим HSB (Hue/ Saturation/Color). Почему? В нем цвет, яркость и насыщенность подбираются по отдельности (сначала желаемый оттенок, а затем его «сила»). А привычный всем RGB для такой работы совершенно не приспособлен (для изменения насыщенности выбранного цвета придется изменять все три составляющие его компонента, что очень неудобно). В докере из меню цветовых моделей выбираем HSB. Наступает самая творческая работа — подбор цветов.
Подбираем цвета из интерфейса Aqua

Для основы кнопки я предлагаю выбрать темный синий. Вводим значения 220, 100 и 60 в поля и жмем Fill, для верхнего блика — чистый белый, для нижнего — 190, 100, 100. Затем у всех фигур удаляем окантовку (выделяем все и правой кнопкой щелкаем на образце цвета No Color в палитре цветов).

Объемность — одним движением

9. А теперь — самый эффектный шаг: воспользуемся инструментом Interactive Blend. Выбрав его, подведем курсор к нижнему блику, нажмем левую кнопку мыши и проведем вектор вверх, по направлению к центру основы. Как только инструмент «захватит» объект, отпускаем мышку. DRAW создаст плавное перетекание из одной формы в другую с одновременным плавным изменением цвета в промежуточных объектах.

Кнопка готова!

10. Завершающий штрих: придадим реалистичности верхнему блику. Выберем инструмент Interactive Transparency и протянем его вектор строго сверху вниз (клавиша ) — установленные по умолчанию цвета создадут плавный переход от полной непрозрачности к прозрачности. Начальную точку эффекта установим точно на верхнюю границу объекта, а конечную — на нижнюю. Чтобы нижний край имел различимое начало, выберем в палитре цветов образец с оттенком 90% Black и перетянем его на контрольную точку эффекта с черным цветом. В результате прозрачность внизу объекта будет неполная.

С текстом кнопка выглядит даже лучше

11. Какая же кнопка без надписи? Давайте напишем CorelDRAW! Берем шрифт без засечек типа Arial и устанавливаем соответствующий кегль (например, 30 пунктов). Готово! Чтобы создать эффект полупрозрачности кнопки, добавим надписи небольшую тень — инструментом Interactive Shadow тянем вектор эффекта несколько вниз и вправо. Параметры тени, стоящие по умолчанию, оставим без изменений (Drop Shadow Opacity — 50%, Feathering — 15, Direction — Average). Цвет тени должен быть темный, в синей гамме — довольно неплохо смотрится (240, 100, 40). Осталось только поместить верхний блик над текстом. Выбираем блик, нажимаем (переместить на самый верхний уровень) — и он занимает самое высшее положение на текущем слое.
 
12. Единственное, что можно добавить, — тень от кнопки (она привнесет еще немного объема). Для этого надо выбрать основу кнопки — только осторожно, поскольку она входит в состав эффекта Blend. Для текущего выделения предназначена панель Status Bar. В ее поле Object Information отображается статус выделенного объекта. Щелкаем на границе кнопки, в Status Bar должно отобразиться что-то типа «Control Rectangle on Layer 1». Если вместо этого отображается «Blend Group on Layer 1» — значит, вместо объекта ошибочно выбран эффект перетекания.
Полностью готовый результат  
Как вам результат? Не правда ли, с помощью мощных инструментов CorelDRAW создавать различные эффекты объемности очень легко? Но это еще не все. Усложним задание — в следующем примере будем использовать рассмотренную технику для создания круглых кнопок в стиле интерфейса Aqua. Создание круглых кнопок в стиле интерфейса AquaДля начала вспомним возможности инструмента Brush — эффективного средства для трансформаций объектов, появившегося еще в девятой версии программы. Это одна из разновидностей Artistic Media, в свою очередь входящая в группу инструментов Pencil. Основное предназначение Brush — искажение формы объекта вдоль выбранной траектории кривой. Действие чем-то напоминает Envelope (Конверт), но Brush оперирует только с одной направляющей (проходит через центр объекта), согласно форме которой и проводятся трансформации

В дальнейшем это свойство нам понадобится для упрощения формирования бликов на круглой кнопке — при этом не потребуется ни вручную передвигать контрольные узелки, добиваясь симметрии фигуры, ни использовать Envelope, не приспособленный для создания симметричных искажений.Чтобы почувствовать возможности Brush, проведем эксперимент с буквой «Ш», воспользовавшись инструментом Text и шрифтом Arial. Затем создадим полукруглую кривую. Для этого инструментом Freehand создадим прямую, по размерам сопоставимую с буквой, и превратим линию в кривую (переходим в режим редактирования — щелкаем правой кнопкой по объекту и из появившегося списка выбираем To Curves). Подводим курсор к середине кривой и, удерживая кнопку мышки, изгибаем объект.

Архив журналов в свободном доступе.

На ту же тему:
  • КПД кооперации
    Время исполнителей-одиночек прошло. Самым действенным способом создания эффективного web-сайта компании - не просто "визитной карточки", а сложного инструмента взаимодействия с клиентами и партнерами, органично сливающегося с общим фирменным стилем -
  • Технологии векторной графики в Сети
    "Меня кормят идеи", - именно этой крылатой фразой часто заканчивал Остап Бендер свои рассуждения о жизни. За прошедшее с тех пор время ценность новаторских идей многократно возросла, что особенно заметно в таких высокотехнологичных областях, как...
  • Flash и анимация в Интернете
    Небольшая программа для создания и оживления векторной графики со временем выросла во Flash - незаменимый инструмент для создания Web-анимации...
  • Xara X
    В августе 2000 года компания Xara опубликовала пресс-релиз, согласно которому месяц спустя на ее сайте можно было ознакомиться с новой версией популярного векторного редактора Corel Xara под псевдонимом "Xara X".
  • Сад расходящихся посетителей
    Мало кто задумывается о том, что список ключевых слов Internet, состоящий из ⌠Информации■, ⌠Интерактивности■ и ⌠Скорости■, неполон без слов ⌠Упущенная Прибыль■.
  • Оборудование для Web-строительства
    Программы разработки для Web год от года становятся все более похожими друг на друга.

comments powered by Disqus