Menu Search
Jump to the content X X
The Smashing Book #5

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. new Smashing Book 5 features smart responsive design techniques and 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 probabilities7

Screenshot8

Screenshot9

Screenshot10

Screenshot11

Retro Futurism II12

Screenshot13

Screenshot14

Geometry Serie15

Screenshot16

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

Screenshot18

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

Screenshot20

Screenshot21

Play22

Screenshot23

Screenshot24

Zac Blake25

Screenshot26

Andy Gilmore27

Screenshot28

Future Cities29

future cities30

Master Pyramid31

master pyramid32

Flux33

future cities34

Kitchen35

future cities36

Retro Futuristic City37

retro futuristic city 1038

Sexy Robot39

40

Concepts41

concepts 1042

Retro Future Cars43

retro magazines 1044

Bridging The Gap45

bohn 4746

Frank R. Paul City47

frank r paul city48

Das Neue Universum49

das neue universum50

Scripto Satellite51

scripto satellite52

Tocame53

tocame54

Triobelisk55

triobelisk 256

triobelisk57

Bloom58

bloom59

“P” is for Possibilities of the Future60

P for possibilities61

Striking Spaceship Squadron62

striking spaceship squadron63

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 Train75

futuristic train76

Retro Futurism77

retro futurismus flickr 1078

Le Femme79

le femme80

Robert Rock81

robert rock82

Space Race83

space race 1084

If I Only Had Wings, I’d Fly85

if i only had wings 1086

Retro Futurism Artworks by Klaus Bürgle87

Screenshot88

Screenshot89

Screenshot90

Retro Futurism91

retro futurism 4092

Gates to Elysium93

tiager 1094

The Jetson’s95

Screenshot96

Tutorials Link

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

futuristic athlete tutorial98

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

creating a new retro tutorial100

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

Screenshot102

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

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

futuristic abstract tutorial106

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

steampunk style illustration108

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/sets/72157603779992640/
  8. 8 http://www.flickr.com/photos/mstoll/2214591354/sizes/l/in/set-72157603779992640/
  9. 9 http://www.flickr.com/photos/mstoll/2213799099/sizes/l/in/set-72157603779992640/
  10. 10 http://www.flickr.com/photos/mstoll/2213796577/sizes/l/in/set-72157603779992640/
  11. 11 http://www.flickr.com/photos/mstoll/2214595358/sizes/l/in/set-72157603779992640/
  12. 12 http://www.behance.net/Gallery/Retro-Futurism-II/143517
  13. 13 http://seaneill.com/wp-content/uploads/images/articles/botw/3/retro.jpg
  14. 14 http://seaneill.com/wp-content/uploads/images/articles/botw/3/retro.jpg
  15. 15 http://www.behance.net/Gallery/Geometry-Serie/111348
  16. 16 http://www.behance.net/Gallery/Geometry-Serie/111348
  17. 17 http://www.flickr.com/photos/hotmeteor/sets/72157615214095434/detail/
  18. 18 http://www.flickr.com/photos/hotmeteor/3355254082/in/set-72157615214095434/
  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://blog.guifx.com/2009/06/03/the-apple-store-that-almost-was/
  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/PLAY/61789
  25. 25 http://www.behance.net/Gallery/Zac-Blake/91312
  26. 26 http://www.behance.net/Gallery/Zac-Blake/91312
  27. 27 http://blog.iso50.com/2009/06/03/new-work-from-andy-gilmore/
  28. 28 http://blog.iso50.com/2009/06/03/new-work-from-andy-gilmore/
  29. 29 http://www.flickr.com/photos/wiless/2394285685/
  30. 30 http://www.flickr.com/photos/wiless/2394285685/
  31. 31 http://www.behance.net/Gallery/Retro-Futurism/96557
  32. 32 http://www.behance.net/Gallery/Retro-Futurism/96557
  33. 33 http://www.behance.net/Gallery/Flux-Magazine/193641
  34. 34 http://www.behance.net/Gallery/Flux-Magazine/193641
  35. 35 http://community.livejournal.com/retro_futurism/211857.html
  36. 36 http://community.livejournal.com/retro_futurism/211857.html
  37. 37 http://www.webomator.com/grafx2/blog/retrofuturistic_cityB04a.jpg
  38. 38 http://www.webomator.com/grafx2/blog/retrofuturistic_cityB04a.jpg
  39. 39 http://www.behance.net/Gallery/Hajime-Sorayama-Tribute/161565
  40. 40 http://www.behance.net/Gallery/Hajime-Sorayama-Tribute/161565
  41. 41 http://www.flickr.com/photos/grainspace/2417520927/in/pool-598127@N22
  42. 42 http://www.flickr.com/photos/grainspace/2417520927/in/pool-598127@N22
  43. 43 http://www.flickr.com/photos/wiless/2402165986/in/set-72157604463241317
  44. 44 http://www.flickr.com/photos/wiless/2402165986/in/set-72157604463241317
  45. 45 http://informingdiatribes.wordmess.net/20081221/retro-futurism-of-klaus-burgle/
  46. 46 http://informingdiatribes.wordmess.net/20081221/retro-futurism-of-klaus-burgle/
  47. 47 http://www.flickr.com/photos/avi_abrams/228965763/
  48. 48 http://www.flickr.com/photos/avi_abrams/228965763/
  49. 49 http://www.retro-futurismus.de/buergle_verkehr1.htm
  50. 50 http://www.retro-futurismus.de/buergle_verkehr1.htm
  51. 51 http://www.plan59.com/av/av051.htm
  52. 52 http://www.plan59.com/av/av051.htm
  53. 53 http://www.behance.net/Gallery/December--February/185096
  54. 54 http://www.behance.net/Gallery/December--February/185096
  55. 55 http://www.behance.net/Gallery/Triobelisk/110599
  56. 56 http://www.behance.net/Gallery/Triobelisk/110599
  57. 57 http://www.behance.net/Gallery/Triobelisk/110599
  58. 58 http://www.saadart.com
  59. 59 http://behance.vo.llnwd.net/profiles/54456/projects/154828/544561229537376.jpg
  60. 60 http://behance.vo.llnwd.net/profiles/54456/projects/154828/544561229537302.jpg
  61. 61 http://www.behance.net/Gallery/August--December-2008/154828
  62. 62 http://www.tredowski.cba.pl/Graphics/album/index.html
  63. 63 http://www.tredowski.cba.pl/Graphics/album/index.html
  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://ferx.gfxartist.com/artworks/172137
  76. 76 http://i249.photobucket.com/albums/gg211/Ferx_images/Futuristic_Train_FPS_GFX.jpg
  77. 77 http://www.flickr.com/photos/modular/50052835/
  78. 78 http://www.flickr.com/photos/modular/50052835/
  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.behance.net/Gallery/The-New-Retro/87403
  83. 83 http://www.flickr.com/photos/bbdh/281131843/sizes/o/
  84. 84 http://www.flickr.com/photos/bbdh/281131843/sizes/o/
  85. 85 http://shop.webomator.com/retropolis.shtml
  86. 86 http://shop.webomator.com/retropolis.shtml
  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_verkehr1.htm
  90. 90 http://www.retro-futurismus.de/buergle.htm
  91. 91 http://www.behance.net/Gallery/Retro-Futurism/96557
  92. 92 http://www.behance.net/Gallery/Retro-Futurism/96557
  93. 93 http://tigaer.deviantart.com/art/GATES-TO-ELYSIUM-124004270
  94. 94 http://tigaer.deviantart.com/art/GATES-TO-ELYSIUM-124004270
  95. 95 http://www.jandofabrics.com/newsletters/2008/08/meet-george-jetson-at-j.html
  96. 96 http://www.jandofabrics.com/newsletters/uploaded_images/The_Jetsons-782899.jpg
  97. 97 http://www.webdesign.org/web/photoshop/photo-editing/design-a-futuristic-athlete-graphic.17226.html
  98. 98 http://www.webdesign.org/web/photoshop/photo-editing/design-a-futuristic-athlete-graphic.17226.html
  99. 99 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/creating_the_new_retro
  100. 100 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/creating_the_new_retro
  101. 101 http://psdfan.com/tutorials/designing/design-a-retro-futurism-space-scene/
  102. 102 http://psdfan.com/tutorials/designing/design-a-retro-futurism-space-scene/
  103. 103 http://www.fudgegraphics.com/2008/12/tutorial-how-to-make-retro-futuristic-curves-in-10-steps/
  104. 104 http://www.fudgegraphics.com/2008/12/tutorial-how-to-make-retro-futuristic-curves-in-10-steps/
  105. 105 http://bestphotoshoptutorials.net/2009/05/19/design-a-futuristic-abstract-poster/
  106. 106 http://bestphotoshoptutorials.net/2009/05/19/design-a-futuristic-abstract-poster/
  107. 107
  108. 108 http://psd.tutsplus.com/tutorials/photo-effects-tutorials/how-to-create-a-steampunk-style-illustration-in-photoshop/
  109. 109 https://www.smashingmagazine.com/2008/10/12/50-beautiful-movie-posters/
  110. 110 https://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
  111. 111 https://www.smashingmagazine.com/2008/10/14/30-beautiful-vintageretro-photoshop-tutorials/
  112. 112 https://www.smashingmagazine.com/2009/03/04/50-stunning-photoshop-text-effect-tutorials/
  113. 113 http://wellmedicated.com/inspiration/45-vintage-space-age-illustrations/
  114. 114 http://www.flickr.com/groups/intheyear2000/
  115. 115 http://weburbanist.com/2009/05/11/future-past-173-radical-retrofuturistic-directions-in-design-technology/
  116. 116 http://community.livejournal.com/retro_futurism/
SmashingConf Oxford

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 Oxford, on March 15—16, 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

    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

    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

    Amazing!

    0
  12. 12

    wow…amazing !!!

    0
  13. 13

    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

    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

    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

↑ Back to top