homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

How do you create this fade effect?
see example

 5:48 pm on Jan 10, 2003 (gmt 0)



The picture of the bridge and dome fade out on the left to white, very smoothly.

I would really like to know how this is achieved - can it be done on paint shop pro or photoshop? I don't even know the correct term for the effect - if I did it would help me search for it.

thanks for any advice.



 6:14 pm on Jan 10, 2003 (gmt 0)

I know you can create the effect in Corel PhotoPaint, so you should be able to do it in Photoshop. Try looking for transparency functions.

In Corel PP, there's a glass icon in the toolbar on the right and, when clicked, it gives you an adjustable sliding bar to set exactly where the transparency starts and ends, as well as how quickly the fade in/out happens.

It's been a while since I've used Photoshop, or I could probably tell you how to do it in that program as well.

Good luck!


 6:32 pm on Jan 10, 2003 (gmt 0)

It is a white gradient to transparent. Most tools including photoshop and paintshop pro have this. In photoshop you would set up the picture on a layer. Then you would create a new layer. On the new layer you would use the gradient tool with background to transparent(background color would need to be white). Use the gradient tool to select the path and viola! you have the fade to white.


 4:20 pm on Jan 12, 2003 (gmt 0)

many thanks, friends.

just ordered a book - 'Down & Dirty Tricks with Photoshop 7'. I think I need a step-by-step help. Anyone used this book?


 4:32 pm on Jan 12, 2003 (gmt 0)

With photoshop being such a complicated program any book is always good to have. I have not used that, but I would expect it would help a lot.


 8:13 pm on Jan 13, 2003 (gmt 0)

Or you could use a large brush (eraser or paint) with very soft edges and paint on the image. Use the gradient tool (white to transparent) for straight lines.


 8:47 pm on Jan 13, 2003 (gmt 0)

Two ways I would do it, depending on how badly I wanted to preserve the original image:

1.) Use the gradient fill tool to run a white to transparent fill in a mask layer. I did this once, and I don't remember exactly how... but it gets you the effect you want without having to erase part of the image.

2.) Put the photo in one layer, and put a solid white layer underneath it. Take a great big fuzzy-edged eraser (as suggested above), and erase the part of the image you want gone... Voila! It appears to fade to white. (Hold down the shift key while dragging the eraser to force it to run along a perfectly vertical, horizontal or 45 degree line.)


 3:54 pm on Jan 15, 2003 (gmt 0)

Or you can do it by selecting an area, feathering the edge, inverting the selection and then rubbing out to your hearts content - all in a single brush stroke so that it's smooth. (PS5)


 4:50 am on Jan 19, 2003 (gmt 0)

Here are instructions for Photoshop 6 and 7:

1. Open an image.
2. Go to Layer -> Duplicate Layer ->OK
3. On left palette select gradient tool
4. On top left you will have Gradient Tool properties. . Select "Foreground to transparent gradient". "Select linear gradient" if it is not default.
5. Make sure that your foreground color is set to the color to which you wish it to fade. In this case it is white.
6. Select a point on your image, click, hold and drag your mouse in the direction OPOSITE to which it should fade. In this case it would be from the left to the right.

You do not have to drag all the way though the image. The farther you drag the smoother transparency will be. If you're unsatisfied with the result, in the History Palette click on "Duplicate Layer" to return to the pervious state and drag your mouse over the image again. Repeat until desired outcome is achieved.



 2:31 pm on Jan 21, 2003 (gmt 0)

Many thanks, appreciate the help.


 3:27 pm on Jan 21, 2003 (gmt 0)

Down & Dirty Tricks with Photoshop 7

That's a great book!


 3:17 am on Feb 4, 2003 (gmt 0)

If you want to duplicate the effect shown you will want to stay away from using gradients - it probaly won't turn out how you want.

1.pick the lasoo tool and feather it to about 20-30 pixels(experiment) and draw a circle around the area you want gone.

2.Then press delete.

3.Try it a few times with a different amounts of feathering and different shapes with lasoo tool. Thats it.

Your done.


 9:55 pm on Feb 5, 2003 (gmt 0)
The most flexible and efficient way to do this in Photoshop would be with a layer mask. I would assume this is what mivox mentions.
I took the liberty of creating a [url=]simple tutorial PDF [/url] :) Enjoy!

 10:19 pm on Feb 5, 2003 (gmt 0)

That's a very quick and easy guide... thanks Jello! I use masks so rarely, when I do want to I have a heck of a time remembering exactly how.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved