Create a Professional Web Layout Photoshop

Step 1 : Mockup

Before we start designing, we need to plan out the requirements, looks and the functionality.
Then we need to fit these ideas into a layout to execute them visually. Mockups and wire
frames are greatly useful to create layouts with lot of flexibility. It is a best practice and
highly encouraged in the Industry.
I put the below one together using only grey tones. That way we eliminate color from the
scene at this point. So that we can concentrate on the layout as a whole and avoid messing up
with colors. That gives much freedom to quickly alter and rearrange things. A mockup can be
as detailed as you want. For this purpose I am going with the below one. Just briefly defining
the layout and what goes where.



Step 2 : Set up the Canvas
So we have a blue print for our layout. Lets actually put the design together! We are going to
create a 960 pixel wide layout. Create a new document at 1200 x 1500.

This is a 960 pixel wide layout, so we need define the work area by adding guidelines. Press
Ctrl+A to select the entire document.

Go to Select > Transform Selection. Shrink the selection down to 960 pixels wide. That is the
work area of the layout.

Add guide lines to the selection.

We need to create some padding between the border and the content that we will add later!
With the selection active again choose Transform Selection. Resize the selection to 920 pixels
wide. That means 20 pixels of padding each side totaling 40 pixels of padding.

Add guides to the selection.


Step 3 : Create the Header
Lets create the header of the layout! Make a selection that is 465 pixels in height.

Fill the selection with a gray value first and later use the Layer Styles to add colors and
gradients. Follow this throughout the design to maintain a visual hierarchy.

Add Gradient to the header. Double click on the layer thumbnail. Select Gradient Overlay.
Create the below 2 color gradient. Use the settings.

It should look like this.

Next need to add a highlight to the header. Create a new layer by pressing Ctrl+Alt+Shift+N.
Pick a soft brush with a diameter of 600px. Pick #19535a for brush color. Just click once on
the center of the header.

Make a selection from the top that is 110 pixels in height.

Hit Delete key to delete the selected portion. That looks like below.

Shrink it vertically by pressing Ctrl+T.

We need to make sure that the highlight spot is perfectly centered to the header. Select layers,
header and highlight and press V to switch to Move Tool. On the Options Panel select
Align Horizontal Centers button.

Create a new layer, draw a one pixel highlight line using the Pencil Tool with color #01bfd2.

Hide the edges smoothly using a gradient mask. Pick the Gradient Tool, create the below
gradient in the Options Panel.

Apply the above gradient.