• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1559
  • Last Modified:

Create tabs like amazon..

Hi there,

anyone know of a tutorial for either photoshop or illustator to enable me to create Tabs like the ones on amazon.

The tabs need to be along the top ... and which ever tab is selected then it is connected to the contents i.e. you can tell which tab is selected...

Looking for either a tutorial of how to connect the tabs and show which is active and not... I presume I will design tabs in Photoshop/illustrator and then SLICE these up.... The line just below the active tab I presume should be its own slice ....this i suppose  would be the trick to showing which is active and which are not

Any ideas or help would be really appreciated.

2 Solutions
Look at the way it was done at amazon..

http://g-images.amazon.com/images/G/01/apparel/apparel-tab-btm.gif is an unselected tab.
http://g-images.amazon.com/images/G/01/nav/personalized/tabs/welcome-on-whole.gif is a selected tab.
Just create two versions of each tab. One hilighted, and one unhilighted. Whatever page youre creating at the time, change the corresponding tab at the top to the hilighted tab image.
There's no magic here. Just change the corresponding tab to the hilighted version.
Once you've created the images like Weed described, you can find a good web tutorial for CSS at

These examples are easier to follow that slogging through amazon's code.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now