Graphics Zone - Overlays

ANS Linklist

Working with Overlays, Screens and Multiply Effects

by BarryHilton, Adult NetSurprise

In this tutorial we'll be looking at useful ways to use the Overlay, Screen and Multiply effects in Photoshop. First open a new image 300 pixels wide by 200 pixels high...Click Here to view Screen Shot with Instructions.

Now, set up the foreground color for our image background graduation. You can use any color (not black or white) or enter the # value to use the exact color we're using in this tutorial... Click Here to view Screen Shot with Instructions.

Then do the same for the background color. We'll be making a gradient fade from mid to dark blue fading from top left to bottom right to illustrate the different effects achieved with the Overlay, Screen and Multiply layer effects... Click Here to view Screen Shot with Instructions.

Next, select the Gradient tool and choose the Foreground to Background gradient in the top left corner of the default gradient pallette... Click Here to view Screen Shot with Instructions.

Click just inside the top left corner of your image and drag the gradient to the bottom right corner. This will produce a gradient fade from mid blue through to dark blue. Then lable your backgorund layer (it's always a good idea to lable your layers, specially when you go back to a graphic after a few months!)... Click Here to view Screen Shot with Instructions.

In our first example we're going to use lines set to an Overlay effect. This produces a 'softer' effect than a reduced transparency line an dblends with the colors on layers below the lines effect (invisible on black). Start by selecting the Horizontal Line Marquee tool which is a single pixel high and extends across your image (independent of your image width). Then place lines on your image by holding shift on your keyboard when you click to place a line, this will add to your selection so you can make several lines at once... Click Here to view Screen Shot with Instructions.

We'll be using white in this example, so reset and swit ch your colors, then fill the lines! Click Here to view Screen Shot with Instructions.

Set the Layer mode to Overlay and you'll produce a great effect... Click Here to view Screen Shot with Instructions. This is very useful for backgrounds on banners, logos and tour design, overlaying line, image and grid effects can produce some stunning results!

Don't forget to lable your new layer... Click Here to view Screen Shot with Instructions.

In the next part of this tutorial we'll be looking at the Screen layer mode... The Screen works by altering the layer transparency based on the colors of the image... white is opaque and black is transparent, with other colors somewhere in between and darker colors being more transparent... First paint your new layer black (which will be transparent when we apply the Screen)Click Here to view Screen Shot with Instructions.

In our exampe we're going to use a Lens Flare filter. This filter can't be used on a 'empty' layer, the screen effect works allows us to give the impression that the Lens Flare is on a transparent background. Set up your Lens Flare... Click Here to view Screen Shot with Instructions.

And lable your new layer... Click Here to view Screen Shot with Instructions.

Now change the layer mode to Screen... And the black background dissapears! Click Here to view Screen Shot with Instructions.

Now, we're going to use a Multiply effect to add 'Sharp' text to our image. To use sharp text (like on a web page) in Photoshop you need to make a web page first... use a FONT tag to set up which font you want to use... this can be any font on your computer as it's not going to be published on the web in 'text' form. Then make a screen grab of your text and load this into Photoshop. In our example we're using some 'pre grabbed' text, so right click on the text image first and save this to your hard drive... Click Here to view Screen Shot with Instructions.

If you cave the image as a GIF you first need to change it's Mode to RGB from Indexed Color (the GIF Format)... this enables you to 'drag' the text into your image... Click Here to view Screen Shot with Instructions.

Now drag in your text! Click Here to view Screen Shot with Instructions.

The Multiply Mode works in the opposite way to the Screen, with black being opaque and white transparent... Change the Layer mode to Multiply and the text white backgorund dissapears... Click Here to view Screen Shot with Instructions.

Need to change the color of your text to white? Just use the Invert, then set the Layer mode to Screen and you've got white text! Click Here to view Screen Shot with Instructions.

To see our final example... Click Here to view Example.