Screencasts

Create a Widescreen Design

Here are basic steps for creating a design with color gradients which expand to fill the width of the browser.

Start with this file:

Follow these two screencasts:

  1. Create the background colors (Quicktime Video)
  2. Add gradient and drop shadow effects (Quicktime Video)

Slice and Place the Background Images into your Website

  1. Start with this file: Sample Photoshop Mockup (PSD file)
  2. Create slices for repeating background images (Quicktime movie)
  3. Now get the HTML/CSS starter kit: Site Starter Kit – Wide (ZIP folder)
  4. Place the background slices into a functioning website (Quicktime movie)

Create, Slice, and Place a Logo

Continue working with the Photoshop and HTML/CSS files from “Slice and Place Background Images into your Website,” above.

  1. Create a basic text logo with inner shadow (Quicktime Video)
  2. Slice the logo as a layer slice and optimize to GIF with matte (Quicktime Video)
  3. Place the sliced logo into your website (Quicktime Video)

Position and Style a Nav

Here is a simple method to position and style your navigation.

  1. Begin with these files (ZIP)
  2. Create a background image for the Nav hover effect (Quicktime Video)
  3. Position the nav, style it, and place the background image (Quicktime Video)

Slice and Place Rounded Corner Images

Begin with these files:

Follow these screencasts:

  1. Review the steps for slicing rounded corner images from the Photoshop mockup (Quicktime movie)
  2. Place rounded corner images in your site sidebar (Quicktime movie)

Create a Layer-Based Slice

Review the steps for creating a layer-based slice — in this case, optimizing with PNG-24 with transparency.

  1. Turn Two Layers into a Single Smart Object (Quicktime movie)
  2. Convert Logo Smart Object to Layer-Based Slice (Quicktime movie)