Step1
Choose a theme. For a professional looking auction design your theme around the item you are selling. Use the item for inspiration for design and color. In our example I am using a Disney theme. Once you have chosen your theme search the internet for fonts that work with your theme. For example if you are creating a Halloween theme search for spooky fonts etc. There are literally hundreds of fonts available online for free. Once you have selected your desired fonts we will start the process of designing the template.
Step2
I recommend creating your own graphics rather than using clipart as the rules related to using clipart can vary greatly from website to website. Many times an attractive title or a logo you design yourself at the top of your auction looks very good. In our example I just used the word "Welcome". Simple and attractive.
Step3
Create your background tiles. I personally think two different tiles looks very good. My favorite tiles to make are dots and stripes. They look good, can be done in any color and are simple. You can also dramatically change the look of your template by varying the size of your dots and stripes.
Step4
To make dots go to your photo editing program and open a new image. I like to start with 200 pixels x 200 pixels. Flood the background with the color of your choice. Using the paint brush and the color you desire for the polka dots make two dots 50 pixels wide with a hardness of 90. Crop away the excess background however be sure the completed object is an exact square. Now you want to tile the object. In Paint Shop Pro you go to Effects->Image Effects->Seamless Tiling. Once you have tiled your square save it as a .jpg.
Step5
To make a striped background tile in your photo editing program, open a new object 100 pixels x 100 pixels. Choose the color for your background and flood the image with that color. With my example I used white so I skipped this step. Choose the color for your stripe. Using the line drawing tool select how thick you want the line to be. 5 to 20 pixels is nice. Draw a straight line. Don't worry about going all the way to the edge. Crop a perfect square twice the size of the width of your stripe so for example if your stripe was 20 pixels thick crop your square as 40 pixels x 40 pixels. Tile your square using the same method mentioned in Step 4. Save image as a .jpg.
Step6
Create your title and sub titles. In your photo editing program open a new image 600 pixels wide by 400 pixels high. Write "Welcome" or your Ebay username or even the name of whatever it is you are selling. This is your title. Make the font as large as you can with the given space. Save the image as a .jpg. Create your subtitles. Use the same font for a uniform look. Examples of subtitles you will want to create are ones that say "Description" "Payment" and "Shipping". The subtitles should be a little smaller than your title. Save each of these images as .jpg's.
Step7
Next you will need a place to host all your images. There are a number of free websites that will host your images such as Photobucket, Imageshack, Picoodle, Ink Frog and many more. Upload your images, including your auction pictures.
Step8
We are now going to put it all together. Open up your html editing program. It will generally ask you what you want to do. We want to create a new page or html. Insert a table. If it asks you to specify the size, make it 100%. Give the table a border of 10 pixels. You can either make it black to outline your template or use another color. Insert one of your background tiles as the background of the table.
The next step is to insert another table inside your first one but make this one 95%. Make the border 10 pixels again and insert your second background tile as the background to your second tile.
Now insert a table inside this table making it 90%. Make the border 10 pixels. Make the background white. Now you have the outline to your template. Into the white table you can insert your title, your auction photos, your subtitles. You can also write your description and state your payment terms and shipping information. Save your template.
Step9
Making it all work. If you've simply inserted the images from your computer it probably looks great on your screen but at this point no one else will be able to see your work. If you look at the html your photos may say something like this "img src="my pictures/shipping.jpg"". We want to replace this with the actual location of your pictures. Copy the location of the pictures from the photo host and paste them in between the quotes, replacing the location on your computer. Repeat this step for each image.
Step10
Test your template. There are a number of websites where you can test your html such as Practiceboard. If everything looks good you're ready to go. Save your html and go on over to Ebay or whichever site. During the process of putting up your auction there will be an option to insert your own html. Simply copy your code and paste it info the box they provide.
Heres a closer look at our example:
http://www.practiceboard.com/?8704155
Comments
CraftyMum said
on 4/25/2008 Thank you :) I am personally using Dreamweaver.
AbbyNormal said
on 4/25/2008 This is a GREAT article! What html editing program do you use?