In today’s tutorial we will create a smooth wordpress layout that is easy to create and looks amazing once complete
Preview:
Create a new photoshop document
1 Open up Photoshop, create a new document that is 1000px by 1200px, with a background color of #323232
Creating the background
2 Set your foreground color to #444444 and background to #272727 Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection
Creating the navigation
3 Select the rounded rectangle tool (U) create a rectangle (any color) with a width of 682px and height of 100px
4 Select the rectangular marquee tool (M) create a selection that overlaps the bottom half of the navigation, delete the bottom half
5 Double click the layer to open the layer styles dialouge box, use the settings below
Creating the main content area
6 Select the rectangle tool (U) create a white (#ffffff) rectangle with a width of 689px and height of 798px
7 Double click the layer and open the layer styles dialouge box, use the settings below
8 Select the rounded rectangle tool (U) create a white (#ffffff) rectangle with a width of 657px and height of 210px
9 Double click the layer to open the layer styles dialogue box, use the settings below
10 In the middle of the box I added a picture
11 Select the rectangle selection tool (M) create a rectangle with a width of 128px and height of 193px
12 Set the foreground color to #535b70 and the background color #272b35. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection, place the rectangle to the left of the image
13 Create one white and one black 1px lines with a height of 193px set the layer blending options to overlay and its opacity to 60% place it to the right of the newly created rectangle
Creating the post info bar
14 Select the rectangle selection tool (M) create a rectangle with a width of 657px and height of 36px
15 Set the foreground color to #535b70 and the background color #272b35. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection, place the rectangle below the post image preview
Creating the post dividers
16 Create one white and one black 1px lines with a width of 657px set the layer blending options to overlay and its opacity to 60% place it below the post info bar
Creating the Footer
17 Select the rectangle selection tool (M) create a rectangle with a width of 690px and height of 127px
18 Set the foreground color to #b56b31 and the background color #933c13. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards. place the rectangle below main content area
Creating the Sidebar
19 Select the rounded rectangle tool (U) create a rectangle with a color of (#4d5360) width of 432px and height of 563px
20 Select the rectangular marquee tool (M) create a selection that overlaps the main content area. delete the area
21 Create one white and one black 1px lines with a width of 277px set the layer blending options to overlay and its opacity to 60% place it inside the sidebar area it should reach both sides of the shape
Creating the Content
Creating the logo
22 I found a USB icon from Iconfinder.net. Next to the icon I added some text, follow the image below for the settings
Creating the navigation
23 For the navigation I used the horizontal type tool (T). I used the settings below for the text
Creating the post area content
24 For the post area content I added indented text to the image area, Simple ariel font on the info bar and the excerpt in simple Ariel font below the info bar
Creating the footer content
25 For the footer I used the horizontal type tool (T). I used the settings below for the text
Creating the sidebar content
26 For top part of the sidebar I added social media icons, underneath that I added 125px by 125px banner ads
27 I created a friends list using simple overlay blocks with a white 1px stroke on the top
You have now completed the tutorial
One Response
Excellent wp design. Love the social icons and inset typography. Keep it coming!