ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 06

Week 06 – Topics

Prototyping

Optimizing images for web

More CSS properties

Technical lab: Image slicing/prototyping exercise

Assignments

1) Lab assignment: Create the prototype page as demonstrated in class. Use what you learned to create a prototype page of the home page of the project you presented for our crit last week. Upload the files for both of these projects to your Week 06 folder on the class server.

2) Continue working on your midterm project. Please bring the design of your landing page to next week’s class. You need to be ready to start technical production by our class next week. Bring in all your work as we will have lab time in class.

3) Project due before next week: Find 3 articles that discuss prototyping for the Web. Post a link to these articles on your class blog and include a 5-6 sentence summary of the article. What does the article detail, how is it helpful to your understanding of prototyping for the Web, and what did you learn by reading it?

4) Be sure you have read for next week: Stylin’ with CSS: Chapter 3: “Stylin’ Fonts and Text” (pg 66-99)

Midterm Project – Due Week 8

Quiz 2 Review

We will have a quiz next week that will cover the following topics. Please review the notes below and come prepared for the Quiz!

  1. What are the specification for building your design comp in Photoshop?
    Your file should be RGB and set at 72 dpi. The dimensions of your file should be 990 pixels wide (and remember “the fold” is 560 pixels high). Be sure to put your elements on separate layers and to properly label your layers.
  2. What is “presentational HTML markup” and what does the “separation of presentation and content” mean?
    Presentational HTML markup basically means defining all your positioning and styling within the HTML page itself. A web page built with a table-based structure is an example of presentational HTML markup. Also, defining your styles “inline” — meaning, defining the styles within the HTML. The big problem with presentational HTML markup is that making changes to the presentation (positioning and/or styling) of the content requires changing each and every web page within the site. The separation of presentation and content solves the problems of presentational HTML markup. When creating a page layout, create an HTML pages containing all the CONTENT for the pages and create a separate CSS file containing all the PRESENTATION for the pages. Instead of defining styles inline, use CSS to create the styles.
  3. What is a faux column and when do you use it?
    When you want column heights to matches the height of the content. Adding a graphic to the background of the layout that is the same color and width of the columns can create the illusion that the column extends down the page.
  4. What are the three basic questions a well-designed navigational system must answer?
    1) Where am I? (Present)
    2) Where else can I go? (Future)
    3) Where have I been? (Past)
  5. What is the golden rule of navigation design?
    Consistency. People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.
  6. What is the real width of a “box/div/container” when considering the CSS Box Model?
    total box width = content area width + left padding + right padding + left border + right border + left margin + right margin
  7. What are the three CSS selector types? And give an example.
    element selector (Redefines an HTML element)
    p {
    }class selector (Apply to any HTML element)
    .example{
    }id selector (Applies to only one HTML element)
    #example{
    }

Basic 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 Optimization & Image Slicing

This week we will discuss how to optimize your web images before you start to build your web site in Dreamweaver. 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.

image_slicing.zip

Overview

Many web designers develop their page layouts in Photoshop/Illustrator/Indesign before they use an application such as Dreamweaver/Coda to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop/Illustrator/Indesign to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their 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.

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

  • Compose the page in Photoshop – rather than Dreamweaver/Coda
  • 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 in a design program and then finalize the 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: User slices

To create a prototype web page.

Follow the steps below:

1) After selecting the optimization setting for your images, click on the drop down located in the upper right-hand corner of the optimization window to reveal the “Edit Output Settings” selection. Click here to edit the setting for the Slices.

.

2) From the second drop down menu, select “Slice” amd edit the Slices settings. Be sure you have selected “Generate CSS,” and referenced “By ID.” I also recommend you select “slice” for the Default Slice Naming. Click on Save.

.

3) Be sure to choose “images and HTML” when saving for web. And select “User Slices” rather than All Slices.

Video Demonstrations

You can download the entire demonstration in two QuickTime movie files: Part 1 (29 MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

Image Slicing | Part 1

Image Slicing | Part 2

Additional Resources

More information about image slicing at Ten Ton Books.

Image slicing Part 1

Image slicing Part 2

Image Slicing Assignment

From scratch, slice the Photoshop file contained in the download: image_slicing.zip

Using the enclosed Photoshop file, complete the following:

In Photoshop, slice all images, name, and optimize to save all images to a separate folder.

Keep the following in mind as you slice this image:

  • Slice neatly!
  • Set the optimization for each slice
  • Save the sliced images

Slice, name and optimize all the images for the example from the Image Slicing video demonstration using the image_slicing.zip file. Create a prototype page by saving out the HTML in addition to the images. Be sure to follow the instructions outlined in the notes above so you create a layout using CSS.

Category: Classes

Tagged:

Comments are closed.