Simple Layout tutorial - Slicing - Part 2

Part 2

So we have our layout - now to slice.

When slicing a layout you've got to consider a number of things in a number of areas:

Header:
1. Is the header going to be expanding / shrinking to fit the screen?
2. If so what is the part that'll need to repeat to give the effect of a fluent 'single' header?

Content:
1. Are the content boxes going to expand to fit the screen?
2. If so what 'sections' do I need - Corners? Side parts? Header and footer backgrounds?
3. If not do I need a header background or a single header image? The content area background? The footer?

I'll now move onto the slicing of the layout created in Part 1.

With your document open grab the slice tool (press K) and zoon into your header, for the header in the layout I created we'll need 3 slices:

1. The image on the left with the header text to start the header.
2. A repeating background to fill the header.
3. The image on the right to finish the header off.

Now to slice the layout - the first slice is straightforward - just slice the header area up to the edge of the text like the image below:



Now there's going to be the repeating slice that'll give the impression of a single header image. As this is going to be repeating image it only needs to be as wide as the repeating area - in this case it can be just 1pixel wide.



Now to slice the right hand side image - for this it's the same technique as the first header slice - only this time it's on the other side of the header.



Now to slice the content boxes.

With these we'll need 4 slices although with other content boxes you may require more - this is a simple example where 4 will be needed (each coerner) and the rest can be filled with colour in the tables once coded.

Start off by slicing the top left corner - making sure to leave enough height for a header (if you're going to have one in the top section of the table)



Note the height of the slice - this will allow for the header.

Now slice the other corners in the same way.





The main content box will be sliced in the same way.

Now for saving for the web.

Click 'File' and choose 'Save for web'.

Now there are a couple of ways of doing things, you can save and save all the slices (remember not just the slices you made are saved - there's others that are created to fill in the smaces where you didn't slice. Doing it this way means you are left with unused images - you can always go through and delete them afterwards. (Choose the 'All Slices' option when choosing your filename and directory to save in)

I'll be saving a different way: if you click on a slice and then hold SHIFT and click another it makes sure both are selected, doing it this way you can select just the slices you need - you can then choose the 'Selected Slices' option when choosing a location and name to save you files under.

When you save Photoshop will create a directory called 'images' in the directory you're in. So if you choose the directory like:

C:\Documents and Settings\MATT\Desktop\website_tut

It will actually save the images in:

C:\Documents and Settings\MATT\Desktop\website_tut\images

When you choose the directory to save it in after you've gone through the optimising section you can choose to save the 'Images Only' or 'HTML and Images' in this tutorial I'll be using 'Images Only' as the HTML is not needed (we'll be coding our own).

In the image below you can see some of the options for saving. (It's a link as the image is bigger)

Linky

Now that's the slicing and saving done!

Part 3 will be on coding this into an expanding layout.