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
Resources:
Blue Print Paper
Black Ruler
Graph paper
Step 1
Create new document 1280px x 1000px 72dpi. Background Color #152a5b(Dark blue)
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Change the Canvas width to 1160px then select the left arrow and press ok.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
With the back ground layer turned back on
Image may be NSFW.
Clik here to view.
Step 5
Now insert your ruler image and re size it to your comfort.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Now select the gradient check box. and copy settings below
Image may be NSFW.
Clik here to view.
Double click on the gradient color box. Left Color:#000, Right Color:26272d.
Image may be NSFW.
Clik here to view.
Logo should now looks like it is engraved into the ruler.
Image may be NSFW.
Clik here to view.
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%.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Step 9
Now lets create our post area. Find or create an image Width:206px x Height:181px.
Image may be NSFW.
Clik here to view.
Select the type tool Font:Arial, Bold, Size:20px, Color:#383838, and type in some realistic headings.
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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)
Image may be NSFW.
Clik here to view.
Duplicate the post area 4 times. You can use the same image but It looks more realistic when you use different images.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Step 11
Duplicate the widget/sidebar heading and title then change the title name to Sponsors and add in 4 advertiments, 125px x 125px
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Now go to the custom shapes panel and select an arrow. I used the arrow selected below.
Image may be NSFW.
Clik here to view.
Change your foreground color: to #838080, then draw an arrow next to the sidebar text. Duplicate the arrows 4 times.
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
Now lets add out navigation links. Select the type tool font:arial, bold size:20px, Color:#383838, the type in the nav links.
Ex HOME | BLOG | DESIGN | TUTORIALS | FREEBIES | SUBMIT
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
You’re now done! Your final image should look like this, Click to Enlarge
