Making website homepage with Photoshop (3): Cutting web page pictures – web page templates

Making website homepage with Photoshop (3): Cutting web page image source: xuexin.com Xue Xin
Cutting images is a very important part of web design. It can easily indicate for us which areas are pictures and which are text. area. In addition, reasonable image cutting can also help speed up the download speed of web pages, design web pages with complex shapes, and compress images with different characteristics into different formats. 1. Use the “Slice Tool” in the toolbox to make a cut on the left and right sides of the title part, use the “Slice Selection Tool” to double-click the right part, and set the slice type to No Image in the pop-up panel. Because this part is a solid color, in order to display the same effect on the web page, set the slice background to black, so that this part will be replaced by a transparent placeholder and black background color after it is output to the web page, as shown in the figure.

Figure

2. Use the fixed size of the slice, set the width to “68” and the height to “40”. This time it is the navigation bar button for cutting. Align the slice with the object to be cut. Be careful to avoid overlapping between slices, as shown in Figure 1-3-2.

Figure 1- 3-2

3. Use the same method to cut other navigation bar buttons. Note that the last “Management Committee” button has three words, so set the slice width to be larger, as shown in Figure 1- As shown in 3-3. It should be noted that when cutting, attention should be paid to balance. For example, if the right side is cut, the left side should also be cut at the same height, so that it is not easy to mess up when outputting into a web page.

Figure 1-3-3
4. The cutting method is the same as above, pay attention to the number in the upper left corner of the slice. There are two slices in the next row, 14 and 15, and three slices in the next row, 16, 17, and 18. Among them, 17 is a solid color, so it is set to no image and marked with the corresponding color, as shown in Figure 1-3-4. The latter method is basically the same. You need to set the solid color background part processed in Dreamweaver to no image and fill it with the corresponding slice background color. If the range of a layer is exactly the size to be cut, you can directly use the “layer-based slicing” function.

Figure 1-3-4

5. Execute the menu “Save for Web and Device Used Format”. This command is used to output the PSD source file into a format used by web pages or mobile phones and other devices. Make simple optimization settings in the dialog box. After confirmation, set the output type to “HTML and images” and output all slices, as shown in Figure 1-3-5.

Figure 1-3-5

Application from one example:
Try to use the cutting tool to cut the existing layout, and pay attention to the cutting skills.

Search for more posts on related topics: Web Photoshop Home Slicing Cutting

<!–Collectio