Practical tips for drawing design of PS 6 vector icons

Today bamboo to introduce the 6 icons to draw tricks, easy to understand, but the effect is outstanding. Long learning can be miraculous, to achieve any vector graphics are easy, regardless of a variety of horizontal, vertical, grotesque shapes are available. (The following interface demonstrates using Photoshop CC as a demo tool)

　　First Sword, less commercial sword shape layer

Features: Jian Lu Shongjing, quite a rock, wind and rain to the potential.

PS is a pixel processing software, you can do with the AI like to draw a variety of complex vector graphics. Some readers will ask why not AI, but to learn PS drawing path, because PS is suitable for UI design tool software, and various graphics PS can do pixel alignment, AI draw path to import PS or two times to adjust. So let's show you how to draw a vector icon from a shape layer.

The ① foreground color selects black, and the prospect selects the color that draws the shape layer

② Tool mode selection path, be sure to select the path, not the shape, because the directly generated shape black a large, very bad for two times edit path.

You can set rounded corners in the ③ shape Properties panel.

This is a great feature in the Photoshop cc version. Especially for UI designers. Shape properties are located in the Properties panel, and we are free to set various parameters.

For example: Graphic size, fill color, stroke color, stroke width, stroke style (including dashes, alignment, segment endpoints and merge types), fillet radius options (not available for ellipses)

A rounded rectangle with a vector is drawn.

　　The sword in the second sword. Custom Shape Tools

Features: Big open doors, the momentum of the male Michael

PS built-in a lot of shapes, many basic graphics do not need to draw themselves, directly in the use of the corresponding graphics can be.

First create a new layer, then use the Polygon tool, select 3 edges

Then draw a triangle with the shape layer tool

As shown in figure:

　　The third Sword Shangyangjian Boolean operation

Features: ingenious and flexible, elusive.

Some complex graphs are subtracted by the addition of various graphs. So we need to use Boolean operation tool flexibly to achieve the goal of combining final graph.

Hold down CTRL and select the Layer shape 1, Shape 2

Press Ctrl+e to merge two paths directly:

Get a dialog graphic by merging.

menu at the top of the path combination tool, you can try different combinations of paths, to understand the different paths combined Boolean operation effect.

　　Chapter Four Sword closing and punching sword layering drawing

Features: To the humble lag simple to win.

Many complex basic types do not draw on one layer, they can be plotted in layers, drawn separately through each layer, and eventually merged together.

Create a new layer, draw three circular vector graphics, you must create a new layer oh. If you draw the path directly, the new path and the original path mix together, the adjustment is very inconvenient, the path about complex, you will feel the benefits of layered rendering!

Select the layer of the circled graphic, CTRL + C

On the rounded rectangular layer, CTRL + V, the circle path is pasted on the rounded rectangular layer:

And then:

　　Sword Less Sword path selection tool

Features: Brisk and quick

When you edit a bunch of complex paths in an icon, it may not be easy to select a path quickly, and you can use the path selection tool.

What's the difference between these 2 arrows, the black arrows can select all the paths, and the white arrows can select the local path.

　　Sword-Less Sword pen tool

Features: Sudden and sudden, change subtle

There are some shapes, strange shape, such as the following eggplant, can not be directly through the basic graphics, this time can only use big strokes, pen tools! Master Pen tool, you can freely draw a variety of graphics.

Select Pen Tool

Draw an ARC path, hold down the ALT key to select the endpoint of this path, why do you need to click? You can experiment, if you do not switch this endpoint, draw the next path will have a radian. You can't draw a path in the direction you think you want.

Click the following path after the selected

Then we'll draw the next path

Click the endpoint of the path again

The following path is plotted in sequence

Then draw a path to the cut graph and remove it using the Boolean operation tool:

Finally use the Pen tool to draw the eggplant's handle with the steps as above.

Finally get the vector graphic of this eggplant:

Today's lesson is here, do not know through the six-vein sword of the trick we can freely draw all kinds of vector graphics it?

See more than to practice, we can take this eggplant to practice the homework.

Classification:

• PS Getting Started Tutorial
• ps icon making tutorial