Welcome to WebmasterWorld Guest from 54.166.198.6

Forum Moderators: not2easy

Message Too Old, No Replies

Fireworks / Photoshop

Creating sharp curves on images

     
10:23 pm on Jun 14, 2001 (gmt 0)

10+ Year Member


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

10:38 pm on Jun 14, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

10:41 pm on Jun 14, 2001 (gmt 0)

10+ Year Member



Thanks for the input Mivox.
5:54 am on Jun 15, 2001 (gmt 0)

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.
8:14 am on Jun 15, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:22 am on Jun 17, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:30 am on Jun 17, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
5:55 am on Jul 17, 2001 (gmt 0)

5+ Year Member



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

6:27 pm on Jul 17, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month