UNIT-II

INTRODUCTION TO PHOTOSHOP
Learning objectives

 To understand the basics of Images

 To Know the Photoshop 6.0 Interface, basic tool
box , various palettes
 To learn the operations performed on images
like change of color settings, merging layers,
using layer styles, resizing images, changing
resolution etc
 To understand how to create animation
 Image basics
Computer graphics fall into two main categories--bitmap and
vector.
Bitmap images--technically called raster images--use a grid
of colors known as pixels to represent images. Each pixel
is assigned a specific location and color value.
Vector graphics are made up of lines and curves defined by
mathematical objects called vectors.
Vector graphics are resolution-independent--that is, they
can be scaled to any size and printed at any resolution
without losing detail or clarity. As a result, vector graphics
are the best choice for representing bold graphics that
must retain crisp lines when scaled to various sizes--
for example, logos.
 Image basics
Image attributes
 Image Size – pixel dimensions - The size of the image measured in
pixel dimensions is the number of pixels along the width and number of
pixels along height. Ex: 640x480 image, 1024x768 image
 Image resolution - The number of pixels displayed per unit of printed
length in an image, usually measured in pixels per inch (ppi). Ex: 72 ppi,
81 ppi etc.,
 Color model - A color mode determines the color model used to
display and print images. Ex. RGB, CMYK
 Color depth - The number of bits per pixel of a color image. Ex:16 bit,
24 bit, 32 bit etc.,
 Image File size - The digital size of an image, measured in kilobytes
(K), megabytes (MB), or gigabytes (GB). File size is proportional to the
pixel dimensions of the image.
 File Format
 Palette
 Image basics
 File Format - Photoshop has support for the following
file formats. PSD (photoshop native file format), BMP,
GIF, PICT, TIFF, Photoshop EPS, Photoshop PDF, JPEG,
Pixar, PNG, RAW, Targa etc.,
 Palette - A number of palette types are available for
converting an image to indexed color.
Ex. Exact, System(Mac), System (windows), Web,
Uniform, perceptual, selective, Adaptive, custom, previous
etc.,
Knowing the Photoshop Interface
 Knowing the Photoshop Interface
Palette: Palettes help you monitor and modify images. By default,
palettes appear stacked together in groups. The palettes are Layers,
Channels, Paths, History, Actions, Color, Swatches, Styles, Navigator
and Info.
 Knowing the Photoshop Interface
As soon as you select the ‘new’ from the ‘file’ menu
the ‘new’ dialog box appears as below.

Information about the current file size and other features of the
image is displayed at the bottom of the application window.
 Color palatte
The color palatte appears as below.

The color picker dialog appears as

below.
New color

Previous color
Selection Closest Web safe
color

Color field
Hue
Color slider (hue)

Red

Green
Blue

Hexadecimal
Only Web
Colors
 Using Layers
Layers allow you to work on one element of an image without
disturbing the others. In addition, special features such as adjustment
layers fill layers, and layer styles let you create sophisticated effects.
 Using Layers

These icons allow you to (left to right) work with layer effects, add
a layer mask, group layers into sets, create adjustment layers,
create a new ordinary layer, and delete layers.
 Using Layers

The blending mode specified in the options bar controls how pixels
in the image are affected by a painting or editing tool. It's helpful
to think in terms of the following colors when visualizing a
blending mode's effect:
• The base color is the original color in the image.
• The blend color is the color being applied with the
painting or editing tool.
• The result color is the color resulting from the blend.
 Using Layers
Some of the blending modes available are
Normal, Dissolve, Darken, Multiply, Color Burn etc.,
Layer effects and styles: Photoshop provides a variety of effects--such as
shadows, glows, bevels, overlays, and strokes--that let you quickly change
the appearance of a layer's contents.
 Using Layers
You can manage layers, move copy or transform layers, merge
layers etc.,
 Creating new images
1. Do one of the following:
• To base the image dimensions and resolution (Photoshop) on the
Clipboard contents, choose File > New. If the Clipboard does not contain
image data, the image dimensions and resolution are based on the last
image you created.
• (Photoshop) To base the image size on the default dimensions
and resolution or the last entered settings, hold down Alt when you
choose File > New.
2. If desired, type a name for the image, and set the width and height.
3. Set the resolution and mode.
 Creating new images
4. Select an option for the contents of the background layer (Photoshop)
of the image.
• White to fill the background or first layer with white, the default
background color.
• Background Color to fill the background or first layer with the
current background color.
• Transparent to make the first layer transparent, with no color
values. The resulting document will have a single, transparent layer as
its contents.

You can import scanned images directly from any scanner that
has an Adobe Photoshop-compatible plug-in module or that supports the
TWAIN interface.
 Brushes
The brush you select determines many characteristics of the
resulting stroke. you can also create custom brushes using the Brushes
palette. The Brush pop-up palette in the options bar for the painting and
editing tools lets you view, select, and load preset brush tips.

Brush tips
 Brushes
The Diameter Controls the size of the brush. Enter a value in pixels or drag
the slider.
Angle Specifies the angle by which an elliptical or sampled brush's long axis
is rotated from horizontal.
Roundness specifies the ratio between the brush's short and long axes.
Hardness controls the size of the brush's hard center.
Spacing controls the distance between the brush marks in a stroke.
 Brushes
Brush Dynamics: The Brushes palette provides many options for adding
dynamic (or changing) elements to preset brush tips. For example, you can
set options that vary the size, color, and opacity of brush marks over the
course of a stroke.

Paint Brush tool: The Brushes palette provides many options for adding
dynamic (or changing) elements to preset brush tips. For example, you can
set options that vary the size, color, and opacity of brush marks over the
course of a stroke.
 Brushes
Paint Brush tool: Wet edges apply paint that acts more like watercolor paint
or markers. When you paint with a soft brush, the paint is more translucent
in the center of the stroke and darker along the edges of the stroke. With a
hard edge brush at 100% opacity, the paint still has some translucency, just
as markers or watercolor paints would have.

Air Brush tool: The airbrush tool works more like a traditional airbrush or
spray paint. The airbrush puts paint on a bit lighter than the paintbrush
tool. The airbrush is especially useful for painting subtle shading and highlights.
 Brushes
Pencil tool: This tool is shared with the Paintbrush and the shortcut key is
B.

History and Art History Brush tools: The history and art history brush are
tools that help create some fantastic effects. To work with these tools
you will need to have the history palette open.

The history brush tool lets you paint a copy of one state or snapshot
of an image into the current image window. This tool makes a copy,
or sample, of the image and then paints with it.
The art history brush tool lets you paint with stylized strokes, using
the source data from a specified history state or snapshot.
 Grids and Guides
Guides appear as lines that float over the entire image and do not print.
You can move, remove, or lock a guide to avoid accidentally moving it.
In Photoshop, a grid appears by default as nonprinting lines but can also be
displayed as dots. The grid is useful for laying out elements symmetrically.
 Scaling or resizing images
When an image needs to be resized in Photoshop the image size,
the resolution, or a combination of both must be changed. There are two
menu options that handle this. The Image Size menu option allows new
image size dimensions to be specified, or a new resolution to be created.
The Canvas Size option allows the existing image to remain, while
appending or removing areas from it according to the dimensions entered.
 Screen Capturing
“capture” image that appears on screen
Works like copy and paste
Press Print Screen button to copy screen
contents
Paste into new image
Press Alt+Print Screen to capture active window
 Styles Palatte
The Styles Palette contains prepackaged and custom Styles that
can be applied to shapes, layers and text.

To apply a preset style to a layer, do one of the following:

Click a style in the Styles palette to apply it to the currently selected layer.
Drag a style from the Styles palette onto a layer in the Layers palette.
Drag a style from the Styles palette to the document window, and release the
mouse button when the pointer is over the layer content to which you want to apply
the style.
Double-click a layer thumbnail in the Layers palette, and click on the word Styles in
the Layer Styles dialog box (top item in the list on the left side of the dialog box).
Click the style you want to apply, and click OK.
When using a shape or pen tool, select a style from the pop-up palette in the
options bar before drawing the shape.
 Creating animations using
Photoshop and Image Ready
 Creating animations using
Photoshop and Image Ready
Shown in the previous slide is the Adobe Image Ready program
interface. This is used for creating animations and optimizing them for the
web.

There are also some changes to the Palettes. Instead of a Navigation Palette,
we have an Optimize Palette where we set our Compression settings. We
also have a Rollover, Animation, Image Map, and Slice Palette.

Seven steps to construct an animation

 Creating animations using
Photoshop and Image Ready
Seven steps to construct an animation

1. Create basic image (or open an existing multilayered image)

We will construct a simple image, a sign that says
"WELCOME", using the Toolbox.
• First, select File>New
• In the dialog box that opens set: Name: Welcome, Image
size: Width 200, Height 40, and Content: transparent
 Creating animations using
Photoshop and Image Ready
Click "OK"
Select the Text Tool in the Toolbox and click the blank transparent
image. Type "WELCOME" at the cursor on the image. We want to use a
30 px Bold Arial font so enter the values below in the Type Tool palette
and change the foreground color to green.

After achieving the desired font and color the Move tool can be used to center the
text in the image. This is the basic image we will use to form the animation.
 Creating animations using
Photoshop and Image Ready

2. Add animation frames

A thumbnail of the basic image should be located in the
Animation palette. The initial frame needs to be duplicated several times.
This is done by clicking the "Duplicate Current Frame" icon . The result
should look like
 Creating animations using
Photoshop and Image Ready
3. Make changes in frames using Layer palette
Changes will be made in the first and third frames to create the animation.
In the third frame we will change the opacity so the "WELCOME" message
fades away. We will change the first frame so that the message will move
"onstage" from the left side to the center.
Select the third frame. Then in the Layer palette move the opacity slider to
0%.

The message in the third frame should now be invisible.

 Creating animations using
Photoshop and Image Ready

Now select the first frame. Using the Marquee tool (from the toolbox)
select the text "WELCOME". Then, using the Move tool, move the
selection just off the left edge of the image. The image below shows the
text partly moved.
 Creating animations using
Photoshop and Image Ready
4. Add frames with Tween
We now have three frames where the message is visible in the 2nd
frame, but invisible in the 1st and 3rd. We will use the Tween Command
to fill in frames to create the desired actions.
First we will add frames between the 2nd and 3rd frames that will cause
the message to fade away. Select the 2nd frame. Open the Animation
palette menu (by clicking the small triangle in the upper right of the
Animation palette) and select Tween.

In the Tween dialog box select to add 6 frames,

Tween with Next Frame, and select Opacity to
vary.
 Creating animations using
Photoshop and Image Ready

Clicking "OK" should add 6 more frames.

It only remains to set the delay between frames.

 Creating animations using
Photoshop and Image Ready
5. Add delays between frames
Go to the Animation menu and choose Select All Frames. This will highlight all
the frames. Alternately, the (number on the) first frame can be clicked and the
last frame can be shift+clicked. With all the frames selected click the small
down triangle to the right of sec at the bottom of one frame. Choose a delay,
for example, 0.1 seconds. This is applied to all the selected frames. To set the
delay for a single frame, for example Number 7, select it alone and change its
delay.
6. Preview animation
To view the animation go to File>Preview. It is good to check what the
animation looks like in all the popular browsers.
7. Save animation
The layered animation is saved as a .psd file using File>Save Original. To save
it as a gif animation use File>Save Optimized. An HTML file which includes the
code for placing the animation on a web page can also be generated by going
THANK YOU