In this web design tutorial, you will learn how to create a winter blog layout in Photoshop. We will use a photo of a forest for the background and then blur areas of that photo to create other elements like the logo and the navigation bar.
Preview
Click on image to see full size.
Tutorial info
- Resources: Winter Photo by heavens-stock
- Fonts: Interstate (Regular Condensed and Black Condensed), Georgia, Helvetica/Arial
Setting up the Photoshop document
1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image. Then use the Paint Bucket Tool (G) to fill the Background layer with the color #e3f2f6.
Grid settings
2 Open the Preferences window (Ctrl/Cmd + K), click on "Guides, Grid & Slices" and use the settings from the following image for the grid. We will use the grid when creating different shapes for our layout because it’s a very easy way to get the exact size we want. To activate/deactivate the grid, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ‘.
Creating the content background
3 Create a new layer and set your foreground color to white. Activate the grid (Ctrl/Cmd + ‘) and make sure that your Info Panel is opened (Window > Info). When you want to create a shape with a certain size, you can see the exact size of that shape in the Info Panel while you are creating it. Select the Rounded Rectangle Tool (U), set the Radius to 10px and create a rounded rectangle with the width 960px. Note that only the top right corner should be rounded. To make the other two corners straight, expand the rectangle beyond the edges of the canvas. Name this layer content bg. Now you can now hide the grid (again, press Ctrl/Cmd + ‘ to toggle its visibility).
Adding guides
4 Make sure that the Rulers are activated by going to View > Rulers and making sure there is a check on the left (Ctrl/Cmd + R to toggle the visibility of your Rulers), then click on the one from the top and drag a guide towards the top edge of your content background. Then drag another guide from the left ruler to the right edge of your content background.
Note: You can also drag guides to the edges of your Photoshop canvas.
Adding a winter photo in the header
5 Download this photo, open it in Photoshop and use the Move Tool (V) to move it into your first document. Name this layer photo and convert it into a smart object (right-click on it in the canvas and select Convert to Smart Object). Go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key and make this layer smaller. Go to Filter > Sharpen > Sharpen and set the blend mode of this layer to Overlay 80%.
Add a mask to this layer by going to Layer > Layer Mask > Reveal All. Set the foreground color to black, select the Gradient Tool (G) and drag a black to transparent gradient from the right edge of the photo to about 100px to the left.
Creating the logo
6 Now we are going to create a logo for our web layout. We will take a small part of the winter photo, blur it, add some color over it, create a subtle stroke and finally add the text. Create a new group (Layer > New > Group) and name it "logo". Create a new layer, then go to Image > Apply Image and click OK. This will merge a copy of all the layers you have into the new one. Use the Rectangular Marquee Tool (U) to create a selection with the size 380px by 90px in the left side of the header. Then go to Select > Inverse (Ctrl/Cmd + Shift + I) to inverse the selection and hit the Delete key. You may not deselect the marquee selection by going to Select > Deselect (Ctrl/Cmd + D).
7 Now we want to blur this layer without modifying the rectangle shape. To do this, first, convert this layer into a smart object (right-click on it and select Convert to Smart Object). Then Ctrl/Cmd + click on the thumbnail of this layer in the Layers Panel to load the selection of the rectangle. Go to Layer > Layer Mask > Reveal Selection. Now your layer has a mask and only what is white on this mask will be visible.
Go to Filter > Blur > Gaussian Blur and use a radius of 5px. As you can see, the layer is now blurred but the rectangle shape did not change because of the mask. And this is what we want.
Add a little bit of noise to this layer by going to Filter > Noise > Add Noise. Use the settings from the following image. Then go to Filter > Sharpen > Sharpen. Name this layer gaussian blur.
8 Go to Layer > New Adjustment Layer > Brightness/Contrast, tick the Use Previous Layer to Create Clipping Mask option and use the settings from the following image.
9 Use the Rectangle Tool (U) to create a rectangle with the same size of 380px by 90px using the color #9dd8ed. Double-click on this layer and use the settings from the following image. Then name it blue rectangle and set its blend mode to Multiply and lower the layer Opacity to 25%.
10 Now we are going to add a subtle stroke to the logo. Use the Rectangle Tool (U) again to create another rectangle with the same size of 380px by 90px. Put this layer beneath the gaussian blur layer, double-click on it to open the Layer Style window and use the settings from the following image. Name this layer stroke.
11 Select the Horizontal Type Tool (T) and write the name of your web layout using the color #f2feff and the font Interstate Condensed Black (if you don’t have this font, feel free to chose any other one you think is suited for this layout).
Double-click on this layer to open the Layer Style dialog box and use the settings from the following image.
Creating the navigation bar
12 Create a new group and name it navigation bar. Then hide the content bg layer because we want to copy an area of the photo that is beneath this white rounded rectangle. Create a new layer inside the "navigation bar" group. Then go to Image > Apply Image and click OK. Now a copy of every layer has been merged into this layer.
Ctrl/Cmd-click on the vector mask of the content bg layer to load a selection of the white rounded rectangle. Show the grid using the shortcut Ctrl/Cmd + ‘. Then select the Rectangular Marquee Tool (M), from the option bar select the Intersect with selection option and create a new selection over the active one. Make sure that the intersected area has a height of 50px (that means 5 squares on the grid).
Now inverse the selection (Ctrl/Cmd + Shift + I) and hit Delete to erase everything but the navigation bar. Press Ctrl/Cmd + D to deselect. Then make the "content bg" layer visible again.
Note: click on the following image to see a larger version.
13 Now we are going to blur the "navigation bar" layer and again, we don’t want to change the shape of this layer. For the logo we have used a mask to keep the rectangular shape intact. Now I’ll show you a different technique. Make sure that the navigation bar layer is active, then click on the Lock transparent pixels button from the top of the Layer Panel. You should see now a white lock in the right side of your layer. Locking the transparent pixels means that any change you do to this layer will affect only the existing pixels. This way we can blur the layer without modifying its edges.
Now we’ll add the same filters which we have used for the logo. First add a 5px gaussian blur. Then add a 0.2% noise, distribution: uniform and the monochromatic option ticked. Finally go to Filter > Sharpen > Sharpen.
14 Double-click on the navigation bar layer to open the Layer Style window and use the settings from the following image.
15 Go to Layer > New Adjustment Layer > Brightness/Contrast, tick the Use Previous Layer to Create Clipping Mask option and use the settings from the following image.
16 Set the foreground color to #b1e3f3, select the Rectangle Tool (U) and create a rectangle over the whole navigation bar. Then right-click on this layer and select Create Clipping Mask to make it visible only on the navigation bar. Set the blend mode of this layer to Multiply and layer Opacity to 25%.
17 Select the Horizontal Type Tool (T) and add the name for your navigation menu items using the color #f2feff.
Creating the search bar
18. Now we are going to create a search bar in the right side of the navigation bar. Create a new group and name it search bar. Select the Rounded Rectangle Tool (U) and set the radius to 6px. Then create a rounded rectangle with the size 250px by 30px using the color #f0f7f9. Name this layer search bar.
Select the Horizontal Type Tool (T) and write something inside your search bar using the font family Georgia with the italic style and the color #a1c6D0.
Creating a featured post area
19 Now we are going to create an area where can be shown some featured blog posts. Create a new group and name it featured. Select the Rectangle Tool (U) and create a rectangle with the size 600px by 250px using the color #ebf3f5. Put this rectangle at a distance of 30px from the left edge of the document and at 20px from the bottom edge of the navigation bar. Name this layer rectangle, double-click on it to open the Layer Style dialog box and use the settings from the following image.
You should also add more guidelines so you can align everything easily.
20 Open any image you like in Photoshop and move it into your document. Put this layer above the rectangle layer, right-click on it and select Create Clipping Mask. Now your image is visible only inside the rectangle.
21 Use the Custom Shape Tool (U) to create a white arrow in the right side of the rectangle. Double-click on this layer and use the settings from the following image for Drop Shadow. Name this layer right arrow.
22 Duplicate the right arrow layer (Ctrl/Cmd + J), go to Edit > Transform > Flip Horizontal and move the new layer in the left side of the rectangle. Double-click on this layer to open the Layer Style window and change the angle of the shadow to 180 degrees.
23 Create a new group and name it squares. Then select the Rectangle Tool (U), hold down the Shift key to maintain the proportions and create a square with the size 100px by 100px. Move this square at a distance of 10px from the bottom of the big rectangle. Name this layer square 1. Then copy the layer style of the rectangle layer and paste it to this layer.
Duplicate the square 1 layer four times and number each one. You should have five squares now. Next, I’ll show you how to align all the squares. First, move the square 5 layer to the right side of the big rectangle and leave all the other ones in the left side. Then select all five layers, select the Move Tool (V) and click on the Distribute horizontal centers button from the option bar (Alternatively, you can go to Layers > distribute > Horizontal Centers).
24 Use the Pen Tool (P) to create a small triangle at the top of your first square using the color #d2d2d2. Name this layer arrow.
Adding the content
25 Create a new group and name it content. Then select the Line Tool (U), set the weight to 1px and create a horizontal line with the width of 600px using the color #eeeeee. This line will separate the featured area from the content. Put this layer at a distance of 15px from the bottom of the squares and name it separator.
26 Select the Rectangle Tool (U) to create a rectangle with the size 280px by 120px. Move this rectangle at a distance of 15px from the separator. Then right-click on this layer and paste the layer style which you have copied from the featured area rectangle. Select the Type Tool (T) and add some text beneath the rectangle. For the heading I have used the font Georgia (with the color #153d48 and the italic style), and for the text block I have used Helvetica (with the color #333333).
Note: if you don’t have the font Helvetica, you can use Arial.
27 Duplicate the rectangle layer and the text layer by selecting them and dragging them over the Create a new layer button from the bottom of the Layers Panel. Then select the Move Tool (V) and move these two new layers in the right side of the content area. Continue to duplicate these layers until you have six blog posts. Take a look at the following image for reference.
28 Select the Line Tool (U) and create a vertical separator between the posts using the color #eeeeee.
Creating the sidebar
29 Create a new group and name it sidebar. Then select the Rectangle Tool (U) and create a rectangle with the width of 300px using the color #f5f9fa. Name this layer sidebar bg.
30 Select the Line Tool (U) and create one vertical line in the left side of your sidebar using the color #d1e2e6. Name this layer 1px left line. Duplicate this layer (Ctrl/Cmd + J) and move it to the right side of the sidebar. Then name this layer 1px right line.
31 Create a new group and name it ads. Use the Rectangle Tool (U) to create four squares with the size 125px by 125px. Then you can use the Horizontal Type Tool (T) to write the word AD in the middle of every square.
32 Use the Type Tool (T) to add some content in the sidebar. For the headings I have used the font Interstate Regular Condensed (with the color #3f4e52), and for the lists Helvetica (with the color #525657).
Creating a Flickr group area
33 Create a new group and name it flickr. Then use the Rectangle Tool (U) to create a square with the dimensions 80px by 80px. Right-click on this layer and paste the layer style which you have copied from the featured area rectangle. Duplicate this square eight times and then use the Move Tool (V) to arrange all these layers.
Creating the footer
34 Create a new group and name it footer. Select the Rectangle Tool (U) and create a rectangle with the height of 40px at the bottom of your layout using the color #e0e6e8.
35 Select the Line Tool (U) and create a horizontal line at the top of the footer using the color #d1d6d8. Name this layer 1px top line.
Then create a small vertical line in the right side of the footer. Name this layer 1px right line.
36 Select the Type Tool (T) and add a copyright statement in your footer using the color #afb5b7.
Final Result
Well, that’s it! We have just finished creating a winter blog layout in Photoshop. To see the full size layout click on the following image.
Click on image to see full size.
I hope you enjoyed this tutorial and you learned some new things. I wish you all a Happy Holiday!
Show us yours!
If you found this tutorial useful and you followed along with it, why don’t you share your work in the Six Revisions Flickr group pool and show it off to the rest of the community?
<!–
Related Content
- Create a Web Layout with 3D Elements using Photoshop
- How to Design a Band Website Layout in Photoshop
- How to Make Beautiful Gradient Typography with Photoshop
- Related categories: Tutorials and Photoshop
About the Author
<!–
Ionut Ciursa is a freelance designer based in Romania. Photoshop is one of his passions and he has been using this wonderful program for about four years. He loves to share his knowledge with others through his tutorials. He is also the founder of PSDBURN.com where he writes Photoshop tutorials.
