Design a Minimalist Website layout in Photoshop


List Of Binary Option Strategies Qi

How To Learn How The Stock Market Works

Oslo Brs Launches Binary Options For Private Investors

Reading Binary Option Charts 50 Deposit


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

Further Related Readings

  1. Anila Arshad July 27, 2010 at 8:29 am

    cool very informative…..

  2. ramalho July 27, 2010 at 11:13 am

    Hi WEB Family,

    WEB 2.0, awesome layout tutorial. I love it.

    Thanks for sharing

  3. Hermitbiker July 27, 2010 at 3:54 pm

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

  4. asad July 28, 2010 at 1:39 am

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

  5. life coaching articles August 2, 2010 at 8:02 am

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

  6. Nicki Minaj August 24, 2010 at 7:42 pm

    Hey, nice article.

  7. designzzz4gill December 14, 2011 at 2:51 am

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

    1. Tayyab December 14, 2011 at 3:15 am

      Thank you Gill!

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved