the web warrior guide to web design technologies l.
Skip this Video
Loading SlideShow in 5 Seconds..
The Web Warrior Guide to Web Design Technologies PowerPoint Presentation
Download Presentation
The Web Warrior Guide to Web Design Technologies

Loading in 2 Seconds...

play fullscreen
1 / 40

The Web Warrior Guide to Web Design Technologies - PowerPoint PPT Presentation

  • Uploaded on

The Web Warrior Guide to Web Design Technologies Chapter 5 Photoshop and ImageReady: Part I Objectives In this chapter, you will: Create images Edit images Save and optimize images Creating Images

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

The Web Warrior Guide to Web Design Technologies

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
the web warrior guide to web design technologies
The Web Warrior Guide to Web Design Technologies

Chapter 5

Photoshop and ImageReady: Part I


In this chapter, you will:

  • Create images
  • Edit images
  • Save and optimize images
creating images
Creating Images
  • If you have ever used a painting program (such as Paint, which comes with the Windows operating system), you will be familiar with the idea of creating computer images
  • Photoshop lets you do far more than just paint, however
  • It also includes tools for
    • advanced techniques
    • filters for applying effects across the entire image
    • layers that allow you to manipulate discrete parts of an image
    • vector-based tools
using tools
Using Tools
  • The Toolbox is the palette containing the tools you use to create images
  • The Toolbox was shown earlier in Figure 5-1
  • Sets of tools are differentiated from individual tools by a small triangle below and to the right of the Tool icon
using tools6
Using Tools
  • Drag your mouse diagonally across the Document window to select an area
  • This selection area is outlined with a dashed link called a marquee
using tools7
Using Tools
  • Fill the selection area with a solid color or a pattern
  • The currently selected color is shown as the foreground color in the Toolbox
  • Using tools such as the Brush tool or the Paint Bucket tool results in the foreground color being applied to the open image
  • Behind the foreground color in the Toolbox is the background color
  • This color is used to augment the foreground color when creating gradients or patterns that fade from one color to another
using filters
Using Filters
  • The tools in the Toolbox are useful for adding color and effects to specific areas of an image
  • Photoshop also includes many filters, available under the Filter menu, that can be used to add graphical effects to entire images or selected areas
  • The filters are divided into 13 main categories and a few advanced categories
using filters9
Using Filters
  • Most of the filter categories recreate the effects of traditional drawing and painting techniques such as watercolor, cross-hatching, and mosaic
  • Other filters are used to blur, sharpen, or distort the image
using layers and vector shapes
Using Layers and Vector Shapes
  • Layers are a Photoshop element that you can think of as sheets of clear plastic
  • When stacked above one another, they can contain separate image elements
  • You can edit the contents of a layer without affecting the image elements in the other layers
  • Vector shapes are another kind of element that can be edited without affecting other parts of an image
using layers and vector shapes11
Using Layers and Vector Shapes
  • Web graphics are bitmap images, which means they are composed of a grid of pixels, where each pixel can have a different color
  • When you use tools such as the Marquee tools or Brush tool, you are manipulating the pixels in the bitmap
  • Vector shapes are composed of lines, rather than pixels, and can be colored with different styles in addition to solid colors
using text
Using Text
  • Text in Web graphics often suffers from aliasing, which is an effect that causes the edges of the text to appear jagged
  • Normally you will want to use anti-aliasing, a technique that blurs the edges of the text slightly in order to create the appearance of a smooth edge
navigating images
Navigating Images
  • Before you begin manipulating images, you need to be able to find your way around them
  • One of the tools you will use most often is the Zoom tool (also called the Magnifying Glass tool), which lets you increase or decrease the scale of the image window
  • Photoshop also allows you to change the scale in other ways
changing dimensions
Changing Dimensions
  • Changing the dimensions means changing the actual height and width of an image
  • In Photoshop, the term canvas refers to the dimensions of an image
  • An image’s canvas size is the height and width, in pixels, of the image
  • In Photoshop, you alter the image dimensions with the Image Size and Canvas Size menu tools
changing dimensions16
Changing Dimensions
  • Image Size lets you stretch or shrink the image; Canvas Size lets you pad or crop the image
  • Padding means adding empty space to the edge of an image in order to make it bigger; cropping means removing part of the image in order to make it smaller
  • Photoshop also includes the Crop tool in the Toolbox and the Trim command under the Image menu
fixing low contrast scans
Fixing Low-Contrast Scans
  • Often you will find that scanned images have low contrast
  • That is, the white areas are not truly white, and the black areas are not truly black
  • Figure 5-9 shows an image with low, normal, and high contrast
fixing low contrast scans18
Fixing Low-Contrast Scans
  • You can solve this problem in Photoshop by using the Brightness/Contrast option and the Levels option
fixing problem colors
Fixing Problem Colors
  • In addition to the problem of low contrast, scanned images may have colors that do not appear as bright as in the source image
  • This is a common problem when the source is printed on low-quality paper
  • You can improve poor color in Photoshop with the Hue/Saturation feature
retouching with the brush tool
Retouching with the Brush Tool
  • An easy way to fix small specks like those seen here is with the airbrush capabilities of the Brush tool
  • Using the normal Brush tool would leave hard edges where you make your edit
  • The airbrush capabilities leaves a smoother line
retouching with the dust scratches filter
Retouching with the Dust & Scratches Filter
  • The Dust & Scratches filter is explicitly designed to remove minor blemishes from photographs caused by dust on the camera lens or scanner bed or from scratches in the original photo
  • This filter works by finding adjacent pixels that are different colors and blurring them
  • When using some filters, you will want to apply them to a selected area, rather than to the full image
retouching with the dust scratches filter22
Retouching with the Dust & Scratches Filter
  • If you find it awkward to make the selection by using the Elliptical or Rectangular Marquee tools, you can use another type of selection tool, called the Lasso tool, which allows you to create a selection area of any shape
blurring images
Blurring Images
  • Blurring reduces color contrast, lightness contrast, and texture contrast by blending adjacent pixels
  • If the area you need to select is too irregular for the Lasso tool, you can use the Magic Wand tool, which creates a selection area of all pixels that are similar to the color of the selected pixel
blurring images24
Blurring Images
  • Like the Paint Bucket tool, the Magic Wand tool includes a Tolerance setting in the Option bar
  • Both tools also include a Contiguous option
  • When checked, this option ensures that only similar pixels (which are adjacent to the one you click) are affected
using saturation
Using Saturation
  • Adjusting the color saturation of the background can emphasize the foreground and enhance the presentation of the subject
  • Using the Sponge tool has the same effect, but it is more appropriate for making local changes to specific pixels
replacing unwanted elements
Replacing Unwanted Elements
  • Replacing unwanted parts of a photo is one of the most enjoyable aspects of editing images
  • The Clone Stamp tool (also called the Rubber Stamp tool) allows you to duplicate specific parts of an image
  • When you use this tool, you need to specify the brush size, which controls the diameter, in pixels, of the line created when using this tool
saving and optimizing images
Saving and Optimizing Images
  • When creating pages for the Internet, you need to factor in the importance of how quickly the pages will load on the user’s computer
  • To make images download quickly on the Web, you must optimize them, which means reducing their file size while maintaining the image quality
  • You can optimize images by using one of two methods: color reduction or compression
saving and optimizing images29
Saving and Optimizing Images
  • Color reduction is appropriate for simple images that contain few colors, such as line graphs
  • Compression is more appropriate for complex images that contain many colors, such as photographs
  • Among all the available file formats for bitmap images, only three can be displayed as part of a Web page: GIF, JPEG, and PNG
  • GIF images can contain a maximum of 256 colors and are optimized through color reduction
optimizing gif files
Optimizing GIF Files
  • The Save for Web command gives you more control over the optimization process and allows you to preview your changes
  • When preparing images for the Web, always use the Save for Web command
  • Sometimes, reducing the number of colors in an image causes banding, an effect in which smooth gradations of colors turn into stripes
optimizing gif files31
Optimizing GIF Files
  • One way to fix banded colors is to use dithering, which is the technique of adding pixels to an image to break up the boundaries between different colors
optimizing gif files32
Optimizing GIF Files
  • You can choose which method (Perceptual, Selective, Adaptive, or Web) to use when reducing the colors of an image
  • The default Color Reduction setting is Selective, and that usually produces the best result
  • Another option is Web, which favors Web-safe colors
optimizing gif files33
Optimizing GIF Files
  • You can optimize GIF images by specifying a certain percentage of Web Snap, which controls how many Web-safe colors to use in the image
  • It is a good idea to leave this setting at 0%, because using a higher setting will result in low-quality images
  • It is not necessary to use Web-safe colors when optimizing images
optimizing jpeg files
Optimizing JPEG Files
  • You can optimize JPEG images in the Save For Web dialog box
  • The menu options on the right side of the box are different for JPEG images
  • Compressing a JPEG image is simple
  • A high Quality setting results in a large image file with no noticeable degradation of the image
optimizing jpeg files35
Optimizing JPEG Files
  • A low Quality setting results in a smaller image file that may contain artifacts, or areas of texture that are side effects of the compression
optimizing jpeg files36
Optimizing JPEG Files
  • Another option when compressing images is to make the image progressive, a setting that causes the image to download in stages rather than all at once
  • A progressive JPEG image is similar to an interlaced GIF image
optimizing by file size
Optimizing by File Size
  • In order to make sure the Web page downloads in a few seconds or less, you may decide that all the elements of a page must have a combined file size of less than 60KB
  • If the HTML file itself has a size of 30KB, that leaves another 30KB for all the graphics on the page
  • It is then convenient to optimize an image based on a fixed file size, rather than just looking at the maximum optimization that does not compromise image quality
optimizing by file size38
Optimizing by File Size
  • First select a target file size for the optimized image in the Desired File Size text field
  • The target size should depend on the dimensions of the image and the number of colors in it
  • A small image of 50 by 50 pixels with just a few colors can be optimized to less than 1KB
  • The Toolbox contains all the tools you need to select, draw, and manipulate the image with your mouse
  • Layers are like sheets of clear plastic
  • You can change the elements inside one layer without affecting those in another
  • Use the Zoom tool to magnify the image
  • Use the Levels dialog box to fix low-contrast scans
  • You can smoothly replace areas of an image with the Clone Stamp tool
  • Images with few colors, such as graphs, are best saved as GIF images
  • Images with many colors, such as photographs, are best saved as JPEG images
  • You can optimize an image by selecting a target file size and letting Photoshop find the best settings