Part 2 - SlicingThis tutorial teaches you how to slice your PSD's and details that need to be focused on while you are doing so.
You will also learn to save your work!
Alright, lets pick right where we left off.
We have our PSD's open, and our slice tools selected, but how d owe break this image down?
It's simple and to illustrate how you should look at your template I will literally break my own down.
The Header
Alright, hele is my header. Which is we discussed in part 1 of the tutorial is broken down into 3 different images.
Q: How do we break them down?
A: You have to differentiate the important elements from the non-critical ones. Let me illustrate this with my first slice:
As you can see I did not slice all the way to the edge, I only gathered the important parts of the left side of my header. Background colors can be defined with CSS, so there is no reason to make the image bigger than it really needs to be.
Lets continue...
As you can see I have made three slices here.
The Left, the Right, and a piece in the Center.
I will use CSS to repeat the center piece across the whole header.
Let's Do the Whole Thing!
Here I have used the same technique that we discussed when doing the head, on the whole template. I have 11 Basic slices. Already I can see a problem, and now we will talk about it.
Decisions
My template uses a couple techniques that unfortunately conflict with each other.
There is both a gradient background and a drop shadow border.
There are ways to have both using CSS, but until you understand the basics of slicing the code, let's assume there is not.
Q: So how do we dedide which is best?
A: That the beauty of Photoshop! You can see for yourself. In the following examples I will show you what my template looks like with either or instead of both. We will look at both options and decide which is the best, then we will make any necessary adjustments and proceed to coding.
Gradient:
Borders:
This is certainly not a hard decision to make! The Borders version looks by far much better than the gradient only version. Now lets talk about why this was important.
Making it --> Fit <--If you take a look back at the example I showed you with all of the slices present, you may notice that I said that there were 11 slices. However, only 9 are clearly visible.
Q: Where are the missing two slices?
A: These slices are the body Left and Right background images. They are not there in all themes, but they are in this one. Lets take a look at them.
Before we had gotten rid of the gradient the color changed about half way down the page which would have looked awful had we stuck with it. Now though, it looks the same all the way down the side of the page, and we can use a single piece and repeat it all the way to the footer.
Let's Save What We HaveSaving your work can be a little confusing, but there is a really easy way to do it.
FIRST OF ALL SAVE YOU PSD!It is always wise to save your PSD often, Photoshop has a real nasty habit of crashing when you make something that took a long time, or is really nice. So save the PSD often.
NEXT:If you are in CS3 simply click on File-> Save for Web & Devices and choose your formatting.
If you are in Imageready, File->Save Optimized As. You won't have as many options, and there are ways to get it to save to different formats, but for now go with the defaults.
Always select "User Slices Only" otherwise you will have to wade through all of the auto slices to find the good ones.
After you click OK, you will have both an HTML document and an image folder. You are ready to turn your work into a XOOPS Theme.
In Part 3 We will finally see our PSD actualized as a XOOPS theme.
