Week 2ART 239 Web Design I

Class Notes for Monday 1/28/19 and Wednesday 1/30/19

Agenda

Download the Class Presentation PDF

Types of Sites

Design Review

Art & Design Fundementals

What is UI & UX?

Components of page design

Tools

Proper Photoshop setup and usage for Web Design

GIF/JPG/PNG/SVG, transparency, antialias

When the web started, files had to be small. So the engineers came up with all sorts of compression schemes for images. Much like music and video compression now, these where indispensable for delivering content effectively over very limited bandwidth (like dial up)

gif
Graphics Interchange Format - an indexed color format that works best for solid colors and, of course, animation
  • Reduces the number of colors in an image - limited to 256
  • supports transparency
  • supports animation
  • When possible, avoid GIF and use the PNG format, which does nearly everything better.
jpeg
Joint Photographic Experts Group - a lossy compression that works best with photographs and complex images
  • support up to 16.7 million colors
  • removes information that the human eye will not notice
  • if you decrease the quality of a JPG too much, you will begin to lose important color information that cannot be recovered
  • does not support transparency
  • does not support animation
png
Portable Network Graphics - a lossless image compression format that works best for higher resolution images and full alpha transparency
  • PNGs allow for greater compression than GIFs with a wider range of colors.
  • supports alpha transparency
  • does not support animation
  • PNG-8: [8 bit color] - supports up to 256 colors, similar to GIF
  • PNG-24: [24 bit color] - support for 16 million colors
  • PNG-32: [24 bit color with an extra 8 bit alpha channel] - full support for alpha transparency - highest quality most of the time, but that also means large file sizes
  • While PNG 24 or 32 can be used for photographs, they tend to be larger than JPG - be sure to compare size/quality
svg
Scalable Vector Graphics - XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
  • does not lose quality if zoomed or resized
  • every element and every attribute in SVG files can be animated

Here’s an excellent post regarding the above information

RGB and Indexed colors

RGB color is an additive color model in which red green, and blue are added to each other to create different colors. 100% of each color added to each other will equal white.

Indexed color is a means of image compression that limits the amount of colors available in an image (thus making it smaller). GIF and PNG 8 are exampls fo this.

Photoshop Export procedures


Legacy “Save for Web” dialog.

Save for Web view

New “Export As” dialog

Export As view

Format
Choose PNG, JPG, GIF, or SVG.

Format-specific setting

Size
Specify the width and height of the image asset. Width and height are locked together by default. Changing the width automatically changes the height proportionately.

Scale
Choose how big the exported image should be. This option is useful for exporting larger- or smaller-resolution assets. Changing the scale impacts the image size.

Resample
Choose a resampling method. Resampling refers to changing the amount of image data as you change either the pixel dimensions or the resolution of an image, typically while resizing an image.

Bilinear
Adds pixels by averaging the color values of the surrounding pixels. This method produces medium-quality results.
Nearest Neighbor
Fast but less precise method that replicates the pixels in an image. This method is for use with illustrations containing edges that are not anti-aliased. It preserves hard edges and produces a smaller file. However, this method can produce jagged effects, which become apparent when you scale an image or perform multiple manipulations on a selection.
Preserve Details
While resizing the image, this method places primary importance on the preservation of image details and sharpness.
Bicubic
Slower but more precise method based on an examination of the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than the Bilinear or Nearest Neighbor resampling methods.
Bicubic Smoother
Good for enlarging images based on Bicubic interpolation, but designed to produce smoother results.
Bicubic Sharper
Good for reducing the size of an image based on Bicubic interpolation while enhancing sharpening. This method maintains the detail in a resampled image. If Bicubic Sharper oversharpens some areas of an image, try using Bicubic.
Bicubic Automatic
Automatically chooses the Bicubic sampling method appropriate for the image.

Canvas Size
If your asset needs to occupy a certain width and height, specify those values as the Canvas Size. The Export As dialog updates the preview to center the image within those bounds. This option is useful in several scenarios, such as the following:

If the image is larger than the canvas size, it is clipped to the width and height values set for the canvas. You can click Reset to revert the values to those set in Image Size.

Metadata
Specify whether you want to embed metadata—copyright and contact information—in the exported assets.

Color Space
Specify the following:

Web Site Research & Analysis Assignment

Presentation Date: Monday, February 11th

Your grade will be based on how well you explain how the site you chose uses DESIGN ELEMENTS and PRINCIPLES as well as TYPOGRAPHY, GRID STRUCTURE, and COLOR THEORY.

Design Presentation Rubric