Create a Winter Theme Web Design in Photoshop

Dec 16 2009 by Ionut Ciursa | 20 Comments

Create a Winter Theme Web Design in Photoshop

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

PreviewClick on image to see full size.

Tutorial info

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.

Setting up the Photoshop document

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 + ‘.

Grid settings

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

Grid settings

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.

Grid settings

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.

Grid settings

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

Grid settings

Grid settings

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.

Grid settings

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.

Grid settings

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

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

14 Double-click on the navigation bar layer to open the Layer Style window and use the settings from the following image.

Grid settings

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.

Grid settings

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

Grid settings

17 Select the Horizontal Type Tool (T) and add the name for your navigation menu items using the color #f2feff.

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

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

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

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.

Grid settings

28 Select the Line Tool (U) and create a vertical separator between the posts using the color #eeeeee.

Grid settings

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.

Creating the sidebar

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.

Creating the sidebar

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.

Creating the sidebar

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 the sidebar

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 sidebar

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.

Creating the sidebar

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.

Creating the sidebar

36 Select the Type Tool (T) and add a copyright statement in your footer using the color #afb5b7.

Creating the sidebar

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.

PreviewClick 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

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.

20 Comments

Callum Chapman

December 16th, 2009

Great tutorial Ionut!

youyouk

December 16th, 2009

great job! a very nice template.

Soner Gönül

December 16th, 2009

Powerfull theme :)

Thanks..!

xRommelx

December 16th, 2009

amazing design

Bruno

December 16th, 2009

Boy… I love this website!!! Great tutorial!

Jon Crim

December 16th, 2009

Great tutorial – very detailed, timely, and last but not least a great end result, thanks!

esteban

December 16th, 2009

i like it, but too glassy for my. Good tutorial i will try to do it. Thanks

Joe

December 16th, 2009

I always look for sources to teach me how to deliver a very good tutorial presentation method.

Yet, yours are very simple and was explained by the images themselves greatly.

No need to explain by words. Good job

Kevin

December 17th, 2009

Very good tutorial. A beautiful results in a few simple steps, that’s the way I like it.

gus

December 17th, 2009

I find it useless to Add text and content images to the PSD design, these cost time and we have to remove them when we convert to xhtml/css and code them all over AGAIN in css.

Steve Martin

December 18th, 2009

Great Tutorial… Its really simple and easy to learn.. Thanks..

king

December 20th, 2009

simple good Tutorial

SOLUSHUNZ

December 21st, 2009

It’s really a nice theme.
I’d appreciate that!!!!

Ionut Ciursa

December 21st, 2009

@all: Thank you for your comments. I appreciate them and I’m glad you like the tutorial.

mupet

December 23rd, 2009

Awesome, i like this tutorials

TimeDSG

January 5th, 2010

Thanks for tuto!

srilaxmi

January 28th, 2010

Awesome, I learnt so much from this tutorial. Really excellent tutorial

IWT

January 18th, 2011

Thanks for the complete explanation of wordpress tutorial.

Leave a Comment

Subscribe to the comments on this article.