Photoshop Tutorial : Product Website Template

In this tutorial we will learn to design a website template with theme products. Design we will create is a menu bar, a header with the slider, layout contents of two columns and two rows, and footer. Let’s get started!

Font Used In This Tutorial

Asenine

Step 1

Create a new document width size of 1220 * 1200 and the background color 2b221e code input. Go to the menu Noise -> Add Noise and add a Pattern Overlay layer style.

Step 2

Go to the View menu -> New Guide for vertical and horizontal line V = 100px, 1120px, H = 100px, 450px, 840px, 1100px.

Step 3

Create a design background to the header and contents.

Step 4

Now we will create the text title and activate the menu bar to the horizontal type tool and set the font as shown below!

Step 5

To set the slide header design fonts and images in addition to the right as in the picture below!

Step 6

To set the contents of text fonts like in the picture below.

Step 7

Activate Rounded Rectangular Tool to create a button with a radius of 10px read more and add a Drop Shadow, Gradient Overlay, and Stroke.

Step 8

Selection layer “Bg-content2” activates the Elliptical Marquee Tool to create selection circle.

Step 9

Create a new layer and fill it white.

Step 10

Go to Filter -> Blur -> Gaussian Blur and right click on the layer menu select Create Clipping Mask

Step 11

Activate Rectangular Tool size 10 * 15 pixels  to make bullets.

Step 12

Last created in the footer copyright text