EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 280+ Courses All in One Bundle
  • Login

How to Create a Clean Website Layout in Photoshop

By Jesal ShethnaJesal Shethna

Home » Design » Design Tutorials » Photoshop Tutorial » How to Create a Clean Website Layout in Photoshop

Create a Clean Website Layout in Photoshop – Designing a website layout is more than arranging colorful images and filling some text in the text frames. It is an approach that speaks volumes your client’s business. The website’s colors and graphics define the nature of the business, whereas the quality of design and easy navigation flow of the website should tie the user with the organization and turn him into a potential customer.

Designing a good looking and an easily accessible website layout is mandatory for every wannabe web designer. This tutorial is intended to take you through the process of creating a website layout simple and clean website right from the scratch. During the process, you will come to learn important points which will help you further in gaining more knowledge regarding web designing.Website Layout

Write down your requirements before designing a website layout

Before you start designing a website layout, you should know how your website will look and what are the topics you should include in the website are. It is crucial to make a list of website layout elements your client needs on his website. Along with that, the quality of a good designer is to prepare a mock of the entire website before he starts working on the final template.

Start Your Free Design Course

3D animation, modelling, simulation, game development & others

Various designing companies adapt various levels of pre-designing strategies, which may contain wire framing, prototyping, mockup, beta versions and much more. In this tutorial, we will create a mock-up version before kick-starting the original template design. I am using the grey shades which allow identifying the mockup block

Canvas

Years before while there were very few OS and limited devices to access websites, the dimensions of the page was fixed to one or two sizes. Today the scenario is entirely different. End Users access sites on Desktops of various sizes, mobile phones, iPads and Tablets. In this diverse situation, there is no chance you can fix your web page to a particular size. But there are some Industry standard sizes applied for every device. You will slowly find your favourite size or your Client may refer you a website to mimic the sizes.

In this case, we are working on the following dimensions. Do not worry about the height as it is going to change over time. The more content you are adding to your website the more the height will be.

Remember it is common to scroll down the page vertically, so you may not fix to a particular height for your web page unless you don’t want the user to scroll on your homepage as Google. But, it is necessary not to scroll horizontally. So, limit your width as per the Industry standards and don’t get creative with the horizontal scrolling.

For the web, the resolution is limited to 72. There are higher resolution images and pages found on iPads and few tablets recently. But it is on a rare occasion, and it is better to stick with 72 considering the internet speed across the globe.

dimensions

Select the files using Ctrl+A command and draw guides equally throughout the template. A website should be neatly organized with every element arranged coherently to each other. And website layout guidelines help you to obtain it easily.

Popular Course in this category
Photoshop Training (9 Courses, 12+ Projects)9 Online Courses | 12 Hands-on Projects | 78+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.9 (7,096 ratings)
Course Price

View Course

Related Courses
Adobe Premiere Pro Tutorial (2 Courses, 7+ Projects)All in One Design Bundle (280+ Courses, 100+ projects)

guidelines

Get your mockup ready

Placing your mockup file on your original template helps you to save ample of time. Designing your website becomes so easy that you will end up completing the framework within few minutes. However, the mockup will only help you to design the frames. Completing the elements of design with details, type arrangement and alignment will take excess time than drawing the website layout.

mockup

Color Scheme and other choices

The next thing to after getting your framework ready is to choose a color scheme. But, it is better to get your colors ready before you start working on the design.

The whole thing boils down to the message that, get your guns ready before you start the design. Everything including icons, images, and color choices should be ready before you start working. Organizing and planning your work will save more time and focuses on design without obstruction in between.

Choosing colors can be designer’s choice if the company is new and doesn’t have a corporate identity before. In some cases, clients give an idea of what shades they want the logo or background should be. In the matter of existing companies where you may need to redesign an entire website, you may have to choose the same colors as per the client’s needs.

There are numerous websites which can help you to choose millions of color schemes from the archives. Try out the following websites to enjoy a wide choice of color combination.

Color.adobe.com

Colourlovers.com

color combination

Here I chose few shades of blue to use for the website. The whole website will be planned within the following color scheme. Do not forget to choose three or four different color combinations, as we don’t know which color client will prefer. Once the client finalizes a color scheme, save the shade values and make sure the colors play a vital role in every vertical of the organization. Especially in the corporate identity.

Designing Process

There are many ways to carry on your designers. There are no hard and fast website layout rules to define or follow the process of designing, it is mostly a process the designer will choose to his convenience.

Some designers want to build the entire blocks and frames and start to work on details in the second stage followed by the type and finally alignments and adjustments. Some, like to finish one part of the page at one time and take it to the next part. We are following the second style.

We will finish the website in the following steps

  • Header & Footer
  • What we do
  • Services
  • Form
  • News
  • Footer

Header & Footer

header and bannerThe rule of thumb to define the dimensions of your header or banner is left to your creativity. According to the latest trends, websites appear with a huge image that covers your entire computer screen. The style is referred as Hero image, which became quite popular recently.

In this case, we started with 120 pixels height header and 550-pixel height for the banner. Width should match with the document size.

gradent overlay

Designs with solid color have a flat look which doesn’t go well with larger frames or images. To avoid the flat look, I applied gradient overlay layer on top of the banner. It gives the banner a depth that slowly transforms from one shade to another.

6_logo and SM icons

Next, we started to import the Logo and place it on the top left corner of the header and another bigger logo at the center of the banner. You can also observe the website layout vector shapes at the top right corner, which are used to share the social media links.

7 text for header

At this stage, I finished adding the type in the Header & Banner part. Company name, brand message, with links and services, are added in the text. You can also observe a transparent button on the Banner.

Plain text or too much of type without special features will spoil the look and feel of your web page; the page will soon bore the user, which may let him leave your site quickly. Check out the vector shape I added to the services links on the top right of the banner. The style is simple, yet it fills the void avoiding the mundane look.

9 hero image

Choose an image appropriate to the business. There are millions of stock images available on the web, and it won’t take too long to find an image that fits your requirement.

In my case, I found a high-quality image which I think will go well with my website. I don’t have a business theme for the website, so I am free to choose any image that looks good on the banner post.

Try to download some HD images from free stock image sites given below

www.pixabay.com

10 difference opacity

Blending is an art you should master to produce beautiful banners. Here I mixed three layers to achieve the effect shown in the above image. Here is what I did

  • Place the image layer on top of the blue color banner
  • Place the Gradient overlay above the image
  • Change the opacity of the image 40 percent and change the blending mode to difference.
  • Check out the layers palette in the image above to understand how the layers are stacked on each other.

11 banner header complete

This is how your Header & Banner will look as we just finished working on it. We are working on one part at once, and it is time to move on to the next level.

12 what we do text

Alignment in crucial when it comes to type; have an idea of how your site should look and text should be aligned before you start it. At this level, I used two different text frames, both aligned to the left.

13 services icons

The next step is designing the services part of the web page. I designed a metallic star in gray shades to showcase various services of the company. The intention behind using the star symbol is 5 Star services.

14 services headings and text

When it comes to aligning the text Guides are your best friends. Coherency within type and objects can be obtained by making good use of the white space and equal gaps between the elements of design. I used many website layout Guidelines to see that all objects in the frame should maintain proper gaps and distances which bring out a fair amount of white space.

15 Form filling

The next step of our design is to create the Form field. In this case, I am working opposite to the method which we used in designing the banner. We will place the image layer below the solid colored layer and apply a gradient layer on top of the two layers to achieve a better look. Playing with the blending modes is always essential while placing larger images.

Website Layout - 16 istanbul

The choice of the images for this site has no specific theme related to it. I think this image will help the site look better.

Website Layout - 17 istanbul

Place the image below the colored background layer. To fix the image exactly to the size of the colored layer, use layer masking options.

Website Layout - 18 istanbul and blue layer

Take a look at the layers palette in the above image. The solid blue colored layer is on the top of the image, the blending mode is converted to overlay and opacity is reduced to 65 percent.

Website Layout - 19 color correctin

I used the gradient map on top of the two layers. Blending mode is changed to hue and opacity remains same.

21 form text

The form box is ready, which brings us to the end of the fourth level in our website design.

Website Layout - 22 latest news

Our next level consists of two simple text frames. It resembles the level two of the web page and I used aligned the two boxes similar to the top. Maintaining coherency in alignment is a good way of using the white space.

23 footer

As we reached the final part of the page, it is time to look at the dimensions of the footer once again. The designer has to plan about the height of the footer based on the links he should use there. In this case, I gave a height of 170 Pixels to my footer. Width remains the same as the website.

Website Layout 24 footer complete

Place the links and images as per your requirement.

With this, we concluded the designing part of our website. The color combinations we used are minimum, we make use of a lot of white space in our design and added simple text with minimum fonts. The intention is to design a clean web page, which we hope is fulfilled.

Please take a look at the design of the entire page below once again

Website Layout full image

Photoshop Training (9 Courses, 12+ Projects)

9 Online Courses

12 Hands-on Projects

78+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

5 Shares
Share
Tweet
Share
Primary Sidebar
Photoshop Tutorial
  • Effects
    • Text Effects in Photoshop
    • Metal Text Effect in Photoshop
    • Reflection Effect in Photoshop
    • Snow Effect in Photoshop
    • Mirror Effect in Photoshop
    • Motion Effect in Photoshop
    • Oil Paint Filter in Photoshop
    • Plastic Effect in Photoshop
    • Rain Effect in Photoshop
    • Gold Text Effect in Photoshop
    • 3D Text in Photoshop
    • 3D Text Effect in Photoshop
    • Clipping Mask in Photoshop
    • Fill Color in Photoshop
    • Delete Background in Photoshop
    • Transparent Text in Photoshop
    • Make Logo in Photoshop
    • Blend Images in Photoshop
    • Website Layout in Photoshop
    • Change Hair Color in Photoshop
    • Change Color in Photoshop
    • Highlight Text in Photoshop
    • Change Text Color in Photoshop
    • Change Shirt Color in Photoshop
    • Filters in Photoshop
    • Portrait Effect in Photoshop
    • Fire Effect in Photoshop
    • Ice Effect in Photoshop
    • Metallic Effect Photoshop
    • Photoshop Font Effects
    • Glow Effects in Photoshop
    • Tree Brush Photoshop
    • Shiny Effect Photoshop
    • Morphing in Photoshop
    • Dispersion Effect in Photoshop
    • Photoshop Distort Effect
    • Typography in Photoshop
    • Photoshop Cinemagraph
    • Glitch Effect in Photoshop
    • Photoshop Straighten Image
    • Stamp Effect in Photoshop
    • Warp Image Photoshop
    • Fix Perspective in Photoshop
    • Vanishing Point in Photoshop
    • Fisheye Effect in Photoshop
    • Distortion Effect Photoshop
    • Resize Object in Photoshop
    • How to Paint in Photoshop?
    • How to Print in Photoshop?
    • Perspective Correction in Photoshop
    • Photoshop Sun Effect
    • Photoshop Gold Gradient
    • Night Effect in Photoshop
    • What is Masking
    • Photoshop Polaroid
    • Pixel Effect Photoshop
    • Vaporwave Photoshop
    • Vintage Effect Photoshop
    • Photoshop hologram effect
    • Templates in Photoshop
    • MP4 to GIF Photoshop
    • Photoshop Cheat Sheet
  • Basic
    • Introduction to Photoshop
    • What is Photoshop
    • Career in Photoshop
    • Install Adobe Photoshop
    • Plugins in Photoshop
    • Photoshop Versions
    • Uses Of Photoshop
    • Adobe Photoshop Shortcut Keys
    • Adobe Photoshop Commands
    • Adobe Photoshop
    • Is Photoshop Free
    • Top 10 Features in Adobe Photoshop
    • Layers in Photoshop
    • 10 Free UI Kits For to Download
    • Smart Objects in Photoshop
  • Tools
    • Adobe Photoshop Tools
    • Clone Stamp Tool in Photoshop
    • Eraser Tool in Photoshop
    • Selection Tool in Photoshop
    • Blur Tool in Photoshop
    • Eyedropper Tool in Photoshop
    • Move Tool in Photoshop
    • Paint Bucket Tool in Photoshop
    • Patch Tool in Photoshop
    • Pencil Tool in Photoshop
    • Line Tool in Photoshop
    • Color Replacement Tool in Photoshop
    • Background Eraser Tool in Photoshop
    • Burn Tool in Photoshop
    • Custom Shape Tool in Photoshop
    • Magic Wand Tool in Photoshop
    • Quick Selection Tool in Photoshop
    • Red Eye Tool in Photoshop
    • Ruler Tool in Photoshop
    • Sharpen Tool in Photoshop
    • Smudge tool in Photoshop
    • Sponge Tool in Photoshop
    • Rectangle Tool in Photoshop
    • Lasso Tool in Photoshop
    • Adobe Photoshop Elements tools
    • Photoshop Mixer Brush Tool
    • Watercolor Brushes in Photoshop
    • Artboard in Photoshop
    • Crop Tool in Photoshop
    • Healing Brush Tool in Photoshop
    • Transform Tool Photoshop
  • Interview Questions
    • Photoshop Interview Questions

Related Courses

Photoshop Training Course

Adobe Premiere Pro Training Course

Design Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Photoshop Tutorial
  • 3ds Max Tutorial
  • All Tutorials
Certification Courses
  • All Courses
  • Design Course - All in One Bundle
  • Photoshop Course
  • Maya Course
  • Unreal Engine Course
  • Unity Course
  • DaVinci Resolve Course
  • Pro Tools Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Design Course

3D animation, modelling, simulation, game development & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Design Course

3D animation, modelling, simulation, game development & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - Photoshop Training (9 Courses, 12+ Projects) Learn More