Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner!
This time you will be learning how to create a simple dark WordPress style layout with really detailed step by step instructions and a lot easy to follow and understand screenshots, so I hope even for beginners it shouldn’t be hard to follow-up.
Let’s get started – I hope you will make out together with me until successful finish together !
Resources you will need to complete this tutorial:
Here is the final outcome with what we will creating, click on image for full size preview:
Before we get started let’s download 960grid system at first for easy Guideline creation.
Rename the layer1 to Header (put everything in separate folder like Header,Content, Navigation, Footer to help to be organized better).
It’s up to you how will you rename the layers just make it sure that you are staying organized since we will have a lot of layers at the end of tutorials and it’s will be really hard to navigate through them if you leave the default naming and structure.
Add this Blending Option to current layer:
Above our stroke created 1px solid line which is making header to look a little bit embedded.
Such effect has been used a lot in web designs lately, adding to design subtle, but noticeable separation between contents.
Inside the Header folder create another folder name it Logo.
Create a guideline 47px from the top, the step is the same as we created our guideline for our header.
Select the Text Tool(T) and put up your Site name.
Add this Blending Option there:
Create another folder inside the Header name it Search, put all your search related layers there.
Add these Blending Options:
Select Custom Shape Tool(U) then find the search icon. Fill it with #999999. For the search text use
Create another folder in the Header folder name it Navigation.
Add these Blending Options
For the navigation links I used the links found in 1stwd, you can do the same.
Duplicate the text layer and change the color to black. Using the up arrow key on keyboard press it twice and you get nice embedded effect.
Duplicated layer need to be under White text layer.
Make a selection to our nav_bg by holding CTRL + Click to the layer.
While it is selected:
This means that whatever you selected will not be included to the selection. Make a selection from middle across to the top of nav_bg.
Go to Select > Modify > Contract to 1px
Fill it with #141414
Now we will create a divider for each link. Select Rectangular Marquee Tool(M) and create a 1px line.
Create a new folder name it : Welcome
Select Rounded Rectangle Tool(U) radius to 10px.
Add these Blending Options:
Select Text Tool(T) and put up your welcome message.
Create another folder inside the welcome folder and name it button.
Select Rounded Rectangle Tool(U).
Add these Blending Options to layer:
Bevel and Emboss
Select Text Tool(T):
Create another folder and name it Slideshow.
Create a new layer and name it slideshow_holder.
Select your Rectangle Tool(U) and do put it the same way as I did:
Apply the same style as we did to our navigation before. You can do this by pointing at the fx on the layer hold ALT and drag it to the layer you wanted to apply. (or just right click on layer > Copy Layer Style and paste it on whatever layer you want),
Try to achieve this selection by using the same step as we made to our navigation. Instead of Rectangular Marquee Tool(M), I used Polygonal Lasso Tool(L).
Make a selection to slideshow_holder.
Go to Select > Modify > Contract to 10px and fill it with black color (#000)
Place the image at the top of the contracted layer. Now CTRL + CLICK on slideshow_holder layer as shown above in the screenshot.
Here is the preview of what we will be working on:
Select Rounded Rectangle Tool(U) and put radius 10px. Place it as shown in the screenshot below and duplicate layer like 4 more times.
Notice the second rectangle is different. We will use this arrow to serve as an identifier and active section.
Do this by Rasterizing the shape and use Pen Tool(P) to create an arrow headed shape.
The margin between each slideshow link is 5px.
Apply the same style as we had to our navigation. For the identifier apply this gradient overlay:
Again the same way as we did our navigation we’ll do it here too – simply repeat the steps I taught you previously. For our active identifier use color #156f99.
To add more styling to our identifier and make it look even cooler, create another layer and repeat the same step we did to our slideshow_holder layer to achieve shining effect.
But for this time instead of just filling it with white color let’s use white gradient to make it fade from left to right.
For the text here I used Verdana 14px.
Make sure that the identifier is placed on the top of our slideshow_holder layer.
Create another folder and name it Posts. Here is preview of what we will making here:
Next we will create a date icon besides our title.
Create a rectangle and apply the same styles to it as we did to our identifier in slideshow section.
Add 1px line color #115b7e in blending options Stroke:inside.
Next is our post_thumbnail and text. Select Rounded Rectangle Tool(U).
Grab any sample image you like and link it with this layer.
Select Text Tool and put up there some dummy text, You can use http://www.lipsum.com/.
Change text color to #999999. Also right after the text paragraph let’s add two 1px lines and move one on the top so it gets that embedded effect, same as we did to our navigation separators. Color could be #000000 and #2a2a2a.
Duplicate the post folder 3 times, align distance from each post to be 20px.
Now when we have got actual blog posts, it’s time for us to create pagination. Create another folder and name it pagination.
Below you can see the preview of what we are going to create.
For this example we will make 7 boxes with 5px distance between each other. I labeled it with 1-7 Verdana text, with size: 14px.
For 2-7 numbers let’s apply the same style as we did to our navigation. Only number 1 would be different because it will serve as active or hover state on our pagination.
For the number 1 background rectangle apply the same style as we did to our identifier.
Create another folder and name it Advertisement. Select Rounded Rectangle Tool(U). Apply the same style as we did to our welcome message previously.
Grab some advertisement default images from any blog you wish. Center them up with 10px distance from each other .
Create another folder name it footer.
Select Rectangular Marquee Tool(M) and create a big Rectangle 40px under the pagination, fill it with #141414 color.
Add the same divider as we used previously several times already..just duplicate layers and adjust them to correct width.
Select Text Tool(T) and put here some dummy text. I used the same font size we had for header an the paragraph text before. Also I grabbed RSS icon from icon set and resized it down to
24px and put it right under our dummy text.
For the next step we’ll add categories using the same font, size and colors as for the left footer section. Again I used the same divider for each category.
Now let’s add to Popular Posts section the same styling as we had to our Latest Post Entry before, just copy previous styles.
Here’s what we will creating next – Back to top button.
Select Rounded Rectangle Tool(U) and place it as shown in the screenshot below.
Apply the same style as we had to our navigation section. Now use the same trick we learned previously to achieve the selection shown below
and fill it with color #141414..
Add a divider.
Select Text Tool(T) and write “back to top” using Verdana font with size 12px and white color (#FFF). Duplicate the text layer.
Change original text to color black(#000) and by using the arrow up tool move it twice to make the text inset.
Now select Custom Shape Tool(U) and find the arrow shape, flip it 90 degrees. (ctrl+t to get transform controls).
Add these Blending Options to arrow layer:
Duplicate the arrow shape and use the same trick as we did to our text inset.
The last thing for us to do is to add copyright info. Place it wherever you want in the footer, but I placed it at the bottom left section of the page.
Ok,We’re done now. I really hope you enjoyed this tutorial and will keep coming back for more.
If you have any question or suggestions please do leave your comment to let me help you too. Thanks!
Show off your outcomes as well – super excited to see them by the way!
PSD File: Click here to download.
Get The Only Freelancer crash course you will ever need to read!
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. Other than that he loves Coffee and his Girl.
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!