|
Slicing a layout with Photoshop tutorial
To do this tutorial, you need a layout and photoshop. But before going any further what is slicing and why do we have to slice a layout? Slicing a layout means cutting a big huge .gif in parts to make the web page load faster. Photoshop offers a tool called slicer that helps you do that. It allows your to cut your layout in parts, and it generates all coding by itself. You can slice any kind of layouts, iframe, tables, div ect... In this tutorial we will slice a Iframe layout. |
| Step 1: Here is the layout I will use. You can use it to do the tut but it is strictly forbidden to use it to make yourself a website. Click on the image below to see it in it's original size. |
 |
| Step 2: Open your layout in Photoshop. We will use the slicer tool located in the tool bar under the magic wand. |
 |
| Step 3: Before slicing, you have to dertermine wich part you don't want to cut. When slicing, photoshop cuts the layout in part and puts all the images in different cells. You don't want your Iframe or menu or site title cut because we will add content later on! To cut your Iframe click in the top left corner of the frame with the slicer tool and drag it in diagonal to the opposite bottom corner. Here is what you should get: (See the number 3 in blue? This is your Iframe cell!) |
 |
| Step 4: Now we will repeat step 3 but we will cut our menu area. Put the slicer tool in the top left corner of the menu area (right where you see the number 5), and drag down to the bottom left corner where you see the red x. This is what you should get: (note that the two area that you have sliced have blue numbers in there top left corner.) The other numbers you see in grey have been generate by photoshop. |
 |
| Step 5: Now it's time to save. Create a new folder on your hardrive and call it Layout or any name that you wish. Now back in Photoshop click on file -> Save for web... (in the top menu) Click on Save in the top right corner and below the image you will see options, like file name, type, settings, slices. In the type drop down menu choose the option HTML and images. Then save in the folder created earlier. |
| Step 6: Well that was easy but what the hell did I save? Go take a look in that folder created earlier. If you did the previous step correctly, you should have a folder called images and a html file wich contain all the coding that holds the layout together. Now click on the images folder. You should see there all your layout cut into several images. I invite you to click on the html file to see what happend... This is what you should get: Clickie. Yeah it's your layout all in one piece! |
|
Congratulations, you have sliced your first layout. Unfortunately before putting it online you still have a lot of work ahead! I invite you to follow my
other tutorials where you will learn everything you need to know to put your layout online! Any questions? Click here |