[Last Call] Learn how to a build a cloud-first strategyRegister Now


How to add a gradient transparent layer in photoshop

Posted on 2007-10-15
Medium Priority
Last Modified: 2008-05-11
I want to make an image with its reflection look. i.e appears image's reflection on the surface.
I know the basic way of doing it but I am stuck with its background color, I want the reflection real transparent so I can use it on any background color, not just one  particular background color.
Following example will clear my point. go to following link: http://www.itbees.com/test/services.aspx
see all these images on the page with their glossy look. so far so good but now lets change the background color: click on the white square box beside the logo the view under white profile. Now look at the images again. Images are showing back shadow on white background.
Therefore I want to make images such a way that they are not stuck to color but are real transparent.
Any help will be much appreciated.
Question by:waheez

Accepted Solution

192_168_1_103 earned 200 total points
ID: 20081196
These images are png images.  One of the neat advantages of the png format over the traditional gif format in web graphics is that png files support the varying level of transparency that you see there.  I'll take you through the steps to create a transparent png file, and you can let me know if you need more examples or details.  If you already know how to duplicate and flip an object, you can jump to step 5, where we turn the duplicated layer into a reflection.

1) Start by making a new document in Photoshop, any size you like.  At the bottom of the New Document dialog box, you'll see a pull-down menu where you can set the background contents. You want to select Transparent.  Your new document will open, and it will have a checker-board appearance.  The alternating box pattern indicates transparency.

2) Next, pull out your brush tool and select a hard-edged, circular brush that is large enough to see clearly and paint a simple circle of any color onto your canvas.  This will be the thing that gets reflected.

3) Click and drag that layer to the "new layer" icon at the bottom of the layers pallette.  It's a square with a triangle in the corner, just to the left of the trash bin icon.  This will create a duplicate of your layer.  You could also single-click on the layer and press Ctrl+J (or Command+J on a Mac) to do the same thing.

4) To make a reflection, we need to make this duplicate layer turn upside down and move downward.  With the duplicate layer still active, press Ctrl+T of select Edit>Transform>Free Transform from the menus.  A box will appear around your object.  The square handles around the box allow you the freedom to resize the box however you want, but for this, we'll do something different.  Right-click inside the Free Transform box (ctrl+click on a Mac) and select Flip Vertical from the menu that appears.  Then, use the down arrow key or drag with the mouse to position this duplicate layer so that the top is just below the bottom of the original layer.  Now you have 2 copies of the same object positioned one above the other, and one is an upside-down copy of the other.  (If you used a perfect circle, the "flip vertical" step obviously won't have done much, but you'll need it for real buttons you make).

5) Now for the actual transparency part.  We're going to create a layer mask.  So, with the duplicate layer still selected, click the icon at the bottom of the layers pallette that looks like a square with a hole cut out, or go to Layer>Layer Mask>Reveal All.  You'll see a white box appear next to your layer thumbnail in the layers pallette.  The key to using a Layer Mask is this: Black hides, white reveals, and shades of grey are in between.  So, the layer mask is solid white (as we see in that white box) which means that the entire layer is revealed.  We want to hide some of it to make it fade away.

6) Pull out your gradient tool.  It's in the tool panel, and if you don't see it, you may need to click and hold down the mouse on the paint bucket icon (fill tool) to reveal the gradient tool in a sub menu.  If you look up just below the menus at the top of the window, you'll see a gradient appear on the context bar.  It should be black and white.  If it's not, pull down the gradient meny and select the 3rd option (Black, white).  We're going to use this to create varying levels of transparency.

7) With your Black to White gradient selected, take a look over at the layer mask thumbnail mentioned earlier.  The thumbnail should have a box around it, indicating that it's selected--if the box is around the *layer* thumbnail, you need to click on the mask thumbnail to make sure you're drawing on the layer Mask, not the layer itself.  Now, move the gradient cursor to the bottom of the shape on your duplicate layer and click and drag upwards until you reach the top of that duplicated object.  When you release the mouse, you'll have a gradient, transparent reflection.  To really sell the effect, bring that layer's opacity down to about 40%.

At this point, you've got a shape with a reflected gradient floating above a checkerboard.  Let's save it out.

I'm assuming you're using CS3, since that's in your tags; we're going to go into File>save for Web and Devices.  In earlier versions of CS, it was just Save for Web.  You can also press Ctrl+Alt+Shift+S.
You'll get a giant preview box.  Over on the right, select PNG-8 from the pulldown (probably says GIF by default.  Make sure the Transparency box is checked and hit Save.  Select a location and you're done.  Now you have a png file that most browsers will correctly display with gradient transparency.

The description is long, I know, but it's actually really quick when you're doing it; you create an object, duplicate, flip into place, add a layer mask, drag a B&W gradient, and save.  Simple, eh? :)

Author Comment

ID: 20081530
Thank you for your detailed solution. Just saved me form dupilicating each image on my website which I had to for each profile, If I could'nt come to this solution. Just added a little skrew to make the reflection towards a side. And It looks just perfect.


Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question