Slicing a Graphical Interface using Adobe Photoshop

In this tutorial we will discuss how to slice those cool looking graphical interfaces. If you don't know what I'm referring to check two of them out here and here. They can be quite time consuming to make and slice, but once done correctly you will have a nice interface to show off on your site. Depending on how complicated you want your interface to look, it can take anywhere from an hour to several to make it look and act the way you want.

The first thing you will need to do, and what I recommend, is to sketch out the way you want your interface to look, and to work. Draw lines as to how you wish to have it divided up. Take a look at this example.

Here is the completed image I had done in photoshop, prior to labeling any buttons or adding any guides to slice the image.

Now, since I had previously determined where I wanted to add rollovers, and other effects, I knew where I wanted to add the guides and slice the image up into sections. Next you want to click on view, then rules. This will help you place the guides you will need to slice your images. You also want view, and snap to guides selected, so once you place your guides, and your ready to slice your image, you can easily select the sections that are sliced.

OK now lets place our guides. Moving your mouse into either the top or left hand ruler sections ( the white area with the numbers ), hold the left mouse button down and drag out a guide, and place it where you wish it to go. Here is an example picture of how I sliced up the image using guides.

Next Page:::

Return to the Photoshop tutorial index