Create a Law Firm Web Design

How to Create a Homepage for a Lawyer.

Designing a website for a law firm is a pretty difficult job. But today I decided to make it easy and make a design using the basic layout we use for any business website.

The secret of creating a satisfying web design lies in realizing the needs of your clients.
I realized that the clients need a website which is easy to navigate, and interacts with their clients in a simple way. So I made a design where a visitor should never find himself lost.

Before we go further remember to Subscribe to our RSS Free Rss Feed or Follow us on twitter Twitter to stay updated with our postings

Step1

A blank document, size of your choice, resolution 72. We do this every time :)

Photoshop-Tutorial

Step2

Lets come towards the Background, fill the background with Black color and add some noise.
Go to Filter>Noise>Add Noise.

Creative-Law-website-Tutorial

Step3

Choose the Smooth brush with white color and create a stroke on the background using 66% opacity.

Elegant-Law-Template-Design-Tutorial

Step4

Choose the Rectangle Tool, draw the shape and fill it with plain white color.

Photoshop-Template-Tutorial

Step5

Now fill this Gradient in the shape.

Corporate-Design-of-Law-Website

Step6

Now we should have this result.

Template-Design-Tutorial

Step7

Add the Logo. I just typed in “Law Firm”

Photoshop-Layout-Tutorial

Step8

Now I’m creating Navigation Bar. Choose the Rounded Rectangle Tool, draw the shape and fill it using solid black color.

Creative-Design-of-Law-Layout

Step9

I placed some routine words and menu buttons.

Photoshop-Tutorial-Design

Step 10

And our header is ready.

Creative-Design-of Template

Step 11

Time now for the Featured area. Choose the Rounded Rectangle Tool, Draw this shape and fill it with white color.
Apply the 2px stroke of color #646464

Beautiful-Template-Design

Step 12

Apply the Drop Shadow on featured area. You can add the stroke and shadow by right clicking on the layer and clicking Layer Styles.

Law-Template-Tutorial-in-Photoshop

Step 13

Featured area needs a picture picture. You can use Clipping Mask technique to cut off the unnecessary parts.
To create a clipping, mask right click on the shape layer and click Create Clipping Mask.

Law-Template-Tutorial

Step 14

This is what we have made so far.

Beautiful-Design-of-Law-Website

Step 15

Now let’s create a content/links area. We are designing this template on the base of routine a business template.
Choose Rounded Rectangle Tool. Draw the shape and fill it with white color. Apply the 2px stroke of color #646464.

Design-of-Law-Website

Step 16

Add some text, heading and picture. You can use Clipping Mask technique to cut off the unnecessary parts of picture. You should get the following result.

Elegant-Design-of-Law-Website

Step 17

Choose the Rounded Rectangle Tool, Draw the shape and fill with Gradient in Link Button. This button usually holds the text “Read More” or “Continue”.

Law-Website-Design-Tutorial

Step 18

After adding Image1Image2Image3 in the three boxes, we got this.

Photoshop-Design-Tutorial

Step 19

What we have made so far.

Amazing-Design-of-Law-Website

Step 20

Choose the Single Row Marquee Tool, draw the shape and fill with white color. This is only to create a separator line.

Photoshop-Layout-Tutorial

Step 21

Now we are creating a welcome area. I create this in all my templates. This is a place where the website owner can say a hello to its visitors, or it can also be used to give a link to an important article.
Choose the Rectangle Tool fill with whit color and apply the stroke 1px of color #646464.

Beautiful-Layout-Design

Step 22

Add a picture and some text in this area.

Law-Website-Layout-Tutorial

Step 23

How about some links to Latest News area. You can even make this a Testimonials kind of area but lawyer sites don’t have testimonials. Lawyer sites might have Success Stories, you might use this area for that, its your choice of course.
Choose the Ellipse Tool, draw the shape and fill with Solid black color, this will be our bullet.

Elegant-Design-of-Layout

Step 24

This is our Content Area.

Beautiful-Design-of-Law-Website

Step 25

Time for Footer Area. First we complete the Legal Topics area. This will hold links to all (or at least most prominent) of our pages. This is a kind of mini sitemap.
Choose the shape and draw this shape as bullets.

Photoshop-Tutorial-of-Layout

Step 26

Add links… checked!

Elegant-Law-Website-Template

Step 27

A contact form right in the footer, so user won’t have to navigate to the contact page.
Choose the Rounded Rectangle Tool draw these shapes.

Beautiful-Design-Layout

Step 28

After this, we draw the submit button in the email area. Choose the Rounded Rectangle tool and draw this shape

Amazing-design-Law-Website

Step 29

Apply gradient in the submit button.

Elegant-Design-of-Law-Template

Step 30

This is our Footer.

Photoshop-Layout-Tutorial

Final Result

Yahoo!…. We’ve done it again :)

Tutorial-of-Photoshop