PDA

View Full Version : recreate edge effect on image



mlerbrick
06-08-2007, 04:44 PM
I recently took over maintenance of website where I have to add more thumbnails. There is an "hazy edge" effect on the existing thumbnails. Does anyone have any suggestions on how to recreate? I have both Photoshop 7 & Fireworks 3.

jscheuer1
06-08-2007, 04:52 PM
Well, in Paint Shop Pro 7, I would:

Effects > 3D Effects > Buttonize

There must be something similar in Photoshop

Twey
06-08-2007, 06:39 PM
With ImageMagick:
mogrify -raise 2 image.pngI'm sure I've done it on the GIMP before, but I can't find the option now...

mlerbrick
06-08-2007, 07:22 PM
unfortunately, I don't have either of those programs. Any idea what type of process is used? Is it a mask or filter? I don't have a lot of experience with either photoshop or fireworks, but willing to dig... if I know what to call it or how to describe it.

Twey
06-08-2007, 08:12 PM
ImageMagick (http://www.imagemagick.org/) is available for free for all common platforms.

riptide
06-08-2007, 08:54 PM
you could do this with almost anything. just make two images. Make one hazy. The other just trim the edges after you put it over the hazy one. So you're going to need a program that works with layers. Go to download.com and look for one.

mlerbrick
06-08-2007, 09:18 PM
AH! Thank you. I did it once not knowing how I did it... something to do with masking. But this worked great. A little time consuming, but it works and I will take it!!!

Veronica
06-12-2007, 07:39 PM
In Photoshop, use the rectangular/marquee tool (the "marching ants") to draw a rectangle the size you want within the image border

In the top tool bar go to Select > Inverse

In the top tool bar go to Image > Adjustments > Brightness/Contrast

And increase the brightness as much as you want. It will only affect the selected area (in this case, the border)

Delect and do Save As or Save For Web

djr33
06-12-2007, 08:22 PM
Much easier than all of this. Just go into the layer effects (in the layer pane, click the arrow, then 'layer effects'), and change the bevel options. (This is for photoshop.)

eleven82
07-03-2007, 08:26 PM
In photoshop you can select the entire image, add a white stroke around it, change the stroke to be on the inside, choose the width to be 3 or above (depending on the pic) then reduce the stroke opacity to about 10%. It should give you the same effect as your example.

djr33
07-04-2007, 02:51 AM
That is clearly, to anyone who has used the effect, bevel. It has different lightness values, trying to simulate shadows, on each side. A stroke would come close, but wouldn't match that. You could do it manually, but why?

bsmith-tigerteam
07-04-2007, 02:53 AM
I would go about it exactly like eleven82 suggested. (though you may want to add a second layer of the same image)

(see this for an example: http://www.bestwebsitedevelopment.com/bsmith/forum-help/edge-effect.gif)

djr33
07-04-2007, 03:29 AM
Using the bevel, it's very easy.
1. go into the layers pallete.
2. Select your current layer.
3. Click the little arrow in the top right. Choose Blending Options.
4. Choose bevel and emboss.
Immediately, it'll look similar to the image above, but with more contrast.
Now just change the settings as you want.
For a match to the first post, I'd say use the defaults and change:
a) size: 3px; b) shadow mode color (click the box) to medium grey (RGB 128-128-128, or HSB 0-0-50); c) mode looks best to me as chisel soft.


Edit: the more I look at that first picture, I guess it might just be a simple adjustment, like above. The bottom and right look darker, so it's hard to tell whether it's a stroke or bevel with low contrast settings.
//shrug

djr33
07-04-2007, 03:38 AM
(New post, with a new image)

Here's what I'd suggest as a better look. The original looks boring, from a graphic design standpoint. (This assumes you do want a flat color, not a bevel, with lightness as a factor.)

1. Select> All (cmnd/ctrl+a)
2. Select>Modify>Border, and pick a number; I suggest 5 for this.
3. Select>Feather; choose a number; I suggest 2.
4. Image>Adjust>Brightness and Contrast, or another tool. Change brightness to your liking. I used B&C, B up to 50%.

I'm a fan of feathering things.

Here's what it looks like:

bsmith-tigerteam
07-04-2007, 03:42 AM
Edit: the more I look at that first picture, I guess it might just be a simple adjustment, like above. The bottom and right look darker, so it's hard to tell whether it's a stroke or bevel with low contrast settings.
//shrug

yeah... I see what you were talking about, but I think it was on the original image before the effect was applied... it's just darker on the bottom right corner then on the upper left and that is why it gives that look.

The only way for everyone to be sure would be to get the thread starter to post more thumbnails... then we could examine the effect better.

But... I think any of the proposed effects should help them get the job done. :)

eleven82
08-06-2007, 08:11 PM
That is clearly, to anyone who has used the effect, bevel. It has different lightness values, trying to simulate shadows, on each side. A stroke would come close, but wouldn't match that. You could do it manually, but why?

Clearly, the original image does not have a shadow on the right and bottom sides, like a bevel effect would give you. A stroke would give you a closer replication to that image.

djr33
08-06-2007, 10:39 PM
Yes. Read the last few posts. It was an illusion based on the darker right/bottom of the image.