Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Retro Futurism At Its Best: Designs and Tutorials

Concepts of the future for the way we live our lives have been expressed in forms of art, design, movies, comics, and even cartoons. For many decades before man even landed on the Moon, people have been fascinated with space and the endless possibilities it could bring. The future is not only about being in space, though it has a major influence, it lies within your innovative minds and skills as the designer and artist. So, whether you go back into the past or here in the present, the future is all that we envision.

It wasn’t too many years ago when amazing tools such as 3ds Max, Adobe Illustrator, Photoshop, or even Corel Draw weren’t around. Illustrations were drawn by hand using chalks, colored pencils, paints, and pens. With typography, you could find artists/ designers also using fountain pens or calligraphy pens with a large variety of nibs, along with bottles of colored ink. Even today, you will still find designers and architects who use tools such as the t-square, triangular scales, triangle, french curve, and of course, your basic compass.

You may also be interested in the following related posts:

Times do change and so do the concepts of what to expect in the future. We would like to share with you a collection of retro futuristic designs and tutorials that will inspire you for your future creations. If you like the designs, please take the time to visit the sites of the artist/ designer by clicking on the illustration or title.

Beautiful Retro Futuristic Artworks Link

Omega Code6

Screenshot7

Retrofuturistic cityscape8

Screenshot9

Screenshot10

Screenshot11

USS – a portfolio of probabilities

Screenshot12

Screenshot13

Screenshot14

Screenshot15

Retro Futurism II16

Screenshot17

Screenshot18

Geometry Serie19

Screenshot20

Vintage DHARMA ads21
Incredible vintage Dharma Initiative posters created by Adam Campbell.

Screenshot22

The Apple Store That Almost Was23
Before there was the Apple Store that we know and love today, there was the Apple Cafe — well, almost. On November 12, 1996, Apple announced plans to open a chain of cybercafes around the globe. State-of-the-art, even by today’s standards, Apple Cafes promised health-conscious food (served up via a high-tech ordering system), video conferencing with neighboring diners, and on-demand access of movies and music videos. A screenshot from an old promo gives us a few clues as to how some of this might have worked.

Screenshot24

Screenshot25

Play26

Screenshot27

Screenshot28

Zac Blake29

Screenshot30

Andy Gilmore31

Screenshot32

Future Cities33

future cities34

Master Pyramid35

master pyramid36

Flux37

future cities38

Kitchen39

future cities40

Retro Futuristic City41

retro futuristic city 1042

Sexy Robot43

44

Concepts45

concepts 1046

Retro Future Cars47

retro magazines 1048

Bridging The Gap49

bohn 4750

Frank R. Paul City51

frank r paul city52

Das Neue Universum53

das neue universum54

Scripto Satellite55

scripto satellite56

Tocame57

tocame58

Triobelisk59

triobelisk 260

triobelisk61

Bloom62

bloom

“P” is for Possibilities of the Future

P for possibilities63

Striking Spaceship Squadron

striking spaceship squadron

Popular Electronics 195864

striking spaceship squadron65

striking spaceship squadron66

Exterior Double Cylinder Colony67

exterior double cylinder colony68

cylinder colony69

space settlement 1070

Rocketeer Adventure Magazine71

rocketeer adventure magazine72

Bohn 194773

bohn 4774

Futuristic Train

futuristic train75

Retro Futurism76

retro futurismus flickr 1077

Le Femme78

le femme79

Robert Rock80

robert rock81

Space Race82

space race 1083

If I Only Had Wings, I’d Fly84

if i only had wings 1085

Retro Futurism Artworks by Klaus Bürgle86

Screenshot87

Screenshot88

Screenshot89

Retro Futurism90

retro futurism 4091

Gates to Elysium92

tiager 1093

The Jetson’s94

Screenshot95

Tutorials Link

Futuristic Athlete design and tutorial96
Using multiple layers and brushes, this tutorial will show you how to create a futuristic athlete.

futuristic athlete tutorial97

Creating The New Retro98
Graphic designer James White shows you how to give retro-style graphics your own modern-day spin.

creating a new retro tutorial99

Speed Lightning Effect
This tutorial will show you how to manipulate natural lighting to fill a motion filled scene. Use masks to blend the effect over a car image to make the car appear to be in motion.

speed lightning effect tutorial

Design a retro futurism space scene100
In this tutorial, you will learn how to design a retro-futuristic space scene, using a variety of lighting effects and photo manipulation.

Screenshot101

How to Make Retro Futuristic Curves in 10 Steps102
In this tutorial, you will learn how to achieve the space like scenery with the glowing lines. Using Illustrator and Photoshop you?ll learn how to add subtle effects using textures and different blending modes.

retro futuristic tutorial 10103

Futuristic Abstract Tutorial104
In this tutorial, you will learn how to create a futuristic abstract poster design using layer styles, shapes and ‘space’ effects.

futuristic abstract tutorial105

Steampunk Style Illustration106
In this tutorial, you will be using light sources, shadows, and image grading to go back in time with this design.

steampunk style illustration107

Further Resources Link


Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/08/if-famous-painters-were-web-designers/
  2. 2 https://www.smashingmagazine.com/2010/01/design-discussion-james-white-ask-expert/
  3. 3 https://www.smashingmagazine.com/2008/04/celebration-of-vintage-and-retro-design/
  4. 4 https://www.smashingmagazine.com/2008/07/pop-art-is-alive-classics-and-modern-artworks/
  5. 5 https://www.smashingmagazine.com/learning-from-the-past-design-legacy-art/
  6. 6 http://www.behance.net/Gallery/Omega-code/204219
  7. 7 http://www.behance.net/Gallery/Omega-code/204219
  8. 8 http://www.behance.net/Gallery/Retro/97696
  9. 9 http://www.behance.net/Gallery/Retro/97696
  10. 10 http://www.behance.net/Gallery/Retro/97696
  11. 11 http://www.behance.net/Gallery/Retro/97696
  12. 12 http://www.flickr.com/photos/mstoll/2214591354/sizes/l/in/set-72157603779992640/
  13. 13 http://www.flickr.com/photos/mstoll/2213799099/sizes/l/in/set-72157603779992640/
  14. 14 http://www.flickr.com/photos/mstoll/2213796577/sizes/l/in/set-72157603779992640/
  15. 15 http://www.flickr.com/photos/mstoll/2214595358/sizes/l/in/set-72157603779992640/
  16. 16 http://www.behance.net/Gallery/Retro-Futurism-II/143517
  17. 17 http://seaneill.com/wp-content/uploads/images/articles/botw/3/retro.jpg
  18. 18 http://seaneill.com/wp-content/uploads/images/articles/botw/3/retro.jpg
  19. 19 http://www.behance.net/Gallery/Geometry-Serie/111348
  20. 20 http://www.behance.net/Gallery/Geometry-Serie/111348
  21. 21 http://www.flickr.com/photos/hotmeteor/sets/72157615214095434/detail/
  22. 22 http://www.flickr.com/photos/hotmeteor/3355254082/in/set-72157615214095434/
  23. 23 http://blog.guifx.com/2009/06/03/the-apple-store-that-almost-was/
  24. 24 http://blog.guifx.com/2009/06/03/the-apple-store-that-almost-was/
  25. 25 http://blog.guifx.com/2009/06/03/the-apple-store-that-almost-was/
  26. 26 http://www.behance.net/Gallery/PLAY/61789
  27. 27 http://www.behance.net/Gallery/PLAY/61789
  28. 28 http://www.behance.net/Gallery/PLAY/61789
  29. 29 http://www.behance.net/Gallery/Zac-Blake/91312
  30. 30 http://www.behance.net/Gallery/Zac-Blake/91312
  31. 31 http://blog.iso50.com/2009/06/03/new-work-from-andy-gilmore/
  32. 32 http://blog.iso50.com/2009/06/03/new-work-from-andy-gilmore/
  33. 33 http://www.flickr.com/photos/wiless/2394285685/
  34. 34 http://www.flickr.com/photos/wiless/2394285685/
  35. 35 http://www.behance.net/Gallery/Retro-Futurism/96557
  36. 36 http://www.behance.net/Gallery/Retro-Futurism/96557
  37. 37 http://www.behance.net/Gallery/Flux-Magazine/193641
  38. 38 http://www.behance.net/Gallery/Flux-Magazine/193641
  39. 39 http://community.livejournal.com/retro_futurism/211857.html
  40. 40 http://community.livejournal.com/retro_futurism/211857.html
  41. 41 http://www.webomator.com/grafx2/blog/retrofuturistic_cityB04a.jpg
  42. 42 http://www.webomator.com/grafx2/blog/retrofuturistic_cityB04a.jpg
  43. 43 http://www.behance.net/Gallery/Hajime-Sorayama-Tribute/161565
  44. 44 http://www.behance.net/Gallery/Hajime-Sorayama-Tribute/161565
  45. 45 http://www.flickr.com/photos/grainspace/2417520927/in/pool-598127@N22
  46. 46 http://www.flickr.com/photos/grainspace/2417520927/in/pool-598127@N22
  47. 47 http://www.flickr.com/photos/wiless/2402165986/in/set-72157604463241317
  48. 48 http://www.flickr.com/photos/wiless/2402165986/in/set-72157604463241317
  49. 49 http://informingdiatribes.wordmess.net/20081221/retro-futurism-of-klaus-burgle/
  50. 50 http://informingdiatribes.wordmess.net/20081221/retro-futurism-of-klaus-burgle/
  51. 51 http://www.flickr.com/photos/avi_abrams/228965763/
  52. 52 http://www.flickr.com/photos/avi_abrams/228965763/
  53. 53 http://www.retro-futurismus.de/buergle_verkehr1.htm
  54. 54 http://www.retro-futurismus.de/buergle_verkehr1.htm
  55. 55 http://www.plan59.com/av/av051.htm
  56. 56 http://www.plan59.com/av/av051.htm
  57. 57 http://www.behance.net/Gallery/December--February/185096
  58. 58 http://www.behance.net/Gallery/December--February/185096
  59. 59 http://www.behance.net/Gallery/Triobelisk/110599
  60. 60 http://www.behance.net/Gallery/Triobelisk/110599
  61. 61 http://www.behance.net/Gallery/Triobelisk/110599
  62. 62 http://www.saadart.com
  63. 63 http://www.behance.net/Gallery/August--December-2008/154828
  64. 64 http://blog.modernmechanix.com/issue/?magname=PopularElectronics&magdate=12-1958
  65. 65 http://blog.modernmechanix.com/issue/?magname=PopularElectronics&magdate=12-1958
  66. 66 http://blog.modernmechanix.com/issue/?magname=PopularScience&magdate=8-1951
  67. 67 http://www.nas.nasa.gov/About/Education/SpaceSettlement/70sArt/AC75-1085f.jpeg
  68. 68 http://www.nas.nasa.gov/About/Education/SpaceSettlement/70sArt/AC75-1085f.jpeg
  69. 69 http://www.nas.nasa.gov/About/Education/SpaceSettlement/70sArt/AC75-1086f.jpeg
  70. 70 http://www.nas.nasa.gov/About/Education/SpaceSettlement/70sArt/AC75-1086-1f.jpeg
  71. 71 http://www.tomheroes.com/images7/COMIC_rocketeer_adventure_magazine_01.jpg
  72. 72 http://www.tomheroes.com/images7/COMIC_rocketeer_adventure_magazine_01.jpg
  73. 73 http://farm1.static.flickr.com/122/292055891_9bb3c7cfd0_o.jpg
  74. 74 http://farm1.static.flickr.com/122/292055891_9bb3c7cfd0_o.jpg
  75. 75 http://i249.photobucket.com/albums/gg211/Ferx_images/Futuristic_Train_FPS_GFX.jpg
  76. 76 http://www.flickr.com/photos/modular/50052835/
  77. 77 http://www.flickr.com/photos/modular/50052835/
  78. 78 http://www.behance.net/Gallery/The-New-Retro/87403
  79. 79 http://www.behance.net/Gallery/The-New-Retro/87403
  80. 80 http://www.behance.net/Gallery/The-New-Retro/87403
  81. 81 http://www.behance.net/Gallery/The-New-Retro/87403
  82. 82 http://www.flickr.com/photos/bbdh/281131843/sizes/o/
  83. 83 http://www.flickr.com/photos/bbdh/281131843/sizes/o/
  84. 84 http://shop.webomator.com/retropolis.shtml
  85. 85 http://shop.webomator.com/retropolis.shtml
  86. 86 http://www.retro-futurismus.de/buergle_verkehr1.htm
  87. 87 http://www.retro-futurismus.de/buergle_verkehr1.htm
  88. 88 http://www.retro-futurismus.de/buergle_verkehr1.htm
  89. 89 http://www.retro-futurismus.de/buergle.htm
  90. 90 http://www.behance.net/Gallery/Retro-Futurism/96557
  91. 91 http://www.behance.net/Gallery/Retro-Futurism/96557
  92. 92 http://tigaer.deviantart.com/art/GATES-TO-ELYSIUM-124004270
  93. 93 http://tigaer.deviantart.com/art/GATES-TO-ELYSIUM-124004270
  94. 94 http://www.jandofabrics.com/newsletters/2008/08/meet-george-jetson-at-j.html
  95. 95 http://www.jandofabrics.com/newsletters/uploaded_images/The_Jetsons-782899.jpg
  96. 96 http://www.webdesign.org/web/photoshop/photo-editing/design-a-futuristic-athlete-graphic.17226.html
  97. 97 http://www.webdesign.org/web/photoshop/photo-editing/design-a-futuristic-athlete-graphic.17226.html
  98. 98 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/creating_the_new_retro
  99. 99 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/creating_the_new_retro
  100. 100 http://psdfan.com/tutorials/designing/design-a-retro-futurism-space-scene/
  101. 101 http://psdfan.com/tutorials/designing/design-a-retro-futurism-space-scene/
  102. 102 http://www.fudgegraphics.com/2008/12/tutorial-how-to-make-retro-futuristic-curves-in-10-steps/
  103. 103 http://www.fudgegraphics.com/2008/12/tutorial-how-to-make-retro-futuristic-curves-in-10-steps/
  104. 104 http://bestphotoshoptutorials.net/2009/05/19/design-a-futuristic-abstract-poster/
  105. 105 http://bestphotoshoptutorials.net/2009/05/19/design-a-futuristic-abstract-poster/
  106. 106
  107. 107 http://psd.tutsplus.com/tutorials/photo-effects-tutorials/how-to-create-a-steampunk-style-illustration-in-photoshop/
  108. 108 https://www.smashingmagazine.com/2008/10/12/50-beautiful-movie-posters/
  109. 109 https://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
  110. 110 https://www.smashingmagazine.com/2008/10/14/30-beautiful-vintageretro-photoshop-tutorials/
  111. 111 https://www.smashingmagazine.com/2009/03/04/50-stunning-photoshop-text-effect-tutorials/
  112. 112 http://wellmedicated.com/inspiration/45-vintage-space-age-illustrations/
  113. 113 http://www.flickr.com/groups/intheyear2000/
  114. 114 http://weburbanist.com/2009/05/11/future-past-173-radical-retrofuturistic-directions-in-design-technology/
  115. 115 http://community.livejournal.com/retro_futurism/

↑ Back to top Tweet itShare on Facebook

  1. 1

    The best retro-futurist design I’ve seen lately was the entire Fallout 3 video game.

    8
  2. 2

    I like many of the design. I really miss the older SciFi novel book covers.

    1
  3. 3

    Nice Inspirational article sharon!! Now if only a lot of the older eastern block science fiction movies would become more readily available I would be happy.

    Also found this link which holds more great example of Retro Futuristic Artwork. http://www.darkroastedblend.com/2007/11/retro-future-to-stars.html

    DKumar M.
    @instantshift

    1
  4. 4

    Excellent! My fav is the Dharma Initiative poster. Good one :)

    0
  5. 5

    Very nice… rare to see a theme like this. The Fudgegraphics tutorial looks great.

    0
  6. 6

    Darwin Santos

    June 8, 2009 5:56 pm

    Awesome. all of this reminds me back when i was a kid, the transformers were supposed to arrive in the year 2005 and it seemed so far back then, i even remember having arguments with my friends about which brand of car will start selling flying cars first. Great article.

    0
  7. 7

    Trevor Henry

    June 8, 2009 6:20 pm

    As much as I love all of Scott Hansen’s work (and I definitely love it), that’s Andy Gilmore you’ve posted. Scott featured him in a blog post a few days ago.

    The Dharma ads are absolutely awesome though.

    0
  8. 8

    Anwar Bendaoud Andersson

    June 8, 2009 6:20 pm

    I agree with the above comment regarding Fallout 3. That game is simply amazing in terms of both interface design and the graphics. Well deserving of a mention.

    1
  9. 9

    Fantastic! Really retro futurism,.. great post! Thanks!

    0
  10. 10

    guys, this is best SM article ever! I love s-fi and retro futurism.. and this is my subject for my next school project. You read in my mind, again :)

    0
  11. 11

    Lichtathlet

    June 8, 2009 11:05 pm

    Amazing!

    0
  12. 12

    wow…amazing !!!

    0
  13. 13

    Line of Design

    June 8, 2009 11:42 pm

    Very inspiring collection… :)
    Thanks

    0
  14. 14

    Really enjoyed this, one of my favourite features yet! Cheers!

    0
  15. 15

    Great collection. Also you could look more artworks here: http://www.splashnology.com/blog/inspiration/44.html

    Thanks!

    0
  16. 16

    Tanaka13 - Créations du Net

    June 9, 2009 12:32 am

    very nice collection!

    0
  17. 17

    + 1 for Fallout (for all the series).

    0
  18. 18

    I remember the sexy cyber girl from the 80’s – I’m sure it was used in a computer magazine @ the time, “Amstrad Action”..

    This post makes me think of the film “Gattaca” Futurism meets Art Deco.

    0
  19. 19

    Isnt it Robot Rock and not Robert Rock ;)

    0
  20. 20

    Holy smokes it’s like I’m growing up again! Nostalgia-goggles are on and they are thick and they heavily obscure my vision. :’3

    0
  21. 21

    Nice selection!
    What about Bioshock ?

    0
  22. 22

    thank u guys , u made my day!!! i f£$%ing love retro futurism!!!!

    0
  23. 23

    Gerd Wippich

    June 9, 2009 1:54 am

    Cool stuff. I want a robot for christmas.

    0
  24. 24

    how cool is this, very~! Amazing art and emotion…Thanks very much for this article, is really inspired for me.

    0
  25. 25

    Tho I’m a big follower of Scott Hansen I have to say that his entry on this list is not his… It’s on a post about Andy Gilmore. I think you should change itl.

    0
  26. 26

    Genial!!!

    0
  27. 27

    so damn inspiring!
    More plz!

    0
  28. 28

    Cathedral Graphic Design

    June 9, 2009 4:58 am

    Dharma Initiative poster wins… I wonder if it’s possible to acquire a print of that! Nice post, some interesting stuff in there, thanks Smashing!

    0
  29. 29

    gamma-normids

    June 9, 2009 5:11 am

    OH, the Jetsons :D I looooved that movie when I was a kid.

    The sexy robot poster looks so familiar, but can’t remember why.

    0
  30. 30

    Soooo inspring!

    0
  31. 31

    Jehzeel Laurente

    June 9, 2009 2:49 pm

    Wow! I love the Dharma ad. I’m a big fan of Dharma Initiative since I fell in love with LOST. Weeeeeeeee!

    1
  32. 32

    Robin Cannon

    June 9, 2009 6:42 am

    Adore this collection. It’s a genre that I love, and it has great design potential. What’s more, it’s a genuinely fun genre to design in. I think this, along with steampunk, are my favorite kind of designs to play with (retro futuristic tends to work better in a web medium).

    0
  33. 33

    Dusan Vlahovic

    June 9, 2009 8:15 am

    Love me some Retro Futurism! Thanks!

    0
  34. 34

    COOL STUFF MAN!

    You should def check this out… Called an
    electronic cigarette Tobacco companies are trying to keep it shush shush….

    0
  35. 35

    Tigaer (author of Gates to Elysium) has some really great work on deviantArt which is similar.

    0
  36. 36

    A very nice collection. I see quite a few Syd Mead works throughout. Every artist can learn much from this man.

    0
  37. 37

    I love retro! Good job..

    0
  38. 38

    Ashely Adams : Sticker Printing

    June 10, 2009 3:37 am

    Science meets art. What a nice walk down memory lane. I felt a sudden rush of nostalgia to see all those lovely retro posts. I remember reading that book “Future Cities” too sometime in my childhood. It came in a set of 3, the other titles being, (as far as I remember), “Robots” and “Future Travel”. I used to adore them.

    0
  39. 39

    Check this designer out! His work is stunning and pure retro futurism
    http://www.myspace.com/elmorales

    0
  40. 40

    I really love this post. I’m really into Retro Futurism as well right now and have been inspired greatly by James White, Chuck Anderson and the great up-and-coming Sakke Soini.

    My approach is a little bit different than theres, but a combination of each. I try and kick out a new project each month, some are good, some aren’t: http://www.behance.net/peternudo

    0
  41. 41

    It’s always nice to see one of my early books onscreen!

    I conceived ‘Future Cities’ as part of a ‘World of the Future’ trilogy, with my sadly late collaborator, Ken Gatland, who had been President of the renowned BIS British Interplanetary Society.

    The illustrator of this cover, the talented Brian Lewis, is also gone – he painted covers for the scifi mag ‘New Worlds’ (1960s-era) for several years.

    Best wishes to all you futures enthusiasts out there.

    0
  42. 42

    The funny thing is that when those drawings were made people just knew that we’d be in flying cars and living on the moon by now. 2009 just “sounded” futuristic in the 60’s. Meanwhile one of the biggest advancements in the world is something no one saw coming: Twitter.

    0
  43. 43

    I always love a little bit of inspiration in my day!

    0
  44. 44

    i think that this is another really nice example! http://jo-nic.deviantart.com/gallery/#/d2rszpi anyway great pictures! cheers, jonathan

    0
  45. 45

    “The Apple Store That Almost Was” the first picture…. have you seen the T4 terminal airport of Barajas in Madrid?

    0
  46. 46

    Wow, these are amazing! I absolutely love the retrofuturistic cityscape artwork, just outstanding.

    0

↑ Back to top