Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Creating curved images

3:19 pm on Jun 17, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 6, 2001
votes: 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.



3:25 pm on June 17, 2002 (gmt 0)

Senior Member

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

joined:Mar 20, 2002
votes: 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.
3:28 pm on June 17, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 29, 2000
votes: 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.
3:29 pm on June 17, 2002 (gmt 0)

Senior Member

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

joined:Feb 25, 2002
votes: 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!

4:24 pm on June 18, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:May 17, 2002
votes: 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.