Что такое ролловер в coreldraw

Что такое ролловер в coreldraw

info@design-M.ru

• 
• 
• 
• 
• 
• 

Уроки Photoshop

• Работа с планшетом
• Работа с текстом
• Эффекты
• Дизaйн/рисование

Уроки Corel Draw

Важное

Стеклянные кнопки, Создание Rollover`а

Речь пойдет о создании стеклянных полупрозрачных кнопок. На первый взгляд может показаться, что этот эффект создан с помощью 3D-программ, но на самом деле вы можете добиться такого эффекта, используя всего лишь два-три правильно настроенных векторных объектов. В этом уроке вы научитесь создавать стеклянные объекты в CorelDraw.

Нарисуйте окружность диаметром 50 мм (Ellipse tool), удерживая Ctrl.

Выберите инструмент Interactive Fill tool (G), в меню свойств выберите тип заливки Radial, а цвет желтый и белый

Для точной настройки градиента используйте диалоговое окно Fountain Fill (F11), выберите пункт Custom. Выделите крайний левый цветовой маркер и нажмите кнопку Other, чтобы получить доступ к большему количеству цветов. Выставите цвет C40, M50, Y100, K20. Затем так же выделите крайний правый маркер и установите цвет C0, M0, Y100, K0. Двойным кликом добавьте два новых маркера в положение 25% и 80% и установите цвета C0, M5, Y100, K20 и C0, M0, Y100, K0 соответственно.

Copyright © 2012 Все права зашишены.

CorelDRAW: Making objects for web

CorelDRAW enables us to export several objects that can be optimized to view in the web browser. We can also make interactive rollovers through objects in CorelDRAW. Besides, we can insert bookmarks and hyperlinks to any drawing.

This chapter includes the following essential topics:

• Exporting bitmaps to the web
• Applying and saving web presets
• Creating rollovers
• Exporting objects along with backgrounds and transparent colors
• Inserting hyperlinks and bookmarks to documents

Exporting bitmaps to the web

CorelDRAW allows us to export some file formats that are web compatible:

While describing some exporting options, we can preview a picture along with four distinct types of setting configurations. We can also prepare many preset settings, file formats, color range, image quality, file size, compression, and download speed. We can examine previews by panning and zooming in the preview window.

To adjust an object-export preview

1. Press File > Export for > Web.
2. Implement any tasks from the below tasks:
   • Press on the button, i.e., Full preview over the view toolbar to view a bitmap in an individual preview frame.
   • Press on the button, i.e., Two vertical previews to view a bitmap’s two versions in any side-by side frame.
   • Press on the button, i.e., Zoom to fit, to fit the button inside the preview window.
   • Press on the button, i.e., Zoom to actual size to show the bitmap at the actual size.

Applying and saving web presets

Many web presets permit us to save various settings to export file formats that are web compatible.

To save the preset to export web-compatible picture

1. Select the file format in the list box of Format from the dialog box of Export for web.
2. Select any settings that we wish to save as the presets.
3. Press an arrow near to the list box of Preset, and press Save preset.
4. Fill the preset name inside the box of the File name.
5. Press Save.

Creating rollovers

The rollovers are some interactive and efficient objects that modify in appearance if we point or click them. We can make rollovers using various objects. We should save a rollover for the SWF format (Macromedia Flash) for adding the rollover objects for any web design.

To make the rollovers, we insert the rollover states which are as follows:

Normal: It is a button’s default state if no activity of a mouse is related to this button.

Over: It is a button’s state if a pointer passes on it.

Down: It a clicked button’s state.

To make the rollover object

1. Choose the object.
2. Press Effects > Rollover > Create rollover.

To make the rollover object

1. Press Window > Toolbars > Internet.

2. Press any rollover object for choosing it.

3. Select the button, i.e., Edit rollover over the Internet toolbar.

4. Select any state from the list box of Active rollover state:

• Normal
• Over
• Down

5. Change the properties of the object, like color.

6. Press the button, i.e., Finish editing rollover.

To view properties of the rollover

1. Press Window > Dockers > Object manager.

2. Press the layer and page where rollover resides.

3. Press the name of the rollover, and expand some states like Normal, Down, and Over.

Exporting the objects with backgrounds and transparent colors

CorelDRAW enables us to export various paletted-based bitmaps, like 8-bit PNG or paletted GIF, along with backgrounds and transparent colors. These bitmaps may include the objects, like logo and buttons, which are mostly used over many webpages with paletted or colored backgrounds.

To save any bitmap with the transparent background

1. Select the paletted file format, like 8-bit PNG or GIF in the list box of Format from the dialog box of Export for web.
2. Implement any tasks from the below tasks:
   • Select the checkbox of Transparency inside the Settings area to create the object transparent background.
   • Choose the Eyedropper tool from the toolbar, and press an image to select any color. Select the button, i.e., Make the selected color transparent inside the Settings area to create the chosen color transparency.

Next Topic CorelDRAW Tables

For Videos Join Our Youtube Channel: Join Now

Feedback

• Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Python Design Patterns

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Стеклянные кнопки, Создание Rollover`а

Речь пойдет о создании стеклянных полупрозрачных кнопок. На первый взгляд может показаться, что этот эффект создан с помощью 3D-программ, но на самом деле вы можете добиться такого эффекта, используя всего лишь два-три правильно настроенных векторных объектов. В этом уроке вы научитесь создавать стеклянные объекты в CorelDraw.

Создание стеклянного шара

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

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

1. Нарисуйте окружность диаметром 50 мм (Ellipse tool), удерживая Ctrl.
2. Выберите инструмент Interactive Fill tool (G), в меню свойств выберите тип заливки Radial, а цвет желтый и белый

3. Для точной настройки градиента используйте диалоговое окно Fountain Fill (F11), выберите пункт Custom. Выделите крайний левый цветовой маркер и нажмите кнопку Other, чтобы получить доступ к большему количеству цветов. Выставите цвет C40, M50, Y100, K20. Затем так же выделите крайний правый маркер и установите цвет C0, M0, Y100, K0. Двойным кликом добавьте два новых маркера в положение 25% и 80% и установите цвета C0, M5, Y100, K20 и C0, M0, Y100, K0 соответственно.

4. Для завершения настройки цвета в меню свойств инструмента Interactive Fill tool в окне Fountain Fill Angle and Edge Pad выставите значение 5%. Удалите обводку с окружности.

Для эффекта блика создайте вторую окружность приблизительно 30мм в диаметре, залейте белым цветом и разместите в вверху и в центре большого круга, чуть ниже его края. Не снимая выделения, примените Interactive Transparency Tool. Тяните маркер сверху окружности на три четверти вниз.

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

Те же действия помогут вам придать стеклянный вид любому объекту. Для этого необходимо помнить, что нужно уделять особое внимание градиентной заливке и направлению эффекта прозрачности.
Теперь на основе рассмотренных шагов мы создадим стеклянные кнопки.
1. Нарисуйте прямоугольник (Rectangle Tool, F6) примерно 115х30мм. (пропорции прямоугольника зависят от текста, который вы хотите поместить на кнопке).
2. Выделите прямоугольник и закруглите у него все углы при помощи введение значения 100% в полях Rectangle Corner Roundness в верхнем меню. Обратите внимание, что замочек Round Corners Together должен быть включен. Вы также можете скруглить углы вручную, потянув их инструментом Shape.

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

3. Выберите инструмент Interactive Fill и примените градиентную заливку с параметрами по умолчанию, потянув мышкой сверху вниз. Затем откройте диалоговое окно градиента (F11) и перейдите в закладку Custom. В данном примере были использованы такие цвета: маркер 0% — C100, M20, Y0, K80, маркер 100% — C10, M0, Y0, K0, новый маркер 40% — C100, M20, Y0, K20. Прежде чем закрыть окно, установите значение Edge Pad 5%. Нажмите ок и удалите у объекта обводку.

4. Нарисуйте еще один прямоугольник размером примерно 100х13мм, закруглите у него углы, залейте белым цветом, удалите обводку и разместите его поверх первого по центру и вверху, как показано ниже.

5. Выбрав Interactive Transparency Tool потянине мышкой сверху вниз, чтобы применить прозрачность. В меню свойст установите для параметра Edge Pad 8%.

6. Выделите инструментом Pick Tool маленький прямоугольник и скопируйте его, нажав + на клавиатуре. Трансформируйте новый прямоугольник, потянув за нижний центральный маркер вниз и зайлейте цветом Cyan из палитры.
7. Выберите Interactive Transparency Tool и установите маркеры так, как показано на рисунке ниже. Для того, чтобы немного смягчить эффект, перетащите из палитры цветов образец 60% черного цвета на нижний белый маркер. Для завершения смените режим наложения с Normal на Add в меню свойств. Ваша кнопка готова.

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

Для создания эффекта прозрачного стекла вы можете использовать эффект линзы, который будет искажать поверхность, на которой располагается ваш объект.
Для начала сохдайте больший прямоугольник, чем ваша кнопка, который послужит фоном. В данном примере была использована растровая текстура. Чтобы применить такую текстуру, выберите Interactive Fill Tool и найдите в выпадающем меню Fill Type параметр Bitmap Pattern.
Создайте прямоугольник с закругленными углами для будущей кнопки и откройте докер Lens (Alt+F3). Выдерите параметр Fish Eye. Измените значение Rate до тех пор, пока искажение фона не будет достаточным и нажмите Apply или Enter. Чем больше значение параметра Rate, тем сильнее искажается объект.
Затем создайте два меньших прямоугольника для бликов, как было описано в предыдущем примере, залейте их белым и примените Interactive Transparency Tool (сверху-вниз для меньшего, снизу-вверх для большего).

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

Подготовка кнопки для веба

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

Для создания эффекта Rollover мы будем использовать Internet Toolbar.
1. Разгруппируйте элементы созданной на предыдущих этапах кнопки (Ctrl+U).
2. Выберите Interactive Drop Shadow Tool и кликните на нижнем прямоугольнике. Удерживая Ctrl, потяните от центра к низу. Таким образом вы примените тень с параметрами по умолчанию. В меню свойств установите смещение по X=0, по Y=–0.7мм, прозрачность (opacity) 80, размытие (feathering) 7; цвет тени выберите cyan.

3. Откройте меню веб-инструментов Window > Toolbars > Internet, затем выделите всю кнопку целиком. Нажмите на кнопку Create Rollover (крайняя левая). Убедитесь, что кнопка Live Preview of Rollovers выключена.

4. Нажмите на кнопку Edit Rollover (вторая слева), чтобы установить активное состояние кнопки (сейчас это Normal). Так как мы уже создали основную кнопку, изменять в в ней для этого состояния мы ничего не будем, поэтому перейдем сразу к режиму Перекрытия.
5. Для того, чтобы переключить активное состояние на перекрытие мышкой, выберите в выпадающем меню Over. Выделите надпись и измените ее цвет. В этом примере был выбран белый, чтобы при наведении мышкой на кнопку, ее текст подсвечивался.

6. Теперь перейдите в активное состояние нажатия мышкой на кнопку – Down. Инструментом Pick Tool кликните на тени и в меню Effect выберите Clear Drop Shadow. Этим действием вы удалите тень от кнопки.
7. Оставаясь в режиме редактирования состояния Down, выделите все объекты и откройте докер трансормации расположения объектов (Arrange > Transformations > Position, Alt+F7). Введите значение H=0, а V=–0.7мм и нажмите Apply или Enter. Как вы помните, такие значения мы вводили для эффекта тени, а значит сейчас мы смещаем кнопку на то же место, где находилась тень.

8. Закройте окно трансформации и нажмите на Finish Editing Rollover в меню веб-инструментов. Rollover готов.

Чтобы просмотреть результат, достаточно включить параметр Live Preview of Rollovers.

CorelDRAW. Создание ролловера

Добрый день. Сегодня статья про создание с помощью JavaScript так называемого эффекта перекатывания.

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

Браузер Internet Explorer поддерживает события мыши прямо для тега IMG .

Событие onMouseOver отвечает за наведение курсора мыши на рисунок, а onMouseOut за вывод курсора за пределы изображения.

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

Обращаться к изображению можно разными способами, например, через массив document.images[«имя рисунка»].src или просто по имени, как дается в примере, document.Имя рисунка.src . Уникальное имя для изображения указывается внутри тега IMG парамером name . Изменение любого изображения дает большой простор для дизайнерских изысков. Однако, следует учитывать, что браузеры по разному работают с размерами изображения. Internet Explorer вычисляет ширину и высоту каждого изображения и соответственно меняет этот параметр для каждой картинки при ее смене. Netscape берёт размеры первого загруженного изображения, а следующие масштабирует до его размеров. Для преодоления данного расхождения делайте изображения для эффекта перекатывания одного размера.

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

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

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

Предварительная загрузка изображений

При создании эффекта перекатывания, загрузка происходит только первого рисунка. При наведении курсора мыши на изображение, начинается загрузка последующих рисунков, что происходит не мгновенно и портит впечатление от ожидания. Поэтому желательно изображения загружать заранее, еще до их демонстрации. Для этого используется объект new в JavaScript. В примере, показанном ниже, функция preloadImage загружает изображения в память и проверяет, все ли они уже загружены. Вызов функции происходит с помощью события onLoad указанном в теге BODY .

function newImage(arg) if (document.images) rslt = new Image();
rslt.src = arg;
return rslt;
>
>

var preloadFlag = false;
function preloadImages() frame = new Array();
a = preloadImages.arguments;

if (document.images) for (i=0; i

Похожие публикации:

• Предыдущие версии файлов
• Автономный установщик обновлений виндовс
• Лучшие программы для создания загрузочной флешки
• Настраиваем теневые копии для общих папок