Create a rocking blue print website layout in photoshop

In this tutorial you will be learning some new design techniques and I will teach you how to create a professional looking mockup. This tutorial is mainly for people who’ve design websites in photoshop so if you’re a beginner I recommend that you check out some of our other tutorials to better help you understand things. If you think you can do it then give it a shot! Enjoy

Blue Print Paper
Black Ruler
Graph paper

Step 1

Create new document 1280px x 1000px 72dpi. Background Color #152a5b(Dark blue)
Create new document

Step 2

Now turn on your rulers and put the guides(Lines that help you keep things contained) at 0px and 960px. You might not be able to see the guides after you’ve place them into your design because they are on the starting and ending point of the canvas.

Step 3

Next we will center our 960px design. Press CTRL + AlT + C for Windows and for Mac Press CTRL + CMD + C. You should now see a box that says Canvas size.
canvas box

Change the Canvas width to 1160px then select the left arrow and press ok.
push left

Now we’re going to repeat the first step and change the canvas size from 1160px to 1360px and select the right arrow then press ok.
push right


Note: If your canvas has two different colors after you’ve added the extra 200px to both sides, just select the paint bucket tool and fill in the opposite color area so that everything matches.

Step 4

Now place the blue print paper inside your photoshop document then select the rounded paint brush tool with the blurred edges and brush around the imageAfter I resized the image and blurred around it.
blur around image

With the back ground layer turned back on
image with blur

Step 5

Now insert your ruler image and re size it to your comfort.
Insert ruler

Select the type tool, color:#383838 and type in the name blue print. Right click on the blue print layer>>blending options>>Inner Shadow.
Blend Mode:multiply, Opacity:75%, Angle:-171, Distance:5px, and size 5px.
inner shadow settings

Now select the gradient check box. and copy settings below
copy gradient settings

Double click on the gradient color box. Left Color:#000, Right Color:26272d.
copy gradient color bar settings

Logo should now looks like it is engraved into the ruler.

Now lets add a light above our logo so we can give it a bit of a shine. Select the paint brush tool with the blurred edges, size:500px then press the brush tool once over the logo and change the layer opacity to 45%.

Step 6

Select the rectangle tool, Color:#7a7a7a; and create a rectangle starting from the top ending at the bottom. Leave room between the logo and room so we can insert some footer text.
container bg

Step 7

Now lets add our graph paper. Insert your graph paper into photoshop then copy and duplicate the graph layer until you have a full covered graph.Leave 10 pixels space between the left, right, and bottom.
Full Graph

Step 8

Create a rectangle color:#6b6a6a for your left column. Make it around 620px wide leaving 10 px on the left, right, top, and bottom.
Rectangle box

Step 9

Now lets create our post area. Find or create an image Width:206px x Height:181px.
Post image

Select the type tool Font:Arial, Bold, Size:20px, Color:#383838, and type in some realistic headings.
Type in heading

Resize your graph paper so that it’s able to fit the post information inside it. Then add in some post text font:arial, size:12px, color:#383838. Ex:Posted in Blog, on 12.06.2009 by Marcell
post information

Now lets create an excerpt. You can use dummy text for the excerpt if you would like. You can find dummy text by searching lorem ispum.

We will now add a read more button. Select the rectangle tool Color:#7d7b7b, and create a box at the bottom right edge of the post. Then select the type tool and type read more.
read more button

Finally we’re going to add a 1px solid line so that we can keep our posts divided. Select the line tool(In same panel as rectangle tool) then create a 1px solid line Color:#838080. (Look at the top at the panel after you’ve selected the line tool and change Weight) to 1px)
1px solid line

Duplicate the post area 4 times. You can use the same image but It looks more realistic when you use different images.
duplicate post

Step 10

Now that out post area is completed we will now work on our sidebar area. Select the rectangle tool color:#383838 and create a rectangle box for our sidebar/widget heading. Then select the type tool font:arial, bold size:20px, then type Subscribe.

Next we will add some icons to our mockup. Here is a free set of icons that you can use for this tutorial. Add four icons to the design.

Step 11

Duplicate the widget/sidebar heading and title then change the title name to Sponsors and add in 4 advertiments, 125px x 125px

Step 12

Duplicate the widget/sidebar heading and title then change the title name to Popular Post. Then create 5 realistic or dummy post titles. Leave room on the left so we can add in some arrows later.
widget/post titles

Now go to the custom shapes panel and select an arrow. I used the arrow selected below.

Change your foreground color: to #838080, then draw an arrow next to the sidebar text. Duplicate the arrows 4 times.
arrow example

Step 13

Let’s create a navigation menu for our design. Create a new document Width:936px, x Height:74px then drag the graph paper into the new document and crop it. After you’ve cropped the image drag it back into our design layout
graph menu

Now lets add out navigation links. Select the type tool font:arial, bold size:20px, Color:#383838, the type in the nav links.
graph menu links

Step 14

Now we will create a search form for our design. Select the rectangle tool Color:#383838 then create 2 rectangle boxes, 1 for the search form and the 2nd
one for our search button.
search button/form

Step 15

Select the type tool and type in search for the search form. For the search form button type Submit color:.#7a7a7a, Size:10px; Now add a search icon glass or image to the top left of the search form. I used an icon from the preset panel in photoshop.
search button

Step 16

For our last and final step we will add two things, a page navigation and some footer text. We will create and older entries nav link right under our post area. Select the type tool font:arial, size:12px, Color:#fff then typeOlder entries. Now we will create the footer text. Select the type tool font:arial, bold size:12px, Color:#6b6a6a
nav link and footer

You’re now done! Your final image should look like this, Click to Enlarge


Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply