Making Curves

Tweet

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.

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.

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.

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.)

10. Use the gradient tool to fill the shape.

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

This is a pretty basic building block for any web designer — and surprisingly easy, yes?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.ideasfreelance.com manoloweb

    A few years ago, I was totally convinced that Corel Draw was the best vector drawing program ever. Then I was introduced to Ilustrator 9. Oh big surprise!

    BUT (Why is there always a “but”?), the path making is piece of cake now, but I haven’t found the way to edit paths, I mean, add points, change them from curve to angle, make it “uneven” meaning that both control points can go to different angles. I think a tutorial on EDITING paths could be great, at least for me ;)

  • Afro Boy

    Here here!

  • Bill

    Thanks – I really did not know how.

  • SMARTin

    Here here

  • Thirteenva

    While your column is good for what it is. I think it should e renamed ‘first steps’ or ‘getting started’. It seems to deal much more with learning how to do some pretty basic things rather than design theory or advanced design concepts. Don’t get me wrong i think what you are doing is great and wish i had such a resource when i was starting out years ago. However, I think this column should be renamed for what it is and open up a spot for actual design discussion.

  • jgoddard

    I agree with Thirteenva, it’d be great if there was another column that was a lot more advanced… but I do love yours!!

  • http://www.livinginoxford.com mick_s

    thanks from a beginner

  • Rebecca

    I think you’re doing a great job laying basic groundwork for those of us who are beginners, and hope that your intention is layer these tutorials with progressively harder ones.

    Thank you so much for these tutorials!

  • http://www.mission36teen.com M36Teen

    I agree on all three points. :-)

    I think a tutorial on EDITING paths could be great.

    YES!

    While your column is good for what it is. I think it should e renamed ‘first steps’ or ‘getting started’.

    it’d be great if there was another column that was a lot more advanced… but I do love yours!!

    Yes!

  • http://www.mission36teen.com M36Teen

    Hmm, seems I got my quote tags uneven. oops! Oh well, you get the point (I hope) :-D

  • A_Brisson

    I’ll leave the appropriate naming up to the more qualified, but I find a blog at this level very useful.

  • Skweekah

    I think I love you Corrie.