mvpnet 0 Report post Posted April 28, 2005 Hi, Could anyone teach me the step by step on how to create a rounded corner in photoshop and arrange this in table in html?Helps are very much appreciated! Share this post Link to post Share on other sites
iGuest 3 Report post Posted April 28, 2005 I just want to show you a basic curve:[0][1][2][3][4][5][1][5][5][5][5][5][2][5][3][5][4][5][5][5][ ] = 1 pixel0 is the lightest 5 is the base colour or darkest. 0 is most likely white.Try this with black, you can extend the numbers, just set your pencil to opacity 20% and with each pixel apply the number in the brackets the amount of times suggested, when you zoom out you should notice a curved corner.This is pretty much as basic as you can get, from there, it's just applying the right amount of lightness to darkness to produce the type of curve you want.I'm sure others will have better ways, I just use this method when creating small images like icons.Cheers,MC Share this post Link to post Share on other sites
VJgamer1405241488 0 Report post Posted April 28, 2005 If you are trying to draw a rectangle with rounded edges, then what you will need to do is, in your toolbox (the window with all the tools on the left) find the rectangle tool, and right click on it. It should then give you a drop down of different shape tools. Select the tool called "Rounded Rectangle Tool". Then goto your image, and click and drag to your heart's desire! Share this post Link to post Share on other sites
Maybe Skate Team 0 Report post Posted April 28, 2005 In photoshop I personally use the vector took to make my rounded corners on anything, gives me nice clean lines and edges. About putting it up with HTML, I dont know that much but I am positive that it is super easy with CSS. I saw it on some website, Ill try to find it later and post it here...that is if you still need it! Share this post Link to post Share on other sites
chiiyo 0 Report post Posted April 28, 2005 Just a random note, but I was surfing around, and here's a link to a site that teaches you how to do rounded corners with CSS, don't need the graphic at all...Might be useful to some of you CSS-lovers... Share this post Link to post Share on other sites
Silent Soul X 0 Report post Posted April 28, 2005 Yeah i use photoshop aswell (it's really easy to use), but good find chiiyo, i never knew you could do that in css, well i suppose i gotta keep on studying html and css Share this post Link to post Share on other sites
chiiyo 0 Report post Posted April 28, 2005 Here's a little mini-tutorial on how to arrange the rounded corners in a table. Since no one has really answered that part of the question yet.1. First, you should have your corners ready as gifs or jpegs, whichever is smaller. I'm assuming you have four corners, as in you want a rounded rectangle. You can either use the vector method, or draw a rounded rectangle and just grab the rounded corners from there. What I usually do is draw a circle on my background colour, and fill it with the colour of my rectangle, and then cut it up into quarters to make my four rounded corners. Like so.2. Anyway, the table is going to look something like this: I've labelled the nine different cells for better understanding. 1, 3, 7 and 9 are for putting the four rounded corners, 2, 4, 6 and 8 are to complete the border (and to give a nice padding effect) and 5 is where you put your content.I'm using rounded corner gifs that are 20px by 20px, so I know exactly what is the width of my border.3. So let's start with the code. <html><head><title>Test page</title></head><body bgcolor="#cccccc"><table cellspacing="0" cellpadding="0" border="0" bgcolor="#99ccff"><tr><!---this is the cell 1---><td width="20px" height="0px"><img src="topleft.gif" alt="this is the top left rounded corner" width="20px" height="20px"></td><!--- this is cell 2---><td width="200px"><br></td><!--- this is cell 3---><td width="20px" height="0px"><img src="topright.gif" alt="this is the top right rounded corner" width="20px" height="20px"></td></tr><!--- this is cell 4---><tr><td height="200px"><br></td><!--- this is cell 5---><td>Put your content in here</td><!--- this is cell 6---><td height="200px"><br></td></tr><!--- this is cell 7---><tr><td width="20px" height="1px"><img src="bottomleft.gif" alt="this is the bottom left rounded corner" width="20px" height="20px"></td><!--- this is cell 8---><td><br></td><!--- this is cell 9---><td width="20px" height="1px"><img src="bottomright.gif" alt="this is the bottom right rounded corner" width="20px" height="20px"></td></tr></table></body></html> That should work... change the colours around, change the dimensions, stuff like that. Using CSS would help a lot, I think a lot of the code is non-XHTML-compliant... I put height=1px for the rounded corners cells because from past experience, it's kinda hard to force the height down to a small size. Specifiying the image's dimensions should force the cell to enlarge to just perfectly that size.Of course, using the CSS method I wrote above might work a lot better, or at least mixing CSS and tables would work better than plain no CSS... Share this post Link to post Share on other sites
jcguy 0 Report post Posted April 28, 2005 I've always wanted to create rounded rectangles but although there are many tutorials for doing that with Photoshop on the Internet, there is a lack of such information for GIMP which I happens to use. Can anyone shows how to do that with GIMP?Thanks Share this post Link to post Share on other sites
ebbinger_413 0 Report post Posted April 28, 2005 i dont know...from the looks of it...all you guys are doing is setting a cell background to make the table look like a rectangle with rounded corners (right?) but you dont HAVE to use photoshop for this (not that i dont love photoshop because i LOVE photoshop and i use it for almost everything for my website) but if you dont have photoshop you can use other programs...like paint (easy, fast, and fun...nuttin like sittin down at the computer and creating pixel art ) but all youd really have to do is just make a circle using the circle tool in w/e program you are using (now a days pretty much all programs will have the basic features like the pencil tool and the rectangle tools....ect...) square off the corner....basicly making the picture that everyone else has shown you already....save it...rotate it 90 degrees 3 times...saving it each time...so that you have each of the 4 corners....and set the pictures for your cell backgrounds...for the sides...just set the cell color to the same color as the corners...you can use color select tool to get the exact color....as to setting up the table....use frontpage or dreamweaver...dont type html in notepad (that takes too long and there are too many codes that you have to memorize to customize your page to get the look you want)anyways...just thought id post my opinion Share this post Link to post Share on other sites
Sacrifice Productions 0 Report post Posted May 4, 2005 Can't you just use the Pen Tool and drag out your curves? Fireworks or Illustrator? Share this post Link to post Share on other sites
mimi_m 0 Report post Posted May 9, 2005 I don't think using illustrator for rounded corners for a site is a good idea, seeing as how it's a vector-based program and all. I'm going to go with the majority and say that Photoshop is the best. For me, anyway. I don't like to use CSS when I'm creating a site made of graphics (duh). I just create all the graphics on PS, including those little roundered corners, then slice it all up and stick it all together on a webpage by using tables. You can use the rounded rectangle tool or the ellipse tool in PS to create round-ness, and just crop the areas you need; or you can do what i do, and just make the rounded corner yourself by using pixels (I do this especially if I need the outter area of the corner to be transparent). I just use the pencil tool on 1px and draw and mess with the circle shape until it looks good. (Then, just duplicate it and rotate it to suit all four corners). Here's an example I used from a website I created quite a while ago... the border of the site was 5px so i needed to create a corner that would fit: ...It actually looks a little jaggidy here But it looked good when put together with the rest of the site. HmMmMm... maybe I should have used a better example... Any way that's how I do it. Share this post Link to post Share on other sites
BigmanB 0 Report post Posted May 30, 2005 You can go the hard way and use photoshop and create corners or you can use nifty corners which will make the corners for you. I have been using nifty corners and it does really great. check out the site for your self at Nifty Corners Share this post Link to post Share on other sites
saga 0 Report post Posted May 30, 2005 the edit box in which i typed in my reply is limited for such a turorial so i suggest that you visit this website YourHtmlSource.com. There you could find the topic about the rounded corner of a table in the table section of the turorials. Good luck Share this post Link to post Share on other sites
Maybe Skate Team 0 Report post Posted May 30, 2005 There are many ways you can make rounded corners....the html, the css, ps ways. You can to see what you are capable of really. I would personally go with PS and do it quickly with the pen tool! Share this post Link to post Share on other sites
iGuest 3 Report post Posted April 13, 2009 How To Create Rounded Corners?How To Create Rounded Corners?1.Open Photoshop (any version will do) 2.Use the pen tool.3.Look above (OMG so many shapes to choose from and look!its the rounded rectangle shape!!).4. Now shape that picture of yours.Press ctrl+enter.5.Little trace lines will appear.6.Press ctrl+x.Press ctrl+v.7.Layer 1 appears!8.Delete the layer named "background"(right click the layer, then select "Delete Layer").Notice the checkered gray and white background. Just ignore that.9.Then, save it as:File Name: whatever_you_name_itFormat: PNG Why PNG?Because even though saving it as JPEG will give a rounded corner effect, it will also give those annoying white pointed corners that will destroy the rounded effect that you made. -reply by Some PS Kid Share this post Link to post Share on other sites
