Create a Future City using 3d Renders and Photoshop Techniques

By Unknown | Image Manipulation | February 28th, 2009 | 8 Comments

Tutorial Details

Program : Photoshop

Difficulty : Intermediate

Time Taken : 1 1/2 Hours

Download Files : Future City Tutorial Files (116)

Create a Future City using 3d Renders and Photoshop Techniques

Imagine what it would be like to create sprawling futuristic cities with roaring spacecrafts burning through the atmosphere. Many great directors have bought there own style to big screen with movies such as Blade Runner, they all have given a unique vision of tomorrow. In this tutorial we’re going to cover all the necessary steps required to create your own futuristic city with awesome sci-fi additions.

Photoshop has long been regarded as the tool of choice for 2D editing, but with Photoshop (the extended editions) you can incorporate 3D content. We’ll start off using DAZ Studio to import and export a complex 3D city model. Next we’ll show you how 3D content can coexist within 2D composites: you can roll, rotate and slide objects in 3D space, as well as having the flexibility of modifying their textures in reel-time. We’ll then build up the 2D background elements of the scene and add some extra details, such as atmospheric effects, by using Photoshop’s layers and blending modes.

Step 1

Create an account with DAZ 3D then download and install DAZ Studio. Download the free Dystopia City Blocks 011-020. Ensure you download both the Poser and MAT files, unzip and open their installers. It’s important that you install to this path.

  • Applications > DAZStudio > Content

load daz studio fcs1 Create a Future City using 3d Renders and Photoshop Techniques

Step 2

Open up a new scene and go to Edit > Preferences and select the Directories tab. Ensure that ‘Program Files>DAZStudio>Content’ appears under the DAZ Studio Content Directory.

If you don’t actually have Poser installed, you will still need to have ‘Program Files>DAZStudio>Content’ included under the Poser Content Directory (which is indicated in red).

load daz3d settings fcs2 Create a Future City using 3d Renders and Photoshop Techniques

Step 3

To make your things easier to find, go to (View> Tabs > Content). Click the triangle icon In the upper-right corner of the tab (indicated in red) and change View Categories Quick Start to View Folders As Tree.

Navigate to the ‘Dystopia 6×6 11-20~ found under Content > Figures > Dystopia > City Blocks. Drag the icon into your workspace. The ‘readme’ file in the Dystopia download folder tells you where to access new content.

load 3dcity block from daz 3d files fcs3 Create a Future City using 3d Renders and Photoshop Techniques

Step 4

Apply MAT preset by dragging the ‘DystopiaCB mats 03 NoRaytrace Cloud’ material icon Into the workspace – found under DAZStudio>Dystopla>City Blocks. Now go Export, selecting Universal 3D from the Format menu and Save, accepting the default settings in the next dialog box.

The export process will take a while, so have some patience. You can also export directly to Photos hop using DAZ’s Studio 3D Bridge plug-in, but we found exporting/importing quicker and more reliable on complex models.

apply mat to daz3d fcs4 Create a Future City using 3d Renders and Photoshop Techniques

Step 5

Launch Photoshop CS3 Extended and create a new landscape document 345 x 297mm with a resolution of 300dpi in RGB mode. Import the model by going Layer>3D Layers > New Layer From 3D File and navigate to your exported city. Importing complex models will take a few minutes.

When the import has finished, you’ll see a 3D layer indicated by a cube icon with its textures as sub-layers. Double-click the City layer to activate 3D mode and the tool bar changes.

import city into photoshop fcs5 Create a Future City using 3d Renders and Photoshop Techniques

Step 6

With the default Edit the 3D Object icon (indicated In red) you can view the tools :

  • A – returns the object to its original position
  • B – rotates it
  • C – rolls it
  • D – drags It
  • E – slides it
  • F – scales it
  • G – lets you can manually enter coordinates
  • H – is a pop-out View menu
  • T – deletes the current view
  • J – saves the current view
  • K – is a pop­ out Lighting and Appearance menu
  • L – is a pop-out cross­ section menu
  • M – shows animation settings
  • N – cancels the transformation
  • O -commits the transformation.

explain photoshops 3d tools fcs6 Create a Future City using 3d Renders and Photoshop Techniques

Step 7

while still In 3D mode, go to the Light Settings drop-down menu and select Day Lights. Select the Edit the 30 Object icon and use the drop-down menu to enter a Position of X = 3589B, Y = 602.5 and Z = 176.1, then an Orientation of X = 0, Y = 0 and Z =; 90.

Enter a Scale of 2 for the X, Y and Z ranges. You could edit the object using the tools directly In the workspace, but because the model is complex it’s a little sluggish.

camera settings for 3d fcs7 Create a Future City using 3d Renders and Photoshop Techniques

Step 8

Toggle to the camera settings and enter a Position of X = -343. Y = -1850 and Z = 8604, then an Orientation of X = -99.91, Y = -1.7 and Z = 120.62. Also ensure the Field of View is set to 57.52 mm lens.

You could use the camera tools directly in the workspace. When you’re done make a note of the settings and hit the tick icon to accept the transformations.

camera settings for future city fcs8 Create a Future City using 3d Renders and Photoshop Techniques

Step 9

Duplicate the ‘City’ layer, activate 3D mode and enter a Position of X = -1211.8, Y = -247_6 and Z = 432,5. This is the same as using the Slide tool to drag the model away from the camera Now set the Z Orientation to 0 to rotate it.

Repeat this on another duplicate layer and pull it away from the camera using different Position and Orientation settings. Both these layers should have the same camera settings as the previous step.

camera settings for future city fcs9 Create a Future City using 3d Renders and Photoshop Techniques

Step 10

Drag the three city layers Into a new group folder, then open ‘Mountains.jpq’ from the downloaded files and drag/ drop as a new layer, stretch to fit the canvas and label it ‘Mountains’. Now clip a Photo Filter adjustment layer, select Deep Yellow and set the Density to 44%.

Next clip a Levels adjustment layer, setting the Black point to 19 and the Midtone to 0.61. Drag this layer into a new group folder beneath the city and label it ‘Background’.

future city adjustment layers fcs10 Create a Future City using 3d Renders and Photoshop Techniques

Step 11

Open ‘Planet.jpg’ and use the Elliptical Marquee tool to make a selection around the planet. Expand or Contract the selection and nudge to fit. Feather by 5px and Copy/Paste as a new layer above the Levels adjustment and label it ‘Planet’ Scale to fit and set the blending mode to Hard Light. Now add a layer mask and use a Black-to-Transparent gradient and a large, soft-edged brush to hide the bottom half.

world in the background of the futrecity fcs11 Create a Future City using 3d Renders and Photoshop Techniques

Step 12

Let’s add some cool detail to the sky. Open ‘Clouds1.Jpg’ and drag  as a new layer above the planet. Position it over the horizon, stretch  to fit the canvas width and label it ‘sky’. Next set the blending mode to Difference and adjust the Opacity to 35%. With Background now complete its time to refine the city.

making the sky of the future city fcs12 Create a Future City using 3d Renders and Photoshop Techniques

Step 13

Revisit your ‘City’ folder and make sure you’re happy with the positioning. Highlight the layers and go to Layer >Rasterize >Layers. As our scene is at dusk, let’s bring it to life by adding some lights.

Select a small, soft-edged brush and use white and warm yellows on afferent layers to build up a subtle effect. Also vary the brush size and Opacity as you work. Adding an outer glow if you feel it needs it.

adding lights fcs13 Create a Future City using 3d Renders and Photoshop Techniques

Step 14

We are going to now add some city smog to the scene, so open up ‘ Clouds2.jpg’ and use the Quick Mask tool. With a large soft edge brush to select some cloud areas.

Copy/Paste the selections into a new Group folder labelled ‘Atmosphere’ at the top of the layers stack. Set their blending modes to Pin Light and position at the bottom of the canvas.

adding smog to future city fcs14 Create a Future City using 3d Renders and Photoshop Techniques

Step 15

Grab cloud3.jpeg and drop it onto a new layer at the top of the stack within the ‘Atmosphere’ group. Now scale to suit and put it at the bottom of your canvas.

Set the blending mode to Hard Light and Opacity to 50%.  Add a layer mask and blend from the top – down using a Linear gradient of black to white. Clip a Hue/Saturation adjustment layer, check the Colorize option with Hue at 42 and Saturation at 18.

add some has to the future city fc s15 Create a Future City using 3d Renders and Photoshop Techniques

Step 16

Add a normal Color Balance adjustment layer above the atmosphere group folder, Set the Midtones to Red +27 and Blue -35, then drop the Opacity to 81%.

adding haze to the future city fcp16 Create a Future City using 3d Renders and Photoshop Techniques

Next target the ‘City’ group folder and rotate anti­ clockwise a few degrees and scale up slightly to compensate, Repeat this on the Background folder­ your scene should now look more dynamic

Step 17

Add some volumetric haze to the distant buildings by making a Quick Mask selection from ‘Clouds2.jpg ‘again. Copy and Paste above your previous Quick Mask smog layers within the ‘Atmosphere’ group folder. Scale to fit over the city horizon and drop the Opacity to 45%.

Now generate a selection from your foreground ‘City’ layer, target your new layer and go Layer > Layer Mask > Hide Selection. Next use a large, soft edged brush to refine the mask.

adding background haze to backpart of city fcs17 Create a Future City using 3d Renders and Photoshop Techniques

Step 18

Goto the website Turbo Squid and download the ‘SFighter’  (http://www.turbosquid.com/FullPreview/Index.cfm/ID/274642), unzip and save to a convenient location. Now Import the model as a 3D layer. as you did in step 5, and position under the top Color Balance adjustment layer Double-click the texture icon (‘CSfighter_03_CLR’) and it will open as a ‘child’ document.

Now to modify the texture. Add a Color Balance adjustment layer, setting the Midtones sliders to Red – +35 and Blue – 66.  When you’re done, flatten and save. Your modified texture will now automatically update on the model.

fixing the texture fcs18 Create a Future City using 3d Renders and Photoshop Techniques

Put the spacecraft in a new group folder under the top Color Balance adjustment layer and label it ‘Vehicles; activate 3D mode and use the Drag, Rotate, Roll and Slide tools to position as shown.

Now go to the Light Settings drop-down menu and select the preset that best suits the model- we chose White Lights because it gave a greater contrast When you’re done, hit the tick icon to accept the settings.

lights and color balance for 3d model fcs20 Create a Future City using 3d Renders and Photoshop Techniques

Step 20

Duplicate the ‘Spacecraft’ layer a couple of  times, then use the Drag and Slide tools to distance them in the scene. When you’re happy, target all three layers and Rasterize them.

Next use a soft-edged brush to add some engine glows using a pale yellow on a new layer, varying the brush size as you work. Build up the effect by using white on another layer.

lghts for engines fcp20 Create a Future City using 3d Renders and Photoshop Techniques

Step 21

Use smaller vehicles within the ‘Vehicle’ group folder. We used the ‘Scout ship’ from http://www.users.on.net/~sparky/models.htm.

Although you can use any model you wish. This model lacks texture, but used In the distance looks fine. After rasterizing, merge to one layer and use Photoshop’s Replace Color on the cockpit then clip a Hue/Saturation adjustment layer, dropping the Red and Cyan to -1 00.

distant space craft fcs21 Create a Future City using 3d Renders and Photoshop Techniques

Step 22

Target the top Color Balance adjustment layer and hit shift/Ctrl+Alt+E to Stamp Visible (this creates a composite layer from all visible layers), Give the new layer a Gaussian Blur of 2px and drop the Opacity to 80%. Bring the foreground back into focus by adding a layer mask and dragging a Linear gradient from the bottom.

Finally, generate selections from the three foreground spacecraft, ensure White IS set as your Foreground Color, hit delete and you’re done!

depth of field fcs22 Create a Future City using 3d Renders and Photoshop Techniques

Related Posts

  • Create a Photoshop Mermaid Image Manipulation
  • Combine 3d Renders With A Stock 3d Model
  • Simplypsd Update
  • Create An Urban Tiger Photo Manipulation
  • Paint Stone and Rock in Photoshop

8 Responses to “Create a Future City using 3d Renders and Photoshop Techniques”

  1. Mathias says:

    I like the tutorial as I’ve been wondering how to use the city blocks in Daz3D, but what I don’t like is how you split the tutorial over 11 pages, when it could have been 5/6. If it was to save dialup users, you could have had smaller ones and links to the higher-res images for those with better internet, rather than shaft everyone with clicking through 11 pages to save the tutorial.

    But it’s a good tutorial, thanks for putting it up.

    • Parody says:

      Hi Mathias,

      Actually to be honest ive split them over several pages because ive had to downgrade my dedicated server to shared hosting as having this website up was costing me a hell of alot of money with no support. It just would not be able to handle the server load of 2k+ people requesting one huge page with massive images. Thanks for your input, if i get more complaints about this ill see what i can do. Glad you enjoy the tutorial.

  2. Mathias says:

    Very true, I had to downgrade my own from bandwidth excession and it was a pain with who I was hosting with. But yeah, I enjoy it thoroughly, good to see something in my area I like to design in, so I’ll be trying this when I get a spare moment on the weekend and see how it all turns out.

  3. Eric Shafer says:

    Great tutorial, you always have high quality stuff here. :)

    Featured here: http://www.presidiacreative.com/web-picks-14/

  4. Dawn says:

    I only have Photoshop CS2, whenever, it seems I do any tutorial online they leave out the following;

    1. Requirements, up front what versions, any and all downloads etc…

    2. Time to complete.

    3. Viability or potential for your own work rather then copying off someone else.

    I was disappointed that because I don’t have CS3, I won’t be able to complete this tutorial.

    Looks very good though…

  5. Brochure Printing says:

    I don’t have CS3 as well… too bad. This would have been one heck of a digital art project. I would’ve loved to try this one out. The final artwork looks absolutely amazing. Your tutorial is very thorough. Congratulations on a job well done! Keep it up! I’m definitely looking forward to seeing more of your work. Thanks!

  6. John says:

    Great Website !

Leave a Reply

Popular Tutorials