Entry tags:

coding: ads, layouts: user info

RPG Ad or Userinfo Layout With Sidebar
Type: RPG AD with sidebar, also makes a pretty userinfo layout. Makes ample use of transparent images and snazzy edges.
Preview:

Credit pourlamour

Hokay, here's what the whole thing looks like:

♠♠♠ PREMISE SETTING RULES JOINING GUIDE APPLICATION CHARACTERS ♠♠♠	HEADING DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT

Handy Dandy Copypasta Box:

<center> <table cellspacing="0" cellpadding="0" width="XXX"> <tr> <td colspan="2"><img src="URL OF HEADER"> </td> </tr> <tr> <td background="SIDEBAR URL" height="XXX" width="XXX" valign="top" STYLE="background-repeat: no-repeat;"> <center><font face="FONT" size="X" color="#XXXXXX">♠♠♠ <a href="URL">PREMISE</a> <a href="URL">SETTING</a> <a href="URL">RULES</a> <a href="URL">JOINING GUIDE</a> <a href="URL">APPLICATION</a> <a href="URL">CHARACTERS</a> ♠♠♠</td> <td background="TEXT BOX BACKGROUND PATTERN" valign="top" style="padding-left:5px;padding-top:0;padding-right:5px;padding-bottom:5px"> <font face="FONT" size="X" color="#XXXXXX"> <b><center>HEADING</b></font></center> <p align="justify"><font face="FONT" size="X" color="#XXXXXX"> DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT DESCRIPTION TEXT </p></center></font> </td> </tr> <tr> <td width="XXX">  </td> <td background="BOTTOM URL" height="XX">  </td> </tr> </table> </center>

And here are some notes on this: it's totally stretchable. :D As long as you make sure you get the heights and widths right it will be as long as you need it to be to accommodate userinfos, etc. The one thing that really makes this ad is the use of transparent images. You can do this in your photo program in various ways. In photoshop, you delete the background layer that is all white, with everything else on a separate layer, and save it as a .PNG or .GIF. You have to save it in one of those two formats. .GIF is better for simple images with few colors and will load quickly, .PNG is for more complex images that look bad when indexed in .GIF form.

You might have to play around with the link list a little bit to get the font size right. You can also add as many links as you need to, provided that you stretch the sidebar's background image to the appropriate length. It's a little fiddly but it's not too hard.

You can make any of the images any size you need, just make sure you change the appropriate spots for height and width. I don't recommend making this ad any bigger than 700px.

This is what each of the images looks like separately:

-- the header.

-- the sidebar.

-- the background of the text box.

-- the bottom of the text box.