Learn how to change simple shapes to create a standout icon for your blog, form, digital documents, interactive projects, and more
Visually collect vector shapes for your next digital project and use Illustrator shape tools to design memorable icons.
For our sample project, we are designing a camera icon to use as a social media profile image and a portfolio with buttons for a digital resume button.
1. Set up your project
You start with creating a new document.
Click the new button on the Start screen, or select File> New
Select Profile: Click Web and OK
2. Draw basic shape
First, you will draw the camera body.
Select Tools panel rectangle tool. Click a rectangle in the artboard and drag it.
As shown, draw a second, small rectangle above the top of the large rectangle.
You arrange rectangles using smart guidelines so that their centers are connected. To access the selection tool, type V and drag a large rectangle up to a bigger until you see a vertical magenta guide.
Learn more about using Smart Guides in Illustrator.
Next, you'll add a flash
To access other shapes, click and hold the Rectangle tool and select Ellipse tool. Click and drag a circle until the Crusher guides appear in the circle, indicating that you draw a perfectly rounded circle. This is a suitable size when releasing your cursor.
Tip: To scale the circle proportionally, press Shift and drag a corner widget.
If necessary, enter V to access the selection tool and restore the circle inside the large rectangle.
Now, you make the lens shape.
Once the Ellipse tool is selected, overlay on the larger rectangle until the center is displayed on the screen. Press Alt / Option and drag a circle drawn from the center. Search for cross hair guide and release your cursor when the circle is the correct size.
Close a small circle next to it. Click on its center and place the drag area on the larger circle until you enter the intersection or center
3. Size sum
At this step, you will combine the rectangle shape.
With the Selection Tool, click Rectangle, then Shift, and select Short Rectangle to select both. Select shape builder tool and pull a line connected to both rectangles as shown.
4. Add color
Now, you apply a fill color and different stroke characteristics of size.
Press V to go to the selection tool. With the selected camera body, fill the fill slide in the control panel. Click a color in the Swatches panel, then click on the stroke swatch and select someone to remove the stroke.
Repeat for Flash Circle; A white fill application, and no stroke.
To paint the lens, first select the external circle, and then click Shift + to select the second row. Apply any and apply a white stroke. Stroke weight increase by 5 pt
5. Apply a finishing touches
You can round the corner of the shape to create a different look.
Select Camera Body Press A to switch to the Direct Selection Tool and drag the corner widget to one corner.
6. Save for web output
As a final step, you'll copy and paste the icon in a new document for the final output.
Choose File > Save for Web.
Click Save to export your icon for your blog, website or digital publishing.
Learn more about saving artwork for the web
Visually collect vector shapes for your next digital project and use Illustrator shape tools to design memorable icons.
For our sample project, we are designing a camera icon to use as a social media profile image and a portfolio with buttons for a digital resume button.
1. Set up your project
You start with creating a new document.
Click the new button on the Start screen, or select File> New
Select Profile: Click Web and OK
2. Draw basic shape
First, you will draw the camera body.
Select Tools panel rectangle tool. Click a rectangle in the artboard and drag it.
As shown, draw a second, small rectangle above the top of the large rectangle.
You arrange rectangles using smart guidelines so that their centers are connected. To access the selection tool, type V and drag a large rectangle up to a bigger until you see a vertical magenta guide.
Learn more about using Smart Guides in Illustrator.
Next, you'll add a flash
To access other shapes, click and hold the Rectangle tool and select Ellipse tool. Click and drag a circle until the Crusher guides appear in the circle, indicating that you draw a perfectly rounded circle. This is a suitable size when releasing your cursor.
Tip: To scale the circle proportionally, press Shift and drag a corner widget.
If necessary, enter V to access the selection tool and restore the circle inside the large rectangle.
Now, you make the lens shape.
Once the Ellipse tool is selected, overlay on the larger rectangle until the center is displayed on the screen. Press Alt / Option and drag a circle drawn from the center. Search for cross hair guide and release your cursor when the circle is the correct size.
Close a small circle next to it. Click on its center and place the drag area on the larger circle until you enter the intersection or center
3. Size sum
At this step, you will combine the rectangle shape.
With the Selection Tool, click Rectangle, then Shift, and select Short Rectangle to select both. Select shape builder tool and pull a line connected to both rectangles as shown.
4. Add color
Now, you apply a fill color and different stroke characteristics of size.
Press V to go to the selection tool. With the selected camera body, fill the fill slide in the control panel. Click a color in the Swatches panel, then click on the stroke swatch and select someone to remove the stroke.
Repeat for Flash Circle; A white fill application, and no stroke.
To paint the lens, first select the external circle, and then click Shift + to select the second row. Apply any and apply a white stroke. Stroke weight increase by 5 pt
5. Apply a finishing touches
You can round the corner of the shape to create a different look.
Select Camera Body Press A to switch to the Direct Selection Tool and drag the corner widget to one corner.
6. Save for web output
As a final step, you'll copy and paste the icon in a new document for the final output.
Choose Select > All to select the entire icon and press Control/Command + C to copy it.
Choose File > New and select Profile: Web. Set the height and width to the size that you'd like to make the final image, such as 400 px by 400 px — the dimensions of a Twitter profile image.
Press Control/Command + V to paste your monogram into the center of the artboard.
If you need to resize your icon relative to the artboard, press Alt/Option + Shift and drag a corner handle to resize it proportionally from the center.
Choose File > Save for Web.
- In the Preset menu, select JPEG High. Choose PNG-8 to make the background transparent
- Select Art Optimized in the pull-down menu
- Select Clip to Artboard
Click Save to export your icon for your blog, website or digital publishing.
Learn more about saving artwork for the web
Comments
Post a Comment