comp 1850 | introduction to web design and development

lecture eight

agenda

  • image types
  • image manipulation
  • photoshop basics
  • photoshop filters, text effects, buttons
  • building from a mockup

image types

  1. Vector

    • image information is stored using math, formulas, eg: lines, points, arcs, polygons, etc
    • scales perfectly
    • suitable for text and fontwork, illustrations with well defined lines. commonly used in print media
    • NOT suitable for photographic quality images
    • Adobe Illustrator, Inkscape, Corel
  2. Raster

    • image information is stored based on pixels, assigning each pixel values 0-255 of Red, Green and Blue
    • scales poorly
    • acceptable for rendering fonts in a web browser
    • suitable for photographic quality images
    • Adobe Photoshop, GIMP, Paintshop Pro

While some developers make effective use of both types of images, most web-work is accomplished using raster images.

Raster Image Types

  1. Lossless: Each pixel's color values are accounted for. High image quality, relatively large image filesize. Eg: BMP, TIFF, GIF, PNG
  2. Lossy: Data is discarded. Computer 'approximates' color values for some pixels. Detrimental to image quality, smaller filesize. Eg: JPEG

Graphic formats vary in quality and filesize. Since bandwidth always matters, try to keep image filesizes as small as possible by using the following formats:

  • jpg or jpeg
  • png (pronounced 'ping')
  • gif

Experiment with Save As... settings in photoshop to see the varying graphic qualities available for jpegs.

JPEGs use a lossy storage technique in order to maintain small file sizes. Lossy algorithms discard data each time you create a JPEG, reducing image quality. Convert all your source files into a lossless format, such as a .psd (photoshop) file. Only create JPEGs from lossless source files.

image manipulation

Basic Procedure For Image Manipulation

  1. convert source file(s) into lossless format (psd format is a good choice). after conversion, store source files somewhere safe
  2. resize to desired dimensions (set actual image size in photoshop, dont resize images in a web browser)
  3. rotate, crop, alter image(s) as required
  4. save image(s) as a web appropriate image type (jpeg, gif or png)
  5. deploy images in web page using HTML img and CSS propeorties such as background-image

Size Images Using CSS

Clients will first receive .html and .css files before the server will send the images. Thus, when you set images sizes in the CSS, the client browser can set aside the space needed even though the image has not arrived yet. If you do not set image sizes in CSS, the page content will relocate and change as the images do finally arrive.

photoshop basics

Photoshop is a feature rich program that can take years of concentrated effort to master. Nothing will take the place of experimenting with it on your own. Be sure to explore:

  • Image size: Image > Image Size
  • Image rotation Image > Image Rotation
  • Image brightness, hue: Image > Adjustments > ...
  • Image skew: Edit > Transform
  • Add basic layer effects: Layer > Layer Style...
  • Add complex special effects: Filters...

photoshop filters

  1. download a head shot image of your favorite politician or celebrity.
  2. launch Photoshop and open the image you downloaded; save it with a different name, so you don't have to worry about wrecking the original, which you might need later
  3. before applying each of the following filters, copy the original image onto a new layer. The end rsult should be a PSD file with six layers showing 6 different filter effects.
  4. in the Filter menu, apply the following filters:
    1. drag down to Artistic, and select Cutout. Experiment with the number of Levels, the Edge Simplicity, and the Edge Fidelity, then click on OK.
    2. drag down to Artistic, and select Sponge. Experiment with the Brush Size, the Definition, and the Smoothness, then click on OK.
    3. drag down to Brush Strokes, and select Sprayed Strokes. Experiment with the Stroke Length, the Spray Radius, and the Stroke Direction, then click on OK.
    4. drag down to Distort, and select Glass. Experiment with the Distortion, the Smoothness, and the Texture, then click on OK.
    5. drag down to Sketch, and select Chrome. Experiment with the Detail and the Smoothness, and then click on OK.
    6. drag down to Stylize, and select Emboss. Experiment with the Angle, the Height, and the Amount, then click on OK.
  5. once you have explored these filters, make another copy of the original image on a new layer and:
    1. experiment with some of the other filters.
    2. experiment with applying multiple filters to one image.
    3. experiment with selecting part of an image and filtering just the selection.
  6. Save your image.

manipulating text

  1. Click on File and select New to create a new image:
    1. The image should be about 400 pixels in width by 200 pixels in height.
    2. The resolution should be 72 pixels/inch.
    3. The mode should be set at RGB colour.
    4. The Contents should be White.
  2. Using the Color Picker, select a foreground colour and fill in the image with that colour.
  3. Using the Color Picker, select a foreground colour for your text.
  4. Click on the Text tool in the tool palette. In the Options bar at the top of the Photoshop window do the following:
    1. Choose the font face you wish to use.
    2. Choose the font size you wish to use.
  5. Click in your image and type your name.
  6. If you're unhappy with the font face, size or colour, make sure you still have the Text tool selected, and you should be able to highlight the text and then change the settings in the Options bar.
  7. Once you are satisfied with the text, make sure the Text tool is still selected in the tool palette and right-click once on the image. Select Warp Text... from the menu that appears.
    1. Select one of the Warp Text styles from the Style feature. You should be able to see a preview of your image on screen.
    2. Once you have selected a Warp Text style, play with the Bend and Distortion options.
    3. Once you are satisfied with the style, bend, and distortion you want to apply to your image, click on OK.
  8. Make sure the Text tool is selected in the tool palette.
    1. Right-click once on the Text layer in the Layers box.
    2. Select Blending Options from the menu that appears.
    3. Experiment with different text-manipulation options in the Styles menu within the Blending Options box. To select a style and apply it to your image, click in the box to the left of the style. You should be able to preview the changes to the text on screen.
    4. Experiment with different General Blending and Advanced Blending options.
    5. Once you like the way the text looks, click on OK to set the changes. You should be returned to your image.
  9. Crop the image to a reasonable size - don't leave too much dead space around your name unless it looks really cool.
  10. Save your image.

creating buttons

  1. Click on File and select New to create a new image:
    1. The image should be about 400 pixels in width by 100 pixels in height.
    2. The resolution should be 72 pixels/inch.
    3. The mode should be set at RGB colour.
    4. The Contents should be White.
  2. In the Layers palette, click on the Create a new layer icon.
  3. In the new layer, use the Marquee tool and draw a rectangle.
  4. Use the Color Picker to choose a dark foreground color and a light background color.
  5. Select the Gradient Tool from the tool palette. Click in the top left corner of your image and drag to the bottom right.
  6. Click on Select, drag down to Modify and select Contract. In the dialog box that appears, enter 6 and click on OK.
  7. Select the Gradient Tool again from the tool palette. This time, click in the bottom right corner and drag to the upper left.
  8. Click on Select, drag down to Modify and select Contract. In the dialog box that appears, enter 3 and click on OK.
  9. Click on Select drag down to select Feather. In the dialog box that appears, enter 2 and click on OK.
  10. Select the Gradient Tool for the last time. Click in the top left corner of your image and drag to the bottom right.
  11. Click on Select and drag down to Deselect.
  12. Click on Image and drag down to Image Size.
    1. Set the width to 200 pixels; the height should automatically adjust.
    2. Click on OK.
  13. Use the Crop tool to crop out out dead space around your button.
  14. Use the Text tool to create text layers over top of the button.
  15. You can also experiment with Layer Styles:
    1. Create a new layer and fill it with your colour of preference.
    2. Click on Layer and drag down to Layer Style and then choose Bevel and Emboss.
    3. Experiment with the Structure and Shading settings and pay attention to the Preview to get a sense of how they will affect the button. Click OK.
    4. Note that you now have an effects layer in the Layers palette.
  16. Save your image.

more on buttons:

Buttons are increasingly being implemented with CSS techniques. Here are some cool Photoshop and CSS resources:

slicing and saving web images

You may follow these steps exactly, or continue to mockup your own version of the WidgetWerks site, using the steps below as a guideline for processing the pieces.

  1. Open the widget_layout_finish.psd file you downloaded from the week08 folder on the class server.
  2. If Guides are not currently visible, press Ctrl+; to show the guides.
  3. Hold down the Ctrl key and, in the Layers palette, click on the layer named top bar.
    1. Note that there is now a marquee around the top bar.
    2. Click in the Ruler in the top of the document and drag a new guide to the bottom of the top bar until it "snaps" in to place.
    3. Press Ctrl+D to deselect the top bar.
  4. Create a JPG file for the navigation picture:
    1. Make sure that Guides are still visible and select the rectangular Marquee Tool. Click and drag a marquee around the picture above the navigation. If the marquee does not snap to the guides, choose the Snap to Guides option in the View menu.
    2. Click on Image and drag down to Crop.
    3. Click on File and drag down to Save for Web...
    4. In the Save for Web... options screen, alter the image settings in the Settings area on the right side. Select JPEG from the dropdown menu and experiment with the quality options.
    5. When you are satisfied with the image, click OK in the top right corner.
    6. Save your image in a new folder named images. Name the image "home.jpg" or something else that will mean something to you when it comes time to insert it in a web page.
  5. Click on File and drag down to Revert.
  6. Create a GIF file for the partner button picture:
    1. Make sure that Guides are still visible and select the rectangular Marquee Tool. Click and drag a marquee around the "partners" button in the navigation bar.
    2. Click on Image and drag down to Crop.
    3. Click on File and drag down to Save for Web...
    4. In the Save for Web... options screen, alter the image settings in the Settings area on the right side. Select GIF from the dropdown menu and experiment with various settings.
    5. When you are satisfied with the image, click OK in the top right corner.
    6. Save your image the images folder you created earlier. Name the image "partners.gif" or something else that will mean something to you when it comes time to insert it in a web page.
  7. Save your image.
  8. Click on File and drag down to Revert.
  9. Repeat the above steps for each of the image "slices" defined by the guides.
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |