Slicing a web page mockup for website use

A web page mockup is sliced into particular images when the mockup is ready to be converted into an HTML and CSS template for a typical website use. In Inkscape 0.48, there is an extension that helps with the slicing process and we will use it in this recipe to slice up the mockup we created in the previous recipe.

Getting ready

Not all mockup elements need to be sliced or exported into images to be used on a website. CSS can take care of a lot of the styling and positioning and is the preferred way because of the performance gains and ease of maintenance. The parts that are usually sliced out of a mockup are those that can't be easily recreated with CSS like gradients (CSS 3 specification includes gradients) and complex graphics elements.

Before we start with the slicing process we should first take a look at the mockup and decide which parts will be sliced out.

Since we still can't fully rely on CSS gradients (yet!) we will use the most common approach...