IT 6317- Web Enhanced Animation Graphics

1
Week 4: Creating Images for the Web

Module 5: Creating Images for the Web

Course Learning Outcomes:

1. Differentiate Adobe Photoshop and Illustrator
2. Discuss the advantages and disadvantages of Adobe Photoshop and Illustrator
3. Save Images for the Web
4. Reduce and compress image for the Web

What Is Adobe Photoshop?

Adobe Photoshop is a great program to change images or graphics that have already been made, such as
photographs, and is the most popular program for Adobe. Editing photos in Photoshop is amazing because
it includes many unique filters, special effects, and tools.

Pros of Adobe Photoshop software:

• Photoshop is also a popular choice for web graphics, image editing and designs as these projects
can stay fixed in size
• Another great advantage of Photoshop is that you can have complete control of your projects as
you can edit your pixel-by-pixel graphics
Cons of Adobe Photoshop software:

•Raster or bitmap graphics are created in Photoshop and sometimes these graphics may look a bit jagged
as raster images consist of individual colored squares, known as pixels. Everything in Photoshop is just a
collection of pixels, so it can lose its value very easily if you're scaling it up or down.

Image Capture

A digital single-lens reflex (DSLR) camera, whether mirrored or mirrorless, is the best way to capture high-
quality images for the web. Today's semi-professional and advanced amateur cameras typically capture
20–36 megapixels (MP), and as new cameras are introduced each year, the megapixel capacity increases.

Camera raw format captures the camera's full megapixel and density range, but the web rarely needs such
large images. In reality, loading times can be detrimental to them. For each camera manufacturer and
model, Camera Raw includes both proprietary formats as well as the universal digital negative (DNG)
format.

Course Module
 “Toning” Images

If you have a bracketed set of exposures, several of Photoshop's features are useful to select the best picture
and to prepare it for publication.

The value of an image on a large-screen computer monitor is obviously easier to see than on the 3-inch
display of a camera. However, by reading highlights and shadow values, Photoshop and other programs
also allow you to compare photos "by numbers."

A systematic approach to photo toning was developed by the lithographic printing industry, focused on the
largest and smallest halftone dots that a press would usually minimize. Many presses will replicate a 3
percent highlight point and a 97 percent shadow point, calculated on a scale of 0–100 percent dot area.

Monitors view color on a scale of 0–255 levels for objects on the Internet, with level 0 being black and level
255 being white. Applying the minimum to the level scale of 3-97 percent: 3 percent of 255 is 7.65 or 8
when rounded; 97 percent of 255 is 247.35 or 247.

Highlight Shadow
% Dot Area for Print 3% 97%
Levels for Web 247 8
Table 5.1 Highlight and Shadow Dot Values
(Image taken at https://www.oercommons.org/courses/web-design-primer/view)

Make sure the file has no levels above 247 or below 8 to select the best exposure from a bracketed
sequence. You can further "level" the image by changing highlight, shadow, midtone, gray balance, and
color after selecting the best picture from a bracketed series.

Figure 5.1 Original (left) and toned (right) images. On the right-hand image, highlight and shadow were set at 247 and 8 levels, respectively,
to bring out the maximum contrast in the image.
(Image taken at https://www.oercommons.org/courses/web-design-primer/view by Richard Adams. Image licensed under CC BY 4.0. )
 IT 6317- Web Enhanced Animation Graphics
3
Week 4: Creating Images for the Web

Making Transparent PNG Files

Save the image as a clear background PNG file if your image includes one or a group of subjects that you
want to publish on the Internet without the context.
Next, create a path to pick theobject(s) that you want to isolate from the context. Then right-click on the
selected topics and select "Cut New Layer." Select the context layer and set 0 percent transparency. Save
in Photoshop for the Internet, test the choice for Transparency, and check in the preview.

Figure 5.2 Making a transparent PNG file by selecting the object, bringing it to a new layer using “New Layer via Cut,” deleting the
background, and Export > Save for Web with Transparency checked.
(Image taken at https://www.oercommons.org/courses/web-design-primer/view by Richard Adams. Image licensed under CC BY 4.0. )

Saving Images for Web

Once an image is opened and edited in Photoshop, it can be saved in a web-specific format (JPG for photos
and PNG when transparency is required) using the Export > Web Save feature. Includes image format,
transparency, width and resolution settings in this dialog box.

Course Module
Figure 5.3 Photoshop’s Export > Save for Web dialog box offers the opportunity to customize the image format (upper right corner) and size
(lower right) and also includes a prediction of download time (lower left) at various internet bandwidths.
(Image taken at https://www.oercommons.org/courses/web-design-primer/view by Richard Adams. Image licensed under CC BY 4.0. )

Compress Images For Web

Apps for image compression are the easiest way to reduce image file size. These tool types remove
hidden image file data such as additional color profiles and unnecessary metadata (such as geolocation of
where the photo was taken). These tools provide a quick and easy way to reduce files size without losing
any image quality.

Reduce Image Size

Depending on the software you choose to use and your personal preference, you can
• Reduce the size of the picture before saving
• Reduce the size of the image before saving the image
• Save the image, then reduce the size of the image.

How to Reduce the Size of an Image Using Photoshop

For Photoshop, the method of reducing the size of an image is only slightly different from when it is
enlarged. One may need to reduce the size of an image because the resolution is too high for the internet,
the size of the file is too big for e-mail, or for a printed piece only a small image is required.
 IT 6317- Web Enhanced Animation Graphics
5
Week 4: Creating Images for the Web

1. With Photoshop open, go to File > Open and select an image

Figure 5.4 Sample Image

(Photo taken at https://guides.lib.umich.edu/c.php?g=282942&p=1888161)

2. Go to Image > Image Size

Figure 5.5 Setting the Image Size

(Photo taken at https://guides.lib.umich.edu/c.php?g=282942&p=1888161)

3. An Image Size dialog box will appear like the one pictured below.

Figure 5.6 An Image Size Dialog box

(Photo taken at https://guides.lib.umich.edu/c.php?g=282942&p=1888161)

Course Module
4. Enter new pixel dimensions, document size, or resolution.
The original picture is 300ppi. Let's say we want to put this picture on our website, so we want it
to be just 600x 400 pixels and 72ppi resolution. First, we can change the resolution by typing in 72
and then, by entering 600x 400 as width and height, we can change the pixel dimensions.

Figure 5.7 Setting the pixel dimensions, document size, or resolution.

(Photo taken at https://guides.lib.umich.edu/c.php?g=282942&p=1888161)

5. Select Resampling Method

By selecting a Resampling Method, we are telling Photoshop to alter pixel information in a way that
will produce the best results when reducing image sizes.
Bicubic (best for smooth gradients) - Very precise method that calculates the averages of
surrounding pixels.
Bicubic Sharper (best for reduction) - Based off of Bicubic sampling and works best when
reducing images while keeping detail sharper. If image appears too sharp, Bicubic is recommended.

Figure 5.8 Selecting Resampling Method

(Photo taken at https://guides.lib.umich.edu/c.php?g=282942&p=1888161)
 IT 6317- Web Enhanced Animation Graphics
7
Week 4: Creating Images for the Web

6. Click OK to accept the changes.

Figure 5.8 Selecting OK to save changes

(Photo taken at https://guides.lib.umich.edu/c.php?g=282942&p=1888161)

Save Image Appropriately (Save For Web)

A special command called "Save For Internet" is available in Photoshop, which optimizes the image file
for online display. This is relevant because the standard command "Save" can end up creating file sizes 2-
3 times larger than the command "Save For Internet."

In the “Save For Web” box, we need to make a few selections.

• Image Type: The file type will affect the output file quality and size
• Image Quality: This is critical and can have a significant impact on the final file size
• Dimensions: This changes the picture dimensions.

Non-Destructive Editing

Photoshop allows users to change the tone and color of images, along with the pixel data, as a bitmap
image editing program. This is called disruptive editing due to the modification of the initial
characteristics.

Non-destructive editing is done through layers and masks and preserves information about the
original pixels.

1. Making a record. Non-destructive edits provide a step-by-step record of changes, enabling

you to return to them later. This may be useful in editing for a client to show what edits have been
made and to justify the time spent doing them.

Course Module
 2. Function more efficiently. Editing across layers and masks allows you to coordinate editing,
see what you're doing, and work faster and more efficiently.

Tools for Non-Destructive Editing

Layers. The application of edits to Photoshop Layers is a fundamental concept of non-destructive editing.
Adding a layer is like placing a clear plastic overlay on top of a photo print and editing on the plastic. The
edit layer effects can be applied to thelayer(s) below, then switched on and off to view the photo with and
without the edits.

Layer Masks. A layer mask goes with a layer and can hide or show some or all of the layer's effects.

Adjustment Layers. This type of Layer applies Image > Adjustment effects, such as Brightness/Contrast,
Levels, Curves, and others, via a Layer, so that changes are non-destructive.

Layer Styles. A layer style adds effects like a drop shadow, emboss effect, gradient, or other effect to
another layer.

Smart Objects. These include images placed and components of images whose original pixel data after
editing is preserved. Let's say you're putting a logo or other image in an existing image and then wanting
to shrink it. If converted to a Smart Object for the first time, Photoshop will retain all the pixels in the
original logo in order to be later enlarged.

Smart Filters. These are filters applied to smart objects in order to remove or modify the filter's effects
later on.

Content Awareness. A form of artificial intelligence, the awareness of content examines and uses
neighboring pixels to fill spaces, move objects, and resize images.

Figure 5.9 People were removed from this beach scene using Photoshop’s Content Aware Fill feature. Marquis were drawn around each
object to be removed, then Edit > Fill was selected and set to Content Aware.
(Image taken at https://www.oercommons.org/courses/web-design-primer/view by Jason Lisi )
 IT 6317- Web Enhanced Animation Graphics
9
Week 4: Creating Images for the Web

Tips for Non-Destructive Editing

1. Duplicate a Layer. The fastest non-destructive way of editing is to duplicate the background layer
into which the photo is opened. To duplicate it, simply drag the layer into the New Layer icon in the
Layers palette. Or select the layer and select Duplicate Layer from the Layers menu or from the
Layers palette's top-right popup menu.
2. Retouch through a Layer. The Clone Stamp, Healing Brush, and Spot Healing Brush tools can be
applied through a layer when retouching defects, artifacts, or unwanted features of an image. Simply
check "Sample All Layers" or in the Properties menu, select "Current and Below."

Retouching Tools that Work through Layers

Clone Stamp Tool Duplicate pixels from another area

Healing Brush Tool Automatically fix artifacts in image by painting over

them

Spot Healing Brush Automatically fix artifacts in a specific area

Tool
Table 5.2 Retouching Tools that Work through Layers
(Table taken at https://www.oercommons.org/courses/web-design-primer/view)

Table 15-3. Retouching Tools that Don’t Work through Layers (duplicate layer

first)

Content-Aware Fill Fills an area using pixels within proximity

Content-Aware Moves selected pixels and replaces them automatically

Move

Content-Aware Scales selected pixels while automatically filling empty

Scale pixels
Table 5.3 Retouching Tools that Don’t Work through Layers (duplicate layer first)
(Table taken at https://www.oercommons.org/courses/web-design-primer/view)

3. Use an Adjustment Layer to Change Tone or Colour. Use an Adjustment Layer to make these changes
non-destructive to enhance contrast, illumination, highlight, shadow, gray balance, limited color
correction, and other adjustments.
4. Apply a Layer Effect. Layer effects make it easy to incorporate in a non-destructive manner a color
mix, metallic effect, fall shadow, and many others.

Course Module
5. Use a Layer Mask. A layer mask covers, exposes, or changes the corresponding layer's appearance.
Example: The color can be selectively added using a layer mask when you add a color fill to a layer.
The effect of the corresponding surface is negated by painting or filling with black while the effect
is restored by painting with white or the Eraser Device.
6. Use a Smart Layer for Filters. Photoshop has hundreds of filters that can add noise, sharpen, smooth,
and otherwise change the picture appearance. Using them as Smart Filters on a Smart Object retains
the object or layer's original appearance.

Layer Types In Photoshop

Type Purpose
Layer Holds visual contents
Layer Mask Obfuscates content from layer
Layer Effect Applies an effect to the later
Adjustment Layer Changes the visual properties of the layer
Overlay Blends layer content
Table 5.4 Layer Types in Photoshop
(Table taken at https://www.oercommons.org/courses/web-design-primer/view)

7. Place Smart Objects for Resizing. Photoshop maintains all the pixels in the original when another
file, such as a logo, is inserted in an existing folder as a smart object and resized. This allows
changing the size without loss of information.
8. Use Content-Aware Scale to Resize. Content-Aware Scale uses one of several content-aware features
to scale frames while retaining the original artifacts of the scene.
9. Use Content-Aware Fill to Remove. This function is useful to delete objects from scenes like beach
men. Using Edit > Fill > Content-Aware to choose the object(s) with one of the selection methods.
10. Use Content-Aware Move to Move. Instead of deleting an object, if you want to relocate an object,
the Content-Aware Move tool will examine surrounding pixels near the source and destination to
blend the moved object(s) with the new background.

This neon type effect was created from a path using Layer Styles. Photo taken from
(Image taken at https://www.oercommons.org/courses/web-design-primer/view by Richard Adams licensed under CC BY 4.0)
 IT 6317- Web Enhanced Animation Graphics
11
Week 4: Creating Images for the Web

Adobe Illustrator

Adobe Illustrator is a popular program for vector-based editing to create icons, illustrations, cartoons, and
fonts. Illustrator uses mathematical constructs to create vector graphics, unlike Photoshop, which uses a
pixel-based format. What's an Illustrator vector? It is a line consisting of two dots connected by a computer
algorithm, rather than a line of pixels. Illustrator is often used for creating logos or anything that might
need to be printed or displayed in different sizes because of vectors.

Pros of Adobe Illustrator Software:

 A graphic vector will never lose its quality if it is scaled up or down

 Illustrator will also give you a better print output because it does not depend on resolution.
Cons of Adobe Illustrator Software:

• Images that are already produced can not be easily modified as there are minimal filters and image editing
software at your fingertips.

Using Photoshop and Illustrator Together

You'll find that some people just prefer to use one software over another, but sometimes it's best to work
together with Photoshop and Illustrator. You might need to add some text to a picture you need to edit, for
instance.

You may need to add a watermark to your blog photo or over a portfolio image. It's best not to add any text
to an image in Photoshop since it can distort, so transferring the edited photo to Illustrator and then adding
the text there will give you the best result.

Of course, one program is no better than the other, they're just different. Understanding Photoshop vs.
Illustrator will help you make your next project's best software decision.

References and Supplementary Materials

1. Christopher Schmitt ; 2012; Designing Web and Mobile Graphics: Fundamental
concepts for web and interactive projects (Voices That Matter) 1st Edition; New Riders
2. Kirupa Chinnathambi; 2013; Animation in HTML, CSS, and JavaScript 2nd Edition;
CreateSpace Independent Publishing Platform

Online Supplementary Reading Materials

1. Web Design Primer; https://www.oercommons.org/courses/web-design-
primer/view, November 4, 2019

Course Module
2. https://www.tutorialspoint.com/html_online_training/index.asp, November 4, 2019
3. CSS Tutorial, https://www.w3schools.com/css/, November 4, 2019
4. https://www.pluralsight.com/blog/creative-professional/whats-difference-
photoshop-illustrator, November 5, 2019
5. https://www.abetterlemonadestand.com/optimizing-images-for-web/, November 5,
2019