Gradient Imaging In Photoshop (Web Graphics)

Gradient Imaging In Photoshop

Welcome to my first ever tutorial! I figured I might as well give something backï¿½
But without further ado, on with the show.

Anybody can do this tutorial, no matter what skill level you have with Photoshop, just follow the steps carefully. :)

1. Create a new document in Photoshop. I recommend a size of either 1024x768 or 800x600, as you can see the whole document on the screen in most resolutions, and it is therefore easier to edit.

2. Now find a suitable photo from your collection, or visit a stock image site such as the stock.xchng. (http://www.sxc.hu) IMPORTANT: you must make sure the usage restrictions on your desired stock photo are ï¿½free to useï¿½!

http://www.antionline.com/images/ieimages/2006/01/2.jpg

For the purposes of this tutorial, download this photo, located here: click here for the pic

http://www.antionline.com/images/ieimages/2006/01/3.jpg

3. Copy & Paste your chosen image into Photoshop and arrange on the screen as desired. This should be named as ï¿½Layer 1ï¿½ in the Layers Palette.

http://www.antionline.com/images/ieimages/2006/01/4.jpg

4. Now go to Create New Fill or Adjustment Layer on the Layers Palette and Select Gradient from the Menu.

http://www.antionline.com/images/ieimages/2006/01/5.jpg

5. You should see a screen like this:

http://www.antionline.com/images/ieimages/2006/01/6.jpg

Select the gradient you want from the list and click OK. I have chosen the Orange ï¿½ Blue Gradient.

6. Now change the Blending Mode to Overlay. Your picture should now have changed and look something like this (donï¿½t worry about it if you used a different gradient, you will just have a different colour) :)

http://www.antionline.com/images/ieimages/2006/01/7.jpg

7. Now we are going to distort the image a bit. Duplicate ï¿½Layer 1ï¿½ and drag it to the top of the list. Go to Filters > Gaussian Blur, and set the Radius to 9.2 px. Click OK. This should have blurred the image. Now set its blending mode to Colour Dodge. Your image should now look like this:

http://www.antionline.com/images/ieimages/2006/01/8.jpg

8. Now we are going to add a foreground object. Find a suitable photo of an object from your collection or go back to the stock.xchng (keeping in mind the usage rights mentioned earlier) and copy and paste it into Photoshop on a New Layer.

I have chosen this image, located here: 'Mini'

9. Scale the image to fit the canvas using Edit > Transform > Scale. Hit enter when happy to save that scale. Now go to Image > Adjustments > Hue / Saturation. Mimic the settings below:

http://www.antionline.com/images/ieimages/2006/01/9.jpg

Then change the Blending Mode to Linear Burn.

10. Now Duplicate this Layer, and then set the Blending Options to Hue. Your image should look something like this:

http://www.antionline.com/images/iei...2006/01/10.jpg

11. Now duplicate the top layer, and go to Filters > Artistic > Cutout. Apply the settings like this:

http://www.antionline.com/images/iei...2006/01/11.jpg

Now click OK.

12. Now set the Blending Options to Multiply and duplicate the Layer. It should look something like this:

http://www.antionline.com/images/iei...2006/01/12.jpg

13. Now for the finishing touch. Go to ï¿½Create New Fill or Adjustment Layerï¿½ again, and select the Pink-Yellow gradient and click OK. Now set the Blending Style to Screen. Viola! It should look like this:

http://www.antionline.com/images/iei...2006/01/13.jpg

I should be posting some more tutorials up soon, thats all for now.

Jack