40 Online Generators for Web Designers Should Bookmark

March 5, 2011 · 134 comments

by Dustin Betonio

image

Online Generators for Web Designers can be a great way to save time in your web design projects. High-quality generators can create graphics or code or even layouts in a matter of seconds or minutes, things that might take an hour or more if done by hand. Online generator are those tools that help us to create those popular “XHTML valid” CSS banners, micro buttons or css website templates in seconds. In such cases online generators can be of great help which do the necessary job and some tools don’t have to be downloaded also. We all know that backgrounds play a crucial role in a design. Web Designers sometimes spend a lot of time in making pattern or stripe backgrounds and there are also tool to help you out here. In this article, I have listed some of the online generators that can save you some time and still give you great results.


ElegantThemes
ThemeForest

Advertisement

Online Generators

1. XML Charts

xml

XML /SWF charts are used to create attractive graphs and charts from XML data, Create a source either manually or generate dynamically then pass it to the XML chart’s flash file.

2. Web Form Generator

web form generator

The web form generator from Web Form Factory automatically generates he necessary backend code to tie your form to a database.

3. Typetester

typetester

Typetester is used to compare three different type of fonts on screen making your designing job easier , Just specify the specifications and compare them

4. 256 Pixels

256

256 Pixels creates favicon designs where you can upload a picture or color the pixels by choosing any color and save it or create a favicon for any new challenges posed by the website.

5. 80 x 15 brilliant Button Maker

80x

Create 80 x 15 dimension buttons with 80 x 15 brilliant button maker where you can customise by setting the borders, left and right boxes and uploading the images separately for left and right boxes.

6. AJAX Info

ajax info

Create your own AJAX loader icon by selecting the type of indicator, background and foreground color and clicking in ‘Generate It’.

7. AJAX loading GIF generator

ajax loading

AJAX Loading GIF generator create your AJAX loading GIF image by defining the indicator type, background color, foreground color and controlling the speed of the loading indicator.

8. Background Maker

background maker

A unique background maker where you choose the colors from the pixelised tile which depicts the tiled background and fill each tile or pixel with a different color to watch it live in the background as a pattern.

9. Background Patterns

background patterns

Tiled background designer is quite an interesting tool to create tied backgrounds which allows you to change the background color, size of the canvas, image to be displayed and also rotated your tiled design as per your design.

10. Color Scheme Designer 3

colorschemedesigner

Color Scheme Designer 3 has a really fantastic user interface that’s both attractive and easy to use. Just select a color, the type of color scheme you want to create (mono, complement, triad, tetrad, analogic, or accented analogic) and then make adjustments. It also lets you preview the color scheme right in light and dark website layouts

11. Kuler

kuler

Adobe’s Kuler is one of the best color scheme tools available, with multiple options for both creating and finding color schemes. To find a color scheme created by someone else, you can search or browse by newest, mot popular, highest rated, or random. They also include tools for creating a color scheme based on an images.

12. Adhesiontext

adhesiontext

Adhesiontext creates dummy text for various languages, including specific characters. In addition to Latin characters, you can also create dummy text in Cyrillic, Greek and Arabic.

13. pForm

pform

pForm is a free HTML form builder. Just choose from their pre-designed templates and then customize your form. It’s fast and they have a good selection of form designs to choose from.

14. Badges

badges

Badges can be used to display a big ‘Beta’ message on your website or emphasize a price or a promotion. No web 2.0 site is complete without one.

15. Barcode Generator

barcode generator

Barcode label printer is an online barcode generator where a CGI form is used to enter a text and generate a printable and scannable barcode in Interleaved 2 of 5, Code 39, Code 128 A, B, or C symbologies.

16. Buttonator

buttonator

Buttonator is a free web button maker to create your own personalized web buttons. You can customise the button’s font, color, style and apply different effects for your button.

17. Font-Face Kit Generator

fontfacegenerator

This @font-face kit generator from Font Squirrel lets you create full kits for any font you can legally use with @font-face.

18. Showdown

showdown

Showdown is a port of Markdown in JavaScript. Just type in some markdown text and it will output HTML for you.

19. Faary

faary

Faary lets you create forms quickly and easily, by just entering the form elements in a list format.

20. Pure CSS Menu

purecssmenu

This site lets you create a menu with dropdowns that only uses CSS, no images. It’s simple, but it’s also quick to set up.

21. CSS Sprite Generator

cssspritegenerator

To create CSS sprites with this generator, just zip all your images and upload them. Specify the space you want between images, as well as the aspect ratio, build direction, and if there should be a background or transparency color, as well as your image specs and any CSS specs you want. It will output the sprite file, as well as the CSS for each image.

22. CSS Menu Generator

cssmenugenerator

This generator is great for when you just need a quick, simple drop-down menu.

23. Tabs Generator

tabsgenerator

You can choose height and width, border size, corner radius, background color and style, fill style and colors, and orientation.

24. Favicon Generator

favicongenerator

This Favicon Generator lets you create a favicon from scratch or based on an image you upload.

25. Color Mixer

color mixer

Create a new color by mixing colors, Color /mixers is a fun tool to fine tune and fiddle with a color with editable RGB colors and adjustable lightness and darkness.

26. Tartan Maker

tartanmaker

Plaid backgrounds aren’t often seen in web design, and part of that is likely due to the complexity of creating a tiling plaid pattern. Tartan Maker makes it as easy as choosing a few colors and using sliders to determine the size and boldness of your plaid.

27. Stripe Generator 2.0

stripegenerator

Stripe Generator 2.0 lets you create repeating-stripe backgrounds. Just choose size and spacing, colors, stripe orientation, shadow, and background style.

28. Stripemania

stripemania

Stripemania is a striped background image generator. Pick the strip width and spacing, the orientation, and the colors, and it generates a repeating stripe pattern.

29. CSS Border Radius

borderradius

All you have to do is enter the border radius for each corner. It automatically fills in all four when you enter the first one, but you can then change each one individually.

30. CSS3 Sandbox

css3sandbox

This CSS3 Sandbox has five different generators: linear gradients, radial gradients, text properties, box properties, and transforms.

31. CSS3.0 Maker

css30maker

Here’s another CSS3 generator that lets you create a variety of different effects using CSS3. There are generators for border radius, gradients, animation, text and box shadows, and more

32. CSS Type Set

csstypeset

CSS Type Set lets you create typography designs and generates the CSS for you. Just paste in text you want to modify, and then use the options at the bottom to customize it and it will generate the CSS in real-time.

33. ColoRotate

colorotate

ColoRotate lets you view and create color schemes in 3D. Being able to manipulate the color palette tool in 3 dimensions can lead to better understanding of how the colors in a palette relate to one another.

34. Templatr

templatr

Templatr is another simple generator for creating quick WordPress layouts. It lets you edit virtually every element in the design, all using a visual editor.

35. WordPress Theme Generator

wpthemegenerator

This generator lets you create a WP theme, and while it’s not extremely powerful, it is a quick way to create minimalist themes (both in terms of style and functionality).

36. Contact Form Generator

contact

Contact Form Generator is used to create form to email scripts for your ASP, PHP or Perl website with no programming. Just enter the email header fields like email from, email to and subject to create the form.

37. Blueprint Grid CSS Generator

blueprintgenerator

If you like using Blueprint for your CSS layouts but want something more flexible, this generator is for you. Just enter the number of columns, column width, and margin width and it generates your CSS for you. One caveat, though: it’s no longer in active development and is not supported.

38. YAML Builder

yamlbuilder

Here’s a visual tool for creating a YAML (Yet Another Multicolumn Layout) design.

39. Create Graph

create

Create a graph as bar graph, line graph, pie chart etc.. by selecting the default graph type and defingin the design such as style, shading, data set ie number of fields, data labels and your graph is created.

40. CSS Optimiser

css optimizer

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

{ 121 comments… read them below or add one }

Max September 15, 2011 at 11:48 pm

Awesome collection!
Thank you!

Here’s a button generator that I found recently and absolutely love it!
http://dabuttonfactory.com

Reply

Ben September 7, 2011 at 7:01 am

Here’s a great tool:

http://www.spritemeister.com

Reply

Lars September 7, 2011 at 6:54 pm

Thanks Ben!

Reply

Domokrazca September 6, 2011 at 11:43 pm

great job! thank you very much .

Reply

Waco Webdesign September 6, 2011 at 8:12 pm

Big and great article. Its a bookmark

Reply

Joann August 27, 2011 at 8:48 pm

Awsome list of tools! Thanks for sharing!

Reply

Fancy dress outfits uk August 18, 2011 at 11:14 am

We all know that backgrounds play a crucial role in a design. Web Designers sometimes spend a lot of time in making pattern or stripe backgrounds and there are also tool to help you out here.

Reply

Kiss Honlapkészítés August 16, 2011 at 8:13 am

This is a great article. Thanks for putting together all the info!

Reply

Hugo Menino Aguiar August 12, 2011 at 12:00 pm

Thanks, great stuff here!

Bookmarked.

Reply

Restoran August 10, 2011 at 1:07 pm

Nice generator!!! Thanks for information.

Reply

Robin Jennings August 10, 2011 at 11:40 am

What an amazing resource. Why didn’t I find this post yesterday when I needed a background for a website – would have saved me a few hours!

I especially like the http://www.tartanmaker.com

Reply

web design articles August 9, 2011 at 5:31 am

Wow, some really cool and useful softwares are here…i really like the wp theme generator…very useful. thanks for sharing

Thx again

Reply

Domain Registrar August 7, 2011 at 12:38 pm

Excellent list of generators. Certainly beneficial for web developers and companies. Efforts appreciated.

Reply

webveins.in August 2, 2011 at 6:03 pm

This is what we call awesomeness.

Thanks for sharing this huge and great list of webtools.
It gonna save me a lot of work.
Thanks again…

Reply

Alexander Chapman July 28, 2011 at 5:47 pm

pretty useful collection, could need some plugins for my blog, for example the “Badges” Tool:)

Reply

John July 23, 2011 at 12:16 am

Nice list, but no domain name generators?

You should totally add mine: http://impossibility.org/ :)

Reply

Mohsin fancy July 14, 2011 at 3:01 am

Thanks For Sharing..
Visit my website. i have created this with some help of these tools.
http://www.mohsinfancy.com
Usually i don’t prefer to use the tools. but somethings its time saving.
thanks

Reply

Ashley July 12, 2011 at 11:12 pm

I can honestly say that I think this is a great list of very useful websites. A wide Range of uses as well.

Thanks for the Links! :)

Reply

michael stephan July 3, 2011 at 1:40 pm

wow thanks for this list, lots of useful resources there!

Reply

Sureeya June 20, 2011 at 12:33 pm

nice article….very useful one…

Reply

DD June 18, 2011 at 5:40 pm

Thanks a lot. I need several of these generators. I think that I will start with the Favicon.

Reply

lvraa June 19, 2011 at 8:36 am

You’re welcome DD, good you found what you needed!

Reply

Dizzy June 15, 2011 at 2:59 am

Hell yes! Everything on this page is awesome.

Reply

Oskar June 4, 2011 at 10:30 pm

This page is a really nice compilation of links!!!

Reply

lvraa June 4, 2011 at 10:39 pm

Thanks Oskar!

Reply

Website Designers May 8, 2011 at 5:07 pm

I agree with your comment.
Thanks

Reply

Tristan May 4, 2011 at 11:39 pm

I highly recommend the QR Code generator too. Can be considered a secondary element t web design, it is indeed useful to get mobile users to your website.

http://createqrcode.appspot.com/

Reply

Lars May 5, 2011 at 12:17 am

Thanks for the tip Tristan!

Reply

Send fee sms May 2, 2011 at 11:45 pm

I was looking for Favicon Generator for my blog, thanks for getting me free.

Reply

PS Website Design Ilkley April 12, 2011 at 8:22 am

Brilliant resource. Will certainly be booking this! Thanks.

Reply

james March 21, 2011 at 6:29 pm

very helpful resource for graphics, I often use wordpress theme generator, I think its brilliant tool

Reply

Lars March 21, 2011 at 6:44 pm

OK James great to hear that you use it

Reply

Seo March 17, 2011 at 7:27 pm

Thank you for article! Good.

Reply

cosplay wigs March 15, 2011 at 11:53 am

amazing tools,Thank u

Reply

Ben0 March 12, 2011 at 3:38 pm

Brilliant!

Reply

english March 11, 2011 at 5:46 pm

Clear a non-English speaker wrote this title!

Reply

Daniel White March 10, 2011 at 8:36 pm

Definitely bookmarked and added to my favorites on StumbleUpon.

Am wanting to get back into web design again, so some of these tools may be helpful.

Reply

frank March 9, 2011 at 7:35 pm

Impressive List! You obviously put considerable time into this! Thanks for sharing.

Reply

Jared March 9, 2011 at 4:55 pm

Thanks!

I think some of these links will be useful for my wife and I and our blogs.

Reply

Lars March 9, 2011 at 5:20 pm

Thanks for the feedback Jared, glad you can use it

Reply

Silvester Nikola March 9, 2011 at 2:16 pm

Nice site for design, art,….

Reply

Dann Sommer *The Network M@ximizer* March 9, 2011 at 12:18 pm

Great ! – just great ! – Thanx for sharing – lots of highly useful tools :-) – regards Dann S.

Reply

Lars March 9, 2011 at 5:21 pm

Great, just great feedback, thanks a lot Dann

Reply

Hannah Hurst March 9, 2011 at 12:00 pm

A wide range of tools listed here! A great source of information for anyone just starting web design. Thanks for sharing.

Reply

Joel Caton March 9, 2011 at 11:47 am

Great list of tools. A must bookmark article.

Reply

TemplatesRule.com March 9, 2011 at 9:56 am

I have always been in search of good online generators , but haven’t yet found any reliable one. every generator has a limitation when it comes to a slightly different kind of design. Can anybody recommend a good generator which can work well even with complex designs like http://www.templatesrule.com/web-templates/template-type-html.html

Reply

abel pardo March 9, 2011 at 8:44 am

That’s really amazing. Congratulations for the post

Reply

Yeni Versiyon March 9, 2011 at 8:34 am

There are wonderful tools. Thank your effort…

Reply

IndigoAdagio March 9, 2011 at 8:27 am

An impressive list! Exactly the kind of reference I need to master the art of speedy web app design.

Reply

Lars March 9, 2011 at 5:23 pm

Indigo, great you can use the list.

Reply

James March 8, 2011 at 3:56 pm

I prefer handcoded designs for complex stuff but for banners and graphics these sorts of generator can save a designer/ developer a lot of time.

Reply

Geoffrey Atkinson March 8, 2011 at 2:36 pm

It looks like you can give us the help we need.

Reply

Geoffrey Atkinson March 8, 2011 at 2:35 pm

As you will see from the website, we need help in design.

Reply

Eoin Redmond March 8, 2011 at 9:32 am

Very useful, thanks for sharing Dustin

Reply

Horoskop March 6, 2011 at 11:27 pm

Thank u
amazing tools

Reply

M Ibrahim March 6, 2011 at 8:13 pm

Thank you very much
This is really helpful

Reply

Sarah March 5, 2011 at 10:22 pm

Great post! I have not come across many of these before. I am currently a teaching assistant for an undergraduate HCI and design course, and I know these sites will be very beneficial for the students this semester and in the future. Thanks!

Reply

Lars March 6, 2011 at 9:50 am
darryl brocklesby March 5, 2011 at 10:39 am

wow some really good tools here

Reply

Lars March 5, 2011 at 11:39 am

Thanks Darry!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 13 trackbacks }

Previous post:

Next post:


Web Analytics