Are the images on your Web page an attraction or a distraction? Do they invite visitors to explore your page, or send them fleeing to the Back button? Attractive images that load quickly are the key to captivating those who visit your site. Unfortunately, even the most gorgeous images will never be seen at all if they take forever to download. Slicing images is a great tool for improving the download speed of your Web pages. Instead of loading up your page with huge pictures that download slowly, you can slice up your images into byte-sized pieces optimized for speed, appearance, and special functions such as links. Photoshop creates the HTML (the language used to create Web pages) needed to reconstruct your images on your page.
Why Slice?
Although speedy broadband connections are becoming more common, a huge number of Internet cruisers are still using dialup connections with top speeds of 56 Kbps or slower. For these users, nothing is more painful than clicking a link and watching a blank page laboriously download a few pixels at a time. When confronted with a page like this, users are likely to click their Back buttons and move on. Your solutions, as Webmaster, fall into several categories:
- Use images with very small dimensions. Buttons and graphic rules download quickly. However, they are usually ornamental or functional rather than centerpieces of your page design.
- Select the best format for your image. Choosing the JPEG or GIF format when appropriate can make a significant difference in how quickly your image downloads.
- Optimize the heck out of the image. One image in a particular format can be five or ten times as large as the same image in the same format, depending on how you’ve optimized it.
- Slice your image into pieces. Individually optimize each piece for its intended purpose: appearance, download speed, or a combination of the two. With a little care, you can take a complicated image and divide it into slices that look as good or better than the original. Slices also enable you to easily apply Web features such as rollovers.
Another point to keep in mind is that visitors will be using different screen resolutions. If you’re happily cruising the Internet at 1024 x 768 resolution, that doesn’t mean you should include really large images on your pages (even if sliced and optimized). Other users with the same screen resolution you use may have set their browser windows to a smaller size or may be using displays with a maximum of 800 x 600 pixels or smaller. The ability to slice images doesn’t mean you can fill your screen with gigantic graphics.
Slices also let you treat different parts of an image in different ways, associating some with Web links to other images or pages, just as you can do with image maps. Design your Web pages to fit your audience. If your site is geared toward the masses, make the pages a maximum of 800 x 600 pixels. If it is aimed at a specialized high-end audience, then you can go as large as 1024 x 768 pixels.
Slicing Up Images
You can create slices from many different kinds of images. For example, you might be interested in slicing the menu of choices on the left side of the figure so that you can include links to the individual pages referenced. The lower image of the four foreign lands offers even more motivation for slicing. It’s fairly huge and would load much more quickly if you sliced it up into four sections. Each slice is also a candidate for a link that would take visitors to a page devoted to that particular country.
Types of slices
Photoshop enables you to create several different types of slices:
- User slices: You create these slices by defining areas of the image.
- Layer slices: Photoshop creates these slices from layers of an image.
- Auto slices: Photoshop creates these slices automatically to account for the rest of the image when you’ve sliced a bit out of it.
Creating slices
To slice up an image into user slices, just follow these steps:
1. Select the Slice tool from the Tools palette.
Or press K to activate it. When you select the Slice tool, an indicator graphic appears in the upper-left corner of the image, marking the whole image as Slice 01, even before you’ve selected a new slice.
2. Drag with the Slice tool to select the part of the image you want to slice.
For example, select the entire Japan area in the lower edge. A solid slice selection box appears around the new slice, with handles at each corner and at the sides, top, and bottom. Photoshop assigns the slice a number and icon in its upper-left corner.
3. Repeat Step 2 to slice the image into as many individual portions as you want.
For example, continue to select the other countries to slice the image into individual portions. Photoshop assigns each of your user slices its own slice number and icon.
Slicing options
The steps in the preceding section show the slicing operation in its simplest form. You do have some additional options, however, as described in the following list:
- Use a fixed size or fixed aspect ratio (proportion). Choose Fixed Size from the Style pop-up menu in the Options bar and type a width and height in pixels in the Width and Height boxes. Or choose Fixed Aspect Ratio and type the relative proportions you want to use (that is, 1:2, 3:4, and so forth) in the Width and Height boxes. Photoshop constrains the Slice tool to the size or proportions you specify. You might want to use Fixed Size to create equal-sized slices in an image, especially an image composed of similar-sized elements, and Fixed Aspect Ratio to create slices that have similar proportions.
If you’ve already created a slice that’s the right size to apply to another portion of your image, you can duplicate the slice by dragging the slice while holding down the Alt key (Option key on the Mac). Drag the new slice to the location where you want to apply it.
- Create a square slice. Hold down the Shift key as you drag a slice’s boundaries to create a slice in a perfect square when the Slice or Slice Selection tool is active.
- Create guides. If your slices will make up a grid of horizontal and vertical lines, you can create guides that mark their boundaries. Click the Slices from Guides button in the Options bar to automatically slice the image by using these guides.
- Put each slice in its own layer. You can put each portion of the image you want to define as a slice in its own layer. Then just select the layer and choose Layer➪New Layer Based Slice. This is how you create a rollover state (an action taken on a Web page when the mouse passes over, clicks on, or leaves a defined area).
Auto slices are slices Photoshop creates to account for the area that you haven’t defined as a user slice or layer slice. They’re shown on-screen as dotted lines to differentiate them from the solid lines that define user slices and layer slices. Auto slices also have gray slice numbers and icons, as opposed to the blue numbers and icons used to represent their nonautomatic siblings. If you want to change an auto slice to a user slice (say, it encompasses an area you were going to slice anyway), select the slice and choose Promote to User Slice from the Options bar.
Why Slice?
Although speedy broadband connections are becoming more common, a huge number of Internet cruisers are still using dialup connections with top speeds of 56 Kbps or slower. For these users, nothing is more painful than clicking a link and watching a blank page laboriously download a few pixels at a time. When confronted with a page like this, users are likely to click their Back buttons and move on. Your solutions, as Webmaster, fall into several categories:
- Use images with very small dimensions. Buttons and graphic rules download quickly. However, they are usually ornamental or functional rather than centerpieces of your page design.
- Select the best format for your image. Choosing the JPEG or GIF format when appropriate can make a significant difference in how quickly your image downloads.
- Optimize the heck out of the image. One image in a particular format can be five or ten times as large as the same image in the same format, depending on how you’ve optimized it.
- Slice your image into pieces. Individually optimize each piece for its intended purpose: appearance, download speed, or a combination of the two. With a little care, you can take a complicated image and divide it into slices that look as good or better than the original. Slices also enable you to easily apply Web features such as rollovers.
Another point to keep in mind is that visitors will be using different screen resolutions. If you’re happily cruising the Internet at 1024 x 768 resolution, that doesn’t mean you should include really large images on your pages (even if sliced and optimized). Other users with the same screen resolution you use may have set their browser windows to a smaller size or may be using displays with a maximum of 800 x 600 pixels or smaller. The ability to slice images doesn’t mean you can fill your screen with gigantic graphics.
Slices also let you treat different parts of an image in different ways, associating some with Web links to other images or pages, just as you can do with image maps. Design your Web pages to fit your audience. If your site is geared toward the masses, make the pages a maximum of 800 x 600 pixels. If it is aimed at a specialized high-end audience, then you can go as large as 1024 x 768 pixels.
Slicing Up Images
You can create slices from many different kinds of images. For example, you might be interested in slicing the menu of choices on the left side of the figure so that you can include links to the individual pages referenced. The lower image of the four foreign lands offers even more motivation for slicing. It’s fairly huge and would load much more quickly if you sliced it up into four sections. Each slice is also a candidate for a link that would take visitors to a page devoted to that particular country.
Types of slices
Photoshop enables you to create several different types of slices:
- User slices: You create these slices by defining areas of the image.
- Layer slices: Photoshop creates these slices from layers of an image.
- Auto slices: Photoshop creates these slices automatically to account for the rest of the image when you’ve sliced a bit out of it.
Creating slices
To slice up an image into user slices, just follow these steps:
1. Select the Slice tool from the Tools palette.
Or press K to activate it. When you select the Slice tool, an indicator graphic appears in the upper-left corner of the image, marking the whole image as Slice 01, even before you’ve selected a new slice.
2. Drag with the Slice tool to select the part of the image you want to slice.
For example, select the entire Japan area in the lower edge. A solid slice selection box appears around the new slice, with handles at each corner and at the sides, top, and bottom. Photoshop assigns the slice a number and icon in its upper-left corner.
3. Repeat Step 2 to slice the image into as many individual portions as you want.
For example, continue to select the other countries to slice the image into individual portions. Photoshop assigns each of your user slices its own slice number and icon.
Slicing options
The steps in the preceding section show the slicing operation in its simplest form. You do have some additional options, however, as described in the following list:
- Use a fixed size or fixed aspect ratio (proportion). Choose Fixed Size from the Style pop-up menu in the Options bar and type a width and height in pixels in the Width and Height boxes. Or choose Fixed Aspect Ratio and type the relative proportions you want to use (that is, 1:2, 3:4, and so forth) in the Width and Height boxes. Photoshop constrains the Slice tool to the size or proportions you specify. You might want to use Fixed Size to create equal-sized slices in an image, especially an image composed of similar-sized elements, and Fixed Aspect Ratio to create slices that have similar proportions.
If you’ve already created a slice that’s the right size to apply to another portion of your image, you can duplicate the slice by dragging the slice while holding down the Alt key (Option key on the Mac). Drag the new slice to the location where you want to apply it.
- Create a square slice. Hold down the Shift key as you drag a slice’s boundaries to create a slice in a perfect square when the Slice or Slice Selection tool is active.
- Create guides. If your slices will make up a grid of horizontal and vertical lines, you can create guides that mark their boundaries. Click the Slices from Guides button in the Options bar to automatically slice the image by using these guides.
- Put each slice in its own layer. You can put each portion of the image you want to define as a slice in its own layer. Then just select the layer and choose Layer➪New Layer Based Slice. This is how you create a rollover state (an action taken on a Web page when the mouse passes over, clicks on, or leaves a defined area).
Auto slices are slices Photoshop creates to account for the area that you haven’t defined as a user slice or layer slice. They’re shown on-screen as dotted lines to differentiate them from the solid lines that define user slices and layer slices. Auto slices also have gray slice numbers and icons, as opposed to the blue numbers and icons used to represent their nonautomatic siblings. If you want to change an auto slice to a user slice (say, it encompasses an area you were going to slice anyway), select the slice and choose Promote to User Slice from the Options bar.
Slicing Your Image in Photoshop
![Slicing Your Image in Photoshop]()
Reviewed by Pepen2710
on
4:27:00 AM
Rating:
No comments:
Post a Comment