Create a Web Page Design in Photoshop

Photoshop brings a new meaning for the designers’ work. In order to make their life easier, Photoshop can be used for creating the web mock-ups, which then get approved for the original web-page development. The approved mock-ups are usually the easiest way through which the developers prohibit the continuous changes in the design. Below are the steps for creating the mock-up.


1. The first step is to manually set the style and size of the web-page. Web pages can either be one page or multi-page. It has several sections or different panels. Set these things according to the requirements of the client. For this tutorial, I am going to create a single page mock-up with seven sections – including the footer. Create a new document and set the size as shown in snapshot below:

2. Now, in order to make your life easier, add the horizontal and vertical guides to this new document. The guides help in placement of objects, texts, pictures etc inside the web page. For me, the horizontal guides set the limit of each section and the vertical guides divide the canvas into 10 equal parts.
3. Create a new group and rename it to header-bg. Create a new layer inside this group. Insert the background image of the header. [Open the image in Photoshop. Press ‘Ctrl A’ & ‘Ctrl C’. Go to the original document i.e. web mockup. Select the new layer from the layers-palette and press ‘Ctrl V’. Press ‘Ctrl T’ to resize the image according to the header-section.]
4. Now, create another group and rename it to ‘First’. Press ‘Ctrl Alt +’ to magnify the document. I am going to insert Navigation-bar, (which will include the menu consisting of four tabs), simple text, and social-media icons. There is a plug-in for these icons or you can download it from internet. Rearrange these things on the canvas. Set the font according to the type of the webpage. For buttons, create a new layer. Draw a rectangle using the rectangular-marquee tool. Set the foreground color to which ever color button you want (it’s kind of see-green for this mock-up).

For each set of things, create a new group. Like for menu, I have created a group inside the ‘first’ group and rename it to ‘Nav’. The social-media icons are arranged in a separate group and so on. However, much you like to insert things, pile up the similar purpose layers in one group. This way, if you want to modify or change anything, you would know exactly which layer of which group you are going to change. Below snapshot is the header of this very mock-up.
5. While designing, you will see how the grid-lines help you identifying the starting and ending point of elements on the canvas so as to centralize them. After the header, the next turn is of second section. For every website these sections are different due to different natures of the product/ services/ companies these websites represent.
The picture I have inserted is downloaded and adjusted from internet. I have combined two different pictures of hand and i-phone and merge them in one. Though, the image is in the third section but it will hide under the third section and won’t be visible. You can also crop the part. It will produce the same result. Remember, not to destroy any pixel, so don’t change the size of the original pictures.
6. Repeat the steps to create the remaining sections of the mock-up. Every section should be in the group. Don’t forget to pile up related-layers into the group. The final mock-up would be like this:
7. Clear the guides, save the .psd, and share it with your employer. Make modifications easily.

Tags: , ,

Author: Haseeb Khan

Share This Post On

Submit a Comment

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

17 + 20 =


Pin It on Pinterest

Share This