1stwebdesigner

Posted by ryan | Posted on 18:30

Posted: 10 Dec 2010 02:00 AM PST

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.

Open 960_download\templates\photoshop\960_grid_12_col.psd
CTRL + SHIFT + C to change the canvas size.

Step 1: Working with Background and Header

Fill the background color with #181818.
Create a guideline for our header area. Add it to be 158px from the top. (if you don’t see rulers press CTRL+R).

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.

Make a selection using Rectangular Marquee Tool(M).
Fill it with #141414 this will serve as our header_bg.

Add this Blending Option to current layer:

Stroke:

Size: 1px
Color: #272727

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.

Step 2: Working with Logo

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.

FIRSTWEB – 36pt
DESIGNER – 18pt

Add this Blending Option there:

Gradient Overlay

Step 3: Working With Search Section

Create another folder inside the Header name it Search, put all your search related layers there.

Select Rounded Rectangle Tool(U)
Set the Radius to 10px.
Fill it with #1d1d1d

Add these Blending Options:

Drop Shadow

Inner Shadow

Select Custom Shape Tool(U) then find the search icon. Fill it with #999999. For the search text use

Verdana
Italic
Color – white (#FFFFFF).

Step 4: Working with Navigation

Create another folder in the Header folder name it Navigation.

Create a new layer and name it nav_bg.
Select Rounded Rectangle Tool(U)
Put radius to 10px

Add these Blending Options

Drop Shadow

Inner Glow

Gradient Overlay

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:

Select Rectangular Marquee Tool(M)
Hold Alt so you can see that there is a minus sign beside the plus pointer.

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.

Step 5: Working with Welcome Message

Create a new folder name it : Welcome

Select Rounded Rectangle Tool(U) radius to 10px.

Add these Blending Options:

Drop Shadow

Inner Shadow

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:

Drop Shadow

Bevel and Emboss

Gradient Overlay

Select Text Tool(T):

Drop Shadow

Step 6: Working with Slideshow

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).

Create a new layer
Name it shine
Fill it with white color
Change the blend mode to Overlay and opacity to 30%.

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.

Step 7: Working with Slideshow Links

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.

Step 8: Working with Posts

Create another folder and name it Posts. Here is preview of what we will making here:

Select Rounded Rectangle Tool(U).
Apply the same style as we did to our welcome message.
Fill it with #141414.

Select Text Tool(T).
Put up some text there.
Bring up the icons and resize them 16px. (CTRL+T to resize)

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.

Step 9: Working with Pagination

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.

Select Rounded Rectangle Tool(U)
Set radius to 5px.

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.

Step 9: Working with Advertisement Section

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 .

Step 10: Working with Latest Posts

Create another folder and name it Latest_posts.
Select Text Tool(T).
Copy all the styling from screenshot below, everything is described and visible there.
I added the same divider we used to divide our posts previously, just duplicate these layers and resize them to fit for this section.

Step 11: Working with Footer

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:

Gradient Overlay

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.