Let’s get out hands dirty. 
There are so many ways in which you can learn things. I always loved a more interactive way of learning things by mixing the theory with practical exercises thus I suggest you try doing what I explain as I go. I think this is the best thing you can do since in this way after you finish learning you will have the knowledge but also some skills which will allow you to apply the newly gathered knowledge. So for these tutorials I will use as example one design I made for a personal website. I decided to use the illustrations from jesterarts for this design and bring an interesting touch. One of the important problems is how to implement the illustrations to the design since the software I use is Photoshop CS3; software used by most of the web designers even if the version might be different. The solution I apply is using one of the most powerful features of the latest versions of Photoshop and I am talking about smart objects. Now let’s stop with all this talk and get our hands dirty and see how to bring an illustration to your design.
First the background.
Make a new .psd file in your Photoshop. There are different sizes you can give the file, but be careful since you will have users will small screens and resolutions, but in most cases the width of the design is about 960 – 980 pixels. Think about the color you want your background to be and make a new layer with that color. Gradients are often used since they bring a nice touch to the design.
Getting the illustration.
When you feel ready to get the illustrations to your .psd file select the layer you wish your image to be placed above. Now just drag and drop your illustration, from the directory you have it in, into Photoshop. Do not change its size we will take care of this later on, for now, the bigger it is, the better. You will see it is in a new file and not in the files you have been working until now. No problem, from here you can simply drag and drop it to your other file with the “Move tool”. Now your image is above the layer you had selected before.
Let’s make it smart.

You will see a big image into your design depending on the size of the illustration but don’t worry, in this case bigger is better since when you reduce the size of an image its quality won’t have to suffer, but if you wish to enlarge a really small image it you will lose quality. But before you do anything to the layer you must transform it into a smart object. The simplest way is to right click on the layer in your layer tab and after that select “convert into smart object”.
Now you will see in the bottom left of the layer a small sign showing you that layer is a smart object but this is also your way of accessing the layer by double clicking on it. Now that you have converted the image to a smart object and accessed it you can change its size, modify different elements of the image, add different effects and one of the best things you can do is change the color of each illustration without ever needing to open illustrator or any other similar program in your life and all with just a few clicks, but this is another aspect we will discuss in the next part.
Till next time don’t forget to keep in touch via my personal site, facebook or twitter.