|
Slicing with Photoplus 6 tutorial
To do this tutorial, you need a layout and Serif Photoplus. While Photoshop and Paintshop pro are great to slice layout, photoplus is a free software! For those who can't afford bying an expensive software it's a great alternative. You can get the software here. 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. Photoplus 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: To slice the layout, we will need the slicer tool located in the left tool bar. |
 |
| Step 3: Before starting slicing, we have to determine wich area we don't want to cut in piece. In the layout I use, I want to keep the Iframe area and the menu area intact. |
 |
| Step 4: We will start placing our horizontal line. To do this select the slicer tool and place it on top of your Iframe area, then click. A red line will appear. |
 |
| Step 5: Now repeat step 4 but put a line at the bottom of your Iframe area and at the bottom of your menu area. this is what you should have now: |
 |
| Step 6: Now to place your vertical line you will do the same but while using the slicer tool you will have to hold the shift key of your keyboard. So place a line on each side of your Iframe area. |
 |
| Step 7: Wow it's already time to save, was easy hey? So before saving, create yourself a folder on your hardrive. Now back in Photoplus click on file -> export... A new window will pop up. In the type drop down menu, select the .gif format. Then assure yourself that create image slices is tick and then save in your new folder. (I usually call my file index since it will create a html file that will actually be the index of the website) |
 |
| Step 8: Lastly let's go see what we have saved! Go into the folder created earlier and check what's in it. You should have all your slices in .gif format and a html file. It's actually your website! Click on the html file. You should have something similar to this: Clickie. Yeah it's your layout all hold together in cells in a table! |
|
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 |