How to use the Photoshop slicing tool correctly

Through the image segmentation can be the Web page in a single load, image segmentation is how to do it? The nine Sudoku in Weibo is not very fun, what is the picture and what tools to divide it into nine equal parts? It's the slicing tool we'll be introducing in this tutorial. Here let us learn together!

When you work with a picture in a Web page, you sometimes want to load a large image, such as the main image on the page, or the background. If the file is large, it will take the time to load the president, especially when the user network speed is slow. You can reduce the size of the file by compressing it, but this will affect the quality of the image and compress the file. So you need to pay attention to the following issues: first, the size of the actual file, the second is the resolution, and the third is compression.

The way to solve this problem is to split the picture, which will allow you to load the image one at a time, until the entire image appears on your screen.

　　1 principle of its use

Let's start by outlining how it works, and when you have a large image that takes a long time to load, you can use the slice tool in Photoshop to cut the image into smaller pieces. These images will be saved as a separate file, and can also be optimized by saving the format used for the web in.

In addition, Photoshop generates HTML and CSS to be used to display sliced images. When used in a Web page, the image is grouped in the browser using the HTML or CSS mentioned earlier to achieve a smooth and fluent effect. Here is an example of an image slice.

　　Basic knowledge of 2 slices

For the sake of simplicity, we only use slicing tools on one diagram. In this example, I use a picture size of 960 x722px. Before we begin, you need to know something about the knowledge:

A. When you create a slice, you can use the slice tool or build the use layer.

B. Slices can optionally be selected using the selection tool.

C. You can move it, set its size, and make slices snap to other slices. And you can also specify a name, type, and URL for the slice.

D. Each slice can be optimized by setting the Web Page dialog box when it is saved.

Press the C key on the keyboard, select the Crop tool, and right-click to select the Slice tool.

When you create a slice, you can set the following three style settings: normal, fixed aspect ratio and fixed size.

A. Normal: Random slices, the size and location of the slice depends on the position of the frame you draw in the image at the beginning and end.

B. Fixed aspect ratio: When you set a number to the height and width, the slice box you get will be the aspect ratio.

C. Fixed size: Fixed set long and wide size

When you split the image, you will encounter some options. If the accuracy is less important, you can slice the image manually, and when necessary, you can use the slice selection tool to adjust the finished slice image. If accuracy is important, you can use guides to mark important positions on the image.

At the top of the Slice menu bar, click on the C or slice tool to activate it on top of the menu bar picture, draw a good guide and select a slice based on the Guide button.

It will automatically draw slices for you. You can also reposition slices using the slice selection tool.

　　3 Edit Slice Information

After you create a slice, you can edit the slice information in either of the following two ways. One thing to do is to click the Slice Selection tool, click the slice you want to edit, and then click the button on the menu bar > Set options for the current slice.

Another option is to right-click the slice and, in the pop-up menu, select Edit Slice Options.

Both options will pop up with the following Slice Options dialog box.

As you can see, there are many settings in the dialog box.

A. Slice name: The name that appears after the page is opened

B.url: Clicking on the edited image area will jump to the target URL you entered

C. Goal: Specify the loaded URL frame the original window opens to indicate whether to open the link in a new window

d. Message text: The content displayed in the bottom-left corner of the browser when the mouse is moved to this block

E.alt Tag: The property tag of a picture, the text message next to the mouse when the mouse moves to this block

F. Slice size: Set the x, y axis coordinates of the block, the exact size of W and H

　　4 Saving Web pages

Once you are satisfied with your layout, select the file > Save the format for the web, saving the picture.

Here you can set the file type for the slice or use the Web Page dialog box to list the default settings. When you have finished setting up, click the Save button.

A dialog box that stores the results of the optimization is displayed, and the dialog box at the bottom is a few important settings.

A. Format: You have three choices, namely HTML and images, images only and HTML only.

B. Settings: You choose Custom, background images, default settings, XHTML and others.

C. Slices: All slices, all user slices, and selected slices.

For this tutorial I use HTML and images (which are generally saved), default settings, and all slices. When you have finished setting up, select the folder where you want to save the file and click the Save button. An HTML file and a six image files are created, which are in the same large folder.

This is an HTML file for the partition screen in Adobe Dreamweaver. As you can see, the code is simple and easy to use.

　5 Conclusion

As you can see, image segmentation is very useful when you have a large picture. By breaking it down into small graphs, loading small graphs one at a time, allowing the user to see more gradually. This is helpful for users with slow speed.

Note : More wonderful tutorials Please pay attention to the triple Photoshop tutorial section, triple PS group: 339853166 welcome you to join

Category:

• PS Getting Started Tutorial