Rounded Corners Tutorial

You Don't Have to be a Computer Genius to...
Create Rounded Corners in Photoshop!!!

Most websites you visit everyday, such as Yahoo or AOL are actually quite basic. The reason is not that Yahoo or AOL lack the resources to make the jazziest websites out there, but rather that the simpler the design, the faster the downloads. No where has the expression, "Time is money" been more relevant than on the Internet. No one waits around for slow pages. There are tricks to making your website look a bit more "finished" like Yahoo's or AOL's without sacrificing speed and it doesn't take a lot of work. I decided to make the tables on my web page look more professional by rounding out the edges instead of having them as right angles. Do you know what I discovered....YOU DON'T HAVE TO BE A COMPUTER GENIUS TO...Create Rounded Corners in Photoshop!!!

Here's a step-by-step guide. ONE DISCLAIMER, I WILL BE DESCRIBING THE STEPS I TOOK USING THE WEBHOSTING AND SOFTWARE SERVICES I HAVE CHOSEN. IF YOU HAVE DIFFERENT BACK-END SUPPORT, YOU WILL HAVE TO ADJUST ACCORDINGLY.

My Tools:

Windows 98
Web2010 as my hosting company, using UNIX
WS_FTPLE (32-bit) for my file transfer protocol
Dreamweaver as my web page designing software
Photoshop 5.5
REMEMBER...Directories (or Files) should always be named in small letters not CAPS!

Summary:
Rounding out the corners in your tables is really a two program process; one in Photoshop, one in Dreamweaver. FIRST, I had to create the corners I wanted to use in Photoshop (i.e., upper right, lower right or upper left, lower left--or all 4!) and transport the corners as GIFs to the "my images" folder in Dreamweaver. I only wanted two corners of my table rounded, the upper right and the lower right corners. So, SECOND, I had to create my table and create a cell in the upper right and lower right that had a little box in each. The size of that little box matched the size of the corner I created. I inserted the rounded corners as an image in each box cell of my table. Magic...my table had rounded corners!

IMPORTANT: Remember, the images you are creating for purposes of this tutorial are just the rounded corners. You could create an entire image that is the table with rounded corners and text if you so desired. I didn't want to use such a big image on my page, but just wanted to soften the look of one of my tables. So the "rounded corners" themselves are the images and nothing else.

Step-by-Step:

Open Photoshop 5.5. Once you launch Photoshop 5.5., go to the menu bar at the top of the page and click "File" and then "New." A new image canvas will appear called "untitled." You can name your whole photoshop file anything you want, and of course, you can change the name later.
Pick an Image Size. You have to designate a size in pixels (or inches) for your new image. Of course the size of your corner will really depend on the size of your table on your webpage. You can always resize it a bit in dreamweaver, but it can lose some quality. Try to map out how big your table is beforehand so you know what size the rounded corner image should be. I picked 50 pixels by 50 pixels for my rounded corner. Also, don't forget to select RGB if you want your corner to be in color (not black and white).
Zoom in or Zoom out. Because the rounded corner image will be very small--mine was 50 pixels--you may want to zoom in on the image to make it bigger while you work with it in Photoshop. CTRL "+" makes the image increase from 100% to 1000% of its size or more. The corollary is also true. From time to time, you may work with images that you want to shrink down to work with them in Photoshop. To zoom out on an image just hit CTRL "-." NOTE: When you save the document, it will automatically be saved back at 100%.
Create a Duplicate Layer. Go to your Layers Window and create a duplicate layer to work with. To do this, click on the arrow on the right on the Layers Window where a drop down will give you options to "Duplicate Layer." By duplicating the layer and saving the photoshop document in layers, it will be easier for you to go back in and just change the color or size of your rounded corner images in the future.
Select Marquee Tool. Select the Marquee Tool (i.e., the dotted square in upper left of the Tools Window) and hold down until dotted circle appears. Select the circle marquee tool.
Draw Circle. Put your cursor on the upper left palette of your new image and form a circle with edges just touching the sides of the image box. You should be able to see the dotted lines throughout the edge of your circle.
Select a Color: You now must pick a color for your rounded corner image that matches exactly the color of the table you will be "rounding" off on your webpage. You can either click on the "foreground color" box in the middle of the Tools Window" and a color palette will pop up or you can open the Color Swatches Window and click on the color you want. The color you choose will appear in the Tools Window in the foreground box. FYI, the other box represents your background color.
Fill the Circle with Color. To fill the "marqueed circle image" with the color you just chose, you can either, click the paint bucket icon in the Tools Window and then click within the circle or you can go to "Edit" on the menu bar at the top of the page and pulldown to choose "Fill." I picked gray as my color and now my marqueed circle was gray with white triangles around the outside of the circle.
Deselect Marquee. Next, deselect the "marqueed circle" by clicking on the Tools Window and clicking the Marquee Tool and then clicking on the image itself. Deselecting stops the dotted lines from moving and lets you move on to the next step. NOTE: If you don't first "deselect" you won't be able to do anything else.
Pick the Paintbrush Tool. Select the paintbrush tool from the Tools Window and click "brushes" on the Swatches Window. This will give you the option to select a one-pixel point pencil or thicker ones. With the paintbrush tool, you'll need to color in 3 sides around your circle image so that just one side is left and that side will be your rounded corner. So, using the same color as you used before, use the pencil to click on the 3 white triangled areas and fill them in. Do not color in near the remaining white triangle at all. Now everything should be gray (the color I picked for this tutorial) except the upper right corner (or whichever corner you chose to create as an image first.) Save the image in photoshop before you export this upper right corner image as a GIF.
Export as a GIF. Go to File on the menu bar and click "Save for Web." You will be saving the image as a GIF and you can name your rounded corner image anything you want. I named mine very specifically, "upperrightcorner" and saved it to my images folder in Dreamweaver.
To Make the Other Corners. To make the other corners you may want to use, such as the lower right corner image, you don't have to create anything new. All you have to do is open the "upperrightcorner" image you created in Photoshop and flip it around and resave it. To do this, open the corner image in Photoshop, go to "Image" in the menu bar, click "Rotate Canvas", and then click "Flip Horizontal" and/or "Flip Vertical." Then for each corner, go to "Save for Web" and save it as a GIF. Name the new image "lowerrightcorner." NOTE: If you wanted, you could create each different corner as a new layer in Photoshop and then when you save the photoshop image, all layers witht the 4 corners will be saved for you to use over and over again on any other tables you design in the future. If not, you can always just keep using, flipping, changing colors and resaving the one rounded corner image.
Create Your Table in Dreamweaver. After you've made a table in Dreamweaver, you have to do a little more work to get it ready for its new "rounded corner" image. The rounded corner will get inserted as an image over the right-angled corner that exists. For this tutorial, assume you are rounding the upper right and lower right corners of a table. To accomplish this you have to create a small cell in each corner about the size of the image (i.e., 50 pixels). You must insert a row and column in your table that criss-cross to create your small cell in the upper right and lower right of your table. In effect, your table will have to small box-shaped cells in the upper right and lower rights corners.
Insert Rounded Corner Image. Now, you can click in your upper right box-shaped cell and click "Insert" on the menu bar and click "Image." You can insert your new "corner image" just as you would any image. Repeat this for the bottom corner. After you have finished your table and the rest of the page, FTP the page to your remote site. NOTE: You can always preview your page in Dreamweaver before you save it and FTP it to your server. To do this, go to File on the menu bar and click "Preview in Browser." Your table should have a professional "finished" look!