Tabs with Photoshop and CSS | Digital Media Programming | Ben Dunkle, Professor

What we are doing is making a series of images that look like "tabs"
and using them as a "navbar" for our menu web site. CSS is perfect for
makin gtabs because it lets us change the "stacking order" of the tabs;
thus we can make a tab appear to be in front of all the others when
the user visits that page.

Start in Photoshop
Make a new document in Photoshop, and decide on a width and
height. Make surte the Transparent button is checked (A). My site will
feature tabs that are 80px wide x 25px high. Your tabs will be different.
A
Make a tab. There are lots of ways to do this; the following is a
simple, straightforward way to make boring, yet highly useable, tabs.
Experiment with other tools and Layer Effects (B).

Select the shape tool (C). Make sure that Fill Pixels is checked (D), and
that Anti-Aliased is unchecked (E).

D E

B
 Tabs with CSS and Photoshop | Digital Media Programming | Ben Dunkle, Professor

Select the Type tool from the toolbar (F) and click on the tab.
Photoshop creates a new layer, and names it whatever you type (G). I

Don't worry if you can't see the text, or if the font is ugly; you will
H
change that in the next step.
G
Select the Move Tool (H), and click on your type. The easiest way to do
this is with the arrow keys, but you could just click and drag it. Change
the font, font size, font color, etc. in the top-pallette-thingy (I) (3 QPs to
F
the first person who emails me the technical name for this).

When you are stoked about your tab, select File>Save For Web from
the menubar. In the window that pops up, make sure that Gif is
selected (J), Colors are set to 8 or 16, and Transparency is checked (L).
Click save and call the file "sunday.gif" in your images folder of your
username_pr1_207b folder.

Return to your layer with the tab graphic on it, and change the color,
layer style, etc. Image>Adjustments>Hue Saturation is a nice tool for
this.

Select the text tool and click on the word "Sunday". Change it to
"Monday". Save for web, using the methods previously discussed. J
K
Continue steps x through y until all 7 tabs have been created and saved L
into your images folder.

The HTML (content)

If we start off with a series of <div> tags, one pair for each day of the
week, and each one containing a tab graphic with a link to the page,
we get:

<div id="sunday"><a href="sunday.html">

<img src="images/sunday.gif width="80"

height="80" border="0"></a></div> M
<div id="monday"><a href="monday.html">

<img src="images/monday.gif width="80"

height="80" border="0"></a></div>
and so on, for all the days of the week (if we get a chance at the
end of the semester, we'll see how a dynamic language like PHP can
streamline all this code).
 Tabs with CSS and Photoshop | Digital Media Programming | Ben Dunkle, Professor

The CSS (form)

Since my tab gifs are 80x25, those are the values I will use in my
stylesheet. I also need to consider where the tabs are going to be
positioned on the web page. I could put them right next to eachother,
but it will look radder if I overlap them a bit. With this in mind, we'll
use the following css code:

#sunday {

position:absolute;

width:80px;

height:25px;

left:100px;

top:0px;

#sunday looks good, but now #monday needs to be positioned to the

right of #sunday. So...

#monday {

position:absolute;

width:80px;

height:25px;

left:170px;

top:0px;

Note the left position has been changed to push the tab 170px from
the left side of the browser window. Furthermore, the tab is 70px to the
right of #sunday. this is how we get the "overlapping tabs" look.

Continue with the rest of the days of the week and watch the tabs lay
neatly on top of eachother.

To bring a tab to the front of the stack, add z-index:1 to the style.
Try different z-index values for each day's style to control the order
of your tabs.