Slicing a photoshop file

As part of my education I had to learn to slice a photoshop file in order to create my own interactive landers.

Found this tutorial that explains in very simple terms how slicing works:…ingALayout.php

Handy site for other guides as well

User Comment:
Cool! I learned some things I didn’t know.

I’ll add one more important reason to slice: Makes it easy to create multiple versions of an image on your landing page for split testing.

Here’s how to do it efficiently:

  1. In Photoshop, swap out your old image for the new one. (I like to put the new image in a new layer and turn off the old layer, keeping both.)
  2. Select the image slice with the new image and rename it in the Slice Info Dialogue box (e.g., "image_v2")
  3. With just that slice selected, choose the "Save for Web" command
  4. Click "Save"
  5. Format: "Images Only"
  6. Slices: "Selected Slices"
  7. Don’t change the file name or folder location. It will save your new image into the image folder automatically bases on the new slice name.
  8. Repeat for as many options as you want to save.

Now you can go to your HTML file and change the image name to the new one you want, and presto!, you have your new version.

User Comment:
Nice trick Inversion, will save a ton of time for sure.

User Comment:
Yeah. Once you get all of your HTML set up, the last thing you want to do is mess it up with another Photoshop save-for-web export. (Can you guess how I know?! )

User Comment:
@garyp thanks for the great post man, it really motivated me to learn how to use photoshop. Awesome tutorial.

The Article Published IN 07-31-2011 11:28 AM

Share To More ()