Design a creative web template in Photoshop

Hi friends, a website is an online propaganda tool for your company/brand/product. So, it should be competent enough like your company too only then it will attract more traffic towards your website and will improve your business. In today’s post what we are going to see is how to design one such unique, attractive and creative web template in Photoshop. Ok, lets go into the tutorial.

Step 1: Create a new document of size 800 px X 600 px with black background and 72 ppi.

Step 2: Choose the rounded rectangle tool with shape layers option chosen and corner radius as 15 px and draw a rounded rectangle like this

Step 3: Create a new layer and draw one more rounded rectangle in black color with corner radius 10 px like this.

Step 4: Hold ctrl and click on both the layers in the layers palette to select multiple layers and then press ctrl + T to switch open the transform controls and scale it like this.

Step 5: Then rotate it through 45 degrees.


Step 6: Choose the black rectangle layer. Select the add anchor point tool and create 3 new anchor points in the black rectangle like this.

Step 7: Select the convert anchor point tool and click on those three newly created anchor points to convert them from curves to lines.
Step 8: Select the direct selection tool and move the newly created anchor points like this.

Step 9: Change the color of the background and the black rectangle as white.

Step 10: Create two more rounded rectangles like this.

Step 11: Select both the newly created rounded rectangles and right click in the layers palette and choose create clipping mask option to create something like this.


Step 12: Change the color of the rectangles into these colors as shown in image.

Step 13: Add the following layer styles to the white color rounded rectangle which was used for masking.

Step 14: Add the following layer styles to the light blue rounded rectangle.


Step 15: Take the text tool and type some text like this.

Step 16: Rotate it through 45 degrees and place it like this.

Step 17: Add some more text like this and rotate that also through 45 degrees and place it like this.

Step 18: Add an image and add the following layer styles to it.



Step 19: Add logo, company name and caption here like this.

Step 20: Choose the custom shape tool and select the following arrow shape and create a arrow like this. Take a copy of that arrow and place it like this.



Step 21: Add the following layer styles to both those arrows.


Step 22: Choose the text tool and add some more text like this.


Step 23: Add a rounded rectangle reduce fill to 0% and add the following layer styles


Step 24: Add one more custom shape like this

Step 25: Place some more text inside the rounded rectangle like this.

Corollary: If you feel that the colors used in this template are very dull or subtle then you can change them like this.

Click here for free psd

 tutsfriend.com