I'm one of those people that is graphically challenged, at least when it comes to creating graphic images. I can 'compose' things together to some degree and make it look nice, but when it comes to actually creating the  art itself, I just am not wired this way. Graphics programs like PhotoShop or even PaintShop give me the willies if I have to do anything more complicated than crop an image <g>… not quite, but close.

There are a number of things that I need to do all the time however, and I'm sure if you do any Web development you probably find you need to do the same few tasks over and over again:

• Create Image Buttons and Tabs etc.
• Create Gradients for backgrounds
• Create rounded corners 

I'm winding down on an internal project here and I'm going through some of the layout and adding some graphics elements to the layout to make it look a bit nicer.

While looking around today I ran into a few useful sites and a couple of cool products that might be handy for a few other people.

http://www.buttonator.com/

This is a down and dirty online site that lets you create buttons online in a variety of different formats. It's a nice interface, although the quality of the buttons isn't exactly stellar. Still in many cases the output from here is still a lot nicer than stock buttons or plain text buttons.

http://tools.dynamicdrive.com/gradient/

I was just about to sit down and create something like this myself when I ran into this site. It basically lets you input a set of colors and it will generate an image with a gradient for you. There are several different options for how the gradients are generated and you can easily select colors from a color palette (which is a pretty slick implementation for a Web interface BTW). You can export images to GIF or PNG and the quality of and size of the PNG files especially is excellent…

Alpha Button

This is a Java Desktop applications and it’s not free, but after looking at a handful of programs like it because it seems to have all the options that really matter in generating buttons and shapes effectively, quickly and most importantly consistently. You can apply backgrounds, gradients, fills, apply borders and shadows, change the lighting, control the background transparency or color and it lets you generate buttons in a large variety of common shapes (like rectangular, rounded, Tabs of various directions etc.). It also has a fairly large library of preformatted templates, but I was able to create new buttons from scratch in a few minutes. What's also really nice about this tool is that you can lock a design setup and then create any number of buttons or other controls that all have the same style and export everything all at once. It just works and it's really easy to see what you're doing while allowing tons of control that even I can make sense of <g>…

Unfortunately the free demo is 'watermarking' the buttons pretty brutally so it's hard to see what the final output looks like in your own apps, unless you buy the tool. You can preview in the tool itself though and I thought this utility was useful enough to spring for the $50 of buying it… I know this will come in real handy in a variety of applications! In fact, I’ve already used a number of features to update some graphics content on a couple of my sites.

Rounded Corners

The one thing I'm still missing is a decent and hopefully reusable way to generate rounded corners for tables. Actually now that I think about I can probably coerce Alpha Button into creating the rounded corners with Tabs and then clipping off the edges.

Rounded corners are a pain in the ass anyway even with explicit images. I’ve been mucking around with trying to come up with some sort of generic solution not using tables, but I’ve not had much luck. The only decent way I seem to be able to get rounded corners to work is with table code like this:

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

    <td><img src="images/Corner_ul.gif" style="height:30px;width:20px;"/></td>

    <td class="menuband" style="padding:0px;width:200px;text-align:center;">Shopping</td>

    <td><img src="images/Corner_ur.gif" style="height:30px;width:20px;" /></td>

</tr>

</table>

I’ve played around with div and images, div backgrounds and other than using nested divs with multiple image backgrounds I’ve not been able to make this work with pure CSS. It sure would be nice if you could specify more than one background image style so you could specify images for the right and left sides.

The above works just fine, but it’s a bit of code to insert every time you need a rounded corner. I’d like to build something I can reference through a CSS tag, but I don’t see this happening with images.

Another option – rather than using images – is to use dynamic code to generate the corners for you at runtime. The ATLAS Toolkit Rounded Corners corner control does something like this in a crude way (it basically adds div tags with padding). It works in some situations if you don’t care about the exact size or placement of text. For the most common scenario for me – header captions of tables (for example: http://www.west-wind.com/wwstore/) where you have a slim header the control doesn’t work well.

I did run into another JavaScript library that works dynamically as well at runtime but does a bit better of a job than the ATLAS control here:

http://www.html.it/articoli/niftycube/index.html

This is a small library, some CSS tags and a few related images that automatically work against any control on the page. You do something like:

Nifty('div#header','small');

And it will mark all tags that match this CSS signature. What’s nice is that you can apply it globally. It works pretty well, although it’s doing a bit of work so on a slow machine (or even on a fast one if you have a few elements that render rounded corners) you see the rendering occur.

There’s some complexity to set this up – you have to make sure to include the .js, .css and image support files and add the appropriate includes to the page, but you can do that generically using a MasterPage I suppose.

The downside to these automatic solutions is that they don’t work if you have image backgrounds. These solutions figure out the background color of the parent element and then set the background for the corners to this color. If you have a colored background you run into issues where you have white corners showing over the image.

Anyway, I’m posting all of this here because it might be useful to some, but more importantly I’m curious what others are doing and what tools you are using in hopes to find a few shortcuts. These days I’m spending a fair amount of my time on renewed boning up of CSS and DOM skills and I’m finding myself picking up a number of things that I’ve glossed over for some time and many entries here have brought some enlightening comments and notes.