Don't Have to be a Computer Genius to...
Create Rounded Corners in Photoshop!!!
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!!!
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.
- Windows 98
as my hosting company, using UNIX
(32-bit) for my file transfer protocol
as my web page designing software
(or Files) should always be named in small letters not CAPS!
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
- 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
- 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.
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!
© 2000-2001 Marlene Hollander. All rights reserved.