How To Apply A Gradient Mask To A Selection In Photoshop CS3

Hello Experts!

I need your help to try and resolve a problem I am having with some png images.  I am using the images as backgrounds for the horizontal menu on my website http://sleepamazing.com/.  What I am trying to do is emulate the drop down menu effects from target.com.  As you can see by comparing the drop down menus from the two sites, my site has a sort of white tone to the shadow (you can see it as you hover your mouse over "Products" or "Information" at the top) which shows up really well when the drop down menu passes over the red stripe.  Target's does not.  I know I can select out the shadow and work with that, but I was wondering if there was a way to apply perhaps a gradient mask to the drop shadow to make it go from grey to transparent, without the white tone.

Or perhaps one of you experts that are really skilled at photoshop knows of an even better way to match Target's effect.  To be honest, I'm pretty new to Photoshop.

Any help I can get would be greatly appreciated.

Thanks a million in advance.
LVL 17
OmniUnlimitedAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
David BruggeConnect With a Mentor Commented:
Give this method a try.

I suggest that you try this first without rounding the corners until you get comfortable with the technique. After you are happy with the results, go back and round the corners if you like.

Open a new canvas that is larger than your tab size so that you have room to work. Let your background be white. On this background layer, paint a red bar the same size as on your menu. This is so that you can test the gradient that you will be making around your tabs.

Create a new layer and name it "mytab"

On this layer, create your entire white tab including the body. You may have to change the background color for a while, or turn it off, in order to see the white shape that you are creating.

Now, in the layers pallet, double click the "mytab" layer to bring up the layer effects. Click "Outer Glow." You will see the default settings which is a yellow color and the blend mode set to "screen". Change the blend mode to "multiply." Then click on the yellow color thumb and change the color to black. I'm going to continue to call this effect a glow, although when you change the color to black, it's not what you would think of as a "glow."

You should now see a black "glow" radiating outward all around your shape. In the dialogue box, set the size to 0. You have two sliders that you want to play with. The size slider and the opacity.  Once you have the settings to your liking, click okay and save the file. This will be your master copy for all of your images. Now make an additional copy for safety.

Let me explain what comes next. You want to make the tab section separate from the body section. Right now, the layer effect is dynamic. If you cut the body section away and just leave the tab, the glow will wrap all of the way around the tab. We don't want this. We want to lock the glow in place so that we can cut it along with the tab section.

To do that, hold down the Ctrl key as you click the new layer icon at the bottom of the layer pallet. The Ctrl key will make the new layer appear under the active layer instead of above it.

Now click the "mytab" layer again to make it active and press Ctrl+E, this is the short-cut to merge the layer down with the one below it. When you merge a layer that has layer effects applied to it, all of the effects get rasterized, that is, they get turned into pixels that you can now edit.

Now, zoom in on your tab area so that you can see where the glow ends and use the marquee tool to select your tab shape. Press Ctrl-X to cut the tab and then press Ctrl+V to paste it back on to a new layer.

Now open the history pallet. There will be a small icon at the bottom  that looks like a camera. Click it to make a snapshot of your work. You  will come back to it in a bit.

Make sure that the layer with your tab is still active, and hide the other two layers. You should now see the transparency checkerboard showing through your "glow". Select Image>Trim and check "transparency." This will crop your image to its smallest possible dimension.

Now press Ctrl+Alt+Shift+S to open up the "Save for Web & Devices" dialogue. Save as a PNG-24, giving it the correct name.

Return to your image, and open the history pallet and click on the snapshot that you took. Your canvas returns to its original size and now you can trim and save your tab body section. Close this file without saving it. If you accidentally save it, you will have lost the layer effect settings that you need for the other tabs -- that's why you made a back up copy.

Test this tab pair to see if you like the effect on your web page. If not, come back and open your. After you get the look you want, keep opening up your master file, and use it to create each of your other tabs.

Let me know how it goes.
0
 
tahotaCommented:
1. Create an all-new layer and make it transparent.
2. Move the layer behind the panel.
3. On the panel layer, create a selection marquee around your panel.
4. Turn off the panel layer and select the new transparent layer with the marquee still active.
5. Fill the marquee with black (not gray or any other color).
6. Deselect.
7. Use the gaussian blur tool to get the softness that you desire for the shadow.
8. Now turn the panel layer back on, move the new shadow layer to the position that you want.
9. Set the shadow layer to multiply.
10. Adjust the shadow's layer transparency to the lightness or darkness desired.
11. Re-export the PNG. You should not have any white or light shadow effects.
12. Good luck! I hope that helps.
0
 
OmniUnlimitedAuthor Commented:
tahota, thank you so much!

I don't know what I am doing wrong (although by your instructions I can tell that I know almost nothing about Photoshop), but in attempting to follow your instructions the best I could, I still was left with a whitish effect on the shadow.

I had no problem with steps 1 and 2.
On step 3, I had trouble selecting exactly the outline of the shadow, perhaps because of the subtleties of the colors.  What would you recommend as being the best way of making this selection?
No problem with steps 4-6.
On step 7, I could not locate a tool identified as a "gaussian blur tool".  I attempted to use the blur tool in its place, but this seems to have no effect on the pitch black surface.  If this is not the same tool, can you identify the correct one?
On step 8, I wasn't sure why I would need to move the shadow since it lied directly under the panel.
No problem with step 9.
On step 10, I adjusted the layer's opacity.  Is this the same as you were thinking?
No problem with the rest of the steps.

Sorry for my ignorance.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
OmniUnlimitedAuthor Commented:
D Brugge:

My sincerest apologies to you for not getting back to you sooner.  I was out of the office yesterday.

And my deepest gratitude for your willingness to break things down at a very step-by-step level for me.

I was able to do the things you had suggested, i.e. create a new canvas with a white background and red stripe, just like on my website, create a new layer named "mytab",  draw the whole tab including the body, double click the mytab layer and click "Outer Glow" and set the blend mode to "Multiply".

This is where it seems the instructions break down.  My Layer Effects dialog box does not seem to show any yellow color.  I have included a screenshot so you can see what I am seeing.  Can you tell me how I would change the color to black as you instructed?
screenshot.jpg
0
 
David BruggeCommented:
Ha! the jokes on me. I'm sorry that I let that step slip. You know how it is when you do things over and over again without thinking about them, and the steps become automatic.
I had to go back and repeat the steps myself to see where I messed up.

When I open the layer effects dialogue box, instead of clicking directly on the check box on the specific layer effect, I click on the name right beside it. Photoshop is full of little quirks that they never tell you about, and this is one of them.

Clicking right beside the check box not only puts a check in the box, but it automatically opens up the dialogue box (and thus, the yellow color). I guess that I have automatically clicking beside a check box for years without ever thinking about it.
0
 
OmniUnlimitedAuthor Commented:
D_Brugge, you are a genius!  Your method works like a charm!  But before I let you go and award points, I am noticing a problem that I didn't seem to have before.

I tried rounding the corners of the tab, but they are ending up jagged and blocky.  The outer glow seems to round fine around these jagged edges, but is there any way to get the smooth effect I originally had on the tabs (i.e. do you know of a method of producing anti-aliased rounded corners in Photoshop?)
0
 
David BruggeCommented:
Here is a round up of the most popular ways to create rounded corners. http://www.tutorio.com/tutorial/photoshop-round-corners#Pixel%20by%20Pixel%20Rounded%20Rectangle

Then there is my favorite way. Simply erase the corner off that you want to be round. Then select a brush with the right degree of roundness that you need and click in the corner. This lacks the precision that the other methods have, but it's fast and easy.

One extra hint when using this method. If you hold down the shift key as you drag your brush, it stays confined to a straight line. Nice to know when you need two points to line up nicely.
0
 
David BruggeCommented:
Just thought of another quick and dirty trick. In the layer effects where you selected the outer glow, there is another one called stroke. This will draw a stroke, however wide you define, either on the inside, the outside, or straddling the line of your object.

Sometimes you have a rectangle object and you want a nice thick border around the outside, with squared off corners. Ain't going to happen. The thicker the line gets, the more rounded the corners become. (You have to choose to stroke inside the object to get square corners)
But on the other hand, if you make your object just a little smaller than you need, then add a stroke with the same color as your object, Photoshop will round the corners for you.


I'm not saying you get a nice antialiased precision corner, but it does fine with small menu size shapes for the web, and it's quick.
0
 
OmniUnlimitedAuthor Commented:
D_Brugge, I repeat, you are a genius!  I can see that the effect is just what I am looking for.  I just have one more little glitch that I don't know whether you can help me or not.  I have set up everything just as you instructed with the stroke and the outer glow, and it looks great on the transparent layer, but does not show up correctly when I expose the white background with the red stripe.  What is going on?  (I've attached a couple of screenshots so you can see what I am talking about.)
screenshot--transparent-only-.jpg
screenshot--with-background-.jpg
0
 
OmniUnlimitedAuthor Commented:
Oops!  Never mind.  I continued on in your instructions and rasterized the effects and now everything is perfect.

Thanks a million.  You are a super expert.
0
 
OmniUnlimitedAuthor Commented:
D_Brugge is an exceptional expert at Photoshop.  I truly appreciate all his help.
0
 
OmniUnlimitedAuthor Commented:
Ah, D_Brugge, you do excellent work.  You can see the results of your advice at http://sleepamazing.com.
0
All Courses

From novice to tech pro — start learning today.