Welcome in this new Photoshop tutorial on 2expertsdesign.com. Today you can learn how to create a fancy graphic blog webdesign! This Photoshop tutorial is composed of three different tutorials:
- Create the webdesign in Photoshop (this is it!)
- Learn how to do a shading effect with CSS & jQuery (publish soon)
- Then how to switch a psd file into a great HTML / CSS Template (publish soon)
After that I can insure you that you will be the best to do a perfect website 
but before this, let me introduce the final result of this tutorial.
I allow several important parts on this webdesign, like a header with logotype and static pages, a carousel to browse the latest posts (or most popular posts) and below there are a sidebar with RSS and twitter counter + List of sponsors + Search engine and a content (on the left) with special design for the last post (in the .psd there is just the last post but you can display as example the last five posts) and in the bottom there is a special Latest post list. To finish the footer in the bottom of this template, we will add the Copyright and Partners list.
Now I would like to show you the graphic details, because I think that to do a good and professional webdesign you must every time add in your work the small extras which will make the difference .We can name it as “the spirit” of your webdesign!
So look at these pictures:
And see now the different design characteristics
- The glossy effect on the menu, and on the buttons
- The colours: black, grey, white, and blue
- The shadows (under the menu and in the sidebar)
- And to finish the button lay down on this grey footer (in the carousel, search engine, and in the content)
So now, go ahead to start this tutorial, open Photoshop and follow my explanations step by step, I see you by the final step
Step 1 – Create a new document
To start the creation you need of course to create a new document, go to File> New (Ctrl/Cmd + N) and edit the name (Template in my example), change the canvas with (1000px) and height (1500px).
Step 2 – Create the background
Change the foreground colour in black and go to Edit> Fill or press Shift + F5. The layer “Background” is insistently filled in black. Then duplicate the lay “Background” (drag and drop the layer on the new layer icon).
And go to Layer> Layer style> Gradient overlay and edit it : First colour dark grey #444444 location 0% and final colour dark grey #141414 location 60%.
Step 3 – Create the header
In the header there are two parts, the left with the logotype, and the right with important links. To design them it’s easy because you have to use just and just the Horizontal type tool, but before this operation, you need to create some guides. Yes the guides will help you to adjust and to create a webdesign with perfect proportions!
Go to View> Rulers (or press Ctlr/Cmd + R). Now go to View> New guide, and check Horizontal and edit the position to 100px.
So you know how to do, you’re going to create all horizontal guides Location 100 px (header), Location 140 px (menu), Location 370 px (carousel) and to finish Location 400 (carousel footer).
So to finish this step, select the Horizontal type tool (T) and add your logo on the left, to do it use a special font! On my example I use the Heldustry black. To finish, add on the right the different links and select in the options bar None (Set the anti-aliasing method).
Put these two layers on a new group you named “Header”.
Step 4 – Create the menu 1/3
Before to create the menu you must add two new vertical guides. Go to View> New guides and check Vertical and edit the location by 40px, click on Ok. Do the same thing with the Location : 960px. Verify that the menu is correctly between these guides.
So now create a new group and name it “Menu” (go to Layer> New> Group and double click on its name to edit it). Then select the Rectangular marquee tool (M) and make a rectangular selection (Location : left 40px, right 960px, top 100px and bottom 140px). Change the foreground colour by black, create a new layer (go to Layer> New> Layer), and rename it “Base”, now to finish go to Edit> Fill (Shift + F5).
Add a layer style to create on this menu a gradient (black->grey).
Step 5 – Create the menu 2/3
Create a new layer and name it “First reflect” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). Then create a selection around the shape (Ctrl/Cmd + click on the layer Base’s thumbnail (in the layer panel).
Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5).
Get down the selection of 20 pixels and press Delete.
Duplicate the layer “First reflect” and rename it “White stroke”, hiding it (click on the eye icon).
To finish the reflect, go to Layer> Layer Mask> Reveal All. Select the Gradient Tool (G) and in the options bar open the gradient picker and choice the second thumbnail (Foreground to transparent). Change the foreground colour to Black and create a new gradient on the Layer mask.
Step 6 – Create the menu 3/3
To finish the menu you must create a white stroke on this top. To do this, select the layer “White stroke” and delete all the white pixels but keep just a line of 1 pixel high. Get down the opacity to 20%.
Step 7 – Add the titles
Select the Horizontal type tool (T) and add the titles above the menu. Select on the options bar : 12px, Crisp and colour white! Finally add a drop shadow, go to Layer> Layer style> Drop shadow and edit the Distance: 1px and size: 0px.
Step 8 – Create the hover
Create a selection around the menu (Ctrl/Cmd + click on the layer “Base” thumbnail (in the layer panel)… Then create a new layer and rename it “Hover” and go to Edit> Fill. Then go to Layer> Layer style> Gradient overlay and change the colours: location 0% light blue #5a9eef and location 100% dark blue #0377ff.
Step 9 – Create the carousel 1/2
Create a new group and rename it “Carousel”, create into this group a new layer a rename it “Base”. Then use the Rectangular marquee tool (M) to create a selection between the guides: top 130px, left 40px, right 960px bottom 370. Change the foreground colour by the white and go to Edit> Fill.
Step 10 – Create the carousel 2/2
In this step you will create a shadow under the menu. To do it, create a new layer and rename it “Shadow”. Select now the Gradient tool (G), change the foreground colour by the black colour and in final, create a black gradient on this layer (use for this the foreground>transparent gradient).
Now you’re going to create a nice effect on this shadow (remember the spirit of the webdesign , to do it start to create two new guides, go to View> New guides: first guide: vertical, location 140px and second guide: vertical, location 860px. Add on the layer “Shadow” a layer mask (go to Layer> Layer mask> Reveal all) then change the foreground colour by black and create on the layer mask a gradient (foreground>transparent) on the left (start the gradient on the vertical guide 40px until the second vertical guide 140px). Do again the same thing for the right part.
Step 11 – Import the logo
On the left of the carousel I decide to display a big logo of the last post. So import a logotype and put it on the left (use the Move tool (V)). On the layer panel put the layer “Logo” behind the layer “Shadow”. To finish, press Ctrl/Cmd + T to activate the free transform and reduce the height of the logo until the horizontal guide 370px.
Step 12 – Add the content
This step is really easy, select the Horizontal type tool (T) and create a text on the right. Title: Georgia 28px and the text same font and size: 12px.
Step 13 – Create the carousel footer
Create a new group “Footer” into the group “Carousel” and create a selection on the bottom of the carousel (as in this picture). Change the foreground colour to a grey #4d4d4d and go to Edit> Fill.
Move the selection of 15 pixels to the top and create a guide on this top. Then move down the selection of 30 pixels and create another guide on the top. This guide will help you to create the button “Read more”.
Step 14 – Create the button
Into the group “Footer” create a new group and name it “Button”. Then select the Rounded rectangle tool (U) and in the options bar edit the radius by 30px and create a rectangle. Start the creation on the right guide and see the Information panel to create a 120px width button.
Then add a gradient on this button. Go to Layer> Layer Style> Gradient overlay. Change the gradient with the first colour light blue # 5a9eef location 0% and second colour dark blue #0377ff location 100%.
Then create a selection around the shape (Ctrl/Cmd + click on the layer shape 1’s thumbnail (in the layer panel).
Create two new layers and rename them “Reflect” and “Stroke white” (to create a layer go to Layer> New> Layer). Then select the layer “Reflect” and go to Selection> Modify> Retract, and contract by 1px. Change the foreground into white colour and go to Edit> Fill.
Select the Rectangular marquee tool (M) and use it to delete the button of the bottom.
Add a layer mask on the layer “Reflect” and use the gradient tool to create the transparent effect.
And finally create again a selection around the button, and contract it by 1px. Select the layer “Stroke white” and change the foreground colour to the white and contract the selection by 1px again. Delete the pixels.
Press Ctrl/Cmd + D to deselect and to add a new layer mask. Then use the gradient tool (foreground > transparent) to hide the stroke bottom.
And to finish the button, add a new layer behind the layer “Shape 1”, rename it “Shadow” and create a selection around the button. Change the foreground colour to the black and go to Edit> Fill. Then press Ctrl/Cmd + T to active the Free transform and with the mouse move the part of the top to the bottom. Press enter to validate the transformation.
And now go to Filter> Blur> Gaussian blur and edit the radius by 2 pixels.
And now get down the shadow of 2 pixels. And reduce the opacity to 50%.
Well, to finish the button use the Horizontal type tool (T) to add a title with a little drop shadow (distance: 1px, size: 0, colour: black).
Step 15 – Footer information
Create in the group “Footer” another group and rename it “Information”. Change the foreground colour by a grey #969696 and use Custom shape tool to create two little arrows (select the shape triangle in the Custom shape picker. With these arrows you can display the next post or come back to the previous. Use the Horizontal type tool (T) to add several links on the right. Use the grey #969696 too. And to finish, add a little drop shadow on the arrows and links.
Step 16 – Create the sidebar
Now your header is finished and by the carousel you can now start the sidebar and this part is easier than all you have done till now Create a new group and rename it “Sidebar”. Create in this group a layer and rename it “Base”. Use the Rectangular marquee tool (M) to create a big selection on the right. Start it behind the carousel and finish it on the page bottom (don’t remember to see the information panel and check that the height is well 300px). Change the foreground colour by #eeeeee and go to Edit> Fill.
Step 17 – Social box
An important thing on a blog is the counter (especially RSS reader and the Twitter followers too). So book the first place in the sidebar for these counters. Download on this page these social icons and import them into your template in Photoshop. And finally use the Horizontal type tool (T) to add the texts (numbers and invitation to subscribe). Drag and drop the different layers regarding the social box on a new group you name “Social box”.
Step 18 – Sponsors
Oh god really hard step : ) Copy and paste the banners from different websites (look at on the right on this page!).
Step 19 – Search engine
Create a new group and rename it “Search engine”. The search engine is composed of three parts:
- A title: use the Horizontal type tool (T) to create it.
- An input: use the Rounded rectangle tool (U) to create it*.
- A button: just duplicate the button created for the carousel **.
* regarding the creation of the input. Create a new rectangle with the Rounded rectangle tool (U) and add on it, two layer styles:
Inner shadow:
Gradient overlay:
Stroke :
** regarding the button. Duplicate the group “button” and use the Move tool (V) to move the button to the bottom sidebar (don’t forget to delete the left part of the footer).
Step 20 – Break in the sidebar
To finish the sidebar you have to create a break between the different parts of the sidebar. To do it, create a new layer, place it on the “Sidebar” group, and rename it “Break”. Use the Zoom tool (Z) to have a better view on the sidebar, then use the Rectangular marquee tool (M) to create a selection : width 300px (all width of the sidebar) and height 10px (see the information panel to know the dimension of your selection).
Now you have to create a gradient in this selection. Select the Gradient tool (G) and selection the foreground > transparent gradient and create one.
Add now a new layer mask on the layer “Break”. And use the gradient to create onto the layer mask a new black gradient to the left till the 100px on the right (use the guide or Information panel to know when you are at 100px). Do it again for the right.
Duplicate the layer “Break” and create a selection around the bottom part (let only a line of 1px height).
Delete and press Ctrl/Cmd + D to deselect. Then select the Move tool (V) and move the copy to 2px on the top.
And to finish the break, get the opacity of “Separation copy” down to 50% and “Break” to 30%.
Duplicate the layer “Break” and “Break copy”. Get the both down, under the sponsors list.
Step 21 – Content
Great, it is soon finished now, still two steps But easy steps, here you have to create the content (title + logo + text + button and a list of links). Why is it easy? because you have just to use the Horizontal type tool (T), something already exists on this template.
Create a new group, rename it “Content” and create into this group a new layer and rename it “Base”. Use the Rectangular marquee tool to create a selection on the left part of your template and change the foreground colour by the white and go to Edit> Fill.
Now, use the Horizontal type tool (T) to add a title and a short description and import a logo (as for the carousel, I used a logotype from 2expertsdesign.com).
Create a new group and rename it “Toolbar”. Duplicate the group “button” (you can find it on the group “Carousel”) and move it into the “Toolbar”. To finish, grow up the layer “Footer” on the left and add on the left the author information.
Finally use again the Horizontal type tool (T) to add a new title “Others posts” and a list of links.
To improve the design you’re going to add a little bullet at the start of links. It’s easy, create a new layer, rename it “Bullets” and use the Rectangular marquee selection (M) to create a little cube selection, fill it in with black, and go again three times to have a result like that.
And look at the result :
Step 21 – Footer
Yes we are arrived at the end : ) and it’s cool because this step is really easy, just create a new group, rename it “Footer” use the Horizontal type tool (T) to add two new titles (Georgia 32px white) Copyright and Partners, and one text and one list to simulate the footer content (use Arial and 12px on the options bar).
Enjoy and look at the result. I like it
So thank you very much to you, you read my Photoshop tutorial and if you enjoy this post, this template and this blog please follow us up on RSS or Twitter I see you later by another 2expertsdesign.com tutorial!