Creating Shapes

by DL-44

This is Part I of my Interface Concepts™ tutorial series. The series will walk you step by step through the creation of a sample graphic interface for your web page. The tutorials are intended to show you examples of the basic techniques used for the creation of complex web graphics, broken into four parts:

• Part I - How to Make the Shapes You Need
• Part II - The 3rd Dimension
• **Part III - Texturizing Your Parts
• **Part IV - Slicing Your Images for the Web

**still to come

---

Designing a graphic interface for your website usually involves creating a lot of unusual shapes -- something Photoshop does not come ready-made to do per se. Vector graphics programs (ie: Illustrator) are far more versatile for shape creation, but there are many ways of using the built in features of Photoshop to get what you want.

- Phase 1: A couple of quick basics -

Ok, we'll start with the most frequently asked question: how to make rounded rectangles? The first answer is a very simple one. Use your Rectangular Marquee tool to make a rectangle. Then with the selection still active go to the Select menu and choose Modify then Smooth. Enter a number between 1 and 16 depending on how rounded you want your corners to be. Voila -- rounded rectangle. Fill the selection with the desired color and we're on our way.

As long as all you want to do is make a rounded rectangle, this method will work fine. As we get into more complex shapes however, you will find that the Smooth option is a bit lacking -- we'll cover more advanced ways later in this tutorial.

---

Another frequent request is for triangles. Photoshop has a nice little feature that allows us a good variety of options for easily made triangles:

For this we'll need our Line tool. Take a look at the Options pallet for the line tool (double click on the line tool) -- notice the section that says Arrowheads? This is what will make our triangle for us; tick the Start box here. Now look at the Weight text box. The value you enter here will help determine the size of the triangle.

Now click on the Shape button. This is the dialogue box you will see. The percentages you enter for length and width are based on the weight you enter for the line tool. So as we have it now, our triangle will be end up being a 30x30 isocoles triangle. If you want an elongated triangle, enter a higher length percentage. if you want a squat, pudgy triangle enter a higher width percentage. Concavity is an option for actual arrowheads, so we'll leave that alone.

We have our options all set....so let's make a triangle! On a new layer, click where you want the point of your triangle to be, and drag back until the back line of the triangle forms the corners and base. If you keep pulling back you will form the line of the arrow that this tool was actually meant to create. Release the mouse and the shape will automatically be filled with your foreground color. Ta Da!.

Of course, if you want rounded corners, select the shape (Control/Command click on the layer in the Layers pallet) and follow the same steps as for the rectangle.

---

Alrighty then....that was pretty simple right? So then I guess we need to get into the guts of this, and move on to our main project. By the end of this tutorial we'll have all the necessary peices of a full working interface (then we can move to the next tutorial: The 3rd Dimension). So if your ready to move on, grab yourself another beer and keep reading!

- Phase 2: Where to Begin? -

The first thing you need is an idea of what you want your interface to look like. Fortunately I've taken the liberty of deciding all that this time around : ) So then the second thing we need is to understand the different shapes involved, and where they all belong. Take a peak at our goal here, and we'll see what we need to start with: