Johnson

Using Photoshop to Create Images for the Web

What is Photoshop?
Photoshop is a program that allows you to create and edit images (photos, graphics). You
can use it to tweak photos (lighten, darken, crop, add special effects, etc.) as well as
create graphics such as page banners, navigation buttons and even animation.

Photoshop offers a lot of high-end features aimed at professional photographers and

graphic designers. But, we’ll be sticking to the basics in this introductory tutorial.

In this tutorial you will learn:

1. How to resize, crop and correct photos for use on web pages.
2. How to create graphical elements for use on web pages: page banner, text, etc.

Some General Tips

1. You will find the photos for this tutorial in a folder called “Photoshop Practice.”

2. As you work through the tutorial remember that you can use “undo” if you make
a mistake or want go back. (Hit the control key, type Z or click Edit > Undo in the
menu. You’ll also learn to use the “History” palette to undo multiple steps at
once.)
 Photoshop’s Interface

Photoshop is an Adobe product. If you have used other Adobe products the interface
should seem familiar. The desktop includes a toolbox on the left and numerous palettes
on the right-hand side of the screen. Context-sensitive menus appear at the top of the
screen depending on which tools you’ve clicked on.

Panels

Toolbox

2
The Toolbox
There are many buttons in the toolbox, however, we will focus on just the few that we
need to get the job done. Here are the tools that we care about:

Select

Crop

Type Tool

Magnifier

Images and Graphics

There are two formats to keep in mind when you are creating art for web pages: .
jpg and .gif.

It’s likely you’ve seen these file types. What are they?

.jpg = A type of file usually reserved for photos. Allows photos to be compressed for
easier download online. Smaller file sizes equal faster downloads!

.gif = A file type usually reserved for graphics

(Used for maps, charts, cartoons, drawings, and text.)

Yes, you can save a graphic as a .jpg file or a .gif file as a .gif as a .jpg, but you’ll get
better results if you use the .jpg format for photographs.

3
File Format Examples:

google.gif

.gif: Good for graphical text, drawings,

infographics.

china.jpg

Jpg or Jpeg: Good for photographs

Sizing Photos for a Web Page

When you use photos on a web page they will need to be resized to fit your page and
“compressed” so that they can download quickly.

Images are measured in “pixels.” Example: 300 pixels (wide) by 200 pixels (deep).

300 x 200

A photo is made up of tiny, multiple squares called pixels. An image can contain millions,
thousands, hundreds or just a few pixels. The more pixels an image contains, the more
detail it has and the bigger its file size.

One Square = 1 Pixel

4
Photo file sizes are measure in “Kilobytes.” In general, you should try to keep your photo
file sizes to 40 KB or below for web use.

Take a look: Call up boston.com, right-click on a photo, choose properties and look at
the specs for the photo size (pixels) and file size (kilobytes).

Resizing and Compressing a Photo

Many times you’ll start out with a photo that’s too big for your web page. To use it you’ll
need to open it in PhotoShop, resize it and save it as a compressed image.

Let’s practice resizing a photo.

Open the file called “satellite.jpg.”

Tip: Sometimes a photo is too big for all of it to show up in your window. To quickly
change the view, hold down the “Alt” key on your keyboard and press the “+” key on the
number keypad to increase the file view or the “-” to reduce the file view.

Practice zooming in and out.

Before Zoom Out – 100%: partial frame After Zoom Out – 33%: full frame

Also note that the Navigator palette will quickly zoom an image as well. Try using the
slider to change the zoom:

You can also use the magnifier in the

toolbox to zoom.

Tip: to zoom in on a specific area, use the

magnifier to draw a box around it.

5
Next, let’s try resizing the photo:
Step 2:
Step 1 Under Pixel Dimensions:
Click Image > Image Size
You’ll see settings for the
Width and Height of the
image.
Next to that is a drop-down
that you can set at either
“Percent” or “Pixels.”
Make sure it’s set to pixels.
Step 3:
Change the width to 800
pixels.
Note that the height
automatically changes, too.
That’s because “Constrain
Proportions” is checked.
The other setting that we
care about: Resolution.
Make sure it’s set to 72 DPI
6
Let’s see what happens when you change a picture size and don’t have “Constrain
Proportions” checked.

On the right-hand side of your

screen, you should see a
“History” palette.

(If you don’t, click Window >

History)

First, uncheck constrain
proportions, then change the
width to 400 pixels and click
“OK.”
Pretty ugly. It’s Every time you complete an
resized the width, action on an image, it shows
but not the height. up here. This allows you to
step backward or forward.
Let’s undo that
using the “History To step back, simply click the
Palette” box just before “Image Size.”

Now, let’s resize the photo to be a specific width and save it for web use.

Let’s make it 300 pixels wide. Don’t forget to check “Constrain Proportions!”

7
To save the file, you’ll do something different than what you’d normally do to save a file.
Instead of clicking “File > Save As” you’ll need to choose “File > Save for Web &
Devices.” This is where you will configure the settings to compress the photo.

This will bring you to a screen that looks like this. Let’s do some setup so that we can see
the results of changing the compression settings.

Click the tab that says “2 up.”

8
Your original picture will be on the left, and a view of the compressed image will appear
on the right.

Now, let’s make sure that we’re saving the image as a .jpg.

On the right-hand side of the screen, make sure that “JPEG” is selected as shown:

9
Next, look below the lower left-hand corner of each image and you’ll see the file size for
the original versus the compressed photo. In addition, you’ll see a setting that will tell
you how quickly the file will download.

Let’s make this image even smaller. Go back to the settings in the right-hand side of the
screen and the dropdown box just below JPEG to “Medium” or “Low.” Note how the file
size changes and the impact on the quality of the image on the right-hand side versus the
original on the left.

Note that you can pan

around and zoom your
images using the toolbox
on the Save for Web
window.

The trick here is to create an image that’s small in size but still looks good. Try the
various settings to see how file size affects quality. Also note that you can bypass the
presets (Low, medium, high, etc.) and use the Quality setting to fine tune.

Click the “Save” button and save the file.

Tips on Pixel Size

Some “ballpark” file sizes:

Horizontal lead photo: 350-450 pixels wide.

Vertical lead photo: 300-400 pixels wide.

Smaller photos: 150-250 pixels wide.

Mug shots: 80-100 pixels wide.

10
Cropping

Photos can sometimes benefit from a little judicious editing. For instance, this headshot
has lots of “white space” around it with details that aren’t really important. To crop out
extraneous details use Photoshop’s “crop” tool:

To do that,:

1. Click on the crop tool in the toolbox.

2. Draw a box around the area that you want to remain in the photo:

Double click anywhere inside the

crop box to apply the crop.

3. Note the little square boxes called “handles” on the edges of the “marquee” or box
that appears. Dragging one of the handles allows you to resize the crop. You can
pull left, right, up, down, etc.

(Note: Holding down the Shift key and dragging a corner will allow you to resize
“proportionally” or adjust the height and width simultaneously so that the image
does not get distorted. Try it for practice.)

4. Double click anywhere inside your crop to apply it.

11
Need to crop a photo to a particular size? Note that when you click on the crop tool, the
“context sensitive” menu at the top of the screen changes to allow you to enter settings:

Among the things you can set are a fixed height and width for the crop tool. So that
means that whenever you draw a marquee with the tool, it will only draw a box that’s the
width and height specified.

Let’s say that we know we want our mug shot to be 80x100 pixels. Enter those settings
and specify that you want your setting to be in pixels by adding “px” after the number
like this:

Now, try selecting the area that you want for the crop. You’ll note that the marquee that
you draw will be “constrained” or restricted to creating a box that’s 80 x 100 pixels.

Fixing Bad Photos

Have a photo that’s too dark? Too light? Not enough contrast or funky colors? Photoshop
is great for fixing up problem photos.

The program has many tools for improving photos, but we’ll focus on a few basics. If
you’re interested in more advanced features consult the program’s Help file.

Start by opening the file called badexposure.jpg.

Easy Method

If you’ve ever used a simple photo editing program you know that there’s usually an
“auto fix” button that adjusts brightness, contrast, etc., automatically. There are
equivalents to that in Photoshop, but also more powerful features.

To “auto fix” an image:

1. Click Image > Adjustments

You’ll see a variety of auto settings
that can be tweaked.

Try them out.

12
Advanced Methods

Undo your changes and try something a little more sophisticated.

The practice photo is badly exposed and lacks contrast. To fix it up, let’s use Photoshop’s
Levels feature.

To start, click Image > Adjustments > Levels:

The following window will appear. The thing that looks like a mountain range is called a
“histogram.” It’s a graphical representation of the highlights, midtones, and shadows in
the photograph. We can tweak these by dragging the sliders below the histogram.

Make sure that “Preview” is checked so that you can see your changes as you make them.
Try adjusting the highlights (white slider), shadows (black slider) and midtones.

Advanced Practice: Click Image > Adjustments > Curves and try dragging the diagonal
line on the chart around. Note the effect it has on your image.

Try other adjustments: Color Balance, Brightness/Contrast, Exposure, Shadow/Highlight.

13
Creating Graphical Text

Sometimes you’ll need to create elements such as page banners or text for a web page.

You can easily create these in PhotoShop. Let’s create a banner for our homepage.

We’ll create a banner that’s 800 pixels wide by 100 pixels deep.

Step 1:

Click File > New. The following window should appear:

Step 2:

Now enter the settings for your banner. Give it a name (banner), set the width to 800, the
height to 100. Make sure the resolution is set to 72, and for the background, click the
dropdown arrow and choose “transparent.” Your screen should now look like this:

14
Click “OK to create your banner file:

Now, let’s add some text. The name of our publication will be “The Daily News.”

To enter text you’ll need to click on the Text tool in your toolbox.

Once you’ve clicked the Type tool, the context sensitive menu will change. Here is where
you can set the font, size, color and other attributes for your text. Pick a typeface that you
like and a size (try 36 or larger). In this example the font is Verdana, regular (not bold or
italic type), the size of the text is large, 60 points, the color is set to black.

Once you’ve selected your text options, click once inside your banner and type in:
The Daily News:

15
Some tips:

Want to move your text around inside the box? You’ll need to choose the “select” tool in
the toolbox first.

Want to change the color, font, size, etc.? Make sure that you’ve selected the Type tool
first, then highlight the text that you want to change BEFORE you select changes in the
menu.

Advanced practice: Photoshop includes a “styles” palette that will apply features such as
drop shadows, colors and other effects. To try them, select your text and click on an effect
in the style palette. (Again, if you don’t see the palette, click Window, then Styles.)

Saving your Page Banner

To save your banner, you’ll repeat some of the steps you took to save a photo. But, you’ll
be saving your banner in the .gif format instead of .jpg.

Click File > Save for Web

This time, make sure the dropdown

is set to GIF.

In this case we’ll go with a Preset:

Gif 32 Dithered. That should work
fine for most gifs. You can tweak
these settings.

If you’re interested in learning

more about tweaking gifs, consult
Photoshop’s help file.

Practice: Try making some

smaller text headers that say
“News” “Features,” etc.

Make your files various sizes:

100x50 pixels, 80x25, etc.

16