25 Online Generators for Your Quick Design Fix

Posted by Nicholas

In today’s tech age, the modern blogosphere is becoming a much more populous region of the world wide web. Bloggers from all over the world are creating, managing, and maintaining their own websites, most often using freeware templates or creating their own from scratch.

As a designer, I recognize how difficult it can be to compose and style your own website or blog, especially if you don’t have any design skills or are just starting out. I was a beginner once, and it was definitely a learning experience to style and develop my own blogs.

One of the most valuable aspects of the internet is the instant availability of all kinds of helpful tools and information. Among these resources are the golden nuggets known as online  generators. If you need to create a quick and easy element for your website or template, these utilities offer automated functions for creating just what you’re looking for.

Be it images, text, layouts, or CSS, these generators have just the fix you need.

Web 2.0 Design

    1. Web 2.0 Badge Generator
    Badges are fun little accents to add to a Web 2.0 oriented site. Quite often, they are used to denote a “Beta” mode, but they can be used for much more. This generator allows you to select a badge style and customize the color, text, and size.
    W

    2. Web 2.0 Buttons
    In just four steps, this generator offers you a variety of options for specifying the shape, color, text, and inclusive icons for a custom Web 2.0 button. It offers more than 50 fonts and a hefty variety of icons (or the option to upload your own).

    3. Stripe Generator
    As Web 2.0 has evolved into its own style of design, there are many elements that have emerged to represent it. Reflections, cutesy icons… and stripes. This utility offers up a variety of settings for creating and customizing a striped pattern that is just right for you.

    4. Web 2.0 Text Generator 1
    If you want to Web 2.0-ify your site and create a custom text logo in the slick, glossy 2.0 style, just input your text into this generator and create your custom logo. You have the options to add a reflection and even add in a “Beta” tag, for those sites in testing.

    5. Web 2.0 Text Generator 2
    Here’s another generator for creating custom Web 2.0 text logos. This one offers up a variety of options for adjusting your colors, text, and reflection. It even offers up the inclusion of little Web 2.0 icons, and allows you to generate the image in a DPI range of 72-1200 in gif, jpg, or png formats.

Image Generators

    6. Tabs Generator
    Here’s a useful generator for creating custom tabs for a tabbed menu. You simply adjust the sliders and select various options for your tabs and then download your customized selection.

    7. Ribbon Generator 1
    Similarly to the Web 2.0 badges, ribbons offer the same functionality in a different format. Ribbons display in the corner of the page, so it doesn’t interfere with the site content. You can slip in a text message to display a “Beta” tag, or even just a random quote or site description.

    8. Ribbon Generator 2
    heres another ribbon generator. This one has a couple of additional customization features, but generally offers the same functionality.

    9. Favicon Generator
    Have you ever seen the little icon that appears beside the address bar when visiting a particular website? That is a favicon, or ‘favorite icon,’ used to represent a website for bookmarking purposes. It can be difficult to create yourself, especially if you’re not able to save images in icon format. This generator solves that problem by converting any image you upload into icon format and giving it the proper filename of ‘favicon.ico.’ Just upload it to your root directory and bam, your site has its own favicon.

    10. Online Button Generator 1
    This generator features plenty of options for creating a simple, custom CSS button for your site. You simply specify what features you would like (font size, color, width, border, etc) and the generator does the rest. Simple and easy for the coding impaired.
    b

    11. Online Button Generator 2
    This is a more advanced button generator that offers the customization and creation of button in various styles, such as rounded, square, tabs, and web 2.0, among others.
    b

    12. Loader Generator 1
    Do you have a site with dynamic content that displays a loader while content is loading? Want to change your spinner, but don’t have the design skills to produce your own? Then download a custom one here. Select the style you like, specify your color preferences, generate the spinner and download the final product.
    l

    13. Loader Generator 2
    Here’s another generator that offers up a selection of loadbars and spinners to choose from. Same deal, customize your options, generate, and download.
    l

    14. Gradient Generator 1
    This is a fairly complex online generator used for creating a gradient image. There are a multitude of settings that you can adjust to get your gradient just right. It takes some playing around with, but for those without access to image editing programs, this is an easy way to produce a gradient.

    15. Gradient Generator 2
    This is a much more simplified gradient generator that offers fewer options and is easier to use. If you don’t want the complexity of the previous Gradient Maker, then this may be the better option.

    16. Tartan Maker
    If you’re Scottish, a lumberjack, or just plain like tartan patterning then this is the generator for you. It allows you to design and implement a tartan style background for your website. You have complete control over the angle, colors, and size of the bands in the patterning.

CSS Generators

    17. CSS Generator
    Here’s a basic custom CSS generator. Pretty straight forward, just input your custom values and the generator spits out the markup for download.
    c

    18. CSS Navigation
    Here’s a generator that offers help in creating a custom CSS menu for your site. Just enter in the link and the url that it is to lead to, order them, specify color, size, etc, and there you have it. The output is a pretty simple vertical column navigation menu.

    19. CSS Menu Maker
    This is more of a hand-holding generator as they offer up a selection of free templates to choose from prior to your customization. Once you’ve selected a template, you have the options of inputting custom values into the generator. What you end up with is a free custom menu for your site.

    20. Multi-level CSS Menu Generator (Suckerfish)
    This is a pretty nifty app for generating a custom CSS menu with a mouseover dropdown using the Suckerfish code.

Layout Utilities

    21. Javascript Popup Window Generator
    Here’s a shortcut for creating popup windows. It’s really quite simple as long as you’re fluent with Javascript, but if not, then this one is a must have. Just answer a list of questions to customize the functionality and Voila! Instant popup windows.

    22. WordPress Theme Generator
    Here’s a utility that makes blog styling so much easier. For anyone that is familiar with WordPress, you know how much of an endeavor it can be to customize the layout and design of the blog. You can download a premade template, but who wants to be unoriginal? Check out this generator and design the blog of your dreams.

    23. Email Form Generator
    If you run a site that gets a lot of traffic and you want to have a way for users to easily contact you, then a contact form makes sense. Creating one, however, is much easier said than done. This contact form generator picks up the slack and does the work for you. Just specify what input fields you’d like to appear on the form, or use a premade template, and drop the generated code into your site.

    24. Color Scheme Generator
    Have trouble deciding on colors for your site? Didn’t take that Color Theory course back in freshman year? No problem, this color scheme generator has got you covered. Just select your preferred scheme style and your favorite color, and the generator will match the corresponding colors that match your choice.

    25. Rounded Corners
    If you like the look of rounded corners and want to apply it to your site without messing around in Photoshop or toiling to get the code right, then just use this generator. Input your numbers, like corner radius, colors, borders, margins, etc. Generate the code and simply copy and paste into your site.

Like this post? Stay up to date by Subscribing to our Full RSS Feeds


Other People Who Read This, Also Read

Post-Plugin Library missing

Reader Comments

  1. Rob Steenwyk - August 25th, 2008

    Thanks for this list, some very helpful tools. For all you web designers out there though, please don’t take it too far. Make sure that all the fluff doesn’t get in the way of usability!

  2. PureDezigner - August 25th, 2008

    This is very helpful list, some are pretty old though, but still a valuable assets for any designer & developer. Thanks for the post!

RSS feed for comments on this post. TrackBack URI

Leave a comment

Your e-mail address will be kept private. HTML is not allowed.