homepage Welcome to WebmasterWorld Guest from 23.20.43.165
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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




msg:850066
 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




msg:850067
 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




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

Thanks for the input Mivox.

Robert Charlton




msg:850069
 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




msg:850070
 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




msg:850071
 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




msg:850072
 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




msg:850073
 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




msg:850074
 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