Learn How to Fade Images to Create Website Headers and Other Graphics!

Written By Ed
8/18/2006

Product:


digg

Downloads:
This tutorial requires the use of the two images below. Both are royalty free stock images downloaded from ComStock.com. Right click on each image and "Save Target As" on both images to save them into your computer to use them in the tutorial.


Right Click on Image and Press "Save Target As" to save onto computer.


Right Click on Image and Press "Save Target As" to save onto computer.

Also this tutorial starts off with a template where you can download. The template is used for the basis of this tutorial and is part of another tutorial. Click Here to learn how to create the template which we will start off of or download it below.

Click Here to Download Template Start Source File

Tutorial:
You should have the two images above saved on the hard drive of your computer. First we open those images in photoshop. In the top menu, choose File > Open . Browse for your image on your computer and press Open. With the stock image opened in photoshop, either press Cntrl+A or go to the top menu and press Select > All and select the image. Then either press Cntrl+C or go to the top menu and press Edit > Copy. Then with the stock image copied, we switch back to the template canvas and either press Cntrl+V or go to the top menu and press Edit > Paste. Redo the previous step for the 2nd stock image. After doing the step for both images, your canvas should look like:

Click On Image Above to See The Full Version!

How you position your layers are also a vital part of this tutorial, therefore a screenshot of my layer window with the layer names indicated in the previous steps.



With the layers as the image above, you should have the layers Stock 1 and 2 on top of the "Header Top" layer. With the "Stock 1" layer selected position it with the Move Tool () so that the Stock 1 image is on top of the "Header Top" rectangular gradient box. With the Stock 1 layer still selected, press on your keyboard Cntrl+G. Your "Stock 1" image should be cut so that it is restricted to the dimensions of the "Header Top" rectangular box. Repeat the above step for the "Stock 2" Layer and Image. Position the Globe stock image at around the middle of the canvas and the Man stock image on the right side. Your canvas should look something like:

Click On Image Above to See The Full Version!

After the previous step, your layer window should now look like:



Ok now we get to the interesting part of this tutorial, actually making the stock images fade away :smile:. We first have the press and hold the marquee tool on the tool bar. A sub menu should appear and select the Eliptical Marquee Tool ().



After selecting the Eliptical Marquee Tool, the tools option menu should appear under the top menu bar. In the Feather field, enter in 10 px.



Now with the "Stock 1" layer selected (The Globe Layer), use the Eliptical Marquee Tool () and create eliptical marquees around the globe and press Delete on the keyboard.











The above images were the selections I used to fade the image. By pressing delete after each of the above selections we successfully faded the Globe Image. Next up is the "Stock 2" layer and image. Select the "Stock 2" layer and like before we use use the Eliptical Marquee Tool () but in the Eliptical Marquee Tool options, we punch in 20 px for the feather field instead of 10 px like before. Now we select the left hand side of the Stock 2 image and press delete. (Note if the image doesn't fade nicely, you may press delete more than once. Experiment around!)



Both images now are faded, to finish off the effect we turn the Opacity of both "Stock 1" and "Stock 2" layers to 33%.



Click On Image Above to See The Full Version!

Conclusion:
This effect is very good for making website headers and other web graphics. In our Creating a WebHosting Layout Part 1 tutorial, we demonstrate how to use this technique to embed it into our website.