In this tutorial, I’m going to show you how to start designing our website. You will see you don’t always need lots of fancy effects to make a professional and good-looking web design that will impress your visitors.

In this tutorial, we need to have some basic understanding of Photoshop and know how to do basic tasks.

Create the document

First of all we need to open Photoshop and create a document to start designing our website.

  • Create a document with a size of 1100px1100px
  • Then add some vertical guides at 70px and 1030px.*

*Guides will give us a width of 960px, which will fit on most screens.


To create the header, we first need to add a background. Select the Rectangle tool (U), and set your background color to a dark gray color (#343434), and then create a rectangle form left to right. 



To add the site name, set the font to Montserrat. If you don’t have this font in your computer, you can download it in here —> https://fonts.google.com/specimen/Montserrat

To set the options, go to the Character Panel (window > character). Set the font size to 60px and the color to a soft white-gray (#e5e5e5). With the Text tool (T), type the name and position it against the left guide. 



To add the navigation area, set the font size in Monserrat to 16px, the weight to ultralight, and the color to a light blue (#b7e3ff). Then, type some page names like “Home”, “About us”, “Services”,…

Separate each name with an horizontal bar.   



To create the featured content section, we need to start by adding the headline of the featured content. Set the font to Monserrat, the font weight to bold, the font size to 60px,  and the color to #343434. Type the title in with the Horizontal Type Tool (T). To make the headline stand out a little more, we’ll change the color word “WEB” to the same blue we used before (#b7e3ff).

Underneath we will add a subtitle. Set the font to Montserrat, the font weight to Regular, the size to 50px, and the color to #d3d3d3. Type a subtitle and position it just underneath the title.

We now are going to add a short overview of what the company does. Set the font to  Montserrat, the font-size to 34px, the color to #343434 and then type a few lines of text. Pick up the Line Tool, set the color to #343434, and create two lines over and under the text. 


From here, you can continue on your own way!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.