Слои

Введение в слои

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

Для отображения слоев служит Object Manager (Диспетчер слоев) – рис. 5.1. По умолчанию в программе имеется Guides (Слой направляющих) и Layer 1 (Главный слой).

(рис 5.1) Диспетчер слоев для пустой страницы CorelDRAWДиспетчер слоев для пустой страницы CorelDRAW

Теперь создайте несколько объектов и выполните команду Window(Окно)-Dockers(Докеры)-Object Manager(Менеджер объектов) – рис. 5.2. Мы видим, что все три объекта расположены в главном слое.

(рис 5.2) Три объекта (Star, Ellipse, Rectangle) отображены в диспетчере объектовТри объекта (Star, Ellipse, Rectangle) отображены в диспетчере объектов

Свойства слоев

Для начала создадим прямоугольник на главном слое Layer 1 (Слой 1) – рис. 5.3.

(рис 5.3) Прямоугольник размещен в главном слое Layer 1Прямоугольник размещен в главном слое Layer 1

Для создания нового слоя щелкните мышкой на стрелку, расположенную в правом верхнем углу диспетчера объектов и из появившегося при этом меню выберите команду New Layer (Новый слой) – рис. 5.4.

(рис 5.4) Создан новый слой Layer 2Создан новый слой Layer 2

Щелкнув имя слоя в диспетчере объектов, вы сделаете второй слой активным. Если теперь нарисовать эллипс, то он расположится во втором слое программы (рис. 5.5).

(рис 5.5) Эллипс размещен во втором слое Layer 2Эллипс размещен во втором слое Layer 2

Когда слоев несколько, то можно скрывать отдельные слои, а заодно-и размещенные в них объекты. Для скрытия слоя щелкните по нему и из контекстного меню снимите галочку с параметра Visible (Видимый) – рис. 5.6.

(рис 5.6) В контекстном меню активна команда Visible (Видимый)В контекстном меню активна команда Visible (Видимый)

Вы можете скрывать слои, блокировать их и размещать в нужном вам порядке. Блокируется слой, для того, чтобы не внести в него случайно не нужных изменений. Блокировка и разблокировка слоя производится щелчком мыши по пиктограмме Lock or Unlock (Блокировать или разблокировать) – рис. 5.7

(рис 5.7) Показана пиктограмма блокировки слояПоказана пиктограмма блокировки слоя

Манипуляции со слоями

В начале этой лекции мы создали два объекта и разместили их в разных слоях – рис. 5.8.

(рис 5.8) Два объекта размещены в разных слояхДва объекта размещены в разных слоях

Если мы перетаскиванием мышки поменяем на диспетчере объектов слои местами, то расположение объектов поменяется следующим образом (рис. 5.9).

(рис 5.9) Порядок слоев измененПорядок слоев изменен

Мышкой на диспетчере объектов объекты можно перетаскивать из одного слоя в другой (рис. 5.10).

(рис 5.10) Из слоя 2 эллипс был перемещен в слой 1Из слоя 2 эллипс был перемещен в слой 1

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

Пример 5.1. Создаем из изображения эффект пазла

Для начала посмотрим на фото и полученный из фотографии пазл – рис. 5.11.

(рис 5.11) Возможно, что этот дизайнерский прием потребуется вам в вашей работеВозможно, что этот дизайнерский прием потребуется вам в вашей работе

Но, прежде чем начать работать с растровым изображением немного потренируемся. Для этого нам понадобятся два прямоугольника и три окружности (рис. 5.12).

(рис 5.12) Учимся делать пазлыУчимся делать пазлы

Форму прямоугольников мы изменим, а именно, воспользовавшись функцией Convert to Curves (Преобразовать в кривые) посредством Shape (Форма) инструмента немного выгнем их стороны – рис. 5.13.

(рис 5.13) Стороны прямоугольника отредактированыСтороны прямоугольника отредактированы

Выделим левый верхний эллипс и левый прямоугольник и применим к ним команду Arrange(Упорядочить) - Shaping(Придание формы) - Shaping(Придание формы) - Weld(Объединение), а для правого верхнего эллипса поступил аналогично, но выполнил не логическое сложение, а логическое вычитание Trim (Обрезка). Этими командами мы и будем делать пазлы – рис. 5.14.

(рис 5.14) Два пазлаДва пазла

Теперь будем строить мозаику 4 на 3 (рис. 5.15).

(рис 5.15) Делаем 12 пазловДелаем 12 пазлов

Применяем к фигурам логическое сложение и вычитание (рис. 5.16).

(рис 5.16) Заготовка под растровую картинку из 12 пазловЗаготовка под растровую картинку из 12 пазлов

Для красоты пазлы раскрасим, а позднее дадим им абрис 2 мм – рис. 5.17.

(рис 5.17) Каркас под растровое изображение готовКаркас под растровое изображение готов

Каркас необходимо сгруппировать Ctrl+G или Arrange(Упорядочить)-Group(Сгруппировать). Выбираем фотографию, при этом лучше, чтобы каркас был больше, чем фото (но не обязательно).

В завершение - выделяем фотографию и используем команду Effects(Эффекты) - Power Clip(Контейнер)- Place Inside Container(Поместить в контейнер). Появившейся на экране ПК большой черной стрелкой щелкаем на наш каркас – рис. 5.18.

(рис 5.18) Пазлы служат контейнером для фотоПазлы служат контейнером для фото

Пример 5.2. Стеклянные объекты

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

Стеклянная 3D cфера (шар)

Инструментом Ellipse (Эллипс), удерживая клавишу Ctrl, нарисуйте окружность диаметром примерно 50 мм. Выберите инструмент Interactive Fill tool (клавиша G), в меню свойств этой заливки выберите тип заливки - Radial(Радиальная), а цвет желтый по краям и белый в центре окружности – рис. 5.19.

(рис 5.19) Заливка окружности цветом произведенаЗаливка окружности цветом произведена

Для более точной настройки градиента заливки используйте диалоговое окно фонтанной заливки Fountain Fill (клавиша F11), и установите переключатель Custom. Выделите крайний левый цветовой маркер и нажмите на кнопку Other (Другие цвета), чтобы получить доступ к большему количеству цветов. Выставите цвет C40, M50, Y100, K20 – рис. 5.20.

(рис 5.20) Настройка параметров левого маркера градиента заливкиНастройка параметров левого маркера градиента заливки

Аналогично - выделите крайний правый маркер и установите цвет заливки C0, M0, Y100, K0.

(рис 5.21) Настройка параметров правого маркера градиента заливкиНастройка параметров правого маркера градиента заливки

Двойным кликом добавьте два новых маркера в положение на счетчике Fill midpoint 25% и 80% и установите цвета C0, M5, Y100, K20 (для нового левого маркера) и C0, M0, Y100, K0 (для нового правого маркера) соответственно. Затем нажмите на кнопку ОК. Для завершения настройки цвета в меню свойств инструмента Interactive Fill tool в окне Fountain Fill Angle and Edge Pad выставите значение 5%. Командой Outline Pen (Абрис) - No Outline (Без абриса) удалите обводку окружности – рис. 5.22.

(рис 5.22) Окно для точной настройки фонтанной заливкиОкно для точной настройки фонтанной заливки

Для создания эффекта блика создайте вторую окружность приблизительно 30 мм. в диаметре, залейте белым цветом, удалите обводку и разместите в верхней части первой окружности. Не снимая выделения, примените Interactive Transparency (Интерактивная прозрачность) и тяните маркер заливки от верхней части окружности вниз. На панели свойств установите параметры заливки – Linear (Линейная) и Normal (Нормальная). Таким образом, при помощи наложения двух объектов вы создали реалистичный стеклянный объект – рис. 5.23.

(рис 5.23) Иллюзия стеклянной 3D сферы реализованаИллюзия стеклянной 3D сферы реализована

Те же действия помогут вам придать стеклянный вид любому объекту.

Совет

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

Стеклянная кнопка для веб-дизайна

Нарисуйте прямоугольник (Rectangle Tool, F6) примерно 120х40мм. Пропорции прямоугольника зависят от текста, который вы хотите поместить на кнопке и от эмпирических стандартов, принятых для кнопок в веб-дизайне. Выделите прямоугольник и закруглите у него все углы, потянув их инструментом Shape (Форма) – рис. 5.24.

(рис 5.24) Углы прямоугольника скругленыУглы прямоугольника скруглены

Выберите инструмент Interactive Fill и примените градиентную заливку с параметрами по умолчанию, потянув мышкой сверху вниз. Затем откройте диалоговое окно настройки градиента (F11) и активируйте переключатель Custom. Прежде чем закрыть окно, установите значение Edge Pad 5% и тип заливки Radial (Радиальная). Далее нажмите на кнопку ОК и удалите у объекта обводку (рис. 5.25).

(рис 5.25) Задаем параметры фонтанной заливкиЗадаем параметры фонтанной заливки

Примечание

В порядке эксперимента вы можете задать тип заливки Linear (Линейная) с тремя маркерами: маркер 0% – C100, M20, Y0, K80, маркер 100% – C10, M0, Y0, K0, новый маркер 40% – C100, M20, Y0, K20.

Нарисуйте еще один прямоугольник размером примерно 100х20мм, закруглите у него углы, залейте белым цветом, удалите обводку и разместите его поверх первого по центру и вверху. Выбрав инструмент Interactive Transparency (Интерактивная прозрачность) потяните мышкой сверху вниз, чтобы применить прозрачность. В меню свойств установите для параметра Edge Pad значение 8%. Выделите инструментом Pick (Указатель) маленький прямоугольник и скопируйте его, нажав + (или Ctrl+D) на клавиатуре. Трансформируйте новый прямоугольник, потянув за нижний центральный маркер вниз и залейте голубым цветом из палитры. Выберите инструмент Interactive Transparency (Интерактивная прозрачность) и установите маркеры так: белый снизу, а черный - сверху. Стеклянная кнопка готова – рис. 5.26.

(рис 5.26) Стеклянная кнопка готоваСтеклянная кнопка готова

Вы можете изменять цвета заливки, создавая различные цветовые варианты кнопок.

Осталось написать текст посередине кнопки с помощью инструмента Text (Текст). Для точного центрирования текста объедите в группу все элементы кнопки (Ctrl+G), затем выделите группу и текст и нажмите C для центрирования по вертикали и E – по горизонтали – рис. 5.27.

(рис 5.27) Текст на кнопке размещенТекст на кнопке размещен

Пример 5.3. Rollover (Делаем кнопку интерактивной)

В этом примере мы заставим объект реагировать на действия пользователя, т.е. сделаем его интерактивным. Интерактивные графические объекты, которые при воздействии пользователя меняют свой внешний вид (или свое поведение), называют Rollovers (Ролловерами). В предыдущем примеры мы сделали два объекта, возьмем любой из них, например, левый, и разгруппируем (Ctrl+U) – рис. 5.28.

(рис 5.28) Объекты из предыдущего примераОбъекты из предыдущего примера

Откройте меню веб-инструментов командой Window (Окно)-Toolbars(Панели инструментов)-Internet (Интернет), затем выделите весь объект целиком. На панели Internet нажмите на кнопку. Будем задавать для круглой кнопки три эффекта (рис. 5.29-5.31).

(рис 5.29) Normal (По умолчанию) – исходный вид объектаNormal (По умолчанию) – исходный вид объекта (рис 5.30) Over (Над). Курсор мыши наведен на объектOver (Над). Курсор мыши наведен на объект (рис 5.31) Down (Под). На объекте мы щелкнули мышьюDown (Под). На объекте мы щелкнули мышью

Пусть исходный вид объекта – это круглая кнопка с тенью. Тень нарисуем инструментом Interactive Drop Shadow (Тень). Для назначения кнопке эффектов (Normal, Over, Down) нажмите на кнопку, чтобы установить активное состояние кнопки (сейчас это Normal).

Теперь выберите в выпадающем меню Over и создайте на кнопке надпись. Так вы создадите активное состояние кнопки при наведении мышкой на кнопку.

Далее создайте состояние объекта при нажатии мышкой на кнопку – Down. Это будет исчезновение тени и текста. Для удаления тени инструментом Pick (Указатель) щелкните на тени и в меню Effects (Эффекты) выберите команду Clear Drop Shadow (Удалить эффект тени). Текст также удалите.

Осталось нажать на кнопку Finish Editing Rollover и Rollover будет готов.

Чтобы просмотреть результат, достаточно включить параметр. Сохранить ролловер можно командой Export HTML – рис. 5.32.

(рис 5.32) Окно экспорта ролловера в HTMLОкно экспорта ролловера в HTML

Здесь же есть кнопка Browser Preview для просмотра ролловера в браузере.