Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Making Curves

So I got a question from someone about how to make those “curve-things” that you see on a lot of web sites. I was at first a bit surprised by the question since I thought I covered it in my vector graphics tutorials, but it sounded like they were looking for something more step-by-step. Well, here we go…

I’ll be using Photoshop for this example, but you can use any graphics program that has a vector pen tool.

1. Click to make a point.

Making Curves 1

2. Click-and-hold at where you think the top of the curve should be, then hold the shift key and drag out to the side of the point to create curve handles. Holding shift constrains the curve handles so that they are horizontal.

3. Then, click-and-hold at where you think the bottom part of the curve should be….

4. And again, hold the shift key and drag.

Making Curves 2

5. Click to end the curve.

6. To create the shape that we’ll later fill in, hold the Shift key (to constrain the movement to vertical/horizontal/45 degree angles) and click to create the bottom right corner of the shape.

7. Holding shift still, click to create the bottom left corner of the shape.

8. Finally, bring your cursor back to the beginning point and click to close the shape.

Making Curves 3

9. In the Paths palette, Ctrl-click the path layer (Command-click for Macs) to make a selection from the path. (Skip this step in Illustrator.)

Making Curves 4

10. Use the gradient tool to fill the shape.

Making Curves 5

Here’s a one-minute “web page layout” that I made using this technique:

Making Curves 6

Comments