Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Web design with Photoshop part 1/10 – Setting up the page

Thursday, January 7th, 2016 by Servage

photoshopIn this series of ten articles you will learn how to build an entire website design from scratch. The starting point is a blank page and no prior Photoshop experience is required. The final result will be a finished website design template in Photoshop PSD format. In a later series we will look at building the HTML.

We first want to set-up a grid in PSD format for the website. Starting with a grid is good because it gives structure to the design. For this, we will go to and download the grid files from their website, because we do not need to reinvent the wheel. Extract the files from the ZIP file, and in the template folder select the Photoshop folder and inside Photoshop, select 960_grid_12_col. Open the 12 column grid in Photoshop and select the Canvas size to 1400 by 2500 pixels and make sure anchor is set at the top. We use the 12 grid system because it is one of the most versatile ones. To turn on the guides, press ctrl and semicolon or you can go to View > Show > Guide.



The next step would be to plan what sort of fonts you will be including in the website. You may search on the Internet for different sort of fonts available for free. We will be using Lobster Two and Museo. You can download Lobster Two from Google Fonts and for Museo you may visit and download it. Once, downloaded install the fonts to your computer and the font option will be available on Photoshop.

Back in the Photoshop template, create a rectangular layer with a size of 1600 by 100 pixels. This will be our navigation bar of the website.


Double click on the rectangular layer and change its color to something darker so we are able to see the layer clearly. We will give it a proper color in the later stages of the template development. Next step is to add the elements in the header section like the logo and the menu. Click on the text button and write the name of your website. We will be using the font Lobster Two which will be 48 pixels and bold. Click on both the layers and align them horizontally. Select both the background layers and the logo layer, then use the move tool for aligning them horizontally. Next would be our menu items. We will be using Lithos Pro font 14 pixels.


Always remember to group your layers. For grouping the layer, select the layers and press ctrl and G.


Make sure to keep equal distance between the menu items. I have kept 40 pixels in between the items. You can use shift plus left arrow key for keeping your distance. Pressing an arrow key one time means 10 pixels of distance. Now press the arrow key 4x times and repeat this procedure for all the menu items. Make sure to keep the menu items horizontally aligned with the header section.

Web design with Photoshop part 1/10 – Setting up the page, 4.3 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.