User Interface Design and

Development (UIDD)
15IT 1205

Prof. Ananthanagu
Assistant Professor
Prof. Ananthanagu Dept. of CSE 1
 Information presented in the slides
are for educational purposes. Credit is
given to the respective sources.
Prof. Ananthanagu 2
 User Interface Design and Development (UIDD)-15IT 1205
Course Description
• This course introduces students to the principles and practices of user interface (UI)
design and development with a focus on using Adobe Illustrator. Students will learn
to create visually compelling and user-friendly interfaces for various digital
platforms, including web and mobile applications. The course covers essential UI
design concepts, Adobe Illustrator tools, and techniques, and provides hands-on
experience through practical assignments and projects
Course Objectives
• To understand the fundamental principles of user interface design.
• To gain proficiency in using Adobe Illustrator for UI design.
• To develop the ability to create wireframes, and prototypes.
• To apply design thinking and user-centered design principles in UI development.
• To understand the process of testing and iterating on UI designs based on user
feedback.

Prof. Ananthanagu 3
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

Module -I Introduction, Overview, The importance of user interface – Defining the user interface, The importance of Good design,
5 Hours.
Introduction Characteristics of graphical and web user interfaces, Principles of user interface design.

Module -II Basics of Adobe Illustrator, Introduction to Adobe Illustrator interface- Exploring the workspace, Changing the view of
artwork, Navigating multiple artboards, Arranging multiple documents, Essential tools and features for UI design- Techniques
Basics of For Selecting Artwork- Selecting objects, Aligning objects, Working with groups, Exploring object arrangement, Creating and 7 Hours.
Adobe managing artboards- Working with basic shapes, Using Image Trace to convert images into editable vector art, Working with
Illustrator drawing modes. -Basic shapes and pathfinder operations, Combining shapes, Using the Width tool.

Module -III Working with artboards, working with rulers and guides, Transforming content, Using repeats, Creating with the Curvature
Designing UI tool, Creating dashed lines, Creating with the Pencil tool, Joining with the Join tool, Adding arrowheads to paths, Starting with 6 Hours.
Components the Pen tool, Exploring color modes, Working with color

Module -IV Definition and importance of wireframes in UI design- Who Uses Wireframes?, Why Should Anyone Use Wireframes?, Why
Should I Use Wireframes? Types of wireframes: low-fidelity vs. high-fidelity-Wireframing & Prototyping Convergence
Wireframing Choosing Your Wireframe Style. Tools and techniques for creating wireframes- Sketching, Black & Whiteboarding, Paper
and 6 Hours
Cutouts (i.e. Paper Prototyping), Stenciling, Digital Wireframing Tools- Word Processing Software, Graphics Editing
Prototyping Software, Presentation Software, What is prototyping, Prototyping tools and techniques- The Power of Low Fidelity
Prototyping, Components of Lo-Fi Prototypes, Introduction to Adobe XD for interactive prototypes.

Module -V User Testing and Iteration- Usability, The Purpose of Usability Testing, The Importance of Usability Testing, Scope of
User Testing Testing, Preparing prototypes for user testing, Conducting and recording usability tests, collecting and analyzing user 6 Hours
and Iteration feedback, Iterating on design based on testing results.

Prof. Ananthanagu 4
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

Textbooks
Wilbert O. Galitz, “The Essential Guide to User Interface Design”, John Wiley & Sons, Second
1
Edition 2002.
2 Adobe Illustrator Classroom in a Book (2023 release)" by Brian Wood
Reference books
The Guide To Wireframing For Designers, Pms, Engineers And Anyone Who Touches Product by
1
UXPin

2 Adobe Illustrator Help

Coursera Courses
https://www.coursera.org/specializations/user-interface-design

Prof. Ananthanagu 5
Module II User Interface Design and Development (UIDD)-15IT 1205

Basics of Adobe Illustrator

• Introduction to Adobe Illustrator interface
• Exploring the workspace
• Exploring object arrangement​
• Changing the view of artwork • Creating and managing artboards​
• Navigating multiple artboards • Working with basic shapes​
• Using Image Trace to convert images into
• Arranging multiple documents editable vector art​
• Essential tools and features for UI design • Working with drawing modes​
• Basic shapes and pathfinder operations​
• Techniques For Selecting Artwork • Combining shapes​
• Selecting objects • Using the Width tool​

• Aligning objects
• Working with groups

Prof. Ananthanagu 6
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• Adobe Illustrator is a software application for creating drawings,

illustrations, and artwork using a Windows or MacOS computer.
• Adobe Illustrator is most commonly used to create logos, icons,
infographics, and technical diagrams for print and web use.
• Illustrator’s vector drawing capabilities make it ideal for creating the
smooth curves, bright colors, and clean transitions found in these types
of art.
• In Illustrator, you primarily create and work with vector graphics
(sometimes called vector shapes or objects).
• Vector graphics are made of lines and curves defined by mathematical
objects called vectors.
• You can resize vector graphics to cover the side of a building or use
them as a social media icon without losing detail or clarity.

Prof. Ananthanagu 7
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

Raster Images vs. Vector Graphics

Prof. Ananthanagu 8
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• Raster images are also known as Bitmap.

• As the name suggests, raster graphics combine tiny
rectangular pixels in a grid to form an image.
• These image files are associated with a certain
number that specifies their pixel's location, size or
color.
• The image quality depends upon the number of
pixels it has.
• The more pixels, the higher the image quality will be.
• But the number of pixels depends on the file type of
an image.
• Most raster images consist of file types like JPEG, GIF,
PNG and BMP.

Raster Images vs. Vector Graphics

Prof. Ananthanagu 9
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

What are Raster Images used for?
Exploring the workspace • Raster graphics are primarily suitable for images
without an outline, for instance, the digital images
you see daily on the internet.
• When you take an image on your phone or through a
camera that image contains pixel data.
• As we upload them online they become raster
images.

Advantages of Using Raster Images

• Easy to edit with a wide variety of editing
applications.
• These files consist of a number of pixels in a grid
form which you can adjust to your liking.
• To create an image that you want.
• Keep in mind that the higher the number of
pixels the higher its resolution will be.
Raster Images vs. Vector Graphics

Prof. Ananthanagu 10
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface Disadvantages of Using Raster images

Exploring the workspace
• The backlash that raster images have is that they can't
maintain quality if they are resized.
• They end up getting blurry and rough as its pixels collapse as
we try to resize each pixel of an image.
• This overall scenario is known as image degradation.

• To get a more clear picture let's go with a practical example,

As you may have observed when you go to a printing shop to
print a mug, t-shirt or cards.
• The printing press will ask you for a simple image but when it
comes to printing on banners, posters or flexes.
• File Types
• JPG or JPEG (Web & Print based photos, can be preview
quickly)
• GIF (Animated & Static images)
• PNG (Transparent images with multiple colors)
• BMP (Contains Bitmap Graphics data)
• TIFF (High Quality Prints & Graphics)
Raster Images vs. Vector Graphics • RAW (Uncompressed & Unprocessed image data from
digital cameras)

Prof. Ananthanagu 11
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

What is a Vector Image?

As here vector images aren't composed of

pixels.

Instead it consists of mathematical formulas

and equations like line art or curves connecting
points on a grid.

A vector image doesn't lose its quality or

resolution when it's resized and easily scalable
compared to Raster images.

Because it consists of mathematical equations

and algorithms instead of pixels.
Raster Images vs. Vector Graphics

Prof. Ananthanagu 12
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace What are Vector Images used for?

• Most companies and brands use vector images like logos, fonts, type
settings, digital illustrations or letterheads.

You may ask why so?

Because as we mentioned before Vector images are high quality images
that can be easily resized as they consist of mathematical algorithms.

They fulfill the exact needs of anyone

Advantages of using Vector Images​
For example, From small size office printing visiting cards to large size
• What makes vector images better
posters for billboards.
compared to Raster images?
• Is that even though they can be very
large, its file size remains small.
• It's easy to access and to modify on top
of that it is quite scalable Disadvantages
of using Vector Images​
Raster Images vs. Vector Graphics
Prof. Ananthanagu 13
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• Vector graphics maintain crisp edges Illustrator also allows you

when printed to a PostScript printer, to incorporate bitmap
saved in a PDF file, or imported into a images—technically called
vector-based graphics application. raster images—made up
• As a result, vector graphics are the of a rectangular grid of
best choice for artwork like logos that square pixels.
will be used in various sizes and Each pixel in the grid has a
output media specific color.

Take a look at the image

below.

Raster Images vs. Vector Graphics

Prof. Ananthanagu 14
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

Raster Images vs. Vector Graphics

Prof. Ananthanagu 15
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• An artboard is a self-contained design area in which you can draw your

design, much like a normal page.

• It acts as a container for on-artboard objects much like an object group

• An artboard is the area that contains artwork that can be output and is
like a page in Adobe InDesign or Microsoft Word.

Prof. Ananthanagu 16
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• When Illustrator is launched and a file

is open, the menus, Application bar,
toolbar, and panels appear on the
screen.
• The arrangement of these elements
is called a workspace.

Prof. Ananthanagu 17
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• The Application bar, across the top by

default, contains application controls, the
workspace switcher, and search.
• On Windows, the main menu bar items
appear inline with the Application bar
• Panels help you monitor and modify your
work. Certain panels are displayed by default in
the panel dock on the right side of the
workspace, and you can display any panel by
choosing it from the Window menu.
• The toolbar contains tools for creating and
editing images, artwork, artboard elements,
and more. Related tools are grouped together.
• The Document window displays the file(s)
you’re working on.
• The Status bar appears at the lower-left edge of
the Document window. It displays file
information, zooming, and navigation controls. Prof. Ananthanagu 18
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Types of tools in Illustrator • Tools in Illustrator are divided into six categories.
• Select any of these categories to learn about the tools within them.

Prof. Ananthanagu 19
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Types of tools in Illustrator

Draw tools
Draw tools help you to draw
and edit objects and paths, and
create perspective. You can also
add symbols and graphs to your
artwork.

Prof. Ananthanagu 20
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Additional Draw tools

Prof. Ananthanagu 21
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

Select tools
Before you work on your
artwork, you need to select
some or all of its elements.
Select tools let you not just
select, but move, rotate,
scale, and transform your
artwork, with varying
degrees of precision.

Prof. Ananthanagu 22
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• Selection tool in the toolbar on the left.

• The Selection tool lets you select, move, and resize

an object or a group of objects.

• Notice that the name (Selection tool) and keyboard shortcut (V)

1. Click the Selection tool or press V.

2. Click an object to select it.
3. Drag to move the selected object to a preferred
location.
4. To change the size of the object, drag the edges
of its bounding box.
5. To select multiple objects, Shift + Click objects
one at a time or drag a marquee around
multiple objects.
Prof. Ananthanagu 23
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• The Direct Selection tool lets you select, move, or modify specific
points or path segments in a path or a shape.

Use the Direct Selection tool to select anchor points and change the shape of an object

1. Click the Direct Selection tool or press A.

2. Select the object to view its anchor points and path segments.
3. Click an anchor point to select it, or Shift + Click to select multiple anchor points, path segments, or both.
4. Drag the anchor point, handle, or path segment to change the shape of your object.

Prof. Ananthanagu 24
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

• The Group Selection tool lets you select objects within groups without having to ungroup
them.

1. Click the Group Selection tool .

2. Click an object within a group to select
it. To select the group, click again.
3. Click further to select groups that are part
of larger groups. Each additional click
selects all the objects from the next level
of the hierarchy.

Prof. Ananthanagu 25
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Changing the view of artwork

• While working in files, you’ll likely need to change the magnification level and navigate between artboards.
• The magnification level, which can range from 3.13% to 64000%, is displayed in the title bar (or document tab) next to the
filename and in the lower-left corner of the Document window.
• There are many ways to change the zoom level in Illustrator
o Using view commands
o Using the Zoom tool Zoom tool ( ) to magnify and
reduce the view of artwork to
View commands are found predefined magnification levels.
in the View menu and are
an easy way to enlarge or Fit Artboard In Window or using the 1. Select the Zoom tool in the toolbar,
reduce the view of artwork. keyboard shortcut and then move the pointer into the
1. Choose View > Zoom In Command+0 [zero] (macOS) or Document window.
twice to enlarge the display Ctrl+0 [zero] (Windows), the entire
of the artwork. artboard (page) is centered in the Notice that a plus sign (+) appears at
2. Choose View > Fit Document window. the center of the pointer
Artboard In Window to
see the entire ad again.
Prof. Ananthanagu 26
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Changing the view of artwork

• The Zoom tool is used frequently during the editing process to enlarge and reduce the view of
artwork.

• Because of this, Illustrator allows you to select the Zoom tool using the keyboard at any time
without first deselecting any other tool you may be using.

• To access the Zoom tool using your keyboard, press spacebar+Command (macOS) or
Ctrl+spacebar (Windows).

• To access the Zoom Out tool using your keyboard, press spacebar+Command+Option
(macOS) or Ctrl+Alt+spacebar (Windows)

Prof. Ananthanagu 27
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

Panning in a document Rotating the view

• Projects like packaging

• In Illustrator, you can use the Hand
designs, logos, or any
tool to pan to different areas of a
projects that contain rotated
document.
text or artwork can be easier
• Using the Hand tool allows you to
to work on when you rotate
push the document around much
the document temporarily.
like you would a piece of paper on
your desk.
• Think of a large drawing on
• This can be a useful way to move
paper.
around in a document with a lot of
artboards or when you are zoomed
• If you wanted to edit part of
in
the drawing, you might turn
the paper on your desk

Prof. Ananthanagu 28
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring the workspace

Viewing artwork

• When working with large or complex

illustrations, you may want to view
only the outlines or paths of objects
in your artwork.
• That way, the artwork doesn’t have
to be redrawn each time you make a
change.
• This is called Outline mode.

Prof. Ananthanagu 29
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface • Illustrator allows for up to 1,000

artboards within a single file (depending
Navigating multiple artboards on their dimensions).
• Multiple artboards can be added when
• You can use artboards to crop areas you initially create an Illustrator
to be output or for placement document, or you can add, remove, and
purposes. edit artboards after the document is
• Multiple artboards help you to create made.
a variety of products, such as
multipage PDFs, printed pages with
different sizes or different elements,
independent elements for websites,
video storyboards, or individual
items for animation in Adobe
Animate or Adobe After Effects.

Prof. Ananthanagu 30
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork
Selecting and editing with
Using the Selection tool the Direct Selection tool

• A bounding box with eight • Shapes and paths are

handles appears around the composed of anchor
circle. points (sometimes just
• All content shows a bounding called points) and path
box when selected, and it can segments.
be used to make changes to • Anchor points control
the selected content like the shape of a path
resizing or rotating. segment and work like
pins holding a wire in
place.

Prof. Ananthanagu 31
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Locking objects
Selecting artwork can be
challenging in Illustrator when
objects are stacked one on
another or when there are lots of
objects in a small area
Choose Object > Lock > Selection.

Unlocking objects
1. Choose Object > Unlock All to
unlock everything in the document.
2. Choose Select > Deselect.

Prof. Ananthanagu 32
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork
Choose Select > Same > Appearance
Selecting similar objects
• Using the Select > Same command, you
can select artwork based on similar fill
color, stroke color, stroke weight, and
more.
• This can make selecting objects with a
similar appearance easy.

With the Selection tool (V),

click to select one of the
squares

Prof. Ananthanagu 33
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Hiding objects

Choose Object > Hide > Selection

Prof. Ananthanagu 34
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork
Choose View > Outline to view artwork as outlines.
Selecting in Outline mode

• By default, Adobe Illustrator displays all artwork

with its attributes showing, like fill and stroke
(border).
• However, you can view artwork in Outline mode
to display artwork so that attributes like fill and
stroke are temporarily removed and only
outlines (or paths) are visible.
• Outline mode can be useful if you want to more
easily select objects within a series of stacked
objects.

Prof. Ananthanagu 35
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface • Choose Select > All.

• Click the Vertical Align Center
Techniques for Selecting Artwork button ( ) in the Properties panel
Aligning objects to each other
on the right.
Aligning objects

• Say you have a bunch of fence

posts you made and you need
them all to line up with each
other Or you need to align your
artwork to the center of a poster.
• Illustrator makes it easy to align
or distribute multiple objects
relative to each other, the
artboard, or a key object.

Prof. Ananthanagu 36
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Aligning objects

• Distributing objects

• Aside from aligning, you can also

distribute objects.

• Distributing objects means you

Distributing objects Aside from
aligning, you can also distribute • Notice that all of the selected
objects. Distributing objects objects moved to align to the
means you distribute the spacing vertical center of the shapes.
equally between the centers or • The horizontal spacing
edges of those objects. between them is still not the
same, but you will fix that in a
few sections using distributing

Prof. Ananthanagu 37
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Aligning objects

Aligning to a key object

• A key object is an object that you want
other objects to align to.
• This can be useful when you want to
align a series of objects and one of
them is already in the perfect position.
• You specify a key object by selecting all
the objects you want to align,
including the key object, and then
clicking the key object again

Prof. Ananthanagu 38
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Aligning anchor points

Align two anchor points to each other using the Align options

• Select the Direct Selection tool in the toolbar, and select the
rectangle to see its anchor points.
• Click the upper-right corner point of the shape
• Press the Shift key, and click to select the lower-right point of the
same shape to select both anchor points
• Click the Horizontal Align Right button in the Properties panel to the
right of the document.

Prof. Ananthanagu 39
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Aligning to the artboard

• You can also align content to the active artboard (page) rather than
to a selection or a key object.
• Aligning to the artboard aligns each selected object separately to the
edges of the artboard
• Click the Align To button in the Align section of the Properties panel,
and make sure that Align To Artboard is chosen from the menu that
appears. Any content you align will now align to the artboard

Prof. Ananthanagu 40
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Techniques for Selecting Artwork

Working with groups

• You can combine objects into a group so that the objects act as a
single unit. That way, you can move or transform several objects
without affecting their individual attributes or positions relative to
each other. It can also make selecting artwork easier.

Grouping items

Click the Group button in the

Quick Actions section of the
Properties panel on the right
to group the selected artwork
together

Prof. Ananthanagu 41
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Exploring object arrangement
• Illustrator puts objects one on top of another in order as you create them,
beginning with the first object created.
• This ordering of objects, called stacking order, determines how they display when
they overlap.
• You can change the stacking order of objects in your artwork at any time, using
either the Layers panel or the Arrange commands.

Arranging objects

Prof. Ananthanagu 42
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Working with basic shapes

• Shapes you create are composed of anchor points, with paths connecting
the anchor points.
• A basic square, for instance, is made of four anchor points on the corners,
with paths connecting those anchor points
• A shape is referred to as a closed path because the ends of the path are
connected.

• A path, like a line, can also be open.

• An open path has distinct anchor points on each end, called
endpoints
• You can fill open and closed paths with color, gradients, or
patterns

Prof. Ananthanagu 43
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Working with basic shapes

• Creating rectangles
o Select the Rectangle tool in the toolbar.
o In the middle of the artboard, drag to create a rectangle
o If you draw a perfect square, a magenta line appears diagonally in the
shape. Also, as you create the shape, you can see the width and height
of it in the little gray tool tip that appears next to the pointer—called the
measurement label
o Move the pointer over the small blue dot in the center of the rectangle
(called the center point widget).
o When the pointer changes ( ), drag the shape up more into the top
half of the artboard.
o With the Rectangle tool (still selected, click to the right of the rectangle
you made, to open the Rectangle dialog box.
o Change the Width to 0.56 inches and the Height to 1 inch. Click OK to
create a new rectangle

Prof. Ananthanagu 44
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Working with basic shapes

• Editing rectangles
• In the Transform section of the Properties panel on the right, make
sure Maintain Width And Height Proportions to the right of Width (W:)
and Height (H:) is deselected
• Setting Maintain Width And Height Proportions (turning it on) is useful
when you change the height or the width and want the other value to
change proportionally.
• Select the Width (W:) value, and type 0.88 in. Press Return or Enter to
accept the change.
• Move the pointer just off a corner of the shape. When you see rotate
arrows, drag counterclockwise to rotate the shape.
• As you drag, press the Shift key to constrain the rotation to increments
of 45 degrees.
• When an angle of 90° shows in the measurement label, release the
mouse button and then the key.
• Leave the shape selected

Prof. Ananthanagu 45
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Working with basic shapes

• Changing the color of the shapes

o In the panel that opens, make sure that the Swatches option is
selected at the top.
o Select a green color to fill the shape.
o Press the Escape key to hide the Swatches panel before moving on
• Dragging to round the corners of rectangles
o Drag any of the Live Corners widgets in the rectangle toward the
center to round all of the corners a little.
• Rounding corners in the Properties panel

Prof. Ananthanagu 46
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Using Image Trace to convert raster images into editable vector art

Image Trace command, which converts a raster image, like a JPEG, into editable vector
artwork.
Tracing can help turn something you drew on paper—for instance, a logo, a pattern or texture,
or hand-drawn type—into editable vector art.

Prof. Ananthanagu 47
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Cutting with the Scissors tool
Editing paths and shapes
• In Illustrator, you can edit and Several tools allow you to cut and divide shapes.
combine paths and shapes in You’ll start with the Scissors tool, which splits a
lots of ways to create your path at an anchor point or on a line segment to
artwork. create an open path.
• Sometimes that may mean
starting with simpler paths
and shapes and using
different methods to produce
more complex paths.
• The methods and tools you
will use in this lesson include
working with the Scissors tool,
the Knife tool, and the Eraser
tool, outlining strokes, joining
paths, and more
Prof. Ananthanagu 48
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths

Practice use pen tool

Prof. Ananthanagu 49
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths

Editing paths and shapes

Prof. Ananthanagu 50
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Scissors tool
Lets you split a path or elements at an anchor point or along a segment.

1. Click and hold the Eraser tool,

then click the Scissor tool or
press C.
Click the point on the path you
want to split.
2. Select the anchor points created
due to the split or the path you
split to modify the object.

Prof. Ananthanagu 51
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Joining paths
The Join tool lets you connect nearby paths at their intersection point, trimming excess lines from overlapping
paths.

1. Select the Join tool.

2. Draw a line to connect the ends
of two paths at their point of
intersection.
3. Drag over the overlapping paths
to trim the excess portions.

Prof. Ananthanagu 52
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Knife tool
The Knife tool lets you cut shapes into multiple shapes with closed paths.

1. Select the Knife tool.

2. Drag through shapes to cut them

into multiple shapes with closed
paths, or press and
hold Alt (Windows)
or Option (macOS) as you drag to
cut in a straight line.

Prof. Ananthanagu 53
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Eraser tool
The Eraser Tool can make pixels transparent or match them to the image background color.

1. Select the Eraser Tool (E) .

2. Use the tool options bar to
customize tool settings, like Size
and Hardness, to get the effect you
want.
Drag over the parts of the image
you want to erase.

Note You cannot erase raster images,

text, symbols, graphs, or gradient mesh
objects.
Prof. Ananthanagu 54
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Eraser tool

• The Eraser tool lets you erase areas of your vector artwork.
• With nothing selected, you can erase any object that the tool touches.
• If any artwork is selected, only that artwork can be erased.

Prof. Ananthanagu 55
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Creating a compound path

• You can combine vector objects to create shapes in a variety of ways in Illustrator.
• The resulting paths or shapes differ depending on the method you use to combine the objects.
Methods of combining objects
Pathfinder effects
• Pathfinder effects let you combine multiple objects using interaction modes. When you use Pathfinder effects,
you can’t edit the interactions between objects.
Compound shapes
• Compound shapes let you combine multiple objects and specify how you want each object to interact with the
other objects. Compound shapes are more versatile than compound paths because they provide four kinds of
interactions: add, subtract, intersect, and exclude. In addition, the underlying objects aren't changed, so you can
select each object within a compound shape to edit it or change its interaction mode.
Compound paths
• Compound paths let you use an object to cut a hole in another object. For example, you can create a doughnut
shape from two nested circles. Once you create a compound path, the paths act as grouped objects. You can
select and manipulate the objects separately using the Direct Selection tool or Group Selection tool; or you can
select and edit the combined path. Prof. Ananthanagu 56
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Creating a compound path Use the top row of buttons in the panel to make paths or compound paths.
To make compound shapes, use the buttons in those rows while pressing the Alt
Combine objects using or Option key.
Pathfinder effects Choose from the following shape modes:
Navigate the Pathfinder panel Add To Shape Area
• You use the Pathfinder panel Adds the area of the component to the underlying geometry.
(Window > Pathfinder) to Subtract from Shape Area
combine objects into new Cuts out the area of the component from the underlying geometry.
shapes. Intersect Shape Areas
Uses the area of the component to clip the underlying geometry as a mask
would.
Exclude Overlapping Shape Areas
Uses the area of the component to invert the underlying geometry, turning
filled regions into holes and vice versa.
Use the bottom row of buttons in the panel, called Pathfinder effects, to create
final shape combinations on the first click

Prof. Ananthanagu 57
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Creating a compound path

Shape modes
A. All components in Add mode
B. Subtract mode applied to squares
C. Intersect mode applied to squares
D. Exclude mode applied to squares

Prof. Ananthanagu 58
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Creating a compound path
SUMMARY OF PATHFINDER EFFECTS
Add
Traces the outline of all objects as if they were a single, merged object. The resulting shape takes on the paint attributes
of the top object.
Intersect
Traces the outline of the region overlapped by all the objects.
Exclude
Traces all nonoverlapping areas of the objects, and makes overlapping areas transparent. Where an even number of
objects overlap, the overlap becomes transparent. Where an odd number of objects overlap, the overlap becomes filled.
Subtract
Subtracts the frontmost objects from the backmost object. You can use this command to delete areas of an illustration
by adjusting the stacking order.
Minus Back
Subtracts the objects in back from the frontmost object. You can use this command to delete areas of an illustration by
adjusting the stacking order.

Prof. Ananthanagu 59
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Creating a compound path
SUMMARY OF PATHFINDER EFFECTS
Divide
Separates a piece of artwork into its component-filled faces (a face is an area undivided by a line segment).
Note: When you use the Divide button in the Pathfinder panel, you can use the Direct Selection or Group Selection
tool to manipulate the resulting faces independently of each other. You can also choose to delete or preserve unfilled
objects when applying the Divide command.
Trim
Removes the part of a filled object that is hidden. Removes any strokes and doesn't merge objects of the same
color.
Merge
Removes the part of a filled object that is hidden. Removes any strokes and merges any adjoining or overlapping
objects filled with the same color.
Crop
Divides artwork into its component-filled faces, and then deletes all the parts of the artwork that fall outside the
boundary of the topmost object. It also removes any strokes.
Outline
Divides an object into its component line segments, or edges. This command is useful for preparing artwork that
needs a trap for overprinting objects. Prof. Ananthanagu 60
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Combining shapes

Working with the Shape Builder tool

1. Create the shapes on which you want to apply the Shape

Builder tool.
2. Use the Selection tool, to select the paths you need to merge.
3. Select the Shape Builder tool or press Shift+M.
4. To break or extract the region from the rest of the shape, move
the pointer and select the region you want to merge. You can
view additional anchor points where the shapes break up.
5. To merge paths, drag along the region and release the mouse.
The selected regions merge to form a new shape.

When you select the Shape Builder tool, the overlapping shapes are
temporarily divided into separate objects. As you drag from one part to
another, a red outline appears, showing you the shape that will result
when the existing shapes are merged Prof. Ananthanagu 61
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
Combining shapes

Working with the Shape Builder tool

1. Create the shapes on which you want to apply the Shape

Builder tool.
2. Use the Selection tool, to select the paths you need to merge.
3. Select the Shape Builder tool or press Shift+M.
4. To break or extract the region from the rest of the shape, move
the pointer and select the region you want to merge. You can
view additional anchor points where the shapes break up.
5. To merge paths, drag along the region and release the mouse.
The selected regions merge to form a new shape.

Prof. Ananthanagu 62
Module II User Interface Design and Development (UIDD)-15IT 1205

Introduction to Adobe Illustrator interface

Editing and Combining Shapes and Paths
1. Click the Width tool or press Shift + W to
Combining shapes
select it.
Working with Width tool 2. Drag an anchor point to expand or contract the
stroke.
3. To make pointed ends, drag the points at the
The Width tool lets you create variable-width strokes, and create
ends of the stroke.
stroke profiles so you can apply styles consistently.

The new point on the

original path is called the
width point. The lines
extending from the width
point are the handles
Prof. Ananthanagu 63
 Module II

Thank you with regards

Prof. Ananthanagu

Prof. Ananthanagu 64