Screenshot of Tri-C Homepage

Slicing your image:

Step-by-step instructions

  1. Turn on your Rulers
    • Click View and select Rulers or use the keyboard shortcut Ctrl + R
  2. Bring in your Guides by left clicking and dragging the guide out from one of the Rulers.
    • Place the guides on the image where you would like to create each slice.
  3. Find the Slice and Slice Select tools in your tool pallete.
    • Select the Slice Tool
  4. Now click the Slices from Guides button in the tool menu bar at the top of the workspace.
    • You have now created slices of your image. You will see a small numbered icon confirming your image has been sliced.
  5. At this point you may need to combine portions of the image.
    • Choose the Slice Select tool and click the first section you want to combine.
    • Next, hold down the Shift key and click on each additional section you would like to combine into a single slice.
    • Right-click and choose Combine Slices to create a single slice from the selected areas.
    • Repeat the step of combining slices until you are satistfied with the sliced image.

Saving your sliced image:

Step-by-step instructions

  1. Now that you have your image slices we're ready to optimize and save them.
    • Select File > Save for Web & Devices from the top menu
    • Go through and choose each slice one at a time and determine which file format and settings work best.
    • We are trying to obtain the best looking image while reducing the file size.
  2. For photographs or areas with a good amount of detail and many colors choosing JPEG will be the best option.
    • Set your quality to 51%and work from there until you are satisfied with the image quality and file size.
  3. For areas with fewer colors, solid colors or gradients you should try using the PNG format.
    • PNG-8 works well for solid colored sections and gradients
    • PNG-24will work best for areas with many colors and more detail
  4. Once you have chosen a file type and the settings for each slicke it's time to save.
    • Click Save in the upper right corner of the window.
  5. Choose where you would like to save your images (Photoshop creates a folder inside the folder your select)Next, name your file and make these changes to the file save options below.
    • Save as type: HTML and Images
    • Settings: XHTML
    • Slices: All slices

The sliced image saved and displayed in a table: