Menu Search
Jump to the content X X
Smashing Conf New York

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 New York, dedicated to smart front-end techniques and design patterns.

Retro Futurism At Its Best: Designs and Tutorials

Advertisement

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.

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 Code1

Screenshot2

Retrofuturistic cityscape3

Screenshot4

Screenshot5

Screenshot6

USS – a portfolio of probabilities

Screenshot7

Screenshot8

Screenshot9

Screenshot10

Retro Futurism II11

Screenshot12

Screenshot13

Geometry Serie14

Screenshot15

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

Screenshot17

The Apple Store That Almost Was18
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.

Screenshot19

Screenshot20

Play21

Screenshot22

Screenshot23

Zac Blake24

Screenshot25

Andy Gilmore26

Screenshot27

Future Cities28

future cities29

Master Pyramid30

master pyramid31

Flux32

future cities33

Kitchen34

future cities35

Retro Futuristic City36

retro futuristic city 1037

Sexy Robot38

39

Concepts40

concepts 1041

Retro Future Cars42

retro magazines 1043

Bridging The Gap44

bohn 4745

Frank R. Paul City46

frank r paul city47

Das Neue Universum48

das neue universum49

Scripto Satellite50

scripto satellite51

Tocame52

tocame53

Triobelisk54

triobelisk 255

triobelisk56

Bloom57

bloom

“P” is for Possibilities of the Future

P for possibilities58

Striking Spaceship Squadron

striking spaceship squadron

Popular Electronics 195859

striking spaceship squadron60

striking spaceship squadron61

Exterior Double Cylinder Colony62

exterior double cylinder colony63

cylinder colony64

space settlement 1065

Rocketeer Adventure Magazine66

rocketeer adventure magazine67

Bohn 194768

bohn 4769

Futuristic Train

futuristic train70

Retro Futurism71

retro futurismus flickr 1072

Le Femme73

le femme74

Robert Rock75

robert rock76

Space Race77

space race 1078

If I Only Had Wings, I’d Fly79

if i only had wings 1080

Retro Futurism Artworks by Klaus Bürgle81

Screenshot82

Screenshot83

Screenshot84

Retro Futurism85

retro futurism 4086

Gates to Elysium87

tiager 1088

The Jetson’s89

Screenshot90

Tutorials Link

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

futuristic athlete tutorial92

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

creating a new retro tutorial94

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 scene95
In this tutorial, you will learn how to design a retro-futuristic space scene, using a variety of lighting effects and photo manipulation.

Screenshot96

How to Make Retro Futuristic Curves in 10 Steps97
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 1098

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

futuristic abstract tutorial100

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

steampunk style illustration102

Further Resources Link


Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement
  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

↑ Back to top