Hello and welcome to another tutorial here on trendyTUTS.com. 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!

In this tutorial I will show you how to create a professional medical template. This template can be used for a hospital website, for a doctor cabinet website or for anything related to medical/health.

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this psd template in Photoshop, but I will not cover the PSD to CSS/HTML conversion.

If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our Web Layouts (PSD and CSS/HTML version for each tutorial), all Premium Files and unlimited access to our PSD to CSS/XHTML Tutorials.

Click Here To See The Live Preview (CSS/HTML)

My final result:

To create this template I have used:

• Photoshop
• Medical Vector Icons, from our Premium Files, available to our Premium Members
• Some stock  photos from istockphoto and shuterstock

Open Photoshop and create a new document Ctrl + N, dimensions 1020 by 1380px

Next set the foreground color to #8ad5e8 and background color to #f7f7f7. Select Gradient Tool and drag a similar line on your document

My result

Step1 – Creating the Logo and top navigation

First I will select Rectangle Tool and I will make a rectangle on the top and I will apply this layer styles:

My result:

Having Rectangle Tool selected, I will add another shape on the top of the previous one. I will apply this layer styles:

My result

Next with Type Tool I will add the logo. I will write “Medical Center” and as a tagline I will write “a design by trendyTUTS”

Now I will apply some layer styles for each word.
For Medical I will apply this layer styles:

For “Center” and for the tagline “a design by trendytuts” I will apply this layer styles:

My result:

For this logo I have applied a letterpress type treatment and as you can see it can be done quite easily in Photoshop.My result:
Next I will create some links for navigation.
I will select Rounded Rectangle Tool with a radius of 30 px, I will create this shape, I will apply this layer styles

and with Type Tool I will add some links:

Here is my final result for this area:

Step2 – Creating the Featured Area

First I will select Ellipse Tool I will create this 3 circles and for each of them I will lower the opacity to 11%

With Type Tool I will add some text on the left side and from our Premium Files, available to our Premium Members I will use Medical Vector Icons. From this set I will select an icon showing a doctor and I will place it on my document.

Then with Rounded Rectangle Tool I will create this shape and I will apply this layer styles,

With type Tool I will add some text also.

Here is my final result for this area:

Step3 – Creating the content area

To create the content area I will select Rectangle Tool, I will create this shape and I will apply this layer styles:

My result

Next with Type Tool and using some vector icons from our Medical Vector Icon pack, I will add some content over this shape:

Now I would like to create some separators for this area. To see exactly how I have create a single separator, please look at the screenshot below (zoomed):

And here’s how this separators are looking in normal view:

Next with Rounded Rectangle Tool with a radius of 5px I will create 3 buttons and I will apply this layer styles:

Next with Type Tool I will add some text, bellow the blue area created previously

Then from our Premium Files available to our Premium Members I will use the Medical Vector Icon Set and I will add few more icons.

Next I will use Line Tool and I will make this separators

Than with Type Tool and some stock images I will create this

Step4 – Creating the footer

To create the footer I will select Rectangle Tool and I will create this shape and I will apply this layer styles:

Then with Type Tool I will add the same text used for the logo (on the top), then I will apply this layer styles for it

Here is my result:

Next I will create some links for navigation.
I will select Rounded Rectangle Tool with a radius of 30 px, I will create this shape, I will apply this layer styles

and with Type Tool I will add some links.
Here is my final result for this area:

Here is my final result for the entire layout.

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.

Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTS.com.