Creating your own website always begins with the development of a sketch and future design, and an integral part of this development is the visualization of the site design in Photoshop and cutting the finished design into blocks for subsequent layout. The ability to correctly cut a picture of the site design directly affects the further success of the layout and the correct placement of graphic files on the server.
Instructions
Step 1
Open the created design layout in Photoshop, which is a solid image of the desired resolution. On the toolbar in Photoshop, select the Slice tool. Temporarily turn off the visibility of all text layers, input fields, icons and similar elements.
Step 2
Draw guide lines with the chosen tool, along which you will cut the site - these lines on the image will be green. Divide the one-piece layout carefully into structural elements of the desired size and quantity.
Step 3
Think about how you will cut the image - there should not be too many individual elements in it. To create guide lines, place the cursor on the upper ruler over the image, left-click and drag down the guide. Release the mouse button.
Step 4
After all the guides are set (both vertical and horizontal), proceed to slicing the layout.
Step 5
Using the cutting tool selected above, cut the layout by left-clicking on the beginning of each guideline and stretching the appeared field to the size of the desired object that you want to cut. Release the left mouse button so that a serial number appears in the left corner of the cut fragment.
Step 6
Adjust the borders of the fragments by manually stretching them. To save the sliced portions of the overall image, click the "Save for Web Pages" option on the File menu and select the JPEG format. In the save window, select "All fragments".
Step 7
After saving the cut image fragments separately, save all the visual elements of the page design - text blocks, buttons, lines, and so on.
