Curves on websites

[technica]

Hey everybody. I am redesigning a main page on my site, and I am trying to use curved table images similar to the ones on this site:
http://pc.ign.com/?fromint=1
I am under development with everything right now, but if anybody can tell me how to easily make these curves, I would really appericate it...
BTW, I do know a bit about making the circle then splitting it in four, but maybe if you could elaborate a little bit for me...?
Thanks

[starrwriter]

To make images with curved corners, you need a good graphics editor. The cheapest one I know of is CompactDraw ($38): http://www.mediachance.com

You don't need to slice up an image unless you want a table to look like it has rounded corners.

[redcircle]

I would use macromedia fireworks. They have a 30trial. http://www.macromedia.com/software/fireworks/

Check this out. It will be great help for you step by step on how to add it to your design.
http://www.alistapart.com/articles/customcorners/

[brandblast]

technica,

To further enhance these great answers, what you see on the website you provided is not a curved table, you simply can't curve a table, what designers do is create a top image with curved corners and put it a the top of the table.

The deeper you get into design you will see that illusion is a big part of your design, you have to design within the constraints of html. That comes from education and practice, practice, practice.

[technica]

Hey guys. I have really good Photo editing software: Fireworks MX 2004 and Photoshop 7...
Now that we have established, what exactly do I do withing these programs (preferably Photoshop) to create the curved part of the table?
Also, I have been wondering for awhile how to make images look shadowded, just like my logo (I didn't do the logo, so I wouldn't know how...)
thanks so much for all of your help!

[spice]

There are tricks to making smooth curved corners in Photoshop, but without going through the trouble, you'll find that your edges will tend to be jagged and obviously pixelated. The easy fix (assuming you have one) is to use a vector program (Illustrator, Freehand, even Flash should work) to draw your circles, then copy and paste them into Photoshop. Photoshop will maintain the perfect vectored curves at whatever resolution you import.

Once it comes time to put it together on your page, you'll probably find this article very helpful:
http://www.alistapart.com/articles/customcorners/

[technica]

Ok I have Freehand 2004 and Flash MX Pro 2004, so I will try that...
What about instead of getting curved edges, getting a curved table top, like
http://pcmedia.ign.com/pc/image/top_top.gif
Also, any comments on getting the image shaded? (using photoshop)
Thanks for your help

[spice]

for the shading, either brush it in by hand or use a gradient. you mean like on the example they have, right?

[technica]

Yea thats the type of shading I mean...
I am very new to Freehand and Flash, so I don't exactly know what tools to use to make the curved image.
Any help would be greatly thanked...

[paulhiles]

Two further tutorial sites for you Becky!
both deal with creating rounded-edged tables... first one from SitePoint uses Photoshop as the tool.. and illustrates the process in easy steps. The second link actually offers the PSD file and the HTML to go.. how about that, eh? ;o)

The Trick to Rounded Corner Tables
http://www.sitepoint.com/article/392

Free Rounded Corner Images for HTML Tables
http://www.nutrocker.co.uk/corners.html

[technica]

Hey Paul! Thanks so much for the links... I might try and use Freehand like Spice said, so I will keep you posted. Thanks again!

[dssquirt]

I have seen several sites where there are curved lines. I realize that these are graphics, usually inside of tables. However, I am having problems creating nice smooth, flowing curves. It seems like when I try and design something in Photoshop, my curves get rather funny looking.

Does anyone have any suggestions on how to create these nice curved lines?

Thanks.

Originally Posted by dssquirt

I have seen several sites where there are curved lines. I realize that these are graphics, usually inside of tables. However, I am having problems creating nice smooth, flowing curves. It seems like when I try and design something in Photoshop, my curves get rather funny looking.

Does anyone have any suggestions on how to create these nice curved lines?

Thanks.

hi

the pen tool in photoshop is pretty good for curves.....you can plot points and then grab the lines between and curve them w/ the (seceondary selection) tool and control how much arc is applied to each line.....and then you can stroke the lines to get your curved graphic.....

personally though i would never use photoshop to make graphics for websites ...vector based applications, like Fireworks or Illustrator, have much better tools for this purpose......and you probably are seeing such cool "curves" on websites inside slicetables generated by programs like Fireworks.......

OK i hope this little bit of info points you in the right direction....
Good Luck!

[dssquirt]

Can anyone tell me the best way to make those nice curves you see on websites? I know that they are images, generally sliced into several pieces. However, I have been having a hard time in either Photoshop or Illustrator making a nice curve.

I like how the way the curves make a site look - but just can't seem to quite make it work. I have used a template before, and that worked well; but I would like to know how to create the images myself.

So if anyone can help or point me to a tutorial I would appreciate it.

[paulhiles]

There are many different ways of introducing curved images into your page layout. I'm not going to attempt to try to cover them all, as I'd be here all day! :o) dssquirt was asking for a tutorial, and that is the first link below. The other links are more general in nature, covering how to create smooth curves, combining vector shapes, and an in-depth look at the impact of using bezier curves in design. Enjoy!

Creating a Web Page Header in Photoshop
http://www.pegaweb.com/tutorials/web...e-header-1.htm
Free templates are also available (donations appreciated!)
http://www.pegaweb.com/websites/free...-templates.htm

Bézier Curves in Paint Shop Pro
http://loriweb.pair.com/bezier6.html

Creating Vector Shapes: a Nodes Primer (PSP)
http://www.state-of-entropy.com/nodes1.htm

Bezier curves ~ WebReference.com
http://www.webreference.com/dlab/9902/bezier.html

[dssquirt]

Thank you to everyone who responded. I think I just need to practice, practice, practice. I am going to read all of the tutorials that have been suggested and keep trying.

I have several photoshop books and one illustrator book. But if anyone has suggestions on those I am always looking for good books to add to my library.

Thanks again.