ACADEMIC TECHNOLOGY SUPPORT

Adobe Photoshop
Introduction Part 1
(Basics- Image Manipulation)

ats@etsu.edu | 439-8611
www.etsu.edu/ats

Table of Contents:
Overview................................................................................................................ 1
Objectives .............................................................................................................. 1
Basic Graphic Terminology.................................................................................. 1
Common Image File Types .................................................................................. 3
Getting Started in Photoshop .............................................................................. 4
Photoshop Resources ......................................................................................... 13

Overview
Adobe Photoshop is a powerful image editing program used by professional designers and photographers. In
this guide, users can learn the fundamental techniques involved in improving family snapshots, creating web
images, or even creating complex works of art.
Source files required to follow along with the exercises can be downloaded here.

Objectives
x

Understand basic graphic types

Add text to an image

Resize and crop images

Adjust brightness, contrast, and color in an image

Work with layers effectively

Save a Photoshop document

Basic Graphic Terminology

Bitmap Images
Bitmap images are made up of tiny dots (or squares). On a computer screen these dots are called Pixels.
When the dots are small enough and numerous enough, the human eye does not see the individual dots but
rather a photographic image. Most images found on the web or taken by digital cameras are bitmap images,
and that is what we will focus on in Photoshop.

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

Vector Images
Vector Images are made up of many geometric objects. Each of these objects can be defined by mathematical
statements and has individual properties assigned to it such as color, fill, and outline. As a result, they can be
enlarged with no loss of quality. Vector graphics are created using programs like Adobe Illustrator. When
bitmap images are enlarged, the dots become more noticeable.

Pixel
A pixel is a single square on a computer screen. Depending upon your screen resolution, your screen
probably has hundreds of thousands of pixels. For example, the most common screen resolution currently is
1024 x 768, which comes out to 786,432 pixels

Pixels per Inch (PPI)

PPI stands for Pixels per Inch, the standard unit of measurement for computer graphics (sometimes known
as dpi or Dots per Inch. For your graphics to look good, you must know the resolution of your output device
(i.e. laser printer, computer monitor, offset printing press, etc). For the web and other computer
presentations (such as PowerPoint) the standard resolution is 72 ppi. Typically, 150 ppi is sufficient for
printing on a laser printer. Professional printing usually requires 300+ ppi.
You can check your screens resolution by right-clicking on the desktop and choosing Properties > Settings

Monitor Color
Due to the variety of computer monitors on the market and the ability of users to manually adjust monitor
settings, an image may look quite different on someone elses monitor. In order to get accurate color
rendition on your monitor, you may need to calibrate it. This can be done using free software from Adobe or
through more complex hardware/software solutions. Similarly, calibrating your printer and monitor together
may be required if your printed images differ greatly from what you see on the computer screen.
Unfortunately there is no way to enforce others to calibrate their monitors, which is why images can look
quite different from screen to screen.

Common Image File Types

PSD (Photoshop)
.psd stands for Photoshop Document and is the native format for files created in Photoshop. These files are
uncompressed and tend to be large. Also web browsers cannot display them, so this format is unsuitable for
use on the web. However, this format is excellent for editing images because it supports layers and features
non-destructive editing.

JPG (Joint Photographic Experts Group)

.JPG/.jpeg stands for Joint Photographic Experts Group. Files saved in this format have undergone a
compression routine to decrease their file size. (This is the same basic idea as mp3s as an audio format).
Jpegs are capable of displaying 16.7 million different colors, making it particularly well suited for
photographic images. It is, however, a lossy compression format, which means that when a file is saved as a
JPG, digital information is lost.

GIF (Graphics Interchange Format)

.GIF stands for Graphics Interchange Format. Unlike JPG, the GIF format is a lossless compression, but it is
only capable of displaying 256 colors, usually making it unsuitable for photographic images. It is well suited,
however, for images with only a few distinct colors, such as line drawings, black and white images and small

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

text. The GIF format also permits transparent backgrounds, allowing the background behind the GIF to
show through. The GIF format also permits multiple layers, allowing for the creation of simple animation.

PNG (Portable Network Graphics)

.PNG stands for Portable Network Graphics. Although an officially recognized web image format, not all
browsers will correctly display PNG files. The format was developed to be a patent free alternative to the
GIF format when the company that developed the GIF format began charging developers to use their
technology. The PNG format also supports transparency, although it does not support animation. PNG
compression is more efficient than GIF compression, resulting in small file sizes.

Getting Started in Photoshop

Photoshop Layout
When you first start Photoshop you are confronted with a user interface that can be intimidating because of
the number of options available

The long, skinny bar on the left of the screen (usually) is the Tool Palette. The different tools allow you to
manipulate your image. You can crop the image, paint on it, select a portion to work on, change the color,
etc. Also from the Tool Palette you can change your foreground and background colors.
Along the top of the screen, notice that your options change depending upon which tool is selected. This is
called the Options Palette. Changing the settings here will affect how your tool behaves. For example, when
you click on the Text tool (the large T, 8th from the top in the 2nd column), the options palette allows you to
change the font, the type size, etc.
Photoshop has dozens of tools. Twenty tools are immediately visible. However, many of the tool squares are
actually hiding several other tools. Look for a small arrow in the bottom right of the tool square. That square
indicates that there are more options. Click and hold down the button to see the other options.

Tools

Move Tool: Allows you to move Layers or components around an image.

Selection Tools: Allow you to select areas of an image to work on or exclude.

Crop Tool: Allows you to crop or cut out a portion of an image.

Brush Tool: Allows you to paint pixels on your image.

Text Tool: Allows you to type text on your image.

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

Zoom Tool: Allows you to zoom into and away from your image.

Color Swatches: Allows you to change the color of your brush, text, or other tools.

Layers
Photoshop uses layers to build its images. Think of layers as sheets of acetate (like used on overhead
projectors). We can draw on each sheet. If we stack them atop one another we can get some interesting
effects as well. The layers palette is (usually) on the bottom right of your screen after you open Photoshop.
Each change you make to an image should be on its own layer. To make a change to text that you have added
to your image, for example, you must make certain that you are working on the correct layer by selecting it in
the Layers Palette.

Open the file Layers.psd (download the source files from the top of the page). Experiment with the Layers
panel in the bottom-right corner. Use the Move Tool to move the various components around in the image.
Turn layers on and off to see the effect.

Exercise: Building a PowerPoint Background

In todays workshop we will be designing an image that can be used as a master slide template in a Microsoft
PowerPoint presentation. In creating this file, we will use many of the most popular tools in Photoshop. Any
of the tools and methods covered in this workshop could also be applied towards other graphics projects

such as images for print production and web graphics. When completed your project should look something
like this:

1. Create a new, blank canvas by selecting File > New. In the dialog box that opens, select Web from the
Presets dropdown and then select 1024x768 from the Size dropdown. Click OK.

Now that we have a new file created, we will need the background image for our slide template.
2. Select File > Open and open the file background.jpg (which you downloaded in the source files zip.)

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

3. Resize. Resize the image by going to Image > Image Size. In the dialog box that opens, type 768 in the
Height box.
4. Crop. Crop the image by selecting the Crop Tool. Holding the mouse button down; draw a box inside the
background image. At this time, it does not matter how big or small.

5. Select the Crop. Use the selection handles to modify the box you drew. Enlarge it so it encompasses the
entire image, except for a little bit of the tree on the left hand side. Hit Enter on the keyboard to complete
the Crop.

While using the Crop Tool, the area kept bright is the area you will keep.
The darkened area is the area you will crop or delete.
6. Black and White. From the menu bar, select Image > Adjustments > Hue/Saturation. Play with all of the
sliders to get a feel for what changes you can make. Afterwards, select the Saturation slider and move it all the
way to the left. This will remove all color from the image.

7. Copy/Paste. Copy this cropped image to the blank canvas we created earlier. Select the Rectangular Marquee
Tool and holding the mouse button down, select the entire image of the library. With the image selected (noted by
a blinking, dotted line) select Edit > Copy. Select the blank canvas image and select Edit > Paste.
8. Size up. We need to scale the black/white image up to fill the entire canvas. Select Edit > Transform > Scale.
Use the manipulator squares in the corners to stretch the image so that it fills the entire canvas.
Holding the Shift button while stretching or scaling an image will constrain the proportions.
9. Opacity. We need to fade the image out a little bit, so that it wont compete with text that is put on it later.
Change the opacity setting in the Layers Palette to 35%.

10. Select File > Open and open the file blue_abstract.jpg

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

11. Black and White. Just like step 6: from the menu bar, select Image > Adjustments > Hue/Saturation. Select
the Saturation slider and move it all the way to the left. This will remove all color from the image.
12. Inverse the images colors. Image > Adjustments > Invert. This will flip all of the colors in the image to
their opposites. (example: black becomes white, blue becomes yellow, etc.)

13. Copy/Paste. Like step 7; copy this image to the blank canvas we created earlier, which now has the faded
image of the library. Select the Rectangular Marquee Tool and holding the mouse button down, select the entire
image of the library. With the image selected (noted by a blinking, dotted line) select Edit > Copy (or control+c).
Select the canvas image and select Edit > Paste (or control+v).
14. Like step 9, set the opacity on this layer to 50%.

15. Color Balance. Lets add a little bit of color to the black and white abstract overlay we just put on top of
our library picture. Image > Adjustments > Color Balance. Play with the sliders until you find a subtle color you
like.
16. Text. To add a title to our PowerPoint background, we need text. To add text, select the Text Tool on the
Tool Palette (its the T). With the Text Tool Selected, choose a color by clicking in the top color swatch in the

10

Tool Palette. This opens a Color Picker window. Select OK once you have chosen a color and click
anywhere on the image.
17. Text. When you click in the image with the Text Tool, a cursor appears. Type whatever you want for your
title. Ive typed My Presentation. Do not worry if it is too big or too small at this point. Once finished
typing, you can select the text by double-clicking the new Text Layer that was created in your Layers Palette.
Make sure you double-click directly on the T in the Layers Palette.
18. Text. With your text selected, the Options Bar at the top of the screen changes to give you standard text
options like Font, Text Size, Color, etc. Change these options until the text is the size, font, and color you wish. You can
position the text by clicking on the Move Tool and moving it around the image.

19. Shadow Effect. Lets have some fun with that title. With the text layer selected (not the text itself) go to
Layer > Layer Style > Drop Shadow. This opens the Layer Style palette. Notice the options other than Drop
Shadow listed down the left side of this palette. Play with the different styles to add some flair to your title.

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

11

Saving a Photoshop File

20. Save File. Looks good, now we need to save the file. First, lets save our Photoshop work so we can
change it later. File > Save As and choose Photoshop .PSD from the format dropdown. Fill in any name you
wish for the file name and hit OK.
When saving as a Photoshop format, you may see the option to Maximize Compatibility. If you see this
option, say yes. This will allow older versions of Photoshop to open your file.
21. Save File. Now lets save the image as a .jpg so we can use it in PowerPoint or other applications. File >
Save As and choose JPEG from the format dropdown. Fill in any name you wish for the file name and hit
OK. You will see a JPEG Options window pop up, allowing you to choose how much quality (at the expense
of file size) you wish for this image. Somewhere between 8 and 10 is a good choice.

12

Photoshop Resources
Adobe Photoshop is constantly changing and there is a huge variety of great free walkthroughs and tutorials
online. Additionally, we offer a few other guides for various Photoshop tools and abilities.
x

Adobe Photoshop Guide - Selections: can be used to modify specific areas of a digital image, make
more accurate selections within an image, and modify an image without affecting the original. In a
similar fashion, adjustment layers allow users to dramatically alter the color settings of a digital image
without changing the original.
Adobe Photoshop Guide - Clone Stamp Tool: allows dramatic restoration and altering abilities, and
the healing brush, which allows pixels to be blended with pixels in a different area of the image.

Support Contact: Specialist Daniel Gibson (gibsondv@etsu.edu; 439-8244)

13