PDA

View Full Version : 99 Resources for Web 2.0 Design


Yahook
11-27-2007, 02:56 AM
BADGES:

Web 2.0 Badges (http://www.web20badges.com/) - A set of free badges to download and use in your own designs.
Fresh Badge (http://www.freshbadge.com/) - Quickly generate your own badge.
adClustr (http://adclustr.com/other-downloads/27) - Starburst badges.
Deziner Folio (http://www.dezinerfolio.com/2007/04/23/web-20-badges-free-download/) - A collection of different badges.
BittBox (http://www.bittbox.com/freebies/free-vector-badges-glass/) - Free vector badges.
Official Seal Generator (http://www.says-it.com/seal/circle.php) - An alternative to the typical badge.
Photoshop Tutorial (http://www.ajaxlessons.com/2006/02/16/web-20-badge-tutorial/) - A quick lesson on making your own badge.
Glossy Photoshop Tutorial (http://www.photoshopstar.com/web-graphics/star-badges/) - Create a glossy badge with this tutorial.

BUTTONS:

My Cool Button (http://www.mycoolbutton.com/) - A nice online tool that will help you to quickly create the button that you want.
Adam Kalsey’s Button Maker (http://kalsey.com/tools/buttonmaker/) - Simple tool to make your own buttons.
Button Maker from Blog Flux (http://tools.blogflux.com/buttonmaker/) - Create your own custom button.
Brilliant Button Maker (http://www.lucazappa.com/brilliantMaker/buttonImage.php) - A similar button maker to the previous 2.
CSS Buttons (http://www.devdude.com/tools/tool.pl?TID=11) - Choose the text, border, and background.
Buttonator (http://www.buttonator.com/) - A paid option for creating buttons.
RSS Button Maker (http://www.rssbuttons.com/) - The name pretty much says it all.
Button Boost (http://www.buttonboost.com/startweb.html) - A little bit different than some of the other button generators.
ButtonGenerator.com (http://www.buttongenerator.com/) - Create buttons for navigation menus.
Crystal Button (http://www.crystalbutton.com/) - Slick web buttons made easy.
Chicklet Creator (http://www.ifeedreaders.com/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 (http://www.roundedcornr.com/)
Corner Shop (http://wigflip.com/cornershop/)
Spiffy Box (http://spiffybox.com/)
Canvas Corner (http://ajaxian.com/archives/canvas-corner-10)
Spanky Corners (http://tools.sitepoint.com/spanky/)
Sliding Doors Text Box (http://www.vertexwerks.com/tests/sidebox/)
Smart Rounded Corners (http://mikecherim.com/experiments/css_smart_corners.php)
Rounded Corners in CSS (http://virtuelvis.com/gallery/css/rounded/)
News List (http://www.456bereastreet.com/lab/newslist/)

LOGOS:

Each of these tools will create a simple web 2.0 style logo.
http://www.vandelaydesign.com/images/logocreatr.gif
Web 2.0 Logo Creator (http://h-master.net/web2.0/)
Web 2.0 Logo Creatr (http://creatr.cc/creatr/)
Web 2.0 Logo Creator (http://www.simwebsol.com/ImageTool/)
Web 2.0 Stylr (http://web2.0stylr.com/stylr.aspx)

ICONS:

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.
http://www.vandelaydesign.com/images/utom.gif
UtomBox (http://utombox.com/downloads/) - A great collection of web 2.0 icons.
Feed Icons (http://feedicons.com/) - The standard RSS icon.
Map Icon Factory (http://www.terraims.com/dmapicons/) - Create your own map icon.
Perishable Press (http://perishablepress.com/press/2006/08/20/a-nice-collection-of-feed-icons/) - A nice collection of RSS icons.
Glass Style RSS Icons (http://www.bittbox.com/freebies/free-glass-style-rssfeed-icons)
Snap2Objects (http://www.snap2objects.com/2007/06/10/30-free-vector-rss-buttons/) - Vector RSS icons.
31 Sources of Quality, Free Icons (http://www.vandelaydesign.com/blog/design/free-icons/)

Yahook
11-27-2007, 02:56 AM
GRADIENT IMAGES:

Another common element of web 2.0 is gradient images. Here are a few tools to help you.
Gradient Image Maker (http://tools.dynamicdrive.com/gradient/)
Gradient Generator (http://www.grsites.com/generate/generator/5000/)
Online Gradient Image Maker (OGIM) (http://www.ogim.4u2ges.com/gradient-image-maker.asp)

SPEECH BUBBLES:

Speech bubbles are commonly used for styling comments or blockquotes.
http://www.vandelaydesign.com/images/mayo.gif
Will Mayo (http://www.willmayo.com/2007/02/10/css-speech-bubbles/)
Bubblesnaps (http://www.bubblesnaps.com/)
CSS Play (http://www.cssplay.co.uk/menu/bubbles)
XHTML Speech Bubbles (http://j3rn.org/shoutbox/)
WigFlip (http://wigflip.com/ds/)
Fluid CSS Speech Bubbles (http://www.gamexe.net/view_tutorial.php?id=24)
MySpace Speech Bubble Generator (http://www.myspaceplease.com/myspace-generators/speech-bubble-generator.php)
Photoshop Tutorial (http://www.pstut.com/tutorial-speech-bubble.html)

BACKGROUND IMAGES:

Background Image Maker (http://lab.rails2u.com/bgmaker/) - Create background images with choices like transparency and gradients.
Stripe Generator 2.0 (http://www.stripegenerator.com/) - 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 (http://www.stripedesigner.com/) - Easily create striped images.
Tartan Maker (http://www.tartanmaker.com/) - Create a tartan background image.
Texture Generator (http://www.texturemaker.com/tour.php) - Creates textured images that you can use as a background.
All Free Backgrounds (http://www.allfreebackgrounds.com/background_select.html) - Choose the background you want.

COLORS:

The Colors of Web 2.0 (http://www.flickr.com/photos/ross/49490304/) - Are you looking to match the color of a popular web 2.0 site?
Web 2.0 Color Pallete (http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette) - Popular web 2.o colors.
Color Schemer Gallery (http://www.colorschemer.com/schemes/) - Having problems choosing a color scheme? Find one you like in this gallery.
COLOURlovers (http://www.colourlovers.com/) - More samples of color combinations.
Website Color Picker (http://www.digitdesigns.com/colrPick/framePic.htm) - Test color combinations quickly.
I Like Your Colors (http://redalt.com/Tools/I+Like+Your+Colors) - Get the colors used by a particular site.

NAVIGATION:

CSS Menu Generator (http://www.webmaster-toolkit.com/css-menu-generator.shtml) - Easily create attractive CSS menus.
Listamatic (http://css.maxdesign.com.au/listamatic/) - Collection of CSS menus.
List-O-Matic (http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/) - Create your own CSS menus.
List-U-Like (http://www.listulike.com/generator/) - Another tool to create your own navigation bars.
Tabs Generator (http://www.tabsgenerator.com/) - Create tabbed images for navigation.
Flash Buttons (http://www.flashbuttons.com/) - Create navigation menus with flash buttons
CSS Play (http://www.cssplay.co.uk/menus/) - An extensive collection of CSS menus.
Exploding Boy (http://exploding-boy.com/images/cssmenus2/menus.html) - Tabbed CSS navigation menus.
CSS Navigation Menu Generator (http://tools.devshed.com/webmaster-tools/css-navigation/) - A tool to help you create your own menu.

FAVICONS:

Favicon Generator (http://www.favicongenerator.com/) - Create your own favicon from an image on your computer.
Favicon from Pics (http://www.chami.com/html-kit/services/favicon/) - Create a favicon from a photo.
Favicon Editor (http://www.degraeve.com/favicon/) - Upload a photo, create a favicon.
Favicon.cc (http://www.favicon.cc/) - Another option for favicons.
Photoshop Tutorial (http://www.photoshopsupport.com/tutorials/jennifer/favicon.html) - Creating a favicon with Photoshop.

CHARTS:

PHP/SWF Charts (http://www.maani.us/charts/index.php?menu=Introduction) - Create attractive charts.
amCharts (http://www.amcharts.com/) - Flash charts.

OTHER:

Avatar Maker (http://www.avatargenerator.org/) - Create and edit an avatar.
Shrink Pictures (http://www.shrinkpictures.com/create-avatar/) - Create an avatar from your photo.
ScaleNine (http://www.scalenine.com/) - Collection of skins and themes created for Flex and Adobe AIR.
VectorMagic (http://vectormagic.stanford.edu/) - Converts bitmap images to vector art.
Templatr (http://templatr.cc/) - Create a layout.
PsycHo (http://psyc.horm.org/) - Blog template generator.
Web 2.0 Generator (http://www.web20generator.com/) - Creates layouts.
Typetester (http://typetester.maratz.com/) - Compare fonts on-screen.
BlogPoll (http://www.blogpoll.com/poll/) - Create a free poll for your blog.
RSSxl (http://www.wotzwot.com/rssxl.php) - Convert an HTML page to RSS.
Meta Tag Generator (http://www.anybrowser.com/MetaTagGenerator.html) - Easily create meta tags for your pages.
URL Rewrite (http://www.linkvendor.com/seo-tools/url-rewrite.html) - Create search engine-friendly URLs for dynamic pages.
.htacces generator (http://developers.evrsoft.com/tools-htaccess-generator.shtml) - Quickly create an .htaccess file.
Thumbnail Generator (http://www.codeproject.com/csharp/thumbgenerator.asp) - Create thumbnails for a large amount of images.
Reflection.js (http://cow.neondragon.net/stuff/reflection/) - Adds reflections to your photos.
Drop Shadow (http://www.dropshadow.net/) - Improve your images with a drop shadow.
CSS Sprite Generator (http://spritegen.website-performance.org/) - From Website Performance.
Vecteezy (http://www.vecteezy.com/) - Stupid name. Cool vectors.
Brusheezy (http://www.brusheezy.com/) - Photoshop brushes.
PSBrushes.net (http://www.psbrushes.net/) - More Photoshop brushes.
deviantART (http://browse.deviantart.com/resources/applications/psbrushes/) - Photoshop brushes at deviantART

Yahook
11-27-2007, 02:57 AM
Let's add more resources to this list :thumbsup:

martinsc
12-05-2007, 07:53 PM
very nice list ;-)
thread bookmarked !
thanks