Matte Painting: Create A Distressed Surreal Cityscape

By   |  Stashed in Photo Manipulation

Matte Painting: Create A Distressed Surreal Cityscape Intro

Matte painting plays a major role in today’s films. The first known matte painting shot was made in 1907 by Norman Dawn (ASC), you can see how the traditional matte painting evolved from “The Wizard Of Oz” to the ground breaking “Avatar”. In this tutorial I’m going to show you some techniques in matte painting to create a distressed surreal cityscape.

Notes

  • This tutorial is for Photoshop users with intermediate to advanced skills
  • All the keyboard shortcuts are mentioned within ( )

Resources

If you are following along, you’ll need to grab the following resources.

Preview

Before we begin, check out a quick preview of what we will be creating.

Step 1

Just like every construction needs a blue print, so do matte paintings. Here’s a little sketch I created to map out my project. The numbered sections shown here will be used as a reference throughout this tutorial.

Step 2

I found this pic which is a perfect fit for the blue print. Open it in photoshop, and remove the clouds using the Magic Wand (W) tool, or whichever pixel cutting technique you are most familiar with.

Step 3

In this painting we could do without any green foliage, so turn the plants in the foreground into pigmentless plants. Select the Lasso Tool (L) and roughly draw around the bushes as shown, and set the Feather Radius to 60. Then alter the curves to approximately what is referenced below.

Step 4

This step requires some decision making on your part. Choose which portion of the building you’d like to destroy. Then use the Lasso Tool (L) to roughly make your selections. Lastly, erase the edges using the Eraser (E) tool.

Step 5

Next, darken the building by using the Burn Tool (O) with a rust brush. It’s the perfect tool to distress the buildings like what is shown below.

Step 6

Now lets add some rubble and gutted patches to the buildings. Start in the sequence that was layed out in the blue print. I found this pic suitable for the section marked as ‘B1′. Cut out the portion required, and name it (B1 Grid).

Step 7

Now paste that piece back into your original canvas and blend it with the prespective of the building. Select the Free Transform tool (Cmd + T), then with the Move Tool (V) selected while holding (Ctrl) move the edges to match the prospective.

Step 8

Once you are settled on the prospective, duplicate the layer untill the gap is filled. Then merge all those (B1 Grid) layers and erase some parts of the grid to show it’s broken.

Step 9

Now adjust the curves to the following output. Red 150, green 122, and blue 95.

Step 10

Next, apply similar destroy and burn techniques that you used in steps 4 and 5. We will come back to this layer for more details later in this tutorial.

Step 11

Lets start to work on the B2 section. Choose the best pic for B2′s destruction, I used this image. Now, repeat the same steps you followed in step 7 while aligning the B1 Grid layer. Be sure to take your time with any of these perspective steps, getting them wrong will be detrimental to the entire effect.

Step 12

Change the Exposure values to the following: Exposure: -0.63, Offset: +0.0061, Gamma Correction: 0.94.

Step 13

Grab this photo to be used for the middle of ‘B2′ and name the layer ‘Broken Floors’. The floors in the middle of B2 need some attention. We should concentrate on the perspective. First, draw some lines matching the perspective using the Pen Tool. Then use the Free Transform tool to adjust the floor lines with the building lines.

Step 14

Change the exposure values to: Exposure: -1.22, Offset: 0, and Gamma Correction: 1.00. Then select the Burn Tool (O) and use your creativity to make it look old and destroyed.

Step 15

Now it’s time to let your creative juices flow. In much the same way as the previous steps begin filling in the gaps with distressed buildings. Remember this is a surreal destroyed cityscape, so you can’t go too wrong, as long as you’re creative and maintain consistent color, perspective and shadows. The steps I used are referenced in the sample pics below.

Step 16

Now lets add some details to the ‘B1 Grid” layer. Add a new layer, then select the Lasso Tool (L) and outline some hanging grass. Fill your selections with the colour #5d6e5e. Again select the Lasso Tool (L) and add shades to the grass with colour #3a413a.

Step 17

Every abandoned building needs some broken windows, so lets add a few. Select the Brush Tool (B) and choose the colour #0c0d11, now start painting some random boxes which represent the broken windows. When it comes to painting details, your creativity is what makes the difference between a beginner and a professional.

Step 18

Now add some clouds to the backdrop which suits the environment we created. Drop them into our cityscape behind all the building layers.

Step 19

Grab some fog brushes and make the scene more realistic by brushing some fog where it’s needed. Be wary not to go overboard with this step.

That’s A Wrap

That wraps up this tutorial on matte painting. Let us know what you think, drop a comment using the form below.

About the Author

Santhosh is a freelance stopmotion and motion graphics designer. He is the founder of zillionarts, a modern digital art community. He is currently experimenting on his skills to bring out the new in his art.

More posts by

Website

  • http://www.bighdesign.com Justin Moore-Brown

    Great work!

    Thanks for sharing the process of it all.

    The result was awesome!

  • Abulafio

    Just AWESOME!

  • http://inspiringpixel.com Inspiring Pixel

    Brilliant work Santhosh. Really amazing technique. Will try using it in my art sometime. Thanks

  • http://www.webcanedo.com.br Web Canedo

    outstand! brillant result!

  • http://comicbookgraphicdesign.com Ralph Contreras

    Wow! That’s Super Cool! I want to cause some destruction too now!
    – SHAZAM!

  • http://xpirtdesign.com Xpirt Web Design

    That’s amazing! You make it seem so easy.

  • http://www.psdfan.com Tom Ross

    Really interesting outcome. I love your selection of photos, they fit perfectly. It looks like something from a zombie movie :)

  • http://kkoepke.de Kai Köpke Webdesign

    Great tutorial, nice work. Thank u :)

  • http://www.wp-agent.com/ linko

    Lovely! I’m a great fan of Photoshop.
    Great job.

  • http://getbrushes.ru/ getbrushes

    Great lesson! Always wanted to learn how to do things like

  • abrar

    very nice and heplful

  • http://www.marketharboroughmagazine.co.uk/ Market Harborough Magazine

    Amazing results using simple techniques.

  • http://www.migratedesign.com Laurent Jouvin

    Very entertaining. I will probably never have to use Photoshop for this kind of design but it is extremely interesting to see how it is done. Fascinating post!

  • http://www.divendo.dk Charlie Nielsen

    Nice tutorial. Thanks for sharing great wisdom ;)

  • http://www.crea-fr.com crea-fr conception sites internet

    Really impressive result. Thank you for this tutorial very well done.

  • Patrick

    WOW awesome stuff, im definently interested to see more of your work :D

  • anit

    thanks…. awesome…

  • http://www.get4.org Shirt Druck

    Wow, great Work looks very good. Good idea. thx

  • http://www.vaishnomata.org avn.rocky

    awesome… thanks for sharing

  • http://what-what.net shoaib hussain

    the end result is so nice ,till step 18 it looked ordinary but in the end looks really nice.thnx for sharing

  • http://www.bbgf.org Rolando Berlacher

    Hi just stumbled your site and been reading some of your entries and just wondering why you chose a WordPress blog dont you find it impossible to do anything with? Been thinking about starting one.

  • http://www.1a-photoshop.de/ Viktor von 1A Photoshop

    Good idea and is a excellent work! . Very good and complex description.
    Thanks

  • http://warstwy.com adone

    Very good tut. Thanks MyInkBlog.

  • http://exmmedia.com Web Design

    WOW this looks sick son
    great stuff

  • Damiano

    Tanks,
    this tutorial is fantastic, but I have a question: Is possibol to do this tutorial with adobe photoshop elements ?
    Bye Bye

  • http://www.kappi.co.uk Craig

    Simply stunning, you are an encouragement to us all.

    Thanks for your time

  • http://www.junggesellenabschied.org Jga

    Great work and good explanations. Thanks for that!

  • http://www.gr8ex.us Andika Hermasyah

    is cool tutor..thx….u r the best for share this :)

  • http://www.windowsxpdebugger.com XP Debugger

    wow the pics looks great! good work, hoping to see many more thnks

  • http://genfrust09.blogspot.com obhed

    tutorials is good
    i`m so happy

  • http://www.beauchampwebdesign.co.uk Beauchamp Web design

    Brilliant work, thanks for the great tutorial

  • http://www.brazencareerist.com/profile/gordon-moron Lannie Tepper

    Hi excellent small post the following, was just wondering if i could quote some of it inside a post im accomplishing (I will credit and hyperlink back again below!). Drop me a message if thats not ok. you possibly can quote any of my stuff as prolonged as you hyperlink back again to it :) Also perfect template you use right right right here would you thoughts telling me wherever you got it :D. Sorry for my english :)

  • http://prodigalconcepts.com rod rodriguez

    Wow, that’s really cool! great job. Very surreal final output thanks, for this.

  • http://www.loseweightfastonline.co.uk LWFO

    Amazing job, well done cool tutorial

  • http://www.mazekni.com Nabil B

    Really amazing, hard work on it with photoshop, i really love it and try to do same, i think i have lot of to learn from you :)

  • mohammed adel

    stunning work , really .. thanq !!!!!!!!

  • http://iconreproductions.com Beth

    Wow, didn’t realize that was how everything was made for cgi. Great stuff!

  • http://jacobianjax.blog.com Chante Panila

    What do you advise is the best blog software to make use of for a person that has a very confined experience of technologies?

  • http://www.mosettistudios.it Realizzazione siti web

    Wow this tutorial is one of the longest I have ever seen on photoshop masks! You put lot of effort in it, thanks for sharing.

    Ciao
    Francy

  • http://www.3magicbeans.com Website Designer Denver

    This is really one of the best tutorials to go through for the designers…simple yet effective to get the desired results for not only the website designing but for all the designing requirements…thanks for sharing such details…:)

  • http://www.17ps8.com peter

    super good ,sir

  • http://www.supercrystals.net Birthea Lem

    That is truly amazing….I am going to go try to do my own. Thanks!

  • http://www.healthyjointcare.com Synflex

    You lost me at Step #2! :)

    Irregarless, thanks for showing us how a real graphic designer operates. The step by step instrutions allows me to see some of the tools your using. Very cool pic! Not if you were actually near that building though!

  • http://www.vefilmizle.com.com Mika Prestwich

    hello, thank you for write a beautiful article

  • Sebastian

    I’m a beginner, but when i carefully read and try, it’s not that difficult. Thanks for the tutorial.

  • http://www.pixeldamnation.com pixeldamnation

    awesome !!!! thanks for the share

  • http://www.megalomedya.com Reklam Ajansı

    Great share.. I love matte painting.

  • sandy

    great work !! thank u, thanks a ton for this tutorial……

  • http://tragodegrog.blogspot.com/ Jordi

    Hey! The best tutorial i have seen about this theme, thk you!!
    I tried something with my city Barcelona:

    https://lh5.googleusercontent.com/-_3jOCmKr5u8/TWwAMHWsSwI/AAAAAAAAAGk/8uEzmBYG0Pc/s1600/torre+final+1.jpg

  • Megan Mc.

    Great work! Well written it will help me out alot. Thanks you Santhosh

  • http://www.garrisoneverest.com Denver Graphic Design

    It turned out very realistic looking. I like your systematic approach.