Simple rules for creating an icon design. How to draw icons so that they are clear

From Ollin Boer Boan, and now we are publishing a translation of his article sent by our CrossFire reader.

Designers often need to create small, pixelated icons for toolbars, lists, help documentation, or simply as smaller versions of full-size, more realistic icons.

We're talking about icons like these:

Most often, 32px icons are created in this style (which are discussed in the article), but in some cases, 16px, 24px, 48px, or even 128px icons are drawn in a similar way.

Like many icon design techniques, this style evolved as a result of the limitations of the environment, and we use it today because it's great for small icons. Pronounced borders, refined details, attention to every pixel - this is what distinguishes small icons from large ones.

Style

This style is universally used when creating icons of the size in question, that is, almost anywhere where space is limited, and therefore clarity is key.

Let's look at a few examples:

Well, my set in the Legend of Zelda universe, created specifically for this publication

Based on these and many other examples (the Internet is full of great examples), we can highlight the characteristics of a good 32 pixel icon.

Here is a short list of them:

Organize your workspace

Proper organization of space allows you to create small icons faster and easier. I recommend using my experience and setting yourself something like this:

I will highlight a few points about this organization:

Icons are drawn at double resolution using a 2px grid. This gives you confidence that the resulting icon will be smooth, without jags or ladders, and allows you to not worry about filling some pixels correctly. You can work a little sloppily in the upscaled version and get excellent results at the target resolution.
The next technique I wanted to talk about is using a canvas with wide margins, and a smaller, switchable dark square bordering the icon. The trick comes from the fact that outline pixels often “stick” to the edges of the canvas, and by using additional padding we get an idea of how the icon will look when used. A dark square is something that can be displayed when drawing an outline to ensure that the icon does not exceed the intended size.
I use a separate, non-distracting window showing a 50% smaller copy of the icon being drawn. You can create this using [ View>New View ] in GIMP, or [ Window > Arrange > New Window of... ] in Photoshop. This technique eliminates the need to zoom out every time to see what happened after editing.

Common Mistakes

Because this painting technique is so common, I often see the same mistakes pop up over and over again.

Here are some tips on how to avoid them:

Either they forget to draw the shadow, or they make it too dark. This is one of the most common mistakes. Shadows are a necessary detail that makes the icon look like it is attached to the background, and if this detail is missed, it looks glued to the background. On the other hand, adding too dark a shadow also worsens the result. The icon should be extremely transparent, but have opaque areas in the areas adjacent to the substrate. It's a bad idea to try to make one shadow for the entire set of icons; it won't work that way.
Opaque edges. Because of them, the icon looks bad on substrates different colors. Never do these unless you want a border darker than the inside color.
Don't center the light source on the icon, adding unnecessary circular gradients, etc. Icon shading should be extremely simple 90% of the time. Some materials, such as metal, require more detail, but most others can be rendered using just linear gradients and borders with a light inner shadow.
Ugly, faded colors. I notice these all the time, especially when they're on the borderline that really needs rich color. The appeal of 32px icons comes from bright, seductive colors - be careful when choosing them. In the next article, I hope to go into more detail on techniques for achieving beautiful, vibrant colors - but for now, just remember that "soft" light and coverage are your best friends.
Foggy or stepped edges. The best solution A way to avoid this mistake is to draw the icon at double size using a 2px grid, and then merge the layers and compress it to the target resolution. Aligning parts to the grid is extremely important for creating a high-quality icon; don’t be lazy to spend time on this.

The process of creating an icon in real time.

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. New York Times. I immediately adjust the size to fit other icons. What is important here is visual weight, not 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 required size and put each letter into a pixel grid:

I fill out the newspaper:

Almost ready. 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.

Experienced guys can avoid sketching at all, but make themselves a list of images and immediately work with variations.

If you draw icons to order, draw sketches, this way you will avoid extra work when drawing, having previously shown your images to the customer.

Step Four: Size

This is generally the most important thing: to decide on the minimum size.
What is this for? If you want your icons to be sharp-edged, pixel perfect, and scale correctly, you need to decide on the size and thickness of the objects at the smallest size (x1). I recommend using even icon sizes.

Step Five: Process

Create a document with values

Where Spacing is the distance between artboards.

Width and Height — the height and width of the artboard.

Raster Effects — resolution (ppi) suitable for icons 72

Align New Objects… - this checkbox is responsible for linking points to the pixel grid. I advise you to turn it on, but during work, you can always turn it off.

Select the first artboard, it will make all the icons, and the finished ones will be inserted onto adjacent artboards.
Create a square to fit your work area.
Set up guides to make the drawing process easier.
Use Pixel Preview
Mark ready-made icons in the list of images, so you can clearly monitor your progress.
Follow the advice and the previous article about.
Don't make your first set too long; you might get tired quickly and give up halfway through. The normal speed would be about 20 icons per day, then they can quickly get boring...
Design the source file, and don’t forget to put things in order in the layers, prepare a file for Photoshop and sketch, for example.
Prepare a shot for dribbble and behance, create a post for social networks. This is the best PR for your work and access to new orders. Don't forget about the hashtags: #design #best #mamalubitmenya #kupiteikonky

Where to sell:

graphicriver.net is a free platform for trading any digital content.

creativemarket.com - to create an account here you will be asked to show accounts on other stores and your portfolio.

thenounproject.com — the site is probably with the largest database of icons, they offer a choice: either free or for a single payment, there is also a monthly subscription function, but I would not bet on this service if you want to make money.

icons8.com - I don’t know anything about this store, if anyone has experience, share it in the comments.

Tutorial

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

I would like to bring to your attention a lesson on creating 32x32 icons in the program Adobe Photoshop. This lesson will allow you to learn how to draw icons without putting a lot of effort - in the end you will understand that drawing icons for interfaces is not such a difficult task, you just need to be patient and know how to work in Adobe Photoshop.

So let's get started! First of all, so that the icons do not deviate from the size and are similar in style, we need to make a template on the basis of which we will draw a series of icons.

First of all, let's launch the Adobe Photoshop program, then go to the File > New menu, or press the Ctrl+N key combination, and create an image of 32x32 pixels, and a resolution of 72 dpi.

Next, in order for our icons to have clear, unblurred edges, and in the future they look clear and contrasty, we need to set up the display of the Grid, thanks to which we will be guided when drawing - after all, the image consists of pixels, accordingly we need it to display grid with one pixel step.
Go to the menu Edit > Preferences > Guides, Grid and Slices, or press the combination Ctrl + K on the keyboard and make the settings as shown in the image.

Now we have created a template on the basis of which we will create our little masterpieces. Since our icons imply a shadow, this needs to be taken into account. I plan to make the size of the shadow 2 pixels below the icon and 1 pixel on each side, therefore, our icon will be 30x30 plus the shadow. For convenience, let's set up guides that will allow us to further see the boundaries between the icon image and the shadows for which we have allocated the appropriate space.

As a result, our template is ready, and now we can proceed directly to drawing icons.

Home Icon
To clearly see the shapes we are drawing, I will use a black fill. So using the tool Pen Tool(K) Draw the base 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 still allow myself to apply finishing touches, emphasizing the foundation. To do this, use the Pencil Tool (B), selecting the color f3f3ea, draw the following

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

All that's left to do is add some 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, in the end, we get a ready-to-use icon!

I hope my lesson was useful to you.

In this tutorial we will learn how to draw a beautiful TV icon in Adobe Photoshop.

Step 1.

Create a new document (File > New) with settings shown

Step 2.

Fill the background #FFFFFF color and then apply the following to it Layer effects.

Step 3.

Use with radius 35px BODY, open Layer Styles and apply the following settings.

Also add Stroke with layer BODY with the following settings

Step 4.

Step 5.

Use Rounded Rectangle Tool (U) with radius 35px and create a rectangle of any color. Name this layer BODY_2 and after that apply the following effects to this layer.

Also add Stroke to layer BODY_2 with the following settings.

After that add Inner shadow to layer BODY_2 with the following settings.

Step 6.

You should get a similar result.

Step 7

BODY. Name this layer BASE. Use Rounded Rectangle Tool (U) with radius 35px

To do this, select the layer BODY right click and select Copy Layer Style and then select the Base layer, click on the right mouse button and select Paste Layer Style.

After this you need to correct the thickness Stroke on 3px in layer BASE.

Step 8

You should get a similar result.

Step 9

Create a new layer and place it below the layer BODY. Name this layer FOOT. Use Rounded Rectangle Tool (U) with radius 35px and then apply the following layer effects to it.

Apply also Inner shadow to layer FOOT.

Step 10

You should get a similar result.

Step 11

Now duplicate the layer FOOT and place it as shown in the picture.

Step 12

Create a new layer, name it GLOSSY and place it on top of all layers, then select Brush Tool (B) and use a large brush with soft edges to paint one white spot.

Then change Blend Mode on Overlap with reduce Transparency on 50%

Step 13

Create a new layer and name it SCREEN and place it on top of all layers.

Use Rounded Rectangle Tool (U) with radius 35px to create a rectangle. Then copy Layer style BODY_2 and apply it to the layer SCREEN. Now adjust the stroke thickness to 10px in layer SCREEN.

Step 14

You should get a similar result.

Step 15

In this step we will make the screen itself. Create a new layer SCREEN_2. Place it on top of the other layers. Use Rounded Rectangle Tool (U) with radius 35px to create a rectangle. Then apply Gradient V Layer Styles with the following settings.

Then apply Inner shadow to layer SCREEN_2.

Then apply Inner glow to layer SCREEN_2.

Then Shadow to layer SCREEN_2.

Step 16

You should get a similar result.

Step 17

Create a new layer and name it SCREEN GLOSSY and place it on top of the others. Then select Pen Tool (P) and draw a contour as shown in the figure. And fill it with white #FFFFFF. Then we reduce transparency to 20%

Step 18

Create a new layer and call it LIGHT DOT and place it on top of the rest in a layer. After this we select Brush Tool (B) and with a large brush size, with soft edges, place one large white spot in the center of the screen.

Step 19

In this step you will make buttons. Take Ellipse Tool (U) and create a circle and place it approximately like in the picture, name this layer BUTTON.

Now go back to the layer BODY_2 and copy it Layer Style by right-clicking on it and selecting Copy Layer Style. After that, apply the copied style to the layer BUTTON.