Hello and welcome to another tutorial, here on trendyTUTS.com. As you are probably used, on trendyTUTS we are publishing often website layout tutorials. For today I have prepared a website layout for a health/nutrition niche, but in the same time this website template can be used as well for a fitness website.

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!

Here is my final result:

Let’s start the tutorial.
Open Photoshop and create a new document 1020 by 1550px

Step1

Select Paint Bucket Tool, set the foreground color to #76b8b9 and click one time on your document.

Step 2

Select Ellipse Tool, make sure that the foreground color is set to white and create this white shapes:

For each of this shape I will apply a Gaussian Blur of about 50 – 60px. To apply a Gaussian Blur go to Filter>Blur>Gaussian Blur.
You may lower the opacity if it’s needed.
Here is my result (a nice fading light):

Step 3

Now I will select Line Tool and I will create those 2 lines. Please see the screenshot. For the first line I have used this color: #669495 and for the second one, this color: #9cd8d9

Step 4

I will select Type Tool and I will add my logo. I will write: “healthy tips”.
For healthy I will apply this layer styles:

Here’s my result

Step 5

Having Type Tool selected I will add the links for navigation. I have use the same layer styles and the same font used for the word “healthy” from the logo.

Step 6

I will select Rectangle Tool and I will create this shape. Color used: #edec62

Step 7

I will select Direct Selection Tool, and I will drag a little bit from the bottom – right corner of the shape

Step 8

With Type Tool I will add some text over this shape. I have applied the following layer styles:

My result:

Step 9

With Type Tool I will continue to add some more text

Step 10

I will create a button, using again Rectangle Tool and Direct Selection Tool. For the text over the button I have applied the layer styles from step 8. My result

Step 11

On this step I will use some icons from Premium Files section. I will go to Health/Fitness Vector Icons, I will download them and I will choose an icons showing an apple and I will place it on my document. I will play a little bit with Free Transform Tool (Ctrl +T) till I have something that I like. Here is my result:

Step 12

Here I will repeat Step 6, 7 and 8 and I will create this shapes.

Step 13

With Type Tool I will add the text over them

For “Looking for more healthy tips? Subscribe now!” I have used “Adventure” font with the following layer styles:

For “Latest Articles” I have applied this layer styles:

Step 14

With Rectangle Tool I will create this white shape

Step 15

With Pen Tool I will create this 2 black triangles and I will apply a Gaussian Blur of about 14px. Here’s my result

Step 16

Next using some images I will create another 5 thumbnails

Step 17

I will repeat again the steps 6, 7, 8 and I will create this shape:

Step 18

With Type Tool I will add some dummy text

Step 19

From our Premium Files – Food Vector Icons and Health/Fitness Vector Icons I will add some vector icons

Here is my result for the entire layout

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

blog comments powered by Disqus