homepage Welcome to WebmasterWorld Guest from
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

Creating curved images

WebmasterWorld Senior Member 10+ Year Member

Msg#: 369 posted 3:19 pm on Jun 17, 2002 (gmt 0)


I have been trying for some time now to create those smooth corners (basically 1/4 of a circle) that you can add to layers or tables with a view to taking off the sharp edges.

I am no graphic designer and as a result most of what I have produced so far looks like a bag of nails. I have access to paintshop pro and photoshop. Are there any decent resources that I could follow to get a head start.





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

Msg#: 369 posted 3:25 pm on Jun 17, 2002 (gmt 0)

Most designers get their cool smooth curves from using a vector program like freehand or illustrator. Then they import the shapes into photoshop or whatever. It makes much cleaner designs. You can accomplish it with the other programs you mentioned, but it takes some time to get that smooth look.


10+ Year Member

Msg#: 369 posted 3:28 pm on Jun 17, 2002 (gmt 0)

Adobe Photoshop 7.0 (and some earlier versions) produces vector shapes that have smooth corners. If you don't have access to this program perhaps someone you know does and could help you out. I'm not sure if Paint Shop Pro has this feature yet or not, but it's less expensive than photoshop to my knowledge.


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

Msg#: 369 posted 3:29 pm on Jun 17, 2002 (gmt 0)

Possibly the easiest way to do this is to use the Rounded Rectangle Tool (in Photoshop and/or ImageReady- sorry, no real experience of PSP).

This allows you to specify the pixel radius of the rounded edge of your rectangle and give you the smooth corners you are looking for. You may also have to overlay a straight-edge cornered rectangle over the bottom of this to achieve a top rounded-edge and bottom square-edge effect.

Then use this as the background of your layer/table/table cell.

Hope this helps!


10+ Year Member

Msg#: 369 posted 4:24 pm on Jun 18, 2002 (gmt 0)

I would suggest against using the image as a background for your work.

To get the edges you speak of is (like most cool HTML tricks) rather simple and has a nice effect. Because I use tables my explanation will be in tables and may need some adaptating to other forms.

Step 1

Create 1/4 of a white circle image in your image editor (black background). You can do this by creating the full circle (hold down shift while drawing the selection in photoshop so the shape is consistly round) and then cropping to the one fourth corner. Save this image as corner1.gif. Repeat the process by created all the corners and naming them respectively. If you know how to rotate or flip and image - do that!

Step 2

Make an HTML document with a black background. Create a table that has 3 rows and 3 columns (cellpadding and cellspacing set to 0). In r1, c1 place your first corner. In r1, c3 place your second corner. In r3, c1 place your third corner. In r3,c3 place your final corner. Typically you would place another table inside r2,c2 with the cellspacing and padding that you choose (if any). In this new table you can put all the information you want. Make sure you go through and set the background color of the TD tags to white.

Side Note: Some people make the space around the corner in the GIF transparent for use on different backgrounds. This can be useful.

There are many other ways to acheive this and by no means do I declare my example the right one.

Hope this helps.


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