M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

PHOTOSHOPI n t r o d u c t i o n t o P h o t o s h o p

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

A B O U T

Adobe Photoshop is a graphics editor developed and published

by Adobe Inc. for Windows and macOS. It was originally created

in 1988 by Thomas and John Knoll. Since then, this software has

become the industry standard not only in raster graphics editing,

but in digital art as a whole. You can use Photoshop for almost

any type of image editing, from touching up photos to creating

high-quality graphics.

We will be using Photoshop to create graphics for a variety of

projects.

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

G E T T I N G S T A R T E D

There are many options to learn in Photoshop, most come from practice and trial and error. While this class doesn’t spend much time on the

creation of images, it is important to have some basic skills in image creation and manipulation to make your Web pages more colorful and

effective. The Web is full of images. You should make every attempt to create your own images, photos and graphics. But if you wish to use

an image from the Web, make sure they are copyright free and that you give credit to the source. You can use the Google Image search to

find images of a certain size, color and usage rights. Images you find on the Web will be at Web resolution (72ppi), so you can’t make them

larger or use them effectively in print.

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

C R E A T I N G A F I L E

When you open Photoshop, go to File > New

Here you will make a few changes. Where it

says Untitled, go ahead and name it

something relevant to whatever you will be

creating.

You will see two boxes for width and height,

make the appropriate size changes based on

what you’re creating. Make sure you’re using

pixels and not percent, inches, etc.

The resolution should be set to 72 since we

are creating graphics for the web.

Now click Create

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

R E S O L U T I O N

When a file comes from a digital camera or from the Web, in most cases the resolution shown will be 72 ppi, the monitor's resolution.

You will optimize your images by sizing them at the screen resolution 72 ppi. If you are planning to print the image, you will need to

save at 120dpi or above, but that is a function of the original image and the media to which you are printing. Resolution can be held

constant in a function with Height and Width. If an image has 2.1M pixels in it, and it is displaying at 10x14 on your screen, you can turn

off the resampling features in Photoshop’s Image, Image Size feature. This will retain the original quality of the image while you adjust

resolution, height and width. Turn on resample when scaling down the image.

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

T O O L B A R

The tools on the left toolbar give you several options for Selecting, Cropping and Coloring

and much more.

The Move Tool allows you to drag different layers wherever you want

The Select Tool has several shapes for selecting sections

The Crop Tool allows you to trim the edges of the image

The Paint Tool will change colors in your image where you select it

The Lasso Tool will let you freehand draw what exactly you would like to select in the image

The Text Tool allows you to add text to your image

Move Tool

Crop Tool

Select Tool

Paint Tool

Lasso Tool

Text Tool

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

U N D E R S T A N D I N G L A Y E R S

In Photoshop, your graphics will be made up of a variety of layers. Some of these layers

could be a background, a text layer, an image layer, etc. These layers stack on top of

each other based on where they sit in the layers panel. For example, my background is

the bottom layer, that means any layers I have above it will display on top of the

background.

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

M A K I N G A D J U S T M E N T S : I M A G E S I Z E

To change the size of the image, go to Image > Image Size. Here you can change the size of the image and the resolution. Make sure

you are looking at the picture at 100% to make sure you are viewing the actual size.

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

M A K I N G A D J U S T M E N T S : T O N E , C O L O R , B R I G H T N E S S , E T C

To change some of the settings, go to Image > Auto Tone, Color and Contrast options. Check how these look before and after using

them. If you don’t like the results, simply click Undo under Edit

If you need to make manual adjustments, you can use other tools under Adjustments to change the Brightness, Hue/Saturation, etc.

You will need to work with these to get the desired results

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

A D D I N G T E X T

To add text to a photo, simply click on the Text tool (has an “T” on it). You can start typing right on the image. Select the text to

highlight and use the tools on the top toolbar to change the color, size, and font. Photoshop automatically puts text in a separate layer.

You can use the Move tool (top right tool with cross on it) to move the entire layer around.

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

A D D I N G E F F E C T S T O A L A Y E R

Once you have different components in your graphic, you may want to add some effects

to different layers. Photoshop has a variety of effects you can add to images and text

layers. To view the effects, click on the ‘fx’ button that’s in the layers panel

Whichever layer you would like to add the effect to, make sure you select it in the layers

panel, and then click on the ‘fx’ button

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

E F F E C T S

Bevel and Emboss gives your layer a three dimensional look

Stroke adds a border around your layer

Inner Shadow adds a shadow inside your layer

Inner Glow adds a glow inside your layer

Outer Glow adds a glow outside your layer

Drop Shadow adds a shadow effect to your layer

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

S A V I N G A F I L E

When you are finished with your graphic, you can save it by using

the File > Save As feature. You want to make sure to save this as a

Photoshop file, the extension will end in .psd

You won’t use the PSD on the web, but you will be able to access it

later if you want to make changes to your graphic.

To save your graphic to upload on your website, you will go to

File > Export > Save for Web. This brings up a box that allows you

to select the file type. If you have a graphic with a transparent

layer, save it as a PNG-24. Otherwise, save it as a jpeg. When

you’ve selected the appropriate file extension, click Save.