Hello and welcome back to another tutorial here on trendyTUTS.com. For today I will show you how I have created a law/website layout in Photoshop. I think this template it is suitable for a lawyer website or anything which have to do with the justice department.

If it’s the first time when you came on trendyTUTS, I would like to let you know that we have dozens of other cool website layout tutorials on our Website Layout Tutorials section. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!

If you’d like to download this photoshop template you will need to sign-up for a Premium Membership. As a premium member you will have unlimited access to the entire collection of PSD Templates (the source file for our tutorials), Premium Files and PSD to HTML Tutorials.

Here is my final result:

Let’s start the tutorial
Open Photoshop and create a new document Ctrl + N

Step 1

Select Rectangle Tool and create a shape over the entire canvas. Color used #e6dfd3

Step 2

Having Rectangle Tool still selected I will create a shape on the footer, color used: 8f836c

Step 3

With Rectangle Tool I will create this shape on the top and I will apply this layer styles. We will gonna use it for navigation bar.

Step 4

With Pen Tool I will create this 2 shapes. I have used a red color just for demonstration proposes.

Then I will apply the same layer styles, applied on step 3

Step 5

With Pen Tool I will create this triangles

And I will apply a gaussian blur (Filter>Blur>Gaussian Blur) of about 10px
My result:

Step 6

With Ellipse Tool I will create this white shape.

And I will apply a gaussian blur (Filter>Blur>Gaussian Blur) of about 15px.
My result:

Step 7

With Type Tool I will create the links for navigation. For each link I have applied this layer styles:

My result:

Step 8

Next we will create the logo. With Rectangle Tool I will create this shape on the top (middle) and I will apply this layer styles:

My result:

Step 9

I will select Add Anchor Point and I will add a point on the middle of the shape created on previous step

Step 10

With Direct Selection Tool I will click on anchor point and I will drag a little bit down. Please see the screenshot below.

My result

Step 11

On my layer palette I will duplicate the shape created on step 8. To duplicate a shape, make sure that  it’s  selected on layer palette and press Ctrl + J.

Step 12

Select the shape which was duplicated and go to Filter>Texture>Texturizer.

Here is my result:

Step 13

From Justice Vector Icons I will use select a Libra icon and I will use it as a logo.

Step 14

With Type Tool I will write “Lawyer Website” and as a tagline I will use “by trendyTUTS”

Step 15

With Rectangle Tool I will create a large shape just under navigation. Color used: #8f836c

With Pen Tool I will create 2 triangles to make a nice shadow (in the same way that we have created it for navigation)

Step 16

I will go to Filter>Blur and I will apply a Gaussian Blur of about 15px

Step 17

With Ellipse Tool I will create this white shape

Then I apply a Gaussian Blur of about 30px

Step 18

On the right side I will add a picture showing a lawyer

As you can see, the picture does not fit to well with this layout. On the next step we will gonna fix this.

Step 19

I will select the layer of my picture on my layer palette and I will add a layer mask

Step 20

I will select Gradient Tool, I will make sure that the default palette is selected (black and white) and I will drag a similar line, from the left to the right

Step 21

Once you have something that you like, you will need to apply the layer mask.

Step 22

I will repeat steps 19, 20 and 21 for about 3 times (top, left and bottom of the image).
Here is my result:

Step 23

On the left side, with Type Tool I will add some text

Step 24

With Ellipse Tool I will create a black shape and I will apply a Gaussian Blur of about 8px.

Step 25

With Pen Tool I will create this shape. We need to place it in that way, so the shadow created on step 24, to be visible just a little bit.

Step 26

Having Pen Tool still selected I will create another shape, this time above the shape created on step 25. For this shape I will apply this layer styles:

My result

Step 27

I will select Rounded Rectangle Tool, with a radius of 10px. I will create this shape and I will apply this layer styles:

Step 28

With Type Tool I will add some text.

Step 29

I will add an image

Step 30

I will repeat the following steps: 24, 25, 26, 27, 28, 29 and I will create another 2 frames

Step 31

With Rectangle Tool I will create a red shape and on the top of it I will add this quote
“Justice that love gives is a surrender, justice that law gives is a punishment. ”

Step 32

Under this quote from Justice Vector Icons, I will add an icon showing a Judge

Step 33

With Type Tool I will add some text and I will apply this layer styles:

Step 34

Having Type Tool selected I will add again some text. I have applied this layer styles:

Step 35

I will repeat steps 33, 33 and 34
My result:

Here is my final result for this layout:

The tutorial is finished now. I hope your result is the same with mine, if not better! If you’d like to know when we post a new tutorial, you can follow trendyTUTS.com on twitter.

blog comments powered by Disqus