Web tabs
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.
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.
Make sure that the template:
- has only 1 page
- the units are set to pixels
- the size of the page is no more than 1400px x 1400px
- you use RGB colour space
Example
Let’s make a web tab dynamic imaging template.
/
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.
/
/
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.
/
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.
/
/
/
Group the bottom shadow shape along with a transparent variable text frame to give it a conditional object removal option.
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.
/
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
/
Give users the option of choosing a version of the tab with or without the bottom shadow with a simple check-box.
/
/
/
/
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.
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.
Other useful articles on this subject
You can view some more guides and articles about designing and creating web tabs at:
- Design a Web 2.0 tab with Photoshop at hongkiat.com
- Classic tab menu creation at flashexplained.com
