The Art of the Round Corner Box
Web page frames having clean rounded corners are fashionable at the moment. While you can arrive at them with considerable work using conventional tools, you can create them effortlessly using Graphic Workshop Professional 3. Most of the tricky aspects of getting all the pixels in these complex web objects to line up correctly fade to inconsequence once you have the procedure by the throat.
Note that you’ll need Graphic Workshop Professional 3 patch 33 or better to use the techniques to be discussed in this post. Select the About item of the Graphic Workshop Professional Help menu to see what you’re currently using.
The ancientmusick.com web page includes an example of a round-corner box. In order to create one at your web page, you’ll need to generate the graphic elements – specifically, the rounded corners – and write the HTML to put the whole works together.
To begin with, you should decide on the color of your box and the color to be used as the background for your web page. In this example of the ancientmusick.com page, the box is 228,216,193 – a light tan color – and the background is 94,0,0, a deep red.
You should also decide on the size of the corners – or more specifically, the radius of the circle out of which the corners are cut. The ancientmusick.com web page uses ten-pixel corners.
In creating the graphic elements for your box, you won’t have to decide on the size of the box as it appears at your web page right away. The actual box will be created in HTML using separate graphics for each corner.
For the moment, use Windows Paint – or any other paint application you get along well with – to create a square blank graphic filled with the color of your box. This will be 228,216,193 if you’re trying to create something that looks like the example at ancientmusick.com. The dimensions of the graphic aren’t important – 400 by 400 pixels would be a good choice.
Save the blank graphic to a 24-bit BMP file.
Run Graphic Workshop and double-click on your BMP file to open it in View mode. Click on the Gear button in the View mode tool bar, or select Filters from the Vide mode Picture menu. Select the Corners item from the combo box in the upper left corner of the Filters window. Dial in the Corner Size value you chose as the radius for your corners a moment ago. Click on OK.
You should now have a round-corner box graphic. Select Save As from the View mode Picture menu and save it to a new file. The PNG format would be a good choice. Right-click to exit View mode.
You can now right-click on your round-corner box graphic and select Paint to excise the corner elements. Use the Zoom tool in the Paint window to zoom on the upper left corner. Select a square area in which the upper left corner of the selection is 0,0 and the horizontal and vertical dimensions are the radius value for your corners – that would be ten pixels in this example. Select Copy To from the Edit menu of the Paint window to save your selection to a new BMP file – something like upperleftcorner.bmp would be a good choice.
You’ll need to do the same for the remaining three corners.
You can now exit the Paint window.
Use Graphic Workshop to convert the BMP files you created to PNG graphics and place them in the appropriate folder for image files to be accessed by the web page you’re creating.
All that’s left to create a round-corner box is writing the HTML to glue to pieces together. Here’s what it looks like. In this example, the graphic elements discussed earlier are assumed to be in a sub-folder called image. The <body> bgcolor value is #5e0000.
<table bgcolor="#e4d8c1" cellpadding="0" cellspacing="0" border="0" width="460" height="400">
<tr valign="top">
<td align="left"><img src="image/upperleftcorner.png" height="10" width="10" border="0"></td>
<td align="right"><img src="image/upperrightcorner.png" height="10" width="10" border="0"></td>
</tr>
<tr>
<td><center><p>Content goes here.</p><p>(This might be an additional table.)</p></center></td>
</tr>
<tr valign="bottom">
<td align="left"><img src="image/lowerleftcorner.png" height="10" width="10" border="0"></td>
<td align="right"><img src="image/lowerrightcorner.png" height="10" width="10" border="0"></td>
</tr>
</table>
This example has created a box which is 460 pixels wide by 400 pixels deep, as specified by the dimensions of the <table> element. The corner graphics will automatically flow to the four corners of the table. You might want to create an inner table to replace the “Content goes here” text, to hold some serious content for your box.
It’s probably worth noting that the graphics for the table are created as PNG files, rather than GIF or JPG. You could actually arrive at much the same results with GIF graphics, albeit with somewhat more work to color-reduce the anti-aliased corners down to 256 colors. There’s little good reason for doing so. JPG graphics would not be a good choice for this application, as the JPEG degradation applied to JPG files would likely make the frame corners look crunchy and unattractive.
Leave a comment
Please note: Support issues can't be addressed here. If you have questions
or if you you need assistance with our software, please visit our support page.
Comments which reference other web pages, or which constitute attempts at
advertising, will be automaticaly flagged as spam and will never see daylight.
Entering a comment at this page will cause one or more cookies to be set in
your web browser.
You must be logged in to post a comment.