Week 06

Week 06 – Topics

Layout
Positioning
Web graphics
File formats
Image Compression

Assigned Readings
Chapter 12: Formatting Text
Chapter 18: Web Graphics Basics
Chapter 19: Lean and Mean Web Graphics

VIDEO: Image Slicing


ASSIGNMENT 6

Below are your assignments due next week by noon, Wednesday, December 5

READ

1. All class notes from Week 6
2. Assigned Reading from Textbook:

  • Chapter 12: Formatting Text
  • Chapter 18: Web Graphics Basics
  • Chapter 19: Lean and Mean Web Graphics
DISCUSS

No discussion this week… you have plenty of work to do on your final project!

WATCH

VIDEO: Image Slicing – Part 1
VIDEO: Image Slicing – Part 2
Only watch Parts 1 and 2. You don’t need to complete this project, use the information in this demo to slice and save out the images for the Art by Justine web page as outlined in the Exercises below.

EXERCISES (3 parts)

Part 1 – Practice optimizing image for the web by compressing the images for the “Art by Justine” web page as demonstrated in class. Please refer to the class notes for this exercise and to the 2 videos in the WATCH section. Please make sure you’re using correct file organization and turn in the entire  folder which contains the file organization and all the images files for the web page.

Please optimize the following 8 images: Logo “Art by Justine,” Facebook icon, Twitter icon, LinkedIn icon, Photo of Justine, Graffiti Paris image, 2 Art images in right column. Be sure to use the correct web graphic format based on the class notes and our discussion in class.

Download the Photoshop file for the “Art by Justine” web page.

Upload your files as a zip file to the “Dropbox” on smconline.org site by noon, Wednesday, December 5.
. . . . . . . . . . . . . . . .

Part 2 – Continue working on your final project. Based on feedback regarding your home page design comp, make any revisions to your design and continue your work on the design comps for the rest of the 5 pages. I want to see the design comps for the rest of your pages by Tuesday, October 9. Please email the design comps to me as jpg images by Tuesday, December 4 so I can give you any final feedback and you can start building your final project in HTML and CSS.

Part 3 – If you haven’t done so already, write a narrative critiquing the effectiveness of the website you’re re-designing for your final project. Base your critique on the objectives from “The Basics of Web Design” reading and the critiques we did Week 03.

  1. The Grid
  2. Color Palette
  3. Navigation
  4. Design Principles
  5. Typography

Describe what works and does not work with the design of the current website. Who is the target audience? What did you learn from your competitive analysis and how did this impact your re-design? Post this critique to your Tumblr blog. This is part of your assignment for your final project.

When you upload your zip file to the Dropbox, please put both parts of the assignment in one folder and be sure to include your name in your file names. For example: yourlastname_assignment6.zip

QUIZ 4

Click here to take Quiz 4
Complete Quiz 4 by noon, Wednesday, December 5.


Web graphics
Web image types
RGB images

RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

  • 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
  • 24bit = 16,777,216 colors
  • 16bit = 65,536 colors
Indexed images

Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

index palette

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

  • 8bit = 256 colors
  • 6bit = 64 colors
  • 4bit = 16 colors
  • 2bit = 4 colors
  • 1bit = 2 colors

Dithering

Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

no dither dithered
Non-dithered image (2382 bytes) Dithered image (3598 bytes)

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types
GIF format

A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

  • Best for – Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
  • Transparency – Defines one color to be transparent
  • Animations – Format supports multi-frame animations
  • Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.
JPEG format

A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

  • Best for – Photographic images, complex images, images with soft edges
  • No transparency or animation
  • Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.
PNG format

A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

About the PNG‑8 format

The PNG‑8 format uses 8‑bit color. Like the GIF format, PNG‑8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.

Because PNG‑8 is not supported by all browsers, you may want to avoid this format when you are distributing the image to a wide audience.

The PNG‑8 format uses more advanced compression schemes than GIF does, and a PNG‑8 file can be 10% to 30% smaller than a GIF file of the same image, depending on the image’s color patterns. Although PNG‑8 compression is lossless, optimizing an original 24‑bit image as an 8‑bit PNG file can subtract colors from the image.
Note: With certain images, especially those with simple patterns and few colors, GIF compression can create a smaller file than PNG‑8 compression. View optimized images in GIF and PNG‑8 format to compare file size.
As with the GIF format, you can choose the number of colors in an image and control how colors dither in a browser. The PNG‑8 format supports background transparency and background matting, by which you blend the edges of the image with a web page background color.


PNG‑8 with 256 colors and no dither (left), and PNG‑8 with 16 colors and dithering (right)

About the PNG‑24 formatThe PNG‑24 format supports 24‑bit color. Like the JPEG format, PNG‑24 preserves the subtle variations in brightness and hue found in photographs. Like the GIF and PNG‑8 formats, PNG‑24 preserves sharp details like those in line art, logos, or type.

The PNG‑24 format uses the same lossless compression method as the PNG‑8 format. For that reason, PNG‑24 files are usually larger than JPEG files of the same image. You may want to avoid PNG‑24 format when you are distributing your image to a wide audience.

In addition to supporting background transparency and background matting, the PNG‑24 format supports multilevel transparency. You can have up to 256 degrees of transparency from opaque to completely transparent, so you can blend the edges of an image smoothly with any background color. However, not all browsers support multilevel transparency.

More information about the PNG format can be found here.

Image Compression using Photoshop

Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs

To make a GIF, do the following to an RGB image in Photoshop:

  • web settings - gifShow and hide any layers to get the image you need
  • Determine the color of the web page background that the image will be displayed against
  • Select FILE>SAVE FOR WEB…
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
  • Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
  • Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
    Perceptual – Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
    Selective – Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
    Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
    Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
  • Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
  • Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
  • If you want the image to display while downloading,select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

  • Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
  • If you have created a mask for transparency, and want the background of the web page to show through the mask area, checkthe TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
  • Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.
JPEGs

To make a JPEG, do the following to an RGB image in Photoshop:

  • web settings - jpegShow and hide any layers to get the image you need
  • Select FILE>SAVE FOR WEB…
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
  • Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
  • Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
  • Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
  • If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Image slicing

Earlier we discussed the basic principles of compressing your images for the web. What do you do when you have all of your final design comps ready in Photoshop and you want to optimize all of the images you’ll need to build your web site? Saving each image one-by-one can be very inefficient. Slicing allows you to “cut out,” name, and optimize all of your images at the same time. This can save you a great deal of time and is easy to do.

Here’s an example web page that demonstrates the image slicing approach. This is the file I’m using in this exercise. (Control right-click to download file)


Overview

Many web designers develop their page layouts in Photoshop (or Illustrator) before they use an application such as Dreamweaver to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their Photoshop layout into the realities of HTML and limited download time. This involves compressing different parts of the layout in different ways (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

In Photoshop CS2, an image slicing application called ImageReady is shipped with Photoshop, and the two programs are tightly integrated. ImageReady is a program specifically designed for image slicing, and contains many additional tools for this process.

In both Photoshop CS2 and Photoshop CS3, image slicing is also part of Photoshop. If you do not have Photoshop CS2 or CS3, you can also use ImageReady if it is included in the version of Photoshop you are using for this class.

Adobe Fireworks is another program designed for image slicing and has replaced ImageReady.

Advantages of image slicing
By slicing the page into smaller graphics, the designer can:

  • Compose the page in Photoshop – rather than Dreamweaver
  • Simulate layering – by compositing imagery in Photoshop, and avoiding the use of DHTML layers in the web page.
  • Optimize the page – compress parts of the web page individually, and leave parts of the page “transparent” so the background color or background image shows through. For example, use JPEG for a photograph in one part of the page, use GIF for a logo with a transparent background where the page background color shows through.
  • Use HTML text – leave parts of the page available for HTML text which requires very little download time compared to graphic text. HTML text can also be updated more easily than graphic text.
  • Make graphic elements individual links – while his effect can be achieved with image maps, usually separate graphics
    or each link is better: better compatibility when the page is viewed without graphics (using the ALT text), better accessibility for the disabled, the ability to have rollovers for the links, and simpler updating of the page.
  • Rollovers – rollover images can be created for each navigational element on the page which would not be possible if the page was one large image.

Example of sliced page:
Below is a diagram showing how the Photoshop image is sliced up to make the files that make up this web page.

Disadvantages of image slicing
Page slicing can create numerous problems if the designer is not careful:

  • Page size – by letting a program create all of your images, it is easy to let the page size grow too large.
  • Page complexity – image slicing programs can create a large number of cells in the page. If this happens, the browser will take longer to display the page, and the user feels it is taking longer to download. Keep the number of slices to a minimum so the page is not too complex.
  • More complex design process – image slicing creates a more complex process, and may add to the time it takes to develop a web site. In particular, it make take longer to make changes to pages developed with slicing.


Recommended Process.

Be methodical.
Creating the numerous image slices for a web page makes the designer’s job potentially very complicated. One has to keep track of the page layout, the precise dimensions of each graphic element, rollover highlights, etc. If any changes are made to the page after it’s initially constructed, these factors become even more acute. As a consequence, the designer must take a very organized and careful approach to developing web page graphics.

Here is one method:

  1. Do the initial design and layout in Photoshop. (Note that in the Photoshop file “image_slicing.psd” that each element is on its own layer and all layers are named. You want to be sure to keep your psd file very organized and all elements on separate layers.)
  2. Test the design in a web site by exporting a JPEG version of the entire page.
  3. Based on the tests, revise the design in Photoshop and create a final comp.
  4. Create rollover highlights as separate layers
  5. In Photoshop —
    1. Determine how the page will be sliced up to:
      1. compress each section of the image most efficiently (with JPEG or GIF)
      2. make slices for each rollover (will discuss rollovers in a future class)
    2. Create the image slices using the minimum number of rectangles for dividing the page. Try to keep the total number of slices under 15. It is better to have fewer, larger slices than many small slices.
    3. Set the image format for each slice (JPEG, GIF, level of compression, etc.)
    4. Set the transparency for the slice, and set the matte color if applicable.
    5. Export all the slices along with an HTML file if needed. (Photoshop automatically creates a table that arranges the slices properly on the page). Save the image slices in a separate folder for each web page.
  6. Create the HTML in Dreamweaver to finalize the page.
Slicing in Photoshop

An image is created and edited in Photoshop.

Open the Photoshop file and:

  • Choose VIEW > SHOW RULERS, and create any guides you may need to make your slices consistent.
  • Select the slice tool
  • Draw a slice by clicking and dragging to create a rectangle for your slice
  • Double click on the image to open the slice option palette, In the slice option palette, set the following attributes for the following sections:
    • Name: set the name of the file to be created for this slice (Photoshop creates a default file name, which I suggest you change)
  • After you have named all of your slices, select FILE > SAVE FOR WEB to individually optimize every image. In the save for web palette, set the appropriate image coding for every slice. Don’t forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for theslice tool) to select different slices.
  • An easy way to remember the slicing process is as a 3 step process:
    Step 1- slice
    Step 2- name

    Step 3- optimize

Save Optimized Images
When you are ready to save your sliced images, you can create image files only, or create an HTML file with all of the images inserted in a table in the correct layout. We will cover saving a HTML file later in the semester. When saving, be sure to set the following items:

  • Create HTML or not
  • The directory for the images
  • After you have completed steps 1-3 (slice, name, optimize) for every slice, you can save the files as images only. You do not need to change the name of the file. Save to a folder called “Photoshop.” Photoshop will create an images folder and will place your optimized images there. Note that image slicing often generates many images. In general, it’s recommended that you create separate image directories for each sliced page so you can keep track of the images better.Notice also the following settings:
  • Settings : Default Settings
  • Slices: All

Use separate image directories for each web page.
Sliced pages often have many images, and the pages are frequently regenerated with different slices. This process can leave many unused “orphaned” images that should be deleted. If several sliced pages have their images saved in the same directory, it is difficult to find the orphaned image slices. On the other hand, if the image slices are saved in a separate directory for each sliced web page, then after significant changes to the slicing, the entire directory can be deleted and a new set of images can be optimized and saved into a clean directory.

Suggested Reading

How to Make Slicing Suck Less

WATCH  lynda.com video
Optimizing photos as JPEGs
Photoshop CS5 for the Web | by Jan Kabili

View this entire Photoshop course and more in the lynda.com Online Training Library®.


Comments

  1. Sara Sultanali November 30th

    Comment Arrow

    I found way to change the width and height. The option is in the naming pop up. This will be very helpful.


  2. jamie December 1st

    Comment Arrow

    Hi Sara,

    Fantastic! I’m glad you found this option.


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65