Photoshop Tips

Slicing Images 
for HTML

1.gif (235 bytes) Let's start with a common situation.

We have a navigation type device for the web with a few section buttons and a home button.

Press Ctrl-R (Mac: Command-R) to show rulers.  Also go to VIEW and make sure "Snap to Guides" is checked.

Note: You can make just about anything for a navigator in Photoshop and then use this way to cut it up to put on your site.

2.gif (225 bytes) Click and hold down the mouse button on the ruler and drag out a guide line.  Its ok to let go,  you can move the guide any time by clicking on it again.

3.gif (235 bytes) Repeat step 2 until you have all your buttons in there own little cells.

Last select the Rectangular Marquee tool and select your buttons, use the guides for a path.

Now go to Edit>Copy Merged to copy the button into memory. Open a new image and Paste it in. Now save it.

Continue till you have them all saved, then import them into your HTML page and put it all together.

Back

 

Home | Site Map | Search | Tips | Store | Free | Resources | Community | About | Email
Designs By Mark.com. © 1997 - 2000 Mark Monciardini All Rights Reserved.