Chapter: Internet & World Wide Web HOW TO PROGRAM - Photoshop Elements

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Image Basics - Photoshop Elements

Photoshop Elements is best taught by example. This chapter provides several examples that illustrate how to use Photoshop Elements’ tools and functions. This section examines the basic steps for creating original images.

Image Basics


Photoshop Elements is best taught by example. This chapter provides several examples that illustrate how to use Photoshop Elements’ tools and functions. This section examines the basic steps for creating original images.


Begin by opening Photoshop Elements. When the program first opens, the Quick Start menu appears in the center of the screen and presents several options (Fig. 3.1). Some options include creating a new file, opening an existing file or acquiring an image from an outside source such as a scanner or a digital camera. This window appears when the program is started, but also may be accessed at any time through the Window menu by selecting Show Quick Start. The File menu also opens new or existing files.


Click New in the Quick Start menu to open the New dialog (Fig. 3.2), to begin cre-ating an image.


The New dialog specifies initial image settings and appears each time a new image file is created. The initial image settings include Height and Width and the units in which these are measured. The dialog sets the image resolution. Resolution is a measurement of image clarity and is measured in pixels per unit—every image in Photoshop Elements is composed of a grid of dots called pixels, which store color information.


The New dialog sets an image’s Background Color and color Mode. The three color modes available are red-green-blue (RGB), grayscale and bitmap. Color mode deter-mines the number of colors that Photoshop Elements uses to compose an image. RGB and grayscale are the most commonly used color modes for creating Web graphics. Color images use the RGB mode and black-and-white images use the grayscale mode.

In RGB mode, each pixel in the image is assigned an intensity value for the primary colors in light (i.e., red, green and blue) that create a color range of 16.7 million colors when combined in different intensity values from 0 (full saturation) to 255 (no saturation). This spectrum is comparable to that of human vision and is adequate for developing screen images. For instance, a bright-blue pixel might have a red value of 16, a green value of 20 and a blue value of 200. Grayscale model uses only neutral grays which have identical red, green and blue values. The bitmap mode uses only black and white.

Create a new image by entering typefun in the New dialog’s Name field. Set the image width to 300 pixels, the height to 150 pixels and the resolution to 72 pixels per inch by typing the numbers into the Width, Height, and Resolution fields. Choose the mea-surement units from the drop-down lists.


Select the RGB Color mode from the color Mode drop-down list. Set the Back-ground Color to white by clicking the White radio button in the Contents frame. These settings can be changed at any point during the image-editing process. The background color is the image’s initial color. Click OK to create the new file typefun.


A new image window opens in the development environment with the name typefun in the title bar (Fig. 3.3). The development environment is the gray area that contains the toolbox, palettes and image window. The toolbox is the vertical window to the left of the image window that contains different tools to create images. Palettes are windows that con-tain different image-editing options. The Hints palette is open by default.


The development environment can be customized to suit users’ preferences. For instance, the image window may be resized by clicking and dragging any of the sides or corners. Also, the palettes, toolbox and image window can be dragged to different loca-tions. Selecting Reset Palette Locations from the Window menu restores the default development environment settings.


Palettes, located inside the palette well, are windows that contain image editing and effects options. A palette is opened by clicking its tab in the palette well, and is closed by clicking outside the palette. Palettes may be organized in different ways to make image

editing easier. Several palettes can be open at one time by clicking and dragging their tabs out of the palette well and into the development environment. Palettes outside the palette well remain open until they are closed by clicking the x button in the upper-right corner of the pal-ette. Palette locations may be restored to their default locations by selecting Reset Palette Locations from the Windows menu. Different palette options will be discussed shortly.


The toolbox contains selection, editing, painting and type tools that add to or subtract graphic elements from images. The active tool applies changes to an image and is high-lighted in the toolbox. Only one tool can be active at a time. Tips for using the active tool are found in the status bar at the bottom of the screen or in the Hints palette.


The two squares at the bottom of the toolbox represent the two active colors—the fore-ground color and the background color. These squares are called swatches. Click the fore-ground color swatch to display the Color Picker dialog (Fig. 3.4) that allows the user to select the foreground or background color. Colors are selected based on the HSB (Hue, Satu-ration, Brightness) model or the RGB (Red, Green, Blue) model. These color models form the 16.7 million colors available in the RGB model based on combinations of their three pri-mary values. Both color models produce the same colors except that they measure color dif-ferently.

Hue is selected for the HSB model from the vertical color slider in the Color Picker dialog (Fig. 3.4). Hue is measured in degrees from 0–360 representing the colors of the color wheel. The color wheel is a theoretical model that  hows how colors are created from combinations of the three primary colors in light—red, green and blue. Saturation is a color’s intensity measured in the percentage of gray that the color contains. Saturated colors appear more vivid; less saturated colors appear dull. Brightness is a color’s relative light-ness or darkness and is measured in the amount of black or white a color contains.

RGB color selection is based on the same principle as the RGB color mode, in which each pixel has a red, green and blue value between 0 and 255 assigned to it. When RGB values are entered into the Color Picker, the HSB values change to reflect the selection.


The Color Picker allows the user to choose colors from a Web-safe palette, restricting color selection to the 216 colors that are cross-platform (e.g., Windows, Macin-tosh and UNIX) and cross-browser (e.g., Internet Explorer and Communicator) compatible.


first two digits are the red value, the second two are the green value and the last two are the blue value—00 signifies the least intensity and FF the greatest intensity. For more informa-tion on hexadecimal notation, see Appendix D, Number Systems.

Select a foreground color by adjusting the color slider to the desired hue, then pick the color from the color field and click OK. This color displays in the foreground color swatch of the toolbox.


The following example shows how to place text into an image and how to apply special effects to that text. Select the type tool from the toolbox by clicking the tool containing the capital letter T. Notice that the active tool options bar changes to reflect the new active tool (Fig. 3.5).


Similar to word-processing programs, the type options bar allows the user to alter text properties such as font face, font weight and alignment. For this example, choose Hel-vetica 30 point bold and click the image with the type tool. A cursor appears indicating the point where the text begins. Type in two lines of text and select it with the cursor. Type properties may be changed when text is selected. For instance, double clicking the type color swatch in the type options bar changes the type color.

Be sure to have the Anti-aliased checkbox selected in the type options bar. Anti-aliasing is a process that smooths edges on scalable fonts and other graphics by blending the color of the edge pixels with the color of the background on which the text is placed. Fonts can look jagged without anti-aliasing (Fig. 3.6).

Once the text is typed, it can be moved with either the type tool or the move tool. The move tool is indicated by an arrow with cross hairs (Fig. 3.7). As soon as the move tool is selected, a bounding box with side and corner anchors appears around the text. Anchors are the small boxes that appear on the edges of a bounding box. Clicking and dragging the anchors resizes the contents of the bounding box.


Select the move tool and click anywhere within the bounding box. Drag the text to the center of the image window. Click and drag any anchor to resize the text. Dragging a corner anchor while pressing the Shift key resizes the bounding box contents proportionately.

Photoshop Elements has several options for applying special effects to text and images. Click and drag the Layer Styles tab out of the palettes well to open the Layer Styles palette. If this palette tab is not visible in the palettes well, it can be opened by selecting Show Layer Styles from the Window menu. The Layer Styles palette offers a variety of effects that can be applied to text or shapes. Select Drop Shadows as the style type from the drop-down list inside this palette (Fig. 3.8).

Next select Low as the type of drop shadow from the style selection. A drop-shadow effect is applied to the text. Any layer style can be removed by selecting the Default Style from the Layer Styles palette.

A user can edit an effect, such as a drop shadow in two ways. The first is by selecting Scale Effects... from the Layer Style submenu of the Layer menu. The scale adjust-ment in the Scale Effects dialog increases or decreases the intensity of any layer effect. Scale the low drop shadow to 31 percent (Fig. 3.8).

The second way to adjust a layer style is through the Layers palette. Drag the Layers palette out of the palette well. This palette controls the use of layers in Photoshop Elements. Layers organize the different components that compose an image. The active layer is high-lighted in blue in the Layers palette. When using tools or applying special effects, only the active layer is affected. Notice that the text occupies its own type layer indicated by a T on its layer in the Layers palette (Fig. 3.9). Having the type on its own layer enables it to be edited independently of any other part of the image. Click the type layer in the Layers pal-ette to activate it. The f symbol in the blue area of the type layer indicates that the layer has a style applied to it. Double click the f to open the Style Settings dialog (Fig. 3.9).

Different options are available depending on the type of style applied to the layer. Set the drop shadow Lighting Angle to 120 degrees and the Shadow Distance to 3 pixels. The Lighting Angle controls the direction of the light source creating the shadow. The Shadow Distance determines the size of the drop shadow. Press OK to apply these changes.


Text also can be warped to conform to a shape. Select the type tool from the toolbox to reveal the Type options bar. Click the Warp text button in the Type options bar indi-cated by a T with an arc beneath it (Fig. 3.10).

The Warp Text dialog allows the user to select different shapes. For this example, select Flag from the Styles drop-down list and set the Bend slider to +50%. The three sliders modify the bend, horizontal distortion and vertical distortion of the text shape, respectively. The text changes to reflect the selection in real time in the original image window; however, the change is not applied until OK is clicked in the dialog.


The next step is to create the effect of transparency. Transparency allows the back-ground of the Web page to show through in the white portions of the image. Recall that when this file was created, the background color was set to white. A transparent back-ground could have been specified. Creating a transparent background at this stage requires using the Layers palette (Fig. 3.11).

New layers are transparent by default. The type layer is transparent with the exception of the type and its effects. Deleting the white background layer makes the image back-ground transparent. Select the background layer in the Layers palette to make it the active layer. Click the Trashcan button to delete this layer. The new image should have a gray and white checkerboard background, representing transparency. When the image is placed in a Web document, the background color of the Web page appears in the transparent parts.


Photoshop Elements provides an option for saving images for the Web. Choosing Save for Web... option, located under the File menu, opens a dialog Save for Web dialog. This dialog allows the user to determine the file format and color settings for saving an image. The original image appears on the left side of the dialog and the optimized ver-sion appears on the right (Fig. 3.12). Information about the graphic file, including file type, file size, estimated download time and the number of colors, appears for each image.

The optimized version is a preview of what the image will look like after it is saved. The different optimization settings such as file type, compression quality and number of colors the image utilizes, are all set in the Save for Web dialog. The file type determines the compression Photoshop Elements uses to save an image. Compression is defined by an algorithm that Photoshop Elements uses to save file data. The compression quality is the accuracy of the compression algorithm and determines the quality of the saved image.

The number of colors an image contains also affects the image quality. The more colors an image uses, the higher the image clarity. The number of colors may only be selected with certain file types.


Reducing the number of colors or the compression quality may decrease file size, thus lessening the image’s download time. Optimization is the process of finding the correct bal-ance between the number of colors, the compression quality and the file size such that the download time is ideal for the target audience.


Different file formats are appropriate for different types of graphics. The GIF (Com-puserve Graphics Interchange Format) format preserves transparency (saving pixels void of color information), making GIF ideal for transparent Web graphics such as typefun. Other file formats are discussed later in this chapter. Select GIF from the file type drop-down list. Make sure that the Transparency box is checked in the Save for Web dialog; otherwise, the image will not be saved as a transparent image.


When saving transparent images, it is important to choose a matte color with the Matte selector. A matte color optimizes the effect of transparency by blending the transparent edge pixels with the color so that the graphic blends into the page without having jagged edges. It is ideal to select a matte color that closely matches the background color of the Web page into which the image is placed. Select a matte color and notice the change to the optimized image.

An image may be previewed in a Web browser by clicking the browser preview button before it is saved. This option creates a temporary Web document with the image embedded. The background color of the preview is the Matte color. This preview also pro-vides information about the image such as file format, image dimensions, file size and file settings. Close the browser window to return to Photoshop Elements and click OK in the Save for Web dialog. Choose a descriptive name for the file so that it is easily identified when it is placed in a Web document. Inserting images into Web pages is introduced in Chapters 4 and 5.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020; All Rights Reserved. Developed by Therithal info, Chennai.