Here we’ve rounded up a nice collection of jQuery tutorials to get you started, or to take your skills a bit further. Tutorials are a great way of practicing your skills.

Good luck!

Animate panning slideshow

A slideshow that transitions by changing the visible window.

Lavalamp-style navigation menu

This intermediate tutorial explains it well from scratch. Screencast is also available.

How to load in and animate content

This tutorial takes your average everyday website and enhances it with jQuery. Learn to add ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. You will also be integrating some animation effects.

Sexy drop-down menu

In this tutorial you’ll learn how to create a sexy drop down menu that can also degrade gracefully.

Beautiful slide-out navigation

Learn how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them.

jQuery-powered tag-cloud

Great way to show your visitors what is popular.

Use Sprites to Create an Awesomeness-Filled Navigation Menu

CSS sprites can dramatically increase a website’s performance, and with jQuery, you can implement awesome transition effects easily.

Create a Cool Animated Navigation with CSS and jQuery

Learn how to build a really cool animated navigation menu using just CSS and jQuery.

How to Validate Forms in both sides using PHP and jQuery

Learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP).

Creating a filterable portfolio

In this tutorial, learn how to make “filtering by category” a little more interesting with just a little bit of jQuery.

Stunning and smooth popup

Using windows popup to show important information are in the air and you are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial.

How to easily create charts using jQuery and HTML5

Learn how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.

How to create a kick-ass CSS3 progress bar

Learn to create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.

Making image captions

In this tutorial you’ll learn to make a semi-transparent image caption using jQuery. The image caption will be triggered on hover.

“Outside the box” navigation

OS X style docks and stacks navigation.

Live email validation

Fun tweet counter

Submit a form without page refresh

Quick feedback form

Google powered site search

Giveaway randomizer app

Animated 404 page

Tabbed interface

Carbon fiber signup form

Learn how to create a jQuery plugin

Good luck

Web template using the 960 Grid System

Clean business Layout

Online photo portfolio

Creative studio web page

Clean business layout for Drupal

Simple portfolio gallery layout

Hand-drawn layout

Cartoon grunge

Grunge

Sleek high-end

Design agency layout

Clean Grunge blog design

Dark Theme

Web 2.0 vector

Design studio layout

Photography portfolio

Business Layout

Computer store layout

Unique grungy website

Stylish webstudio

Soft green nature layout

Trendy colorful WordPress layout

Cool and trendy grunge

Interior design layout

Real estate template

Website design studio

Old paper layout

Clean modern website

Video sharing layout

Awesome portfolio layout

Green sleek layout

3d style layout

Green corporate layout

Sleek modern portfolio

Adobe Flash (formerly Macromedia Flash) is a multimedia platform used to add animation, video, and interactivity to Web pages. Flash is frequently used for advertisements and games. More recently, it has been positioned as a tool for “Rich Internet Applications” (“RIAs”) (source: wikipedia.org)

If you’re interested in more in-depth info, you can continue reading over at Wikipedia by clicking here, or go check out Adobes own product site here.

Picture by Benito LeGrande

Click the images to go to the tutorials and see what the end results will look like

Easy/Beginner

3D Tunnel effect

Loopy Loop Text Effect

Rotating Letter text effect

Line Text Banner

Drip down text effect

Flash “tooltips”

Blue Sky animation

Old TV (grain) effect

Zoom in – Zoom out Animation (with fading effect)

Fireworks

Picture animation

Video Panoramas

Shine Car photo animation

Intermediate/Advanced tutorials

A better way to build Flash banners

Paypal buttons with ActionScript 3.0

Image rotator in Flash (using XML and ActionScript 3.0)

Custom Color Picker

Comment Form with Flash, PHP, XML and MySQL

iPhone inspired Switch Checkbox

Those were our 20 picks for you this time. We hope they’ve helped you learn some new things related to Flash, along with awakening some new creativity. Thank you for reading!

Did you ever want to start designing some websites for yourself, friends or do you just want to learn a new thing or two on this topic related to Photoshop? Here is a collection with a good variety of different styles for you to learn from.
Enjoy!

WEBSITE LAYOUTS

How To Build Your Own Single Page Portfolio Website

In this tutorial you will have a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

Design a light WordPress theme

Learn to create a  light WordPress theme with a web 2.0 look. Here simplicity is the key for a clean and appealing layout.

Clean blue web layout

Create a clean blue web layout using the 960 grid system.

Professional Web 2.0 Layout

Very detailed tutorial in many steps to help you create a good looking web 2.0 layout.

How to Create an Illustrative Web Design

Learn how to create a professional web design with an illustrated vector header. Techniques included are using the pen tool and type treatment using layer styles.

Realistic website layout

Here you will use stock images and textures as part of creating a realistic office desk themed layout.

Light and Sleek Web Layout

Light and sleek layout in Photoshop using 960 Grid System, and if you haven’t used it before, no problem, you will know how to use it after you’ve tried this great tutorial.

Apple inspired website layout

This tutorial shows you how to create an apple inspired website. Gives you a very clean and appealing end result. With small modifications you can transform this PSD layout into a wordpress theme if wanted.

Unique Grungy Website Layout

This tutorial teaches you how to design a cool grungy website layout. It walks you through various Photoshop techniques and outlines general design principles. It also provides pointers for your own grunge designs.

Band website template

Intermediate tutorial, showing you how to make a grungy-style band website template.

VARIOUS ELEMENTS

Latest Tweets Box

Here you will learn how to create a unique content box for your twitter feed on your WordPress blog.

Animated banner

Use Photoshop to create an animated leaderboard banner. Learn how the animation/timeline panel works and how to use it to create great animations.

Content Box With Orange Banner Heading

In this tutorial you will learn how to create a content box where the corners are rounded and the heading has a 3D effect.

Apple Navigation Bar

Learn how to create the Apple navigation made famous by use on their website.

Create a Slick and Clean Button

This tutorial shows you how to create a simple and clean “Web 2.0 style” button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).

Create a Dark Modern Contact Form

In this tutorial, you’ll be creating a dark, modern contact form in Photoshop. Use some layer styles and other basic effects to give a metal cut-out look.

Nice ‘n’ Simple Subscribe Badges

In this Photoshop tutorial you’ll be making cool supermarket-style badges, then turning them into subscribe buttons for your website.

Delicious “Contact Me” Button

Learn the steps to create this “Contact Me” button in Photoshop. A simple tutorial, great for beginners to learn a few tricks.

Simple & Sleek Web 2.0 Site Footer

Never underestimate footers!  In this tutorial you will learn how to produce a sleek looking site footer in Photoshop.

Professional Glossy “Download” Button

Learn how to design a simple, professional & glossy multi purpose button, «download» used as example.

Blue gradient website header

Create a nice blue gradient website header with a shiny navigation bar.

RSS button

Learn how to make a good looking RSS button with this tutorial.

Clean and Fresh Call-to-Action Button + Embossing Text Effect

In this easy tutorial, you will see how simple it can be to create effective, clean and fresh call-to-action button. This will surely attract visitor’s attention, with a quick way to create this trendy embossing text effect.

Create a Beautiful, Unique Website Header

In this tutorial, you will see how to create a beautiful, unique, abstract website header in just a few easy steps. The abstract lighting technique is one you’ll “Wow” a lot of visitors with!

Design a Web 2.0 tab with Photoshop

A guide to give you an idea how to design a nice sleek tab menu in Photoshop, Web 2.0 style.

Those were our picks of 25 useful photoshop tutorials for web designers. I hope you have learned some new tips and techniques along with gaining new inspiration. Remember to play around with settings and colors to add your own touch to these designs.
Good luck!

Authorization:

Authorization is written permission from the client to commence work on their behalf. It should include provisions for where the work will be completed (authorization to upload to their server for example) and authorization to publicize your clients completed website to web search engines, directories and indexes.

Standard Elements:

In this clause, you should list what comes with your standard web package. This should cover all the little nitty gritty details that your client can expect you to include with your quote and what costs extra. Here’s some examples from my own contract.

• E-mail and Phone consultation of up to 2 hours. This includes answering questions, consultion on the website and teaching the client anything they need to know to run their website. It’s good to put some cap on this time because although you may have clients needing 1-3 hours of consultation, you’ll need to charge extra when you find that client requiring 10 hours of your time.

• Content: In this clause, define who will supply the content, useually the client. It may also be prudent to put a cap on the amount of text per page if it requires extra time to format and let the client know that going over the cap (maybe 1000 words) will cost extra.

• Custom Graphics: Are any logos, headers, banners etc included in the web design? Some things may seem obvious but it’s important to list these things here when your clients asks where their logo is and they haven’t contracted for it. Also include info about any stock photography to be used and who will supply it.

• Installation: Does the contract include installation of scripts and pages to the clients hosting? Is configuration included? Do they just want the source files to upload themselves? Sort out the details now to avoid headaches later.

• Minor Updates: Do you include any small changes as the client begins to use the website and get feedback in the coming months? I usually do not include any free changes but may bill at a reduced rate if it’s something small.

• Search Engine Marketing: Usually this is an additional service but you can quote your prices for this and any complicated SEO at this point to try and upsell your client.

Hourly rate:

All additional work above what you list in your stand inclusions should be billed at your hourly rate. Use this section to define your rate and make it clear to the client how much extra they can expect to pay for additional requests.

Completion Date:

Set a deadline here and make sure it is one you can meet. The client can always delay, so include a provision the releases you from the deadline in the even your client is slow to provide text and images.

Payment of Fees:

Detail what fees are due and when they will be payable. I usually use the following conditions.

• 50% due upon completing the contract BEFORE commencing any work on my part. This weeds out people who are not serious about having a website built or are going to attempt to lowball or scam me.
• 50% due upon completion of the project according to the clients original specifications. Any additional work above what is in the contract will be billed afterwards.
• If the website contract is $500 or less, 100% is to be paid up front. There’s no reason to split a website of that size into multiple payments.

There are many other things that may go into your contract. If you work fulltime for yourself, it may be worthwhile to consult a lawyer and/or purchase a premade comprehensive web design contract to make sure it will stand up in court if necessary.

Click here to download a sample contract

Anything I missed? Leave me a comment.