Don’t have time to slice?
If you haven’t already, you can Download the PSD Files for the pre-sliced templates.
Part 1: Slicing in Photoshop
Before I start slicing I take a minute and figure out what I’ll need to slice.
Typical elements that need to be sliced
- Photographs
- Icons
- Repeating background patterns
- Logos
- Rounded corners
- Text using non-web safe fonts
Typical elements that don’t need to be sliced
- Most solid colors
- Text
- Borders
Basically, you need to think about what can’t you achieve using CSS. For beginners this can be tricky but with experience it becomes second nature.
Step 1: Slice up the foundation
This is what I see needs to be sliced when I prepare to slice the foundation.
Note: This image isn’t exact but it does give you an overall idea of how it should look.
As you see, we only need 5 slices in order to build our foundation. So let’s do this now.
1. Open the file Home.psd that you downloaded at the beginning of this tutorial.
2. Hide the Header, Body and Footer groups in the layers palette. It should look similar to the picture below.
4. Using the slice tool, create a slice in the top left hand corner of the layout.
5. Right Click the new slice and name it site_background and give it the following parameters.
I’m not going to show you how to create every single slice in Photoshop. Instead I will provide you with a table with the slice names, dimensions and coordinates. Use that information to create the slices.
6. Create the remaining slices with the following information.
| Slice Name: | Coordinates (x, y) | Dimensions (w x h) |
|---|---|---|
| site_background | (0, 0) | 1 x 170 |
| main_background | (0, 170) | 1 x 430 |
| header_background | (80, 0) | 1120 x 170 |
| base | (80, 170) | 1120 x 430 |
| site_bottom | (0, 705) | 1 x 15 |
7. Once you’ve created all your slices click File > Save for Web and Devices
From here, go through each slice and choose the appropriate file format. As a rule of thumb use jpeg for photographs and smooth gradients and gif or png for solid colors or text. If you’re not sure if you want to use gif or png, go with the one that is smaller.
For each slice I applied the following settings:
| Image: | File Format |
|---|---|
| site_background | PNG-8 |
| main_background | PNG-8 |
| header_background | JPEG |
| base | JPEG |
| site_bottom | GIF |
8. Click Save
9. From the dialog box that pops up navigate to your tutorial directory and create a new folder called images.
10. Select All User Slices from the drop down menu and click Save to save those slices into the images folder.
Step 2: Slice up the Main Menu and Logo
The Main Menu
For the main menu I’m going to create something called CSS sprites. What that means is I’m going to combine different states (idle and over) into one image.
1. Go back to Home.psd and reveal the Header group in the layers palette. You will see the logo and menu appear.
2. Hide all the text in the header group.
3. In this next step you will create 5 more slices. They should look like this when you’re done.
Please follow these parameters to create your slices:
| Slice Name: | Coordinates (x, y) | Dimensions (w x h) | Description |
|---|---|---|---|
| logo | (170, 6) | 245 x 40 | This is your main logo |
| [untitled] | (694,23) | 50 x 23 | This will be the active state of our CSS sprite |
| [untitled] | (748, 23) | 3 x 23 | The right side rounded corners on the active state |
| [untitled] | (860, 23) | 50 x 23 | The idle state of our CSS sprite. |
| [untitled] | (934, 23) | 3 x 23 | The right side rounded corners on the idle state. |
4. Select the second 50×23 menu slice and press Ctrl + C to copy.
5. Create a new Photoshop document and paste that slice into the document.
6. Change the height of the canvas from 23px to 46px. It should look like this:
Notice how it doubles the height of the canvas?
7. Go back to Home.psd and select the first 50×23 menu slice and copy it into your clipboard.
8. Go back to the document you just made and paste that right below the first one.
Your new document should look like this:
9. Change the canvas size to 75 x 46.
10. Select Layer 2. Select and fill the white space with the light blue. It should look like the image below.
Repeat this so that both layers extend to the right.
11. Save this file as main_menu.png in your images folder.
12. Repeat steps 1 – 7 for the two remaining thin menu slices. Make sure that the dark one is on top.
13. Save them as main_menu_right.png in your images folder.
The Logo
14. Go back to home.psd
15. Select File > Save for Web and Devices
16. Select the logo slice and change it to PNG-8
17. Save it into your images folder.
18. Save and close home.psd
Step 3: Slice up the Favicon
The favicon is the little icon that appears in your bookmarks and the top of your browser. It’s a good way to visually differentiate your site from others in your bookmarks. Plus it just makes it look more professional.
Install the .ico plugin
The .ico plugin makes it possible to create transparent favicons that will work across all browsers.
1. Download the plugin here: http://www.telegraphics.com.au/sw/
2. Extract the files to your download directory.
3. Copy ICOFormat.8BI to the File Formats directory in your Photoshop Install.
(Usually it is C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats\)
Slice the favicon
4. Open Photoshop
5. Create a new document that is 16 x 16. Name it favicon. (See below)
6. Remove the background layer.
7. Open Home.psd
8. In the layers palette go to Header > Logo
9. Drag the Leaves smart object from that layer to favicon.
10. Resize the Leaves smart object until it looks like this. (Note: I zoomed in to 700%)
11. Go to File > Save As
12. Choose ICO from the drop down list and save it in the images folder.
13. Your favicon is finished!
Step 4: Slice up the Home Page
1. If it isn’t already, open Home.psd and make sure that the Body group is visible.
2. Expand the Body group and hide the following layers.
This will hide most of the content in the sky region.
3. We are going to slice up the following elements:
4. Create 8 slices with these parameters.
| Slice Name: | Coordinates (x, y) | Dimensions (w x h) | Description |
|---|---|---|---|
| photo | (170, 180) | 238 x 217 | The photograph |
| intro_background | (410, 180) | 700 x 217 | The Introduction background. |
| quote | (178, 444) | 15 x 15 | A nice hanging quote that gives the testimonials style. |
| chart | (433, 441) | 70 x 70 | The icon for Business Planning. |
| people | (433, 526) | 70 x 70 | The icon for Target Marketing. |
| chart | (433, 617) | 70 x 70 | The icon for Consulation. |
| calendar | (886, 445) | 14 x 15 | The icon for events. |
| home_content_background | (170, 694) | 940 x 1 | Creates the gray background for the first and third column on the home page. |
5. Click File > Save for Web and Devices and set the following formats
| Slice Name: | File Format |
|---|---|
| photo | JPEG |
| intro_background | JPEG |
| quote | PNG-8 |
| chart | PNG-8 |
| people | PPNG-8 |
| coffee_cup | PNG-8 |
| calendar | PNG-8 |
| home_content_background | GIF |
6. Save the slices to the images folder.
7. Close Home.psd.
Step 5: Slice up the About Page
1. Open About.psd
2. We’re only going to create two slices, when you’re done it should look like thi:
3. Create two slices with the following parameters.
| Slice Name: | Coordinates (x, y) | Dimensions (w x h) | Description |
|---|---|---|---|
| bullet | (202, 527) | 17 x 17 | They stylized bullet for the definition list |
| content_background | (170, 694) | 940 x 1 | The generic, two column background. |
4. Go to File > Save for Web and Devices
5. Give the slices the following formats
| Slice Name: | File Format |
|---|---|
| bullet | PNG-8 |
| content_background | GIF |
6. Save them to the images folder.
7. You’re done slicing!
Comments
Post by hajan reckiest on September 1, 2009
very good download
Post by Antwan on September 10, 2009
Hey! Thnx for this tutarial, it helped me to understand the basics of slicing and creating a solid -cross browser- webpage. With my PHP expierences this will help me master all elements to create a dynamicly perfect website! PS1: Are you planning to add a part of navigation user firnedly through the menu? PS2: Seems you forgot somethings (I didn't have all the images in te process) and what exactly is the styles.htm for..?
Post by Joshua Bolduc on October 3, 2009
Styles.htm is the place where you can put all your generic html elements (headings, images, paragraphs etc) that you'll use throughout the rest of the website.
It's a great way to see how all the elements will work together and also ensures that you don't forget anything.
Post by Avijit Dey on October 30, 2009
very good to learn in very short period....
Post by pascal on November 4, 2009
Thanks voor the great tut!
Post by Bob on November 9, 2009
Great tutorial. I particularly like your CSS breakdown/organization methodology. Thanks!
Post by Albin on December 13, 2009
Hai! thanks. I am not able to downloade the psd file you have given. It is downloaded without layer i.e., Composited layer (0ne layer). What should I do?
Post by Joshua Bolduc on December 13, 2009
It sounds like you're opening the file with Adobe Acrobat. Make sure you open it with Photoshop.
Post by Twitz on January 24, 2010
Hmmm. Wouldn't it be easier to just do a File / Export to the CSS and HTML after the slices are all added and let PhotoShop create the files for you? :o)
Post by Joshua Bolduc on January 24, 2010
Hi Twitz, That is an excellent question.
There are a few reasons why you shouldn't export directly from Photoshop.
Photoshop doesn't generate standards based code.
The design won't look the same in all browsers.
Photoshop can't create repeating backgrounds which are crucial in pretty much all designs.
Coding it by hand results in much leaner code that downloads faster.
However, exporting from photoshop could be useful for protyping purposes . . .
Post by eve on February 1, 2010
awesome tutorial.. exactly what I needed! Helped heaps xox
Post by peter on February 10, 2010
when i open the Home.psd file in photoshop cs4 on a mac to begin slicing i see a bunch of blue outlines with numbers in the upper left hand corner. What are these and how do i get rid of them so i can see what i'm slicing (and saving because they show up when i'm trying to save the slices as well. thanks i'm a newbie to this.
Post by Bill Miller on February 12, 2010
Great tutorial. It has helped tremendously.
Post by BerggreenDK on November 25, 2012
Just a few comments. First of all, the favicon.ico ought to be placed in the ROOT of a website, as robots and browsers look for /favicon.ico by default. So those not parsing the HTML for shortcut icons etc. will still find it. Secondly, if you shorten your folder paths to images and css, you will generate shorter HTML which again will let your page load faster. If you only include a few images, this might not seem like a lot, but if you have 10000 visitors the difference between placing everything in /images/ versus /g/ addes 5 bytes ekstra download per image. Lets say you have 30 images on a page, thats 30x5 = 150 ekstra bytes pr. page. Then if you have 10000 visitors it addes up to 1.500.000 bytes or more than a megabyte trafik. Same goes for long css descriptions where you dont need them all as they are nested and therefore can be uniquely identified from a top #id or .class. Eg. if you place the footer menu inside footer, you dont need to specify the class/id in the html as there is only one type of inside the footer and that would be the menu. So instead of spending a lot of bytes on each page, you can spend a little extra bytes on the css (which is downloaded and cached between pages when placed in an external file as you already do) and then shorten the HTML a LOT and it will still make sense afterwards when reading it.