Adobe Photoshop CS6 Classroom in a Book

1. Slices define web page structure and link functionality.

When you define slices in an image, Photoshop creates an HTML table or Cascading Style Sheet (CSS) layers to contain and align the slices.

Divide and conquer. Slices are rectangular regions carved out of a Photoshop image, each acting as a distinct element within a web page's structure. These slices are essential for creating complex layouts from a single image file, allowing different areas to link to different URLs, or to have unique behaviors. Photoshop uses HTML tables or CSS layers to arrange and align these slices seamlessly, ensuring the web page renders correctly in a browser.

User vs. Auto Slices:

• User Slices: Manually created, giving precise control over specific areas.
• Auto Slices: Automatically generated to fill the remaining space, ensuring the entire image is covered.

Interactive elements. Slices transform static images into interactive web pages by enabling the assignment of URLs, alt text, and other HTML attributes to specific regions. This allows for the creation of navigation menus, image maps, and other interactive elements directly within Photoshop, streamlining the web design process.

2. Optimize images for web delivery to balance quality and speed.

The JPEG format is designed to preserve the broad color range and subtle brightness variations of continuous-tone images such as photographs.

Balancing act. Optimizing images for the web is a critical step in web design, involving a careful trade-off between image quality and file size. Smaller file sizes translate to faster loading times, improving user experience and reducing bandwidth consumption. Photoshop provides tools to adjust compression settings, color palettes, and other parameters to achieve the optimal balance.

Format choices:

• JPEG: Ideal for photographs and complex images with continuous tones, offering adjustable compression levels.
• GIF: Best suited for graphics with limited color palettes, such as logos, icons, and simple animations, supporting transparency.

Photoshop's tools. Photoshop's "Save for Web" feature allows side-by-side comparisons of different optimization settings, enabling designers to visually assess the impact of compression on image quality. This iterative process ensures that images are optimized for the web without sacrificing essential visual details.

3. Zoomify creates interactive, high-resolution web images.

With the Zoomify feature, you can publish high-resolution images on the web that viewers can pan and zoom to see more detail.

Deep dive. Zoomify is a Photoshop feature that allows you to export high-resolution images for the web in a way that enables interactive panning and zooming. This is particularly useful for showcasing detailed artwork, maps, or photographs where users need to explore specific areas closely. Zoomify automatically generates the necessary HTML, JavaScript, and image tiles to create a seamless zooming experience.

Technical breakdown:

• Tiling: The original image is broken into smaller tiles, which are loaded dynamically as the user zooms in.
• Base image: A low-resolution version of the image is initially loaded, providing a quick preview.
• Interactive controls: Users can pan, zoom, and navigate the image using intuitive controls.

User experience. Zoomify enhances user engagement by allowing them to explore images at their own pace and focus on areas of interest. This feature is especially valuable for educational, artistic, and commercial applications where detailed visualization is essential.

4. Web galleries showcase images with customizable layouts.

Using Bridge, you can easily showcase your images in an online gallery, so that visitors can view individual images or a slide show of your work.

Visual storytelling. Web galleries provide a structured and visually appealing way to present collections of images online. Adobe Bridge offers built-in tools to create customizable web galleries, complete with thumbnails, captions, and slideshow functionality. These galleries are ideal for photographers, artists, and designers who want to showcase their work in a professional and engaging manner.

Customization options:

• Layout templates: Choose from various pre-designed templates to suit your aesthetic preferences.
• Metadata integration: Display image captions, descriptions, and other metadata.
• Slideshow functionality: Enable automatic or manual slideshow playback.

Streamlined workflow. Bridge simplifies the process of creating web galleries by automating the generation of HTML, CSS, and JavaScript code. This allows users to focus on curating their images and customizing the gallery's appearance without needing to write code manually.

5. Slices are created using the Slice tool or from existing layers.

You can create image slices with the Slice tool or by converting layers into slices using the Layer menu.

Two paths to slicing. Slices, the building blocks of web layouts in Photoshop, can be created in two primary ways: using the Slice tool for manual precision or by converting existing layers into slices for a more automated approach. Each method offers distinct advantages depending on the design requirements and workflow preferences.

Manual slicing:

• Slice Tool: Allows for freehand drawing of rectangular slices, providing maximum control over slice dimensions and placement.
• Slice Select Tool: Used to select, modify, and align existing slices.

Automated slicing:

• Layer-Based Slices: Automatically generates slices based on the boundaries of layers, streamlining the process for designs already organized in layers.

Flexibility. Whether you prefer the precision of manual slicing or the efficiency of layer-based slicing, Photoshop offers the tools to create a well-structured web layout from a single image file.

6. Image optimization balances file size and visual quality.

Simply put, it’s balancing file size against good looks.

The optimization equation. Image optimization is the art of finding the sweet spot between file size and visual appeal. Smaller file sizes ensure faster loading times and a smoother user experience, while maintaining acceptable image quality is crucial for visual impact. Photoshop provides a range of tools and techniques to achieve this delicate balance.

Key optimization techniques:

• File format selection: Choosing the appropriate format (JPEG, GIF, PNG) based on image content.
• Compression settings: Adjusting compression levels to reduce file size while minimizing visual artifacts.
• Color palette reduction: Limiting the number of colors in an image to reduce file size (particularly effective for GIF images).

Iterative process. Optimizing images is often an iterative process, involving experimentation with different settings and visual assessment of the results. Photoshop's "Save for Web" dialog box allows side-by-side comparisons of different optimization settings, enabling designers to make informed decisions.

7. Zoomify enables interactive exploration of high-resolution images.

The basic-size image downloads in the same time as an equivalent-size JPEG file.

Zoom and pan. Zoomify is a powerful feature in Photoshop that allows you to export high-resolution images for the web in a way that enables interactive panning and zooming. This is particularly useful for showcasing detailed artwork, maps, or photographs where users need to explore specific areas closely. Zoomify automatically generates the necessary HTML, JavaScript, and image tiles to create a seamless zooming experience.

Technical aspects:

• Image tiling: The original image is divided into smaller tiles, which are loaded dynamically as the user zooms in.
• Base image: A low-resolution version of the image is initially loaded, providing a quick preview.
• Interactive controls: Users can pan, zoom, and navigate the image using intuitive controls.

Enhanced engagement. Zoomify enhances user engagement by allowing them to explore images at their own pace and focus on areas of interest. This feature is especially valuable for educational, artistic, and commercial applications where detailed visualization is essential.

8. Web galleries offer customizable image presentation.

Adobe Bridge offers built-in tools to create customizable web galleries, complete with thumbnails, captions, and slideshow functionality.

Showcase your work. Web galleries provide a structured and visually appealing way to present collections of images online. Adobe Bridge offers built-in tools to create customizable web galleries, complete with thumbnails, captions, and slideshow functionality. These galleries are ideal for photographers, artists, and designers who want to showcase their work in a professional and engaging manner.

Key features:

• Layout templates: Choose from various pre-designed templates to suit your aesthetic preferences.
• Metadata integration: Display image captions, descriptions, and other metadata.
• Slideshow functionality: Enable automatic or manual slideshow playback.

Simplified creation. Bridge simplifies the process of creating web galleries by automating the generation of HTML, CSS, and JavaScript code. This allows users to focus on curating their images and customizing the gallery's appearance without needing to write code manually.

Last updated: March 20, 2025