PSD to HTML: Image Slices

This is the final step in our transformation from PSD to HTML. It doesn’t have to be the last step. Some people make this one of the first steps. It can be helpful to see the images as you’re adding in the other content. On the other hand you may decide to change some of the images as you begin adding content. There is no right answer to this issue, it’s a matter of personal preference and working style.

This tutorial is for Photoshop but the end result of the sliced images would be the same goal in other software. The image slicing is mostly done on the elements of your design that were created in Photoshop. If you have photographic images that exist in separate files and will be included with an img element then you don’t need to use slices on those. But do make sure to size them properly in an image editor before including them. The slicing we’re going to be doing is on background images and graphics used in the design.

The first rule of image slicing is to do as little as possible. This count for both what becomes an image, how many slices you make and how much you slice. For example, if your background is a solid color then there is no need for a slice. If your background image is repetitive then you can often take just a thin slice and use the CSS background-repeat property to make it look bigger. Also many people have found it easier to make a few big images rather than a lot of small images.

Here is the design we want to have in the end. This images is from the Photoshop mock-up:

click to view larger

and here is how it looks so far without the images:

click to view larger

Step 1: Guides

It is much easier to add slices if you have guides in the image. This is because you can have the slices lock to the guides. You add guides by first:


Select the move tool

Make sure Snap to Guides is selected

You have to show Guides to see them and the easiest way to add Guides is to drag them from the Rulers. The Move Tool will allow you to reposition the guides if you make a mistake (when you roll over an existing guide with the Move Tool selected, the tool cursor will change into two parallel lines with arrows pointing in the direction you can move the guide).

Here is our design with guides added. It’s been noted in orange where the three images will be taken from. All of the rest of the page was made with HTML/CSS. Notice that because there is a little drop shadow under the recent and about areas so we made sure to include them in the images. All three of the slices outlined will be background images.

Step 2: Add Slices

Now we can use the slice tool to mark where the slices will be in the picture. The slices labeled in blue are the slices you made. Using the tool, click and drag to outline the areas you want to be sliced. If you make a mistake you can drag the slice area with the selectors that appear around the border when you’re done. The slices in brown are automatically generated and you don’t want to use those.

Before we save the images we want to get rid of the things in the sliced area that will not be a part of the background image. This can be accomplished by turning off the visibility of those layers. Here is where properly layering your file really comes in handy. If you do nothing else with your layers, always make sure to separate out foreground and background. I’m leaving the image in About Me as part of the background image. Later we will add spacing to the left of the title and text in CSS to make it look like it is now.

Step 3: Export Images from Slices

Now we can export the images. We’re going to use the “Save for Web and Devices” dialog boxes: File->Save for Web and Devices. In the dialog that comes up you’ll have to choose image settings. The basic choice is between jpeg and png and gif.

Choose jpeg if the image is a photographic one with lots of variation in the image. If the image is mainly solid colors and text then choose png or gif. PNG is the newer file format and offers some more options. Going forward especially PNG will be the choice. The only reason for gif is that some of the older browsers don’t deal well with PNG. However those browsers are not being used much anymore so more and more people are using PNG instead. It depends a bit on your audience right now.

When you click the Save button you will get another dialog box. In the dropdowns choose Images Only for the Format, and All User Slices for the Slices. This will just export the slices you made. It’s also possible to export one slice at a time by choosing, Selected Slice. For that you have to make sure you selected the slice first. The other option, Settings, lets you specify options like how the image slices will be named.

After you click Save in this dialog the images will be saved. Now you can add them to your backgrounds using CSS.

Step 4: Add the Images Using CSS

Now we will add in the background image for the header.
Here is the CSS

And here is how it looks:

Notice that part of the background image on the left is cut off. That is because we added a background color to the ul element. We don’t need that b ackground color anymore because of the way we sliced the header image so let’s remove it. Here is the CSS:

Next we will add the background images to the Recent Portfolio Additions and About me Areas.

Here’s the CSS:

And here is how it looks.

Again the backgrounds are cut off. This time it is because the height of the div elements are not tall enough. Remember that background images don’t change the densions of the box, they just provide the background for it. In this case there isn’t enough content in the boxes to show all of the background image. Because these two areas have a fixed amount of content that doesn’t grow or shrink, we can use the simple solution of using CSS to make the height of the content the same as the height if the background image.

Here’s the CSS (one image is 97px tall and the other is 100px tall).

And here is how it looks now:

There are only a few things left to do. First, we will get rid of the img element we had in the about me section. This is a good example of how you may change your mind about how to show something as you go along. Originally we were going to use an IMF element and then it changed to a background image. With the img element removed we add  the following CSS to get the text not to overlap the left side of the background image:

The result:

I first added a padding:5px rule that put padding around all of the sides. It’s important not to let the text content come right up to visible edges like the ones you get with a colored background here. Then we added padding-left:95px; to keep the text from overlapping the background image.

NOTICE, that because I added 5px in padding to all sides this increased the overall height of the image by 5px at the top and 5px at the bottom. So I had to subtract 10px from the previous height (100px changed to 90px). Remember that if you’ve defined a width and a height any time you come in and add border, or padding to the top or bottom you will also have to reduce the height by the same amount and any time you add border or padding to the left or right you will have to reduce width by the same amount. Here’s an image of what it looks like if we didn’t reduce the height:

Second let’s add the image elements for the recent portfolio section. We do that by adding four img elements to the HTML.

We also add some CSS to give padding to the element just like with the About Me:

REMEMBER, that because we are adding 5px of padding all around the image we have to reduce our height by 10px (5px from top and 5px from bottom). If we had a width specified we would have also had to reduce that too.

Here’s how it looks:

We now need to add some padding between the images in our CSS:

Here’s how that looks:

Adding the padding made the images too wide and pushed on down below the rest (remember images are inline elements). The problem is that the first image now has 5px padding we added to #recent_portfolio and 5px we added to all images. We need to have just this image not have the 5px of padding-left. One way to do this that is backwards compatible (in newer browsers that deal better with CSS there is a way to select the first item in an element) is to add a class to the first image. This allows us to write a selector for just that class.

Here is the HTML

And here is the CSS

And here is what it looks like:

Here’s the finished product with the Photoshop mockup on top and the HTML/css below.

Photoshop File

Screenshot of Final Web page

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>