Photoshop Tutorial – How To Design A Blog Like IncomeDiary

How We Designed The IncomeDiary Splash Page

It’s been around 2 months since we released the new IncomeDiary design, however I still come across people copying the old design day after day, perhaps because it was just that damn good! Some do a great job, taking the concept further and others, well they do a really bad job, that’s why I have decided to share with you all, how we did it, so you can do it yourself. Let us know in the comments how you found the tutorial and what you plan to do with your own blog.

Originally when I created IncomeDiary we used the BusyBee Theme by Woothemes and after 4 explosive months of blogging and receiving well over 200,000 visitors, I decided to upgrade the blog. The frame work of the BusyBee theme was great so I didn’t want to get rid of it, it did everything you wanted, that’s why we only modified the homepage. Your homepage should be used to funnel your readers through your site in the way YOU want them to, for me I wanted them to go to sign up to my eCourse, followed by looking at all my best affiliate posts.

Imitation is the highest form of flatter.

If your doing something great, people will always copy you, at first I use to get really annoyed, spending hours and hours brainstorming new ideas just so other people could copy it the next day. These days, I want people to copy me because like I just mentioned, if they do, it’s because your doing some great. If I’m really honest, I even copy a few things from people, what I like to do is copy all the best things from people and put them altogether to make one really GREAT thing. Looking at it that way, we would be stupid not to copy ideas from people if they are proven to work well!

Some Friends and Readers Using IncomeDiary As Inspiration

How To Design a Blog Using Photoshop

In this Photoshop tutorial I will show you how the home page of the Income Diary blog was created.

Final Image Preview

This is the web layout that we are going to create. Click on the following image to see the full size version or visit www.incomediary.com to see the functional website. Let’s get started!

Step 1

Create a new document in Photoshop with the dimensions 1240px by 1200px. Then go to Layer > New Fill Layer > Solid Color and use the color #dce0d2.

Step 2 – Creating the header

Create a new group and name it “header”. Create a new layer inside this group. Then select the Rectangular Marquee Tool (M), create a selection with the height 27px at the top of your document and use the Paint Bucket Tool (G) to fill this selection with the color #283409. Name this layer “top bar”.

Step 3

Select the Type Tool (T) and add some text onto your top bar. I used this area to add links to certain pages of the website and the RSS links.

Note: You can start using guides to organize your layout better. To create a guide, activate the Rulers (Ctrl/Cmd + R), click on the top or on the left ruler and drag guides towards your document.

Step 4

Create a new layer. Then use the Rectangular Marquee Tool (M) to create a selection with the height 132px. Select the Paint Bucket Tool (G) and fill this selection with the color #3c4c16. Name this layer “header bg”.

Ctrl/Cmd-click on the thumbnail of the “header bg” layer to select it. Then create a new layer, select a big soft brush (B) and paint with it over the upper left area of the header using the color #788e42. Hit Ctrl/Cmd + D to deselect. Name this layer “light”.

Step 5

Select the Type Tool (T) and write the name of your layout using the white color in the left side of the header. Use the Layer Style window to add a shadow to this text. Then write a tagline beneath the first text using a light green color.

As you can see in the following image I putted a money illustration next to the text and some banknotes with a low opacity beneath the text.

In the right side of the header I used an image of the Income Diary Blogging Course.

Step 6

Use the Rectangular Marquee Tool (M) to create a selection with the height 40px. Create a new layer, select the Gradient Tool (G) and drag a vertical #fefefe to #e6e6e6 gradient from the top of your selection to the bottom. Name this layer “navigation bar”. Then select the Type Tool (T) and write the name for your navigation menu items using the color #212121.

Step 7

Create a new group and name it “background”. Then create a selection with the height 325px beneath the navigation bar. Create a new layer and fill the selection with the color #b8bda9.

Step 8

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like the one you see in the following image. Fill this selection with the color #c8ccbc and hit Ctrl/Cmd + D to deselect. Then use the Erase Tool (E) and a big soft brush to erase the left and right areas of this rectangle.

Step 9

Use the Single Row Marquee Tool to create a selection with the height 1px. Create a new layer and fill this selection with the color #dde1d3. Name this layer “1px line” and put it beneath the dark rectangle.

Use the Rectangular Marquee Tool (M) to create a selection with the height 20px. Then use the Gradient Tool (G) to drag a #d1d5c7 to transparent gradient. Hit Ctrl/Cmd + D to deselect and put this gradient right beneath the line which you created.

Step 10

Create a new group and name it “content”. Create a new layer and use the Rectangular Marquee Tool (M) to create a white rectangle like the one you see in the following image. Name this layer “content bg”, double-click on it and use the settings from the following image for Stroke.

Step 11 – Creating the ‘Sign Up’ area

Create a new layer and use the Rectangle Tool (U) to create a green rectangle like the one you see in the following image. Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay. Name this layer “bg” and hit Ctrl/Cmd + G to put it inside a group. Name the group “Sign Up”.

Step 12

Ctrl/Cmd-click on the thumbnail of the “bg” layer to select it. Then click on the “Sign Up” group and go to Layer > Layer Mask > Reveal Selection. Now everything we put inside this group will be visible only over the rectangle area.

Step 13

Download some rays brushes and install them. Create a new group and name it “rays”. Then set the foreground color to white, select one of the brushes which you downloaded and use it to create rays on your rectangle. Use each brush in a new layer and set the blend mode of each layer to Overlay 5-8%.

Step 14

Create a rectangular selection like you see in the image below. Then go to Select > Modify > Feather and set the radius to 2px. Select a white soft brush (B) and paint with it over the bottom edge of your selection. Hit Ctrl/Cmd + D to deselect. Name this layer “Extra Highlight Wall” and set its blend mode to Overlay 30%.

Step 15

Create a new layer and use the Single Row Marquee Tool to create a selection with the height 1px at the bottom of the green rectangle. Fill this selection with black. Then set the opacity of this layer to 20% and name it “1px dark line”.

Step 16

Use the Rectangular Marquee Tool (M) to create a green rectangle with the height 10px into a new layer (I used the color #3f4f1a). Then create another rectangular selection beneath the green bar and drag a vertical white to transparent gradient (G). Name this layer “Feature Highlight Gradient” and set its blend mode to Overlay 75%.

Step 17

Create a new layer and set the foreground color to black. Then select a big black soft brush (B) and paint with it over the edges of your green rectangle. Name this layer “shadows” and set its opacity to 35%.

Step 18

Now we will use a Hue/Saturation adjustment layer to change the color of this rectangle into blue. Go to Layer > New Adjustment Layer > Hue/Saturation and set the Hue to +123.

Step 19

Use the Type Tool (T) to add some text inside your blue rectangle. To create bullet points use the Ellipse Tool (U). You can also add a shadow to your text layers using the Layer Style window.

Step 20 – Creating a sign up form

Select the Rounded Rectangle Tool (U), set the radius to 5px and create a white rounded rectangle with the dimensions 240px by 35px. Double-click on this layer to open the Layer Style window and use the settings from the following image. Hit Ctrl/Cmd + J to duplicate this rounded rectangle and move the new one down using the Move Tool (V). Then use the Type Tool (T) to write the text.

Step 21 – Creating the submit button

Use the Rounded Rectangle Tool (U) to create a new rounded rectangle with the dimensions 240px by 60px and the color #779234. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 22

Ctrl/Cmd-click on the vector mask of the button layer to select it. Then create a new layer and drag a vertical #dfeaac to transparent gradient from the top to the bottom of your selection. Hit Ctrl/Cmd + D to deselect.

Use the Rectangular Marquee Tool (M) to select the bottom half of this layer and erase it. Name this layer “Gloss” and set its opacity to 40%. Then use the Type Tool (T) to write a text onto your button.

Step 23 – Creating the ‘From the blog’ area

Create a new group and name it “From the blog”. Then use the Rectangular Marquee Tool (M) to create a light gray rectangle with the dimensions 300px by 185px into a new layer (I used the color #eaeaea). Add a 1px stroke to this layer using the color #dadada.

Add a photo inside the gray rectangle and add a 1px white stroke to this layer.

Step 24

Use the Type Tool (T) to write the text for the “From the blog” area.

Step 25

Now we will create a dotted line between the two headlines of the gray rectangle. First, we’ll need to create a pattern. Create a new document with the dimensions 2px by 1px and transparent background. Set the foreground color to black and zoom in as much as you can using the Zoom Tool (Z). Then select the Pencil Tool (B), select a 1px brush and click once in the left side of the document. Go to Edit > Define Pattern, name your pattern and click OK. Now you can close this document.

Use the Line Tool (U) to create a horizontal line with the weight 1px between the two headlines beneath the photo. Double-click on this layer to open the Layer Style window and use the settings from the following image for Pattern Overlay. Set the blend mode of this layer to Darken 10% and name it “dotted line”.

Step 26 – Creating the ‘Featured interviews’ area

Create a new group and name it “Interviews”. Then use the Rectangular Marquee Tool (M) to create a square with the dimensions 85px by 85px and the color #eaeaea. Add a 1px stroke to this square using the color #dadada. Duplicate this square three times (Ctrl/Cmd + J) and use the Move Tool (V) to organize your layers. Then select the Type Tool (T) and add some text next to each square.

Step 27

Add a photo in the middle of each square. Then create a dotted lines between the posts just like you did at step 25. However, use the settings from the following image for the dotted line layers and set the blend mode of each of these layers to Lighten.

Step 28 – Creating the sidebar

Create a new group and name it “Sidebar”. Create a new layer and use the Rectangular Marquee Tool (M) to create a rectangle with the width 290px and the color #ebede6. Name this layer “sidebar bg”.

Step 29

Use the Rectangular Marquee Tool (M) to create a selection beneath the blue rectangle like the one you see in the image below. Create a new layer and drag a black to transparent gradient at the top of the selection. Leave a distance of 1px between the blue rectangle and the gradient. Name this layer “black gradient” and set its opacity to 25%.

Step 30 – Creating the ‘About’ area

I putted a photo of Michael Dunlop at the top of the sidebar, a short description of him and a button that leads to his full story. To create the button I used the Rounded Rectangle Tool (U) with the following layer style settings.

Step 31

Create a new group inside the “Sidebar” group and name it “Forums”. Create a new layer, select the Rectangle Tool (U) and create a gray rectangle with the dimensions 290px by 96px. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “rectangle”.

Step 32

Use the Type Tool (T) to add some text in the middle of your orange rectangle. Then select the Line Tool (U) and drag a black horizontal line with the weight 1px at the bottom of this rectangle. Name this layer “1px line” and set its opacity to 11%.

Step 33

Ctrl/Cmd-click on the thumbnail of the “rectangle” layer to select it. Then select the “Forums” group and go to Layer > Layer Mask > Reveal Selection.

Step 34

Duplicate the “Forums” group by dragging it over the ‘Create a new layer’ button from the bottom of the Layers panel. Move this new rectangle beneath the first one and change its text. Then go to Layer > New Adjustment Layer > Hue/Saturation, set the Hue to +180 and put this layer right above the “rectangle” layer.

Step 35

Duplicate the “Resources” group and move the new group down. Change the text of this new rectangle and set the Saturation of the Hue/Saturation adjustment layer to -100.

Step 36

Use the Rectangular Marquee Tool (M) to create a selection in the left side of the sidebar like you see in the following image. Then create a new layer and drag a black to transparent gradient from the left side of the selection to the right side. Name this layer “shadow” and set its opacity to 30%.

Step 37 – Creating the footer

Create a new group and name it “footer”. Then use the Rectangular Marquee Tool (M) to create a rectangle with the height 66px and the color #3a3e31 at the bottom of your document. Name this layer “footer bg”. Then use the Type Tool (T) to add a copyright statement.

Step 38

Create a new rectangle above the previous one with the height 33px and the color #b7bda9. Ctrl/Cmd-click on the thumbnail of this rectangle layer to select it. Then create a new layer, select the Gradient Tool (G) and drag a radial #d5d7ca to transparent gradient from the center of the rectangle to the edge of your layout. Hit Ctrl/Cmd + D to deselect.

Step 39

Use the Line Tool (U) to create a horizontal line with the weight 1px and the color #e8eae0 at the top of the smaller rectangle. Then select the Eraser Tool (E), select a big soft brush and erase the left and right sides of the line.

Step 40

Finally, create a new layer and use the Rectangular Marquee Tool (M) to create a border with the weight 8px and the color #b2b6a4 around the blue rectangle.

Final Result

Here is the final web layout. I hope you enjoyed this tutorial and you learned some new Photoshop tricks. Click on the following image to see the full size version.

Want To Take Your Photoshop Skills Further?

Do you want to know the fastest way to master the basics of Adobe Photoshop? Check out Learn Photoshop Now Free Course!