How to draw normal icons. Simple Rules for Creating an Icon Design

• Tutorial

How to draw an icon correctly (size 32x32, part I)

Home Icon
To clearly see the shapes we are drawing, I will use a black fill. So, using the Pen Tool (K) we draw the basis for the Home icon.

Next to give desired color and outline go to menu Layer > Layer Style > eae6c9 to color cbcfba

Then, so that the shape will be contrasting in the future, we will assign an outline to this shape. To do this, go to the menu Layer > Layer Style > Stroke... and make a line 1 pixel thick and with color 868686

This is what we should get

Now using the same Pen Tool (K) we draw the base for the roof

Now let's give it the desired color - go to the menu Layer > Layer Style > Gradient Overlay... and make a gradient fill from the color b06a00 to color 8c4d00.

We get this result

Well, we already have some outlines, now we will complement our shape with details - using the Rectange Tool (U) we draw a pipe

Assign a gradient fill based on color to the pipe eae6c9 to color cbcfba, only this time we direct the gradient horizontally

As before, add a 1 pixel thick outline with color 868686

We get...

Now we hide the pipe in the background, and using the Rectange Tool (U) draw another roof element

Assigning a gradient based on color ce9128 to color b06a00…

... and add an outline 1 pixel thick and with color a86600

Let's see...

We hide the finished element in the same way as the pipe in the background, and again using the Rectange Tool (U) we draw a door

And we perform the already familiar operation with a color gradient b06a00 to color cd9128

... and don't forget about the line... thickness 1 pixel, color a75700

Let's see the result...

It turned out to be quite a nice house, but we will continue to fill our icon with details - press the Rectange Tool (U) and draw an attic window

Well, and, again, the gradient is from color 2e8ce0 to color 7cc6fd

Set the outline to be 1 pixel thick and the color 4381c8

We evaluate the result...

Our house is almost ready, but it looks too flat - we will add volume with the help of highlights.
Create a new layer and using the Pencil Tool (B) draw two lines

Go to menu Layer > Layer Style > Gradient Overlay... and make a gradient fill from the color 000000 to color ffffff. Pay attention to the Blend Mode parameter - I set the value Screen

You should get the following result

In order to achieve the effect we need, we need to apply the following manipulations to the layer:

As a result, we get this effect

Now let's create a highlight under the roof. Create a new layer, and using the same Pencil tool (B) draw the following

Since the gradient we have on this object will be exactly the same as on the previous one, it makes sense to save time and simply copy the style from the layer that we made before. To copy the style, right-click on the layer with the first highlights and select Copy Layer Style from the drop-down menu. Now right-click on the layer with the highlight under the roof, and select Paste Layer Style from the menu. Thus, we copied the style with a black and white gradient - all that remains is to manipulate the layer itself

The result will be as follows

We continue adding highlights. I would like to note that each highlight should be on a separate layer, this will make it easier to manipulate the styles... Draw four more highlights - each on a separate layer

I suggest saving time by copying the style from the layer on which we made the first highlight. Next, assign the copied style to each of the last four layers. We also perform appropriate manipulations for each layer.

As a result, we should get the following

At this stage the house looks complete, but I will still allow myself to apply the finishing touches, emphasizing the foundation. To do this, use the Pencil Tool (B), selecting the color f3f3ea, draw the following

Almost done. Below we will add another line with only color b5b8a3.

All that remains is to add shade to our house. To do this, select all the layers and group them into one group - this will be our source. Next, make a copy of the group, and in this copy we compress all the layers into one - go to the menu Layers > Merge Layers (Ctrl + E). This will be the layer to which we will apply a shadow, and we will make our source invisible

Next, go to the menu Layer > Layer Style > Drop Shadow... and assign a shadow with the following parameters

And, as a result, we get a ready-to-use icon!

I hope my lesson was useful to you.

In the case when the icon will be used on the screen. If you immediately make a raster, then when scaling the lines will blur and no longer fit into the pixels. But there is no point in drawing somewhere else: anyway, then import it into the layout in Photoshop.

Let's start with the fact that the problem of “soft” stroke is solved by the contour settings:

Now you can draw something. I just need a newspaper icon.

First I study the object being depicted. Google suggests the proportions:

I note the features on what is at hand:

I’ll take the first page from the archive as an example. NY Times. I immediately adjust the size to fit other icons. What is important here is the visual weight, not the mathematical parameters:

To make the anchor points stick to the pixel grid, you need to check the box here:

cmd+k

For lines of objects rotated at an angle not a multiple of 45°, sticking to the grid can be harmful, so the keys and [k] can quickly get worn out :-)

It is already clear that the newspaper turns out to be “heavier” than other objects. I reduce it a little:

When scaling, the anchor points pop out of the pixel grid. I insert them back where needed.

I'm adding details. I check whether the 6 columns are stacked so that the margins of the newspaper are equal (I accidentally found out that yes. Otherwise I would have had to make the newspaper a pixel wider.)

This is where the lines stick together disgustingly, forming a dark spot. This is not visible when enlarged, but in the previous screenshot it immediately catches your eye:

Now the name. In my icons, all the lines are the same thickness, so I can’t afford to draw a thick line instead of a title. I quickly sketch out the letters, ignoring the details:

I reduce it to the right size and I put each letter into a pixel grid:

I fill out the newspaper:

Almost done. I'm confused by the amount of ink. The icon turned out to be much denser than its neighbors. I discharge the lines, I remove the Titanic.

The newspaper is rolled up at the bottom. To enhance this effect you need a shadow. But you can’t use a shadow, so I come up with a clever trick - I put the bottom lines closer to the edge of the newspaper, so that near the edge the density of the lines increases, creating an apparent darkening.

To be honest, I even just like it this way:

I'll still think about which option to choose. That's all for today.

Many people don’t take online icon editors seriously, but in fact, such tools greatly facilitate the workflow. Just a couple of clicks can save you hours of searching, browsing, or doing your own development. In addition, there is no point in using full-fledged ones when available special services with tailored functions for these specific tasks.

Icon editor sites like these are very effective. They allow you:

• easily and quickly create new materials;
• give existing developments a finished look;
• save the result in different formats (SVG, ICO & PNG);
• create icons for .

In this article, we selected the five best online free icon editors and, for comparison, tried to create a set in each of them.

IconsFlow

IconsFlow.com - vector icons + editor that allows you to create personalized sets and export them to good quality(SVG, ICO & PNG). The main advantage of the service is the presence of two editors:

• the main one, in which the palette, style, effects are selected;
• form editor, where you can change the current shape or draw a new one.

If you've already created icons in Illustrator, simply download the SVG files and experiment with different backgrounds. IconsFlow has certain restrictions when using it for free, so make sure you read them before you start. There are lessons and a help section for novice users, and it is also possible to work in the icon editor in Russian.

View of the IconsFlow vector editor:

Work examples:

FlatIcons

With FlatIcons.net you can create your own flat icon (flat style) based on ready-made templates. Set the dimensions, choose a pattern and the main background (circles, rings, rectangles), change the color. This icon editor is free, but it has two disadvantages:

• Firstly, you can only download files in PNG format.
• Secondly, you will have to create each object separately, because... It is impossible to develop a whole set at once.

Despite the fact that the peak of popularity has already passed, many people use them in their designs. As an example, the developers allow you to download a free set of social flat icons. The result of working in the FlatIcons editor:

Launcher Icon Generator

The Launcher Icon Generator project is free and we think it is more suitable for advanced users. This online icon editor allows you to upload images/cliparts and add text. You can download one icon at a time in 5 sizes (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

The base clipart is a set of Material Design style graphics from GitHub. The service contains settings such as: indents, shape, background color or transparency, scaling + additional effects. Result:

Android Material Icon Generator is another tool for creating flat icons. The highlight of the service is definitely the effect in the form of a long shadow. If you need similar solutions, this icon editor will be an ideal option.

Start by choosing a picture from the gallery, then determine the color, shape background(circle or square), shadow length, saturation, attenuation - and your icon is ready. Everything is extremely simple. The site is completely free for personal use.

After downloading, you will find 6 PNGs in the archive file different sizes and an SVG vector file. The SVG icon will be blurry in Illustrator, but luckily it looks good in the browser. The end result is something like:

The Simunity site is an HTML5 generator where you can create an icon and then copy the code to display it in your web projects. Icons from Font Awesome are used as source materials, for which different parameters are selected: color, frame, size and style of shadows.

This service is useful if you need to quickly create simple, original icons for your website. Result of using Simunity:

Total. The online icon editors discussed above are excellent tools for optimizing the work of designers. There is no point in downloading any programs when everything can be done easily and quickly online. From this selection, perhaps, IconsFlow can be distinguished. It contains the maximum big number features: icon gallery, SVG download, embed code, preview, create your own templates, export PNG, ICO and SVG, adapt size, fashion styles and built-in vector editor. In addition, this is the only free icon editor in Russian, if this is important to you.

If you know any other similar services, send options in the comments.

This is what we should get:

Icons are an important part of interactive and web design. Although icons are small, they can be very difficult to create. In today's tutorial we will demonstrate how to create a folder icon using various forms and reflexes in Photoshop. Let's start!

Step 1 - New File / Pen Technique
Open Photoshop and create a new document (Ctrl + N). Use the following settings:
Resolution: 72dpi
Color mode: RGB color
Dimensions: 600 × 600 pixels

Create the following shape using the tool PenTool(P) (Feather). Color: #3da1e2

Step 2 - Creating Shapes Using the Pen
Draw the back of the folder using Pen Tool(Pen) using the same drawing technique. Then draw a stripe as shown in the picture.
Color: #003658 #3da1e2 #08517e

Step 3 - Finish the shape
Once you have finished drawing the folder, you need to add a piece of paper and an arrow as shown in the picture. You should now have 5 layers. Each shape will be on a separate layer. Give each layer a name.
Color: #ffffff #32e732

Step 4 - Adding Color Effects
Add the following layer styles to the front of the folder. Lower the opacity to 90%.

Add the following layer styles for the paper. Lower the layer opacity to around 90-95%.

Add the following layer styles for the stripe.

Add the following layer styles to the back of the folder.

Add the following layer styles for the arrow.

Now your icon looks like this.

Step 5 - Adding Reflexes
Add new group called "Reflexes". Use Pen Tool(Pen) to draw the reflection as shown in the picture. Make sure you only draw the outline and not the shape. Once you have closed the path, right-click on the workspace and select make selection(Create a selection) (feather 0). Take a large brush (about 470 diameter, hardness 0) and paint over the right side of the selection as shown to create a white reflection. Change the blending mode to Overlay(Overlay) and reduce the opacity to 63%.

Step 6 - Edges
Create a new group called "Edges", create a new layer in it (Ctrl + Shift + N or click the create new layer icon). Adding highlights to the edges gives the icon a 3D effect. Use Pen Tool(Pen) to create stroke lines around the corners and all the margins of the folder, paper, and arrows. Then right click on the workspace and select Stroke Path(Stroke) - Brush(Brush). The brush settings should be changed in advance, master diameter 8 pixels and hardness 0.

Step7 - Shadows
Create a new layer (Ctrl + Shift + N) for the shadows and place it in a new group (Ctrl + G). Make a selection like you did in step 5 to create the reflections. Fill the selection with black and then blur the margins with the tool Blur tool(Blur). If the shadows look too dark, lower the layer opacity to 40%.

Step 8 - Adding Text
Add text using any font you like. I chose "Agency FB". Font size: 40, layer opacity: 75%.

Step 9 - Final Addition of Reflections and Shadows
Add a few more reflections to the paper using the same methods as in Step 5.

Add shadow using Ellipse Tool(E) (Ellipse). Draw an ellipse as shown in the picture and add some Filter -Blur-Motion blur(Filter - Blur - Motion Blur). Reduce the opacity to your liking.

Final viewing
I hope you enjoyed this tutorial. I've added some additional icons that I created using the same techniques.

I recently read an article by Scott Lewis, who is a professional icon designer at Iconfinder.com. Scott earned a degree in graphic design from East Carolina University and has been designing icons for over 25 years.
I was interested in his advice on creating an icon, as well as his approach.

Three Keys to Good Icon Design

Form

Aesthetic unity

Recognition

These were the three main components of effective icon design. Next, we'll take a closer look at six steps to solve these problems.

Net

Parties

The grid is there to help you keep your icons neat and consistent, but if you have to choose between making an icon look pretty or breaking the rules, then break the rules—but do it very carefully.

Geometric shapes

Numbers: Edges, lines, corners, curves

ANGLES

CURVES

ROUNDING CORNERS

PIXEL SMOOTHING

However, I note that anti-aliasing becomes less relevant at large sizes and on screens with high resolution, such as retina display.

LINE THICKNESS

Use repeating design elements and accents in icon sets

Use details and decorations very carefully. An icon should quickly communicate an object, idea, or action. Too many small details will make the image complex and therefore less recognizable, especially at smaller sizes.

The level of detail in one icon or set of icons is the same important aspect aesthetic unity and recognition. The main rule is the minimum of details necessary to convey the meaning of the icon.

Make the icon unique

All these simple steps should be viewed as a starting point rather than a definitive guide. Once you have mastered the theoretical and technical fundamentals, you can focus your energy on creating unique icons that will stand out from the crowd thanks to your creative vision.

A set of icons that were used on