The first step in creating a new website usually consists of creating a sketch that will help you find a suitable graphic solution and set its basic elements. I will use Photoshop for these purposes because it allows me to start from a completely blank screen and gradually add new objects.

Before moving on to something more specific, I would like to remind you that the current size of this document is 960×690 pixels, which corresponds to most modern devices from PCs to “smart” phones. In addition, I have already turned on the display of rulers and activated guidelines, which can be easily checked from the View menu. For precise positioning, the Info panel should also be included because it is the best way to track the position of individual elements.

To begin with, I will frame a field at the top whose height is exactly 110 pixels, and after that I will place one auxiliary line on its lower edge. It will automatically coincide with the set border, which means that I have placed it in the desired place. I can repeat this procedure on the bottom edge so that the header and footer of the site are the same size. I need a smaller space on the left and right sides, so I’ll settle for 10 pixels. In this way, I placed auxiliary lines on all four edges, so I can move on to something more specific.

To begin with, I will place an image representing my company’s logo on the page. To that end, I will start the Place function from the File menu because it allows me to simultaneously change the size and shape of the new element. I don’t need that for now, so I’ll just press Enter and finish this operation. Now I just need to place it in the appropriate position, in the upper left corner. If you pay attention to the icon located in the Layout panel, you will see that it is the so-called Smart Object, which means that I can change it without it affecting its quality. Photoshop allows you to use different graphic formats, so it will not be difficult for you to achieve the desired results.

The navigation bar can be placed horizontally or vertically. I like the first variant better, so I will start the function for entering text (Type tool) and click somewhere near the top of the screen. Font type and size are not important to me at this point, so I’ll use what I currently have available. It is only important that there is enough free space between individual items so that they can be clearly distinguished. As soon as I enter the complete text, I can place it in the appropriate place with one stroke and move on to the next element. In order to speed up this process, I have already prepared all the necessary texts and placed them in a separate file. Since it is among the practice examples, it will not be difficult for me to open it and start copying. To begin with, I will select one row and transfer it to Photoshop. In the same way, I can transfer other data and thus complete the footer of this website. Since I did not take into account the position of individual elements when entering them, I have to tidy them up a bit, align them with the auxiliary lines.

I can repeat the same system for filling the central part. To that end, I will first select the entire paragraph, with the fact that a slightly different procedure should be used to transfer it to Photoshop. Instead of just clicking on an empty area and pressing Control+V, I will first define a special frame and then use the Paste function. After that, all the inserted text will be placed in the given field, which means that I will be able to format it more easily later.

Since I still have some free space left on this page, I will select another row and transfer it to Photoshop. It consists of three terms, so I have to separate them, and this can be done most easily with a combination of Cut and Paste functions. In fact, one of them needs to be replaced with a picture, so I will delete it first and then run the Place function and place the appropriate illustration in its place. As soon as I confirm its entry with Enter, I can move it to the right side and edit this part a little more.

At this stage, the most important thing is to provide all the necessary elements that should appear on the new website, and you can leave their final design for later. I just finished it, so I’ll use the rest of this lesson to show you how to group layers in Photoshop. In this case, I need three groups – Header, Body and Footer, so I will select the elements that make up the first group and click on this option. At that moment, a new menu will appear, so it won’t be difficult for me to select the New Group From Layers function from it and call it Headers. The next three elements are located in the central part of the page, so I will place them in a group called Body and move the rest to Footers. Since I have arranged almost all the layers in this way, I only need to edit this list a little, to place the Headers on top of it and leave the rest of the contents below it. For this picture, it is obvious that it belongs to the middle part, so I will also transfer it to the appropriate group. As you can see, all the layers are now classified into appropriate groups, and their contents can be easily checked by clicking on one of these arrows.