|
Slicing a layout with Paintshop pro tutorial
To do this tutorial, you need a layout and paintshop pro. 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. Paintshop pro offers an option called Image 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: Before starting we need to dertermine how much row and column we need in our table. (the slicer will cut the image and put all the slices in cells). To do this I have put red lines on my layout to help me. On the image below you will see C and R. C refers to column and R to row. So we need 3 columns and 4 rows. We want the iframe and menu area not cut in piece so the lines have to be place on each side and at the top and bottom of each area. |
 |
| Step 3: Now that we know how much column and row we need we are ready to slice the layout. Click on File -> Export -> Image slicer... A new window will pop up looking like this: |
 |
| Step 4: The only thing we will need is the tools below to slice the layout: |
 |
| Step 5: use the second tool and click with it on the image. Another window will pop up and there you will enter the number of row and column we need like below. After that click ok. |
 |
| Step 6: Now you get the numbers of row and column needed but they are all even, and not placed where we want them. |
 |
| Step 7: To place the line where we want them we will use the third tool, the slicer. When going over a line you will see some arrows appear. Move the first horizontal line to the top of your Iframe area. |
 |
| Step 8: Now move the last horizontal line at the bottom of the menu area. |
 |
| Step 9: Move the middle horizontal line at the bottom of the Iframe area. |
 |
|
|