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

Before we go further remember to Subscribe to our Free Rss Feed or Follow us on Twitter to stay updated with our postings

This is how the end result will look like :

[Download PSD]

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.

[Download PSD]

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

Follow Designzzz on Facebook