making a graphic have a fuzzy border (Full Version)

All Forums >> [Web Design] >> Web Graphics



Message


jrrnow -> making a graphic have a fuzzy border (2/17/2001 20:40:00)

I'm using Image Composer 1.5.

I would like to make the border of my graphic have a fuzzy border that fades to the background color of my page.

-J

------------------





abbeyvet -> RE: making a graphic have a fuzzy border (2/17/2001 23:23:00)

There may be an easier way but this is how I have done it.

1. Take your picture and make 2 copies of it. Put the original aside for now.

2. Make the colour swatch the colour of your page and fill both copies with this colour.

3. Take one copy and using the cut out tool erase a rectangular shape from the centre of it so that it is now a rectangle with a clear centre and a border about 10-20 pixels wide. You do not need to be terribly exact.

4. Using the effects tool, choose popular>blur and set the blur effect to 5 horizontal and 5 vertical. Apply this to the rectangle you made in step 3.

5. Again in effects choose Photgraphic>Transparent, set to 50% and apply to the same rectangle.

6. Now move you original picture close to this rectangle. Select the rectangle and THEN your original while holding down the shift key. Leave both images selected for the next two steps.

7. Click arrange>align>centers.

8. Now open the texture transfer tool (below effects) and click Map transparancy.

9. click anywhere on the screen to unselect the pics. Move them apart and you will see that your original now has a slightly transparent edge. Leave it aside again for now.

10. Select the second copy that you made back in steps 1 & 2. In effect choose Outlines, edge only. In details set the width to about 20 pixels and the colour to the same as your BG. Apply.

11. In effects choose popular>blur and set the effect to 10 horizontal and 10 vertical (you can play with these setting to get the exact effect you want, but 10 works quite well)

12. Now select this edge and your picture, making sure the picture is behind the blurred edge. With both selected choose Arrange>Align>Centers.

13. Now to finish, with both still selected right click Arrange>Flatten selection and then trim the resulting pic as required.

That sounds longwinded but in fact is quite quick to do. You may need to play with the settings at each stage to get the effect you want.


------------------
Katherine

www.inkkdesign.com
www.linkks.com

-*-*-*-*-*-*-*-*-*-*
"Dogs have owners, cats have staff!"

[This message has been edited by abbeyvet (edited 02-17-2001).]





jrrnow -> RE: making a graphic have a fuzzy border (2/17/2001 19:10:00)

I've tried the above and it didn't work. Or the settings I have are wrong, probably the latter.

I basically get my original with a semi-transparent square around it and then a semi-transparent blurred border around that. I can send it to anyone that is brave enough.

What should the settings be in:

Step 3
(Effects settings-Opacity and Edge), (Cutout tool settings-Hue, Whiteness, Blackness, Selection, SearchMode, Edge)

Step 10
Where should the slider be set in the details tab?

In step 12 how do I ensure that my original is behind the other. I would assume that I just click the original last.

Help, please.

------------------





barusiec -> RE: making a graphic have a fuzzy border (2/17/2001 19:49:00)

J - you cand send it to me for a try if you like. Be happy too cuz I'm in the midst of doing this myself. I can do it about 57 different ways after having wasted an entire Saturday trying to figure out the next step. My e-mail is in my profile.

Katherine or somebody, hoping you can help can help me here.

I need to take a snippet of my textured background and use it as a background in an applet or a SWISH file. The background I have is forcing me to fade the edges of the snippet so it will blend seemlessly when the applet is inserted.

I have tried every trick and technique I know of to get this to work - including "save for the web", playing around with Transparency settings in IC for .gifs and jpegs... I even tried saving the darn things as a tif and png... Still can't get it.

I can acheive the effect in IC, but the basic problem is when I save the faded snippet, it comes along with the composition background from IC. I've even tried setting this to match a blend of the colors from my textured background and all that happens is the snippet fades into this background, and the background still produces a hard edge.

See the problem at http://hrfree.com/oracle/new_page_3.htm.

I give up! Help if you can.

------------------
Bruce

"Those who never get carried away, should be." - Malcom Forbes





abbeyvet -> RE: making a graphic have a fuzzy border (2/17/2001 20:14:00)

Jrrnow:

In step 3 Opacity:100%, Edge:Hard, Hue, whiteness, Blackness:50%, selection:add, searchmode:local, edge:hard. These are all the default settings!!

The fader should be at 100% - ie fully opaque - in step 10.


Barseic: Sorry, can't help. Don't really understand the question! That's more of a comment on me than on you! But I think a patterned bg might make fading the image quite difficult.

This guy here does it a different way - I haven't tried it but it probably works better than mine. http://www.demitrius.com/mic/fuzzy1.shtml

------------------
Katherine

www.inkkdesign.com
www.linkks.com

-*-*-*-*-*-*-*-*-*-*
"Dogs have owners, cats have staff!"





Jego -> RE: making a graphic have a fuzzy border (2/17/2001 21:15:00)

Maybe I'm missing what you're trying to do...but if you're trying to get an edge like that example from Demitrius (ain't HE the dashing wee lad...and knows it ), the easiest way I've found/used is to use the "Cut" function.

Select the pic.
Select Cutout function.
Select whatever shape you want.
Adjust settings of transparency & softness to your liking.
Drag your cutout tool around the inside (about 5 to 7 pixels in from the edge) of your image.
Click on "cutout".
Done.
You now still have your original and your faded-edge cutout.

Unless of course, I've missed the whole "idea" here? Which is entirely possible.

And Bruce? Where'd the page go..huh?...huh? Here I was getting all charged up about a "challenge"; and you've taken your *toys* and gone home. Not fair.

Pouting in Ontario,
Jego

------------------
"I am NOT tense, just terribly, terribly alert."





barusiec -> RE: making a graphic have a fuzzy border (2/17/2001 23:17:00)

Sorry bout that Jego. It's there now. That's what I get for hitting the publish button and going to dinner - which apparently my hosting provider did as well!

Getting the fuzzy edge is no problem. Retaining on a textured background... PROBLEM!

Thanks again

------------------
Bruce

"Those who never get carried away, should be." - Malcom Forbes





jrrnow -> RE: making a graphic have a fuzzy border (2/18/2001 20:12:00)

Thanks everybody! I now all blurred up. Thanks again.
-J

------------------





Jego -> RE: making a graphic have a fuzzy border (2/18/2001 23:48:00)

No problem, J. We aim to make things as fuzzy as possible for everyone.

Bruce? The page isn't there... Perhaps you & your hosting provider have gone out for breakfast now.

Jego

------------------
"I am NOT tense, just terribly, terribly alert."





barusiec -> RE: making a graphic have a fuzzy border (2/18/2001 14:09:00)

Sorry. Loose the period at the end of the URL.

------------------
Bruce

"Those who never get carried away, should be." - Malcom Forbes





Jego -> RE: making a graphic have a fuzzy border (2/18/2001 19:20:00)

Well..so much for MY problem-solving skills

And on the background?...like Katherine, I'd say, you're doomed..or "yikes" as you so rightly put it.

Jego

------------------
"I am NOT tense, just terribly, terribly alert."





Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875