Breaking Down the Look

Contact Us or call 1-877-932-8228
Breaking Down the Look

Breaking Down the Look

Using Photoshop to Slice a Design

Graphic tools, such as Adobe Photoshop, may be used to create and separate elements of the main design.Photoshop Slicing Example

Slicing Rules

The process of "slicing" a design means that we separate out elements that will later be placed back together using a technology such as CSS (Cascading Style Sheets). Elements should be able to house data and yet layer onto others to form the original design. The design also needs to be what we consider "fluid," allowing it to grow and shrink with the content. Make sure the "growable" areas have artwork that, if repeated, will look natural to the design.

Map Twice, Slice Once

As the saying goes to cutting lumber, "Measure twice, cut once..", we may also apply this to the slicing of an image. I always use a sketch as a road map thinking about the code and how the design may need to flex and grow. So many variables go into this process, it is helpful to map it out as seen below.

Marked SketchIn this sketch, I have marked the regions of the design that will grow and remain static. Other regions will overlay the top of the main background. The pixel dimensions will be helpful when it is time to build the CSS rules to piece everything back together. We will use this sketch and go further into that topic later.

Slicing demo using Photoshop:

  1. Open integration/Demos/layout_withFolders.psd.
  2. Choose the Slice Tool.Slice Tool
  3. Using a drag-n-drop technique, draw in the slices. See below slices 01 and 02.Page with Slices
  4. Hide the sample content that should be replaced later with actual data.Hidden Sample Content
  5. Your design should look similar to the image below.Example Design
  6. Go to File > Export > Save for Web (Legacy).File Export Save for Web (Legacy)
  7. Choose the proper settings, in this case PNG-24 for each slice. Click Save.Settings
  8. Choose to save both the HTML and images in any directory you choose. I usually create a special folder for organization. Click Save.Save Optimized As Dialog Box
  9. Save the Photoshop image as layout_SLICED.psd and close Photoshop.