Create a minimal web template in Photoshop

Hi friends, There are different types of web templates among which minimal style templates are the ones which gives more of a professional look than a funky one. So here we are going to see how to create one such minimal web template using Photoshop. This template will be more suitable for web designing companies.

 

 

 

Preview

Step 1: Open a new document of size 800 px X 800 px with white color background
Step 2: Choose the gradient tool and click on the gradient editor available on the properties panel and choose a gradient like this.

Step 3: Next choose the radial gradient option and click and drag like this to get a gradient like this.


Step 4: Create a new layer. Choose the elliptical marquee tool and make an elliptical selection like this and then fill black color inside it.


Step 5: Next goto Filters -> Blur -> Gaussian blur and apply the following settings


Step 6: Next press Ctrl + T and expand it like this and then reduce the fill to 50%.


Step 7: Select the rectangle marquee tool and make a selection like this and press delete to get something like this.


Step 8: Take the rounded rectangle tool with paths option selected make the radius as 25 px and draw a rounded rectangle like this and then press Ctrl+Enter to convert the path into a selection.



Step 9: Choose the gradient tool and select a gradient like this and apply is from top left corner to bottom right to get something like this.


Step 10: Take a copy of the same layer and fill it with black color.

Step 11: Apply some amount of gaussian blur to it as per you wish

Step 12: Press Ctrl + T and open the transform controls, then right click and choose skew and skew the blurred rectangle like this and reduce the fill of the blurred rectangle to 50%



Step 13: Repeat Steps 8 to 12 again and create further more rectangles like this. Gradient values for the extra rectangles are.
Rectangle 1: 80500d to 543205
Rectangle 2: 915608 to 8e560b

Step 14 Create a new layer and create a rectangle like this.

Step 15: Place this rectangle layer below all other layers.

Step 16: Select rest of all other layers and right click and choose Create Clipping mask option to get something like this.


Step 17: Change the blending mode of the rectangle layer into multiply.

Step 18: Select all the layers together and push it down like this.

Step 19: choose the text tool and type some text like this.

Step 20: Using the rectangle marquee tools create rectangles like this and place some picture inside them

Step 21: Create a black rectangle like this and apply some gaussian blur to it as per your wish


Step 22: Then press Ctrl + T to open the transform controls and right click to choose the warp option. Then warp that blurred rectangle like this.


Step 23: Place it below the polaroid.

Step 24: Take further 3 more copies of the blurred rectangle and place them below each polaroid.

Step 25: Add some more text like this.

Step 26: Take the rounded rectangle tool and create rounded rectangles like this and then fill them with the first rectangle linear gradient from top to bottom.

Step 27: Then type some text inside it like this.

Step 28: Take 3 more copies of that rounded rectangle and place them like this

Step 29: Place your logo like this and then some text.

Step 30: Create a rounded rectangle like this and fill any color inside it. Then make its fill as 0 and apply inner glow for it very mildly like this. Type the text Search nearby it to get something like this

Final Output

Hope you all enjoyed this post. So we have learnt how to create a minimal web template using Photoshop. Always expect something unexpected from tutsfriend.

Download free psd here

 tutsfriend.com