Have you compiled an original layout with graphic elements and would like to make a layout? First, you need to learn how to slice the layout so that each of the graphic elements is subsequently in the right place in the middle, top or bottom of the page.
Instructions
Step 1
When choosing techniques on how to cut a layout, remember that each layout designer uses his own methods of cutting it when working with PSD layouts. Therefore, at the first stage, choose only the simplest techniques, which include cutting the created layout with graphics into pieces, which is convenient for beginners. First, first imagine in your mind what parts you will be dividing your layout into, think over each of its separate parts, and only then proceed to the technical part of the process itself. Remember that the PSD layout is divided into "chunks" depending on its complexity, dividing it into separate elements. Moreover, each graphic element must be independent of all other details.
Step 2
When deciding how to cut a layout with a header consisting of buttons, a separate background layer and text layers, remember that in this case the entire header cannot be cut as a picture. In such a situation, it is better to cut into pictures separately all text layers, each button, as well as the background layer of the header. Secondly, slicing a layout assumes the layout designer to perform actions in the following sequence. If the text is only part of the decoration, use it before HTML / CSS layout.
Step 3
First, open the layout itself in Photoshop so that the layers panel appears on the right, which is considered as the backbone needed to start the layout. In the case when all images are clickable, open the full resolution version of your layout. Next, lay out all the graphic elements so that they look the same as in HTML format, so save each pronounced graphic element in the desired format: GIF, JPG, or PNG. Next, leave only the element that you are going to cut, and simply turn off all other layers, and transfer the desired layer to a new document created in Photoshop in advance.
Step 4
To select the required graphic element, use such a tool as the Rectangular Marquee Tool, which allows you to mark the selected area with a dotted line. After that, crop the rest of the layout down to the dotted element using the Image> Crop menu. To get rid of unnecessary background layers, apply a gradient fill, turning off the visibility of the background layers. Next, trim the corners of the selected part, and then keep all other layers transparent.
