Day 3: Photoshop as a Web Design Tool

As a web designer you will be asked to format and even create graphics images for your web site. You need to know which format is best for each graphic and how to optimize those graphics for the fastest download possible.

Copyright

The Photoshop Basics

One of our next tasks is to create our banner art work, photo gallery and convert the images for the individual pages from their raw state to something ready for the web by cropping, resizing and optimizing for the web. Make sure to save all your photoshop files into a "Working files" folder and all your .jpg/.gif/png files for the web site in your images folder.

Banner Art Work (12:11)
In this tutorial I will walk you through the process of making the banner art work for our travel web site. When you finish, feel free to work on a banner for your own web site.

Insert Image in Dreamweaver (2:05)
In this tutorial I will show you how to insert an image into your web page using our banner graphics.

Working with Images in Dreamweaver (2:55)
In this tutorial I will show you some of the things you can do with images right inside Dreamweaver.

Images for Individual Pages
Now I would like you to watch the following tutorials and use the skills and knowledge to crop, resize and optimize all the images in your photographs folder for use in the rest of the web site. Don't worry about making a button or resizing the specific images in these lessons, just work with what you have in the "photographs" folder in "practice_sites".

Web File Formats

Images are primarily displayed on the web using either GIF,  JPEG or PNG file formats.  Each has its strengths and weaknesses.  Another format that you may be familiar with is the bitmap format or .bmp.  This is an excellent format for printing, but because of the file size and browser incompatibility, should NOT be used in web authoring. 

  • GIF (.gif): This file format is great for simple computer graphics with flat colors, hard edges or when you need transparency.
  • JPEG (.jpg): This file format is best for photographs or images with smooth color blends (gradients).
  • PNG (.png): This is a good substitute for the GIF format and can handle partially transparent areas (drop shadows).

File Format Tutorial (6:37)

Optimization Strategies

When working with image optimization for the web, file size is everything.  Here are a few simple things you can do to reduce the file size of your images. Here are some guidelines for file sizes that you will want to try to follow as closely as possible.  A basic web page with no images starts at between 5 to 20k.

  • Standard Home Page - 20-50
  • Graphic/Animation Intense Splash Page - 30 -80k
  • Standard Inside Page 20 - 40k
  • Graphic/Animation Intense Inside Page - 30 -100k

You need to add up the file sizes of all the images and the web page itself to calculate the total download size of your page.

Optimizing Images Tutorial (4:28)

Reduce Color with GIF or PNG
If you are working with a photograph in Adobe Photoshop, you can reduce the image size considerably by reducing the number of colors that are being displayed. Managing color is critical to both making your clients images appealing and keeping the images file size small so that download times can be minimized. This is especially true when working with GIF and PNG files. If you can reduce the number of colors in the images color table, you will reduce the file size. You may notice that the highest number of colors GIF can contain is 256. This was considered “Web Safe Colors” back when some monitors would only display than many colors and both the Mac and PC shared these 256 colors. In today’s web environment, web designers often use a much wider color palette.
Directions

  1. File “Save for Web”
  2. Choose 4-Up view
  3. Select GIF or PNG (notice the number in the preset)
  4. Reduce the number in the “Colors” option box
  5. Switch to a different view port and try fewer colors
  6. Select the best image with the smallest file size and save to your “images” folder

Reduce Size
Resizing the image will make the image file size smaller.

  1. In the Image menu, go to the Image Size area.
  2. Make sure that the "constrain proportions" is checked, along with “Resample” and use either Bicubic or Bicubic Sharper/Smoother (depending if you are enlarging or reducing)
  3. Change the resolution size 72. 
  4. Change the pixel dimensions.  You might want to check out the image size that other web designers are using.  Download their image and then check out how big they are.
  5. Check the image size again.  Compare the image quality with the reduced file size.

Resize Tutorial (6:42)

Weighted Optimization Tutorial (2:54)

  • Introduction to Photoshop CS3
    • Adventure Travel Banner
  • Photoshop as a layout tool
    • Adventure Layout
  • Photoshop and Dreamweaver

Other Web Related Photoshop Tutorials (optional)

Online Photo Galleries

Occasionally we will be asked by our clients to create a gallery of images but as you know by now, just a few images can make your web page download very slowly. Web designers figured out that they could put a bunch of very small images called “Thumbnails” on a web page fairly efficiently and then simply link to the full size images. This gives your viewer a quick way to see all of your images while maintaining access to the full size image if they want to view or download it.

Adobe Photoshop Tutorial (6:15)
In this tutorial you will learn how to use Adobe Photoshop to build a web gallery very quickly and easily. Use the images in the "photographs" folder in the practice site to complete this activity. Save it in your dreamweaver practice site as "gallery".

Photoshop Elements (This is from my "Photoshop Elements in the Classroom" workshop)

Organizer (1 hour) First we are going to start out with just some basics of using the Adobe Photoshop Elements Organizer. Please follow along with these tutorials. Make sure to pause the tutorial and do the same things that I am doing in Photoshop Elements. If you have any questions let me know.

Now let’s use the “Create” option in the organizer to quickly create some cool classroom projects.

  • Tutorial >> Web Gallery (7:24)
    • Use the images in the "photographs" folder in the practice site to complete this activity. If you like this gallery better, delete the Photoshop Gallery you made earlier and replace it this this one.

Online Resources for Images

Free Stock Photos
Stock.XCHNG: http://www.sxc.hu/   Read licensing
MorgueFile: http://www.morguefile.com/
Unprofound: http://www.unprofound.com/
FreeFoto: http://www.freefoto.com/index.jsp
Pics4Learning: http://www.pics4learning.com/
Public Domain Photo Database Photo: http://www.pdphoto.org/      
Public Domain Photos: http://www.public-domain-photos.com/
Flickr Free Use Group: http://www.flickr.com/groups/freeuse

Government Sites
NOAA: http://www.photolib.noaa.gov/
National Archives: http://www.archives.gov/research/arc/index.html
Library of Congress: http://www.loc.gov/library/libarch-digital.html
American Memory: http://memory.loc.gov/ammem/index.html
NASA: http://nix.nasa.gov/

 

Clip Art Web Sites
Classroom Clipart: http://www.classroomclipart.com/
Clipart ETC: http://etc.usf.edu/clipart/
Awesome clipart for Educators: http://www.awesomeclipartforeducators.com/

Free Fonts
1001 Free Fonts: http://www.1001freefonts.com/
Font Freak: http://www.fontfreak.com/fonts-a.htm
Type Now Themed Fonts: http://www.typenow.net/
DaFont: http://www.dafont.com/

Joe Dockery, CTE Teacher, Mount Si High School | dockeryj@svsd410.org | 425-831-8126