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

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

Toolbox - Photoshop Elements

Photoshop Elements offers tools which simplify the image-composition process.



Photoshop Elements offers tools which simplify the image-composition process. The tool-box, which appears by default on the left side of the editing area, groups these tools by ed-iting function. The names of the different tools are highlighted in Fig. 3.14.


Photoshop Elements provides navigation tools that aid the user in the editing process. The magnifying glass is a navigation tool that zooms in on an image. Click and drag with the magnifying glass tool to zoom into a particular area. Click a spot to zoom in with that spot centered in the image window. Hold down the Alt key while clicking to zoom out. The shortcut for zooming in is Ctrl+ (plus) and the shortcut for zooming out is Ctrl– (minus).

Clicking and dragging with the hand tool pans from one side of an image to the other. This tool is useful when an image is large or when an image is magnified. The hand tool is accessible at any time by holding down the Spacebar key.


Some tools have hidden tools beneath them in the toolbox. A small triangle in the lower-right corner of the tool button indicates hidden tools. The marquee tool, the type tool and the lasso tool have hidden tools beneath them. Click and hold the tool button to reveal hidden options.


1. Selection Tools

The selection tools—the “marquee”, “lasso” and “magic wand”—create a border called a marquee. A marquee bounds a selected area of pixels that can be modified by filters, moved or have their colors adjusted. Filters are special effects that perform uniform changes to an area of pixels. A selection marquee is moved by dragging it with a selection tool. Moving a selection marquee with the move tool moves the pixels bounded inside the marquee, leav-ing the area the selection previously occupied transparent, revealing any layers beneath (Fig. 3.15).


The rectangular marquee and the elliptical marquee tools select areas of pixels. The default marquee is the rectangular marquee tool and the elliptical marquee is hidden beneath it. These tools may be constrained to either a perfect circle or square by pressing the Shift key while clicking and dragging.


The lasso tools (regular, polygonal and magnetic) allow the user to customize a selec-tion area. The regular lasso, the default, draws a freehand marquee around an area of pixels, following every move of the mouse. Clicking and dragging the magnetic lasso tool, hidden behind the regular lasso, traces a selection area by adhering to the edges of an object in an image. The magnetic lasso finds the edges by the difference in pixel color. The polyg-onal lasso draws straight-edged selections by clicking at the selection corner points. Figure 3.16 illustrates the selections using the various lasso tools.


The magic wand tool selects areas of similarly colored adjacent pixels. The tolerance setting increases or decreases the pixel color range that the magic wand selects (Fig. 3.17). The Magic Wand options bar provides the tolerance settings.


The selection tool option bars help customize selection areas (Fig. 3.18). A selection can be added to, subtracted from or intersected with another selection with these options. These options also may be used while toggling between different selection tools.

The next example shows how to use the selection tools to create a blurred frame for an image so that it gradually blends into the background color of a Web page. Open the file eiffel.jpg located in the Chapter 3 examples directory on the CD-ROM that accom-panies this book. Choose the rectangular marquee tool from the toolbox and set the feath-ering to 8 pixels in the Marquee tool options bar. Feathering blurs the edges of a selection so the pixels inside the selection blend with the pixels outside the selection. The number of pixels, in this case, determines the amount of blur around the selection’s edge. The effects of feathering a selection are shown in Fig. 3.19.


Click and drag the rectangular marquee tool from the upper left to the lower right of the photograph, leaving some space between the edge of the picture and the selection. Any selection may be removed or modified. Clicking the image with any of the selection tools while a marquee is active, removes the marquee. Notice that the corners of the selection are rounded, indicating that it is feathered. The image on the left in Fig. 3.19 has selection feathering set to 0.

Select Inverse from the Select menu or use the shortcut Ctrl+Shift+I to invert the selection. Inverting selects all the pixels outside the current selection marquee. Click the foreground color and choose RGB 204, 0, 1 or #CC0033 in the Color Picker dialog. Choose Fill... from the Edit menu. The Fill dialog (Fig. 3.20) presents several options for filling a selection or layer. For this example, set the fill to Foreground Color, leave the blending mode set to Normal and click OK. The shortcut to fill any selection with the fore-ground color is Alt+Backspace. Alternatively, pressing Ctrl+Backspace fills a selection with the background color. These shortcuts only work with the normal blending mode. The blending mode determines how color interacts with the image color to which it is applied. Blending modes are explored in a later example.

Choose Deselect from the Select menu or use the shortcut Ctrl+D to remove a selection marquee. As in the first example in which we created the file typefun, this image is saved for the Web. This time save the file in JPEG (Joint Photographic Experts Group) format, by selecting JPEG as the file type in the Save for Web dialog. JPEG is a format commonly used on the Web for saving photographic-quality images.


The JPEG format allows the user to specify the quality of the image being saved. For this image, set the quality to 50, which is medium quality. Most JPEG images intended for the Web are saved as medium or low quality to reduce their file size. JPEG images are pre-viewed in a Web browser in the same way as GIF files. Choose RGB 204, 0, 1 or #CC0033 as the matte color so that the background color of the preview Web page is the same as the blurred frame around the photograph (Fig. 3.21).


2. Painting Tools


The second group of toolbox tools are the painting tools, which apply color to an image in simulated brush strokes or in constrained shapes. Paintbrush and airbrush are raster tools that draw with virtual paintbrush or airbrush strokes by clicking and dragging them on the image area. Different brush size and stroke options are selected in the options bar.


The paint bucket tool adds the foreground color to selections or areas of similarly col-ored pixels. The pixel selection process for this tool is the same as the selection process for the magic wand tool. The paint bucket tool fills large areas with color.


Another interesting way to fill an area with color is with the gradient tool. The gradient tool fills an area with a progression of colors (Fig. 3.22). The area to be filled must be selected with one of the selection tools before a gradient is applied to it, otherwise the gra-dient fills the entire canvas. Click and drag with the gradient tool, in the direction of the gradient movement to create patterns of color. Gradients can be created in many shapes and colors depending on which options are selected in the Gradients options bar.

The following example shows the different uses of the painting tools, filters and type tools to create a title image for a Web page. Filters alter the appearance of a selection or an entire raster layer by applying uniform changes to every pixel. Create a new image that is 200 pixels high, 600 pixels wide with a white background in RGB mode. Select RGB 153, 204, 255 or #99CCFF, a light blue, as the foreground color and RGB 0, 0, 153 or #000099, a darker blue, as the background color. Fill the background layer with the fore-ground color by using the shortcut Alt+Backspace. This shortcut works on an entire layer if no selection is made. Next choose the paintbrush tool and select a brush size of 13 from the Paintbrush options bar. Several brush types and sizes are available in this options bar, including some that are hidden. The hidden brushes are found in different categories under the brush drop-down list (Fig. 3.23). This brush menu may also be accessed by right clicking in the image area with any of the paint-brush tools.


Feel free to experiment with these different brushes. For this example, it does not matter which brushes are used because painting will be distorted. Painting tools always paint with the foreground color. For this example, we want to paint with the dark blue back-ground color. Make the background color become the foreground color by clicking the switch foreground and background arrow found directly above the background color swatch in the toolbox. Once the colors are switched, paint randomly on the canvas with the dark blue color (Fig. 3.24).

This “painting” will eventually become a design that fills the title text. Designs can be created by using one of Photoshop Elements’ many filters. Begin to create the pattern by choosing Liquify… from the Filters menu. The liquify filter distorts an image by modi-fying color placement. When the Liquify dialog opens (Fig. 3.25), choose a brush size of 50 with a brush pressure of 50. The brush size determines the area affected by the filter. The brush pressure determines the filter’s intensity. Click and drag in the painted area to apply the liquify filter. Eight different modes for the liquify filter can be selected with but-tons along the left side of the dialog. The default mode for this tool is warp, however, feel free to experiment with the other modes. If a mistake is made, click Revert to change the image back to its original appearance.


The liquify filter is one of the few filters that creates its effects based on the artistic input of the user, making it more like a tool than an actual filter. Most of the other filter effects are performed uniformly on image pixels. Continue to click and drag with the liquify brush until a design is created. Press OK to apply the filter to the original image.

The next step is to define the text area to which the design is applied. Instead of cre-ating regular text, we want to create a selection marquee in the shape of text. Select the type tool and choose the type selection option from the type options bar. The type selection tool is indicated by a dashed line T (Fig. 3.26). Choose a font face of Brush Script with font size 150 point (type the font size). The purpose of using the type selection tool instead of the regular type tool is to capture the pattern inside the selection boundaries of the type. Then the selection can be separated from the rest of the pattern and placed onto a new layer. Set the alignment for the type selection tool to center and click the middle of the image. The image turns red, indicating that a text selection is being made. Type the word “Wel-come.” The background remains red and the type shows through in the original blue color (Fig. 3.26).

The selection is not applied until another tool is chosen. For this example, select the move tool to apply the selection. The move tool creates a bounding box around the selection.


Separate the text from the background by copying its contents to a new layer. Use the Layer via Copy (Ctrl+J) function found under the New submenu of the Layer menu to create a new layer with the contents of a selection. Even though the text exists in its own layer, it is still not visible because it is hidden by the background layer. Turn off the back-ground layer visibility by opening the Layers palette and clicking the layer’s visibility button (Fig. 3.27). A layer is not deleted when the visibility is turned off; it is only deacti-vated so that contents of other layers can be better identified. The copied text in the new layer should be the only visible element.

The next step is to crop out the background area using the crop tool located in the toolbox next to the type tool. Click and drag with the crop tool to make a crop box that elim-inates the extra background area. The area being cropped turns gray and a bounding box with anchors surrounds the remaining area (Fig. 3.28). Adjust the bounding box that elim-inates the background area around the word. Once the crop selection is set, press the Enter key to crop the image.


The next step in creating the title image is to give the word a layer effect to raise it off the page. Select the background layer in the Layers palette if it is not already selected. As in the first example, open the Layer Styles palette. Instead of applying a Drop Shadow, this time choose Bevels from the style-selection drop-down list. Apply the Simple Sharp Inner bevel to the “Welcome” layer (Fig. 3.29).


The last step is to create a color border to outline the text. Choose the Magic Wand tool and click outside the word, selecting the transparent area. Add spaces inside the o, e and l by either clicking the add to selection button in the Magic Wand options bar (Fig. 3.18) or holding down Shift while clicking the letter spaces with the magic wand tool. Next, invert the selection so that the word is selected instead of the transparent background (Ctrl+Shift+I). Create a line with an even pixel weight along the selection by choosing Stroke from the Edit menu. The Stroke dialog has options for stroke width, stroke color, stroke location, blending mode and opacity (Fig. 3.29).

Set the line weight to 3 pixels and Location to center in the Stroke dialog. The stroke Color defaults to the current foreground color, and can be changed by double clicking the stroke swatch. Make sure that the Preserve Transparency box is unchecked, otherwise the stroke will not appear in the transparent area around the word. Click OK.


3. Shape Tools


The shape tool draws vector shapes filled with color. Unlike raster graphics in the same lay-er, vector graphics can be edited independently from one another. Every time a shape tool is used, a new vector shape layer is created. Shape layers contain only shapes created with the shape tool and cannot contain raster graphics. The shape tool’s default setting is a rect-angle; however the shape can be changed to an ellipse, polygon, line or custom shape with the shape tool options bar. The options change depending on the selected tool (Fig. 3.30).


To demonstrate the shape tool, we will create a navigation bar. Each button on the bar is created as a vector shape with the shape tool and converted into a raster graphic to create the navigation bar.


Create a new file that is 625 pixels wide and 100 pixels high. For guidance when cre-ating the navigation bar, turn on the grid by choosing Show Grid from the View menu. This option helps to space the buttons evenly. The settings for the grid are changed in the Grid Preferences dialog by choosing Grid... from the Preferences submenu of the Edit menu. Set the grid lines to appear for every pixel and set the grid line color to light blue.


Choose a new foreground color to become the color of the buttons. The navigation but-tons are created as a series of duplicate rectangles. Select the shape tool from the toolbox and select the rectangle tool from the Shape tool options bar. Create a rectangle that fills a little less than 1/4 of the image width, approximately 15 grid squares, as shown in Fig. 3.31.

Duplicate this rectangle three times (once for each link in the navigation bar). Select the shape select tool, indicated by an arrow, from the Shape options bar. Copy the rect-angle to the clipboard by clicking the copy button in the main menu bar (Fig. 3.32) or use the shortcut Ctrl+C. The clipboard is an area of temporary memory in the computer in which text and graphics can be stored for immediate reuse. The paste command places the information from the clipboard into a document. Use the paste button or the shortcut Ctrl+V to paste the rectangle from the clipboard back into the main image. This new rect-angle is placed directly on top of the existing rectangle in the same vector layer. Drag the new rectangle next to the original using the shape select tool. Space the rectangles two grid lines apart. Repeat the copy and paste step two more times to create the four navigation bar buttons (Fig. 3.33).


If the rectangles were placed unevenly, adjust their position using the shape select tool. It is also possible to use the Undo command in the Edit menu, or the Ctrl+Z command to correct mistakes. Actions can be undone as far back as the last time the image was saved by using the History palette. The History palette (Fig. 3.34) displays every action per-formed since the last save. Selecting an action in the palette creates a preview of the image if that action were undone. Click the trashcan button in the History palette to undo an action permanently.

The rectangles should now be in a straight line and evenly spaced. The next step is to change the shape of the rectangles uniformly, turning them into parallelograms by skewing the rectangles with the transformation option to tilt them along the horizontal or vertical axis. To achieve this, select all the rectangles by clicking each with the shape select tool while holding down the Shift key. All rectangles are selected simultaneously when each has a shape selection box around it. Apply a skew transformation by selecting Skew from the Transform Shape submenu of the Image menu. During the skew transformation a bounding box encloses all four rectangles. Hover near the top center anchor until a two-way arrow appears. Click and drag the bounding box two grid lines to the right, transforming the rectangles (Fig. 3.35).


All four rectangles slant to the right when the mouse is released. Transformations are not applied until the Enter key is pressed, so if the shapes do not look correct, the transfor-mation still can be changed.


A navigation bar effect is created by connecting the buttons. For this example, the but-tons will be connected by a heavy-weight line created with the line shape tool. The line shape tool is located in the Shape tool options bar between the polygon tool and the custom shape tool. Set the line weight for the line tool to 20 pixels in the tool options bar. Click and drag from left to right with the line shape tool, creating a line in a new vector layer (Fig. 3.36).


The outline of the four parallelograms connected with the line outlines the navigation bar. Apply a bevel to these shapes to make them appear as buttons; however the steps to do this are more complicated than applying layer styles to text or shapes alone. First the rect-angles and line layers must be converted from vector shape layers into regular raster layers. Then they must be merged together so the buttons and line are treated as one area of pixels.

Open the Layers palette and select the line layer. Change both the line layer and but-tons layer into regular raster layers separately by choosing Simplify Layer from the layer options menu (Fig. 3.37). Both the line and the parallelograms are no longer individual vector objects. Instead they are raster areas of pixels.


The next step is to merge the line layer with the rectangles layer so when the bevel is applied, it is applied uniformly around the perimeter of the navigation bar. Merge the layers by selecting the line layer in the Layers palette and choose Merge Down from the Layer options menu. Merging two raster layers unifies their contents into a combined area of pixels. Next, layer styles may be applied to the navigation bar. Create the button effect by applying a simple sharp inner bevel with the Layer Styles palette.


The navigation bar is completed by adding titles to the buttons. Select a large font face and type the following button labels: Links, News, Files and E-mail. Center the type over the buttons with the move tool (Fig. 3.38). This example uses font face Courier, bold, italic at 30 point.

There are a few ways to implement a navigation bar on a Web page. One way is to create hot spots which are sensitive to the mouse and link to different locations. Another way is to break apart the navigation bar into separate buttons through a process called image slicing. Image slicing creates smaller individual images from an original larger image. First turn the grid back on and turn off the visibility of the background layer. Reduce the file size by eliminating the unnecessary background area with the crop tool.


Select each button with the rectangular marquee tool and then copy the selection con-tents into a new document. First check to make sure that snap is on by checking Snap in the View menu. The snap option makes selections adhere to grid lines. Click and drag the rectangular marquee tool using the grid as a guide to select only the links button (Fig. 3.39).


Copy the contents of the selection to the clipboard by choosing Copy Merged from the Edit menu. This command copies pixels within the selection from all visible layers. Open a new file with a transparent background. The default height and width should match the contents of the clipboard, so do not change them. Now paste the links button into the new file (Ctrl+P) to be saved as a transparent GIF. Repeat these steps for each of the but-tons (Fig. 3.40). These files are ready to be inserted into a Web document by rebuilding the navigation bar.

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

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