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.
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: