Solved

Create tabs like amazon..

Posted on 2004-09-27
2
1,544 Views
Last Modified: 2010-04-03
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.

Ian
0
Comment
Question by:ianinspain
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 30

Accepted Solution

by:
weed earned 250 total points
ID: 12165314
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.
0
 
LVL 5

Assisted Solution

by:AntonioP
AntonioP earned 250 total points
ID: 12171057
Once you've created the images like Weed described, you can find a good web tutorial for CSS at
http://www.brainjar.com/css/tabs/

These examples are easier to follow that slogging through amazon's code.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Read about why website design really matters in today's demanding market.
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question