Copyright 2013 Vikas Jain

All rights reserved

Produced & Printed by
EXCEL BOOKS PRIVATE LIMITED
A-45, Naraina, Phase-I,

New Delhi-110028
for
Lovely Professional University
Phagwara

CONTENTS
Unit 1: Computer as a Design Tool

Unit 2: Designing and Desktop Publishing Tools

18

Unit 3: Introduction to Photoshop

61

Unit 4: Selecting Tools in Photoshop

82

Unit 5:Working with Layers in Photoshop

100

Unit 6:Introduction to CorelDraw

120

Unit 7:Working with CorelDraw

138

Unit 8:Tools Working with CorelDraw

173

Unit 9:Web Designing

196

Unit 10:Working of Web Designing

214

Unit 11:Dreamweaver

243

Unit 12:Dreamweaver Layers and Style Sheets

270

Unit 13:Dreamweaver Forms and Media Elements

295

Unit 14:PageMaker

317

SYLLABUS
Graphic Tools
Objectives: To impart the skills needed to develop graphic applications using Photoshop, CorelDraw. Student
will also learn various technologies in development of web applications using Dreamweaver.
S.No.

Description

1.

Computer as a Design Tool: Types of Graphic Applications: Web & Windows Based.
Tools Available for Designing and Desktop Publishing: Photoshop, CorelDraw, Brief
Explanation of all these Tools.

2.

Working with Photoshop: Photoshop Program Window, Working with Images: Vector and Bitmap
Images, Size, Resolution, Editing, Cropping, Colour Modes.

3.

Working with Photoshop: Making Selections, Editing Selections, Painting, Drawing and
Retouching Tools.

4.

Working with Photoshop: Layers, Hiding, Showing, Deleting, Repositioning, Flattening, Filters.

5.

Working with CorelDraw: CorelDraw Basics, Menus & Toolbar.

6.

Working with CorelDraw: Drawing and Selecting, Working with Text, Working with Images, Page
Layout and Background, Layers, Gradients, etc.
Use of Different Tools Available in the Toolbox. Creating Logos and Business Cards with CorelDraw.

7.

Web Designing: Document Overview, Head Elements, Block-oriented Elements, Lists, URLS,
Hypertext Links, Images, Tables, Frames, Forms.

8.

Dreamweaver: Designer Panels and Toolbars, HTML Tables, Table Properties, Named Anchor,
Frameset.

9.

Dreamweaver: Layers and Style Sheets: Single Layer, Layer Properties, Adding Elements into
Layers, Style Sheets.

10.

Dreamweaver: Forms and Media Elements: Inserting Form, Form Objects, Media Elements.

Unit 1: Computer as a Design Tool

Notes

Unit 1: Computer as a Design Tool

CONTENTS
Objectives
Introduction
1.1 The Growing Importance of Computer-based ID Tools
1.2 Types of Graphic Applications
1.2.1

Understanding Graphic Types

1.2.2

Meaning of Graphic Design

1.2.3

Working of Graphic Designer

1.2.4

Types of Graphic Design

1.2.5

Graphic Design Process

1.3 Multimedia Computer and IDS

1.3.1

Configuration of a Multimedia Computer

1.3.2

Integrated Design Software

1.4 Web and Window based Graphics

1.4.1

Web based Graphics

1.4.2

Windows based Graphics

1.5 Summary
1.6

Keywords

1.7 Review Questions

1.8 Further Readings

Objectives
After studying this unit, you will be able to:
Explain

tools

the growing importance of computer-based instructional design

Describe

a sample of computer-based ID tools

graphic applications

Elaborate

Discuss

the types of

upon the web and window based graphics

Introduction
A computer is a crucial element in todays design world. It acts both as design tool
and business tool. You can create illustrations; work with type, touch-up photos and
complete layouts, all with the help of graphics software. Products like Photoshop
and Illustrator, focus on the creative part of design. The business end of design is

LOVELY PROFESSIONAL UNIVERSITY

Graphic Tools

Notes
handled by other packages, such as project management or time tracking software,
which also will help you stay organized.

1.1 The Growing Importance of Computer-based ID Tools

The term new learning refers to an extensive collection of instructional
approaches that are all characterized by their rivet on rich, multidisciplinary and
cooperative learning tasks (called projects, problems, etc.) that are, in one way or
another, account for authentic, real-life tasks. All the tasks must make sure that
integrate multiple learning objectives and active learning happen in a significant
way. Collaborative learning tasks take advantage of the fact that multiple
perspectives on reality exist which enriches the learning experience and also
provides the prospect for negotiation between students. From a task-analytical
perspective, new learning asks for more potent techniques that can deal with
authentic-life tasks and, especially, intricate sets of integrated learning objectives.
The design of practice is given precedence over the traditional design of to be
presented information especially from a design perspective. The changes contribute
to an incremented intricacy of the design process and the instructional systems. All
the other changes, though may be of less consequence but are still very importance
to the design process.
The context is elucidated by a comprehensive contextual analysis and all
stakeholders are identified. To cope with personalized and individualized forms of
injunctive authorization, (which are needed to develop authentically learner-centred
instructional systems), traditional target group analysis are developed.
The increased use of Information and Communication Technology (ICT) in
instructional systems has its own design challenges and problems. A balanced
approach is required to find a best possible medium mix, rather than selecting just
one primary medium.

1.2 Types of Graphic Applications

Now you will learn about different types of Graphic applications.

1.2.1 Understanding Graphic Types

The different graphic types are as follows:

Bitmap
In computer graphics, a bitmap or pixmap is a type of memory organization or
image file format used to store digital images. The term bitmap comes from the
computer programming terminology, meaning just a map of bits, a spatially
mapped array of bits. Now, along with pixmap, it commonly refers to the similar
concept of a spatially mapped array of pixels. Raster images in general may be
referred to as bitmaps or pixmaps, whether synthetic or photographic, in files or in
memory.

Caution In some contexts, the term bitmap implies one bit per pixel, while pixmap
is used for images with multiple bits per pixel.

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
Many graphical user interfaces use bitmaps in their built-in graphics subsystems;
for example, the Microsoft Windows and OS/2 platforms GDI subsystem, where the
specific format used is the Windows and OS/2 bitmap file format, usually named
with the file extension of .BMP (or .DIB for device-independent bitmap). Besides
BMP, other file formats that store literal bitmaps include InterLeaved Bitmap (ILBM),
Portable Bitmap (PBM), X Bitmap (XBM), and Wireless Application Protocol Bitmap
(WBMP). Similarly, most other image file formats, such as JPEG, TIFF, PNG, and GIF,
also store bitmap images (as opposed to vector graphics), but they are not usually
referred to as bitmaps, since they use compressed formats internally.

Vector Graphics
Vector graphics is the use of geometrical primitives such as points, lines, curves,
and shapes or polygon(s), which are all based on mathematical equations, to
represent images in computer graphics.
Vector graphics formats are complementary to raster graphics, which is the
representation of images as an array of pixels, as it is typically used for the
representation of photographic images. There are instances when working with
vector tools and formats is best practice, and instances when working with raster
tools and formats is best practice. There are times when both formats come
together. An understanding of the advantages and limitations of each technology
and the relationship between them is most likely to result in efficient and effective
use of tools.
Figure 1.1: Effect of Vector Graphics versus Raster Graphics

The original vector-based illustration is at the left. The upper-right image illustrates
magnification of 7x as a vector image. The lower-right image illustrates the same
magnification as a bitmap image. Raster images are based on pixels and thus scale
with loss of clarity, while vector-based images can be scaled indefinitely without
degrading.

Overview of Vector Graphic

Computer displays are made up from small dots called pixels. The picture is built up
from these dots. The smaller and closer the dots are together, the better the quality
of the image, but the bigger the file needed to store the data. If the number of
pixels is kept constant, the size of each pixel will grow and the image becomes

LOVELY PROFESSIONAL UNIVERSITY

Graphic Tools

Notes
grainy when magnified, as the resolution of the eye enables it to pick out individual
pixels.
Vector graphics files store the lines, shapes and colours that make up an image as
mathematical formulae. A vector graphics program uses these mathematical
formulae to construct the screen image, building the best quality image possible,
given the screen resolution. The mathematical formulae determine where the dots
that make up the image should be placed for the best results when displaying the
image. Since these formulae can produce an image scalable to any size and detail,
the quality of the image is only determined by the resolution of the display, and the
file size of vector data generating the image stays the same. Printing the image to
paper will usually give a sharper, higher resolution output than printing it to the
screen but can use exactly the same vector data file.
Did u know? JPEG images dont support transparency.

Editing Vector Graphics

Vector graphic drawing software is used for creating and editing vector graphics.
The image can be changed by editing screen objects which are then saved as
modifications to the mathematical formulae. Mathematical operators in the software
can be used to stretch, twist, and colour component objects in the picture or the
whole picture, and these tools are presented to the user intuitively through the
graphical user interface of the computer. It is possible to save the screen image
produced as a bitmap/raster file or generate a bitmap of any resolution from the
vector file for use on any device.
The size of the file generated will depend on the resolution required, but the size of
the vector file generating the bitmap/raster file will always remain the same. Thus,
it is easy to convert from a vector file to a range of bitmap/raster file formats but it
is much more difficult to go in the opposite direction, especially if subsequent
editing of the vector picture is required. It might be an advantage to save an image
created from a vector source file as a bitmap/raster format, because different
systems have different (and incompatible) vector formats, and some might not
support vector graphics at all. However, once a file is converted from the vector
format, it is likely to be bigger, and it loses the advantage of scalability without loss
of resolution. It will also no longer be possible to edit individual parts of the image
as discrete objects.
Vector formats are not always appropriate in graphics work. For example, digital
devices such as cameras and scanners produce raster graphics that are impractical
to convert into vectors, and so for this type of work, the editor will operate on the
pixels rather than on drawing objects defined by mathematical formulae.
Comprehensive graphics tools will combine images from vector and raster sources,
and may provide editing tools for both, since some parts of an image could come
from a camera source, and others could have been drawn using vector tools.

Standards
The W3C standard for vector graphics is SVG. The standard is complex and has
been relatively slow to be established at least in part owing to commercial interests.
Many web browsers now have some support for rendering SVG data but full
implementations of the standard are still comparatively rare.

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes

Applications
One of the first uses of vector graphic displays was the US SAGE air defense
system. Vector graphics systems were only retired from U.S. en route air traffic
control in 1999, and are likely still in use in military and specialized systems. Vector
graphics were also used on the TX-2 at the MIT Lincoln Laboratory by computer
graphics pioneer Ivan Sutherland to run his program Sketchpad in 1963.
Subsequent vector graphics systems, most of which iterated through dynamically
modifiable stored lists of drawing instructions, include Digitals GT40. There was a
home gaming system that used vector graphics called Vectrex as well as various
arcade games like Asteroids and Space Wars. Storage scope displays, such as the
Tektronix 4014, could display vector images but not modify them without first
erasing the display.
Modern vector graphics displays can sometimes be found at laser light shows,
where two fastmoving X-Y mirrors are used to rapidly draw shapes and text on a
screen.
The term vector graphics is mainly used today in the context of two-dimensional
computer graphics. It is one of several modes an artist can use to create an image
on a raster display. Other modes include text, multimedia, and 3D rendering.
Virtually all modern 3D rendering is done using extensions of 2D vector graphics
techniques. Plotters used in technical drawing still draw vectors directly to paper.
Did u know? JPEGs lose quality every time they are opened, edited and saved.

Vector Operations
Vector graphics editors typically allow rotation, movement, mirroring, stretching,
skewing, affine transformations, changing of z-order and combination of primitives
into more complex objects.
More sophisticated transformations include set not operations on closed shapes
(union, difference, intersection, etc.).
Vector graphics are ideal for simple or composite drawings that need to be deviceindependent, or do not need to achieve photo-realism. For example, the PostScript
and PDF page description languages use a vector graphics model.

3D Modeling
In 3D computer graphics, vectorized surface representations are most common
(bitmaps can be used for special purposes such as surface texturing, height-field
data and bump mapping). At the low-end, simple meshes of polygons are used to
represent geometric detail in applications where interactive frame rates or
simplicity are important.

LOVELY PROFESSIONAL UNIVERSITY

Graphic Tools

Notes
Figure 1.2: 3D Modelling

At the high-end, where one is willing to trade-off higher rendering times for
increased image quality and precision, smooth surface representations such as
Bzier patches, NURBS or Subdivision surfaces are used. One can, however, achieve
a smooth surface rendering from a polygonal mesh through the use of shading
algorithms such as Phong and Gouraud.
Figure 1.3: Another Example of 3D Modeling

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
Source: Sastra/MCA/STMCA502/Graphics and Multimedia/Chapter13

1.2.2 Meaning of Graphic Design

Graphic Design is an interdisciplinary, problem-solving process which combines
visual sensitivity with skill and knowledge in areas of communications, technology
and business. Graphic designers specialize in the structuring and organizing of
visual information to assist communication and orientation. The graphic design
process is a crisis handling activity, one that requires substantial creativity,
innovation and technical expertise. An understanding of a clients product or service
and goals, their competitors and the target audience is translated into a visual
solution created from the manipulation, combination and utilization of shape, space,
typography, imagery and color.

1.2.3 Working of Graphic Designer

Graphic designers create visual concepts, by hand or using computer software, to
communicate ideas that inspire, inform, or captivate consumers. They help to make
an organization recognizable by selecting color, images, or logo designs that
represent a particular idea or identity to be used in advertising and promotions.
A graphic designer is a professional within the graphic design and graphic arts
industry who assembles together images, typography or motion graphics to create
a piece of design. A graphic designer creates the graphics primarily for printed,
published or electronic media, such as advertising and brochures. They are also
sometimes responsible for illustration, typesetting, web design, user interfaces or
take a teaching position. A core responsibility of the designers job is to present
information in a way that is both accessible and unforgettable.

1.2.4 Types of Graphic Design

Graphic designers use a wide variety of communication tools, mainly typography
and image, in order to convey a message on behalf of client to particular viewers.

Image-based Design
Designers develop images to represent the ideas their clients want to
communicate. Images can be extremely influential and convincing means of
communication, conveying not only information but also moods and emotions.
People react to images instinctively based on their personalities, associations, and
previous experience. For example, you know that a green dot means vegetarian,
and this knowledge in combination with the image creates a visual pun.

LOVELY PROFESSIONAL UNIVERSITY

Graphic Tools

Notes
Figure 1.4: The Image based Graphic Design

In the case of image-based design, the images must transmit the entire message;
there are few if any words to help. These images may be photographic, painted,
drawn, or graphically rendered in many different ways. Image-based design is used
when the designer determines that a picture is indeed worth a thousand words.

Type-based Design
In some cases, designers rely on words to express a message, but they use words in
a different way from what writers do. To designers, what the words look like is as
important as their meaning. They can arrest your attention on a poster, identify the
product name on a package or a truck, and present running text as the typography
in a book does. Designers are experts at presenting information in a visual form in
print or on film, packaging, or signs.
Figure 1.5: Type based Graphic Design

When you look at an ordinary printed page of running text, what is involved in
designing such a seemingly simple page? Think about what you would do if you

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
were asked to redesign the page. Would you change the typeface or type size?
Would you divide the text into two narrower columns? What about the margins and
the spacing between the paragraphs and lines? Would you indent the paragraphs or
begin them with decorative lettering? What other kinds of treatment might you give
the page number? Would you change the boldface terms, perhaps using italic or
underlining? What other changes might you consider, and how would they affect
the way the reader reacts to the content? Designers evaluate the message and the
audience for type-based design in order to make these kinds of decisions.

Image and Type Based

Designers often combine images and typography to correspond a clients message
to an audience. They explore the creative possibilities presented by words
(typography) and images (photography, illustration, and fine art). It is up to the
designer not only to find or create appropriate letterforms and images but also to
establish the best balance between them.
Figure 1.6: Image and Type based Graphic Design

Designers are the link between the client and the audience. On the one hand, a
client is often too close to the message to understand various ways in which it can
be presented. The audience, on the other hand, is often too large to have any direct
impact on how a message is presented. Whats more, it is usually difficult to make
the audience a part of the creative process. Unlike client and audience, graphic
designers learn how to construct a message and how to signify it successfully. They
work with the client to understand the content and the purpose of the message.
They often collaborate with market researchers and other specialists to understand
the nature of the audience. Once a design concept is chosen, the designers work
with illustrators and photographers as well as with typesetters and printers or other
production specialists to create the final design product.

Symbols, Logos and Logotypes

Symbols and logos are special, highly condensed information forms or identifiers.
Symbols are conceptual representation of a particular idea or identity. For example,
The Twitter bird and the WWF panda are symbolic forms, which we learn to
recognize as representing a particular concept or company. Logotypes are corporate
identifications based on a special typographical word treatment. Some identifiers
are hybrid, or combinations of symbol and logotype. In order to create these
identifiers, the designer must have a clear vision of the corporation or idea to be
represented and of the audience to which the message is aimed.

LOVELY PROFESSIONAL UNIVERSITY

Graphic Tools

Notes
Figure 1.7: Twitter and WWF Logo

Source: http://www.aiga.org/guide-whatisgraphicdesign/

1.2.5 Graphic Design Process

A good graphic design process is planned around ensuring the client gets the
highest quality solution and service appropriate to their business, marketing or
communication problem. There are four main steps involved between client and
designer.

Briefing
The briefing stage may consist of either or both of the following:

Initial informal discussions between the client and the designer covering
project objectives, timing and budget.

Formal meetings to discuss the project in detail and clarify any technical
issues including budget, timetable and corporate identity guidelines. Design

The designer reviews the brief, background material and identity standards
to ensure understanding of the project context and your corporate
requirements.

The designer develops the draft concepts and preliminary designs and
selects the most suitable options for further development.

The designer presents visual solutions and explains design decisions.

one will evaluate the visual presentation against the brief.

Together

Notes Following your review and feedback, the designer amends the material
as required and, if necessary, presents you with new design(s).

Artwork

Your designer prepares the artwork files and provides a proof (email or
hardcopy).

You either approve the artwork by signing the proof, or mark-up changes
youd like to make.

10

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
A further proof is provided if required.

Any authors corrections (client requested changes to content already

provided which may include additional charges: these should be detailed in
any quote conditions provided with your initial quote).

Production
The designer forwards the artwork to a commercial printer.

The designer views the printers proof and passes the proof on to the client
for approval.

In some cases, the designer can conduct a press check of the printed
sample while the job is running on the printing press.

Task Design any graphic logo for accompany of your choice in paint.

Self Assessment
State whether the following statements are true or false:
1.

The term bitmap comes from the computer programming terminology,

meaning bits of map.

2.

Vector graphics is the use of geometrical primitives such as points, lines,

curves, etc.

3.

Computer displays are made up from small cubes called pixels.

4.

The W3C standard for vector graphics is SVG.

5.

To designers, in Type based design, what the words look like is as important
as their meaning.

1.3 Multimedia Computer and IDS

As you now know different types of graphic design, you will understand the different
means requires to create them

1.3.1 Configuration of a Multimedia Computer

A good multimedia system should have a Dual Core Processor (or the one with
similar capabilities) onwards processor, at least 1GB of RAM, 320 GB onwards hard
disk drive, 15 inch onwards SVGA monitor 1Gb N-Vidia or ATI Radeon Graphics card,
DVD drive, a 64-bits sound card, keyboard, optical mouse and a 56k fax data voice
modem. The combination is dependent on the nature and contents of the
multimedia project you are dealing with.

Caution There is no set rule to define the exact hardware combination of a good
multimedia computer.

LOVELY PROFESSIONAL UNIVERSITY

11

Graphic Tools

Notes

1.3.2 Integrated Design Software

Multimedia authoring tools provide the framework for organizing and editing the
elements of a multimedia project. Authoring software provides an integrated
environment for combining the content and functions of a project. It enables the
developer to combine text, graphics, audio, video, and animation into an interactive
presentation/project. Authoring systems include editing tools to create, edit, and
convert multimedia elements such as animation and video clips. There are four
basic type of authoring tools, viz. Page-based tools (like Tool book), Icon-based
authoring tools (like Icon Author), and Time-based authoring tools (like Macromedia
Director) and Object Oriented tools (like Media Forge).

Notes Designers or teachers are aided by computer-based tools for

Instructional Design (ID) to perform one or more of the various activities that
can be prepared according to the ADDIE model that is the Analysis, Design,
Development or production, Implementation and Evaluation of instructional
systems. The history of computer-based ID Tools is closely associated to the
history of computer-based instruction. After it was decided to use the
computer as the primary instructional medium, it was an apparent move to
use the computer not only for the delivery but also for the production of the
instruction. Consequently, authoring tools for the development or production
of computer-based instruction still dominates the research and development
work in the field of ID tools. Many of those softwares are commercially
available (e.g. ToolBook, Macromedia Director, Authorware, etc.). Currently the
most popular form of computer-based instruction is dedicated systems for
authoring Web-based instruction.
Page-based tools provide a simple and easily understood metaphor for organizing
multimedia elements. It contains media objects such as buttons, text fields and
graphic objects. It provides a facility for linking objects to pages or cards. Icons or
objects based authoring tool is the simplest and easiest authoring process. Iconbased, event-driven tools simplify the organization of your project and typically
display flow diagrams of activities along branching paths. In complicate structures,
this charting is particularly useful during development. In Time based authoring
systems, elements and events are organized along a timeline, with resolutions as
high or higher than 1/30 second. Time based tools are best to use when you have a
message with a beginning and an end. Sequentially organized graphic frames are
played back at a speed that you can set. Other elements are triggered back at a
given time or location in the sequence of events. The more powerful time based
tools let you program jumps to any location in a sequence, thereby adding
navigation and interactive control. Object-oriented tools organize the elements in a
hierarchical order as related Objects. These tools make these objects execute
according to properties assigned to them.

Self Assessment
Fill in the blanks:
6.

A good multimedia system should have a Dual Core

7.

Multimedia authoring tools provide the for organizing and

editing the elements of a multimedia project.

8.

systems include editing tools to create, edit, and convert

multimedia elements such as animation and video clips.

12

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
9.

Page-based tools provides a facility for linking to pages or

cards.

10.

Object-oriented organize the elements in a hierarchical order as

related Objects.

1.4 Web and Window based Graphics

The following are the concepts of the Web and Window based graphics.

1.4.1 Web based Graphics

In the early days of the Web, each individual web page was delivered to the client
as a static document, but the sequence of pages now could provide an interactive
experience, as user input is returned through web form elements embedded in the
page markup. Practically, Web application projects cover everything from filing
taxes to sharing photos.

Defining Web Application

A web application is an application that is accessed by users over a network such as
the Internet or an intranet. The term may also mean a computer software
application that is coded in a browser-supported programming language (such as
JavaScript, combined with a browserrendered markup language like HTML) and
dependent on a common web browser to make the application executable. Web
applications can provide the same functionality and gain the benefit of working
across multiple platforms.
Example: A web application can act as a word processor, storing information
and allowing you to download the document onto your personal hard drive.

1.4.2 Windows based Graphics

Somewhere at the end of the 90s, Major companies began introducing a new
technology on the market, namely the Liquid Display Technology (LCD). The new
technology used a grid of liquid crystals, placing three transistors behind each
crystal. Monitors featuring LCD panels came in a slimmer form factors and with
lower radiation emissions. They were a step up in design compared to the bulky CRT
monitors people were so used to.
The further evolution of LCDs solved the problem of slow response time and,
contrast ratios and brightness improved with each new generation of displays.
Together with the evolution of LCDs came a new video interface called DVI (Digital
Video Interface). Compared to the analog VGA connection, this solution was no
longer bound to the quality and length of the cable. DVI provided for a complete
digital transfer of information between the graphics adapter and the monitor.
Todays monitors range from 15 to 30-inch LCDs, with resolutions matching 2560 x
1600 pixels. They are outfitted with webcams, USB hubs and audio speakers. The
biggest challenge of using such systems is picking the user interface metaphor.
Although one might be tempted to use a traditional window and mouse based
environment, it is not clear that it is the most appropriate design for this
environment. Designing visualizations for large displays differs from designing for
desktop monitors due to a variety of factors, including size, resolution, brightness,

LOVELY PROFESSIONAL UNIVERSITY

13

Graphic Tools

Notes
contrast and orientation. Designing the interface is equally cumbersome, since
large displays are difficult to use with a tethered mouse or keyboard. Group
applications and tasks are also very different from single-user applications.

Self Assessment
State whether the following statements are true or false:
11.

Initially, each individual web page was delivered to the client as a static
document.

12.

A web application is an application that is accessed by users in a computer.

13.

LCD means Laser Display Technology.

14.

Digital Video Interface is a new kind of display device.

15.

Designing visualizations for large displays differs from designing for desktop
monitors.

Case Study

Dodds (Corporate Identity)

fter many years of service, Dodds & Partners felt it was time to retire their
existing Identity, which was to also coincide with a rebranding to Dodds
Solictors LLP.
They were wanting a fresh rebrand something modern but which
carried on some similarities with the previous identity so as not to break the
link with the previous branding.
Solution
Dodds have always used a deep blue as their corporate colour combined with
a basic Serif font (Times). We kept the blue dark but picked a richer tone, and
swapped out their existing serif font for one that isnt so common, but still
carried a distinguished, trustful feel. The logomark uses an organic stone
shape to catch the eye in conjunction with a looped line to convey the idea of
unity whilst also forming a lower case d.
Result
The new logo has positioned Dodds to take the next step in their growth.
Without trying to look too youthful and avoiding looking part of the industry
termed Ambulance Chasers, Dodds now have an identity which exudes
tradition and security as well as modernity, which befits a company of their
stature. The rebranding has been followed by an increase in new clients, as
well as giving them an identity to continue to successfully compete in the
marketplace.
Testimonial
As a firm of solicitors Dodds Solicitors LLP are used to helping people with their
problems but had no idea of how to market ourselves. Thanks to the very friendly
team at Adtrak we Contd...

14

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
now have a company we can trust with all of our advertising needs. We
recently wanted to rebrand and were delighted with Adtraks new and
fresh ideas. We have had a lot of comments on our new logo and are
confident that it will help us get noticed in such a busy industry.
Question:
How has new logo helped Dodds in their growth?
Source: http://www.adtrak.co.uk/case-studies-graphic-design.php

1.5 Summary

In computer graphics, a bitmap or pixmap is a type of memory organization

or image file format used to store digital images.

Vector graphics is the use of geometrical primitives such as points, lines,

curves, and shapes or polygon(s), which are all based on mathematical
equations, to represent images in computer graphics.

In 3D computer graphics, vectorized surface representations are most

common.

Graphic Design is an interdisciplinary, problem-solving process which

combines visual sensitivity with skill and knowledge in areas of
communications, technology and business.

Graphic designers create visual concepts, by hand or using computer

software, to communicate ideas that inspire, inform, or captivate consumers.

In image-based design, the images must transmit the entire message.

In

type-based design, what the words look like is as important as their meaning.
Symbols

and logos are special, highly condensed information forms or

identifiers.

A good graphic design process is planned around ensuring the client gets
the highest quality solution and service appropriate to their business,
marketing or communication problem.

Multimedia authoring tools provide the framework for organizing and editing
the elements of a multimedia project.

1.6 Keywords
Authoring: This means creation of programs and databases for computer
applications such as computer-assisted learning.
Bitmap: A bitmap is a map of dots, or bits that look like a picture as long you are
sitting a reasonable distance away from the screen.
Guidelines: A statement or other indication of policy or procedure by which to
determine a course of action.
Multimedia: An extension of hypertext allowing the provision of audio and video
material cross-referenced to a computer text.

LOVELY PROFESSIONAL UNIVERSITY

15

Graphic Tools

Notes
Pixels: A minute area of illumination on a display screen, one of many from which
an image is composed.
Raster Graphics: It is a dot matrix data structure representing a generally
rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other
display medium.
Typography: The art or process of setting and arranging types and printing from
them.
W3C Standards: They define an Open Web Platform for application development
that has the unprecedented potential to enable developers to build rich interactive
experiences, powered by vast data stores that are available on any device.

1.7 Review Questions

1.

What are the different Graphic types?

2.

How is bitmap different from vector graphics?

3.

Explain the process of editing vector graphics.

4.

Write a short note on 3D Modeling.

5.

What do you mean by Graphic Design?

6.

Explain the profile of Graphic Designer.

7.

Elaborate on different types of Graphic Designs.

8.

Write a short note on Graphic Design Process.

9.

What are Multimedia authoring tools? Explain its different types.

10.

How are Web Based Graphics different from Window Based Graphics?

Answers: Self Assessment

1.

False

2.

True

3.

False

4.

True

5.

True

6.

7.

Framework

8.

9.

Objects

10.

Processo
r
Authorin
g
Tools

11.

True

12.

False

13.

False

14.

False

15.

True

1.8 Further Readings

Books Harrington S, Computer Graphics: A Programming Approach, McGraw Hill 1983.

Foley J D and Van Dam A, Fundamentals of Interactive Computer
Graphics, Addison Wesley.

16

LOVELY PROFESSIONAL UNIVERSITY

Unit 1: Computer as a Design Tool

Notes
Hearn D and Baker PM, Computer Graphics, Prentice Hall.

Online links

http://psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphicdesigntheory/

http://desktoppub.about.com/od/graphicdesign/Graphic_Design_
Tutorials.htm
http://graphicdesign.about.com/od/graphicdesignbasics/tp/essential_ tools.htm
http://www.tips-tricks.com/gph_tools2.asp

LOVELY PROFESSIONAL UNIVERSITY

17

Graphic Tools

Notes

Unit 2: Designing and Desktop Publishing Tools

CONTENTS
Objectives
Introduction
2.1 Meaning of Desktop Publishing (DTP)
2.1.1

Text

2.1.2

Images

2.1.3

Printing

2.1.4

Design

2.2 Tools for Designing

2.2.1

Basics of Photoshop

2.2.2

Basics of

CorelDraw 2.2.3

Basics of

Illustrator
2.2.4

Basics of PageMaker

2.2.5

Basics of InDesign

2.3 Summary
2.4

Keywords

2.5 Review Questions

2.6 Further Readings

Objectives
After studying this unit, you will be able to:
Elaborate

upon the meaning of Desktop publishing (DTP)

for designing

Explain

List

the tools

the basics of Photoshop, CorelDraw, Illustrator,

PageMaker, InDesign

Introduction
Desktop publishing started in 1983 with a program developed by James Bessen at a
community newspaper in Philadelphia. That program, Type Processor One, ran on a
PC using a graphics card for a WYSIWYG display and was offered commercially by
Best info in 1984. (Desktop typesetting, with only limited page makeup facilities,
had arrived in 197879 with the introduction of TeX, and was extended in the early
1980s by LaTeX). The DTP market exploded in 1985 with the introduction in January
of the Apple LaserWriter printer, and later in July with the introduction of PageMaker
software from Aldus which rapidly became the DTP industry standard software.

18

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
The term desktop publishing is accredited to Aldus Corporation founder Paul
Brainerd, who wanted a marketing catch-phrase to describe the small size and
relative affordability of this suite of products in contrast to the expensive
commercial phototypesetting equipment of the day.
By todays standards, early desktop publishing was a primitive affair. Users of the
PageMakerLaserWriter-Macintosh 512K system endured frequent software crashes,
cramped display on the Macs tiny 512 x 342 1-bit monochrome screen, the lack of
ability to control letter spacing, kerning (the addition or removal of space between
individual characters in a piece of typeset text to improve its appearance or alter its
fit) and other typographic features, and discrepancies between the screen display
and printed output. However, it was a revolutionary combination at the time, and
was received with considerable acclaim.
During its early years, desktop publishing had a bad status as a result of untrained
users who created poorly-organized ransom note effect layouts similar criticism
would be levied again against early Web publishers a decade later. However, some
were able to realize truly professional results.
Once considered a primary skill, increased accessibility to more user-friendly DTP
software has made DTP a secondary skill to art direction, graphic design,
multimedia development, marketing communications, administrative careers and
advanced high school literacy in thriving economies. DTP skill levels range from
what may be learned in a few hours (e.g. learning how to put clip art in a word
processor) to what requires a college education and years of experience (e.g.
advertising agency positions). The discipline of DTP skills ranges from technical
skills such as prepress production and programming to creative skills such as
communication design and graphic image development.

2.1 Meaning of Desktop Publishing (DTP)

Desktop publishing (DTP) is the making of documents using page layout skills on a
personal computer. When used capably, desktop publishing software can create
text and images with attractive layouts and typographic quality comparable to
traditional typography and printing. This technology allows individuals, businesses,
and other organizations to self-publish a wide range of printed matter (from menus
and local newsletters to books, magazines, and newspapers), sometimes without
the prohibitive expense of commercial printing.
Desktop publishing combines a personal computer and WYSIWYG page layout
software to create publication documents on a computer for both large scale
publishing or small scale local multifunction peripheral output and distribution.
Desktop publishing methods provide more power over design, layout, and
typography than word processing does. However, word processing software has
evolved to include some of the capabilities previously available only with
professional printing or desktop publishing.

2.1.1 Text
Since the advent of desktop publishing, DTP is used to create a simple document.
The first DTP software appeared in 1985. As it was created by Aldus Corporation, it
also had the advantage of being WYSIWYG. The ease of use remained despite DTP
programs becoming more sophisticated. There are numerous fonts to select from
when creating DTP documents. The user is also helped by the uniformity of DTP
programs when it comes to adjusting text size and margins.

LOVELY PROFESSIONAL UNIVERSITY

19

Graphic Tools

Notes

2.1.2 Images
One major advantage of DTP is being able to import images into a document. This
is of huge assistance to people who create any printed matter and has only a small
print run. Before DTP, the cut-paste method was most commonly used, or a stencil
was used through a duplicator. Through DTP, simplest graphic or a color
photograph, that too, in fine detail can be imported into a document.

2.1.3 Printing
Computer printers revolutionized publishing as a whole around the world. Users
could print black and white as well as color photographs and artwork on their own
computer at home. All one had to do to turn their computer into a small scale
publishing house was to own a home computer, the DTP software and a printer. A
printer prints a DTP document at a very high speed at which, for example, hundreds
of leaflets can be printed in less than an hour.

2.1.4 Design
Other than for text, photographs and art, the DTP is also used for design purposes.
Experienced users can utilize this area of DTP. Some easy designs can be created
with shapes and fills, but more difficult effects take a higher degree of skill to use.
With the combination of text, images and design, an impressive document can be
created for notices and professional correspondence by a modest DTP program.

Self Assessment
State whether the following statements are true or false:
1.

Desktop publishing (DTP) is the making of documents using printing

techniques on a personal computer.

2.

Desktop publishing methods provide more power over design, layout, and
typography than word processing does.

3.

One major advantage of DTP is being able to import images into a

document.

4.

Computer monitors revolutionized publishing as a whole around the world.

5.

Other than for text, photographs and art, the DTP is also used for design
purposes.

2.2 Tools for Designing

Now you will learn about different tools of designing.

2.2.1 Basics of Photoshop

Adobe Photoshop is one of the most powerful software applications for image
editing, touch up, color correction, and painting and drawing. You can use it to work
with images that have been digitized on flatbed or film/slide scanners, or to create
original artwork. The image files you create in Photoshop can be printed to paper or
optimized for use in multimedia presentations, web pages, or animation/video
projects.

20

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes

Work Area in Photoshop

The work area can be intimidating to work with because of all the complex
functionality but with a quick breakdown of the available features and their uses,
you will be ready to comfortably navigate the work area with ease. The work area in
Photoshop has the following basic functionality and features:
Menu Bar this is where you can access most of the commands and

features in Photoshop

Drawing

Palette where the image being worked on will

appear

Options bar

Content sensitive display of tool options changes as different tools

are selected

Display using Window > Options or Click a tool in the toolbox. Lasso

options bar

Tool box - for creating an editing images (display or hide

using Windows > Tools)

Palettes - to monitor and modify images (there are

5 palettes by default)

Palette Well - to organize palettes in work area

Drag a palettes tab into the palette well to store it in the palette

Once in the palette well click on the palette tab to use it

well

LOVELY PROFESSIONAL UNIVERSITY

21

Graphic Tools

Notes
Figure 2.1: Work Area in Photoshop

Source: http://www.cutehits.com/wp-content/uploads/2011/08/work_area1.jpg

Photoshop File Formats

.PSD
Of all the file formats that Photoshop supports, the PSD format is probably the most
significant. PSD stands for Photoshop Document, and as the name implies, its
Photoshops native file format. PSD is one of the few file types that fully support all
of the powerful features that Photoshop gives us, like layers, layer masks,
adjustment layers, channels, paths, and so on. It also serves as your working file.
When we open an image in Photoshop, regardless of which file type the image was
originally using, Photoshop temporarily converts it into a PSD file behind the scenes
so one can work on it with all of Photoshops tools, commands and features at our
disposal.
PSD files are your best choice to serve as your master files and for archiving to CD,
DVD or an external hard drive for safe keeping. If youve done any sort of editing
work on an image and theres even the least chance youll need to come back to it
again at some point in the future, save your work as a Photoshop PSD file. Theres
no loss in image quality no matter how many times you reopen and re-save a PSD,
and all of your layers, layer masks, adjustment layers and so on will be saved as

22

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
part of the file, allowing you to go back at any time and make changes to the image
or continue working from where you left off.
You can easily print your pictures at home with Photoshop directly from the PSD file,
and many commercial printers are now able to accept PSDs as well, although some
may still require an EPS or TIFF version of the file instead, so its always best to
check with your printer to make sure youre giving them the format they need. One
of the newer advantages with PSD files is that they can now be imported directly
into Adobe InDesign, giving you complete access to the individual layers in the file
as youre designing your page layouts. You can even reopen a PSD file in Photoshop
directly from InDesign, make changes to the file, save it, and have the changes
immediately update in your layout!
The only real disadvantage to PSD files is that the file size can get very large,
especially if youre working on an image with hundreds or even thousands of layers.
But with computer hard drives and memory being so cheap these days, its a small
price to pay for the creative freedom that Photoshop and its native PSD file format
give us. Bottom line, your PSD file is the most important file you can have, so be
sure to save yourself a master copy of your work as a PSD file so you can always
return to it in Photoshop when you need it!

.JPEG
The JPEG (Joint Photographic Expert Group) format has been around for practically
20 years now and has come to be the most prevalent and widely utilized file format
for review and offering computerized photographs. It upholds 24-bit color, which
means it can reproduce roughly 16.7 million shades, and even the shabbiest digital
cameras can catch pictures as JPEG documents. Most high end digital SLR cameras
give you the choice of capturing pictures in either the JPEG or RAW form.
Its important, however, not to confuse prevalent and widely with professional
value. JPEG is whats called a lossy file format in light of the fact that it compresses
the pictures, which basically means it takes some of your picture details and tosses
it out the virtual window, never to be perceived again. It does this to lessen file size,
the more compression you use; the more terrible your pictures look. You control the
amount of compression being applied to the file using the Quality setting that
appears in Photoshop when you go to save it. A sufficiently high Quality setting can
even now produce awesome looking pictures yet your file size will be larger. Lower
Quality settings can generate exceptionally modest file sizes, however set too low
and youll present appalling and obvious compression artifacts.
The most amazing quality of JPEG records is convenience. Theyre normally minor
enough that they can effectively be transferred and displayed on web pages, or on
photograph imparting destinations like Facebook and Flickr, and messaged to family
and companions. Internet printing aids for the most part need your photographs to
be transferred as JPEG records. The downside to JPEGs is that the reduced quality
initiated by picture layering methods theyre not a great decision for choice when
picture value is your essential concern, and theyre likewise not a good choice for
archiving your originals. Depending on if youre capturing JPEG files in your camera,
verify youre capturing the largest, highest quality images possible. Check your
cameras instruction manual to find out where the image quality option is in your
cameras menu system. The highest quality setting is usually labeled Large.
One thing you need to abstain from doing whenever plausible is re-saving JPEG files
repeatedly.. Every time to open and re-save it, youll add significantly more

LOVELY PROFESSIONAL UNIVERSITY

23

Graphic Tools

Notes
compression to the image, and it doesnt take long for things to get ugly. Once the
picture part is gone, you can never get it back. .GIF
The GIF file format, which stands for Graphics Interchange Format, has been around
even longer than JPEG, and its the format of choice for web illustrations. Notice I
stated web illustrations, not web photographs. GIF records can just show up to 256
shades, far less than the many colors would have been wise to convincingly
duplicate a photographic picture (and far less still than the millions of shades
backed by the JPEG organization).
In terms of web design, however, the GIF arrangement is basic. The files are
decently suited for site page layouts, banners and buttons, especially if they
contain large areas of solid color. All major web browsers support GIF files and their
small file sizes load quickly on the screen. GIF also allows web designers to create
simple animations. One major advantage GIF has over the JPEG arrangement, and
an additional reason for why its so reason why its so essential for web designers is
that it upholds transparency, even though it upholds a single level of transparency,
significance a pixel is either transparent or its definitely not. This can result in harsh
edges around graphics if the edge color contrasts from the color of the background
its placed over. For higher quality transparency effects, a better choice is the PNG
format.

.PNG
PNG (Portable Network Graphics) was originally meant to replace the GIF format
(PNG also stands for PNG not GIF). That never happened and GIF files are still in
wide use today, yet the PNG format improves upon the GIF format in nearly every
way. It even improves on the JPEG format. While JPEG files support 24-bit color (16.7
million colors), PNG files support up to 48-bit color, giving us more than 1 billion
possible colors! That may sound impressive, but even JPEG files support more colors
than the human eye can see, so any real world differences between 24 and 48-bit
color are minimal at best.
The biggest advantage over JPEG is that PNG is a lossless file format, meaning that
even though it still compresses images to reduce file size, the compression method
it uses does not result in a loss of image quality. You can even re-save the same
PNG file multiple times without degrading its quality, whereas JPEG files look worse
each time you re-save them. With over a billion possible colors and lossless
compression, PNG is a great choice for saving digital photos as high quality
originals. The downside, though, is that PNG is not as widely supported as the JPEG
format, and PNG does not support CMYK color, which means commercial printers
cant use them. For everyday viewing and sharing of your digital photos, the JPEG
format is still more useful and convenient, even if the image quality isnt as good.
PNGs main advantage over GIF files, besides far exceeding GIFs 256 color limit, is
that it can reproduces full 256 levels of transparency compared with GIFs single
level, giving us smooth transitions around edges without having to worry about
matching the edges with the background color. PNG files are also usually smaller
than GIF files, so theyll load even faster in a web browser. Unfortunately, older web
browsers may not support the PNG format, which means GIF is still the safest
choice when browser compatibility is your main concern. Also, while GIF supports
animations, PNG does not. PNG files are most often used in multimedia programs
like Flash as well as Keynote and PowerPoint presentations.

24

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes

TIFF
Like PSD files, TIFF (Tagged Image File Format) is one of the few file types that
support all of Photoshops features and is another great choice for archiving your
images, with lossless compression that allows you to save photos with the highest
possible image quality. The quality comes at a price though, as TIFF files can be
very large, especially when compared with JPEG files. TIFF is the universally
accepted standard for images destined for commercial printing and is compatible
with virtually all page layout programs like QuarkXPress and InDesign.
Even though TIFF files are capable of storing all of the layers, adjustment layers and
other elements youve added in Photoshop, its generally recommended that you
save all those elements in your master PSD file, then use the TIFF format to save a
flattened version of the image for print. This makes it easy to tell just from looking
at the file extension which version of your image is the master working file (.psd)
and which is the flattened, print-ready version (.tif). Also, many commercial printers
will ask for a flattened version of your TIFF file.
With InDesign now being able to import and work directly with layered Photoshop
PSD files, and both the PSD and PDF formats gaining popularity in the print
community, TIFF isnt quite as important as it once was, but it remains the print
industry standard and enjoys widespread support.

EPS
EPS (Encapsulated PostScript) is another print industry standard format thats been
around for quite a while, but its use has been in decline over the years. EPS files are
not really image files in the traditional sense. Instead, they contain a series of
instructions for how a printer should reproduce the image. They can be imported
into most page layout programs, but the encapsulated part means the files are
essentially locked and can no longer be modified unless theyre reopened in
Photoshop. A preview image must be embedded in the EPS file when you save it in
Photoshop if you want it to be viewable onscreen when working in your page layout
program, otherwise you wont be able to see it until the layout is printed. While EPS
remains an industry standard format, you probably wont use it very often unless
its the format specifically requested by your commercial printer.

PDF
Finally, while most people are familiar with PDF files for viewing, sharing and
printing electronic documents (hence the name Portable Document Format), PDF is
also gaining in popularity as a great choice for saving images destined for print.
Like the PSD and TIFF formats, PDF supports and preserves all of Photoshops
features, including the ability to use spot colors, something the EPS format does not
support. PDF gives you the choice of either JPEG compression, complete with a
Quality setting to balance image quality with file size, or lossless ZIP compression.
And the PDF format benefits from the fact that anyone with the free Adobe Reader
installed on their computer can view the image.

2.2.2 Basics of CorelDraw

The Corel Draw application is used to design advertisements, logos, cards,
brochures, newsletters and so on, for print or for the Web. It is a part of CorelDraw
Graphics Suite 12. Any artwork developed in CorelDraw is known as a drawing.
Every component created in a drawing such as a line, curve, text, symbol or image

LOVELY PROFESSIONAL UNIVERSITY

25

Graphic Tools

Notes
is called an object. Each object in a drawing stores its own attributes, such as
shape, size, position, and color. You can modify an object without affecting the
image quality. The CorelDraw is ideal for creating drawings, in which objects are
created and modified again and again while designing.
The CorelDraw is a top supplier of graphics software, including the very popular
CorelDraw program. Both creating and editing images can be done using the tools
of CorelDraw. The type of project determines the type of desktop publishing tools
that you will use. CorelDraw is one of the finest Desktop publishing software that
allows users to create illustrations containing text, graphics and photographs. Corel
has a wide range of tools which facilitate the user to edit any shape or character
effortlessly with precision, create custom color separations and fit text to curves. It
is developed and marketed by Corporation of Ottawa. All the files of Adobe
PageMaker, Microsoft Publisher and Word can be opened using this tool and other
programs can print documents to Adobe PDF using the Writer printer driver, which
such software can then open and edit every part of the initial layout and designs.
The software contains a huge range of over 1,000 fonts, provided in both TrueType
and PostScript Type 1 format. Corel is different from its opponent because of:

It is more of a graphics suite, rather than just a vector graphics program.

Users can adjust contrast, color balance, change the format from RGB to
CMYK, add special effects such as vignettes and special borders to bitmaps
using a wide range of editing tools.

One can open the bitmap directly from Corel, expansively edit the same
using Corel Photo Paint, and return to the program after saving.

It also provides a laser to cut out any drawing.

It is believed by the experts that it was the first of the Windows-based drawing
programs and had built on this early start to become far-and-away the dominant
drawing package on the PC. Its biggest Advantage and its biggest potential
disadvantage is its all-encompassing approach. In early times, this had led to
accusations of unfocused bloating, but Corel has addressed the criticisms with a far
tighter and better rationalized program with version 7.0. Even though, theres still a
huge range of functionality to cover.

2.2.3 Basics of Illustrator

Adobe Illustrator is a vector graphics editor developed and marketed by Adobe
Systems. It has varied applications, from creating print to web graphics and, for our
purposes, posters. The program is complex and requires a considerable amount of
time to master. But still it is quite easy to learn the basics and create professional
quality work. To design a poster, one just requires have the patience to get familiar
with the program. As it is recommended for most computer applications, using the
trial-and-error methodology is the best way to figure out the ins and outs of this
program.
Did u know? Adobe Illustrator was first developed for the Apple Macintosh in
1986 (shipping in January 1987) as a commercialization of Adobes in-house
font development software and PostScript file format.
Photoshop recognizes individual dots each with a color value and a location in
space. The program makes images out of pixels. In contrast, Adobe Illustrator is a
charting program which deals with objects such as squares, circles and irregular
shapes. It saves these shapes in files as geometric equations with an associated

26

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
size, color and location value. These objects can be recoloured, resized and moved
in correlation to each other. This is called scalable vector graphics. When you select
an object in Illustrator, you can move that object in front or behind other objects
present in the image or change the size of the object with respect to the other
objects in the image. Illustrator is an ideal program to use for drawing illustrations
and charts or creating posters with drawings and a lot of different size lettering.
Create New Document
Go File>New Document to create your first document. Type in a Name for the
document and click Advanced to select RGB for Color Mode as we will be working
for the screen. Click Ok after that.
Figure 2.2: New Document Dialog Box

Source: http://www.vectordiary.com/isd_post/2008/day02/new-document.gif

Illustrator Workspace
Below is the workspace and some common terms for calling it. If you are using the
latest Adobe Illustrator CS3, you will notice to new design for Floating Palette. The
rest looks about the same.

LOVELY PROFESSIONAL UNIVERSITY

27

Graphic Tools

Notes
Figure 2.3: Workspace in Illustrator

Source: http://www.vectordiary.com/isd_post/2008/day02/illustrator-interface.jpg

Toolbox
This is the handy toolbox which will be often used. By default, it comes in one single
column as shown in the screenshot above. To switch it back to the old 2 columns
toolbox, you can simply click the top left mini arrow to toggle it into 2 columns.

Notes Some of the tools like Rectangle have more tools hidden. To expand, just
click and hold the icon to reveal all the similar tools under that group.
Figure 2.4: Illustrator Toolbox

Source: http://www.vectordiary.com/isd_post/2008/day02/illustrator-toolbox.gif

28

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes

Floating Palette
This is the floating palette which contains properties for our shapes. It is commonly
used for changing colors and stroke width.
Figure 2.5: Floating Palette

Source: http://www.vectordiary.com/isd_post/2008/day02/floating-palette.gif

Saving AI Files
Lets select the type and click on the artboard and type some text. After that go to
File>Save. Select Adobe Illustrator (*.AI) for file type and name it First Drawing.
Click Ok after that. Leave the rest of the settings at default. You have successfully
saved your first file. To make any more changes you can simply open the Adobe
Illustrator file.

Selection Tools
There are two types of selection tool in Illustrator used for selection objects.

Selection Tool: Used for selecting and moving a shape. It can also be used
to resize a shape.

Direct Selection Tool: Selects a single anchor point instead of the whole
shape. Used for editing anchor point of a shape. Click once on a point to select
and hold Shift to select multiple anchor points.
Figure 2.6: Selection Tool vs. Direct Selection Tool

Selection Tool

Direct Selection Tool

Source: http://www.vectordiary.com/isd_post/2008/day03/selection-tool.gif

LOVELY PROFESSIONAL UNIVERSITY

29

Graphic Tools

Notes

Shape Tools
Now lets work on the Shape Tools. When you go to the Tool Palette and hold the
Rectangle Tool, a list of shape tools will expand out for you to pick. We will start with
the default Rectangle Tool.
Figure 2.7: Selecting Rectangle Tool

Source: http://www.vectordiary.com/isd_post/2008/day03/rectangle-tool.gif

Understanding Fill & Stroke

Click and drag out a Rectangle as shown. By default, it has a white fill and black
stroke. (Stroke is the border of the shape)
Figure 2.8: Selecting Fill and Stroke

Source: http://www.vectordiary.com/isd_post/2008/day03/rectangle-fill.gif

Changing Fill Color

Lets start changing the fill color for the rectangle. Double click the Fill from the Tool
Palette. It will pop up the Color Picker. Drag the slider to blue and select a deep blue
color. Click Ok after that.

30

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.9: Changing Fill Color

Source: http://www.vectordiary.com/isd_post/2008/day03/color-picker.gif

Removing Stroke
Click the Stroke in the Tool Palette once to swap it above Fill. Click the None icon
boxed up in red to set the Stroke to None. The black stroke will disappear.
Figure 2.10: Removing Stroke

Source: http://www.vectordiary.com/isd_post/2008/day03/remove-stroke.gif

Constrain Proportions
To draw a perfect square, we will select the Rectangle Tool. Hold Shift and drag to
draw a square. Same for the circle, we will select the Ellipse Tool and hold Shift to
drag out a circle.

LOVELY PROFESSIONAL UNIVERSITY

31

Graphic Tools

Notes
Figure 2.11: Using different Shape Tools

Source: http://www.vectordiary.com/isd_post/2008/day03/square.gif

Resizing Shapes
To resize shapes, select the shape using the Selection Tool and a bounding box will
appear. Drag the corner anchor point to resize it. To constrain to proportion while
resizing, hold Shift as you resize. Also hold Alt/Option if you want to resize from the
same position.
Figure 2.12: Resizing Shapes

Source: http://www.vectordiary.com/isd_post/2008/day03/resize_shape.gif

Rotating Shapes
Select the shape with the Selection Tool and a bounding box will appear. Move your
cursor near the anchor corner and a rotation icon will icon, click and turn it to rotate
the square. To snap at 45 degrees increment, hold Shift and turn.
Figure 2.13: Rotating Shapes

Source: http://www.vectordiary.com/isd_post/2008/day03/rotate-square.gif

32

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes

More Options for Shape Tools

Select the Star Tool. Click once on the artboard and an option will pop up. Enter the
same values below and click Ok. It will draw a star burst shape. This method can be
used to bring out more options for shape tools.
Figure 2.14: Different Options for Shape Tools

Source: http://www.vectordiary.com/isd_post/2008/day03/star-burst.gif

Drawing Straight Lines

Select the Pen Tool and click once to add the first anchor point. Move your mouse to
the next position and click again to create the second point. The two anchor points
will be connected together. Continue doing this to create a W shape as shown. To
draw a new line, click the Selection Tool (The Black Arrow Icon) and click back the
Pen Tool again.
Figure 2.15: Drawing Straight Lines

Source: http://www.vectordiary.com/isd_post/2008/day05/pen-straight-lines.gif

Closing a Path
To close a path, click back the starting point to close the shape.

LOVELY PROFESSIONAL UNIVERSITY

33

Graphic Tools

Notes
Figure 2.16: Closing a Path

Source: http://www.vectordiary.com/isd_post/2008/day05/close-path.gif

Drawing a Curved Line

Click and drag to put out the handles to create a smooth anchor point.
Figure 2.17: Drawing a Curved Line

Source: http://www.vectordiary.com/isd_post/2008/day05/pen-curve.gif

Changing Path Directions

Click and drag to create a smooth anchor point. Without releasing your mouse, hold
Alt/Option and drag the handle up to change the path direction.
Figure 2.18: Changing Direction of a Path

Source: http://www.vectordiary.com/isd_post/2008/day05/pen-curve2.gif

34

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes

Drawing a Circular Path

Click and drag to create a smooth anchor point. Continue adding points and click
back the starting point to close the path.
Figure 2.19: Drawing a Circular Path

Source: http://www.vectordiary.com/isd_post/2008/day05/pen-circle.gif

Adding Anchor Points

With the Pen Tool selected, go near the path where you want to add a new anchor
point. A plus sign will appear next to the pen, click on the path to create a new
anchor point.

LOVELY PROFESSIONAL UNIVERSITY

35

Graphic Tools

Notes
Figure 2.20: Adding Anchor Points

Source: http://www.vectordiary.com/isd_post/2008/day05/add-anchor-point.gif

Removing Anchor Points

To remove point, move your Pen Tool close to an anchor. A minus sign will appear
next to the pen. Click on the anchor point to delete it.
Figure 2.21: Removing Anchor Points

Source: http://www.vectordiary.com/isd_post/2008/day05/delete-anchor-point.gif

Converting Anchor Points

To convert a smooth anchor point to a sharp anchor point, move your Pen Tool near
the anchor and hold Alt/Option and your Pen Tool will change to an arrow shape.
Click on the smooth anchor to convert it to an anchor point. Click and drag on the
anchor point again to change it back to a smooth anchor point.

36

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.22: Converting Anchor Points

Source: http://www.vectordiary.com/isd_post/2008/day05/convert-anchor-point.gif

Moving Anchor Points

Select the Direct Selection Tool and click and on anchor you want to move. Click
and drag to change positions.
Figure 2.23: Moving Anchor Points

Source: http://www.vectordiary.com/isd_post/2008/day05/move-anchor-point.gif

Changing Anchor Directions

With the Pen Tool, you can quickly change the anchor directions. Hold
Ctrl/Command to quickly change the Pen Tool to Direction Selection Tool. Select the
anchor point you want to edit. The anchor handle will appear. Now release
Ctrl/Command and hold Alt/Option to change it to Convert Anchor Tool. Click and
drag the handles to change the direction.

LOVELY PROFESSIONAL UNIVERSITY

37

Graphic Tools

Notes
Figure 2.24: Changing Anchor Directions

Source:

http://www.vectordiary.com/isd_post/2008/day05/change-anchor-handle.gif

Tips for Using Pen Tool

Use as little anchor points your need to create your shape

Add anchor points where there is a change in direction of the

line/curve

Use shortcuts like Alt/Option or Ctrl/Command to quickly swap

to other tools to edit your path

Hold

shift to lock your path while

adding new anchor point for 45-degree increments.

2.2.4 Basics of PageMaker

PageMaker was one of the first desktop publishing programs, introduced in 1985 by
Aldus Corporation, initially for the then-new Apple Macintosh and in 1987 for PCs
running Windows 1.0.

How to Create a New Document?

Upon starting PageMaker you will see a screen offering you a variety of
initial choices of templates upon which to base your publication. In our case,
we will start with a blank presentation. After becoming familiar with
PageMaker we can always choose one of the templates to create our
publication. Close the templates-options screen by clicking on the Close
button located on the top right corner of the screen.

Go to: File 4 New. A dialogue box showing the Document Setup similar to
Figure 2.25 will appear. Here we can specify the page dimensions, orientation,
margins, number of the pages, etc. Set the inside margin to 1, all other
margins to .75 and the page size to Letter.

38

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.25: Document Setup Dialog Box

Source:
http://handouts.tamu.edu

When done, click OK. We can return to this window by clicking on: File4Document
Setup, and change or modify any of the settings at a later stage. We now have a
new document open in PageMaker. The top and bottom boundaries of the page are
indicated by pink lines and the left and right boundaries of the page are indicated
by blue lines. We must be careful to remain within these boundaries at all times, i.e.
we must place our graphics and text within these margins.

The Different Windows in PageMaker

A number of windows are open in the default PageMaker window. Figure 2.26 shows
them with their names. We will touch upon them briefly as all these windows
provide us with important tools.
Figure 2.26: Pagemaker Windows

Source:
http://handouts.tamu.edu

LOVELY PROFESSIONAL UNIVERSITY

39

Graphic Tools

1.

Notes
Tools Palette: This window displays tools that are used for drawing,
entering and editing text, selecting and dragging objects on the page and
zooming in and out of the page. We have to click on a particular tool icon to
select that tool.

2.

PageMaker Tools Window: This window can also appear as a shelf on the
top of the main PageMaker window as shown in Figure 2.25. It displays
additional PageMaker tools as convenient icons.

3.

Control Palette: This window is used for making precise changes to text
and graphics.

4.

Styles and Colors Palette: This window displays the predefined

paragraph styles and colors.

5.

Plug-in Palettes, e.g. Picture Palette: This window contains the links to
readymade graphic images that can be inserted into the document.

We can minimize these windows at any time if the screen gets too cluttered. They
can be maximized selectively for a less cluttered screen and more efficient work.

How to Insert an Image into a PageMaker Document?

Now that we have a new document open and are familiar with the different
windows we will start by making a cover page for the report, consisting of the title
and a small logo. The logo can be drawn using graphic elements like squares,
circles and lines or can be an existing image. To insert any image in a PageMaker
document we have to place it in the document. For this, go to File 4 Place. A
dialogue box prompting you for the location of the image file to be inserted appears
(Figure 2.27).
Figure 2.27: Place Dialog Box

Source:
http://handouts.tamu.edu

1.

40

Placing the image: Locate and open the image file you want to place in
the document. The pointer changes to a loaded graphic icon. Position the

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
graphic icon where you want the upper left corner of the graphic to appear
and click on the page to place the image. There
are eight square graphic handles displayed at the corners and edges of the
image indicating the image is selected.
2.

Resizing the image: The graphic handles at the corners and edges of the
image make it possible to resize the image horizontally, vertically or both. To
resize the image select the image, then select the pointer tool in the Tools
Palette. Click on one of the corner handles and drag towards the center of the
image to reduce its size. We can drag the corner handle anywhere on the page
and the graphic will get resized accordingly. To scale the image
proportionately, hold down the Shift key and then drag the handle.

3.

Moving the image: To move the image, with the pointer tool selected in
the Tools Palette, Click in the center of the image until the pointer changes to
an arrowhead. With the mouse button still held down, drag the image to any
location on the page. For our report we will place this logo near the bottomright corner of the page. To move the image horizontally or vertically in a
straight line hold down the Shift key and then drag.

Now that we have an image placed on the cover page of our report (Figure 2.28) we
will add some text and graphic elements (squares, circles etc.) and complete the
cover.
Figure 2.28: Image on the Cover Picture

Source:
http://handouts.tamu.edu

How to Draw Graphic Elements?

The logo can be completed by drawing graphic elements like squares, circles and
lines. We will make a circle and place it behind the image already on the cover.
1.

To draw the circle go to the Tools Palette and click on the circle tool (or the
ellipse tool). The pointer changes to a crosshair icon.

LOVELY PROFESSIONAL UNIVERSITY

41

Graphic Tools

2.

3.

Notes
We can make the circle by clicking on the page and holding down the Shift
key as we drag. Clicking on the circle displays the graphic handles around it,
indicating it is selected.
To scale the circle up or down drag the graphic handles on the page.

4.

To move the circle around the page, select the circle, click anywhere within
the boundaries of its eight handles and drag it around the page.

5.

To change the color of the circle, go to the Colors Palette and choose the
desired color. Here we have chosen yellow as the circles color.

6.

To bring to circle on top of the image already placed on the page, drag it on
top of the image with the left mouse button.

7.

To make the circle go behind the image go to Element 4 Arrange 4 Send

to back. Now the circle lies behind the image (Figure 2.29).
Figure 2.29: Drawing Graphic Elements

Source:
http://handouts.tamu.edu

8.

42

To align the image and the circle in a certain manner with respect to each
other select both the circle and the image and go to Element 4 Align
Objects. A window similar to Figure 2.30 will appear. The red, green and blue
rectangles shown in the white box in this window shows a preview of how the
chosen objects are currently placed with respect to each other. We can choose
from the various Align and Distribute buttons to get the result you want.

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.30: Aligning Objects

Source:http://handouts.tamu.edu

9.

After getting the right alignment click OK. We now have the circle perfectly
centered behind the image as shown in Figure 2.31. This was done using the
horizontal and vertical alignment
Figure 2.31: Adjusted Cover Picture

Source:
http://handouts.tamu.edu

Similarly we can draw the other basic geometric shapes given as options in the
Tools Palette. By default the shapes drawn are filled. If we want the shapes to be
simple outlines we can go to Element 4 Fill 4 Paper. Going to Element 4 Fill 4

LOVELY PROFESSIONAL UNIVERSITY

43

Graphic Tools

Notes
Solid creates a filled solid once again. Select the shape and try out the other
options listed under Element 4 Fill and Element 4 Stroke for interesting effects.

How to Work with Text?

Text can be inserted into PageMaker documents in numerous ways. One way is
typing it directly in the document. Other ways include inserting text created in other
word-processing applications such as Word, Word-Perfect, etc. or copying and
pasting text from other sources on the computer. For creating the caption of our
report we will type it directly in PageMaker instead of importing it from elsewhere.
1.

Select the Text tool from the Tools Palette and click it anywhere on the page
to establish an insertion point. A blinking cursor appears and we can now type
in the caption. The typed text may appear too big or too small for the cover
page depending on the text settings. We can change the size, face, spacing,
style, etc. of the font by changing the options in the Control Palette.

2.

We can also change the font by going to Type 4 Font.

3.

We can change the font size by going to Type 4 Size.

4.

We can change the font style by going to Type 4 Type Style. Check out all
the other options available under Type for playing around with the look of the
text and getting the desired look.

5.

To change the color of the text, select the text and click on the color of your
choice in the Colors Window. We can have the text in different tints of the
chosen color, too. To do this,
select the part of the text you want in a different tint and go to the drop-down
box that says Tint in the Colors Palette. Choose a tint of, say, 40% of the
original color. We will notice the tint of the chosen text lightens considerably.
In Figure 2.32, the text has two different colors and two different tints for the
blue color.

44

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.32: Final Image

Source:
http://handouts.tamu.edu

How to Insert more Pages in the Report

Now that we are done with the cover page of the report we will add more pages and
content to it.
1.

To add more pages go to Layout 4 Insert Pages. A dialogue box similar to

Figure 2.33 will appear. Here we can specify the number of pages we want to
add to the report. If we are not sure of the final number of pages we will have
in the report we can always repeat this process to add more pages. We will
add 2 more pages to the report after the current page. We have the option of
adding pages before or after the current page, as shown in Figure 2.33
Figure 2.33: Inserting More Pages

Source:
http://handouts.tamu.edu

Now the number of pages has increased to 3 and this is indicated at the
bottom bar in the PageMaker window (Figure 2.32).

LOVELY PROFESSIONAL UNIVERSITY

45

Graphic Tools

2.

Notes
By right clicking on any page selected in this bar and clicking on Remove
Pages we can remove the page. The remaining pages get renumbered
automatically.

How to Work with Columns?

Now that the cover page is done, we will make two columns in the following page
and insert text and graphics into it.
1.

Go to Layout 4 Column Guides. A window similar to Figure 2.34 will pop

up. Here we can specify the number of columns and the spacing we want
between the columns.
Figure 2.34: Column Guides Dialog Box

Source:
http://handouts.tamu.edu

Figure 2.35: Page Layout

Source:
http://handouts.tamu.edu

46

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Specify the number of columns as 2 and the spacing between the columns as .
25 inches. The page layout changes and now looks like Figure 2.35. PageMaker
will place text only within the specified columns.
2.

We can also place text into a PageMaker document from any other word
processing application. For instance, create a document in Microsoft Word and
copy the text you want in the report by selecting the text and pressing Ctrl +
C. Now click anywhere within the column bounds in the PageMaker document,
and paste the text there by going to Edit 4 Paste or by pressing Ctrl + V.
The selected text gets pasted into the column and now our page looks like
Figure 2.35.

3.

The text is not easily readable at small fonts, but what we are seeing on the
PageMaker screen is not the actual size of the text. To see how the text will
actually look go to View 4 Actual Size. Now the text looks like Figure 2.36.
This is the actual text size and if we want to change it we can do so by
selecting the text tool in the Tools Palette, selecting the text we want to resize
and changing its size in the Control Palette.
Figure 2.36: Actual Display

Source:
http://handouts.tamu.edu

4.

Another way of inserting text into a PageMaker document is to place a

text file in it. Go to File 4 Place. A dialogue box that looks like Figure 2.37 will
appear. We choose the text file we want to put into the document and click
Open.

LOVELY PROFESSIONAL UNIVERSITY

47

Graphic Tools

Notes
Figure 2.37: Place Dialog Box

Source:http://handouts.tamu.edu

The pointer changes to a loaded graphic icon. We position the graphic icon
within the bounds of the column where we want the text to begin and click on
the page to place the image. The placed text shows up as in Figure 2.38.
5.

We will notice a small red triangle where the text boxs bottom window
handle should be. This indicates that there is more text in the block that has
not been placed on the page or pasteboard. To see this extra text we need to
click on the red arrow and drag it downwards (or upwards if the red triangle is
out of the column bounds). The extra text will immediately appear in the
column.

6.

If we pull the red triangle to the bottom boundary of the column and it still
remains red, it indicates that there is still some more text to be placed. To
place this text we click once on the red triangle. The pointer changes to a
loaded graphic icon again. Now we can position this graphic icon at the top left
corner of the next column. On clicking, the remaining text gets placed there.

7.

To place larger amounts of text in the PageMaker document, or to have text

flow automatically into the next column, we can activate the Autoflow option.
For this go to Layout 4 Autoflow. To turn Autoflow off go to Layout 4
Autoflow again.

48

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.38: The Placed Text

Source:
http://handouts.tamu.edu

How to Wrap Text around an Image?

One of the most useful features of PageMaker is wrapping text around graphics in
various ways.
Example:
1.

Insert a new page with one column in the PageMaker document (by default
the number of columns in an inserted page is 1). Paste some text on the top of
the image and then place any image on the page on top of the text. The
image lies on top of the text, and hides the text below it. We can send the
image behind the text by going to Element 4 Arrange 4 Send to back. Now
the image is behind the text as shown in Figure 2.39.

LOVELY PROFESSIONAL UNIVERSITY

49

Graphic Tools

Notes
Figure 2.39: Wrapping Text Around Image

Source:
http://handouts.tamu.edu

2.

To get both the text and the image to show up and have the text wrap
around the image, click on the selection tool in the Tools Palette. Select the
image and go to Element 4 Text Wrap. A dialogue box similar to Figure 2.39
comes up. This Text Wrap dialogue box lets us specify how we want the text to
flow around the graphic boundary of the selected object. It also gives us
options for the Standoff, i.e. the distance between the text and the image after
wrapping.
Figure 2.40: Text Wrap Options

If we click on the second icon in this dialogue box (rectangular wrap) and click
OK the text flows around the image as shown in Figure 2.40. We can similarly
wrap text around any image or drawn graphic element.

50

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes

2.2.5 Basics of InDesign

Adobe InDesign is a desktop publishing software application produced by Adobe
Systems. It could be utilized to make works for example notices, flyers, leaflets,
magazines, daily papers and books. InDesign can likewise distribute content
suitable for tablet units in conjunction with Adobe Digital Publishing Suite. Graphic
designers and production artists are the chief clients, making and laying out
periodical circulations, publications, and print media. It also supports export to
EPUB and SWF formats to create digital publications, and content suitable for
utilization on tablet machines.

Caution The Adobe InCopy word processor utilizes the same formatting engine as
InDesign.

Starting an InDesign Document

Load Adobe InDesign and you should receive the InDesign Start Screen, which has
the four labelled segments indicated.
Figure 2.41: InDesign Startup Screen

Source: http://indesignsecrets.com/wp-content/uploads/2007/06/offlinetipb.png

When you start a new InDesign document the program ought to know the needed
page estimations.

LOVELY PROFESSIONAL UNIVERSITY

51

Graphic Tools

Notes
Figure 2.42: New Document Dialog Box

Source:
http://arrowprintinginc.com/system/2011/help-center/layout-templates/guidelines/
screenshots/Indesign_New_File_Dialog_02.gif

Looking at the InDesign Screen

1.

Check out the labelled chart at the highest point of the following page and
refer to regularly until you are acquainted with the different segments of the
InDesign screen.

2.

At the moment you are looking at the FIT PAGE IN WINDOW screen. That is,
the page has been reduced to fit the size of the screen.

Task Create a flyer for your college/school using InDesign.

52

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.43: InDesign Workspace

Source: http://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf

InDesign has various screen sizes which might be chosen from the View menu or by
holding down the Ctrl key on the Windows framework, or the Command key on the
Macintosh framework, and pressing a number.
Figure 2.44: Zooming in InDesign

Source: http://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf

Press Ctrl or Command a couple of times to zoom out. Hold down the Ctrl or
Command key and press 1. The screen view will be changed to show the page in
Actual (or 100%) size.

LOVELY PROFESSIONAL UNIVERSITY

53

Graphic Tools

Notes

Notes Use the Ctrl or Command key to try the following screen sizes:
Ctrl+5 or Command+5

50% view

Ctrl+1 or Command+1

100% view

Ctrl+2 or Command+2

200% view

Ctrl+4 or Command+4

400% view

Ctrl+0 or Command+0

Fit page in window

The Tools Panel

Look at the Tools panel at the left of the screen. These tools allow you to create and
control how objects are placed in a document.
Figure 2.45: Control Panel and Tools Description

Source: http://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf

InDesign incorporates many of its functions in collapsed panels at the right of the
screen. You can add or remove panels from the Panel group.
Did u know? Adobe InDesign is the direct competitor to QuarkXPress.

54

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Figure 2.46: Displaying Panels

Source: http://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf

Figure 2.47: Click on the Panel Tab or Panel Label to Collapse it

Source: http://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf

Click on the Double arrows again to collapse all the panels in the Panel Group.
Figure 2.48: Adding or Removing Panels

Source: http://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf

LOVELY PROFESSIONAL UNIVERSITY

55

Graphic Tools

Notes
Figure 2.49: The Panel can then be Closed Using its CLOSE BOX

Sourcehttp://www.gct.com.au/Sample%20Files/InDesignCS4/IDcs4_ch2.pdf
:

!
Caution In the event that you click a frame that holds text or graphics while
importing text, the text swaps the existing text or graphics.

Self Assessment
Fill in the blanks:
6.

Adobe Photoshop is one of the most powerful software applications for

image

7.

PSD stands for Photoshop .

8.

JPEG It supports 24-bit , which means it can reproduce

roughly 16.7 million shades.

9.

JPEG is whats called a file format in light of the fact that it

compresses the pictures.

10.

The GIF file format is the format of choice for web

11.

The application is used to design advertisements, logos,

cards, brochures, etc.

12.

Adobe Illustrator is a program which deals with objects

such as squares, circles and irregular shapes.

13.

Tool is used for selecting and moving a shape and can also
be used to resize a shape.

14.

PageMaker was one of the first desktop programs,

introduced in 1985 by Aldus Corporation.

15.

can likewise distribute content suitable for tablet units in

conjunction with Adobe Digital Publishing Suite.

56

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Case Study

Incisive Media Ltd. Delivers

Design-rich Content for

Print, Web, and Mobile in real-time with a
Cost-effective Editorial System Based on
QuarkXPress

ncisive Media is a leading global provider of specialty business news and

information, inprint, in person, and online. The companys principal markets
include financial services, legal and accounting services, marketing services,
technology, and risk management. With a dynamic publishing solution based on
QuarkXPress and Quark Publishing System, Incisive Media is now able to improve
collaboration among its authors and publishers to different platforms seamlessly.
Thanks to the versatility of Quark Publishing System, IncisiveMedia can decide
which desktop publishing software best suits the needs of each publication and
still have a single unified workflow system.
Cost-savings and Intelligent Content
With Quark Publishing System, Incisive Media is able to produce intelligent
content so that it can be easily reproduced and reused. This means that all the
manual, error-prone work is a thing of the past and the company can fully reap
the benefits of dynamic publishing publish more with less.
Ron Doobay, Head of Business Systems at Incisive Media, confirms: We
definitely require significantly fewer resources now to create more. Back in 2004
we were just creating print, now we are ready to deliver content in print, Web,
produce e-Books and publish to the iPad. I can categorically say that QPS enables
a company to deliver the 21st century requirements with a minimum cost base.
With QPS Quark is delivering excellent value for money.
As a global provider of information we need to deliver accurate content for print,
web and mobile almost in real time to always be competitive in an increasingly
tough market. We have also had a long-standing aim to be neutral in terms of
desktop publishing solutions, to be able to use the programme most appropriate
to the needs of our very varied product portfolio, but to do this within a top class
workflow system. Quark offered us the opportunity to achieve this, reducing our
costs, improving productivity and maximising revenues through syndication with
Quarks dynamic publishing solutions said David Worsfold, Group Editorial
Services Director at Incisive Media. Challenge Content-reuse based on labourintensive and error-prone practices Need for immediate, real-time updates to
content across all platforms Working with different formats for different
publications Quark Solutions
Dynamic

publishing solution based on QuarkXPress and Quark Publishing

Systemenabling a status-based work flow.

Results

Improved collaboration among authors

Contd...

LOVELY PROFESSIONAL UNIVERSITY

57

Graphic Tools

Notes
Easy content sharing and repurposing
Agile content syndication and solid DRM functionality for increased
revenues

Flexibility to meet changing market dynamics

Multi-channel publishing and effortless XML extraction

Desktop Publishing Software neutrality for a varied portfolio of

publications.

Questions:
1.

Give details of the Incisive Media Companys principal markets.

2.

State the use of QuarkXPress in publishing sector.

2.3 Summary

Desktop distributing (DTP) implies the practice of producing high quality

printed output.

The simplest graphic or a color photograph that is in fine detail can be

imported into a document through DTP.

Some straightforward yet impressive designs can be created with shapes

and fills, but the more complex design effects require a greater degree of
ability.

Photoshop is a graphics based program made with pictures regarded as

raster graphics.

Raster graphics contains a raster (a framework) of tiny squares called

pixels.

CorelDraw application is utilized to outline ads, logos, cards, handouts,

updates, etc. for print or for the Web.

A full collection of altering tools permit the client to adjust contrast, color
offset, change the format from RGB to CMYK, include enhanced effects for
example vignettes and unique outlines to bitmaps.

Designing a poster does not need any unique imaginative talent or abilities;
it just it just requires having the patience to get familiar with the illustrator.

2.4 Keywords
AutoCAD: It is a modifying requisition for workstation-helped configuration (CAD)
and drafting.
CorelDraw: It is Desktop publishing software that enables clients to make
illustrations holding design, message and photos.
Desktop Publishing: It is a term authored after the infrastructure of a particular
sort of programming. It is about utilizing that software to join together and adjust
content and pictures and making advanced documents.
Illustrator: It archives the aforementioned shapes in indexes as geometric size,
location and colour value. This is called scalable vector graphics.

58

LOVELY PROFESSIONAL UNIVERSITY

Unit 2: Designing and Desktop Publishing Tools

Notes
Photoshop: Image altering software developed by Adobe Systems Inc.
Printing: The symbolization, methodology, or business of preparing printed
material by method of inked sort and a printing press or by comparative means.

2.5 Review Questions

1.

What is DTP and explain its significance in todays world.

2.

What are the different tools of designing?

3.

Explain the different formats used in Photoshop.

4.

Write a short note on Photoshop DCS 1.0 and 2.0.

5.

What is CorelDraw and what are its advantages?

6.

Elaborate on Basic Illustrator Functions.

7.

Why was Pagemaker created?

8.

What is InDesign and where is it used?

9.

Explain the different elements of the InDesign screen.

10.

How is Indesign different from Pagemaker?

Answers: Self Assessment

1.

False

2.

True

3.

True

4.

False

5.

True

6.

Editing

7.

Document

8.

Color

9.

Lossy

11.

Corel Draw

10. Illustration
s
12. Charting

13.

Selection

14. Publishing

15.

InDesign

2.6 Further Readings

Books

K.S.V. Menon , Desktop Publishing for Everyone,

Film City Productions.

Sandee Adobe Creative Team, Adobe InDesign CS6 Classroom in a
Book, Adobe Press Publications.

Online links

http://www.tips-tricks.com/gph_tools2.asp

http://www.photoshopessentials.com/basics/
http://lifehacker.com/5758404/learn-the-basics-of-photoshop-thecompleteguide

LOVELY PROFESSIONAL UNIVERSITY

59

Graphic Tools

Notes
http://www.umass.edu/art/prospective_students/application_guide/
indesign_basics.pdf

60

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes

Unit 3: Introduction to Photoshop

CONTENTS
Objectives
Introduction
3.1 Photoshop Workspace
3.2 Working with Images
3.2.1 Hue, Saturation and Brightness
3.2.2 Types and Characteristics of Digital Images
3.2.3 Bitmap (Raster) and Vector Images
3.2.4

Resolution and Size

3.3 Cropping in Photoshop

3.4 Color Mode in Photoshop
3.5 Summary
3.6

Keywords

3.7 Review Questions

3.8 Further Readings

Objectives
After studying this unit, you will be able to:
Explain

the photoshop workspace

working with images

Discuss

Describe

cropping and

color mode in photoshop

Introduction
Adobe Photoshop is an industry standard for raster graphic manipulation, creation
and altering. As a professional image editing software bundle, it accompanies
various tools for modifying photographs. It could be utilized by specialists and
beginners alike. It offers a huge number of filters and plugins which enable you to
add cool effects to your pictures. Likewise, it has a premium set of image
transformation tools. In addition to all else things, the most cutting edge Photoshop
version accompanies enhanced vector graphics and 3D altering capabilities. You
can effectively make vector-based 2D pictures, for instance website logos, and then
apply them to a 3D object with brilliant results.
Photoshop was released as a commercial graphic editing program in 1990. Since its
first release, it has become more and more complex. Each new version
accompanies new effective features. The current version of Photoshop - CS4, is

LOVELY PROFESSIONAL UNIVERSITY

61

Graphic Tools

Notes
significantly more than an altering program for your computerized pictures. It backs
a tremendous number of tools for creating graphics for your site. With Photoshop,
web designers can effortlessly make an online sites layout utilizing a set of vector
based tools distinctive shapes, styles, gradients and masks are available. Once
the site outline is completed, Photoshop allows you to slice up your image for use
in your website.
Additionally, you can Save for web all your .PSD projects in various web optimized
formats including the popular .JPG and .GIF.
In this unit, you will be learning some basic tips on using the tools available in
Photoshop

3.1 Photoshop Workspace

The work region of Photoshop can be intimidating to work with because of all the
complex functionality yet with a brisk breakdown of the accessible features and
their utilization; you will be ready to comfortably navigate the work area with ease.
The Photoshop workspace comprises of five primary components: Toolbox, Palettes,
the Application Bar, the Options Bar and the Document Window. An excellent aspect
regarding utilizing Photoshop is that its workspace interface is exceptionally
comparative to that of different features in the Adobe Creative Suite, for instance
Indesign and Illustrator.

Toolbox
This contains selection tools, painting and editing tools, foreground and background
color selection boxes, and viewing tools. To select, simply click on the icon on the
toolbox (the name of each tool will appear by positioning the pointer over the icon).
A small triangle at the bottom corner of the icon indicates the presence of
additional hidden tools.

62

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes
Figure 3.1: The Toolbox

Source: http://www.mediacollege.com/adobe/photoshop/tool/images/toolbox.gif

Palettes
It controls the behavior of its tools. Windows menu displays a list of available
palettes. When selected, the palette will appear as a floating window on the opened
workspace. To activate a palette click on its tab.
The following are the common palettes:

Color: Displays the color values for the currently selected foreground and
background colors

Swatches: Displays a generic set of colors, but the true value of the
Swatches palette is in its ability to load custom swatch collections

Layers:

Displays all the layers in an image

History: Records and displays individual changes made to an image and

allows for changes to be undone.

LOVELY PROFESSIONAL UNIVERSITY

63

Graphic Tools

Notes
Figure 3.2: The Palette Tabs

Source:
http://www.adorama.com/alc/files/

The Application Bar

The Application Bar, new to Photoshop CS4, is located across the top of the screen.
It contains the old menu bar, along with a number of other controls, for example a
dropdown zoom menu, a button for launching Adobe Bridge, and a button for
viewing extras. The menu bar contains controls for managing and editing files,
manipulating images, managing layers, and more.
Figure 3.3: The Application Bar

Source: http://www.adorama.com/alc/files/e502011150c1379a0e3700e09a2674d8.jpg

Options Bar
The Options Bar is located below the Application Bar. The options change
depending on the tool you have selected. For example, when you select the Type
tool, options pertaining to text editing will appear across the bar.
Figure 3.4: The Options Bar

Source:
http://www.adorama.com/alc/files/

64

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes

Document Window
The Document Window displays the file youre working on.

Self Assessment
State whether the following statements are true or false:
1.
2.
3.

Windows menu displays a grid of available palettes.

The Application Bar is located across the bottom of the screen. It contains
the old menu bar, along with a number of other controls.
The Options Bar is located below the Application Bar.

3.2 Working with Images

To create a new image, follow these steps:
Click File from the Application Bar.
Click New. A dialog box will open, allowing you to define the following elements of
your image:

Name

- allows you to name your picture.

Size - permits you to decide ahead of time the width and height of your
picture. Photoshop offers preset extents for measuring your picture, or you
can modify your particular size utilizing numerous sorts of estimations
incorporating pixels, centimeters, inches, and millimeters.

Resolution - permits you to set the picture resolution. A resolution of 72

ppi (pixels for every inch) is for the most part utilized for Internet pictures.
Depending on if you wish to utilize your pictures for print or film, they will be a
higher resolution.

Color Mode - permits you to control the color mode of your picture. The
standard color mode is RGB (Red Green Blue). You can likewise decide to make
your picture in grayscale, bitmap, and then some. Certain modes will restrict
your color range.

Background Content - you to pick the initial background color of your

picture.

When you are done with your selections, click OK.

LOVELY PROFESSIONAL UNIVERSITY

65

Graphic Tools

Notes
Figure 3.5: New Image Dialog Box

Source: http://whatis.techtarget.com/WhatIs/images/

To open an existing image, follow these steps:

1.

Click File from the Application Bar.

2.

Click Open.

3.

Navigate to your saved file.

4.

Click Open.

To save an image, click File and then click Save.

3.2.1 Hue, Saturation and Brightness

Hue, saturation, and brightness are parts of color in the red, green, and blue (RGB)
plan. The aforementioned terms are most frequently utilized as a part of reference
to the color of every pixel in cathode ray tube (CRT) monitors. All conceivable colors
could be specified as hue, saturation, and brightness (also called brilliance ), all in
all as colors could be represented as the R, G, and B components.
Most sources of visible light contain energy over a band of wavelengths. Hue is the
wavelength within the visible-light spectrum at which the energy output from a
source is greatest. This is shown as the peak of the curves in the accompanying
graph of intensity versus wavelength. In this example, all three colors have the
same hue, with a wavelength slightly longer than 500 nanometers, in the yellowgreen portion of the spectrum.

66

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes
Figure 3.6: The RGB Graph

Source: http://whatis.techtarget.com/WhatIs/images/hsb.gif

Saturation is the concentration of the color, measured in percent from the center of
the cone (0) to the surface (100). At 0% saturation, hue is meaningless. Here, the
red curve represents a color having low saturation, the green curve represents a
color having greater saturation, and the blue curve represents a color with fairly
high saturation. As saturation increases, colors appear more pure. As saturation
decreases, colors appear more washed-out.
Brightness is a relative expression of the intensity of the energy output of a visible
light source. It can be expressed as a total energy value (different for each of the
curves in the diagram), or as the amplitude at the wavelength where the intensity is
greatest (identical for all three curves). In the RGB color model, the amplitudes of
red, green, and blue for a particular color can each range from 0 to 100 percent of
full brilliance. These levels are represented by the range of decimal numbers from 0
to 255, or hexadecimal numbers from 00 to FF. 3.2.2 Types and

Characteristics of Digital Images

Different digital image types and characteristics are:

Bitmap (raster) and Vector:A bitmap graphic is composed of many tiny

parts, called pixels. They are often of many different colours and it is possible
to edit each individual pixel. Vector graphics are created in graphics packages
and consist of shapes called objects. It is possible to edit each object
separately, for example, change the shape, colour, size and position.

Bit Depth: It is determined by the number of bits used to define each

pixel.

Colour Mode: The colour mode of a picture indicates which fundamental

set of colours is utilized to make up a picture. Some regular fundamental sets

LOVELY PROFESSIONAL UNIVERSITY

67

Graphic Tools

Notes
of colours used to make up full colour pictures are Red, Green, and Blue (RGB
mode) and Cyan, Magenta, Yellow, and
Black (CMYK mode; Black is stood for by the letter K). Colours inside colour
modes are saved in their particular colour channels. You can see the channels
in the Channels palette.

File Format: A file format defines the structure and type of data stored in a
file. It is a standard way that digital image is encoded for storage in a
computer file. Commonly used file formats are JPEG, GIF, TiFF, etc.

3.2.3 Bitmap (Raster) and Vector Images

Bitmaps
A bitmap image is a computer file used to store a picture. It consists of tiny blocks
called pixels:

a 4 x 3 pixel image = 12 pixels total

Example: The picture above comprises of only 12 pixels so in all actuality might
show up as no more than a modest grey dot. The gaps you see between the pixels
dont truly exist they are only indicated for clarity.
Imagine each pixel to be like a tiny square light bulb. Each pixel can be any colour
you want and any brightness.
You cant illuminate part of a pixel. Real images are of course a lot more complex
and consist of many more pixels.
Example: The example below is still rather blocky and crude, but you can begin
to see how a picture can be made up from pixel building blocks:

68

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes
Figure 3.7: A Magnified Bitmap Image

Squint at the image, or step back from your monitor and you will see it is a close up
image of an eye. In real bitmap images, the pixels are tiny dots so the illusion of a
smooth and realistic image is created:
Figure 3.8: The Squint Image of the above

Vectors
Programs like Flash draw using vectors. A very simple vector drawing might look
like this:

LOVELY PROFESSIONAL UNIVERSITY

69

Graphic Tools

Notes
Figure 3.9: A Simple Vector Image

In a vector drawing, you create control points. The lines in a vector drawing are
created by the software and join up the control points that the user has drawn.
There are 4 control points in the drawing above (3 are little white squares, the last
one is dark to indicate that it is being worked on). There is far more to be explained
about vector graphics, but hopefully the illustration above will be enough for you to
see immediately how vector graphics differ from bitmap graphics.
That concludes our brief look at the difference between bitmap and vector graphics.
Be aware that although almost every graphics program you encounter will be
primarily a vector (drawing) or bitmap (painting) program, it will probably offer
both types of graphic and the chance to mix them together.

3.2.4 Resolution and Size

Resolution, or DPI refers to the number of dots, or pixels, on a linear inch of an
image. The web displays graphics at 72 DPI, yet sometimes your client will hand
you a 450 dpi image. PhotoShop can help you make the transition from a clunky,
slow downloading file to speedy 72 DPI.
PhotoShop can also help you resize an image. Lets face it, things arent always the
way we want them. You can shrink or stretch an image to fit your liking, or you can
cut out a small part of an image and make it larger.

Resolution
As previously mentioned, all web images should be set at 72 dots per inch. This can
be achieved through scanning, or by manually changing DPI settings in PhotoShop.
Adding or subtracting pixels is easy. Deciding what color to make the new pixels is
another story.

70

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes

Notes PhotoShop is just a computer program, so it doesnt even know if a new

pixel is part of a line, or if its part of someones face. PhotoShop doesnt even
know what a face is!
When changing resolution, PhotoShop runs complicated algorithms on an image to
decide exactly how to change it. PhotoShop does an amazing job of adding and
subtracting pixels, but it isnt magic. Usually you can only move up or down in
resolution by about 1/3 before the image really suffers.

Changing Resolution (but not size) for Web Images

Sometimes youll have an image that was scanned at a higher or lower resolution
than you need. Its size is fine, youll only need to change the resolution.
1.

Click Image-> Image Size

Figure 3.10: Image Size Dialog Box

Source:
image002.jpg

http://www.awdsf.com/courseware/photoshop/ps2_ImageSize_Resolution_files/

2.

Uncheck Resample Image

3.

Change the Resolution to 72

Image Size
When you instruct PhotoShop to change the size of an image, it merely spreads out
or scrunches the image pixels. Pixels spread outimage gets bigger.
On the other hand, if youre trying to make an image larger, and still keep your
current dpi, well then PhotoShops got its work cut out for it. To make an image
larger, PhotoShop must spread pixels apart. To keep resolution the same while
stretching, PhotoShop must add new pixels to the image and decide what color they

LOVELY PROFESSIONAL UNIVERSITY

71

Graphic Tools

Notes
should be. When shrinking an image, PhotoShop must decide which pixels to
remove.
PhotoShop is really good at adding and removing pixels, but you can generally only
increase or decrease size by about 1/3 before images start looking yucky.

Work on a Copy when Changing Sizes

Changing image size actually changes the color information in the image, so you
might want to save a copy before resizing an image forty times to decide how you
like it. Every time PhotoShop changes the image, it removes or adds pixels, slightly
lowering image quality.

Changing Size, but not Resolution for Web Images

1.

Click Image -> Image Size

2.

Make sure there is a check in Resample Image

Resample Image instructs PhotoShop to keep the resolution the same, no
matter what you do to the size. If you make an image bigger, PhotoShop will
have to add pixels. If you shrink the image, PhotoShop will have to remove
pixels. There are three resample image choices. Use Bicubic its the best.
Figure 3.11: Image Size Dialog Box

Source:
image004.jpg

http://www.awdsf.com/courseware/photoshop/ps2_ImageSize_Resolution_files/

3.

Change the Pixel Dimensions of the image, not the print size.

4.

Click OK

Caution PhotoShop was designed for both print and web work. Thus, the
program gives you the option to change print dimensions or pixel dimensions.
As a web designer taking a web design course, you dont care about print size;
your only concern is pixel Dimensions.
Dont bother changing the print dimensions.

72

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes

Self Assessment
Fill in the blanks:
4.

Color Mode permits you to control the mode of your

picture.

5.

Most sources of visible light contain energy over a band of

6.

Saturation is the of the color, measured in percent from the

center of the cone to the surface.

7.

is a relative expression of the intensity of the energy output

of a visible light source.

8.

Real images are of course a lot more and consist of many

more pixels.

9.

When changing resolution, PhotoShop runs complicated on

an image to decide exactly how to change it.

3.3 Cropping and Color Mode in Photoshop

Cropping is the process of removing portions of an image to create focus or
strengthen the composition. You can use the Crop tool to select an area of an image
and discard everything outside this area. The tool is located third from the top in
the Photoshop Toolbox, on the left side. Although cropping reduces the dimensions
of an image, it is not the same as resizing. Whereas resizing reduces or enlarges
the entire image and everything in it, cropping does not alter the size of the image
content at all. The following steps will demonstrate how to crop an image in
Photoshop.

Open an Image
To practice with the crop tool, open an image in Photoshop; click File>Open,
browse for the image on your computer, and click Open. For the purposes of this
tutorial, a photo will work well, though any type of image will do.
Figure 3.12: Open an Image

Source: http://graphicdesign.about.com/od/howto/ss/photoshop_crop_all.htm

Choose the Crop Tool

Click on the crop tool icon on the Photoshop toolbar (pictured). You can also use the
keyboard shortcut c. When you roll over your photo, the cursor will resemble the
crop tool icon, unless you have your cursors set to precise in the Photoshop
preferences.

LOVELY PROFESSIONAL UNIVERSITY

73

Graphic Tools

Notes
Figure 3.13: Choose the Crop Tool

Source: http://graphicdesign.about.com/od/howto/ss/photoshop_crop_all.htm

Select the Crop Area

Position your cursor where you want to start your crop, which will depend on what
you want to cut out of your photo. Left-click and drag to select the area that you
want to remain in your photo. If you want to adjust the starting point of your crop,
you can hold down the spacebar to move the selected area, then release it to
continue drawing your crop square.
Figure 3.14: Select the Crop Area

Source: http://graphicdesign.about.com/od/howto/ss/photoshop_crop_all.htm

Remember the area you are selecting is the part of the photo that will be keptthe
rest will be removed. Release the mouse button to finish selecting your crop area.
You can now click and drag your crop square to move it, and drag the corners to
adjust it. To cancel the crop, hit the Esc key on your keyboard.

74

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes

Crop the Photo

Notice that the area outside of your crop is darker. This will be cut out when you
crop your photo. To complete the crop, double-click inside of your crop area or hit
the enter key on your keyboard. You are left with your newly cropped photo.
Figure 3.15: The Cropped Photo

Source: http://graphicdesign.about.com/od/howto/ss/photoshop_crop_all.htm

Resizing Images with the Crop Tool

The crop tool is also handy for resizing images, without using the Image>Image
Size command. With the crop tool still selected, notice the toolbar at the top of
your screen has blank fields for width, height and resolution (pictured). You can fill
these fields in with dimensions of your choice, then crop the image to immediately
resize it to those dimensions. For example, enter a width of 300 px and a height
of 200 px with a resolution of 72. Try to crop your photo and notice the aspect
ratio is stuck to fit your dimensions. Finish the crop and you have a 72 dpi 300x200
photo. Here you are achieving both a crop and a resize in one step. You can also fill
in only one or two of these fields, allowing you to crop photos to a specific width or
height and let the other dimension work out for itself.
Figure 3.16: Enter Your Dimensions

Source: http://graphicdesign.about.com/od/howto/ss/photoshop_crop_all.htm

LOVELY PROFESSIONAL UNIVERSITY

75

Graphic Tools

Notes

Notes You can also enter inches by using the abbreviation in instead of px.
This is helpful for cropping a photo to a common size for printing, such as 4x6
inches at 300 dpi. Remember you dont actually have to crop anything out of
your photo to use this resize function, simply enter your dimensions and select
the entire image with your crop tool, and it will still be resized. Be careful
about selecting dimensions that are larger than your actual photo, which
would result in a loss of image quality.
Source: http://graphicdesign.about.com/od/howto/ss/photoshop_crop_all.htm

Task Crop a HD Image to the resolution of 420X340.

3.4 Color Modes in Photoshop

There are numerous modes used to measure and depict color. The RGB color model
is dependent upon the hypothesis that every visible color could be made utilizing
the primary additive colors red, green and blue. The aforementioned colors are
regarded as primary additives since when joined in equivalent measures they
generate white. The point when two or three of them are joined in distinctive
measures, different colors are produced. For instance, joining red and green in
equivalent measures makes yellow, green and blue makes cyan, and red and blue
makes fuchsia.
You can specify the colour mode in the Image ->Mode menu. Colours within most
colour modes are stored in colour channels.
The colour modes available in Photoshop are:

RGB Colour Mode: There are various types of color modes through which
one can work in Photoshop. One of the most prominent color modes in
Photoshop and the other graphic softwares is the RGB color mode. RGB refers
to Red, Blue and Green which are the primary colors.
Figure 3.17: The Mode of this Document is RGB Color, so it Contains
three Channels

Source: http://www.graphics.com/sections/peachpit/2012/colormodels/2.jpg

76

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes
Combining these 3 colors in different colors can create a total of 16.8 million
colors. RGB mode is used when the images are published for the internet and
have to be displayed on the computer screen. All the colors have a value of
255 each and hence changing the value from 0 to 255 for each color produces
16.8 million colors. If all the 3 values are equal then a neutral gray is
produced. If the value of a color is higher than the other colors then a color
created has more tones or tints of the color having the highest value

CMYK Colour Mode: The CYMK color scheme or mode is another very
popular color scheme in Photoshop. The CYMK color scheme is generally used
when the image or the graphic created is to be printed on paper. This scheme
is based on the light absorbing quality on paper. CYMK images comprises of
colors produced from the combination of 4 colors of cyan, magenta, yellow
and black. Like the RGB mode, the user has to enter values for each color to
get the desired color.
Figure 3.18: We Converted the Document to CMYK Color Mode,
which Upped the Number of Channels to Four

Source: http://www.graphics.com/sections/peachpit/2012/colormodels/3.jpg

Lab Color Mode: It is a three-channel mode, was developed for the

purpose of achieving consistency among various devices, such as between
printers and displays. Lab Color files are device-independent, meaning their
color definitions stay the same regardless of how each output device defines
color. The channels represent lightness (the image details), the colors green to
red, and the colors blue to yellow. The lightness and color values can be edited
independently of one another. Although Photoshop uses Lab Color to produce
conversions between RGB and CMYK Color modes internally, Photoshop users
like us rarely, if ever, need to convert files to this mode.

Multichannel images: It contain multiple 256-level grayscale channels. If

you convert an image from RGB Color to Multichannel mode, its Red, Green,
and Blue channels are converted to Cyan, Magenta, and Yellow (as a result,
the image may become lighter and the contrast reduced). Some Photoshop
pros assemble individual channels from several images into a single
composite image by using this mode.

Apart from Grayscale mode there are the monotone, duotone, Tritone and
the Quadtone modes. The Monotone mode refer to the use of only one color,

LOVELY PROFESSIONAL UNIVERSITY

77

Graphic Tools

Notes
the Duotone mode refers to the use of only two colors, the Tritone mode refers
to use of only 3 colors and the Quadtone mode refers to the use of four colors.

Self Assessment
State whether the following statements are true or false:
10.

Cropping is the process of adding portions of an image to create focus or

strengthen the composition.

11.

The crop tool is also handy for resizing images.

12.

Combining red, yellow and blue in different colors can create a total of 16.8
million colors.

13.

Lab Color Mode is a three-channel mode, was developed for the purpose of
achieving consistency among various devices, such as between printers and
displays.

14.

Multichannel images contains multiple 16-level grayscale channels.

15.

The Tritone mode refers to use of only 3 colors.

Case Study

The History of Adobe

Photoshop

dobe Photoshop has become the standard for graphic editing

applications and is one of the bestselling graphic editing software
programs to date. Since its release in 1991, Photoshop has enjoyed
enormous popularity in both the professional and consumer markets; so much
in fact, that the word photoshopping has become a verb. Learn about the
history of Photoshop and how the software went from being a college students
personal program to an industry leader in little over a decade.
History of Adobe
Founded in 1982 by two former Xerox employees, Charles Geschke and John
Warnock, Adobe was an early pioneer in the software field. Adobe was located
in Northern California in what is now known as Silicon Valley. The companys
first venture was into desktop publishing with the development of PostScript, a
programming language for printing and font applications. Soon after selling
PostSricpt to Microsoft, Adobe, in conjunction with Apple, began working on its
first graphic application, Illustrator. Originally designed for use on Macintosh
systems, Illustrator is a vector-based drawing application that features
pinpoint accuracy.
Notes Development of Photoshop
Thomas Knoll, a college student in Michigan, designed a graphics application
that could be used on his computer in 1987. He named the program
Photoshop and his brother John brought the program to California the following
year, where he demonstrated it for executives from Adobe and Apple. Adobe
bought the program and hired the brothers to continue working on it,
developing add-ins and fine tuning the programming language. Photoshop
Versions

78

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes
The first version of Photoshop was only compatible with Apples Macintosh
computer line. Compared with later versions, the first Photoshop was rather
limited in its abilities. Users could alter a photograph or graphic on the pixel level
and use the edited image in media-based forums such as computers, television
and film. In 1992, Adobe released a version that was compatible with computers
running the Windows system. The following Contd...

year, they released a version that could be used on IRIX and Solaris,
operating systems used mainly by programmers. Adobe eventually
released 10 versions of the program using the Photoshop name, ending
with version 7.0.1, which was released in 2002. Subsequent versions of
the program were renamed Photoshop CS and were bundled with other
products in Adobes Creative Suite.
Photoshop CS
The first version of Photoshop CS was released in 2003 and came
bundled with Bridge, Illustrator, InDesign and Version Cue; the premium
edition also included Acrobat, Dreamweaver and GoLive. Photoshop CS2
was released in 2005 and CS3 came out in 2007. CS3 included the
addition of three Macromedia programs, Dreamweaver, Flash and
Fireworks.CS4 was released in 2008 and contained several more media
programs. All of the programs in the CS bundle are designed to be used
as cross platforms. For example, a document created in Photoshop can
be exported to Flash for animation and imported into a webpage using
Dreamweaver.
Photoshop Elements
Photoshop Elements is a budget version of Photoshop; it can perform
many of the same functions as the original version but at a much lower
cost. Elements was designed primarily for photograph editing, but it does
not have all of the exportation functions found in the CS line of products.
Photoshop Elements was first introduced in 2001 and the application is
regularly upgraded with new features.
Questions:
1.
2.

Who was the designer of Photoshop? And in which year it was

used for first time.
Explain the Photoshop product and its features.

3.5 Summary

When you instruct PhotoShop to change the size of an image, it merely

spreads out or scrunches the image pixels.

To keep resolution the same while stretching, PhotoShop must add new
pixels to the image and decide what color they should be.

Changing image size actually changes the color information in the image,
so you might want to save a copy before resizing an image forty times to
decide how you like it.

LOVELY PROFESSIONAL UNIVERSITY

79

Graphic Tools

Notes
Every time PhotoShop changes the image, it removes or adds pixels,
slightly lowering image quality.

Whereas resizing reduces or enlarges the entire image and everything in it,
cropping does not alter the size of the image content at all. The following
steps will demonstrate how to crop an image in Photoshop

To practice with the crop tool, open an image in Photoshop; click

File>Open, browse for the image on your computer, and click Open. The
RGB color model is dependent upon the hypothesis that every visible color
could be made utilizing the primary additive colors red, green and blue. One
of the most prominent color modes in Photoshop and the other graphic
softwares is the RGB color mode.

All the colors have a value of 255 each and hence changing the value from
0 to 255 for each color produces 16.8 million colors.

If the value of a color is higher than the other colors then a color created
has more tones or tints of the color having the highest value CMYK Colour
Mode: The CYMK color scheme or mode is another very popular color scheme
in Photoshop.

Although Photoshop uses Lab Color to produce conversions between RGB

and CMYK Color modes internally, Photoshop users like us rarely, if ever, need
to convert files to this mode.

If you convert an image from RGB Color to Multichannel mode, its Red,
Green, and Blue channels are converted to Cyan, Magenta, and Yellow (as a
result, the image may become lighter and the contrast reduced).

Some Photoshop pros assemble individual channels from several images

into a single composite image by using this mode The Monotone mode refer to
the use of only one color, the Duotone mode refers to the use of only two
colors, the Tritone mode refers to use of only 3 colors and the Quadtone mode
refers to the use of four colors.

3.6 Keywords
Brightness: It is a relative expression of the intensity of the energy output of a
visible light source.
CYMK: It is a subtractive color model, used in color printing, and is also used to
describe the printing process itself.
DPI: It is a measure of spatial printing or video dot density, in particular the
number of individual dots that can be placed in a line within the span of 1 inch.
Hue: The property of colors by which they can be perceived as ranging from red
through yellow, green, and blue, as determined by the dominant wavelength of the
light.
Palettes: A panel or palette is a box (usually located on the right hand side of the
screen, but moveable) that allows you to change options associated with a
Photoshop feature.
Quadtone: It is a mode of working in image manipulation software that permits
printing of image with four inks, each with its own reproduction curves.

80

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes
Resolution: It is the term used to describe the number of dots, or pixels, used to
display an image.
RGB: It is an additive color model in which red, green, and blue light are added
together in various ways to reproduce a broad array of colors.
Saturation: It refers to the actual amount or strength of color that is apparent in a
photograph.

3.7 Review Questions

1.

Explain the different components of the Photoshop workspace.

2.

What is the importance of Palettes in Photoshop?

3.

What are the different attributes required in opening a new image in

Photoshop?

4.

Write a short note on Hue, Saturation, and Brightness.

5.

What are the different characteristics of Digital Images?

6.

Differentiate between bitmap and vector images.

7.

Explain the concept of Resolution in Photoshop.

8.

What do you mean by Image Size?

9.

Elaborate on the process of cropping in Photoshop.

10.

Write a short note on Color Modes.

Answers: Self Assessment

1.
3.

False
True

2.
4.

False
Color

5.

Wavelengths

6.

7.

Brightness

8.

Concentratio
n
Complex

9.

Algorithms

10.

False

11.

True

12.

False

13.

True

14.

False

15.

True

3.8 Further Readings

Books

Peter Bauer, Photoshop CS6 for Dummies, Wiley Publishing Inc.

Barbara Obermeier, Ted Padova, Photoshop Elements 10 for Dummies,
Wiley Publishing Inc.
Steve Johnson, Adobe Photoshop CS6 on Demand, Perspection Inc.

LOVELY PROFESSIONAL UNIVERSITY

81

Graphic Tools

Online links

Notes
http://www.photoshop.com/tutorials
http://www.smashingmagazine.com/2008/12/07/50-excellentdigitalphotography-photoshop-tutorials/ http://www.goodtutorials.com/tutorials/photoshop http://psd.tutsplus.com/

Unit 4: Selecting Tools in Photoshop

CONTENTS
Objectives
Introduction
4.1 Making Selections
4.1.1

The Marquee Tools

4.1.2

Lasso Tools

4.2 Editing Selections

4.2.1

Refine Edge

4.3 The Painting Tools

4.3.1

Paint and Edit Tool Options

4.3.2

Drawing

4.3.3

Retouching Tools

4.4 Summary
4.5

Keywords

4.6 Review Questions

4.7 Further Readings

Objectives
After studying this unit, you will be able to:
Explain

how to make selections

Discuss

how to edit selections

Discuss

the painting tools

Introduction
Learning about Photoshop is also a good way to learn imaging concepts. Whether
you are working on a webpage, Powerpoint presentation, or a document to be
printed, Photoshop can be used to enhance your images. Participants will learn
about image file types, cropping images, compositing (putting several images
together), ghosting images (for use as webpage backgrounds), using layers,
creating masks, applying filters, and formatting text with bevels and other effects.

82

LOVELY PROFESSIONAL UNIVERSITY

Unit 3: Introduction to Photoshop

Notes

4.1 Making Selections

The selection tools are used to facilitate the process of making selections of shapes,
colors, and objects inside of Photoshop, and positioning them in the working image
area. With tools like the magnetic lasso and magic wand, Photoshop packs a
powerful array of selection gadgets.

LOVELY PROFESSIONAL UNIVERSITY

83

Graphic Tools

Notes
In Photoshop, selections are used to work in a specified area, while not altering any
of the area around it. In many regards, a selection is a lot like a stencil. You basically
are enabling yourself to only paint in one area while the rest of your canvas is left
unaffected.

4.1.1 The Marquee Tools

The Marquee tool creates geometric, selection shapes like squares, rectangles and
circles. Select either the elliptical marquee tool or the rectangular marquee tool,
then click and drag to create rectangles and ellipses. Use the keyboard shortcut M
or Shift M to select the marquee tool.
Figure 4.1: The Marquee Tool

Fill a selection with any foreground color by quickly pressing Alt+Backspace or

Option+Backspace for the Mac.
Figure 4.2:
A Selection

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueetoolselection.png

84

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Alternating white and black dashes indicated what has been selected. Click away
from a selection to immediately start another selection.

Marquee Options Bar

Located at the top of the stage are the options available for this tool. The first four
icons seen here allow one to add or subtract additional selections from a prior
selection. Move the mouse over each icon to see which does what.

Marquee Tool Options

Figure 4.3: Marquee Tool Options

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueetooloptions.png

The basic options available in the Marquee Tool are:

Create
Add

a New Selection
to

Selection

Subtract

from Selection

Intersect

with Selection

Now we will learn about each option in detail.

Selection Options
The first option is the selection option which is used to create a new selection. The
steps to follow are given below:

Create any selection: Alternating white and black dashes indicated what
has been selected.
Click away from a selection to immediately start another selection.
Figure 4.4: First Step to Create a Selection

LOVELY PROFESSIONAL UNIVERSITY

85

Graphic Tools

Notes
Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueecreatenewselection.png

Add another selection to an existing selection: This is used to add a

new selection to an existing one. Figure 4.5 shows the addition of a new
selection to the one in figure 4.4.
Figure 4.5: Adding a Selection

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueeaddtoselection.png Subtract a selection: We can also remove or subtract a

selection from a given image.

Figure 4.6 shows the deletion of a rectangular selection from the selection in
figure 4.5.
Figure 4.6: Subtracting a Selection

86

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueesubtractselection.png

Select the Intersecting Pixels: This option is used to select the

intersecting pixels of an image.
Figure 4.7: Selecting the Intersecting Pixels

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marqueemarqueeselectinter
secting.png

Feathering Box
A feathered option exists and an anti-aliased checkbox. Feathering nicely blends
the edges of a selection with pixels of the background, which in turn softens the
transition.
Figure 4.8: Feathering Box

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueefeatheredbox.png

Anti-Alias Box
Anti-aliasing prevents your round selections from having rough, square-like edges.
Think back to the graphics that existed in the 1980s. Drawings and computer
graphics had pixilated, edges especially curves and circular edges.
Figure 4.9: Anti-Alias Box

LOVELY PROFESSIONAL UNIVERSITY

87

Graphic Tools

Notes
Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueeantialiasbox.png

Marquee Style Box

The style box is a drop-down list with three options. Normal allows you to create
selections as you please. A fixed-ratio selection forces every selection to match that
ratio. Ratios of 1:1 make squares and perfect circles. The fixed height allows you to
specify a height and width (in pixels) for each new selection made.
Figure 4.10:
Marquee Style Box

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueestylebox.png

Elliptical Marquee Tool

As the name states, this tool can create selections in the form of ellipses and
circles. While dragging with the elliptical marquee tool, pressing down the shift key
creates a perfect circle.
Figure 4.11: A Perfect Circle

88

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueeperfectcircle.png

Use the space bar to drag the selection into place while still holding down the
mouse button.

Rectangular Marquee Tool

Use this tool to create selections in the form of rectangles or squares. While
dragging a new selection you may also press shift or option to create a perfect
square. Also pressing the space bar, will stop resizing the selection and instead
allow you to move the whole selection about the canvas. Use this technique to
reposition and select geometric shapes.
Figure 4.12: Create a Perfect Square

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/marquee/
marqueeperfectsquare.png

4.1.2 Lasso Tools

The Lasso Selection Tools allow you to make selections of irregular shapes. Using
the ordinary lasso tool, simply click and drag a freehand selection with your mouse.
The polygonal lasso tool exists as a secondary tool to the original lasso tool. With
the Polygonal Lasso Tool, click to make various points which will define a selection,
and finish your selection by clicking the starting point. Press shift+L to alternate
through the lasso tools until you have the polygonal lasso tool selected. This tool is
great for extracting pieces of photos that have straight edges or a semi polygonal
shape to them

LOVELY PROFESSIONAL UNIVERSITY

89

Graphic Tools

Notes
Figure 4.13: Lasso Tool

Source:
http://artist.tizag.com/screencaptures/photoshop/toolcaptures/lassotool/
polygonalextraction.png

The Magnetic Lasso Tool sort of combines the first two tools mentioned here. You
click once, and begin to drag a freehand selection around the object you wish to
select. The magnetic lasso tool tries to automatically create points itself while you
follow the edge of your object (you can define points by clicking if needed). The end
result is a much smoother selection than the polygonal lasso tool will make.
Figure 4.14: Magnetic Lasso Tool

http://photolesa.com/sites/default/files/2012/teeth_1.jpeg

90

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Figure 4.15: Figure Edited Using Magnetic Lasso Tool

Source: http://mediamilitia.com/wp-content/uploads/2009/12/extract/ml_1.jpg

Now we have a general idea of how to make selections of various shapes in

Photoshop. There is also a way to select objects and areas based on color.

Magic Wand Tool

The Magic Wand Tool is unlike the rest of the selection tools, in that is selects areas
based on color. To use the Magic Wand Tool, you simply point and click the color you
want to select in the active image area.
Take the diagram below for example. Using the Magic Wand Tool, it simply takes
one click in the white area to make a selection of that space.
Figure 4.16: Magic Wand Tool

Source: http://tutorial9.s3.amazonaws.com/uploads/2008/04/magic-wand-tool.gif

Notes While using the Magic Wand Tool, its possible to select a wider (or more
narrow) range of colors when making your selection by adjusting the Tolerance
value in the options bar. The higher the value, the more similar colors will be
selected.

LOVELY PROFESSIONAL UNIVERSITY

91

Graphic Tools

Notes

Combining Selections
Sometimes, its necessary to combine multiple selections in order to select the
ENTIRE area you want to work with. In times like these, its possible to combine
multiple selections using an easy keyboard shortcut.
Working from an existing selection, simply hold shift and create a new selection.
This will add your new selection to the existing selection.
Figure 4.17: Combining Selections

Source: http://tutorial9.s3.amazonaws.com/uploads/2008/04/combine-selections.gif

Subtracting and Intersecting Selections

Just like it is possible to add to an existing selection, you can also subtract from a
selection (Hold Alt when drawing a new selection) and intersect selections (Hold
Shift and Alt while drawing a new selection).

Move Tool
The Move Tool is used for moving selected areas of an image, layers, shapes, and
other objects.
To move a selected part of an image, simply select the move tool, and then click
and drag your selection as you please. This will Cut the selection out from its
current location, and reposition it to wherever you release the mouse button.
Figure 4.18: Move Tool

http://tutorial9.s3.amazonaws.com/uploads/2008/04/move-tool.gif
Source:

!
Caution The right tool is very essential in order to create the perfect picture.

92

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes

Self Assessment
State whether the following statements are true or false:
1.
2.

The Marquee tool creates geometric, selection shapes like squares,

rectangles, and circles.
Use the keyboard shortcut Alt+M is used to select the marquee tool.

3.

Fill a selection
Alt+Backspace.

with

any

foreground

color

by

quickly

pressing

4.

Feathering nicely blends the edges of a selection with pixels of the

background, which in turn softens the transition.

4.2 Editing Selections

After getting the general outline of your selection or mask down pat, Photoshop
provides the help in order to perfect your selections at the single pixel level.
Basically all selections are actually gray scale masks underneath, you need to use
the right tools that can control the boundaries of a mask in order to make your
selections more precise.

4.2.1 Refine Edge

Refine Edge is a very useful tool for all kinds of users like photographers and home
users. It easily helps you replace tricky backgrounds and fine details (soft edges
and hair) from a photo.
The Refine Edge dialog box can be accessed from multiple locations in the
Photoshop user interface, some of them new to CS4.
1.

Use Quick Selection Tool (W) to select the subject from your photograph.
Make use of the Add for Selection and Subtract from Selection buttons in order
to select your subject nicely. Less selection is advised when dealing with soft
areas like hair.
Figure 4.19: Subject with Selection

LOVELY PROFESSIONAL UNIVERSITY

93

Graphic Tools

Notes
Source:

http://www.twin-pixels.com/wp-content/uploads/crop1.jpg

Your image should resemble the image above.

2.

Next open the Refine Edge dialog box. Some of the settings here includes
the View Mode which includes the background selected based on the
photograph chosen, Edge Detection where you need a small radius number
which should not be too high, Adjust Edge to experiment with the edges and
finally how we save the photo we worked on (Output to), and youll have a list
to choose from. The box Decontaminate colors should be ticked at all times,
and the amount at 100%. The color spill from background to your subject is
extremely useful.
Figure 4.20: Refine Edge Dialog

Source: http://www.twin-pixels.com/wp-content/uploads/crop2.jpg

Notes The Remember Settings box is good if ticked.

3.

There are a number of tricks you can do in Photoshop. For instance to draw
over tricky edges we can select the three objects on the left of the settings
box: a magnifier (zooming), a hand (moving if you zoom in a bit), and a brush.
Click right on the brush and you have a list there.
Figure 4.21: Refine Edge Tool

Source: http://www.twin-pixels.com/wp-content/uploads/crop3.jpg

The brush size should be small to prevent too much selection. This will be treated
as transition area between the inside and outside selection and will do help to
figure out what to keep and what not.

94

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Figure 4.22: Area that Needs Refinement

Source:
http://www.twin-pixels.com/wp-content/uploads/crop4.jpg

Figure 4.23: Final Result

Source: http://www.twin-pixels.com/wp-content/uploads/crop5.jpg

There are three options inside Rene Edge that are explained below

Smooth: To smoothen out jagged edges of a selection. It is very useful in

selection made using the Magic Wand as it leads to weird bumps along the
edge of a selection.

Feather: Using a specific pixel number it can be used to feather out a

selection. This proves very helpful when creating a vignette. It also allows you
to visualize the amount of feathering which is better than guessing the pixel
radius.

Contract/Expand: Can be used to move your selection inward (contract)

or outward (expand).

Self Assessment
Fill in the blanks:
5.
6.

The keyboard shortcut is used to select the marquee tool.

The four options of the marquee tool are , ,
and

LOVELY PROFESSIONAL UNIVERSITY

95

Graphic Tools

7.
8.

Notes
The Magic Wand Tool selects areas based on
There are three
and

options

inside

Rene

Edge

are

4.3 The Painting Tools

Photoshop provides several tools for painting images. We can draw and color using
the Brush tool and the Pencil tool. Tools like the Eraser tool, Blur tool, and Smudge
tool can be used to modify the existing colors in the image. You can set how color is
applied to an image and choose from preset brush tips from the options bar in each
of these painting tools.

4.3.1 Paint and Edit Tool Options

Presets available for the tool are present in the Options bar. Some of them include:
Mode: To blend the color you paint with the underlying existing pixels. Available
modes change with the currently selected tool. Paint modes are similar to layer
blending modes.
Opacity: To Set the transparency of color you apply. As you paint over an area, the
opacity does not exceed the set level no matter how many times you move the
pointer over the area, until you release the mouse button. If you stroke over the
area again, you apply additional color, equivalent to the set opacity. Opacity of 100
percent is opaque.
Flow: Sets the rate at which color is applied as you move the pointer over an area.
As you paint over an area, keeping the mouse button down, the amount of color
builds up based on the flow rate, up to the opacity setting.
Example: If you set the opacity to 33% and the flow to 33%, each time you
move over an area, its color moves 33% toward the brush color. The total will not
exceed 33% opacity unless you release the mouse button and stroke over the area
again.

Notes Press a single number key to set a tools opacity in multiples of 10%
(pressing 1 sets it to 10%; pressing 0 sets it to 100%). Press two number keys
to set a specific opacity. To set Flow, press Shift and number keys.
Some options of the Paint and Edit Tools are described below

Airbrush
As you move the pointer over an area, paint builds up as you hold down the mouse
button. Brush hardness, opacity, and flow options control how fast and how much
the paint is applied. Click the button to turn on or off this option.

Auto Erase

96

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Paints the background color over areas containing the foreground color.

Tablet Pressure Buttons

Use stylus pressure to override opacity and size settings in the Brush panel.

Brush Tool or Pencil Tool

To paint the current foreground color on an image we can use the Brush tool and
the Pencil tool. The Brush tool creates soft strokes of color and the Pencil tool
creates hard-edged lines.

Notes Rotation tool rotates the canvas, which can facilitate easier painting.
The steps to be followed to create and paint an image are given below1.

Choose a foreground color.

2.

Select the Brush tool

3.

Choose a brush from the Brush Presets panel.

4.

Set tool options for mode, opacity, and so on, in the options bar.

5.

Do one or more of the following:

or Pencil tool

Click and drag in the image to paint.

To draw a straight line, click a starting point in the image. Then hold down
Shift, and click an ending point.

When using the Brush tool as an airbrush, hold down the mouse button
without dragging to build up color.

The Brushes Palette

The Brushes Palette allows us to select an appropriate brush size for the Painting
and Editing tools.

LOVELY PROFESSIONAL UNIVERSITY

97

Graphic Tools

Notes
Figure 4.24: Brush
Palette

A: Brush Settings - Various settings for the selected brush tip, B: Brush Stroke
Preview
preview -ofAthe current brush stroke will look when used, C: Selected Brush Tip The
currently
selected brush tip, D: Brush Tip Shapes - A list of all brush tip shapes
available,
E: Brush Options - Options for modifying the currently selected brush tip.
Changes
will
not
be permanent
unless a new brush preset is
saved.

Sourchttp://3.bp.blogspot.com/-XnXfyW-_5Qc/UGGtOwFHjII/AAAAAAAAA9Y/gY-cnoUPnNg/
s640/brushe:
palette.gif

To display the Brushes palette, Choose Window > Brushes, or click the palette
button on the right side of the options bar for the painting tools, erasing tools,
toning tools, and focus tools.
The options in the Brushes palette can be shown by first selecting an item
name on the left side of the palette and then choosing from the available options
for the selected item which appear on the right side of the palette.

Notes Click the checkbox to the left of the item name to enable or disable the
item without viewing its options.

4.3.2 Drawing
Photoshops drawing tools are very powerful in their own way, but if you want to
create and draw an image from scratch. Photoshop uses raster graphics Raster
graphics store picture data as a matrix of pixels (dots). When you zoom in on the

98

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
picture, the pixels become enlarged, resulting in a fuzzy, jagged picture with visible
pixels.

Drawing Tools
The main drawing tools are located on the Tools Palette: the Pen Tool, Shapes Tool
and the Path Selection tool.
Figure 4.25: Tools Palette

Source: https://wiki.brown.edu/confluence/download/attachments/4438/Photoshop_tools.gif?
version=1&modificationDate=1152823763000

To expand the options for a tool, hold the mouse down on the tool icon.
Figure 4.26: Options of the Tools Palette

LOVELY PROFESSIONAL UNIVERSITY

99

Graphic Tools

Notes
Source:
tutorial_1.png

http://www.surrealpsd.com/wp-content/uploads/2012/04/photoshop_selections_

Pen Tool: Use the Pen tool to create drawing paths. You can create custom
shapes and complicated curves that can be scaled easily. By accessing the
expanded Pen tool, you can add, delete and covert points on your drawing
path.
Figure 4.27: Pen Tool in Tools Palette

Source: http://www.washington.edu/lst/help/graphics/photoshop/drawing

Path Selection Tool: Use the Path Selection tool to select an existing
drawing path. You can also use it to move, resize, copy, or delete paths. Use
the Direct Selection tool to reshape a path, or to delete a component of a
path.
Figure 4.28: Path Selection Tool in Tools Palette

Source: http://www.washington.edu/lst/help/graphics/photoshop/drawing

Shape Tool: Use the Shape tool to create paths with a certain shape. It
creates the same path points that the Pen tool does. Each shape can be
modified with the Path Selection tool.
Figure 4.29: Shape Tool in Tools Palette

Source: http://www.washington.edu/lst/help/graphics/photoshop/drawing Type Tool: Use

the Type tool to add text to your image. For more information on using the Type
tool, visit the Type page.

100

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
Figure 4.30: Type Tool in Tools Palette

Source: http://www.washington.edu/lst/help/graphics/photoshop/drawing

4.3.3 Retouching Tools

Photoshop offers a large selection of tools and features for retouching photographs
and images. Further in this book youll learn how to use the common touch-up tools.

Core Retouching Tools

Retouching in this context means making changes to the content of the image
beyond global changes to tone or color of the image.
Pixels are modified, moved, scrunched, and smoothed in various ways to create a
slightly new variation of your image.

Caution Use the retouching tools in a way that does not produce out-of-place or
unrealisticlooking images.
After a retouch the images will differ as per the effects we apply. The pictures below
show the difference.
Figure 4.31: The Image Before and After Retouching

Source: http://www.republicofcode.com/tutorials/photoshop/retouch/

Let us discuss in detail about the various retouching tools available.

LOVELY PROFESSIONAL UNIVERSITY

101

Graphic Tools

Notes
The retouching tools in Adobe Photoshop are: Clone Stamp, Pattern Stamp,
Healing Brush, Patch and Color Replacement.
These tools repair damaged images, apply repeated patterns, or replace colors in
an image.
The following illustration shows the arrangement of these tools in the toolbar.
Figure 4.32: Retouching Tools

Source: http://akvis.com/en/photoshop-tips/retouch-tools.php

If two or more tools occupy the same cell (the icon for the tool last used is always
shown), in order to choose another tool, right-click the mouse on the arrow next to
the icon and choose another tool from the menu that appears. This menu will also
appear if you click on the icon and press it for some time.

Clone Stamp
The Clone Stamp tool and Healing Brush clone (copy) pixels from one part of an
image to another, to another layer or even to another image. The difference
between the Healing Brush and the Clone Stamp tool is, the Healing Brush in
Photoshop takes into account the texture, illumination and shadows of the
processed image. As a result, the fragment processed by the Healing Brush
blends more easily into the rest of the image.
To clone an area with the Clone Stamp or Healing Brush, follow
these steps:

Step

1. Choose the tool from the Toolbar.

Step 2. Set the parameters for the tool in the Options panel: size, blending
mode, the amount of opacity and others.

Step 3. Check Use All Layers, if you need to work with several layers at
once.

Step 4. Check Aligned to create one clone selected from the area around a
starting point. The mouse button can be released and new fragments
selected. Also, the mode and size of the tool can be changed. If Align is
unchecked, then each application of the tool will create a clone from the same
starting point. Step 5. Set a starting point. Do this by holding ALT, and then
left-clicking on the point from which the clone will be taken.

Step 6. Move the cursor to the location where you want to copy the
fragment.

102

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes

Step 7. Press the left mouse button and the clone will be applied. If the
Healing Brush is used, then the cloned fragments, texture, luminance, and
shadows, will be processed in relation to the pixels of the background image.
Figure 4.33: A Copy Created using the clone Stamp Tool

Source: http://www.filebuzz.com/fileinfo/120063/Free_Clone_Stamp_Tool.html

Patch Tool
The Patch tool repairs an area with pixels copied from another area or image. Like
the Healing Brush, the Patch takes into account the texture, luminance, and
shadows of the background image.
This tool can be used in one of two ways:
Define the place where the clone will be applied, then drag the tool to the
source point.
Follow these steps:

Step 1. Choose the Patch tool from the Toolbar.

Step 2. Choose the shape and size of the tool in the Options panel, and
select Source in Patchs options. Step 3. Draw a line with the Patch tool around
the part of the image that needs to be restored.

Step 4. Drag the selected area to a new spot, from which the clone will be
created.

Define the source, then drag the tool to the damaged area.
Follow these steps:

Step 1. Choose the Patch tool from the Toolbar.

Step 2. Choose the tools size and shape in the Options panel, and in
Patchs options select Destination.

LOVELY PROFESSIONAL UNIVERSITY

103

Graphic Tools

Notes
Step 3. Draw a line with the Patch tool around the part of the image that

will be cloned. Step 4. Drag this area over the part of the image that needs repair.
Figure 4.34: Patch Tool use on an Image

Source: http://photo.net/photodb/photo?photo_id=7286548

Pattern Stamp
The Pattern Stamp tool works by drawing with a repeating pattern. This tool can
be used to create a frame or design for wallpaper or for retouching the texture of
part of an image. A pattern is selected from the Pattern Palette in the Options Panel.
To use this tool, follow these steps:

Step 1. Choose the tool from the Toolbar.

Step

2. Set a pattern, by

choosing it from the Pattern Palette in the Options Panel.

Step 3. Choose the size and shape, blending mode, amount of pattern
opacity and other parameters for the tool in the Options Panel.
Step 4. Press the left mouse button and drag the tool into the image.

Healing Brush
A repeating pattern can also be used with the Healing Brush and Patch tool. To
do this with the Healing Brush, in the tools options select Pattern for the Source
and choose a pattern from the Pattern Palette. To do this with the Patch tool
begin by using the tool to draw a line around an area (or use a previously selected

104

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes
area), then choose a pattern from the Pattern Palette and press the Use Pattern
button.
Figure 4.35: Showing the Use of Healing Brush Tool

Source: http://www.tutorial9.net/tutorials/photoshop-tutorials/retouch-and-healing-tools/#

Color Replacement
The Color Replacement tool replaces one color in an image with another. This tool
can be used, for example, to repair the red eye effect.
Follow these steps to use the tool:

Step 1. Choose the tool from the Toolbar.

Step

2. Set the color which will

be used to replace the intended color in the image.

Step 3. Set the parameters for the tool in the Options Panel, such as: size
and shape of the brush, the colors blend mode, color choice mode, opacity,
etc.
Step 4. Click on the color in the image to be replaced.
Figure 4.36: Showing the use of the Color Replacement Tool to
Shade of the Elements in the
Change
Picture

Source:
photoshop/

http://sixrevisions.com/graphics-design/35-basic-tutorials-to-get-you-started-with-

LOVELY PROFESSIONAL UNIVERSITY

105

Graphic Tools

Notes

Self Assessment
Fill in the blanks:
9.

Presets available for the tool present in the Options bar are ,
and

10.
11.

To display the Brushes palette, Choose Window >

The main drawing tools are located on the Tools Palette: ,
, and

12.

The tool is used to create drawing paths.

Task

106

1.

Show the steps to paint a frame inside using Brush Tools.

2.

Select an image make its clone image using Healing Brush.

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes

Case Study

Portrait Photoshop Retouching from

Lighting
Finished to
Product

e all have searched the web for ways to accomplish better portrait
retouching.
There are more methods and programs that people use, all of which have
aifferent look and not one is technically better than another. I use different
d
methods depending on the portrait and look I am going for. Sometimes I use a
portrait
retouching program, but most of the time I just use
Photoshop.
This is what I am going to explain here. I took a simple self portrait using a single
flash
setup in my studio. The set-up can be seen below, a single SB700 flash camera left
shot
through a shoot through 423 umbrella. Camera right slightly underneath the model I
had
a white reflector disc to push some of the light back up into the model and reduce
fall-off.
I wanted a shadow on the side of the face, but not too deep of
one.

You can see the camera settings and flash setting in the corner. I had the camera in
closeshoot
to a head shot. This is the resulting shot (I am not angry, just my smile
just
pictures
justgenuine when I am doing
do
not look
this):
Contd.
.
.

LOVELY PROFESSIONAL UNIVERSITY

107

Graphic Tools

Notes
You can see that my skin does look smoother, but not porcelain. The next
step for me is usually whitening the whites of the eyes and the teeth.
This example doesnt have teeth but you can do the same practice on
them as well. Some duplicate the new layer and zoom into the eyes.
Grab the dodge tool and choose an exposure around 15%. Use a small
soft brush and lighten the whites of the eyes a little bit. While doing this,
also using the same tool, lighten up the color portion of the eye. Next,
grab the burn tool and a small brush and just darken the outside of the
iris since it may have been lightened during the dodge process and to
really add some contrast in the eyes. This can really draw out a models
eyes. The second step I take on the eyes is to draw out the color. Create
a New Layer and grab the Eyedropper Tool. Select the color section of the
eye. Now grab a soft brush at 100% opacity. The size should be the size
of the color portion of the eye. Go to the layer, set it from Normal to
Color and change the opacity to around 55%, depending on how much
you want the eyes to stand out. Even though I did light the image with
the shadow in mind, I wanted to lighten a little bit of the right of my face.
This can come in handy when you want to add highlight to a models skin
on the cheeks or above the brow. Add a New Layer and grab a soft
white brush. Set the opacity around 20% and paint the areas you want
lightened. Now in my work flow depending on if I am going to do a color
or a black and white portrait I do two different things. If I am doing a
color portrait I adjust the levels next. But I wanted this portrait in Black
and White, so first I add an adjustment layer Black and White and
adjust the color channels how I see fit. Then I go and add a levels
adjustment layer.
Questions:
1.

Study and analyze the case.

2.

Write down the case facts.

3.

What do you infer from it?

Source: http://www.lightstalking.com/case-study-portrait-photoshop-retouching-from-lightingtofinished-product

4.4 Summary

Photoshop is also a good way to learn imaging concepts. It can be used to

enhance your images.

The selection tools are used to facilitate the process of making selections of
shapes, colors, and objects inside of Photoshop, and positioning them in the
working image area. With tools like the magnetic lasso and magic wand,
Photoshop packs a powerful array of selection gadgets.

The Marquee tool creates geometric, selection shapes like squares,

rectangles, and circles.

The basic options available in the Marquee Tool are: creating a new
selection, adding to a selection, subtracting from selection and intersecting
with a selection.

The Lasso Selection Tools allow you to make selections of irregular shapes.
Using the ordinary lasso tool, simply click and drag a freehand selection with
your mouse. Some of them are Magnetic, Polygonal, Magic Wand etc.

108

LOVELY PROFESSIONAL UNIVERSITY

Unit 4: Selecting Tools in Photoshop

Notes

After getting the general outline of your selection or mask down pat,
Photoshop provides the help in order to perfect your selections at the single
pixel level.

Refine Edge tool easily helps you replace tricky backgrounds and fine
details of a photo. Photoshop provides several tools for painting images. We
can draw and color using the Brush tool and the Pencil tool. Tools like the
Eraser tool, Blur tool, and Smudge tool can be used to modify the existing
colors in the image.

Photoshop offers a large selection of tools and features for retouching

photographs and images. The retouching tools in Adobe Photoshop are: Clone
Stamp, Pattern Stamp, Healing Brush, Patch and Color Replacement.

4.5 Keywords
Aliasing: The visual stair-stepping of edges that occurs in an image when the
resolution is too low.
Brush Tool: The Brush tool is a basic painting tool. It works like a traditional
drawing tool by applying the color using strokes. Its located in the standard Tool
Bar and its default shortcut is the letter B.
Gray Scale Image: A black and white image.
Lasso Selection Tools: They allow you to make selections of irregular shapes.
Marquee Tool: It creates geometric, selection shapes like squares, rectangles, and
circles of painting with water colour.
Opacity: The Opacity value determines the extent of stroke applied with the Brush
or Pencil Tool.
Raster Image: It is made up of pixels (little squares) with a numerical value for
their color.
Refine Edge Tool: It helps you replace tricky backgrounds and fine details of a
photo.
Wet Edges: This option is available on the left side of the Brushes palette. It
provides the effect.

4.6 Review Questions

1.

Discuss the various selection tools available in Photoshop.

2.

Give the steps to draw an image in Photoshop.

3.

What are the retouching in Photoshop?.

4.

Explain the various Marquee Tool Options available in Photoshop.

5.

Elaborate on the lasso tools concept.

6.

Discuss the steps to be followed to paint an image.

7.

What are the options of the Paint and Edit Tools?

8.

Explain drawing tools with examples.

LOVELY PROFESSIONAL UNIVERSITY

109

Graphic Tools

9.

Notes
Explain the various tools available for retouching.

10.

What are raster graphics?

Answers: Self Assessment

1.
3.

True
True

2.
4.

5.

7.

Color

6.
Create, Add, Subtract,
Intersect
8. Smooth, Feather, Contract/Expand

9.

Mode, Opacity and Flow

False
True

10. Brushes

11.Pen, Shapes and Path Selection tool.

12.

Pen

4.7 Further Readings

Books

Barbara Obermeier, Photoshop CS5 All-in-One for Dummies

Matt Kloskowski, Layers: The Complete Guide to Photoshops Most
Powerful Feature (2nd Edition)
Richard Lynch, The Adobe Photoshop Layers Book
Mike Wooldridge, Teach Yourself Visually: Adobe Photoshop CS5

Online links

http://lifehacker.com/5758404/learn-the-basics-of-photoshop-thecompleteguide http://helpx.adobe.com/photoshop/using/paintingtools.html
http://help.adobe.com/en_US/photoshopelem
ents/using/
WS287f927bd30d4b1f71abaa0b12e28aec742-7fff.html
http://www.tutorial9.net/tutorials/photoshop-tutorials/the-selectiontools

110

LOVELY PROFESSIONAL UNIVERSITY