Introduction to Multimedia & Photoshop (CSP-47)

PG DIPLOMA IN COMPUTER APPLICATIONS (PGDCA)

Fundamentals of PhotoshopBlock03

UNIT-01Introduction to Interface and layersUNIT-02Selection Tools

UNIT-03Image correction Tools

Adobe Photoshop CS6

Orissa State Open University Page 1

Unit Structure:1 Getting Started ...................................................................................................................................... 4

1.1 What Is Adobe Photoshop CS6 ..................................................................................................... 4

1.2 Carriers in Adobe Photoshop CS6 ................................................................................................. 4

1.3 Starting Adobe Photoshop CS6 ..................................................................................................... 5

2.0 Interface Layout (An Overview) ..................................................................................................... 6

2.1 File ..................................................................................................................................................... 7

2.2 Creating A New Adobe Photoshop File ................................................................................................ 7

2.3 Layers discussed In Depth ................................................................................................................. 9

2.3.1 Photoshop File Comprised Of Various Layers ............................................................................... 9

2.3.2 Hide A Layer In Adobe Photoshop File ..................................................................................... 11

2.3.3 Duplicate A Layer In Adobe Photoshop File ............................................................................... 11

2.3.4 Delete A Layer In Adobe Photoshop File ................................................................................... 13

2.4 Grouping Layers ....................................................................................................................... 14

2.5 How To Ungroup Layers ..................................................................................................................... 16

2.5.1 Link Layers .................................................................................................................................. 17

2.5.2 Unlink Layers .............................................................................................................................. 20

2.6 Layer Effects .................................................................................................................................. 21

2.6.1 Layer Mask ................................................................................................................................... 22

2.7 Create A New Fill Or Adjustment Layer ............................................................................... 24

2.8 How To Create A Pattern .................................................................................................................. 29

UNIT-01Introduction to Interface and layers

Adobe Photoshop CS6

Orissa State Open University Page 4

1 Introduction to Interface and Layers1.1 What Is Adobe Photoshop CS6

Adobe Photoshop CS6 is a powerful tool to

1. Create New Images :- New images can be created from scratch using the designers imagination

such as a person /place /thing that does not exist but is in you dreamed of it or combining

images from multiple sources to create a new one such us cropping your photograph from your

scanned photo to a place that you created such as living in a jungle.

2. Edit Existing Photographs :- People love to appear beautiful and handsome when it comes to

presenting their photographs. Photographs are edited using this software bringing the thoughts

and imagination to reality.

3. Edit Images :- Images can be edited to bring clarity and attraction in them.

4. Create Website Designs For Prototype Design and Web Development :- Before any development

a prototype of the website is prepared which involves the web designers and the business

analyst to carve the requirements of the website and presenting it to the client. The client

suggests changes in his/her requirements and accordingly the prototype is modified and run

before the client. This not only saves time but speeds up the work as the prototype that is

finalized is approved for development.

5. Add Images For The Website :- A website that is approved is a collection of webpages. A

webpage is a collection of images ,text and forms to view and enter data. Each webpage

comprises of images which are created by the web designer

1.2 Carriers in Adobe Photoshop CS6 1. Web Designer

2. Web Developer

3. Photograph Editor

4. Film Industry

Unit 01

Adobe Photoshop CS6

Orissa State Open University Page 5

1.3 Starting Adobe Photoshop CS6 To start Adobe Photoshop follow the following steps.

Step-1

Step-2

I select Adobe Photoshop CS6 as shown below

Adobe Photoshop CS6

Orissa State Open University Page 6

Basing on machine I select Adobe Photoshop CS6 or Adobe Photoshop CS6 (64 bit).

Step-3

Adobe Photoshop CS6 is launched as shown below

2.0 Interface Layout (An Overview)The interface is comprised of the following as written below.

1. Image Name :- This is the image which is being edited

2. Main Menu :- The main menu is the menu which is used to

a) create a new file

b) Modify the existing file

c) Save and close the file

Adobe Photoshop CS6

Orissa State Open University Page 7

2.1 File

2.2 Creating A New Adobe Photoshop FileWhen creating a new photoshop file the user gets this screen as shown

below

Adobe Photoshop CS6

Orissa State Open University Page 8

it shows the various paper sizes .we shall select custom when we want custom size. The measurements

are as shown below

Rules Of Measurements

Adobe Photoshop CS6

Orissa State Open University Page 9

1 inch = 96 pixels

1 inch = 2.54 cm

1 inch =25.4 millimeters

1 inch =72 points

1 inch = 6 pica

1 inch =0.38 columns

The above new file shows the following as shown below.

2.3 Layers discussed In DepthDear learner let me discuss about the layers before we proceed further and deep into the subject.

An Adobe Photoshop file is comprised of various layers. Why layers ? The advantages are many. The

advantages are .

1. Even though the image is spread across many layers it appears as one image.

2. Layers can be created

3. Layer can be duplicated

4. Layers can be hidden. Hiding some layers removes some components of the drawing without

affecting the photo shop file.

5. Layers can be merged.

6. Layers can be grouped

2.3.1 Photoshop File Comprised Of Various Layers

Adobe Photoshop CS6

Orissa State Open University Page 10

As shown above the photo shop file is comprised of various layers. All layers are named . You

can hide each layer by clicking on the eye.

Adobe Photoshop CS6

Orissa State Open University Page 11

2.3.2 Hide A Layer In Adobe Photoshop File

I have hidden the river layer and the sun layer by clicking the eye in front of the river and sun

layer.

2.3.3 Duplicate A Layer In Adobe Photoshop FileStep-1

Create a new file and unlock the layer in it

Step-2

Adobe Photoshop CS6

Orissa State Open University Page 12

Step-3

Select duplicate layer to duplicate the layer.

Advantages of duplicating

Adobe Photoshop CS6

Orissa State Open University Page 13

If you have a new photograph and do not want damage it. Create a duplicate of it .Hide the original and

work on the duplicate copy.

If you had already developed a graphic which needs slight modification but the originals should be intact

As it would be needed to do another modification in future. In such cases duplicating the layer

duplicates it and can be used for further changes.

2.3.4 Delete A Layer In Adobe Photoshop File Step -1

Unlock the layer that you want to delete and then click the del button on the keyboard else drag it to

the garbage bin .Locked layers can’t be deleted .At least a single layer remains which ant be deleted

which means photoshop retains at least one layer.

Adobe Photoshop CS6

Orissa State Open University Page 14

2.4 Grouping LayersLayers are grouped to avoid confusion when they become too many in number.

Hiding a group hides all the layers under that group.

For example a group tree can be created under which the layers tree1,tree2,tree3,tree4

can be placed.

We will be learning how to create a group and how to place layers into a group.

STEP -1

Let us consider the image as shown below.

STEP-2

Adobe Photoshop CS6

Orissa State Open University Page 15

STEP-3

Double click the group and give it a name TREE.

STEP-4

Select the layers Tree1,Tree2,Tree3,Tree4 by pressing the Ctrl key and the left mouse

button. Drag the layers clicking the left mouse button into the group.

Adobe Photoshop CS6

Orissa State Open University Page 16

2.5 How To Ungroup LayersHide the group and all the layers under it. Press the Ctrl key and select the layers under the group and

place it above the group as shown below

Adobe Photoshop CS6

Orissa State Open University Page 17

2.5.1 Link LayersThe link layers option is used to link one or more layers with one another. Doing so helps

us all layers one at a time. Let us consider linking the layers tree1,tree2,tree3,tree4

together under the group TREE.This can be done in 2 ways

The First Way

This option is very simple .

STEP-1

Select the layers that you want to link by pressing Ctrl + Left Mouse Button

STEP-2

Adobe Photoshop CS6

Orissa State Open University Page 18

STEP-3

Adobe Photoshop CS6

Orissa State Open University Page 19

Linking helped me to move all the trees to one side of the river.

Second Way

Another way to link layers is as shown below

STEP-1

Select the layers by clicking the ctrl and left mouse button

STEP-2

Click layer and click Link Layers to link all the selected layers

Adobe Photoshop CS6

Orissa State Open University Page 20

2.5.2 Unlink Layers To unlink the layers there are 2

ways. First Way

Second Way

Adobe Photoshop CS6

Orissa State Open University Page 22

2.6.1 Layer MaskIn this section we shall be discussing about the layer mask and its use.

STEP-1

Let us consider the below image is comprised of 2 layers as shown below. The first layer is the photo and

the second layer is the clouds layer.

Adobe Photoshop CS6

Orissa State Open University Page 23

STEP-2

Set the foreground color to black

Adobe Photoshop CS6

Orissa State Open University Page 24

STEP-3

Set the Foreground color to black and using the brush tool as shown below start painting

2.7 Create A New Fill Or Adjustment Layer

Adobe Photoshop CS6

Orissa State Open University Page 25

Step-2

Upon clicking it we get a list of selections as shown below.

solid Fill :- Making use of the solid fill we first fill the photograph with a solid colour as shown below

Now with a brush tool and selecting the foreground color (#937d00) as shown below

Adobe Photoshop CS6

Orissa State Open University Page 26

Adobe Photoshop CS6

Orissa State Open University Page 27

Using the Gradient Tool :-

Step-1

Step-2

Adobe Photoshop CS6

Orissa State Open University Page 28

Using The Pattern Fill :-

Step-1

Step-2

Adobe Photoshop CS6

Orissa State Open University Page 29

2.8 How To Create A Pattern

Refer To :- https://www.youtube.com/watch?v=NARVupW2ads

Step-1

Create new file

Step-2

Create a new layer and in that layer create a black circle on the layer .

Step-3

Create a layer mask for it

Now select the background layer and upper layer click align horizontal center and vertical center to

align the circle in the middle of the page.

https://www.youtube.com/watch?v=NARVupW2ads

Adobe Photoshop CS6

Orissa State Open University Page 30

Step-4

Select the shape layer which is adjacent to layer mask.

Go to Filter -> other->offset

Step-5

Create a new layer and in that layer add a large red circle and align it to the center by selecting the

background layer and that particular layer and center aligning it by clicking on horizontal align and

vertical align.

Adobe Photoshop CS6

Orissa State Open University Page 31

Step-6

Hide the background layer which is locked in the above figure .

Step-7

Merge the 2 layers into one and now click on Ctrl +A

Go to edit ->Define Pattern ->Give a name.

Adobe Photoshop CS6

Orissa State Open University Page 32

Step-8

Now the layer is created.

Step-9

To Implement the pattern in the layer.

Create a new file . unlock the layer

Double click on the layer

Set pattern overlay

Adobe Photoshop CS6

Orissa State Open University Page 33

Add pattern

Manage scale and opacity as shown below

Adobe Photoshop CS6

Orissa State Open University Page 34

Adobe Photoshop CS6

Orissa State Open University Page 35

UNIT-02

Selection Tools

Unit Structure:

3.0 Tool Bar 01

3.1 Move Tool 01

3.2 Marque Tools 07

3.2.1 Rectangle Marque tool 07

3.2.1.1 Copy and Paste 07

3.2.1.2 Cut and paste 09

3.2.2 Elliptical Marquee tool 11

3.2.3 Single Row Marque tool 12

3.3 Lasso Tools 14

3.3.1 Lasso Tool 14

3.3.2 Polygon Lasso Tool 16

3.3.3 Magnetic Lasso Tool 18

3.4 Quick Selection Tool 19

3.5 Magic Wand tool 21

UNIT-02Selection Tools

3.0 Tool Bar :-Diving Deep Into Photoshop. From now on we shall be going deep into the subject. Till 2.10 I just

covered the Photoshop CS6 superficially so that you come to know what is Photoshop and what you can

do in it. From now on we shall be going in depth into photoshop and covering all the tools and all the

effects under the various menus in detail.

3.1 Move ToolThe Move tool is used to move an image or a shape in the layer . To Use the move tool let us follow

the following steps as shown below.

Step-1

Go to file and then click on open to open an image as shown below .Here I select the image named

blend2 .jpg.

Page-1

page-2

Page-3

Page-4

Page-5

Page-6

Page-7

Page-8

Page-9

Page-10

Page-11

Adobe Photoshop CS6

Orissa State Open University Page 12

3.2.3 Single Row Marque Tool

Step-1

Select the image as defined below

Step-2

Select the single row marque tool and click free transform and pull the layer up or down for effect

Adobe Photoshop CS6

Orissa State Open University Page 13

3.2.3 Single Column Marque Tool

Step-1

Select the image as defined below

Step-2

Select the single column marque tool and click free transform and pull the layer left or right for effect.

Select the single row marque tool and click free transform and pull the layer up or down for effect

Page-14

Page-15

Page-16

Page-17

Page-18

Page-18

Page-20

Adobe Photoshop CS6

Orissa State Open University Page 21

3.5 Magic Wand Tool

The magic wand is a wonderful tool to select according to the color of the object

Step-1 :- Let us consider the layer below which is comprised of two circles one is red and one is pink.

Step-2

Now we want to separate the two circles into 2 different layers. To do so use the magic wand tool and

select the red circle.

Adobe Photoshop CS6

Orissa State Open University Page 22

Step-3

1. Now use the move tool.

2. Go to edit and click on cut option

Step -4

1. Create a new layer

2. Go to edit and click on paste option

Step-5

Repeat steps 2 ,3 ,4 for the pink circle and you get 2 layers comprising of different circles.

Adobe Photoshop CS6

Orissa State Open University Page 23

Unit 3

Image Correction Tools

Unit Structure:

4.1 Crop tools 01

4.1.1 Crop tool 01

4.1.2 Perspective Crop 02

4.2 Slice tool 04

4.3 Color Picker Tool 09

4.4 Color Sampler Tool 11

4.5 Ruler Tool 15

4.6 Note Tool 17

4.7 Spot healing Brush Tool 18

48 Patch Tool 20

CROP TYPEANDSIZE

WIDTHOF

CROPPINGHEIGHTOF

CROPPING

ROTATE THECROPBETWEENPOTRAITAND

LANDSCAPE

STRAIGHTENVIEW

VIEWMODES

COMMIT CURRENTCROP OPERATION

SET ADDITIONAL CROPOPTIONS

CANCLE CURRENTCROP ROTATION

DELETECROPPEDPIXELS

RESET THE CROPBOX,IMAGE ROTATION AND ASPECT RATIO

4.1 Crop Tools4.1.1 Crop Tool :- The Crop tool is used to crop an image and is used to remove the unwanted partsof the image .

Page-1

Adobe Photoshop CS6

Orissa State Open University Page 2

4.1.2 PERSPECTIVE CROP

TOOL :- STEP -1

Consider the image as shown below

STEP-2

Now we want to make the tiled floor as the background .In order to do that we take the help of

perspective crop tool .

Step-3 How to use the Perspective Crop tool is being discussed here

1. First select the perspective crop tool which lies below the crop tool.

Adobe Photoshop CS6

Orissa State Open University Page 3

2. Select the perspective crop tool to mark the 4 corners of an selection as shown below

3. Now click the mark on the top right side and get a tiled background as shown below.

Adobe Photoshop CS6

Orissa State Open University Page 4

4.2 Slice Tool The slice tool is used to cut an image into slices and link the slices so that these slices can be hyper

linked to various web pages.

Step -1

Step -1

Click on new -> web -> 1024 X 728

Using rectangles and Text boxes first create an image as shown above.

Step -2

Using the slice tool slice the image basing the buttons that I created such as

1. About us

2. Goals

3. Projects

4. Tie ups

5. Brand

6. E Content

Step-3

Adobe Photoshop CS6

Orissa State Open University Page 5

Step-4

Using a slice selection tool link the sliced buttons to various web pages as shown below.

Adobe Photoshop CS6

Orissa State Open University Page 6

Slice type :- what type of slice is it. It should be kept as image

Name :- name given to the slice name.

URl :- link to the web page or the website.

Target :-

_blank

Displays the linked file in a new window, leaving the original browser window open.

_self

Displays the linked file in the same frame as the original file.

_parent

Displays the linked file in its own original parent frameset. Use this option if the HTML

document contains frames and the current frame is a child. The linked file appears in the

current parent frame.

_top

Adobe Photoshop CS6

Orissa State Open University Page 7

Replaces the entire browser window with the linked file, removing all current frames. The

name must match a frame name previously defined in the HTML file for the document.

When a user clicks the link, the specified file appears in the new frame.

1. Message Text

Changes the default message in the browser’s status area for a

selected slice or slices. By default, the slice’s URL, if any, is

displayed.

Alt Tag/Alt

Specifies an Alt tag for a selected slice or slices. The Alt text

appears in place of the slice image in non graphical browsers. It

also appears in place of the image while the image is downloading

and as a tool tip in some browsers.

To the top

Click on File ->Save For Web

Click on PNG24

Click on Save button

https://helpx.adobe.com/photoshop/using/html-options-slices.html

Adobe Photoshop CS6

Orissa State Open University Page 8

Click on save button

The web page is created

Now we create about_us page in photoshop as about_us.psd

Click save for web

Save as about_us.html.

Now the link is created

Adobe Photoshop CS6

Orissa State Open University Page 9

Once I click about us on slice_tool.html I am redirected to the about_us.html page.

4.3 Color Picker Tool

The color picker tool is used to pick a color

a) From the colours palate

b) From the colors of images in other slides

c) From the colors of other image files opened by Adobe Photoshop

Adobe Photoshop CS6

Orissa State Open University Page 10

How To Use The Color Picker Is Described Below

STEP-2

Once I click the paint bucket tool to fill the background the background color changes

Single click with color picker tool on the image sets the foreground color

Alt + single click color picker tool sets the background color

4.4

Page-11

Page-12

Adobe Photoshop CS6

Orissa State Open University Page 13

Adobe Photoshop CS6

Orissa State Open University Page 14

NEXT THING TO UNDERSTAND IS SAMPLE SIZE

a) Point Sample :- This option is used to calculate the RGB levels of exactly I pixel selected

b) 3 by 3 average :- This option is used to calculate the RGB levels of average derived from pixel s

selected 3 pixels width and 3 pixels height from the point of clicking.

c) 5 by 5 average :- This option is used to calculate the RGB levels of average derived from pixel s

selected 5 pixels width and 5 pixels height from the point of clicking.

d) 11 by 11 average :- This option is used to calculate the RGB levels of average derived from pixel

s selected 11 pixels width and 11 pixels height from the point of clicking.

e) 31 by 31 average :- This option is used to calculate the RGB levels of average derived from pixel

s selected 31 pixels width and 31 pixels height from the point of clicking.

f) 51 by 51 average :- This option is used to calculate the RGB levels of average derived from pixel

s selected 51 pixels width and 51 pixels height from the point of clicking.

g) 101 by 101 average :- This option is used to calculate the RGB levels of average derived from

pixel s selected 101 pixels width and 101 pixels height from the point of clicking.

Press alt key and click the point with color sampler tool to remove the point selected

Press Ctrl key and click the point with color sampler tool to move the point selected

Adobe Photoshop CS6

Orissa State Open University Page 15

4.5 Ruler Tool

The Ruler tool is used to find the width from one point to other and height from one point to the

other.

Consider H when you are measuring height of an object

Consider W when you are measuring width of an object

The Ruler Tool is used to measure the distance between 2 points either horizontally or vertically.

Width :-17.64 pixels

Click the ruler and tool and left click at left hand corner and drag it horizontally till you reach the right

end.

Adobe Photoshop CS6

Orissa State Open University Page 16

You can move the ruler bar across the image.

To remove the ruler tool from the image click the clear button on the top

Now to find the width of the corn

Height:- 5.29 pixels

Here the width of the corn measured vertically from bottom to top is 5.29 .Note it is -5.29 as it is

measured bottom to top.

Here x stands for x and y stand for x and y coordinates..

Adobe Photoshop CS6

Orissa State Open University Page 17

4.6 Note Tool The Note tool is used to prepare a note on a image The note tool comes 4th in the eye dropper tool.

Uses of the note tool are to add a note to the image.

THE COLOR TOOL CAN BE CANGED FROM YELLOW TO BLUE

BY CLICKING ON CLEAR ALL YOU CLEAR ALL NOTES

YOU CAN HIDE AND UNHIDE NOTES BY CLICKING THE HIDE AND UNHIDE BUTTON NEXT TO CLEAR ALL

BUTTON.

Adobe Photoshop CS6

Orissa State Open University Page 18

4.7 Spot Healing Brush Tool The spot healing brush tool is used to remove the pimples and warts from the face. It is defined by

Please look at the face as shown below

It is full of pimples

Now after using the tool

How to use the tool

Step -1

Make a duplicate of this image

Click an start

And see that the hardness is selected to the maximum.

Adobe Photoshop CS6

Orissa State Open University Page 19

And start click all the pimples till they are gone.

Healing Brush Tool :- We shall be working on Healing Brush Tool to clean up the face further.

How to use the healing brush tool

Step -1

Click healing brush tool

Step-2

Click on healing brush tool and click on the marked forehead with ale and left house button

Step-3

Run the mouse by left clicking till you receive the results.

Adobe Photoshop CS6

Orissa State Open University Page 20

4.8 Patch ToolThe Patch Tool is used to remove dark lines over the skin . This is achieved by selecting the

patch tool and selecting the skin that is dark and putting it over the fairer skin of the body

by left mouse drag .

Note here below the eyes the skin got whitened by patch tool.

Block-03-U-2.pdfBlank Page