Home > Questions and Answers > General Questions

Slicing a photoshop file (5)

07-31-2011 11:28 AM #1 Gary (Member)
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:

http://www.tutvid.com/tutorials/phot...ingALayout.php

Handy site for other guides as well

07-31-2011 08:27 PM #2 inversion (Member)

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.

07-31-2011 08:32 PM #3 Gary (Member)

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

07-31-2011 08:48 PM #4 inversion (Member)

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?! )

08-01-2011 12:11 AM #5 canopus (Member)

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

Home > Questions and Answers > General Questions