Figure 1 |
STEP 1 
Open the interface you created in tutorial 11 up state or any other interface you want to cut up. Now drag guides to each side of the interface.
To drag a guide you must have the rulers turned on in your option settings. To turn on rulers select View, then click Show Rulers. Then use the move tool to create guides.
• Save your work!
|
|
Figure 2 |
STEP 2 
Now you need to create guides for the inside cuts. Drag horizontal guides down to the middle of each button and two vertical guides, one for each side of the buttons.
You should now have something that looks like figure 2.
• Save your work!
|
|
Figure 3 |
Figure 4 |
|
STEP 3
OK, now you should duplicate your document because we need to flatten it. Once you duplicate it flatten it and then keep your other document for the down state buttons. Use the rectangular marquee tool and select the two outside edges and copy and paste them into their own documents.
You should now have two images that look like figure 3 and figure 4. I named mine lside for left side and rside for right side.
You should create an images folder inside the folder you are going to place your Web site in. Then save these two images in the images folder. I saved them at 64 colors for a nice look but small file size.
|
|
|
STEP 4 
Now you need to copy and paste each middle section into it's own document and save it. So start at the top and select the very top middle box outlined by the guides. Copy and paste it into a new document then save it, we saved it as title. Keep doing this for all of the buttons also, we named the buttons but1up, but2up, etc...
You should now have images that look like the images to the left.
Save them to the same images folder as the two side image above.
|
|
|
STEP 5 
OK, now it is time to create the down state images. First close your upstate document and go to the original interface document. Then duplicate that and go to the layer with the button effect on it.
Now double click the little effect icon or go to layer, effects, and bevel and emboss feature. You then simply change the effect to down state and that's it, flatten your document.
Now, save your images as in step 4, but name them different for the down state. I named mine but1dn, but2dn, etc...
You should now have images that look like the images to the left.
Save them to the same images folder as the rest of the images above.
|
|
|
|
STEP 6 
OK, your done saving the images and now you just need to put them together. You can now close PhotoShop and open HomeSite or whatever program you use to create your Web pages.
We need to make a table to put the images in.
You can copy and paste code below to use the table we created for out interface. Copy and paste the table below into your Web site.
Now, Fill in each space indicated in the table with the down state images you saved.
You should have an interface like the one to the left now :-) So where is the mouse over effect and when do we use the down state buttons, right?
Continue on to the next tutorial for the JAVA Script coding that will add the down state images and make them interact with your mouse cursor.
• Tutorial 13, Learn how to make this interface work.
|
|
Photoshop 5.5 Tutorials
