Poor quality image - rounded edges not smooth

  gplatt2000 11:24 27 Oct 05
Locked

Hi all

Firstly, sorry about the vaugue title to this post.

Anyway, my problem is this - I'm making a website for an artist friend of mine, and he;s decided on a box with rounded corners for the main content, on top of a patterned background.

So I made the box in Photoshop, put it on top of the background, and all was well - see image here - click here

Then I saved the box seperately (dragged the box layer to a new transparent document), saved as a 128 GIF with transparency using PS's 'save for web' feature.

However, when I put this box image into dreamweaver, with the textured background set in the body> tag, the corners to the box were very disappointing - see here - click here

When saving the image for web in Photoshop I couldn't see this problem, the corners looked perfectly smooth, so I'm a bit confused...

If anyone has any ideas why this might be, and any way I can solve it, that'd be brilliant.

Thanks a lot for any help

Gavin

  Forum Editor 23:35 27 Oct 05

Is to make a selection the size of the box and then go to Select/Modify/Smooth. You can round the shape up to 16 pixels. If you want to round the corners more repeat the step until you see the desired effect.

Now that you have the rounded corners go to Edit/Stroke. In the pop-up window you can select the Stroke width, whether you want the stroke inside the selection, outside it, or centered, and various blending options. Remembe r the stroke thickness you use, because you'll want to match it if you subsequently divide the rounded box into sub-sections. Now click OK. You should have a rounded box with a thin outline around it.

Now use the line tool to divide the box into sections if you want to do that. Set the line tool weight to match the stroke you used above.

Is that what you meant?

  gplatt2000 11:17 28 Oct 05

Thanks a lot for the reply.

Bu t that's not really what I meant, thanks anyway though as that'll definitely come in useful in Photoshop in the future, so cheers.

The problem that's confusing me is why the box's edges are nice and smooth in Photoshop (which is how I want them), but then when I use the image in Dreamweaver they suddenly look pixelated and rough (which I don't want). I can;t understnd why this is, as the box edges look fine in Photoshop's 'Save for Web' preview...

Please tell me ifI'm still not wording this well, I'm never very good at explaining things!

Thanks again

  cycoze 00:31 30 Oct 05

Try using anti-aliasing when you make it, see more about the "jaggies" click here , it is possible depending on what background you had you didnt notice it while making it in PS.

  gplatt2000 20:30 30 Oct 05

I will look into the anti-aliasing, but if I didn't notice it in PS, how come it only seems to effect the image once it's in Dreamweaver?

Again I' finding it hard to put into words what I mean, but if you look at the two images I've linked to in my first post - the first one, a screenshot from PS (of the box ontop of the background) the edges look fine.
But in the second image (of the box ontop of the same background , defined ion the body tag) the edges look rough.

I'm v confused but I'll keep trying everyone's suggestions.

Thanks again for the help

Gavin

  PurplePenny 22:22 30 Oct 05

Maybe there some setting in Dreamweaver that is causing it to happen. (Sorry 'fraid I don't know anything about DW so that's just a wild guess.)

  djinn 12:19 31 Oct 05

Try exporting as gif - try using matte transparency, making sure that the matte colour refects the colour of your recipient html page or the area of the page into which it will be used.

I guess that PS will have these options - I use Fireworks so not sure of the specifics in PS.

HTH

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…