24+ list of colour tools and resources to get you started

Colour Schemes

• Kuler – Flash application to create and select colour palettes – also includes an Adobe AIR application for desktop use
• Online Color Scheme Generator
• Wellstyled.com’s Color Scheme Generator 2
• How to Get Colour Schemes from Photos
• Color Match – gets six matching web colors (MSIE only)
• Picture to Color – recolors WordPress theme using pictures (Coming Soon)
• Colour Lovers – Browse others’ color palettes, latest web trend color schemes, download palettes for your application

Colour Charts

• Color Charts by HTML Color Codes
• Bob Stein’s Visibone Colour Charts
• Dynamic Color Chart Of HTML Color Codes

Colour Pickers

• GenoPal – Get pleasant colors
• Flash Palette Generator
• Free Application for Mac and Windows users for color picking and changing colors
• Colorzilla for Mozilla Firefox – Color Picker
• Color Cop, multi-purpose color picker for web designers and programmers
• Iconico ColorPic – Great, simple and free
• Online HTML Color Codes Picker

Colour Tools

• Redalt’s Color Tools – Enter a URL and reports colors used
• Manually Add Colors to Change the Layout
• Color Mixers
• Eric Meyer’s Color Blender
• Online HTML Color Codes Color Picker and Dynamic Color Chart
• SiTCE – Photoshop Script to Change Hue, Saturation And Lightness of WordPress Theme

WordPress Colour and CSS Test Sites

• An example of CSS Layout on a WordPress Test Site

24+ Mootools/jQuery plugins

1. Window.Growl 2.0 with MooTools 1.2beta2
   
   
2. nyroModal :: jQuery Plugin
   
   
3. prettyPhoto – jQuery lightbox clone
   
   
4. jQuery.ifixpng – png transparency for windows ie versions below 6
   
   
5. jTouch – Color Charge
   
   
6. jQuery Slug Plugin
   
   
7. Creating accessible charts using canvas and jQuery
   
   
8. How To Create A Keypress Navigation Using jQuery
   
   
9. Mootools Ajax Calendar (Vista-Like)
   
   
10. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
    
    
11. stanlemon.net : jgrowl
    
    
12. Superfish – Suckerfish on ‘roids
    
    
13. JavaScript – ToC script
    
    
14. SyntaxHighlighter
    
    
15. ColorPicker
    
    
16. Building your own lightbox – part 1
    
    
17. Unit PNG Fix
    
    
18. UniTip
    
    
19. Update: A New & Improved jQuery Script to Automatically Preload images from CSS
    
    
20. mcDropdown jQuery Plug-in
    
    
21. BarackSlideshow – An elegant, lightweight slideshow script
    
    
22. getElementsByClassName versión 2008
    
    
23. jQuery::planize, a plugin to enhance your hierarchical documents
    
    
24. jVal – jQuery Form Field Validation Plugin

99 Cool Resources for Web 2.0 Design

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.

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.

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.

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

How to make a Round corners with CSS???

Let’s start with a ’rounded-corner’ tutorial. In this tutorial you’ll learn how to make them. This isn’t the only method there is to produce round corners; this is just the method I use.

First, make two files, called index.html and roundcorners.css. We willl start with the index.html. The code provided isn’t everything you should have in your index.html. You should know how to add structure in your document. If not, please download the final code at the end of this tutorial.

This is very simple. We start with a DIV with id box. This is the box where all the elements of the box will appear in. In this box, we’ll add the corners and the content. Take a look below to view the codes.

<div id="box"></div>

As you can see, I have structured the document. I think this should be very easy to follow and the HTML part has been finished now!

We will continue with the CSS. Open up your roundcorners.css file now. You should understand we use images to give the box its round corners. I will use the following images.

top-left.gif
top-right.gif
bottom-left.gif
bottom-right.gif

CSS

body{
background-color: #CFCFCF;
}
#content{
float:none;
padding:20px 20px 0 20px;
}
#box{
width:300px;
background:#ffffff;
}
#top-left{
width: 19px;
height: 16px;
background: url(images/top-left.gif) top left no-repeat;
float:left;
}
#top-right{
width: 22px;
height: 22px;
background: url(images/top-right.gif) top right no-repeat;
float:right;
}
#bottom-left{
width: 22px;
height: 16px;
background: url(images/bottom-left.gif) bottom left no-repeat;
}
#bottom-right{
width: 22px;
height: 21px;
background: url(images/bottom-right.gif) bottom right no-repeat;
float:right;
margin-top:-21px;
}

As you can see, I’ve placed the div with id top-left at left (with float:left;) and made the div as small as the image itself. With the background style attribute I define a background (top-left.gif) and as you can see when you have done this too, it’ll display a perfect top left round corner (the perfection level of the round corner depends on your designing skills of course).

What I did next, is just repeat this step with all the divs and only change some small things. With top-right you should use float:right; and define another background image but the logic behind it stays the same.

download files here

71 Links Help You To Learn Webdesign

General

• “What is Webdesign” guide
• Understanding Webdesign
• Validate HTML / CSS (Very important!)
• Why validate?

Programs

• Adobe Photoshop CS3 (Design)
  
• GIMP (Design)
• Adobe DreamWeaver (HTML/CSS/PHP editing)
• NVU (HTML/CSS editing)

HTML

• HTML Basics
• W3Schools – HTML reference
• HTML Tutorial
• WebMonkey

CSS

• CSS Basics
• Complete CSS Guide + Reference list
• W3Schools – CSS reference
• Free CSS Ebook – Need to subscribe to the RSS feed to download the Ebook!
• CssLeak
• CSS-tricks
• BrushKing
• A list apart

Design

• Photoshop tutorials
• GIMP tutorials
• Photoshop Basics
• Photoshop Shortcuts
• Create a weblayout in Photoshop + Dreamweaver
• 27 “how to design a website” tutorials in one place

Some Popular CSS Frameworks for Web Development

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage…

Below is a roundup of the various CSS frameworks out there and a short description from the authors of each framework.

960 Framework

Description from Nathan Smith: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Blueprint CSS Framework

Blueprint CSS framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Elements CSS Frameworks

Description from Project Designs: Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.

CwS CSS Framework

Description from Content with Style: If you’ve been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I’m trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I’ve not attempted to explain the layouts included here so it may not be suitable if you’re a CSS beginner. Sorry about that… Feel free to dissect them yourself if you’re interested; I’ve kept them as simple as possible.

YAML CSS Framework

Description from YAML.de: Yet Another Multicolumn Layout (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

YUI Grids CSS

Description from Yahoo!: The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

Boilerplate CSS Framework

Description from Nathan Borror: As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

CleverCSS

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is. The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it’s nonetheless a good idea for structural styles.

WYMstyle: a CSS framework

Description from WYMstyle: WYMstyle is a set of CSS files, that you can easily combine to very quickly create the layout of your web sites. WYMstyle aims to suppress the tedious compatibility testing across browsers for each created website, by providing CSS modules which are reliable and well-tested.

Few CAPTCHA scripts that save your website!!!

1. reCAPTCHA
reCAPTCHA is a free service which helps prevent automated abuse of your site (such as comment spam or bogus registrations) by using a CAPTCHA to ensure that only humans perform certain actions.

2. Securimage
Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots. It can run on most any webserver as long as you have PHP installed, and GD support within PHP. Securimage does everything from generate complicated CAPTCHA images to making sure the code the user entered was correct.

3. WebSpamProtect
WebSpamProtect allows you to instantly add verification image (CAPTCHA) to your web site and protect your forms against spam robots. In order to protect your web form, this system requires that you install a small piece of code onto your web page. The code requires that your web site support PHP, Perl, ASP or ASP.NET. Basic plan is free but you can buy a Premium, Advanced or Professional paln with a little expense.

4. Cryptographp
Cryptographp is a PHP script for generate captchas. Cryptographp limit the robots bombarding spams and automating the forms: spaces members subscriptions, guestbooks, forums… This script is free and does not use any database. It is compatible with PHP >= 4.3.0. Cryptographp also exists into plugins for WordPress, wpMu for WordPress, Symfony and Guppy.

5. CAPTCHA-Service
captchas.net provides CAPTCHA images and audio files you can use in html-forms. To use this technology, your web pages have to be generated dynamically in any programming language PHP, ASP, Perl, Python, JSP, Ruby.

6. WP Captcha-Free
WP Captcha-Free blocks comment spam by using a combination of time-based hash (a.k.a. Time Based Tokens, TBT) and JavaScript (AJAX). When a comment is posted the plugin validates a hash based on time (and some other parameters). Comments posted via automated means will not have a hash or will have an expired hash and will be rejected. Unlike using a captcha, this does not place any burden on the commenter.

7. ProtectWebForm
ProtectWebForm is a service to add CAPTCHA images and audio files on your website. You have to create an account, generate your CAPTCHA type with all the desired parameters and include it on your web pages.You can also use it on your WordPress template with this plugin.

8. ProtectWebForm
OpenCaptcha is a simple web service which requires no special configurations or modules. Basic installation is cut-and-paste, and requires no ability to program image manipuation scripts. New fonts, image algorithms, and distortions applied weekly.

9. Form-to-email script protected by Captcha
This form-to-email script is intended to collect data from an HTML form and send it to a specified email address using a CAPTCHA script to stop spam. It works with any kind of HTML form and you can use it multiple times on your pages.

10. freeCap
freeCap is a GPL CAPTCHA script to stop spam. It has been used on any form on any kind of website. It does require some knowledge of PHP to install, though there are several captcha plugins for forum and blog software listed below.