Chameleon web buttons

27/04/2009

Web button templates are only as good as the number of designs they can be customized to fit. The most important feature, when it comes down to web button templates, is their ability to change colors as the users require. Here’s a neat trick that you can use to make a stylish glossy web button with “chameleon” abilities.

Web-to-web menu button

Before you start

Web-to-web before you start

/

  • Add a page frame (Layout/Page Setup/Add Page Frame). This will create a rectangular shape with the exact same size as the document size of your template and place it as a bottom layer.
  • Input the dummy text, set its horizontal alignment and turn it into a variable web-to-print field called Text.

In a nutshell, we’ll make one of those glossy web buttons out of one variable solid color shape and two semi-transparent glow shapes on top of it. The entire button will be able to change its color by simply changing the bottom layer solid color shape.

Read more about types of web buttons and checkout the web buttons product guide.

Dynamic imaging template requirements

Web button templates are intended for on-screen viewing rather than a print process. Therefore, you need to set up the template file to be recognized and rendered for dynamic imaging such as internet banners. These templates are treated differently from other web-to-print templates because their primary purpose is viewing on screen.

Web-to-web units in pixelsMake sure that the template:

  1. has only 1 page
  2. the units are set to pixels
  3. the size of the page is no more than 1400px x 1400px
  4. you use RGB colour space

Button elements

Rounded corners/
Select the rectangular shape that CorelDRAW generated as the background frame shape and round it’s corners by changing the corner radius values in the top properties bar.

Web-to-web button shape/

The result should be similar to this.

/

Glow

Web-to-web glow shape/

Use the CorelDRAW Rectangular tool to draw a smaller rounded white rectangle on top of the background one.

/

CorelDRAW transparency tool/
With the new rectangle selected, activate CorelDRAW’s Transparency tool and drag from top to bottom over the shape to add a Linear transparency.

/

Web-to-web top glow/

The result should be similar to this.

/

Web-to-web button glows/

Repeat this step to add a bottom glow as well.

/

Note. You can assign a variable color field to the glow as explained in the Variable gradient fill technique.

EPS image selection

To change the overall color of the button we only need to change the color of the bottom solid fill shape. We can use this feature to give users a choice of button colors in a single template.

UPDATE: You can use the method explained below, but you can also use variable shape colors instead of EPS stock images.

Select the background shape, change its color and export it (Ctrl+E) as an EPS file. Repeat this step to end up with as many color choices as you wish. Read more about EPS stock images.

Web-to-web convert to bitmap/

/

/

After you have all the eps color files, select the background shape, go to Bitmaps/Convert To Bitmap and turn it into a variable image field called Button color.

/

/

/


/

Web-to-web glossy web button

/

The result should be similar to this.

/

/
Upload all the .eps background shapes in your image gallery and assign them to the background image placeholder as an image selection.

Download the EPS files we used in this example.

Color picker

Depending on the goal you’re trying to achieve, you can assign a selection of images for background color variations as explained in this example. The advantage of this approach is that it also lets you give users texture or pattern variations.

Another way to go is to assign a color picker to the image field or shape, giving users the option of picking any color from the palette.

Icon selection

Sometimes buttons are not only identified by the text on them but from the icon (symbol) as well. Learn how to assign a selection of icons in a web menu button template.

All done!

Our web-to-print software can handle this effect easily! Upload the template into your catalog and test it.

Web-to-web glossy buttons/

Try this web-to-print template.

/

Download the FREE CorelDRAW template file.

Useful links

Here are some more tutorials on the subject:

See also: