How to design a health/nutrition or a fitness website in Photoshop
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
Select Paint Bucket Tool, set the foreground color to #76b8b9 and click one time on your document.
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):
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
I will select Type Tool and I will add my logo. I will write: “healthy tips”.
For healthy I will apply this layer styles:
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.
I will select Rectangle Tool and I will create this shape. Color used: #edec62
I will select Direct Selection Tool, and I will drag a little bit from the bottom – right corner of the shape
With Type Tool I will add some text over this shape. I have applied the following layer styles:
With Type Tool I will continue to add some more text
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
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:
Here I will repeat Step 6, 7 and 8 and I will create this shapes.
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:
With Rectangle Tool I will create this white shape
With Pen Tool I will create this 2 black triangles and I will apply a Gaussian Blur of about 14px. Here’s my result
Next using some images I will create another 5 thumbnails
I will repeat again the steps 6, 7, 8 and I will create this shape:
With Type Tool I will add some dummy text
Here is my result for the entire 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.
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