Step 1
First, we will increase the size of our document. Go to Image - Canvas Size and use the settings from the following image. Then go to Layer - New Fill Layer - Solid Color and set the color to #393939.
Step 2
Activate the guides (Ctrl/Cmd . Then select the Rectangle Tool (U) and create a rectangle with the dimensions 950 x 890 px using the color #ececec. Leave a distance of 150px between the top of your document and this rectangle. Name this layer "bg", double-click on it and use the settings from the following image for Outer Glow.
Step 3
Download these two photos and open them in Photoshop. Then convert these images to black and white by going to Image - Adjustments - Black and White. Feel free to play around with the color sliders to increase the contrast.
Use the Move Tool (V) to move the images into your web layout document. Then go to Edit - Free Transform (Ctrl/Cmd + T) and change the size of the images. Put one image in the left side of your layout and the other one in the right side.
Name these layers "photo" and put them inside a group (Ctrl/Cmd + G). Name the group "photos" and put it underneath the "bg" layer.
Step 4
Set the blend mode of the "photos" group to Overlay 30%. Add a mask to this group by going to Layer - Layer Mask - Reveal All. Then select a big black soft brush (B) and paint with it over the edges of your photos to erase them.
Step 5
Create a new group and name it "header". Select the Type Tool (T) and write the name of your layout using the color #cc2229. Double-click on your text layer and use the settings from the following image. Use the guides to align your text as you see in the image below.
I also added a second line of text using a light gray color and the same layer style settings.
Put your text layer(s) inside a group (Ctrl/Cmd + G) and name the group "logo".
Step 6 - Creating the search bar
Select the Rectangle Tool (U) and create a rectangle with the size 225px by 35px and the color #6f6f6f. Use the guides to align your rectangle as you see in the image below. Add a stroke to this rectangle using the settings from the following image and the color #888888. Name this layer "search bar".
Select the Type Tool (T) and add some text inside your search bar using the color #aaaaaa.
Group these two layers (Ctrl/Cmd + G) and name the group "search".
Step 7 - Creating the navigation area
Create a new group (Layer - New - Group) and name it "navigation".
Select the Line Tool (U), set the weight to 1px and create a horizontal line with the width 950px at the top of your layout using the color #f7f7f7. Name this layer "1px line". Duplicate this layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the down arrow once to move it one pixel down. Set the color of the new line to #d0d0d0.
Step 8
Select the Type Tool (T) and write the name for your navigation menu items using the color #111111 and the font Myriad Pro Regular.
Step 9
Duplicate the two line layers from the "navigation" group. Select the Move Tool (V) and move the new line layers 40px down (hold down the Shift key and press the down arrow four times).
Put these two line layers into a group (Ctrl/Cmd + G) and name it "separator". Add a mask to this group (Layer - Layer Mask - Reveal All). Then select the Gradient Tool (G), hold down the Shift key and drag two black-to-transparent gradients - one in the left side of the lines and one in the right side. Take a look at the following image for reference.
Step 10 - Creating the category navigation
Create a new group and name it "categories". Select the Rectangle Tool (U), hold down the Shift key and create a square with the size 70px by 70px and the color #e0e0e0.
Name this layer "square" and put it in the left side of your layout, underneath the navigation bar. Then double-click on this layer to open the Layer Style window and use the settings from the following image.
Step 11
Make sure that the "square" layer is selected. Then select the Move Tool (V), hold down the Alt/Option key, click on your image and drag a copy of the "square" layer underneath the original one.
Repeat this step until you have 11 squares.
Step 12
Download the Sport Vectors pack from Grafpedia and open the .AI file in Adobe Illustrator. Then use the Selection Tool (V) to select a vector item, copy it (Ctrl/Cmd + C), go back to Photoshop and paste it (Ctrl/Cmd + V) as a smart object. Make sure that the Free Transform (Ctrl/Cmd + T) function is activated. Then set the width and height of this layer to 45% from the option bar. Then move this sport item in the center of your first gray square.
Step 13
Repeat the previous step until you fill all your gray rectangles with a sport item.
Step 14 - Creating the featured area
Create a new group (Layer - New - Group) and name it "featured". Then use the Rectangle Tool (U) to create a rectangle next to the categories area with the dimensions 630px by 260px. Name this layer "image_holder".
Step 15
Open a sport image in Photoshop and use the Move Tool (V) to move it into your first document. Name this layer "image" and put it over the gray rectangle. Then right-click on the "image" layer and select Create Clipping Mask. Now the photo will be visible only on the rectangle area.
Step 16
Use the Rectangle Tool (U) to create a rectangle with the color #111111 and the height 80px at the bottom of the featured area. Name this layer "dark rectangle" and set its opacity to 80%.
Step 17
Use the Line Tool (U) to create a line with the weight 1px and the color #292929 at the top of your dark rectangle. Name this layer "1px line".
Duplicate this layer (Ctrl/Cmd + J) and change the color of the new line to #636363. Then select the Move Tool (V) and hit the down arrow once to move this new layer one pixel down.
Step 18
Select the Type Tool (T) and add some text over the dark rectangle of the featured area using the color #ebebeb.
Step 19 - Creating the newsletter subscribing area
Create a new group and name it "subscribe". Then select the Rectangle Tool (U) and create a rectangle with the color #d6d6d6 and the dimensions 190px by 260px. Add a 1px stroke to this rectangle using the color #cbcbcb. Name this layer "subscribe bg".
Step 20
Select the Type Tool (T) and add some text for the subscribing area. Use the color #111111 for the headline and #333333 for the rest of the text.
Step 21
Select the Rectangle Tool (U) and create two rectangles for the sign-up form using the color #e0e0e0. Then add a 1px stroke to these two rectangles using the color #c0c0c0. Use the Type Tool (T) and the color #393939 to add some text inside the two rectangles.
Step 22
Select the Rectangle Tool (U) and create a small rectangle underneath the sign-up form using the color #555555. Name this layer "button". Double-click on it to open the Layer Style window and use the settings from the following image. Then select the Type Tool (T) and write the text "Sign up" on your button using the color #e0e0e0.
Step 23 - Creating the content area
Create a new group and name it "content". Create another group inside the first one and name it "news".
Select the Rectangle Tool (U) and create a rectangle with the dimensions 270px by 225px and the color #e0e0e0. Add a 1px stroke to this rectangle using the color #cbcbcb. Name this layer "news bg".
Step 24
Select the Type Tool (T) and write the word "News" at the top of the gray rectangle using the color #111111.
Step 25
Select the Rectangle Tool (U), hold down the Shift key and create a square with the size 70px by 70px. Name this layer "image_holder", duplicate it (Ctrl/Cmd + J) and move the new square at a distance of 20px underneath the first one.
Add two images over the squares (I used images from sxc.hu) Then right-click on the images' layers and select Create Clipping Mask (make sure that each image is over a "image_holder" layer).
Step 26
Select the Type Tool (T) and add some text next to each image.
Step 27
Create two more sections in the content area for videos and photos using the same process that you used for the 'News' section.
Step 28 - Creating the equipment area
Create a new group and name it "equipment". Then select the Line Tool (U) and create two lines with the weight 1px at a distance of 20px underneath the content area. Use the color #d0d0d0 for the first line and #f7f7f7 for the second one. Then create another two vertical lines with the color #d0d0d0 that we will use to separate the sections.
Step 29
Select the Type Tool (T) and write the word 'Equipment' underneath the two horizontal lines using the color #111111.
Step 30
Create three groups for men, women and kids equipment. Then use the Rectangle Tool (U) to create rectangles with the dimensions 120px by 80px and the color #e0e0e0. Use four rectangles for each section.
Then select the Type Tool (T) and write the name of each section using the color #111111.
Step 31
Add an image of a sport equipment item in the middle of each gray rectangle.
Step 32 - Creating the footer area
Create a new group and name it "footer". Then duplicate the "separator" group from the "navigation" group (right-click on it and select Duplicate Group).
Move the new "separator" group into the "footer" group and use the Move Tool (V) to move it at the bottom of your layout.
Select the Type Tool (T) and add a copyright statement underneath the separator using the color #9f9f9f.
