YOMEDIA
ADSENSE
Photoshop cs5 by steve Johnson part 74
63
lượt xem 15
download
lượt xem 15
download
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
Cắt hình ảnh của Easy Way Photoshop cho phép bạn cắt một tài liệu thành nhiều phần nhỏ hơn. Bạn có thể muốn cắt một hình ảnh để tạo ra các liên kết tương tác, tuy nhiên, lý do tốt nhất là tốc độ. Bạn có được tốc độ bằng cách nén lát cá nhân để giảm kích thước hình ảnh. Có hai loại lát: người dùng định nghĩa và layer-based.
AMBIENT/
Chủ đề:
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: Photoshop cs5 by steve Johnson part 74
- Slicing Images the Photoshop allows you to slice a document into smaller pieces. You might want to slice an image to create interactive links; however, the Easy Way best reason is speed. You gain speed by compressing individual slices to reduce the image size. There are two types of slices: user-defined and layer-based. You can draw directly on an image to create a user slice using the Slice tool, or create a layer and then change it into a layer-based slice. When you create a slice, Photoshop also creates auto slices, which fill the space in the image that is not defined by a user-defined slice. User-defined and layer-based slices are identified by a solid line with blue symbols, while auto slices are identified by a dotted line with gray symbols. The slices also are numbered from left to right and top to bottom. A layer-based slice uses all the data in the layer to make up the slice. If you want to make changes to the slice, you need to edit the layer, which makes it a little more difficult to use than a user slice. When you edit or move the layer contents, the slice is automatically changed too. Create a User Slice 1 Open a document. 2 Select the Slice tool on the 2 toolbox. IMPORTANT To make slicing a little easier, drag a few guides from the Ruler bar to help guide your slicing tool. 3 Click the Style Setting list arrow on the Options bar, and then select the style you want: ◆ Normal. Specifies the slice size as you drag. 4 User slice ◆ Fixed Aspect Ratio. Specifies a ratio for the slice height and width. ◆ Fixed Size. Specifies the slice height and width in pixels. 4 Drag and release the slice tool in the document to create a rectangular or square slice. ◆ To constrain the slice to a square, hold down Shift as you drag. To create a circle, hold down Alt (Win) or Option (Mac). 5 5 Continue to drag and release until you have the image correctly sliced. 462 Chapter 19
- Create a Layer-based Slice 1 Open a document. 2 Select the layer you want in the Layers panel. 2 3 Click the Layer menu, and then click New Layer Based Slice. Did You Know? Layer-based slice You can convert an auto or layer- based slice to a user slice. Select the slice using the Slice Select tool, and then click Promote on the Options bar. You can create slices from guides. Add guides to the image, select the Slice tool on the toolbox, and then click Slices From Guides on the Options bar. To create a new guide, click the View menu, click New Guide, click the Horizontal or Vertical option, specify the position in inches, and then click OK. You can lock guides. To keep a guide from being moved, click the View menu, and then click Lock Guides. You can remove guides. To remove guides, click the View menu, and then click Clear Guides. You can show and hide guides. Click the View menu, point to Show, and For Your Information then click Guides. The command toggles the guides’ visibility on and off. What’s a Subslice? The subslice is a type of auto slice that is automatically created when you create overlapping slices. They are created as a stack, one on top of the other, which you can rearrange. The subslice shows you how the image is divided when you save the optimized file. Subslices appear with a number and a slice symbol. When you make changes to a slice related to a subslice, the subslice automatically gets recreated. Chapter 19 Designing for the Web and Devices 463
- Working with Slices After you create slices within an image, you can use the Options bar or the Save For Web & Devices dialog box to work with slices. You can select options to show or hide slices, select one or more slices, delete or duplicate slices, and view or change slice settings. If you have an image with more than one slice, you need to optimize the slices in the Save For Web & Devices dialog box. You can use the Optimize menu to link multiple slices together. For linked slices in the GIF and PNG-8 format, Photoshop uses the same color panel and a dithering pattern to hide the seams between slices. Work with Slices in the Photoshop Window 1 Open a document with slices. Slice tools 2 Use any of the following: ◆ Show or Hide Slices. Click the View menu, point to Show, and then click Slices. ◆ Show or Hide Auto Slices. Select the Slice Select tool, and then click Show Auto Slices or Hide Auto Slices in the Options bar. ◆ Select Slices. Click the Slice Auto slice Select tool, and then click the slice you want. Use Shift+click or drag to select multiple slices. ◆ Delete Slices. Select the slices, User slice and then press Delete. ◆ Duplicate Slices. Select the slices, and then Alt (Win) or Option (Mac) and drag the selection. ◆ View Slice Options. Click the Slice Select tool, and then double-click the slice you want. See Also See “Working with Guides, Grid & Slices” on page 64 for information on Slice Options setting preferences to show or hide slice numbers and change the slice border color. 464 Chapter 19
- Work with Slices in the Save Toggle Slices For Web & Devices Dialog Box Visibility button 1 Open a document with slices. 2 Click the File menu, and then click Save For Web & Devices. 3 Select the file type you want, select any options, and then make any adjustments you want. ◆ Show or Hide Slices. Click the Toggle Slices Visibility button. ◆ Select Slices. Click the Slice Select tool, and then click the slice you want. Use Shift+click or drag to select multiple slices. ◆ View Slice Options. Click the Slice Select tool, and then double-click the slice you want. ◆ Link Slices. Select the slices 4 you want to link, click the Optimize menu double-arrow (Win) or arrow (Mac) button, Slice Select button Linked slices Optimize menu and then click Link Slices. A link icon appears on the slices. ◆ Unlink Slices. Select the slice, click the Optimize menu double-arrow (Win) or arrow (Mac) button, and then click Unlink Slice or Unlink All Slices. 4 When you’re done, click Save to save the image or click Done to save your settings. TIMESAVER Hold down Ctrl (Win) or Command (Mac) to switch between the Slice tool and the Slice Select tool. Chapter 19 Designing for the Web and Devices 465
- Arranging Slices Moving and resizing objects in Photoshop is a common task. You can move or resize slices in the same basic way you do other objects. In addition to moving slices, you can also align them along an edge or to the middle, and evenly distribute them horizontally or vertically. When you align and distribute slices, you can reduce the amount of unneces- sary auto slices, thereby creating smaller files and faster load times. When you have slices overlapping each other, you can change the stacking order to move them up or down in the order. For example, if you have one slice behind another, you can bring the slice forward one level at a time or to the top (front). Move or Resize Slices 2 4 1 Open a document with slices. 2 Select the slices you want to move or resize. 3 To move a slice selection, drag the slice to a new location. You can press Shift to constrain movement up, down, or diagonally. 4 To resize a slice, drag the side or corner handle of the slice. When you select adjacent slices with common edges, the slices resize together. ◆ You can also click Options in the Options bar to set exact slice position or size. Options button Did You Know? You can copy and paste a slice. You can copy and paste a slice like any other object using the Copy and Paste commands. If you copy a slice from Dreamweaver, it retains information from the original file in Photoshop. You can snap slices to a guide, user slice, or other object. Click the View menu, point to Snap To, and then select the elements you want. Click the View menu, and then click Snap to display a check mark. When you move a slice toward an element, the slice snaps to the elements within 4 pixels. 466 Chapter 19
- Align, Distribute, or Stack Slices 1 Open a document with slices. 2 Select the slices you want to arrange. 3 To align slices, select the alignment button on the Options bar you want: Top, Vertical 2 Centers, Bottom, Left, Horizontal Centers, or Right. 4 To evenly distribute slices, select the distribute button on the Options bar you want: Top, Vertical Centers, Bottom, Left, Horizontal Centers, or Right. 5 To change the slice stacking order, select the stack button on the Options bar you want: Bring To Front, Bring Forward, Send 5 3 4 Backward, or Send To Back. Did You Know? You can combine user and auto slices. Right-click the selected slices, and then click Combine Slices. You can divide user and auto slices. Select the slice using the Slice Select tool, and then click Divide on the Options bar. In the Divide Slice dialog box, select options to divide the slice horizontally or vertically, up or down in equal parts, or enter an exact size in pixels, and then click OK. Chapter 19 Designing for the Web and Devices 467
- Saving a Sliced After you create slices within an image, you can export and optimize each slice using the Save For Web & Devices command, which saves Image for the Web each slice as a separate file and creates the code to display them on a web page. After you click Save in the Save For Web & Devices dialog box, the Save Optimized As dialog box appears. You can use this dialog box to access the Output Settings dialog box and set output options to control the format of HTML files, the names of files and slices, and the way Photoshop saves background images. Save a Slice for the Web 1 1 Open a document with the slice you want to save. 2 Click the File menu, and then click Save For Web & Devices. 3 Select the file type you want, select any options, and then make any adjustments you want. 4 Click Save. 5 Click the Save as Type (Win) or Format (Mac) list arrow, and then select whether to save the images in HTML and Images, Images Only, or HTML Only. 6 Click the Settings list arrow, and then select the output settings you want. Default Settings is recommended for normal use. 5 See the next page for details about selecting output settings. 7 Click the Slices list arrow, and then click All Slices, All User Slices, or Selected Slices. 8 Click Save. 6 7 8 468 Chapter 19
- Set Output Options for Slices 1 6 Open a document with the slice you want to save. 2 Click the File menu, and then click 8 Save For Web & Devices. 3 Click Save. 4 Click the Save as Type (Win) or Format list arrow, and then select the format you want. 5 Click the Settings list arrow, and 7 then click Other. 6 Click the Output Type list arrow, and then click Slices. 7 Select the following options: ◆ Generate Table. Uses an HTML table to display slices. ◆ Empty Cells. Specifies the way to convert empty slices to table cells. For Your Information ◆ TD W&H. Specifies whether to include width and height for Saving Output Settings for Future Use table data. If you frequently use the same settings to save a file, you can save ◆ Spacer Cells. Specifies when your output settings as a preset for future use. In the Output Settings to add empty spacer cells. dialog box, specify the settings you want to save for HTML, Slices, ◆ Generate CSS. Creates a Background, or Saving Files, click Save, type a name, use the default Cascading Style Sheet (CSS) to folder location (the Optimized Output Settings folder), and then click display the slices. Save. The Output Setting file is saved with the ".iros" file extension. By saving the Output Settings files in the Optimized Output Settings ◆ Referenced. Specifies how to folder, you can quickly select the custom output setting file from the reference slice positions using Save Optimized As dialog box. If you didn't store the Output Settings CSS. file in the default folder, you can also use the Load button in the ◆ Default Slice Naming. From the Output Settings dialog box to find it. list menus, select the options to specify a slice naming scheme. 8 Click OK. 9 Click the Slices list arrow, and then select the slices option you want. 10 Click Save. Chapter 19 Designing for the Web and Devices 469
ADSENSE
CÓ THỂ BẠN MUỐN DOWNLOAD
Thêm tài liệu vào bộ sưu tập có sẵn:
Báo xấu
LAVA
AANETWORK
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline: 093 303 0098
Email: support@tailieu.vn