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?
October 27th, 2004 at 11:15 pm
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 ;)
October 28th, 2004 at 12:53 am
Here here!
October 28th, 2004 at 6:37 am
Thanks - I really did not know how.
October 28th, 2004 at 6:51 am
Here here
October 28th, 2004 at 11:56 am
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.
October 28th, 2004 at 12:07 pm
I agree with Thirteenva, it’d be great if there was another column that was a lot more advanced… but I do love yours!!
October 28th, 2004 at 12:45 pm
thanks from a beginner
October 28th, 2004 at 12:51 pm
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!
October 28th, 2004 at 1:53 pm
I agree on all three points. :-)
YES!
October 28th, 2004 at 1:54 pm
Hmm, seems I got my quote tags uneven. oops! Oh well, you get the point (I hope) :-D
October 29th, 2004 at 12:18 am
I’ll leave the appropriate naming up to the more qualified, but I find a blog at this level very useful.
January 10th, 2007 at 4:39 pm
I think I love you Corrie.