Ambiance is the most important part of any website. Your articles could be top notch, your games the best in the world and your photos unique but your visitors will not stay if they’re in the wrong setting. Visitors have expectations, pre-conceived ideas, of how a website should look, behave and consequently “feel” to their mental sensors: a search engine needs to be kept simple, a forum needs to be clean and easy to navigate, and a fanzine needs to appear like any shop bought magazine. Making your site look great and even giving it a few sound effects when appropriate is all part of any webmaster’s job. Give your visitors a good experience and they’ll tell their friends about you. Give them a bad experience and, well, what did you do the last time you saw a bad website?
Updated: Monday, 15th September 2011
Here are a few resources for free online graphics, textures, icons, buttons, logos, banners, sounds and tools to create them that I’ve found useful. I think you will like them too.
I highly recommend GRSites, DeviantArt and The Archive. The former because it contains such a wide range of graphics and tools; and the latter because it contains a lot of graphics, artwork creation advice and extra components (plugins, textures, gradients…) for graphic creation tools such as GIMP and Photoshop.
An excellent free graphics editor is the GIMP; with it you can create your own logos, background images, general graphics or just edit, improve or just add your own flare to the ones provided by the sites linked here. Most of the graphics used in this site game from these resources and were edited using GIMP. A simple to follow single page user tutorial is available here at JournalXtra.
Web 2 Graphics Generation
Stripe Generator
This one of the easiest and quickest to use background image creators I’ve seen. It has a simple to use application interface and provides attractive tileable graphics. I first wrote this article in August 2009 and I still use online graphics app to make background images.
BG Maker
Different to regular background image makers, this one provides a grid of squares that represent screen pixels. You can adjust the size of the grid and the color of each pixel to make a custom (repeatable) background image. The page background live-updates as you create your masterpiece.
Creatr
Need glossy graphics to window dress your page’s body or header?
Creatr mainly targets body tag background image requirements but the background images it makes can be used as with other HTML element too.
Rounded Corner Generators
Make CSS3, Gecko and WebKit rounded corners with ease. CSS controlled rounded corners will work in most modern browsers and some older ones. They do not work in IE8 but do in IE9 and above.
Spiffy Box
This web app makes 4 rounded corner graphics for decorating HTML boxes. It’s easy to use and even provides the HTML and CSS components required to embed the images in your HTML. These rounded corners are compatible in most (if not all) browsers.
Cornershop
Cornershop is the simplest to use non CSS3 rounded corner generator. The interface doesn’t look so nice and it doesn’t provide so many options as Spiffy Box but it does more-or-less the same job.
Button Makers
My Cool Button
Good collection of very nice button creation tools that add that glossy web 2.0 effect so many webmasters aim to reach. A key feature is its iPhone icon generator.
Buttonator
Buttonator provides a large selection of definable buttons and icons in both old-style and Web 2.0 formats. Easy to use and highly configurable button maker.
Decoration and Add Graphics
Quickribbon
Make Javascript diagonal corner decorations with customizable text for webpages. Useful for attractive and non intrusive advertising.
Web 2.0 Badges
Need an intuitive interface that lets you configure predefined badge shapes?
Web 2.0 badges lets you create your own snazzy “Look at me, I’m Special” badges with ease.
Fresh Badge
Another simple to use badge creator. The app’s simple and clean layout provides a lot of fine control for the badge’s production.
Logo Creation
Web 2.0 Logo Creator
This one makes very sleek looking website logos. I prefer to use GIMP but for quick and simple logos I use something like Logo Creator.
Web 2.0 Logo Creator
This a little more configurable than Logo Creatr. It’s worth a look.
Cool Text
Another simple to use free logo maker. The interface style is different to the two detailed above as are the style of graphics created. Not necessarily complete with web 2.0 effects but useful non-the-less.
Tabs Generator
Probably the only free tab creation product you’ll need for developing stylish webpage navigation bars. It has an intuitive design that isn’t bloated with lots of ads.
Open Cube
Not the simplest app to use but one of the most complete WYSIWYG menu makers available. The free version is fully usable for creating advanced menus with either HTML or Javascript effects. The online interface can be reached here.
Loading Gifs
Load Info
Create your own activity indicator or use a predefined gif. Lots of predefined gifs to choose from.
Ajaxload
Creates attractive Ajax loading and activity indicators for free.
Web Script Lab
Another loading GIF generator that does the same as the two above but provides a slightly different set of predefined graphics.
Favicons
You can use Gimp to create favicons by reducing an image ‘s size to 50×50 pixels and saving it as an icon file. Otherwise you can use one of these online favicon makers.
De Graeve Favicon Generator
Create favicons by colouring in a pixelated grid. Many other tools available here too.
Dynamic Drive’s Favicon Maker
This is for lazy designers. Find a graphic, upload it and let this app work its magic.
Clipart
Open Clipart
Large collection of downloadable clipart images. Take the lot as a free zip file or just take the ones you need.
Open Office
Nice collection of free, public domain clipart.
WPClipart
Big collection of public domain clipart.
Free Clipart Now
Cliker Clipart
Royalty free and public domain vector clipart. Nice big collection.
Vectorish
Another good source for free, public domain vector graphics and clipart.
Background Textures
CGTextures
Thousands of well categorized free textures. If GRSites doesn’t have what you need then CGTextures probably will.
Also see GRSites.com in Sound Effects, General Graphics and Image Tools.
Icons
Try these for free to use icons:
Stock Images
Ad Banner Creators
Create basic ad banners using these free online tools. Personally, I use Gimp and KolourPaint but I have used these ones before and do recommend them.
Banner Creator is much more than a simple banner creator. This site also gives hints and tips for banner placement and offers banner rotation scripts and basic website promotion advice.
Banner Sketch is much easier to use than Banner Creator but offers less customization.
Sound Effects
The Internet Archive
The most massive resource of Creative Commons sound effects, clips and loops that are stored in various formats that can be either downloaded or streamed into webpages .
Free Loops
Free to use sound loops. Primarily aimed at the music industry, this collection is veritable enough for use in other projects too.
The Free Sound Project
Thousands of freely downloadable and reproducible sound effects.
General Apps
GRSites
The Swiss Army Knife of web graphics, sounds and tools. A brilliant collection of textures, graphics, sound effects and tools for creating buttons, logos and other stuff.
Bonus Tools
Wigflip is a small collection of useful web graphic tools.
Accessify is a small collection of very impressive tools. Create styled lists, check-boxes, forms, jQuery functions etc…
CSS Layout Generator is a useful app for designing the layout of CSS controlled webpages.
At the time of writing, all of the above services are free to use and offer items that are Public Domain and Open Source. Check licenses of stock images, icons, sounds and other media used to ensure commercial usage is permitted without cost and/or attribution.
I a beginning web the designer. These resources will be useful to me.