Website in Photoshop

7/31/2019 Website in Photoshop

1/45

2012

Freebies //Photoshop //psd // Tutorials

Photoshop Tutorial: Create a minimal webtemplate in Photoshop

An article by SipiSagar 6 Comments

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 moresuitable for web designing companies.

Preview
http://tutsfriend.com/category/freebies/http://tutsfriend.com/category/tutorials-2/photoshop-tutorials-2/http://tutsfriend.com/category/tutorials-2/photoshop-tutorials-2/http://tutsfriend.com/category/freebies/psd/http://tutsfriend.com/category/freebies/psd/http://tutsfriend.com/category/tutorials-2/http://tutsfriend.com/2012/03/photoshop-tutorial-create-a-minimal-web-template-in-photoshop/#commentshttp://tutsfriend.com/category/tutorials-2/photoshop-tutorials-2/http://tutsfriend.com/category/freebies/psd/http://tutsfriend.com/category/tutorials-2/http://tutsfriend.com/2012/03/photoshop-tutorial-create-a-minimal-web-template-in-photoshop/#commentshttp://tutsfriend.com/category/freebies/


2/45


3/45

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


4/45


5/45

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.


6/45


7/45

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


8/45

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


9/45


10/45

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

something like this.


11/45


12/45


13/45


14/45

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.


15/45


16/45

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


17/45

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


18/45

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%


19/45


20/45


21/45

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


22/45

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


23/45

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


24/45


25/45


26/45

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


27/45

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


28/45

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


29/45

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

them


30/45

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


31/45


32/45

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.


33/45


34/45

Step 23: Place it below the polaroid.


35/45

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


36/45

Step 25: Add some more text like this.


37/45

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.


38/45


39/45


40/45

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


41/45

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 likethis


42/45


43/45


44/45

Final Output


45/45

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.

Documents

Website in Photoshop