Home / Articles / Editing and Combining Shapes and Paths

Editing and Combining Shapes and Paths

Chapter Description

In this sample chapter from Adobe Illustrator Classroom in a Book (2021 release), author Brian Wood teaches you how to edit and combine paths and shapes to create more complex artwork. You will learn to cut shapes and combine them with the Shape Builder tool and Pathfinder effects.

Editing paths and shapes

In Illustrator, you can edit and combine paths and shapes in a variety of ways to create your own artwork. Sometimes that may mean starting with simpler paths and shapes and using different methods to produce more complex paths. This includes working with the Scissors tool (sp_scissorstool_lg_n.jpg), the Knife tool (sp_knifetool_lg_n.jpg), and the Eraser tool (sp_erasertool_lg_n.jpg); outlining strokes; joining paths; and more.

Cutting with the Scissors tool

There are several tools that allow you to cut and divide shapes. You’ll start with the Scissors tool (sp_scissorstool_lg_n.jpg), which splits a path at an anchor point or on a line segment to create an open path. Next, you’ll cut a shape with the Scissors tool and reshape it.

  1. Click the View menu, and make sure that the Smart Guides option is selected. A checkmark appears when it’s selected.

  2. Choose 1 Dino 1 from the Artboard Navigation menu in the lower-left corner of the Document window. Choose View > Fit Artboard In Window to make sure the artboard fits in the document window.

  3. Select the Selection tool (sp_selectiontool_lg_n.jpg) in the toolbar, and click the purple shape on the left side of the artboard.

  4. Press Command and + (macOS) or Ctrl and + (Windows) three times to zoom in to the selected artwork.

    f0115-02.jpg

    After you modify this shape, you’ll add it to the dinosaur head on the right side of the same artboard to complete the beak.

  5. With the shape selected, in the toolbar press and hold on the Eraser tool (sp_erasertool_lg_n.jpg), and select the Scissors tool (sp_scissorstool_lg_n.jpg).

  6. Move the pointer over the top edge of the shape, in the middle (see the first part of the following figure). When you see the word “intersect” and a vertical magenta line, click to cut the path at that point and then move the pointer away.

    Cuts made with the Scissors tool must be somewhere on a line or a curve rather than on an end point of an open path. When you use the Scissors tool to click the stroke of a closed shape, like the shape in this example, the path is cut where you click so that it becomes an open path.

  7. Select the Direct Selection tool (sp_directselectiontool_lg_n.jpg) in the toolbar. Move the pointer over the selected (blue) anchor point and drag it up.

  8. From where you originally cut the shape, drag the other anchor point up and to the left until a magenta alignment guide shows, indicating it’s aligned with the other anchor point you just dragged.

    Notice that the stroke (the yellow border) doesn’t go all the way around the shape. That’s because cutting a shape with the Scissors tool makes an open path. If you only want to fill the shape with a color, it doesn’t have to be a closed path. It is, however, necessary for a path to be closed if you want a stroke to appear around the entire fill area.

Joining paths

f0117-01.jpg

Suppose you draw a “U” shape and later decide to close the shape, essentially joining the ends of the “U” with a straight path. If you select the path, you can use the Join command to create a line segment between the end points, closing the path.

When more than one open path is selected, you can join them to create a closed path. You can also join selected end points of two separate paths. Next, you’ll join the ends of the path you just edited to create a closed shape again.

  1. Select the Selection tool (sp_selectiontool_lg_n.jpg) in the toolbar. Click away from the path to deselect it and then click in the purple fill to reselect it.

    This step is important because only one anchor point was left selected from the previous section. If you were to choose the Join command with only one anchor point selected, an error message would appear. By selecting the whole path, when you apply the Join command, Illustrator simply finds the two ends of the path and connects them with a straight line.

    f0117-02.jpg
  2. Click the Join button in the Quick Actions section of the Properties panel.

    When you apply the Join command to two or more open paths, by default Illustrator first looks for and joins the paths that have end points located closest to each other. This process is repeated every time you apply the Join command until all paths are joined.

    f0117-03.jpg
  3. In the Properties panel, change the stroke to 0 by clicking the down arrow icon until the stroke is removed.

    Next, you’ll round the corners on the top of the shape.

    f0117-04.jpg
  4. Select the Direct Selection tool (sp_directselectiontool_lg_n.jpg) in the toolbar and drag across the top of the shape to select the top two anchors.

  5. Drag one of the corner radius widgets toward the center of the shape to round the corners.

  6. Choose Select > Deselect and then choose File > Save.

Cutting with the Knife tool

You can also use the Knife tool (sp_knifetool_lg_n.jpg) to cut vector artwork. Using the Knife tool, you drag across a shape, and instead of creating open paths, you end up with closed paths.

  1. Press the spacebar to access the Hand tool, and drag in the document window to see the green shape to the right.

  2. With the Selection tool (sp_selectiontool_lg_n.jpg) selected, click the green shape.

    f0118-02.jpg

    Any objects selected will be cut by the Knife tool. If nothing is selected, it will cut any vector objects it touches.

  3. Click Edit Toolbar (more_options.jpg) at the bottom of the toolbar. Scroll in the menu that appears and toward the bottom of the menu you should see the Knife tool (sp_knifetool_lg_n.jpg). Drag the Knife tool directly onto the Scissors tool (sp_scissorstool_lg_n.jpg) in the toolbar. When the Scissors tool shows a highlight, release to add the Knife tool to the list of tools.

    f0118-03.jpg
  4. Press the Escape key to hide the menu.

  5. With the Knife tool now selected in the toolbar, move the Knife pointer (knife_cursor.jpg) above the selected shape. Drag in a “U” shape to cut into the shape.

  6. Choose Select > Deselect.

  7. Select the Selection tool (sp_selectiontool_lg_n.jpg), and click the new shape on the top (see the following figure).

  8. Click the Fill color box in the Properties panel, make sure the Swatches option (swatches_option.jpg) is selected in the panel that appears, and click to select a darker green. I chose the color named Dark green.

  9. Choose Select > Deselect.

Cutting in a straight line with the Knife tool

By default, as you just saw, dragging across a shape with the Knife tool makes a free-form cut that is not straight. Next, you’ll see how to cut artwork in a straight line with the Knife tool to give the dinosaur head (the green shape) a highlight.

  1. With the Selection tool (sp_selectiontool_lg_n.jpg) selected, click the large light green shape.

  2. Select the Knife tool (sp_knifetool_lg_n.jpg). Move the pointer just above the top of the shape. Press the Caps Lock key to turn the Knife tool pointer into crosshairs (precise_cursor.jpg).

    The crosshairs pointer is more precise and can make it easier to see exactly where you begin cutting.

  3. Press and hold Option+Shift (macOS) or Alt+Shift (Windows), and drag down all the way across the shape to cut it into two. Release the mouse button and then the keys.

  4. Press and hold Option (macOS) or Alt (Windows), and drag down from the top of the shape, down, at a slight angle, all the way across the shape to cut it into two. Release the mouse button and then the key. This way, you can cut in a straight line in any direction.

  5. Choose Select > Deselect.

  6. Select the Selection tool (sp_selectiontool_lg_n.jpg), and click the middle shape you just created (see the first part of the following figure).

  7. Click the Fill color box in the Properties panel, make sure the Swatches option (swatches_option.jpg) is selected in the panel that appears, and click to select a lighter green.

  8. Drag across all of the green shapes to select them.

  9. Click the Group button in the Quick Actions section of the Properties panel.

  10. Press the Caps Lock key to turn off the pointer crosshairs.

Outlining strokes

A path, like a line, can show a stroke color but not a fill color by default. If you create a line in Illustrator and want to apply both a stroke and a fill, you can outline the stroke of a path, which converts it into a closed shape (or compound path). Next, you’ll outline the stroke of a line so you can erase parts of it in the next section to make the final part used to complete the first dinosaur.

  1. Press the spacebar to access the Hand tool and drag in the document window to see the purple circle to the right.

  2. With the Selection tool (sp_selectiontool_lg_n.jpg) selected, click the path of the purple circle.

    To erase part of the circle and make it look like a dinosaur frill, the circle will need to be a filled shape, not a path. For an example of what a frill looks like, see the figure at the start of the next section, “Using the Eraser tool.” You should also see a set of gray lines that look like the spokes of a wheel. Those are just guides used for erasing. They were created by duplicating a straight line several times, and individually rotating each line 30° from the last.

    f0121-02.jpg
  3. Choose Object > Path > Outline Stroke.

    This creates a filled shape that is a closed path. Next, you’ll erase parts of the shape.

    f0121-03.jpg

Using the Eraser tool

The Eraser tool (sp_erasertool_lg_n.jpg) lets you erase any area of your vector artwork. You can use the Eraser tool on paths, compound paths, paths inside Live Paint groups, and clipping content. Whatever artwork you select is the only artwork you will erase. If you leave all objects unselected, you can erase any object that the tool touches across all layers. Next, you’ll use the Eraser tool to erase part of the selected shape so it looks like a triceratops frill (see the figure).

f0122-01.jpg
  1. Press and hold down the mouse button on the Knife tool (sp_knifetool_lg_n.jpg), and select the Eraser tool (sp_erasertool_lg_n.jpg) in the toolbar.

  2. Double-click the Eraser tool (sp_erasertool_lg_n.jpg) in the toolbar to edit the tool properties. In the Eraser Tool Options dialog box, change Size to 30 pt to make the eraser larger. Click OK.

    f0122-02.jpg

    You can change the Eraser tool options, depending on your needs.

  3. Move the pointer above the selected purple circle. Between two guide lines, drag in a “U” shape to create a scallop.

    When you release the mouse button, part of the shape is erased, and the shape is still a closed path. To finish, you’ll erase the bottom of the circle shape.

  4. Repeat this around the circle as you see in the figure, leaving the bottom intact.

    f0122-04.jpg
  5. Move the pointer as in the first part of the following figure. Drag back and forth across the bottom of the purple circle to erase it.

Erasing in a straight line

You can also erase in a straight line, which is what you’ll do next.

  1. Press the spacebar to access the Hand tool, and drag in the document window to see the partially complete dinosaur to the right.

  2. With the Selection tool (sp_selectiontool_lg_n.jpg) selected, click the cream-colored nose horn.

    f0123-02.jpg
  3. Choose View > Zoom In a few times to see more detail.

  4. Double-click the Eraser tool (sp_erasertool_lg_n.jpg) to edit the tool properties. In the Eraser Tool Options dialog box, change Size to 20 pt to make the eraser smaller. Click OK.

  5. With the Eraser tool (sp_erasertool_lg_n.jpg) selected, move the pointer to where you see the red “X” in the first part of the following figure. Press the Shift key, and drag straight across to the right. Release the mouse button and then the Shift key.

    If nothing is erased, try again. Also, it may look like you erased other parts of the shape, but if nothing else was selected, you didn’t.

  6. Choose File > Save.

Assemble the first dinosaur

To complete the dinosaur you see, you’ll drag and position the artwork you have worked on to this point.

  1. Choose View > Fit Artboard In Window.

  2. With the Selection tool (sp_selectiontool_lg_n.jpg) selected, drag the purple shape onto the beak of the dinosaur.

  3. Drag the green group of shapes onto the head (see the following figure).

  4. Drag the purple frill onto the purple circle behind the head.

    f0124-01.jpg
  5. If the purple frill covers any of the artwork, click Arrange toward the bottom of the Properties panel and choose Send Backward a few times until it looks like the figure.

Creating a compound path

Compound paths let you use a vector object to cut a hole in another vector object. Whenever I think of a compound path, I think of a doughnut shape, which can be created from two circles. Holes appear where paths overlap. A compound path is treated like a group, and the individual objects in the compound path can still be edited or released (if you don’t want them to be a compound path anymore). Next, you’ll create a compound path to create some art for a dinosaur’s eyes.

  1. Choose 2 Dino 2 from the Artboard Navigation menu in the lower-left corner of the Document window.

  2. With the Selection tool (sp_selectiontool_lg_n.jpg) selected, select the dark gray circle on the left, and drag it so it overlaps the larger yellow circle to its right.

    Smart Guides help you align the circles. You can also select the two circles and align them to each other using the Align options in the Properties panel.

  3. Drag across the gray circle and yellow circle to select both.

  4. Choose Object > Compound Path > Make, and leave the artwork selected.

    You can now see that the dark gray circle has seemingly disappeared, and you can see through the yellow shape to the aqua background shape. The dark gray circle was used to “punch” a hole in the yellow shape. With the shape still selected, you should see “Compound Path” at the top of the Properties panel to the right.

  5. Drag the group of lines that is just to the right of the yellow shape, into the center of the yellow shape. The group of lines should be on top. If it isn’t, choose Object > Arrange > Bring To Front.

    f0125-03.jpg
  6. Drag across the eye shapes to select them.

  7. Choose Object > Group.

  8. Choose Select > Deselect, and then choose File > Save.

3. Combining shapes | Next Section Previous Section

Adobe Press Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Adobe Press and its family of brands. I can unsubscribe at any time.

Overview

Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Adobe Press products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security

Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children

This site is not directed to children under the age of 13.

Marketing

Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out

Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.adobepress.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links

This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020