Image Slicing in Photoshop: A Comprehensive Guide - Prof. Peter L. Hoelter, Study notes of Web Design and Development

Download Image Slicing in Photoshop: A Comprehensive Guide - Prof. Peter L. Hoelter and more Study notes Web Design and Development in PDF only on Docsity! VC 237 :: Week 06 1 of 2 05 November 2008 — Demonstration Outline — week::six Image Slicing in Photoshop Prepping your file o Make sure your Photoshop file is pixel-perfect. o Name your layers so that they mean something to you. o If you are creating a rollover effect, make sure that you have individual layers for both the off and on states, and that the layers are meaningfully named. Planning your slices o Analyze your design and identify how best to slice your artwork. o All sliced must be rectangles, and slices cannot overlap o Determine which design elements should be created using artwork and which should be created using HTML by using the No Image slice type: Areas of text can be sliced and set to No Image in the Slice palette. This allows for the insertion of HTML text later in an HTML editor and prevents the creation of extra, unused images. Areas of solid color can be also be set to No Image. Solid colors can be recreated in HTML using layout boxes and background colors. Using No Image will help keep the number of exported slices to a minimum. o Any active areas (ones that will become links or rollovers) are good areas to slice into individual, smaller images instead of being part of a larger one. o Try to isolate imagery that frequently changes for easier editing. o Where is makes sense, try to align the edges of your slices before saving the optimized versions. This will eliminate alignment headaches when you export your images and work with them in an HTML editor. Primary Slicing Tools The Slice Tool ( ; K) and the Slice Selection Tool ( ; Shift-K ) o Use this tool to slice your interface design into individual images. o Double-click on a slice to bring up the Slice Options dialog box. This allows you to specify the exact size of our image, give it a unique name. This is also where you specify the image Type as either Image (an image is exported) or No Image (no image is exported). o Slices are saved with your document, as are any settings you apply to them. o To show/hide your slices, use View > Show > Slices. File > Save for Web and Devices (Command-Option-Shift-S) o Allows you to set individual optimization settings for each slice. o Provides the Optimize window tab, which lets you preview how your image will look after it is exported. VC 237 :: Week 06 2 of 2 05 November 2008 — Demonstration Outline — The Slicing Process The Steps: 1. In Photoshop, select the Slice tool ( ;K) from the tool palette and begin drawing slice boxes on your design. Take care to be as accurate as possible when creating slices. Use the Snap option (View > Snap; Command-Shift-;) so that slices snap to the edges of existing slices when being moved or resized. (Also make sure View > Snap To > Slices is checked.) Underneath the Slice icon is the Slice Select Tool ( ; Shift-K). Use this tool to select existing slices. 2. Select File > Save for Web and Devices… and click on the Optimize tab in the main image window. This will allow you to view exactly how the image will look when optimized. Original shows you a full quality image, regardless of the type of compression chosen. You can also use 2-Up and 4-Up to make quality comparisons between optimization settings. 3. Set the appropriate options in the Optimize palettes. Before making these adjustments, you must first select a slice using the Slice Select Tool. Note that by holding down the shift key and selecting multiple slices, you can make optimization adjustments to multiple images at the same time. Optimize Settings (just below the Done button) Using the Optimize palette, select whether to save the slice as a GIF or JPEG, and adjust the quality setting to find a balance between image quality and file size. Be sure to enable transparency, if necessary, and to turn dithering off. Slice Options (double-click a slice to access) In the Slice palette, select the Name field and give the slice a meaningful name (if one has not already been given; use no spaces or special characters). Otherwise, default names will be assigned by Photoshop, and they are not user-friendly. This will be the name of the file when you save the optimized images. You do not need to include the file extension when naming slices. For slices automatically created by Photoshop, or for slices you’ve created and do not want to export, double-click on those slices using the Slice Select Tool and change the Slice Type pull-down menu in the Slice palette from Image to No Image. Photoshop will not create an image for these slices. Repeat this step for every slice in your layout. 4. Save your image slices Click the Save button. In the Save dialog box, select either HTML and Images or Images Only from the Format menu, and All Slices from the bottom pull-down menu. If you choose Images Only, Photoshop will only export the images. This is the preferred method. If you choose HTML and Images, Photoshop will create the Web page for you as well as optimize the images (but does so poorly). Create a new folder or navigate to the images folder in your site root directory and click Save.