tabs with photoshop and css

8/9/2019 Tabs With Photoshop and CSS

http://slidepdf.com/reader/full/tabs-with-photoshop-and-css 1/3

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.

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).

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

A

D

C

E

B



G

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).

Don't worry if you can't see the text, or if the font is ugly; you will

change that in the next step.

Select the Move Tool (H), and click on your type. The easiest way to dothis 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

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.

Continue steps x through y until all 7 tabs have been created and saved

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>

<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).

F

H

I

JK

L

M

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.

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

tabs with photoshop and css

Documents