Web tabs

09/06/2009

Tab-based website designs have been around for while. They make the site look better,  easier to navigate, but are not always easy to implement.  Tabs can viewed as a group of web buttons. Here are a few ideas how to create great web tab templates for dynamic imaging without becoming a CSS guru.

CSS vs. Images

Most professionally designed websites have complex CSS and sliced images to give tabs layered appearance. Our approach is simpler because all the effects are already part of the tab’s image. You can do much more with images than with CSS, including using any fonts, tabs on an angle, etc.

Dynamic imaging web tabs

View more cool tabbed websites design examples.

Things to consider:

  • Tabs need to have their edges set the way that they blend with the rest of the panel
  • In most cases tabs should have two versions (active and inactive)
  • Web tab templates should be able to change color to fit the rest of the site’s design (use RGB colors).

Dynamic imaging template requirements

Web tab 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

Example

Let’s make a web tab dynamic imaging template.

Dynamic imaging - draw tab shape/

Draw the shape of the tab keeping in mind that at least one of its edges will be connected to the rest of the panel that tab is for. (Ex. The bottom one).

/

/
Draw a shape overflowing the tab shape, convert it to bitmap (Top menu/Bitmaps/Convert to bitmap) and turn it into a variable image field.

Dynamic imaging - tab color/

/

Place the bitmap inside the tab shape as a PowerClip (Effects/PowerClip/Place Inside Container). This will allow the user to change the color of the tab. Learn how to make  chameleon web buttons.

Glows

Add semi-transparent shapes on top of the tab shape to achieve glow effects.

Dynamic imaging transparent shapes/

This example has two of those semi-transparent shapes (1.glow and 2.shadow). We will use the shadow only for the inactive version of the tab.

/

Dynamic imaging - conditional object removal/

/

Group the bottom shadow shape along with a transparent variable text frame to give it a conditional object removal option.

Tab text

Dynamic imaging - tab text/

Input a dummy text frame and turn it into a variable text field.

Note. You can also assign a selection of images for icons on the tab.

Edit input fields

Tab color

After you’ve uploaded the template in your catalog, click on Images link in the top menu.

Dynamic imaging add a color picker option/

Click Edit in the Field Settings section and assign a RGB color picker to the field.

Disable the File Upload and Internet image options to make the color picker the only option for the image field.

Active/Inactive tab

Dynamic imaging input field/

Give users the option of choosing a version of the tab with or without the bottom shadow with a simple check-box.

/

Dynamic imaging checkbox/

/

/

Click on the image field name to open the text field editor, type a value and one emty line under lists of values.

All done!

Try this dynamic imaging template.

Try other web tab templates.

Download the FREE CorelDRAW template file.

In action

Users can easily implement the tab into their websites. Here are a few samples of the template web tabs in action.

Click on the images to view the page.

Tabbed website sample I

Tabbed website sample II

Other useful articles on this subject

You can view some more guides and articles about designing and creating web tabs at:

See also: