Slicer print

PSP Image Slicer

A friend asked how I created the page for the following website...Robbie's Creative Retreat. It was too hard to explain without pictures so I wrote this tutorial for her and decided to share it with the rest of you!

First, you need to create an image in PSP. I usually use the following canvas size but it depends on the size you want your page to be so this screenshot is just a guide.

I'm not going to show you how I created the finished image as it would take loads of screenshots and besides, the finished image should be your design, not mine ;) I will explain the basics here though....the large cream square shape won't be seen on the finished page. I just put it there so I can see where I'm going to have my inline frame. This area is left blank of any decoration. I'm going to have my menu under my title so I've left most of that free of decoration as well.

When you're happy with your finished image, you need to save it to a folder of your choice, as a psp file.

Now to do the slicing....Go to View > Toolbars > Web

This toolbar will open. Click on the Image Slicer icon (circle with a cross in the middle)

This window will open.

Click on the maximise icon at the top corner. This will make it easier to work on your image.

I usually save in jpeg format but it's up to you if you want to save your sliced images as gifs. Remember to put a tick in the Apply optimization to whole image.

Click on the Grid icon.

Now click on your image and the Grid Size box will open. I usually use 6 rows and 6 columns but it's up to you if you wish to use more. You can always add more lines later ;)

When you've clicked ok on the grid size box, you'll see lines on your image.

We now need to arrange the lines. Click on the Arrow.

Now, when you move your mouse over the lines, you'll get a double ended arrow. Click on a line and and keep the mouse button pressed while you drag the line where you want it. The idea is to have no lines in the places where you want your content on the page...I'm going to have lines all round my cream box and none in the middle. The same applies to the place I'm going to have my menu. Don't worry, it might be a bit confusing at the moment but things will become clear...I promise!

To move the image up and down so you can get to the lines, you need to click on the hand....

Then click on your image and keeping the mouse button pressed, move the image up or down. On this screenshot, you can see that I've got a line just outside each side of the square. I've also got a cross in the middle of the square....

Click on the Eraser...

Move your mouse over a line and click once to delete the line.

I've arranged the lines and deleted the ones I don't want in the place where my content and menu will be.

Now, you can have the image sliced into as many sections as you like. The smaller the image slices, the quicker your page will load when you publish it to the web.

When you've got your image slices the way you want them, Click on the Save button.

Save it in your web site folder. I always create a sub folder in my web folder to hold all the images and the page. It helps keeps my web folder in order and you can always move the page to another folder later if you want to.

Now open FrontPage and go to the folder that contains your sliced images and web page. Double click on the web page to open it.

This is what you will have.

I always create a new page to work on so I can keep the original as backup.

Right click on the new page and go to Page Properties.

Click on the Formatting tab and set your background colour (if you want to use a tile that you've made, you'd clicl on the Browse button and browse to your tile) then click ok.

I added a table because I find it easier to control the look of my page using tables but you don't have to.

These are the settings I used for my table.

Go back to your original page and highlight the whole image by clicking and dragging your mouse over it. Press CTRL and c on your keyboard.

Go to your new page and click inside the table. Press CTRL and v on your keyboard.

You should now have something like this.

Click in the place where you want your menu. You will see little squares appear on the sliced image. This shows the image has been selected.

Click on the Split button at the bottom of the page.

Part of the html code will be highlighted...look in the highlighted code to find the image name. In this case, the sliced image is called main_2x1.jpg. Remember the image name....

Now press the backspace or delete key on your keyboard. The image will disappear, leaving a blank space.

Right click in the blank space and go to cell properties.

Click on the Browse button for the background. Browse to the folder that holds your images and find the image we just removed from the page. Click ok.

The image will be put back but it's back as a background rather than an image.

The reason we need it as a background is so we can type our menu text on it. If we left it as an image, we wouldn't be able to type on it.

Now click on the image where your content will be going.

Press delete or backspace on your keyboard. We won't be adding this as a background because we're going to insert an Inline Frame into this space.

Go to Insert > Inline Frame

Click on New Page (unless you already have a page that you want showing inside the inline frame...if you do, click on set initial page and browse to the page you want to use.)

If you clicked on New Page, you will now have this. If you clicked on Set Initial Page, you will see your page in the rectangle. I'm going to carry on the tutorial assuming you've added a new page ;)

Click on the edge of the inline frame then right click and go to Inline Frame Properties.

Set the frame size to 100% width and height. Un-tick the Show Border box, unless you want to show the border.

This is what you will now have.

Click on the save icon. The first page you're saving is the page that fits inside the frame.

The second page is the one that contains the image. If it's going to be the home page of your site, you need to name it index and save it in your root folder.

I saved both pages in the same folder that contains my images as I won't be using them for the home page of my site. Now double click on the contents page to open it.

Add your background colour/tile and your page content. Click on the save icon.

Go back to your main page and it will now look like this.

You can see how it will look on your site by right clicking on the page in the folder and clicking on Preview In Browser.

You can now start creating your pages for the site and linking them on your home page. To get a page to open in the inline frame, highlight your menu word and right click. Click on Hyperlink.

Browse to your page. Click on it to select it then click on Target Frame.

If you want the page to be seen inside the inline frame, select I1 then click ok. If you want the page to open in a new window, click New Window. When you've got your site the way you want it, you can publish :o)

I hope you've enjoyed this tutorial and it's helped you learn a new way to design web pages :o)