Layouts in MS Paint

So, you want to make your own site layout or petpage layout and all you have is MS Paint? Well good news, it really is simple and easy to do using just paint. This requires knowledge from our intro paint tutorials, so read those first.

Also, I do not go into a lot of detail on div layers in this tutorial, the type of coding we will use. Look under html/css tutorials for a more in-depth tutorial on div layers.

First Things First

Open up paint. Next, find an image you would like to use to base your layout on. I am using one I found at the NC Mall here. I am going to copy that and paste it into my paint window.

Creating the Header

I am going to include the image in my header. Stretch your window out wider using the pixel-blue dots on each corner/sides. Make it much bigger than the image, but not too much. Use your eye-dropper tool to select a dark color from the image. I am using the dark purple found in the tail. Use the rectangle tool to draw a border around the image. Use the eye-dropper tool again to find a lighter color. I am using a lavender found on the image. Now make an area below the rectangle. Add borders to the side using the line tool. Feel free to move the header slightly to the right to create space. Add text if you would like to the header. You can see mine so far. Click Here.

Creating the Footer

Using the header we created, crop and move it so you have just the bottom are below the header. You can see mine here. This will form the body or the text area of our layout.

Coding Layout

Now all you have left to do is code your layout! Use this code system and change the images to fit.

<style> body {background: url('BackgroundURL') repeat-y;} </style> <img src="HeaderURL" style="position:absolute; top: 0px; left: 0px;">

Now all we need to do is add your body of the layout. That's pretty easy to do. Just change the "###px" to fit where your text should go.

<div style="position:absolute; top:###px; left:###px; width:###px; height: ###px; > TEXT HERE </div>

Afterword

I hope this brief tutorial helped you create your own layout! See mine here.

-Shalane