How to design a law/justice website in Photoshop
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
Select Rectangle Tool and create a shape over the entire canvas. Color used #e6dfd3
Having Rectangle Tool still selected I will create a shape on the footer, color used: 8f836c
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.
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
With Pen Tool I will create this triangles
And I will apply a gaussian blur (Filter>Blur>Gaussian Blur) of about 10px
With Ellipse Tool I will create this white shape.
And I will apply a gaussian blur (Filter>Blur>Gaussian Blur) of about 15px.
With Type Tool I will create the links for navigation. For each link I have applied this layer styles:
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:
I will select Add Anchor Point and I will add a point on the middle of the shape created on previous step
With Direct Selection Tool I will click on anchor point and I will drag a little bit down. Please see the screenshot below.
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.
Select the shape which was duplicated and go to Filter>Texture>Texturizer.
Here is my result:
From Justice Vector Icons I will use select a Libra icon and I will use it as a logo.
With Type Tool I will write “Lawyer Website” and as a tagline I will use “by trendyTUTS”
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)
I will go to Filter>Blur and I will apply a Gaussian Blur of about 15px
With Ellipse Tool I will create this white shape
Then I apply a Gaussian Blur of about 30px
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.
I will select the layer of my picture on my layer palette and I will add a layer mask
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
Once you have something that you like, you will need to apply the layer mask.
I will repeat steps 19, 20 and 21 for about 3 times (top, left and bottom of the image).
Here is my result:
On the left side, with Type Tool I will add some text
With Ellipse Tool I will create a black shape and I will apply a Gaussian Blur of about 8px.
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.
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:
I will select Rounded Rectangle Tool, with a radius of 10px. I will create this shape and I will apply this layer styles:
With Type Tool I will add some text.
I will add an image
I will repeat the following steps: 24, 25, 26, 27, 28, 29 and I will create another 2 frames
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. ”
Under this quote from Justice Vector Icons, I will add an icon showing a Judge
With Type Tool I will add some text and I will apply this layer styles:
Having Type Tool selected I will add again some text. I have applied this layer styles:
I will repeat steps 33, 33 and 34
Here is my final result for this layout:
Want to Download the Source File?
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
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