I am often tasked with taking a mockup and branding a site. This usually involves a custom master page with tweaks to the CSS for the layout and color scheme. It also involves the creation of images used to compliment the UI, the holy grail for some being gradient images and rounded corners. For the amateur graphic designer like myself, this often becomes a tedious task that involves repetitive tweaks to an image. I once had a client tell me that I had the wrong shade of “pumpkin”. (Depending on your disposition, this could result in an act of either running full speed into a brick wall or rocking yourself to sleep every night.)
Enter the poorly named Web Designer Tool! After some experimentation with the System.Drawing and System.Drawing.Drawing2D .NET 2.0 classes, I figured out a way to generate these images on the fly. Now I can rapidly create rounded corners and gradients and don't have to sweat it if a client needs a color or hue adjusted. The rounded corners include many options, including width, height, gradient and solid colors, radius corner size, and border. I also provide a preview feature that integrates the images into a sample html page and launches it in your default browser. I have successfully tested this in IE 6.0 ~ 8.0, Chrome 10.0, and Firefox 4.0.
Note: Although this will fly in the face of CSS purists, I have decided to use a simple table based layout for the preview html. I do make an effort to use DIV based layouts for web design, but in this case I have yet to find approach that works flawlessly across browsers types and versions or that integrates nicely with SharePoint. If you are that CSS guru, I welcome you to take these images and come up with a better approach. If you are successful, I would love to try out your code. You are also welcome to use my Shapes.cs class below and build your own tool. Life will be much easier once CSS 3 has reached enough market penetration and we can simply use the border-radius property.
