Fancy Frame Web Page Tutorial
This is for advance users.

  • Laptop Cases

  • You will need 3 seamless tiles for this tutorial.
    You can use your own or borrow mine.

    cho-tile.jpgtan-paisley.jpgtile12.jpg

    You will also need this arch.ufo, click on the picture to download.

    First we will create the whole page, then dice it up. The
    pieces are put into tables to make this all work. So let's begin.


    Have all three backgrounds open in PI. Copy the tile12.jpg to the clipboard. Open a new image, 750 x 400then fill the new image with tile12.jpg.
    Click on the path tool, rectangle and 2-d. Starting at the top of the new image, in the left hand corner,(0 0)draw a rectangle 100 wide and 450 long. Check the bottom status bar to see your dimentions. Color dosen't matter.


    Now copy the tan-paisley.jpg to the clipboard. Click on the top of the 750 x 400 image to activate. Go to Object, on top task bar, scroll to convert object. Then click on path to image.
    Go to fill and fill with the tan-paisley image. Right click, scroll to shadow with these settings. Click ok.


    Next we will split the shadow. Go to object, then split shadow. Now we can work with the shadow separately. Pick up the transform tool and click on the shadow. Stretch it above and below the image. You might have to stretch the frame a bit, by grabbing the corners.

    Open the arch ufo. Copy it then paste onto the 750 x 400 image. Pick up the transform tool to drag it over to the edges. Move it around till you have it placed in the position you like.

    Copy the cho-tile.jpg to clip board. Touch the top of the 750 x 400 image to activate, make sure your arch is still active. Go to object, convert object, then path to image. Then fill with the cho-tile.
    While the arch is still active, right click over it and duplicate it. Use the pick tool to send below the brown arch, or just click on the brown arch using the pick tool and bring to the top. Let just some of the black show under the brown for an edge effect. Click on the black tile to activate, right click and shadow. Split the shadow the same as above and use the transform tool to stretch it beyond the 2 sides.

    For a little decoration, add a ding or object of your choice to the corner. I made mine gold with the metalic presets.

    Okay, let's make the buttons. Click on the path tool and choose the outline tool. Select the rectangle, 3-d. Make a small rectangle on the border. Right click over the color and choose color on screen. With the eye dropper click on the dark brown. One button is okay, you can right click over the outline to duplicate it also and place close to the other one.

    Now would be a good time to save the whole image as a ufo, so you can always change the colors and fills if you desired to do so later. After you save it as ufo, go to edit, duplicate, base image and objects. Close the ufo. On the duplicate, if your satified with how it looks, right click and merge all. Let's slice our image.

    Under web, click on slice. First use the horizontal line, when you click and move the slicer the line will go straight across. If you hold the click, you can move the line up or down. Get close to the edge of the border, being careful to get just below the lowest part of it. Don't cut off the shadow.

    Then do the button with 2 horizontal lines. Make 2 more horizontal lines for the border background we will use for our web page. Select the vertical tool. Slice just inside of the top border, for the corner piece, where the arch drops. Then the straight piece cut 3 more pieces.

    For the button cut on top of the border, not the shadow.

    Here's a close up of the slices.

    Go to the top of the untitled list and click on the first one, name this piece, corner. Click on the next one and name this one straight-piece. Leave the next one un-named. The last piece on the top, name frame-tile.
    The next long piece leave un-named. Then click on the next one and name button. Leave the next un-named and the long piece under it, name frame-border. The bottom one leave un-named.

    When you click ok, a box opens and tells you when you save the whole page under file, save for web, as HTML. When you save, it automatically saves the images in a folder and the html page separate.

    Open in PI, from the image folder you just saved from the sliced graphic, the frame-border graphic. Since this is to tile the web page it is to short. Go to edit, expand. If your border is 750 long, you need to make up the difference from a full size border of 1200. Subtract the difference to see how much you have to expand just to the right. I expanded it 450.

    Use the selection tool to draw a box around the expanded area. Copy to clip board the tile12.jpg. Click on just the top of the border tile and making sure the expanded area is still activated, fill with the tile12.jpg. Click on the other side to unselect the selection. Now save this new border.



    Open the button from the image file and right click and duplicate. On the new image we'll make the names you want to put on the buttons. Use the pick tool to unselect the text, don't merge. Save the button with name.

    Still with the pick tool. activate the text and right click and pick edit text. Erase what you had and type in the new name. Do this process all from the same button. Finally with the text on the button, save as a ufo so you can always edit the text later.

    Finally, we'll do the page layout.

    The top border is made up of 3 images and set in a table, the corner, straight piece and the frame tile. The frame tile will have to make up the difference of the 1200 wide background border. Taking the width of each of these pieces comes to 685. So instead of our tile piece being 94 wide, the width will be 515 so it will tile all the way out to 1200.

    The body tags will hold the background new border image we made. Then the buttons are put into a table to hold ontop of the border. There may be many ways to achieve this look, but this will show how to set it up in tables. I've included the txt form for the page layout that all you'll have to do is add your images and links.
    It's clearly marked where you will start your page content. You may download the txt form here.
    If you have any questions, please contact me and I'll try to help you. Happy creating.
    [ Home ] [ Graphic Index ]

    This site is maintained and copyrighted by:
    Dawn Reber 2000