homepage Welcome to WebmasterWorld Guest from 54.145.182.50
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Fireworks / Photoshop
Creating sharp curves on images
eagle072169

10+ Year Member



 
Msg#: 176 posted 10:23 pm on Jun 14, 2001 (gmt 0)
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

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



 
Msg#: 176 posted 10:38 pm on Jun 14, 2001 (gmt 0)

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

10+ Year Member



 
Msg#: 176 posted 10:41 pm on Jun 14, 2001 (gmt 0)

Thanks for the input Mivox.

Robert Charlton

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



 
Msg#: 176 posted 5:54 am on Jun 15, 2001 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 176 posted 8:14 am on Jun 15, 2001 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 176 posted 11:22 am on Jun 17, 2001 (gmt 0)

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

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



 
Msg#: 176 posted 11:30 am on Jun 17, 2001 (gmt 0)

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

5+ Year Member



 
Msg#: 176 posted 5:55 am on Jul 17, 2001 (gmt 0)

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

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



 
Msg#: 176 posted 6:27 pm on Jul 17, 2001 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved