Create a Law Firm Web Design

AD

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.

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 Image1, Image2, Image3 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

create free website wix below post

Further Related Readings

Comments
  1. Irfan June 2, 2012 at 12:41 pm

    very well explained… really appreciate.. Thanks.

    1. Jawad June 5, 2012 at 2:44 am

      appreciate your comment. You’re welcome 🙂

  2. sutopo June 3, 2012 at 9:27 pm

    Please.
    help to make web design…!
    I like forever Web design…

    1. Jawad June 5, 2012 at 2:44 am

      what kind of help dear?

  3. Muhammad Irfan Sumra June 5, 2012 at 12:35 am

    very good, well explained. what about converting it into HTML5 and CSS3??

    1. Jawad June 5, 2012 at 2:43 am

      Yes, you’ll have it published this Friday 🙂
      I’m working on it and its almost complete.

      1. Muhammad Irfan Sumra June 6, 2012 at 12:26 am

        thanks alot, its very helpful. why don’t you write an ebook for designing websites in photoshop/fireworks and converting them into HTML5 and CSS3???

        1. Jawad June 13, 2012 at 6:08 am

          This is an excellent suggestion, and you shouldn’t be surprised that we’ve been working on such an ebook for over a month, but the problem is that we just launched our three subdomains Apps.Designzzz.com, WordPress.Designzzz.com and Coding.Designzzz.com and we are so buried with their work that its just impossible to find time for the ebook, otherwise it would have been published by now.
          Thank you for the suggestion and being such a kind reader.

  4. jimmy June 27, 2012 at 3:18 am

    Such a useful tutorial you explain it very well.I appreciate your great effort to make this tut and share here with us..Its been very helpful for the newbies..Thanks..

    1. Jawad June 28, 2012 at 6:12 am

      Thanks for the comment Jimmy!
      I’m really glad that it was helpful for you.

  5. hiren lad August 30, 2012 at 12:17 am

    good tutorial for beginner…Thank you …

    1. Jawad August 30, 2012 at 12:35 am

      you’re most welcome dear 🙂

  6. Labib February 19, 2013 at 9:15 am

    Hi there,

    really cool attractive design and easy to follow. Just wondering what font did you use for the logo.

    Many thanks.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved