After I have finally set up all the elements, it is time to choose the form in which they will be presented on the Web. In doing so, I can use the so-called Web graphics, raster images, or to use HTML and CSS coding. It should be remembered that pages containing HTML and CSS load faster and that popular search services such as Google will “scan” their content more easily.

In this case, the largest part of the page can be set up with the help of HTML and CSS, but graphics must be used for certain parts. It is precisely for this reason that it is necessary to use the appropriate technique to extract certain segments and save them in the form of independent files. In this lesson I will show you how to do it.

To begin with, it is necessary to set up a few more auxiliary lines, as this will make the final selection much easier. This primarily refers to this small semicircular object that represents the currently selected option, so I will first enlarge it and then start the Move function and click on it. That’s how I made the selection, so it won’t be difficult for me to precisely place new auxiliary lines. I have to repeat the same procedure for the illustration on the right, so I will first enlarge the corresponding segment, select the image and set auxiliary lines. Unfortunately, some of the elements I used are not suitable for automatic placement of auxiliary lines. This is exactly the case with the circles located in the lower left corner, but with a little effort, all the necessary elements can be placed here as well.

Now that I have everything I need, it’s time to show you how to crop images. In Photoshop, this can be done using the Slice function, and since it is not currently available to me, I must first click on the Crop icon and select the Slice option from the auxiliary menu. After that, it is enough to frame the segment I need and thus create a new segment. The program will automatically follow the auxiliary lines, so it will not be difficult for me to precisely cover the entire image. In the same way, I can mark the entire banner, while for cutting smaller elements it is better to use the Zoom function first. I will repeat this process two more times, for this large image and the circle in the lower left corner. If I then display the entire page, you will notice that next to each marked segment there is a different mark. It should be borne in mind that segments that you marked yourself will be marked in blue, and those that were created automatically will be marked in gray, regardless of whether you need them or not. You don’t need to worry about that, because you can easily delete all redundant files.

Each segment has already been assigned a suitable name, and if you don’t like it, you can easily change it. It is enough to right-click on this label and select Edit Slice Options from the menu. In the frame that follows, a new name can easily be entered instead of the existing one. I won’t do that, so I can immediately click the Cancel button and close this frame.

Photoshop allows me to create and simultaneously optimize all necessary graphic elements in one go. This can be achieved by using the Save for Web function found in the File menu. Since this process is fully automated, I only need to choose the format in which future files will be created. I’m fine with it being PNG, but for this big picture I’ll still choose JPG. After that, I just need to click on the Save button and choose the folder where all the files will be placed. The folder intended for images was automatically opened for me, so I can freely switch to other parameters. The names of the files should not be changed, but that’s why it’s not a bad idea to select the Images only option from this list. That way, I will get only images as the end result, without any additional codes. Since everything else is in order, I can click the Save button and complete this process.

Now I just need to check what I have achieved. So I’ll launch Windows Explorer and display the contents of the images folder. As you can see, there are many new files in it, and they are snippets that I can use to create a new website. To make it clearer to you what it is about, I will change the way the contents of the folder are displayed so that all graphic elements appear on the screen immediately. In order to distinguish them even more easily, I will use this opportunity to change the names of individual files. I will start with the image that represents the offer of the month and then look for graphic elements that are intended for navigation. Finally, there are files that will help me create the logo and separate it from the rest of the website.

In this lesson, you saw how to create graphic elements that you can easily use later as parts of a Web presentation. The same result can be achieved in several other ways, but it seems to me that this is the fastest and most efficient.