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)

WebmasterWorld Senior Member 10+ Year Member


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 Jun 17, 2002 (gmt 0)

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

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 Jun 17, 2002 (gmt 0)

10+ Year Member

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 Jun 17, 2002 (gmt 0)

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

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 Jun 18, 2002 (gmt 0)

10+ Year Member

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.



Featured Threads

Hot Threads This Week

Hot Threads This Month