Creating Web Graphics Using Photoshop Basic Image Editing

The following pages are intended as a basic introduction to creating and manipulating existing web graphics using Photoshop.

You can choose one of the images below if you do not have an image you'd like to work with to try out some basic editing in Photoshop.

To borrow one of the images, place your cursor over the image and right click and hold down the mouse button. Scroll down to Save Image As and enter a filename. Then click Save.  The image is yours to work with.

Opening an image

To open an image in Photoshop, from the File menu, select Open. The image will appear in the image window. The Toolbox should appear to the left of the image window, the numerous other palettes to the right. If you don't see a palette that you'd like to use, from the Window menu, select Show [Palette Name].

You can move the palettes and the Toolbox around the work area by clicking on the blue bar at the top of the palette while holding the mouse button down and dragging the palette to where you want to move it. 

Cropping an image

To crop an open image, select the crop tool from the Marquee icon in the Toolbox. If the crop tool is not visible, click and hold the mouse button over the Marquee icon until the other options appear. Then select the crop tool .

Click on the image where you'd like to begin cropping it. While holding down the left mouse button, drag the mouse over the image to select the area you wish to crop.

If you need to adjust the cropping boundary, place your mouse cursor over one of the small boxes on the line boundary. When the two-directional arrow appears, click and drag it to adjust the area.

When you are ready to crop the image, go to the Image menu and select Crop.

Adding type to an image

To add text to an open image, select the text tool from the Toolbox.

Click on the image where you want to add the text.

The type tool window will appear. You can adjust the font face, the font size, and the font color from this window.

To change the font color, click in the color field. The color picker window will appear.  Click on the vertical color bar to select the hue, then click in the large square to select the font color. Then click OK.

Once you've adjusted the font, enter your text in the text field of the type tool window. Press enter when you want to start a new line or all of your text will appear on one line.

If you'd like to change the placement of the text on the image, place the cursor over the text on the image and click and drag it to where you want to place it before you click OK

When you are happy with the placement of the text, click OK. The text will appear on a new layer.

Zooming in and out

If you want to get a closer look at a portion of an image or do detail work, you can zoom in.

To zoom in on a portion of the image, select the Zoom tool or press the CRTL and the +  keys and click on the area you want to zoom in on. The entire image will no longer be visible when you choose this option.

To zoom out, press the CTRL and - keys.

To magnify the image and have the window resize so the whole image is still visible, press the CTRL, alt, and + keys.

Press the  CTRL, alt, and - keys to zoom out.

Creating a path

To create a path using the pen tool :

• select the pen tool from the Toolbox.
• To start the path, click where you'd like to place the anchor point on your image. A small square will appear on your image.
• Click another place on the image to place a second anchor point. A line will appear between those two anchor points.
• To create a curve, click and drag the mouse in the direction you want the curve to go.
• To create more anchor points, continue to click (and drag if you want curves).
• To delete the most recently made anchor point, press the delete key.
• Presss the delete key twice to delete thh entire path.
• To close the path, click on the starting anchor point.
• To leave the path open, press CTRL and click outside the path or click in the blank area of the Path Palette.

To create a path using the magnetic pen tool :

• select the magnetic pen tool from the Toolbox.
• Click to start the path and move the mouse along the outside edge of the shape. The magnetic pen tool will place anchor points on the image for you.
• To close the path, double click on the shape.
• To leave the path open, press the Enter key.

Once you've created a path you can make a selection, fill a path (with the current foreground color), or stroke a path (fill the path outline with color).

You can fill the path by clicking on the Fill Path option at the bottom of the Paths Palette.

You can stroke the path by clicking on the Stroke Path option at the bottom of the Paths Palette.

Using the filters

You can use filters to acheive neat effects. The effect below was created using the Graphic Pen filter.

Filters can be applied to a whole layer or to selection on the layer.

To use the filters, open the image you wish to alter.

From the Filter menu, select the filter you would like to apply. You can preview most filters before you apply them.

Most filters give you the option of maximizing or minimizing their effects.

Now that you have been introduced to these basic editing moves, let's look at preparing images for the web.

	the work area	basic image editing	preparing images for the web
	techniques		links