Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Realistic 3D Blueprint

Create a Realistic 3D Blueprint


For start i will create a new document with the following size: 800x 800 pixels and with a white background.

image 1

I will set my foreground color to #196cca

image 2

I will select Rectangle Tool and i will create a simple shape

image 3

Now i will download the following font : Download

I will add this font to my sistem. To add a new font you need to copy the font to your "font" folder. I recommend you to search how to install a font under your own operating sistem.
After you have the font installed, you can write some text over this blue shape. Please use a white color when you write something

image 4

Select Rectangular Marquee Tool and create a selection like in the following image

image 5

Create a new layer ( the easy way to create a new layer in photoshop is by pressing CTRL+SHIFT+ALT+N )
The next step is to go to Edit > Stroke.

image 6

Use the following settings

image 7

After you click on OK, be sure you press also CTRL+D to deselect

image 8

I will create a new pattern. For this i need to create a new document 60 x 60 pixels with a transparent background

image 9

Now you can zoom the document to 500 %. You can use the navigator panel. If you do not have this pannel open you can navigate to Windows > Navigator

image 10

Select Pencil Tool, and set the brush size to 2 pixles

image 11

I will create two lines on the document. for a short moment i will create a background. It will be easier for you to see what i am doing

image 12

The i will change the brush size to 1 pixel and i will create another thin lines

image 13

I will delete the blue layer i have used, and this is my result

image 14

I will Go to Edit > Define Pattern

image 15

I will choose a name for my pattern, then i will click on OK. You can close this document because we don't need it anymore.I will create another selection with Rectangular Marquee Tool

image 16

Then i will create another new layer ( press on CTRL+SHIFT+ALT+N )

I will grab Paint Bucket Tool, and with the the following pattern ( the one from above )
Note : Download our huge set of photoshop pixel patterns

image 17

I will click one time on my document, then i will deselect the selection ( press CTRL+D )

image 18

I will drag this layer over the blue shape, and in the same time i will change the opacity value to 10 %

image 19

I will create another layer ( press CTRL+SHIFT+ALT+N ). Be sure you have this layer on top of all layers, then with Pencil Tool ( set the brush size to 1 pixel ) i will create some lines like in the following image

image 20

I will select Eraser Tool, and with a smooth round brush i will delete the end parts of the lines. This is my result. If you look carefully you will see that mine lines look like some thin arrows. This is the effect i am trying to create.

image 21

Now i will create some circles with Ellipse Tool ( while you create the circles please hold down the SHIFT key ) it will allow you to create some perfect circles. I will create these shapes with a white color

image 22

Now for all these small circles add the same settings for the layer styles

image 23

image 24

This is my result so far.

image 25

I will add some other details with another patterns. You can download my huge set of pixel patterns. I will load the patterns, thne i will create new layers each time i want to create a different pattern

image 26

I will select the layer with Grafpedia Text in my layer palette

image 27

Then i will press on CTRL+J ( this shortcut will duplicate the selected layer )

image 28

Go to Filter > Blur > Gaussian Blur. You will be asked if you want to rasterize layer. Press OK. In the Gaussian Blur settings, please use a big value like 20 pixels

image 29

I will change the blending mode for this layer to Overlay. This is my result

image 30

Now we will transform this 2D blueprint into nice 3D blueprint.For this we need to work only on a single layer. I will select all my layers in my layer palette ( Hold CTRL and click on all layers without the background layer ) Then drag all the layers to the " Create new layer " button from the bottom of your layer palette

image 31

You will see that you have duplicate layers for all the layers. If you do not touch anything you will have all the duplicated layers selected. Press now on CTRL+E. This action will merge all the duplicate layers into a single one. Then you can hide the previous ones because we do not need it anymore. It will be usefull in the future if you want to change something

image 32

From now one we will work only with this layer. Now i will select Pen Tool, and i will create a simple shape like in the following image

image 33

I will right click on this layer, and i will choose Rasterize Layer.

image 34

Then i will add the following layer styles

image 35

image 36

You can find the gradient in one of the biggest gradients packages available

image 37

This is my result so far

image 38

I will select Eliptical Marquee Tool, and i will create a small selection on the left side of our blueprint

image 39

Then i will hit delete on my keyboard ( be sure you have the last layer selected - the one made with the Pen Tool )

image 40

Then i will press a few times on my Up arrow key until i place the selection tangent with my bottom part of the blueprint

image 41

Now i will inverse the selection ( press CTRL+SHIFT+I ).

image 42

I will select the blueprint layer. With Eraser Tool i will delete the bottom left part of my image.

image 43

Now i will hide the selection by pressing CTRL+D.
I will duplicate the corner layer

image 44

Then i will select both of them in my layer palette, and i will merge them together ( press CTRL+E ) to merge both layers into a single one.
The effect is not visible. I did this step because i will use the Dodge Tool in the following step to add some lights. If you want to draw with Dodge Tool or Burn Tool over a layer with layer styles you will not see the effect. that's why i merged the two layers.

As i have told you i will use the Dodge Tool with the following settings

image 45

Then i will start drawing over the corner of the blueprint. the following steps are very important if you want to have the same effect like mine. So please be careful. Select Smooth Round brush with the following size: 80 pixels, and click one time on the following spot.

image 46

HOLD DOWN SHIFT KEY, and press on the second spot

image 47

You will not see a big difference, but i prommise you will see in the following steps. Change the size of the brush to 60 pixels, and click one more time following the steps from above. Repeat these steps a few times until your brush size will be 10 pixels. This is my result so far

image 48

I will select the other layer, and with Brush Tool, i will cover the white lines

image 49

Now i will create a white line with Line Tool ( set the line weight to 3 pixels )

image 50

Go to Edit > Transform > Warp, and modify the line until you get a nice result

image 51

Now i will select one more time the layer with the corner, adn i will go to Image > Adjustmens > Desaturate

image 52

Now i will give the nice 3D Effect i was talking about. I will select all my layers in my layers palette ( without the background layer ) and i will merge all the files into a single one ( press CTRL+E ).
The next step is to go to Edit > Transform > Skew, and play with the corners until you are happy with your result

image 53

For this layer add a simple layer style with a drop shadow

image 54

You can add also another warp effect. Go to Edit > Transform > Warp , and play a little with this blueprint

image 55

This is my result

image 56

I will select Lasso Tool, and i will create a selection

image 57

Then with Burn Tool, and with Dodge Tool i will add some shadows and highlights. This is my result so far.

image 58

I will create another layer on top of all layers ( press CTRL+SHIFT+ALT+N )
Then with Brush Tool, and with a smooth round brush ( 500 pixels ) i will press one time over my blueprint

image 59

Then i will change the blending mode to Overlay, and i will change also the opacity value to

image 60

This is my final result

image 61

If you want you can duplicate the blueprint layer, and you can modify by using one more time using the warp tool.

Create a Realistic 3D Blueprint



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: