After posting my Over The Top Shadows Photoshop Tutorial, and it being really rather easy. I thought I would post another one that required a little more skill, but not enough to scare anyone away. Last year I made a Template in Photoshop named Softblue. I had a number of people ask how to make it, or something similar so I thought I would post this so keep reading to find out how it's made!

Softblue was originally made as a personal portfolio website, with a blog/small community. You can use it for something like this, or modify it and use it for whatever you want. modifying it is rather easy, even changing the colors. But it you run into any problems post them in the comments and I will help you out.

Before we start, here is what the layout is going to look like at the end of this tutorial.

Step 1.) The background

To start off create a new Photoshop document with the dimensions of 981x1350.

 Now set your foreground color to #2e343a and fill your background.

Step 2.) Create the website body

Now with the Rectangular Marquee Tool selected create a new layer and select a few pixels inside the document and all the way to the top and bottom like in this screen shot, and fill the selected area with #272c32.

Now apply the following Layer Blends to the website body layer we just created.

Outer Glow:

Stroke:

Step 3.) Create the header

The header of this layout is rather simple but nice. To start again, grab your Rectangular Marquee Tool and select a area (on a new layer of course), with a size of your choice inside your body layer.

Now with your foreground and background colors set to #3ee5f7 and #18bddb grab your Gradient tool and draw a straight line by holding shift from bottom to top like this.

Now deselect, and you should have this.

To give the header some highlights we will do two things. First we are going to add a one pixel stroke.

Create a new layer and select your Pencil tool (b). Using the Hard Round 1 Pixel Brush and #85fbfd, while holding down Shift draw a line from the top left of the header to the right.

Now we are going to add a thicker stroke to the foot of the header. Select your Rectangular Marquee Tool and select a area about 5-6 pixels high and drag it all the way from left to right like in the last step. Now fill this selection with #1dbfe5.

And finally click on the main header layer again and apply these layer styles.

Drop Shadow:

Gradient Overlay:

Step 4.) Top search bar

For the top search bar grab your  Rectangular Marquee Tool and make a selection like this, and fill it with #13171a.

With the Rounded Rectangle Tool, and a radius of 15px draw the background for your search box using #323a42.

Once done apply these layer styles.

Drop Shadow:

Inner Shadow:

Step 5.) Navigation

The navigation is really rather simple. Start off by creating your separators for the navigation text.

Set your foreground color to #3f4a54, and your background to #2b3339. On a new layer with your Pencil Brush Tool draw a 1px line using your foreground color. Now do the same again with your background color one pixel to the right.

You should have something like this.

Now add a Layer Mask to this two lined layer. To do this click the layer mask button on the bottom of the layer pallet (F7).

With the layer mask selected grab your Gradient Tool. Set your Gradient to Foreground to Transparent. With these options.

While holding shift click and drag from bottom to top, let go and like magic you have your fading effect to the line layer.

Now create your text and just duplicate your faded line layer and place them in between your navigation text.

Here is what you should have at this point. 

Step 6.) Under the header

The under the header area is totally optional / up-to-you. This will be different for everyone so feel free to add whatever you want.

I added, RSS, User Accounts, and Downloads. The line separating them is just the lines we made in the last step with the opacity lowed to about 35%. This is what I have now.

Step 6.5) Under the header shading

Grab your Rectangular Marquee Tool and make a selection like the one below.

Fill this selection, on a new layer with color #3a424c. Now click "Filter -> Distort-> Diffuse Glow". And use these settings.

After that you will want to lower the opacity to in and around 40%. To apply the fade effect repeat the fade effect step in step #5.

Now you should have something like this.

Step 7.) Under the navigation shading

Start this by duplicating the shading layer you just created and move it up under your navigation text and separating lines. Like this.

This part is optional. I grabbed my Dodge Tool, selected shadows and brushed a little on the "body layer" around the navigation. This gave it more depth.

I now have this.

Step 8.) Content layout

How the content is going to be displayed is really up to you. It will be different for everyone. You can use what I am going to show you...or not at all.

Start off by setting your foreground color to #2a2f33, and your background to #1b2024. Now grab your Pencil Brush Tool with it on Hard Round 1 Pixel Brush. Hold shift and draw a line the split the content area. Now duplicate CTRL+J this layer and move it one pixel to the left by pressing the <- key on your keyboard once. CRTL+Click this layer and fill it with your background color CTRL+Backspace. Now duplicate CTRL+J this layer and move it two pixels to the right by pressing -> on your keyboard.

It should look something like this.

Now that we have our vertical line separating the content from the sidebar we will need a horizontal line separating the different content items.

With the same colors used in the last step create a new layer.  While holding shift and draw a line using #1b2024. Now duplicate this layer CTRL+J and move it one pixel down by pressing down on your keyboard arrow once.

CTRL+Click on this layer and fill it with #2a2f33. And again duplicate this layer CTRL+J and move it one pixel down by pressing down on your keyboard arrow once. And thats it, your done! Whenever you need to use this line again just select all the layers and duplicate them and move them where ever you need.

Here is what it should look like.

Conclusion

And your done! Was pretty easy now wasn't it? Make sure you show use your final result but posting it in the comments! Hope you enjoyed it and found it useful!

Again here is your finial result.

If you have any questions/comments or need some help please post them in the comments below!

Click here to download the .psd used in this tutorial.

Subscribe to our RSS Feed!       Follow Adrian on Twitter!