Create an EBay Auction Template in Photoshop
One of the major selling points of most of the best auctions is the fact that it features a clean, professional layout. The graphics, backgrounds, and general placement of items on the eBay auction page comes from an eBay template – an html file that the seller uses over and over, making listing their auctions easier than ever.
Look at it this way … buyers are naturally cautious of purchasing an item from someone they don’t know (you). If they went to a website that didn’t look very professional, they’d run the other direction. They’re only slightly less prone to run the other direction on eBay. You can improve your selling success tenfold (seriously) by having a clean, professional layout in your auctions.
The good news is that it’s supremely easy. This guide will take you through all the steps from designing to slicing to adjusting the html. It’s painless, I promise. All that you will need is Photoshop 7 or above and a little bit of patience.
Part One: Designing the Auction Template
One – Gather Resources: Before you even begin, do yourself a favor and find a graphic or three that you think would make a good centerpiece in your layout. Almost all of the “design” work will be in the header of your auction, but you want that header to make a nice impression. Make sure that the graphics you choose are royalty-free or copyright-free and that the creator doesn’t mind them being used commercially.
I’ll be using a couple graphics I found at Outlaw by Design and converted from PSP. I want to focus on a layout that is totally suitable for baby and children’s items, and that just by looking at the page a potential buyer will know they’ve found the right auction.
Two – Piece Work: Now we get to do some little pieces. The design work is super-easy. All that you need is to open a new canvas (File, New) that is sized about 750 x 400. The top 2/3 of this canvas is your header – using the graphic that you found, design out something that you can be proud of. Think about using a special font or font style, or catch the buyer’s eye with a snazzy background.
You can see my header in Illustration 01. I wanted to keep the look very clean, without a lot of details that might detract from the items being sold on the page. I also included buttons that will be used as “jump links” and take the bidder further into the auction page without having to scroll. This is something you might consider doing as well – I’m going to cover how to make these buttons work. The font I’ve used is called Scriptina and is available on most free font sites.
Three – Save!: DON’T crop your image. You want to leave that white space below the header just to make life easy in your next step. Click File – Save for Web and save the layout as a .jpg somewhere you can find it easily. Then, you can close Photoshop.
Part Two: Slicing the Auction Template
One – Open in ImageReady: Easy enough – just open your saved layout in Adobe ImageReady. All that we’re going to do here is slice the layout into pieces that are suitable for html.
Two – Scalpel, Please: Slicing images is so easy you’ll laugh at the natural apprehension you feel the first time you try it. There really isn’t any way you can make a mistake – trust me, I’ve tried. What you need to do is select your slice tool and start clicking and dragging boxes on the image that will cut it into html-ready pieces. Reference Illustration 02.
The key thing to keep in mind is that if you’ve used buttons, each of them need to be sliced individually so that they can be hyperlinked and selected. Otherwise, just break the layout up into sensible blocks.
Three – Save!: Easiest part of all – Save your work. Click “File” and choose “Save Optimized As”. In the dialogue, click the drop-down box for “Type” and choose “HTML & Images”. Name your work and Save. You can now close ImageReady.
Part Three: Edit the Auction HTML
One – Open it Up: This can be a bit more tricky, simply because there are so many html editors out there. You can use anything from Notepad to Microsoft Word or FrontPage to my own favorite, Macromedia Dreamweaver. Whatever editor you’re going to use, open the page up in it.
Two – Background & Links: Basically, you have only two duties here. First, you need to create links for the buttons you’ve made (if you chose to use them). Secon, you need to make that white space below the header a background that you can type in and add images to.
We’re going to mess with the buttons first. It’s easy – you just want to name each link like this:
#description
What that # mark will do is send the bidder down the page to the anchor (which we’ll make after we change our background) named “description”.
To change the white space to a background, you’ll have to work with your program. In Dreamweaver, all you have to do is select the big white box down there and backspace to delete the image filling it. You now have a full cell ready to fill with text and images.
Three – Anchors: These neat little bits of html work with your #links to make a web browser zoom down and stop at the section the anchor is in. Anchor html looks like this:
Description:
The first text, a name=”description”, is what your anchor is named. This should be exactly the same text and case (upper or lower) as the link you assigned to your button. The last text, Description:, is what the page will actually show.
Four – Save!: Yup, save again. Your template is all ready to use! All you have to do is add your text for the auction, images, and copy-paste the html into your eBay auction description.
