Use the shape tools in Adobe Illustrator to deftly combine vector shapes and design memorable icons for your next digital project.

Vector shapes combine to create a collage of camping icons. The center of the collage features a bear chasing a man.

For our sample project, we’re designing a camera icon to use as a social media profile image, and for a button linking to a portfolio on a digital resume.

Twitter page shows a monotone camera icon linked to a digital resume.

Set up your project

Launch Illustrator and click the Create new button, or press Control+N (Windows) or Command+N (macOS). Select the Web tab and enter a size on the right; we typed 400 px for Width and Height. Tip: It’s helpful to work in a square format when creating icon designs.

Click Create.

Create a new document in Adobe Illustrator, select Web, and enter a size on the right. Square sizes are best for icon designs

Draw basic shapes

First, you’ll draw the camera body.

Select the Rectangle tool in the Tools panel. Click and drag a rectangle on the artboard.

Draw a second, smaller rectangle overlapping the top of the larger rectangle as shown. 

You’ll use Smart Guides to arrange the rectangles so their centers are aligned. Drag the center widget (circle in the center) of the smaller rectangle over the larger one until you see a vertical magenta guide.

Learn more about using Smart Guides in Illustrator.

Two rectangles are drawn and aligned with the magenta guides to create the body of a camera.

Next, you’ll add the flash.

Click and hold the Rectangle tool to access other shapes and select the Ellipse tool. Click and drag a circle until you see crosshair guides appear in the circle, indicating you are drawing a perfectly round circle. Release your cursor when it’s a suitable size.

Tip: To resize the circle proportionally, press Shift and drag a corner widget. 

If needed, drag the center widget to reposition the circle inside the larger rectangle.

The Ellipse tool is used to add a circle for the camera flash. Magenta crosshairs indicate a perfect circle.

Now, you’ll create the lens shape.

With the Ellipse tool selected, hover over the larger rectangle until the word center appears. Press Alt (Windows) or Option (macOS) and drag a circle drawn from the center. Look for the crosshair guides and release your cursor when the circle is the right size.

Draw a smaller circle off to the side. Click in its center and drag it over the larger circle until you see the word intersect or center appear. Drop the smaller circle in place.

The Ellipse tool is used to add circles for the lens shape. Alt or Option + clicking draws circles from the center.

Combine shapes

In this step, you’ll merge the rectangle shapes.

Press V for the Selection tool. Click the large rectangle; then press Shift and click the small rectangle to select both. Select the Shape Builder tool and drag a line connecting both rectangles as shown.

Two rectangles are selected. The Shape Builder tool is highlighted, and a connecting line is drawn to merge the shapes.

Add color  

Now, you’ll apply a fill color and various stroke attributes to the shapes.

Press V to switch to the Selection tool. With the camera body selected, click the Fill Color swatch below Appearance in the Properties panel. Select the Swatches option on the right and click a color in the Swatches panel. Then, click the Stroke swatch and select None to remove the stroke.

Repeat for the flash circle: Apply a white fill and no stroke.

To color the lens, first select the outer circle; then press Shift and click the second circle to select it too. Apply no fill and a white stroke. Increase the Stroke weight to 5 pt.

Fill and stroke colors are added to the camera icon.

Apply a finishing touch

You can round the shape corners to create a different look.

Select the camera body. Press A to switch to the Direct Selection tool, and drag a rounded corner widget to round all the corners at once.

Camera edges are rounded by dragging the rounded corner widget, a small blue circle with filled blue center.

Save for web output

If you need to resize your icon relative to the artboard, choose Select > All to select the entire icon. Press V to switch to the Selection tool. Press Alt+Shift (Windows) or Option+Shift (macOS) and drag a corner handle to resize it proportionally from the center. Finally, reposition the icon by dragging its center.

The camera is resized proportionally by pressing Alt+Shift or Option+Shift and dragging the corner handles.

Choose File > Save. Give your project a unique name and save it in the Adobe Illustrator (AI) format. You can edit this file in Illustrator anytime.

To save a final version that’s ready to post online, choose File > Export > Export for Screens. Choose a location and select the PNG format.

Tip: You can change the artboard size before exporting. Select Width or Height in the Scale drop-down menu and type a new size.

Click the gear icon and select Art Optimized (Supersampling) in the Anti-aliasing drop-down menu. Click Save Settings, and then click Export Artboard.

The camera icon is saved in Adobe Illustrator (AI) format, then saved for web by choosing File < Export < Export for Screens

Hope you had fun. View Export assets for web and app design to learn more about saving artwork for the web. 

Sigla Adobe

Conectați-vă la cont