Design a Minimalist Website layout in Photoshop


I hope you all enjoyed my previous photoshop tutorials. Today, I will show you how to create a minimalist layout for your personal site. Through this tutorial, you will be able to design a professional, clean, elegant and simple minimalist web layout.

You might also want to check out : Create a Stylish Web Layout Using Photoshop

This is how the end result will look like :

Final Version


So Start with a blank document.

Now pick up the foreground color to #ada6a0 and fill the entire work area.

We will have to focus our logo portion in the layout. So go back to the foreground color to white and select the gradient tool (Radial)

Now make a gradient over the top of the document from the middle portion just like as shown below. We will place our logo in this area so that it will pop out.

So time to set up the main elements in the layout. Choose the Rectangle tool and draw a menu bar over the top portion of the site.

Set the blending options of the menu bar as shown below. Drop Show Opacity 75%, Size 4px.

Now make another rectangle area just below the menu bar so that we can use this portion for the image slide panel.

The following image depics the basic arrangement of all our web elements.

Lets now setup the menu items. I choose Rockwell font and 18px size for the menu text.

We need a search bar in the menu bar. So draw a small search field at the right side of the menu bar and set the blending options of the layer as follows.

You can also add some custome texts and a small icon for the search button (You can find the icon in the custom shapes).

I have added some nice pictures which will best suite for the layout just as shown below.

Now add some dummy text to the featured bar and a ‘more…’ button.

You can use the bottom field for the content of the site and a brief introduction and the footer section, give your credits and the links.

Here we go. Finally we reached our goal. How’s it look? If you got any doubts, please feel free to contact me or just refer the PSD file.


Hope you enjoyed the tutorial very well. See you soon with the next tuto.. Have a blast :p


Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings


Jilson Thomas is a freelance graphics designer, and web developer. He is dedicated to creating work that is every bit as unique, beautiful, and inspiring as his home. His fields of interest include: web layout design, brand indentity design, stationary design. Get some more freebies from him at here: Also follow him on twitter @jilsonthomas to get more freebies! You can also take a look at his Marketplace items
All Articles by
8 Comments on “Design a Minimalist Website layout in Photoshop” Join The Discussion!
  1. Anila Arshad says:

    cool very informative…..

  2. ramalho says:

    Hi WEB Family,

    WEB 2.0, awesome layout tutorial. I love it.

    Thanks for sharing

  3. Hermitbiker says:

    …. thanks Ayaz, I always like all your shares and this one is no exception…. a fine tut it is !! :-)

  4. asad says:

    why we said this is web 2.0 and this is blog.
    i think blog is web 2.0

  5. life coaching articles says:

    Wow..its amazing tutorial with layout.The layout tutorials looks an awesome one.Can’t wait to WEB 2.0.

  6. Nicki Minaj says:

    Hey, nice article.

  7. designzzz4gill says:

    great reference, sample as well as fonts, a ton of thanks to Deesignzzz

    1. Tayyab says:

      Thank you Gill!

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved