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.
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.
In 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:
- Open integration/Demos/layout_withFolders.psd.
- Choose the Slice Tool.
- Using a drag-n-drop technique, draw in the slices. See below slices 01 and 02.
- Hide the sample content that should be replaced later with actual data.
- Your design should look similar to the image below.
- Go to File > Export > Save for Web (Legacy).
- Choose the proper settings, in this case PNG-24 for each slice. Click Save.
- Choose to save both the HTML and images in any directory you choose. I usually create a special folder for organization. Click Save.
- Save the Photoshop image as layout_SLICED.psd and close Photoshop.