The range of extensions varies from filter effects to tools that add whole design functions such as 3D effects and menu builders. There are many great sources on the web for add-ons that allow you to present more eye candy in any design work for web sites, posters, brochures, etc.

Photoshop add-ons allow you to extend the options for style changes in your designs

Here are the top 10 add-ons i.e. useful add-ons with links to their sources (where many more add-ons are listed) that will extend your ability to produce some of the finest Photoshop work:

1. AKVIS Retoucher -
A popular tool used commercially for Photo Restoration and scratch removal. It can also remove unwanted text, dates and is particularly useful for restoration of old or damaged photo collections.

2. Mask Pro 4 -
This masks backgrounds easily or just parts that need masking like hair or transparent objects. Say you want to place a picture of you in an exotic location, just grab the photo from the web and use this tool to add the photo to your picture background.

3. Local Contrast Enhancement -
This enables you to bring out the finer details that may be lost in a photo due to lack of contrast, darkened areas and blurry areas.

4. Virtual Photographer -
This is an all-in-one preset tool that handle a variety of effects for your work such as polarize, infra-red, gradient, all accessed via tabbed controls and the interface has a split-screen view for previews.

5. 3D Sphere generator -
3D and Photoshop don’t go hand in hand unless you have a plug-in like this. Now you can create 3D spheres and customize its parts.

6. Photokit Sharpener -
There are a few add-ons on offer for sharpness. The unsharp tool in Photoshop is so difficult to use in comparison. This tool will simplify your sharpening needs.

7. Eye Candy Software -
Eye Candy from Alienskin has long been a favorite amongst designers for adding a diverse range of effects to the Photoshop add-on arsenal. The products have different uses such as glass, fire, ice, seamless patterns and realistic lighting.

8. Magic Frames -
Add stylish frame borders from an expansive list to your photos and pictures or create your own.

9. Light Machine -
Lighting adjustment can be tough using the standard filter in Photoshop though this tool will help as it combines lighting adjustment with color based correction to reduce your design time.

10. Primus -
Add slick bevels and textures to your work rather than relying on the standard bevel shapes in Photoshop.

When it comes to being useful as a designer, there is no second choice when it comes to choosing software for the job. Reasons for choosing a plug-in should include usability, reduction in development time and extra spice options for every design. Choose your plug-ins carefully as too much time can be spent, rather lost, due to choosing the wrong one. This list should guide you in your work.

Splashup

Gimp


GIMP, or the GNU Image Manipulation Program, is most likely the first thing you hear from anyone one if you are asking for a free alternative to Photoshop. This software is very powerful, and can be ran on Linux, OS X, and Windows.

GIMPShop


GIMPshop is a fork in the GIMP project, which makes GIMP’s user interface more like Photoshop. The fork rearranges some of the menu options, and used one window rather then three or more windows like GIMP to display tools, workarea, and any other open windows you may have.

Paint .Net


Paint .Net is a Windows only application, since it runs on the .Net framework. You can sort of think of Paint .net as Microsoft Paint meets Photoshop. It has the user friendly interface like Paint, but has the power of Photoshop.

CSS solves many issues when it comes to creating rollover states and is quite straightforward if you have basic CSS skills. I shall show you step by step how to create image rollovers using CSS only.

Let’s create a button for a shopping cart. Your button will have the text ‘BUY NOW’ on it, and when the mouse hovers over the button, an image showing your logo next to the text ‘BUY NOW’ appears. Create the simple image in Photoshop or use other types of images. For this to work, ensure that the button has space for the text. Let’s call them image1 and image2. Save them as GIF files. Image1 can be just a blank image or with a background color of your choice; Image2 will differ by having the logo on it.

Create your two images for the mouse over and out states. Next, we shall create a CSS tag that will control the rollover transition between images. As I show the code, feel free to change the font type, color and other parameters as needed for your web page.

<html>
<head>
<style>
.cssrollover
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(image2.gif) no-repeat;
white-space: nowrap;
display: block;
width: 220px;
height: 45px;
margin: 0;
padding: 0;
}

We use position: relative to position the image relative to its assigned position when the mouse rolls over it. We need the image to not repeat across the space so ensure the no-repeat is added to the url tag line. To prevent text wraps we add white-space: nowrap. We are going to separate the text from the image so that this code can be customized for other uses, other types of rollover buttons. Only the text will appear against the button background when the mouse is not hovering over the button.

Next, we need to code the anchor. First we want the image space parameters set:

.cssrollover a
{
display: block;
color: #000000;
font-size: 11px;
width: 220px;
height: 45px;
display: block;
float: left;
color: black;
text-decoration: none;
}

Now for the image parameters on the img tag:

.cssrollover img
{
width: 220px;
height: 45px;
border: 0
}

We need visibility when the mouse rolls over the image:

* html a:hover
{
visibility:visible
}

.cssrollover a:hover img
{
visibility:hidden
}

Now finally some positioning on the text for the button:

.cssrollover span
{
position: absolute;
left: 40px;
top: 20px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
</style>

Now, some basic HTML for the display:

<title>e-Commerce Cart Button</title>
</head>

<body>
<div class=”cssrollover”>
<a href=”<YOUR PRODUCT LINK HERE>”><img src=”image1.gif” alt=”buy now” /><span>BUY NOW</span></a>
</div>
</body>
</html>

These simple image rollovers in CSS can be useful in keeping code clean and crisp. Plus, as its CSS, you can apply the styles to any number of buttons on the web pages.

Most people only think of Youtube as a place to go watch funny videos of people doing stupid things. Youtube also has an education value deep into the site, but you have to search for it. The benefit of using Youtube to learn techniques in Photoshop is that each video teaches the technique in a different way. You may find someone to be boring, or takes a lot of steps to finish a technique. The next video may do the same technique in an exciting way, and finish it in half as many steps.

This site gathers tutorials from Youtube, and republishes the videos on their site, taking the legwork out of searching for videos on Youtube. The only negative thing that you may encounter, is if the video is remove from Youtube for some reason. The great thing is that you know that someone else has seen the tutorial and thought it was good or helpful enough to republish on their own site.

You Suck At Photoshop is a unique tutorial. You follow the Kentucky resident, Donnie Hoyle, through a divorce in which he uses Photoshop to express his anger for his wife. The tutorial does not only step away from the traditional method of video tutorials, but also gives some comedy relief as you go through the series. This webcast has also won two Webby awards in 2008 for Best How-To and Best Comedy. If you want to be entertained while learning, be sure to check out You Suck At Photoshop.

I like to call Pixel Perfect’s host, Bert Monroy, the Bob Ross of Photoshop. Bert became an internet icon in 2006 when he released Damen (http://www.bertmonroy.com/fineart/text/fineart_damen.htm). Damen is a realistic picture created using 15,000 layers in Photoshop. Bert teaches the techniques he uses in his art in many of his tutorials, going as far as showing work he is in the process of making, and how he is creating effects for that artwork. Not only does Bert’s tutorials keep the tutorials very basic, he also covers parts of Photoshop that many people will never use, such as CS4’s 3D tools.

Luv2Help is a site which users post tutorials they would like to share with the world or find useful. The site provides a large collection of many different types of tutorials, starting from basic Photoshop techniques, to more advanced techniques, like animations.

Clearing CSS Rules

We all forget how to do things at times. This site contains a table which displays how to properly clear the CSS values float values in most of the major browsers. This is very helpful if you are forgetful, or if you can’t find out why that one div element isn’t clearing like it is suppose to be.

Rounded Corner Generator

Rounded corners, once called the Holy Grail of design, can be a headache for a lot of people. Most of the time you can get rounded corners in one browser, but if you checked it in a second browser the corners weren’t rounded. Which means you had to go back and “redesign” or create a “hack” for the browser which wasn’t working properly. This tool allows you to generate rounded corners with a lot of ease.

Typester

A great designers treats text as part of the UI according to Cameron Moll in his presentation entitled “Essential Web Skills”. Typester is here to make you that great designer. With Typster, you input text into a text box, then you can use drop down menus to tweet the text to look different. You can even compare up to three different designs side by side. This takes the “headache” and time consuming process of having to make changes to the style sheet, then refreshing your page just to see the changes.

CSS Tidy

Optimizing code is something that every designer should try to achieve, with CSS Tidy and CSS Optimiser you can do just that. Some of the great benefits of optimizing your CSS code, is easier to read code and less bandwidth usage. The less bandwidth your site uses, the better. It increases the speed in which the page loads for the user, and if your site ever becomes a hit on a social media site, you wan’t feel slowed down the effects of what is called the “Digg effect”.

Hyphenator

Hypenator isn’t a CSS tool, it is a JavaScript API. The reason it is in our list is because it makes your website look more uniform, cleaner, and very professional. There are times when your text will leave large white gaps at the end of a line because the word is too long to fit into that area. You could use justification alignment, but that may end up putting large gaps between the letters in a word. Hypenator is here to save the day by automatically hyphenating the last word on the line of text if it is to large to fit on that line. By doing this, it makes the text easier to read.

Browser Editors: FireBug / Developer Tools / Dragonfly

Firebug for Firefox, Developer Tools for Internet Explorer 8, and Dragonfly for Opera, if you haven’t used one of these tools, then there is only one question to ask. Why not? These tools are like an ice cream cone on a hot summer day. They allow you to “see” how the browser is processing your code. They even allow you to make live edits without changing the code for everyone else. The tools are great if you have one issue that you can’t find out why it is happening, or if you want to see what your design would look like if the background was a different color. These are tools which no designer should go without.

This is a tutorial for the classic speech bubble that every comic uses. Using this simple tutorial you can create life and personality to any site’s mascot.

Cartoon Character Logo

Speaking about mascots, here is a very quick tutorial on how to create a comic inspired character as a logo. The character in the tutorial is not that great, but the foundation for the concepts of creating a character as a mascot or logo can be found in the logo.

Gothem City Style Skyline

The only thing you would need is the Bat-signal and this skyline would look like the real deal. At the same time, this tutorial can be converted to a professional design and used as a background for a site header or logo. This is another great tutorial that is short, but still gives you the concepts, and that iconic style from the Batman comics.

Sin City Artistic Style

Frank Miller’s comics have a unique style on their own. One of his most famous styles became very popular with the movie Sin City, which is named after his comics. Sin City’s style is very artistic, very detailed black and white style. The concept in this tutorial is a very simple way to add that artistic style to any site, without taking over the main theme of the site itself.

Sin City Artistic Style

With this tutorial you can create the generic, but familiar comic/cartoon style text. The tutorial is straight forward, and in no time, you can add a popular style to any text.

HTMLPad 2008 wins in these areas for various reasons. The convenience of its interface is immediately noticeable. The reading panes can be selected from the view menu such as the property inspector, code explorer and file explorer. Just sifting across the menus reveals a set of powerful features. The HTML and CSS style wizards make it easy for anyone to format their templates. It includes the tool HTML Tidy which is effective for detecting bad markup.

The JavaScript editor is more intuitive as is the server side script editor. The idea is that you can now create your code albeit HTML, CSS or PHP much faster than with previous versions. HTMLPad 2008 allows you to quickly validate your code. Some of the excellent features include:

• HTML Style Editor
• CSS Style Editor
• XHTML Validation
• PHP editor
• GIF animator
• Create Screensavers

Web programmers will love the tool as it simplifies every task. Programmers will find ease of use when deploying code. It’s all about efficiency and HTMLPad 2008 shines in so many areas. Professional developers worldwide have turned their heads to this tool to complete the most complex web applications required by today’s standards.

The tool has kept the interface easy to use so that development time is minimized. Many software titles for designers and programmers have a steep learning curve. Unless you are already familiar with the software, it can be quite time consuming learning how to use many other software titles. HTML Pad does not require a steep learning curve and as result programmers whom have never used the software before van be up and running very quickly.

The interface loads quickly on various machines of differing specs. This is due in part to how the software does not consume much disk space. Also, the visual interface lends itself to a text environment discarding the bells and whistles inn favor of a tool that acts as a flexible buddy for programmers.

The toolbar contains all the buttons needed for quick ‘point and click’ access to the needed function. The software is light, fast and very powerful. These are the attributes every programmer needs in today’s’ fast results driven world.

Being able to include the power of the number one search engine on your site can be very useful. Not only can you allow users to search Google without leaving your page, but you can also use it as a substitution for the default search option that you have on your site. So now you have the power of Google right in your site’s search feature. On a fun note, this API is used in GOOSE to allow the ability to search Google via a command line interface.

2. Google AJAX Feed API

Another powerful API that you can include on your site. This API can allow you to display the results from RSS or Atom feeds on your site. If you ever used Gmail, you know that ticker at the top of your inbox? You can create a similar feature on your own site. This API can even allow you to rotate images from Flickr, Photobucket, and Picasa Web Albums, so you can show off all those great pictures you have stored online.

3. Youtube APIs and Tools

If you include Youtube videos on your site, this API is a must have. This API allows you to do a lot with videos that are linked from Youtube. You can change the color of the default gray player to anything you want. You can even use a chromeless player which would make the video blend better with your site. Most of this can be done by adding variables in the URL for the video, but those can be forgotten and you will have to search for them again, so why not just use the API where that information is right at your finger tips.

4. Google Web Toolkit

Most of the time when developers create code it is for one site, and isn’t portable, or take a long time to make the code be correct across different browsers. Google Web Toolkit API is designed to take away those headaches. The great thing about this API, it can also be combined with Google’s Eclipse plugin.

5. Google Map APIs

Google Maps API is great way to interact with users. Using this API you can create features that allow you to display the the location of visitors to your site based on GeoIP information, allow users to get directions to your company’s location, and more. The flexibility with Google Maps is endless, but what is great is that Google has even expanded the API to make it easier to use. With other APIs like Google Static Map API (http://code.google.com/apis/maps/documentation/staticmaps/) you can really create user specific maps on the fly.

6. Google Earth API

Google Earth API is very similar to Google Map API. You could even say that Google Earth API is Google Map API on steriods. According to the description on this API’s homepage, you can transform your Google Map API into the 3D world with as little as one line of code. The only issues with this API are that it is supported only on Windows and OS X 10.4 or greater, and the user must have Google Earth Plugin.

7. Google Friend Connect API And OpenSocial

Both of these plugins are designed with social sites in mind. OpenSocial’s goal is to connect multiple social sites via common APIs. There is a large list of sites (http://wiki.opensocial.org/index.php?title=Containers) which include big names like Yahoo!, MySpace, LinkedIn, Friendster, and even Google themselves. Google Friend Connect has a similar goal in mind. Friend Connect wants to make it easier for users to interact with sites without the hassle of registering, but also provide developers the security know that the user isn’t a spam bot. These two APIs are so closely related that Friend Connect actually uses OpenSocial.

8. Google Calendar APIs

Google Calendar APIs are great ways to stay connected to your users. You can display important events to your users very easy with this API. If you have a site about movies, music, or video games you can use the API to display when a new product is being released. You could also use this API to display holidays, or user’s birthdays.

9. Google Charts API

Creating dynamic charts can take a long time, and can cause a lot of fustration. Google Charts can solve both, and provide a lot of options while doing so. This API doesn’t only provide you with the ability to create a basic pie chart, but also veen diagrams, scatter plots, and radar charts . You can even create a map to display statics, or even use a gauge like representation called a Google-o-meter.

10. Gadgets API

Gadgets, also known as widgets, can provide a degree of interactivity that can take a while to develop yourself. If you have ever used iGoogle, you now how powerful these widgets can be. One beneifit of creating a Gadget, is that you can submit it to Google so that it can be published, and it can be used at least on iGoogle.

1. W3Schools

W3Schools is a great place to start when you are learning any new web technology. While not being in depth, W3Schools will give you foundation to start building your knowledge of Ajax. Also, as part of the W3C, you will learn the language’s core principles as defined by W3C.

2. Pixel2Life

Pixel2Life is the Google of tutorial sites. The users and staff of Pixel2Life index different types of tutorials from all over the web. Most of the tutorials that get listed on Pixel2Life to are very in depth, and very user friendly.

3. Tizag

Tizag is a tutorial site I use all the time when either learning something new, or I need a refresher. The tutorials on Tiztag are short, but provide a lot of information. Most of the time, a tutorial will be a snippet of code, and then a paragraph or two explaining the code. If you are a visual learner, or just want to see examples of how something should be done, Tizag is the place for you.

4. Google Code University

Google??? Yes, Google. Most people don’t think of Google as a place for tutorials, unless you are searching for them. Google does have a wide range of tutorials via their Google Code University. Most of the code will be related to how Ajax is used to interface with Google, but it provides you with examples and ideas on how to do code with Ajax.

5. Code Project

Code Project lists a lot of examples of how to do specific things using Ajax. A lot of the examples can be used in practical ways, such as an auto-complete/suggest for forms. Not only do they cover the code, but most of the time they also provide screen shots of the code as it is being used.

These five sites should get you started in the right direction when learning about Ajax. It isn’t included in the list, but a really good forum based around programming will also benefit you as you learn Ajax. You can ask people who have experience with the language any questions you may have about the subject. By helping out other people, you will benefit from the experience, and may even think about how to code more efficient or in a different manner.

1. ColorToy’s Web 2.0 Color Generator
This isn’t a tutorial, but it does assist in creating web 2.0 graphics. Not only is web 2.0 about the effects that are used when creating a graphic, but also the color scheme used for those graphics. ColorToy’s color generator is a great place to start.

2. Web 2.0 Effects Part 1 and Part 2
Now that we have a color generator, we present you with this very basic and straight forward tutorial which will teach you how to create reflective text, stripped backgrounds, and gradient effects. The second part of this tutorial goes over how to fade images, make objects “pop”, and how to create starburst. To many people who classify web 2.0 as graphic design, reflective objects, gradient effect, and star burst are a must have.

4. Web 2.0 Text Effect
Another popular web 2.0 effect is the use of blending to create stylish text. If using reflective text isn’t your style, or gradient text are too boring, this tutorial will allow you to style your text a completely different way. This very short tutorial on how you can use blending to create a web 2.0 text. To give you graphics more web 2.0 effect, you can use this effect along with gradients, and/or reflections.

6. Reveling Methods of Drawing Web 2.0 Logos
Logos are a big part of how your site is identified, and in the web 2.0 world your logo has to be stylish. This tutorial will give you the basics on how you can create a very web 2.0-ish logo, using very simple processes. It breaks down some web 2.0 logos, and explains how simple the logos actually are.

7. Three Girls Posing in the Night
Now that you have looked at how logos are created, you need to add an update twist to pop-art to the logo. Three Girls Posing, will show you how to use sun rays, and stars to create a 70’s style background for your logo. Also, notice the gradient and reflection used in the tutorial which as stated above is over used in web 2.0 graphics.

Bonus: Web 2.0 Colour Paletter
I ran into a site which list the colors of some sites which people classify as web 2.0. If you ever needed to know exactly what shade of blue Digg used on their site, then this site is for you.