Slicing an image in Photoshop
The basic way to define slices in Photoshop is to use the Slice tool to drag over an area of the image that you want to make a slice. You can also create slices in ImageReady, but for simplicity, we'll just use Photoshop in this exercise.
About designing Web pages with Photoshop and ImageReady
When designing Web pages using Adobe Photoshop and Adobe ImageReady, keep in mind the tools and features that are available in each application:Photoshop provides tools for creating and manipulating static images for use on the Web. You can divide an image into slices, add links an205 text, optimize the slices, and save the image as a Web page.ImageReady provides manybut not allof the same image-editing tools as Photoshop. In addition, it includes tools and palettes for advanced Web processing and creating dynamic Web images such as animations and rollovers. |
Preparing to create slices
Before you start working in your file, you'll customize the work space so that everything is ready to go.
| 1. | In Bridge, click the "Go up" button ( ) to go up one level to the Lesson13 folder, and then double-click the 13Start.psd thumbnail to open it in Photoshop.If a notice appears asking whether you want to update the text layers for vector-based output, click Update.The start file includes blue guides. You'll use the guides and the Snap To commands when you draw marquees so that they are tightly aligned. | | 2. | Make sure that the following commands are selected (checked), or select them now if they are not:View > Show > Guides.View > Show > Slices.View > Snap.View > Snap To > Guides.View > Snap To > Slices.
The blue guides have been created to help you draw slices accurately. As you create slices close to the guides, the edges of the slices will snap to the guides so that your slices are uniform and precise. |
Using the Slice tool to create slices
You might wonder why the heading for this topic uses the word "slices" instead of "a slice." The answer is that unless you create a slice that includes the whole imagewhich would be a fairly useless thing to do, especially since that slice is created automaticallyyou can't create just one slice. Any new slice within an image (a user slice) also causes the creation of other slices (auto slices) that cover all the area of the image outside the user slice you create.Notice the small gray rectangle in the upper left corner of the image. The rectangle contains the number 01 and a small icon, or badge, that resembles a tiny mountain. The number indicates slice 01, which includes the entire image. The gray color tells you that it is an auto slice. The symbol indicates that the slice contains image content.
| 1. | In the toolbox, select the Slice tool ( ). | | 2. | Drag the Slice tool diagonally across the why organic? text area, starting and ending close to the guides surrounding the text. A blue rectangle, similar to the one for slice 01, appears in the upper left corner of the slice you just created, slice 02. The blue color tells you that this is a user slice, not an auto slice.The original gray rectangle for auto slice 01 remains unchanged, but the area included in slice 01 is smaller, covering only the left side of the page.Slice 03another auto slice, as indicated by its gray colorcovers the remaining area of the menu bar to the right of slice 02. A third auto slice, slice 04, covers the area below the menu bar and to the right of slice 01. |
Creating more user slices
Now you'll slice the rest of the text in the menu bar into four more buttons.
| 1. | With the Slice tool still selected in the toolbox, drag across the products text to create another user slice.The new slice becomes slice 03. The number of each slice after slice 03 automatically increases by one. | | 2. | One at a time, draw slice marquees around each of the other text items in the same rowaround the words shop online, contact, and helpto create three slices for those menu buttons.Your image should have a total of eight slices: five user slices and three auto slices. If your numbers are different, don't worry, because you'll fix that now. | | 3. | In the toolbox, select the Zoom tool ( ) and click the area of your button slices to enlarge the view to 300% or 400%. | | 4. | Carefully examine the user slices you created to see if there are any gaps between them. (If there are, these gaps will be auto slices.) If there are no gaps between your user slices, you can skip to Step 7.Gaps between slices No gaps between slices | | 5. | In the toolbox, select the Slice Select tool ( ), hidden behind the Slice tool, and select one of the user slices that did not snap to the guidesthat is, a slice with a gap between it and the adjacent user slice. | | 6. | Drag a selection handle for the selected slice until the slice boundaries snap into position against the guides and the other slices.NoteYou can also use the Slice Select tool to drag the slice from one position to another. | | 7. | Double-click the Zoom tool to return to 100%, and choose File > Save. |
 | If you find the indicators for the auto slices distracting, select the Slice Select tool and then click the Hide Auto Slices button on the tool options bar. You can also hide the guides by choosing View > Show > Guides, because you won't need them again. |
Setting slice options
Slices aren't particularly useful until you set options for them. Slice options include the slice name and the URL that opens when the user clicks the slice.NoteYou can set options for an auto slice, but doing so automatically promotes the auto slice to a user slice.
| 1. | Select the Slice Select tool (), and use it to select slice 02, the why organic? text. | | 2. | On the tool options bar, click the Slice Options button ( ), or double-click the slice itself, to open the Slice Options dialog box.By default, Photoshop names each slice based on the filename and the slice number, so the current filename appears as "13Start_02," representing slice 2 in the 13Start.psd file. | | 3. | In the Slice Options dialog box, enter the following information: In Name, type Why_button; in URL, type pages/whyl; and in Target, type _blank. (Make sure to include the underscore before the letter "b.") Then click OK. NoteThe Target option controls how a linked file opens when the link is clicked.The _blank option opens the linked page in a new instance of the Web browser. If you wanted the link to open in the original Web browser window, you would type a different code. For more information, see Adobe Photoshop Help or a215 reference book. | | 4. | Using the Slice Select tool, select slice 03, the products text, and then click the Slice Options button () on the tool options bar. | | 5. | In the Slice Options dialog box, enter the following information: In Name, type Products_button; in URL, type pages/product220; and in Target, type _blank. Then click OK. | | 6. | Select slice 04 with the Slice Select tool, open the Slice Options dialog box, and enter the following: In Name type Shop_button; in URL, type pages/sho217; and in Target, type _blank. Then click OK. | | 7. | Select slice 05 with the Slice Select tool, open the Slice Options dialog box, and enter the following: In Name type Contact_button; in URL, type pages/contac221; and in Target, type _blank. Then click OK. | | 8. | Select slice 06 with the Slice Select tool, open the Slice Options dialog box, and enter the following: In Name type Help_button; in URL, type pages/hel217; and in Target, type _blank. Then click OK. | | 9. | Choose File > Save.Leave the file open for the next procedure.You may have noticed that there are more options in the dialog box than the three you specified for these slices. For more information on how to use these options, see Photoshop Help. |
More about creating slices
You've finished the slices work for this lesson. You've created basic slices and set slice options in Photoshop. There are other methods of creating slices that you can try on your own. For example:You can create slices based on layers. A layer-based slice includes all the pixel data in the selected layer. When you edit the layer, move it, or apply a layer effect to it, the layer-based slice adjusts to encompass the new pixels. To unlink a layer-based slice from its layer, you can convert it to a user slice.You can create No Image slices, and then add text o219 source code to them. No Image slices can have a background color and are saved as part of th206 file. The primary advantage of using No Image slices for text is that the text can be edited in any HTML editor, saving you the trouble of having to go back to Photoshop to edit it. However, if the text grows too large for the slice, it will break th206 table and introduce unwanted gaps.If you use custom guides in your design work, you can instantly divide up an entire image into slices with the Slices From Guides button on the Photoshop Slice tool options bar. This technique should be used with caution, however, because it discards any previously created slices and any options associated with those slices. Also, it creates only user slices, and you may not need that many of them.When you want to create identically sized, evenly spaced, and aligned slices, try creating a single user slice that precisely encloses the entire area. Then, use the Divide button on the Slice Select tool options bar to divide the original slice into as many vertical or horizontal rows of slices as you need.If you have selected an area with the ImageReady selection marquee tools that you want to designate as a slice, you can use the Create Slice from Selection command. Be aware that even if the selection is an irregular shape, the slice will always be a rectangle.
|
لطفا منتظر باشید ...
