Design A Cool Landing Page For A Food Company

This tutorial is about creating a cool and stylish landing page for a food company website. Actually I designed this page for one of my client and I just love this web design specially its navigation so I thought about writing a tutorial on this web design. So lets start the work Smile

Final Image

final image

Create a new document in Photoshop. The height and width of the document should be 1000px each. Now fill the document with #f1dd71 color.

photoshop tutorial

Now go to Filter > Noise > Add Noise and add some noise to the background to make it look bit rusty.

photoshop tutorial

Your background will look like this after adding the noise.

photoshop tutorial

Now we need to add the wrapper of the web page. Select the center area of the page and fill it with white color.

photoshop tutorial

Write the logo text and then open the layer styles to give it some styling. I used Ravie font for writing the logo.

photoshop tutorial

photoshop tutorial

Your logo will look like this.

photoshop tutorial

Now select the Script MT font and write the subtitle for the logo. Then select the transform tool to move it on one side just like the below screenshot.

photoshop tutorial

Now comes the most interesting part of the design and it is the navigation. The navigation is transparent this is the reason it looks so beautiful. First select the rectangle marquee tool and select the area from the background. The selected area is the size of your navigation so choose it according to your navigation needs. After selecting the area right click from your mouse and select the option of layer via copy. Now select the new layer and open the layer style of the layer and fill all the following settings. This is the most crucial part of this tutorial so do it carefully.

photoshop tutorial

photoshop tutorial

photoshop tutorial

photoshop tutorial

photoshop tutorial

photoshop tutorial

Your transparent navigation is ready now. I placed the navigation on both white and yellow color so that the viewers of this web site can notice that the navigation is transparent. Have a look at it.

photoshop tutorial

Now copy this layer five times and place it under the first one and add the navigation text links to the design.

photoshop tutorial

Now add the image of any food in the top right side of the design and write the introduction text just under the product image.

photoshop tutorial

Now add the rectangle shape at the bottom of the design and write the copyright and navigation links on the shape. Your landing page is ready have a look!

photoshop tutorial

Comments
  1. zoro learner

Leave a Reply

Your email address will not be published. Required fields are marked *