Class Notes for Monday 1/28/19 and Wednesday 1/30/19
- Site types
- Sitemaps, Wireframes
- Components of a webpage (layout & content)
- Photoshop as web design tool (artboards, height/width, grid guides, layers, layer comps palette)
- Photoshop Slicing
- First Assignment (Research)
- Image formats
- RGB vs. Indexed, resampling
- GIF/JPG/PNG/SVG, transparency, antialias
- Photoshop Export procedures
- Page design (hippo clothing)
Download the Class Presentation PDF
Types of Sites
What is UI & UX?
- Interface design
Components of page design
- Grid layouts
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)
- 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.
- 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
- 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
- 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.
New “Export As” dialog
Choose PNG, JPG, GIF, or SVG.
- For PNG, specify whether you want to export assets with Transparency enabled (32-bit) or export smaller-sized images (8-bit).
- For JPEG, specify the desired image quality (0–100%).
- GIF images are transparent by default.
- Note: While exporting PNG assets, remember the following:
- Selecting Transparency generates 32-bit PNG assets
- Selecting Smaller File generates 8-bit PNG assets
- Leaving the above options deselected generates 24-bit PNG assets
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.
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.
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.
- 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.
- 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.
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:
- You’re exporting icons that have various sizes, but that need to be centered within 50x50 px boxes.
- You’re exporting banner images that are smaller or larger than the required dimensions.
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.
Specify whether you want to embed metadata—copyright and contact information—in the exported assets.
Specify the following:
- Whether you want to convert the exported asset to the sRGB color space. This option is selected by default.
- Whether you want to embed the color profile in the exported asset.
Web Site Research & Analysis Assignment
Presentation Date: Monday, February 11th
- Find three original and interesting websites that inspire you.
- Choose ONE of those sites for your full presentation (you will not be discussing all three). The sites you choose should show original design and great functionality, which is what you will be discussing.
- Required time: 7 minute presentation (allowing 30 seconds shorter or longer).
- You will also complete a writeup as a PDF of the presented site to include a critical review citing the features and functionality as well as the elements and principles of design, color theory, typography.
- Make sure to PRACTICE MULTIPLE TIMES before presenting in front of the class.
- You can have an outline of your presentation to follow (Index card), but you should not be reading from notes (make eye contact with your audience!)
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.