Tutorial: How to make retro/futuristic curves in 10 Steps

As promised when releasing the December 08 Calendar Wallpaper I’ve written a tutorial on how to make it. This is my first ever tutorial and I hope you’ll like it. If there’s anything which is not clear please ask. I’m here to help. In order to achieve the space like scenery with the glowing lines we will use Illustrator and Photoshop. You’ll learn how to add subtle effects using textures and different blending modes. So here we go.

Step 1: Draw Lines in Illustrator

We’re starting off in Illustrator to draw the lines. Create a new document with the dimensions 1920×1200. The other settings don’t really matter since the vectors will be imported into Photoshop anyway. Draw a nice smooth curve with a 4px black stroke. Draw another curve, this time with a 1px black stroke.

screenshot-1

screenshot-2

Step 2: Blending the curves

Go to Object > Blend > Blend Options and set the Blending Steps to 12. Now select the two curves and hit Object > Blend > Make.

screenshot-3

REPEAT STEP 1 and 2 to make another set of curves. Play with the settings until you’re happy with the outcome.

Step 3: Importing the curves into Photoshop

Create a new document in Photoshop. Make it 1920×1200 large and fill the background with a dark grey (I used #161616). Go to Illustrator and drag-and-drop the curves into your Photoshop document. There’s no need to expand the curves. Photoshop will do it for you.

Step 4: Applying Gradient and Glow Effect

Select one of the layers containing the curves and go to the Layer Style Menu. Start of with setting Fill to 0% (Blending Options: Custom). Apply the settings shown below. Don’t worry too much about the gradient colours at the moment. We will adjust the overall colour scheme of the design at a later step.

screenshot-4

Right-Click on the layer in the layers palette and choose “Copy Layer Style”. Select the second curves layer and select “Paste Layer Style”. Your image should look similar to the one below.

screenshot-5

Step 5: Copy the Curves + Composition

Select the first curves layer and copy it a couple times. Then move the individual layers like I did in the picture below. Group the layers.

screenshot-6

Repeat Step 5 with the second curves layer. As you can see I moved the around a bit to get a nicer composition.

screenshot-7

To get a smoother cut-off I decided to use a gradient layer mask (on the whole group). Set the gradient to black-to-white and apply it on the mask.

screenshot-8

Step 6: Clouds and Colours

Create a new layer on top of everyting. Make sure that Foreground and Background colours are set to Black and White respectively by pressing “D”. Go to Filter > Render > Clouds. Set the Blending Mode to Hue and enter the Layer Style menu. Go to the gradient option and select a colour scheme you like. Set the angle to 135 degrees and make sure to set the Blend Mode to Overlay.

screenshot-9

screenshot-10

Step 7: Add Textures

Open 2 concrete texures and place them on top of the Background layer. I used textures from the Free Urban Texture Pack. Set one blending mode to Multiply and the other to Overlay.

Step 8: Add Circles

Create a new layer and draw some different sized circles using the Ellipse Tool. Make sure to use the “Shape Layer” mode and select “Add to shape layer” from the menu. Hold down the Shift-key while drawing to get perfect circles.

screenshot-11

Step 9: Make Layer Masks

Cmd-Click on the circle layer  it in the layers palette to make a selection, then hide the layer. Now select the first Texture layer and hit the mask button. With your selection still intact go to Selection > Inverse. Activate the second Texture layer and hit the mask button again.

screenshot-12

screenshot-13

Step 10: Final Image and Tweaks

That’s all there is to making a wallpaper like the one for December 08. Add a bit of text if you want to. For other colour schemes you can always add a Hue Adjustment layer.

screenshot-14

screenshot-15

Written by Franz Jeitz

Franz Jeitz is a freelance designer and owner of Fudgegraphics. Originally from Luxembourg he now lives in London. Franz loves design, music and is a tea enthusiast. Follow him on Twitter.

Join the Discussion:

93 Awesome Responses so far
  1. I was wondering how you got some of those effects. Loving the Orange version I downloaded when you released them. Nice work, keep the calendars coming, I always get tons of comments on them (and I keep responding with, NO, I did not make it :)).

  2. That is so nice to hear :) Next time you can say: Yes I did this (with a little help from a friend)

  3. Great stuff Franz! I’m so glad you are writing some tutorials now! I love the techniques shown in this. Keep up the good work, I’m always impressed with how your blog is constantly improving.

    Andrew Houle´s last blog post..Freebie: MyInkBlog Snowflake Brushes

  4. thank you very much for the kind words Andrew. It means a lot to me.

  5. nice tutorial thans a lot..

    joyoge designers’ bookmark´s last blog post..Environmental Advertising inspiration

  6. Thanks Franz, love this one.

    Brandi Reeves´s last blog post..Artists Think Differently

  7. Never thought i could use the blend options like that. Nice one Franz :)

  8. thank you all for the comments. It makes me happy that you like the tutorial and that I was able to show you some new tricks and techniques.

  9. thanks, I haven’t used shapes much in PS, mostly AI, this is most helpful.

    ejane´s last blog post..hello 2009

  10. Hi!
    Just completed the Retro/Futuristic Curves tutorial, I enjoyed it thoroughly and am looking forward to working through your other tutorials.

    Thanks!
    Lisa T

  11. @Ejane: glad I could teach you something new.

    @Lisa: That is great. Why not showcase your result in the flickr group? http://www.flickr.com/groups/fudgegraphics

  12. I’ve always liked retro designs. thanks for sharing! bookmarked.

    projectautomatika´s last blog post..Video of the Day – 011909

  13. very good. thanks

    sivas resimleri´s last blog post..YÖRESEL YEMEKLER

  14. Florencia Lewkow April 6th, 2009

    Thank u so much!!

    Ha sido un sencillo pero creativo tutorial,
    es un gusto contactar con gente comparte su conocimiento sin recelo alguno..ojalá todos los diseñadores fueran así.

    Felicitaciones!

  15. Really helpful tutorial. Thanks!

  16. Cravinho June 8th, 2009

    Nice tut Man!

    i have a problem on photoshop, when i import the ribow the white background dont disapear… can u help?

    thx

  17. Good tutorial, but is there any way to do this in CorelDRAW, can you plese make samo tutorials for Corel, like this one.

    Regards,
    Majice

  18. @Cravinho: Have you only selected the curves or might you have selected a white background rectangle along with the lines? Possibly you’re using older versions of AI and PS which will always add a white background when importing into Photoshop.

  19. Great tutorial. PS was always problematic for lines and curves. Any more tuts of yours?

  20. Drag and drop the curves from AI to PS CS4 creates a SmartObject, not separate layers. Any clues?

  21. @Tim: You are right, when you drag & drop the curves into Photoshop they will be placed as a smart object. That’s how it is supposed to be. If you want to have each line on a separate layer you have to drag & drop them individually. For this tutorial that is not necessary though.

  22. Great tutorials. Simple and easy to follow. Hope to get more from u in the days to come.

  23. You are awesome !

  24. Finally i’ve found what I have been looking for! I’ve been searching the web for nearly 45 minutes to find thos out.

    You are a lifesaver. Many thanks.

  25. amazing tuto..thanks a lot bro

  26. I’ve worked with Illustrator for a while, but sadly, I seem to have skipped over most blending techniques. This is awesome, Brah’. Thanks!

  27. Not a bad result but the instructions are good.

  28. Great work..thanks…

  29. was really instructive

  30. Thanx nice 1 i m newly 2 know this….

  31. Álvaro Bassó August 17th, 2010

    Muchas gracias! it´s a great tutorial

  32. I cannot figure out how to make the curved lines. I tried the line tool and the pen tool and my lines are coming out straight. How do I manipulate the lines?

  33. @rhandell mitchell

    You can make 3 points with the pen tool and manipulate the anchor points, or use the pencil tool ( especially good with a drawing tablet ). Longtime fan of the Fudge!

  34. gud work…keep it up
    it really helped me :)

  35. hey i did dis in photoshop itself instead of illustrator….n it helped me a lot in ma photoshop project… thanx a lot m lookin forward fo many more tut…:)

  36. hey sir, i cant really understand when it get to photoshop, the lines became a full blown box, and not lines. what should i do w/ it?

  37. hey sir, i cant really understand when it get to photoshop, where should i put a gradient the lines became a full blown box, and not lines. what should i do w/ it?

  38. thank you for making an easy-to-understand tutorial.

  39. nice tutorial thans a lot..

  40. Hey im stuck on step 9 i dont get the cmd clicking and inversing and stuff im really confused and stuck, is there any way you could write it more in depth how to do that part?

  41. FABULOUS! Thanks so much! I learned a lot ;)

  42. I would like to consider the ability of thanking you for the professional advice I have often enjoyed going to your web site. I will probably be seeking forward to the actual commencement of my college research and the common prep would never have been complete without coming to your website. If I could be of any support to others, I would be glad to assist by means of what I have gained from here. Kosova Airlines

  43. This was an excellent tutorial! Thank you for sharing… You are very talented. I’m following you on Twitter now and I look forward to your future posts.

  44. Damian Salinas September 15th, 2013

    Thanks a lot for this tutorial. This rocks!

These Sites link here:

  1. Bookmarks for Diciembre 26th from 15:20 to 15:41 | FACIL TUTORIALES
  2. MyInkTrail: Best of the Web, December 2008 | My Ink Blog
  3. Added by a PAL to FAQ PAL
  4. Wordpress Blog Services - 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources
  5. 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources | Web2.0
  6. Bookmarks for Enero 20th from 17:19 to 18:55 | FACIL TUTORIALES
  7. Bookmarks for Enero 21st from 19:37 to 19:59 | FACIL TUTORIALES
  8. Bookmarks for Enero 24th from 01:00 to 01:44 | FACIL TUTORIALES
  9. 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results | Vandelay Design Blog
  10. Web Page Design For You » Blog Archive » 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results
  11. Bookmarks for Febrero 16th from 00:05 to 23:57 | FACIL TUTORIALES
  12. 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results | Web Design,Photoshop Tutorial,Design News
  13. w3feeds » Blog Archive » February - 2009 PART - 9 All latest news for web design ,development, open sources, techonoly and favorites
  14. 50 Amazing Photoshop Illustrator Tutorials For Photoshop Lovers – Part II - Photoshop Website - Tutorials,Brushes & more..
  15. 125+ Ultimate Round-Up of Illustrator Tutorials | Showcases | instantShift
  16. 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results | Design-Tut+
  17. The Best Photoshop Tutorials | Vandelay Design Blog
  18. Web Page Design For You » Blog Archive » Photoshop Tutorial Hall of Fame
  19. Photoshop Tutorial Hall of Fame « N3T.ir - Web Resources, Web Design News & Tips, Open Source
  20. Photoshop Tutorial Hall of Fame | Free Tutorial 4 All
  21. 20+ Tutorials using Vector and Raster | Design was here
  22. 25 Photoshop Illustrator Tutorials and Outstanding Results « Online Free Application Software Tips Tools Wallpapers
  23. ReaLMusti’nin Günlükleri » Blog Archive » En ?yi Photoshop Dersleri
  24. 20+ Photoshop Illustrator and Outstanding Results  | Free Tools And Wallpapers
  25. Tutorial for Hall of Fame | Free Tools And Wallpapers
  26. Retro Futurism At Its Best: Designs and Tutorials | Inspiration | Smashing Magazine
  27. Wordpress Blog Services - Retro Futurism At Its Best: Designs and Tutorials
  28. Nichtkunst » Blog Archive » Retro Futurism // Freiheit im MQ
  29. Retro Futurism At Its Best: Designs and Tutorials | Army-Men.us Blog
  30. E?itici Vektörler ve Raster kullanarak Cizim | Wallpapers - DandikSE.net
  31. 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources | Noupe
  32. ????? ???? ?????? ???? ???? ?? ?? { 60 ????? ?????? }
  33. 60 Photoshop Illustrator Tools and Tutorials » TemplateLite.com
  34. Wordpress Blog Services - 60 Photoshop Illustrator Tools and Tutorials
  35. 60 Photoshop Illustrator Tools and Tutorials | design box
  36. Photoshop Tutorial Hall of Fame | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money
  37. Photoshop Tutorial Hall of Fame :: Reflex Stock Photo Blog
  38. En ?yi Photoshop Dersleri « Hobi Evi Günlükleri
  39. Tutorials for Using Illustrator and Photoshop Together | Tutoreffic: Adobe Photoshop Tutorials | Photo Editing | Web Graphics | Adobe Illustrator Tutorials | After Effects | Fireworks
  40. En ?yi Photoshop Dersleri « Akl?ma Geldi!
  41. ????? Adobe Illustrator Tutorials | ???????? ???? ????
  42. Illustrator Tutorial #20 – Make Retro/Futuristic Curves In 10 Steps | Smartpress.com Blog
  43. Best Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources
  44. 185 Informative Illustrator Tutorials to make You a Better Designer - tripwire magazine
  45. 80+ Amazing and Useful Illustrator Tutorials for All Designers | Web and Graphic Design Blog
  46. How to Make Retro/Futuristic Curves in 10 Steps | TutorialMatrix.com
  47. 125+ Ultimate Illustrator Tutorials | DenzoMag
  48. T?ng h?p nh?ng bài h??ng d?n Illustrator hay nh?t… |
  49. 53 Amazing Photoshop Illustrator Tutorials For Photoshop Lovers – Part I – Photoshop Website - Tutorials,Brushes & more..

Comments are closed on this post.