Slicing a website into smaller images
As a beginner it is best to follow the steps below to slice a website correctly.
1. Create slice of large content area
2. Create slices for any graphic based buttons
3. Create slice for the main headers and footers
4. Create slice for all stretching elements
5. Export the document in HTML and Images
Things to remember
- no 2 slices should overlap each other
- each slice should be as large as possible to avoid any exssesive images.
- slices should line up with one another where possible to fill any blank areas. This will also help decrease the total number of images needed.
- if you intend to place text over an image the slice should be at least 20px tall
Before you begin
Before you begin you will need to remove all text and images from the design that can be added later on. This includes text in your content area, images in your content area, navigational links that can be accomplished using simple text layout functons.
Example
1. Create slice for main content box. Notice that this box doesn't have any background imagery, just color. If your main content box has a background image you will run into problems when trying to setup the template for streatching. A background can be used here but should not be included in the design durring slicing. Also notice that there is no content/ text in this area right now
2. Creating slices for all button/ clickable areas. The next step is to add slices to the document for any areas that a user can click on. Whether this is a vertical stack as shown below or a line of buttons accross the top this step should be next. Also, for ease of creating the links later on each button should be contained in a single image. Don't split up a button into more than 1 slice.
3. Create Slices for the Headers and Footers. This step creates the images or series of images for the top and bottom of the design. You will want the total of the images along the top and bottom to go to the very edge of the design and to create a "block" so that all the images combined make a solid rectangle as shown below.
4. Stretching areas. Next create the images for areas that will stretch as the design gets larger. These slices if thought about as individual images need to be able to stack on top of themselves repetatively without any noticeable change. If you do not intend for your site to stretch you do not need to worry about these images stacking. at this point you will also want to add slices for any additional areas that have not been included in the previous steps.
5. Export. The final step is to to export the document (save for web if using photoshop). Durring tis task you are telling the program to create individual files for all the different slices and to create an HTML table that defines how all the slices then fit together. The settings you use for this step will define how your site design behaves. Photoshop doesn't give options here but fireworks does and I suggest you use the 1pixle spaces image option to maintain your site design. Once you have finished exporting you can open the HTML page that was created in a web browser and it should look like your original design.
if you now look in the images folder that was created you will see all the different images used to make the final output. For the above example we ended up with the following images.
it is now time to transform this crude webpage into a template to use on all of your pages