Image slicing can be used for website design, graphic user interfaces or just getting one big image and splitting it into a bunch of smaller images. This technique will work for Photoshop CS1, CS2, CS3 and CS4.

For this example, we are going to be splitting a menu bar (which is usually found at the top of the website) into separate image files:

  • Go to File, New or pres Control + N
  • Select 700 width and 40 Height
  • Add a gradient overlay for a background. This is your background (Layer 1). Go back to the arrow key – now we are going to add text.
  • Select the font you want and type in the text you want in your menu bar (for this example, we are creating a Home Page, About us, Services, Download Centre and Contact us pages). Align the text within the bar.
  • Now we are going to add some effects. On the bottom right-hand side of the screen, double click on the text layer so that the Layer Style box pops up. Add a gradient overlay (for this example, we are adding a grey overlay) and click OK.
  • Go to the Slide Tool on the left hand side of the page. Now select each page (such as Home page and About us page) within the bar. There will be a small box around each option. Simply drag the box over each separate button that you are going to create.
  • Now click on File and Save For Web and Devices. A box will pop up where you can see all the slices. Select the Preset that you want on the right hand side of the page (in our example, we are using PNG-24 which is the highest quality PNG) and press Save. You can save the menu bar buttons as HTML and Images or as Images only.

This creates an HTML document that pieces each of the menu buttons back together so that it looks the same as it originally did in Photoshop, they are now all in sections as different image slices.

Contact WSI if you need a helping hand with Digital Marketing