Have an account?

Nov 12, 2007

99 Resources for Web 2.0 Design

[Update: This post was originally published a while ago, however, almost all of the resources mentioned are still relevant. Since this post was published we've added tons of new resources that you may also find useful (see our Popular Posts page). To get all of the new content, subscribe to our RSS feed or by email.]

BADGES

Web 2.0 Badges - A set of free badges to download and use in your own designs.

Fresh Badge - Quickly generate your own badge.

adClustr - Starburst badges.

Deziner Folio - A collection of different badges.

BittBox - Free vector badges.

Official Seal Generator - An alternative to the typical badge.

Photoshop Tutorial - A quick lesson on making your own badge.

Glossy Photoshop Tutorial - Create a glossy badge with this tutorial.

BUTTONS

My Cool Button - A nice online tool that will help you to quickly create the button that you want.

Adam Kalsey’s Button Maker - Simple tool to make your own buttons.

Button Maker from Blog Flux - Create your own custom button.

Brilliant Button Maker - A similar button maker to the previous 2.

CSS Buttons - Choose the text, border, and background.

Buttonator - A paid option for creating buttons.

RSS Button Maker - The name pretty much says it all.

Button Boost - A little bit different than some of the other button generators.

ButtonGenerator.com - Create buttons for navigation menus.

Crystal Button - Slick web buttons made easy.

Chicklet Creator - Create buttons that allow visitors to subscribe in their feed reader of choice.

ROUNDED CORNERS

Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.

RoundedCornr

Corner Shop

Spiffy Box

Canvas Corner

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List

LOGOS

Each of these tools will create a simple web 2.0 style logo.

Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Stylr

ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

Web 2.0 icons

UtomBox - A great collection of web 2.0 icons.

Feed Icons - The standard RSS icon.

Map Icon Factory - Create your own map icon.

Perishable Press - A nice collection of RSS icons.

Glass Style RSS Icons

Snap2Objects - Vector RSS icons.

31 Sources of Quality, Free Icons

GRADIENT IMAGES

Another common element of web 2.0 is gradient images. Here are a few tools to help you.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Speech Bubbles from Will Mayo

Will Mayo

Bubblesnaps

CSS Play

XHTML Speech Bubbles

WigFlip

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

BACKGROUND IMAGES

Background Image Maker - Create background images with choices like transparency and gradients.

Stripe Generator 2.0 - If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer - Easily create striped images.

Tartan Maker - Create a tartan background image.

Texture Generator - Creates textured images that you can use as a background.

All Free Backgrounds - Choose the background you want.

COLORS

The Colors of Web 2.0 - Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete - Popular web 2.o colors.

Color Schemer Gallery - Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers - More samples of color combinations.

Website Color Picker - Test color combinations quickly.

I Like Your Colors - Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator - Easily create attractive CSS menus.

Listamatic - Collection of CSS menus.

List-O-Matic - Create your own CSS menus.

List-U-Like - Another tool to create your own navigation bars.

Tabs Generator - Create tabbed images for navigation.

Flash Buttons - Create navigation menus with flash buttons

CSS Play - An extensive collection of CSS menus.

Exploding Boy - Tabbed CSS navigation menus.

CSS Navigation Menu Generator - A tool to help you create your own menu.

FAVICONS

Favicon Generator - Create your own favicon from an image on your computer.

Favicon from Pics - Create a favicon from a photo.

Favicon Editor - Upload a photo, create a favicon.

Favicon.cc - Another option for favicons.

Photoshop Tutorial - Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts - Create attractive charts.

amCharts - Flash charts.

OTHER

Avatar Maker - Create and edit an avatar.

Shrink Pictures - Create an avatar from your photo.

ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic - Converts bitmap images to vector art.

Templatr - Create a layout.

PsycHo - Blog template generator.

Web 2.0 Generator - Creates layouts.

Typetester - Compare fonts on-screen.

BlogPoll - Create a free poll for your blog.

RSSxl - Convert an HTML page to RSS.

Meta Tag Generator - Easily create meta tags for your pages.

URL Rewrite - Create search engine-friendly URLs for dynamic pages.

.htacces generator - Quickly create an .htaccess file.

Thumbnail Generator - Create thumbnails for a large amount of images.

Reflection.js - Adds reflections to your photos.

Drop Shadow - Improve your images with a drop shadow.

CSS Sprite Generator - From Website Performance.

Vecteezy - Stupid name. Cool vectors.

Brusheezy - Photoshop brushes.

PSBrushes.net - More Photoshop brushes.

deviantART - Photoshop brushes at deviantART

99 Resources for Web 2.0 Design

[Update: This post was originally published a while ago, however, almost all of the resources mentioned are still relevant. Since this post was published we've added tons of new resources that you may also find useful (see our Popular Posts page). To get all of the new content, subscribe to our RSS feed or by email.]

BADGES

Web 2.0 Badges - A set of free badges to download and use in your own designs.

Fresh Badge - Quickly generate your own badge.

adClustr - Starburst badges.

Deziner Folio - A collection of different badges.

BittBox - Free vector badges.

Official Seal Generator - An alternative to the typical badge.

Photoshop Tutorial - A quick lesson on making your own badge.

Glossy Photoshop Tutorial - Create a glossy badge with this tutorial.

BUTTONS

My Cool Button - A nice online tool that will help you to quickly create the button that you want.

Adam Kalsey’s Button Maker - Simple tool to make your own buttons.

Button Maker from Blog Flux - Create your own custom button.

Brilliant Button Maker - A similar button maker to the previous 2.

CSS Buttons - Choose the text, border, and background.

Buttonator - A paid option for creating buttons.

RSS Button Maker - The name pretty much says it all.

Button Boost - A little bit different than some of the other button generators.

ButtonGenerator.com - Create buttons for navigation menus.

Crystal Button - Slick web buttons made easy.

Chicklet Creator - Create buttons that allow visitors to subscribe in their feed reader of choice.

ROUNDED CORNERS

Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.

RoundedCornr

Corner Shop

Spiffy Box

Canvas Corner

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List

LOGOS

Each of these tools will create a simple web 2.0 style logo.

Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Stylr

ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

Web 2.0 icons

UtomBox - A great collection of web 2.0 icons.

Feed Icons - The standard RSS icon.

Map Icon Factory - Create your own map icon.

Perishable Press - A nice collection of RSS icons.

Glass Style RSS Icons

Snap2Objects - Vector RSS icons.

31 Sources of Quality, Free Icons

GRADIENT IMAGES

Another common element of web 2.0 is gradient images. Here are a few tools to help you.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Speech Bubbles from Will Mayo

Will Mayo

Bubblesnaps

CSS Play

XHTML Speech Bubbles

WigFlip

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

BACKGROUND IMAGES

Background Image Maker - Create background images with choices like transparency and gradients.

Stripe Generator 2.0 - If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer - Easily create striped images.

Tartan Maker - Create a tartan background image.

Texture Generator - Creates textured images that you can use as a background.

All Free Backgrounds - Choose the background you want.

COLORS

The Colors of Web 2.0 - Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete - Popular web 2.o colors.

Color Schemer Gallery - Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers - More samples of color combinations.

Website Color Picker - Test color combinations quickly.

I Like Your Colors - Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator - Easily create attractive CSS menus.

Listamatic - Collection of CSS menus.

List-O-Matic - Create your own CSS menus.

List-U-Like - Another tool to create your own navigation bars.

Tabs Generator - Create tabbed images for navigation.

Flash Buttons - Create navigation menus with flash buttons

CSS Play - An extensive collection of CSS menus.

Exploding Boy - Tabbed CSS navigation menus.

CSS Navigation Menu Generator - A tool to help you create your own menu.

FAVICONS

Favicon Generator - Create your own favicon from an image on your computer.

Favicon from Pics - Create a favicon from a photo.

Favicon Editor - Upload a photo, create a favicon.

Favicon.cc - Another option for favicons.

Photoshop Tutorial - Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts - Create attractive charts.

amCharts - Flash charts.

OTHER

Avatar Maker - Create and edit an avatar.

Shrink Pictures - Create an avatar from your photo.

ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic - Converts bitmap images to vector art.

Templatr - Create a layout.

PsycHo - Blog template generator.

Web 2.0 Generator - Creates layouts.

Typetester - Compare fonts on-screen.

BlogPoll - Create a free poll for your blog.

RSSxl - Convert an HTML page to RSS.

Meta Tag Generator - Easily create meta tags for your pages.

URL Rewrite - Create search engine-friendly URLs for dynamic pages.

.htacces generator - Quickly create an .htaccess file.

Thumbnail Generator - Create thumbnails for a large amount of images.

Reflection.js - Adds reflections to your photos.

Drop Shadow - Improve your images with a drop shadow.

CSS Sprite Generator - From Website Performance.

Vecteezy - Stupid name. Cool vectors.

Brusheezy - Photoshop brushes.

PSBrushes.net - More Photoshop brushes.

deviantART - Photoshop brushes at deviantART