Sign In  |  Join Now Become a member to add links and start earning points!

Amazing Retro Rainbow Curves

In this tutorial, I’ll show you how to design some amazing vector based Retro Rainbow Curves using Adobe Photoshop. These retro artifacts have become a popular trend in modern design!

What We’re Making

You can get an idea of what we’re going to be creating in the example below. You may want to touch up on your abilities with the pen tool before getting started, although I will try my best to be perfectly clear with all of the steps taken to achieve this effect!


Getting Started

Before getting ahead of ourselves, it’s probably a good idea to pick out a color scheme for our design. If you’d like to stick to the colors I’ll be using in my demonstration, check out the example below. Otherwise, if you need help coming up with some good ideas, COLOURlovers is probably a good place to start looking.

White - FFFFFFWhite – FFFFFF

c9402d c9402d

a9362f a9362f

312620 Background – 312620

Go ahead and Create a new Document (I’ll be creating a 600x480px document), and fill the background with your background color using the Paint Bucket Tool.

Enable the grid display, and setup your grid to have a gridline every 20-50px, with 1 subdivision (I’m using a grid line every 30px since 600 and 480 are both divisible by 30).

Grid Demonstration

Creating the First Line

We’re Teaching a Technique Here!

In this tutorial, we’re trying to teach the technique used to create these wonderful designs. While reading through this lesson, try to understand what it is we are doing rather than simply following our guide word for word. If you understand how this works, you’ll have an easy time creating your own unique designs later on!

To draw the lines in our design, we’re going to use the Pen Tool, and use the grid as a guide. First, make sure Snap to Grid is enabled (View > Snap & View > Snap to Grid). Select a Foreground Color for your first curve shape (I’ll be using #c9402d). Use the pen tool to create the first curved line. I’ve provided an easy to follow template below if you’re following along with my demonstration.

First Line Template

A few things to take note of here. First, you’ll probably notice that all concave curves (or the areas that should be curving inwards, like a dent) are all 45 degree angles. This is correct, and will be fixed later. You may have also noticed (as pointed out in the diagram) how the curves create points that line up with one another).

You’ll also notice that wherever there is a curve, the inner and outer points are directly adjacent to one another. All of these things are important factors in creating this effect.

Now, let’s deal with those inner curves.

Grab the Ellipse Shape Tool. In the Options Bar, select “Subtract from shape area“. This option will allow us to subtract from the area of our currently selected shape (so be sure your line path is still selected from your layers palette).

With the Grid and Snap still enabled, create the following circles to create the inner curves of your line (Hold Shift to create perfect circles, and use Space to move your shape while drawing it. Additionally, you can hold Alt to draw your circle from it’s center point if you find that makes things simpler.)

Template 2 - Remove these areas to create the inner curves

Once again, take note of the explanations in the diagram. These will help you create your own curves in your future designs! Your First Curve is Done!

Creating the next Curves

The curves following the first one are a bit easier to create (especially now that we have the technique down), because we really only have to create 1 side of the curve. You’ll see what I mean in a minute.

Create a new Layer UNDER your first curved line to create your new shape on, and select the Pen Tool again. Select a new color (#a9362f), and follow the template shown below.

Second Curve

As you can see in this diagram, we can be pretty sloppy with this curve compared to the first curve we created. Any areas that overlap with the first curve won’t show, so we don’t have to be careful with our points (although, you’ll still want to keep your points to a minimum, considering more points will require more space and processing power). If you’re having trouble understanding, look at how I created the shape in the diagram above — I created the nice, curved path along the outer edge, but where they two shapes touch, I left a jagged path for the new shape since it’s not visible from underneath our first shape.

You can continue this process for any subsequent curves you want to include in your design!

What if This Happens?

Problem with Curve?If you try to create another curve underneath the blue line, you might run into a small inconsistency. When you try creating curves with less than 1 diagonal grid segment in spacing, your curve spacing will end up being off. This can end up in a curve with a more blocky appearance than the curves surrounding it… which might be undesirable — or perhaps it could be what you’re going for.

Anyways, to fix this, you either need to create bigger curves to start out with, OR create the curve on the other side (providing that their isn’t a curve that causes this on the opposite side as well).

Fixed Curved Problem Demo

Final Touches

I’d like to leave final touches up to you, the designer. To get you started, here are a few things I like to do:

  • Keep in mind that in their current vector based form, you can’t do a whole lot with your curves besides playing with the layer style and color. I typically will Merge the curves together into one single raster layer. To do this, Select all the Curve Shape Layers in your Layers palette, and go to Layer > Merge Layers(Ctrl + E). It might be a good idea to make a copy of your original shape layers first so you don’t lose those!
  • Try to render some lighting effects over your merged graphic (Filter > Render > Lighting Effects). It’s a great way to add lighting and shade to your entire graphic in just a few simple clicks.
  • Change the angles of your curves. Rotate the whole thing 45* to give it a whole new look!
  • Add some type to compliment your lines. If you add type, try working with the same colors as used in your lines so that the text and lines harmonize with one another.
  • Throw your lines into other artwork or photography of yours. Use the distort feature of Photoshop to give your retro curves some depth. Additionally, add some depth of field!
  • Combine several different sets of curves together to create intricate line work, and more complex designs!

If you’re having trouble with any of the steps, feel free to Download the PSD for this tutorial!

Retro Rainbow Curves Final Example


  1. Add point Subtract point
    โหลดเพลง mp3 ฟรี (1 Point) October 1, 2010 at 3:29 am

    thank you i like it

    Flag as inappropriate
  2. Add point Subtract point
    Andrew (3 Points) August 26, 2010 at 8:13 pm

    This is a copy of Chris Spooner’s tutorial.

    Flag as inappropriate
  3. Add point Subtract point
    Surya Osborne (1 Point) August 18, 2010 at 9:47 am

    Why do you use the ellipse to create the inner curves? Aren’t you just making the job harder. If you just convert pen anchor points you can create the curves your looking for.

    Not having a ‘go’ just wondering why you use this ellipse technique……


    Flag as inappropriate
    • Add point Subtract point

      You could definitely do it the way you suggest ;)

      My experience using the Pen Tool to create these curves typically results in imperfect lines (even using the grid/snap). It’s very possible that I’m making a simple mistake here though!

      The Ellipse is just an easy hack I’ve worked out to get things looking right with minimal effort. Photoshop clearly is inferior to Illustrator in creating lines like this, so if you have a copy of Illustrator, I’d actually suggest using that instead!

      Flag as inappropriate
  4. Add point Subtract point
    liena aifen (1 Point) June 20, 2010 at 9:33 pm

    great design. thank you for sharing

    Flag as inappropriate
  5. Add point Subtract point
    โหลดเพลง mp3 (1 Point) June 9, 2010 at 5:08 am

    Great tutorial, Thank so much.

    Flag as inappropriate
  6. Add point Subtract point
    โหลดเพลงฟรี (1 Point) May 29, 2010 at 2:34 pm

    Great tutorial, Thank so much.

    Flag as inappropriate
  7. Add point Subtract point
    Grün Weiss (1 Point) May 4, 2010 at 4:29 am

    perfect details for this, good

    Flag as inappropriate
  8. Add point Subtract point

    I’m new to this so I’m wondering, why not make these vector shapes in Illustrator first and then use them in Photoshop?

    Flag as inappropriate
  9. Add point Subtract point
    โหลดเพลง (1 Point) March 29, 2010 at 10:24 am

    Thank you for your information.

    Flag as inappropriate
  10. Add point Subtract point
    John Kastelein (1 Point) March 19, 2010 at 8:33 am

    thanks!! i was able to make some sweet stuff because of this. what a great site you made.

    Flag as inappropriate
  11. Add point Subtract point
    John Kastelein (1 Point) March 19, 2010 at 8:32 am

    thanks a lot for this. I was able to make some sweet designs…

    Flag as inappropriate
  12. Add point Subtract point
    ฟังเพลง (1 Point) February 1, 2010 at 11:11 pm

    wow thanks so much.150

    Flag as inappropriate
  13. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) February 1, 2010 at 1:14 am

    wow thanks so much.145

    Flag as inappropriate
  14. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) January 30, 2010 at 8:21 am

    wow Cool tip thank for sharing.

    Flag as inappropriate
  15. Add point Subtract point
    GunniPrests (2 Points) December 8, 2009 at 11:27 am

    I’m also having trouble with subtracting with the marquee tool. It’s simply not doing what it should do… any ideas?

    Flag as inappropriate
  16. Add point Subtract point

    You know I had about 20 tabs open with various PS tutorials and Blender tutorials open looking for something interesting, I came to this one and thought “wow this is very well explained, and creative, Yay, I’ve found another site thats as good as tutorial 9″ To my dismay when i scrolled up to see big Tutorial 9 text in the preview of the finished design… I was really looking forward to finding another tutorial site that has tutorials that are as easy to follow and informative as the ones on here.

    Flag as inappropriate
  17. Add point Subtract point
    PSDDude (1 Point) December 2, 2009 at 7:13 am

    This tutorial was very useful for me….especially the drawing vector technique !
    Thank you!

    Flag as inappropriate
  18. Add point Subtract point

    Good tutorial, required much better designing

    Flag as inappropriate
  19. Add point Subtract point

    great tut,thank you so much!

    Flag as inappropriate
  20. Add point Subtract point
    RIchie (1 Point) October 1, 2009 at 1:01 pm

    Amazing tutorial.This really made my day. The pen is really mightier than the sword, no doubt… lol

    Flag as inappropriate
  21. Add point Subtract point
    Koji@ ebook cover software (1 Point) September 20, 2009 at 9:16 am

    Very nice Post! Really love it your post! thank you very much for your Information

    Flag as inappropriate
  22. Add point Subtract point

    Hey guys, I’m having a hard time with thoose curves cause I always get like little spots left open…

    can anyone help ?

    Flag as inappropriate
  23. Add point Subtract point
    peterbalonier (2 Points) August 18, 2009 at 11:54 am

    mh, I’m having problems with the inner curves. I use CS4 on a Mac, and I don’t seem to have the “Subtract from Shape Area” thing in my Option Bar. Can anyone help?

    Flag as inappropriate
  24. Add point Subtract point
    Martin Marriott (1 Point) August 17, 2009 at 8:14 am

    Good tutorial, but I got stuck when drawing the ellipses to detract from the shape. Nothing happens at this point – and I don’t have “Subtract from shape area” on my PS. ‘Subtract from selection’ (which I do have) doesnt work.
    How do I detract from the corners?


    Flag as inappropriate
  25. Add point Subtract point
    jeprie (1 Point) August 4, 2009 at 8:35 pm

    Thanx for the tuts. I’ve also created similar tutorial but using layer style stroke. Not as accurate as yours but easy enough for most beginer.

    Flag as inappropriate
  26. Add point Subtract point
    Columbus Web Design (1 Point) July 19, 2009 at 5:12 am

    Very nice tutorial. Making smooth curved lines has got to be one of the hardest things to achieve in PS. Thanks!

    Flag as inappropriate
  27. Add point Subtract point
    CgBaran Tuts (1 Point) May 10, 2009 at 5:19 am

    Great tutorial very useful thanks

    Flag as inappropriate
  28. Add point Subtract point
    huwaw69 (1 Point) May 3, 2009 at 4:25 am

    Wow this is quite hard to make… but very great design…

    Flag as inappropriate
  29. Add point Subtract point
    jovert (1 Point) April 30, 2009 at 2:39 am

    helo…i really enjoy your tutorials,it’s nice and challenging…
    specially when i use the pen tool, its too hard to use but anyway i’ve discovered lot of things when it comes to photoshop….i even made nice poster of my girlfriend..

    Flag as inappropriate
  30. Add point Subtract point
    miguel (1 Point) March 23, 2009 at 10:50 am

    hey i absolutely love this design but unfortunately i can’t recreate it since my i’m using the adobe photoshop elements 6.0, which apparently has no pen tool. how can i recreate this design with the tools available on elements 6.0? really hope you can help!


    Flag as inappropriate
  31. Add point Subtract point

    I would just like to start off with a BIG thank you for this tutorial. I LOVE this style, and am so glad for such an easy to follow tutorial!

    However, I have a couple of concerns/discrepencies if you will:

    1) I have noticed that instead of using the Elipsse Marquee Tool, you can create the same concave effect by simply clicking and dragging the pen tool (although it requires actually looking at it and seeing if it is correct as its parallel). I’m just wondering, would you recommend doing it like that instead of using the Marquee tool? (Sorry for the vague description, I’m not good at describing my actions)

    2) In your final image, it is a lot more complicated than the one in the tutorial. In the tutorial image, there is only a requirement of straight lines and 45 degree lines for the curve. In your image, however, there is some complicated angles that I could NOT figure out how to do. My solution was to simply do the shapes all with straight lines and 45 degree angles, and then rotate it to my liking to make it seem more complex. HOWEVER, I noticed a problem with this. The actual shapes, after the rotation, do not meet the end of the page. It would then require to alongate the shapes, which I deemed difficult because I could not simply use the 45 degree angles again, and the grids no longer matched up to my image. Do you have any solutions/tips/suggestions for this?

    Thank you so much, again, for this tutorial and thank you for reading this comment. HOPEFULLY it makes sense and you can help me out =]

    Flag as inappropriate
  32. Add point Subtract point

    what font was used in end result ??

    Flag as inappropriate
  33. Add point Subtract point
    RoninCZ (1 Point) October 27, 2008 at 9:56 am

    This is so cool and helpful, here is my work:
    hope you’ll like it and thanks for this great tutorial!

    Flag as inappropriate
  34. Add point Subtract point

    You leave out to many steps I got lost on the first part.

    Flag as inappropriate
  35. Add point Subtract point
    Will Haynes (1 Point) September 26, 2008 at 8:52 pm

    Bookmarked this ages ago, and ever since I’ve been looking for an awesome place to use it.

    Finally found the perfect place in a website design for it!

    Thanks a lot man, great tutorial.

    Flag as inappropriate
  36. Add point Subtract point
    Mr. Boom (1 Point) August 20, 2008 at 12:13 am

    Really good stuff, I learnt alot. Thanks!

    Flag as inappropriate
  37. Add point Subtract point

    @300: Looks great, though that technique is for Illustrator, while the one shown here is for Photoshop.

    @SK: Having PS7 is not a problem. I can’t think of why it would delete the whole thing… Check to make sure you’re not drawing paths maybe?

    @Andrew Hucks: It could be the spacing of your lines – what happens if you try drawing it on bottom? Otherwise, if you upload an image, I can probably help you out a bit more.

    Flag as inappropriate
  38. Add point Subtract point
    Andrew Hucks (1 Point) July 10, 2008 at 2:32 pm

    When I use the Pen Tool to make the white line on the top, it looks really awkward. I can’t get it to curve on the top correctly.

    Flag as inappropriate
  39. Add point Subtract point

    when i draw the circle with the subract i cant drag it or delete it without deleting the whole thing i got ps7 is that a problem

    Flag as inappropriate
  40. Add point Subtract point

    Hi, i need help here. sry if im asking such a dumb question :D

    im stuck when creating inner curves, the path not even change and still have marque tool ( doesnt change anything )

    If anyone can help me here, im really glad.


    Flag as inappropriate
  41. Add point Subtract point

    That’s a fast an easy way to do it in Illustrator mantis!

    Flag as inappropriate
  42. Add point Subtract point
    mantis25 (1 Point) June 25, 2008 at 10:12 pm

    Doing this in illustrator is like 500% easier. I admire your attention to detail, but this is really a job better suited for illustrator.

    check it:

    Flag as inappropriate
  43. Add point Subtract point
    Jana (2 Points) June 15, 2008 at 9:52 am

    Thanx for this tutorial. At least now I understand the pen tool a little bit better :)

    Just a curious question – why did you need to make inner curves using the Ellipse Shape Tool? I tried different kind of curves after I followed this tutorial and you can perfectly well make them just dragging the handles with out the Ellipse.

    Flag as inappropriate
  44. Add point Subtract point

    @ DigitalDisasta – Both of those methods work great, but there actually is a good reason for why I chose this method (which I oddly enough didn’t really touch on in the tutorial).

    As you can see in the final results displayed in the article, I really love playing with the angles of my lines. When you stroke (or use another means of raster graphics), quality is lost during transformations of any kind. The method I chose is very simple to resize, rotate, and edit (color/gradients/layer effects) without ever losing quality.

    Both methods have their perks, and you’re definitely right that the way you mentioned can be much easier to edit in some cases.

    Flag as inappropriate
  45. Add point Subtract point
    DigitalDisasta (1 Point) June 13, 2008 at 1:28 pm

    Instead of making shapes with the pen tool, why not just use the Path tool and stroke them with a a brush? Or you can use the Pen tool and Stroke with that. This way it a lot easier to edit if you have to and you don’t have to cut out with circles.

    Flag as inappropriate
  46. Add point Subtract point
    Website Design (1 Point) June 10, 2008 at 11:16 pm

    Awesome tutorial! Can’t wait to apply it to something lol.

    Flag as inappropriate
  47. Add point Subtract point
    Callum Sullivan (1 Point) June 6, 2008 at 5:18 pm

    A very thorough tutorial, I can see myself using this style in the future.

    Thanks. :)

    Flag as inappropriate
  48. Add point Subtract point
    gkriv (1 Point) June 4, 2008 at 5:54 am

    Great tutorial on creating curves. Using Grid and Snap makes the process much easier. Thanks David.

    Flag as inappropriate
  49. Add point Subtract point
    Stacy (1 Point) June 3, 2008 at 5:56 pm

    I’m catching up on some tutorials that I’ve been saving… and I’m just now getting around to this one. Wow! I saw requests in the forums for theory and method, and you definitely delivered both in this tutorial! Great job, David!

    Flag as inappropriate
  50. Add point Subtract point
    Elizabeth (1 Point) May 31, 2008 at 7:08 pm

    How excellent! I’m using this tutorial for a graduation invite. Having fun with it so far!

    Flag as inappropriate
  51. Add point Subtract point
    Timothy (1 Point) May 17, 2008 at 6:34 am

    nice tutorial dude, really like the retro style :) and i just love the red color scheme!

    Flag as inappropriate
  52. Add point Subtract point

    Thanks everyone!

    @ Cpt. Crayon – That’s a great idea ;) However, if you’re working with Photoshop alone, then this is probably the easiest way to get this sort of effect. Thanks for the suggestion!

    Flag as inappropriate
  53. Add point Subtract point
    Cpt. Crayon (1 Point) May 12, 2008 at 12:16 am

    Hey, good tutorial. I dig the retro feel…I’m wondering if a lot of the leg work could be done in illustrator and imported into Photoshop. Just a suggestion.

    Flag as inappropriate
  54. Add point Subtract point
    Pedros (1 Point) May 11, 2008 at 6:21 am

    David, thank you so much! ehehe… i thought that was the trick, but i got confused with the diagram :)

    Amazing tutorial :)

    Flag as inappropriate
  55. Add point Subtract point
    Bart (1 Point) May 11, 2008 at 5:52 am

    Wow a very nice tutorial, I like the outcome! This mide come in handy some day, thanks!


    Flag as inappropriate
  56. Add point Subtract point
    Andy (1 Point) May 10, 2008 at 6:36 pm

    Fantastic Tutorial!

    It was quick and simple yet the result looks fantastic. Thanks Tutorial9 :D!

    Flag as inappropriate
  57. Add point Subtract point

    You’re very welcome juniorvga =)

    On another note, the PSD is up for download now just so you all know!

    Flag as inappropriate
  58. Add point Subtract point
    juniorvga (1 Point) May 10, 2008 at 5:43 pm

    Thanks, this is amazing!!!

    Flag as inappropriate
  59. Add point Subtract point

    Thanks a bunch folks!

    @ Pedros – Hey mate, I can see how that step may have been confusing. I went back and revised it a bit (look for the long, bold part under the diagram).

    Basically, you CAN create the second shape the exact same way you make the first one, but you might notice some unwanted space between the two shapes if you do this. To fix this, I put my second shape layers (and any other lines afterwards) UNDERNEATH the original line, and then have the layers below overlap with the first shape.

    I’ll get a PSD up in a minute so you can see for yourself!

    Flag as inappropriate
  60. Add point Subtract point
    Pedros (1 Point) May 10, 2008 at 12:29 pm

    Very Very Very good!

    I just didn’t get the last step… were we can get “sloppy” with the points… i don’t understand what we must to? I can get that effect but by creating a new line, just like the first… but for what i understood, the way you explain is very simple… but i think it’s not very well explain…

    can anyone help me understanding what’s the process for the second line?

    Flag as inappropriate
  61. Add point Subtract point

    Absolutely brilliant! The bullets at the end are very helpful, you should include them more often.

    I love the outcome.

    Flag as inappropriate