Fireworks / Photoshop

Creating sharp curves on images

[eagle072169]

I am trying to mainipulate a straight block of color using Fireworks2. I am attempting to create rounded edges to my header like in this image :

http://www.schwabe.com/

I'd appreciate any tips on :

1. how to get a uniformally rounded edge
2. how to get the curved edge to look smooth

cheers

nick

[mivox]

Welcome to WebmasterWorld, eagle! I know we have a resident Fireworks user running around here somewhere... hopefully he'll be by soon, because I think Fireworks has a nice automated method for rounding corners like you describe.

In PhotoShop, I don't know of any quick-n-easy methods for that, but if the Fireworks fellow (Hello, toolman! You there?) doesn't come up with an easy answer, I'll give you a step-by-step for the fairly clumsy method I use in PhotoShop...

As far as keeping the rounded corners smooth... that's all a function of how you save the image. Assuming you'll be saving as a gif, it's a matter of making sure that there are enough colors between the object's color and the transparency/background color to create a smooth anti-aliased effect on the rounded area. PhotoShop's "Save for Web" command usually does a great job on optimizing .gifs for me.

[eagle072169]

Thanks for the input Mivox.

[Robert Charlton]

I'm not a graphic artist, but I'd guess the curves were created in a vector drawing program like Illustrator. I haven't used Fireworks, so I don't know whether you can do vector drawing with it or not.

[knighty]

Not so sure about Fireworks 2 - I have only used 3 & 4, but in these you can easily create a rounded square by selecting it from the shape tools.

Control the curveature with the object panel

and smooth the edges by anti aliasing the image with the stroke panel

[caine]

That is correct.

In the toolbar (fireworks 3/4), there is a rectangular shape which has a little arrow, if you click and hold, then a selection of four items appears, the curved edged rectangle is one of them.
Alternatively, it is the pen tool for curves for lines.
1. click on pen tool
2. chose point you wish curve to start and click.
3. chose point you wish curve too end by click, then you will note you've a straight line shadowed by a blue highlighting line.
4. at the last point, click again and drag then you will see the curve being formed.

hope that helps

[tedster]

Since the title of this thread also mentions Photoshop, I'd like to jump in and mention that the pen tool in Photoshop also does the job. All kinds of curves -- no need to go back and forth with Illustrator, although that certainly works best for more complex drawings.

[Bolotomus]

If you want to make a "roundrect" in Photoshop, here's my recipe:

First make a circle selection. We're going to make the upper-left corner OK? So add to your selection (i.e. hold down shift) a rectangle that extend the top of it to the right, and add another rectangle that extends the left side down. If you see what I mean. The only part of the circle remaining is the upper left corner. Trim off any extra pieces you don't need.

Your selection should be shapes more or less like a square, except that the upper left corner is circular.

Now fill it in (e.g. paintbucket). Copy that layer, rotate 90 degrees. Copy again, rotate 90 degrees. Copy one more time, rotate 90 degrees.

Now put the four parts together. Voila, a roundrect.

Bolotomus

[mivox]

Bolotomus - that's very similar to my technique... I can never help but think there's gotta be an easier way, but it certainly works for PhotoShop.