Hasta La Gadget!

Oct 19

CyberNotes: Time Saving Image Generators for Web Developers

Posted in: CyberNotes, Today's Chili, Web Sites

This article was written on October 13, 2007 by CyberNet.

Weekend Website

Many of you with your own web sites know that getting your site to look “Web 2.0ish” can be tricky. Rounded corners are in, as are rounded tabs, striped backgrounds, and Ajax. Today we’re going to take a look at four different web sites that offer image generators to help web developers create the perfect Web 2.0 look. I think you’ll find that they’re also huge time savers because each site offers a service that is very simple to use. Let’s take a look…

–Rounded Corner Generator–

Rounded corners are in these days, and so it helps to have a tool like RoundedCornr.com to generate a box with round corners for you. This particular site is great because it provides you with with the HTML and CSS code that you’d need to put rounded corners around content on your site. They also provide you with a link to download the rounded corners as image files.

rounded corner with border

When you go to the site, you’ll notice three different options for creating rounded corners. You can do a RoundedCornr with a color gradient, a Rounded Cornr with a border, or a single RoundedCornr Image. For each of the different options for creating rounded corners, you can specify things like the corner radius size, the gradient height, a border color, etc. Below are two examples of what you can do. The top image shows the rounded corner with a gradient while the other shows you what a rounded corner with a border looks like.

rounded courners 1

Visit RoundedCornr

–Stripe Generator–

You’ve probably noticed that many sites these days use some type of stripe design in the background whether it’s a thick strip size, or a thin strip size. If you’re wanting some type of striped design for your site, I recommend using www.stripegenerator.com. Just like the RoundedCornr service, there are so many different options that you can tweak so that your stripe pattern will look exactly like you want it to.

Options you have include:

strip size
spacing
stripe colors
background style
shadow
background colors
stripe orientation

stripe generator

Another great feature on this site is that there are “shared stripes” that you can get the code for. This stripe generator is perfect for when you want a seamless stripe texture. Of course you could create your own, but this is quick and easy. To boot, it’s got a great interface.

Visit Stripe Generator 2.0 – The Ultimate Tool for Web 2.0 Designers

–Tab Generator–

Brought to you by the same people that created Stripe Generator, Tab Generator is the simple and easy way to create great looking tabs for your site. Much like the stripe generator, there are plenty of options to choose from so that you can create the perfect tab.

Options include:

height
width
border size
corner radius
background
fill style
fill colors
border color
orientation

Once you’ve specified how you’d like your tab to look, you can download the code and then it’ll be ready to use on your site. This is one of the simplest ways I know of to create perfect tabs.

tab generator

Visit Tabs Generator

–Ajax Loading Generator–

Ajax has become a staple of many Web 2.0 sites. A site called Ajaxload.info will help you come up with the perfect Ajax loader icon for your site. All you have to do is select the type of indicator that you want (there are over 30 different types of indicators), select the background color you’d want, and then enter the foreground color that you want. From there you just click generate and then you’ll see a preview of what your loading indicator will look like. If it looks good, just click “Download it” and it’ll be ready to use.

ajaxload