Step 4: Slice
It is time to slice up the layout for the web now that it is ready.
Slicing is a process where we decide which parts of the layout need to stay as images and which parts could be recreated in HTML. The more the images the more the file size and so more the the loading time.
Some images that will need to be sliced are:
- Background gradients
If we decide that something needs to remain an image in our final web page we need to decide which format will suit it best (i.e. gif, jpg, png). We need to optimize these images to load quickly on the web (smaller files size) and look good at the same time.
Some points to keep in mind while optimizing images are:
- Images with flat colours will be best optimized as .gif files. Gif files also allow transparency. Gif files can also be animated.
- Images with many colors e.g. photos, will be better optimized as .jpg files.
- .png files can retain vector information and transparency
This is what our layout looks like now:
- Let us first slice the logo. To do this follow these steps:
- Select the slice tool
- Create a rectangle around the logo
- You have now created a slice
- You will be able to see a green tansparent rectangle over the logo.
- You will also notice a new layer in the Web layer in the Layers panel, called ‘slice’. Rename this to ‘logo’.
Export this slice by right clicking on it and selecting ‘Export Selected Slice’.
Similarly slice and export the photo and a thin slice of the header background gradient.
You can optimize the slices by comparing the quality and file size with various options by using the 2-up and 4-up preview tool.
You can also export all the sliced images together by:
- From the main menu select ‘File’
- Select ‘Export’
- Export: Images Only
- Slices: Export Slices