Blogger Ever

How to design a basic web layout in Photoshop in just 5 minutes

Designing a basic layout on Photoshop is not an hard task but it can give a hard time to you. Try this article to have an idea of how to kick start a basic layout on Photoshop and really after this you can make one in 5 minutes.

If you will read my previous articles related to Photoshop then you will find that I have focused the the use of Photoshop in web designing. This article will give you an idea of how to jump start a web design layout in Photoshop.

Begin from mind not Photoshop

The mind is the power-house for ideas, start create a creative layout in your mind and sketch out on a paper. Make sure that you have all the elements on the paper with their approximate size (width and height) so that when you will add it up on Photoshop it will help.

Make sure have a the following things in your mind:
  • Color scheme,
  • elements (like to have sidebar or to have a single column, double etc),
  • ad places,
  • their approx. sizes.

My thinking on paper

Bad drawing? I know

Lets start

Step 1: Canvas with convenient size

Using PS CS5.5 (can't afford upgrades). Taking 1:4 ratio of size so to have a full web layout on a single canvas. You can change yours accordingly.

Canvas with convenient size

Step 2:Create guides (Most important)

Step 2:Create guides (Most important)

Look at your sketch and create guides accordingly, this will ensure a quick and better layout design.

Start with rectangle tool

Start with rectangle tool

Take rectangle tool (vector) and start creating layout. Choose colours you want and start making out.

Add details

Add details

Add details that matters, this is a basic layout so their is no need of adding something not important.

Final Words

This is something you need to practice again and again to get a better result for a professional work. These Photoshop PSDs are sold online on markets like Themeforests. Further these are greate checkpoints to a great designs.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.