How to draw an icon in Photoshop. How to draw a logo in PowerPoint step by step with a photo

How to draw Warface icons

In this lesson we will learn how to draw icons from the game Warface. The first will be the logo of the game itself, the second will be an icon for achievements.

1.Here is the logo. Yes, for those who don’t know, the pictures are enlarged.

You need to draw a rectangle. We do this: draw a straight line, divide it in half (lower it down vertical line), down from the extreme points we measure this half and a little more, draw a horizontal line, then retreat again - this will be the middle of the rectangle (marked with a small straight line). You draw two straight lines by eye (I have an indentation from the top and bottom of the rectangle, respectively), but the distance from the middle on the right and left should be the same. You don’t have to do all this, but draw it by eye.

We draw the middle part, diagonal lines on the side, we will need them for further drawing.

We erase all the auxiliary lines, leaving only in the middle, and draw further.

You can primitively paint over the icon this way.

2.The icon, its resolution is very small. I wanted to make several icons, but they are so small, it is very difficult to see the details, so we have what we have. Let's begin.

Draw a circle and guidelines, then the shape of the head. A lion's lines are rough and straight. Draw the facial features and erase the circle.

We draw the teeth, tongue and straight lines that extend from the head.

We draw the mane, if thin lines are drawn, then you also draw it barely visible.

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 developing yourself. 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 to:

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, just download the SVG files and experiment with different backgrounds. In IconsFlow there are certain restrictions at free use, so make sure you familiarize yourself with 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 free set 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).

A set of graphics in the style is used as a basic clipart Material Design from GitHub. The service contains settings such as: padding, 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. For personal use the site is completely free.

After downloading, you will find 6 PNGs in the archive file different sizes And vector file SVG. 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: 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. Discussed above online editors icons – great tools to optimize 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, Creation own templates, export PNG, ICO and SVG, adapt size, fashion styles and inline vector editor. Besides this is the only one free editor icons in Russian, if this is important to you.

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

I recently read an article by Scott Lewis, who is professional designer Iconfinder.com icons. Scott received a degree in graphic design at 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

Well-designed icons demonstrate a deliberate approach to the three essential attributes of any design - form, aesthetic cohesion, and recognition. When developing a new set of icons, let's consider each of these attributes in order.
I won't say that a perfect design requires only three components, but it's enough to get you started. And so let's get started.

Form

The form is basic structure icons. If you ignore the details and just draw lines, then the overall result may turn out sloppy, without overall geometricity. Basic geometric figures: Circle, square, and triangle – create a visually solid basis for icon design. Therefore, initially the icon should be created from the simplest forms and only after that we add details, but as much as is really necessary to convey the concept.

Aesthetic unity

Elements that are used when creating a single icon or a set of icons, such as rounded or sharp corners of certain sizes (2, 4 or 8 pixels), line thickness (2 pixels or 4 pixels), style (flat, outline), color scheme, etc. d. must be united.
Thus, aesthetic unity is a set of design elements that are repeated throughout the set. This can be seen in the example below.

Recognition

Recognition is the main criterion; this is the essence of the icon. Recognizability includes those properties that a person usually associates with a particular object, with a particular idea, but it can also include something unexpected - this creates uniqueness, for example, an incomplete outline and rounded highlights.

There were three main components effective design icons Next, we'll take a closer look at six steps to solve these problems.

Net

Always start drawing icons in a grid. I use a 32x32 pixel grid, leaving the outer two pixels always empty. The purpose of this zone is to create free space around the icon. If you do round icons, then it should touch all four edges, without going into the free space zone, but sometimes, in order to preserve the integrity of the icon, some element may extend beyond the circle, as in the picture:

Parties

Square icons do not have to extend or touch all four sides. To maintain visual proportion with round and triangular icons, most rectangular and square icons will be aligned to the key center line.

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

Start with simple geometric shapes. Even if the icon ends up being more organic, still start with simple geometric shapes in Adobe Illustrator. When it comes to creating icons, especially small ones, basic geometric shapes will make edges more precise and allow you to quickly adjust the relative scale of elements.

Numbers: Edges, lines, corners, curves

To prevent a design from looking mechanical and boring, angles, lines, edges and curves must be mathematically precise. In other words, follow the numbers and don't try to draw by eye or by hand when it comes to details. Inconsistency in these elements can reduce the quality of the icon.

ANGLES

In most cases, you need to stick to an angle of 45 degrees or multiples of it. Angle smoothing of 45 degrees prevents unnecessary pixels from appearing, thus producing a clear result with an ideal diagonal, creating pleasant and recognizable outlines for the human eye. These outlines unite the entire set of icons, and also create unity within one icon. If your design forces you to break the 45 degree angle rule, then try making it 22.5 or 11.25 degrees, as the smoothing will be more or less even.

CURVES

These are the most noticeable areas that can degrade the quality of the icon. Thanks to them, you can distinguish a professional from an amateur. Since the human eye can detect small inaccuracies, drawing by hand will not help you achieve your goals. Rely on tools, shapes and numbers to create curves.

ROUNDING CORNERS

The corner radius is 2 pixels. For a 32x32 pixel icon, this radius is just enough to make the corner truly rounded, without softening the corners enough to round the design into a bubble. The main thing to remember is that the design of the icon itself will depend on the choice of the rounding radius.

PIXEL SMOOTHING

Perfect pixel alignment is essential for small icon designs. Anti-aliasing the corners on such icons can make the icon appear blurry and unclear. The space between lines that is not aligned with the pixel grid will be smoothed out and become fuzzy. As mentioned above, 45 degree angles and their multiples are smoothed better.

However, I note that smoothing becomes less relevant when large sizes and on screens with high resolution, such as retina display.

LINE THICKNESS

In general, it is best to use no more than two line thickness options in one icon, but sometimes three options are simply necessary. Your goal is to visually provide hierarchy and variety without ruining the integrity of the entire set. Using more than three line weights can destroy structure and cohesion. As for the line width itself, it is better to take multiples of two and four pixels again; they are easy to scale and make even steps. Try to avoid very much fine lines, especially in basic icons and flat icons, but this rule does not apply if you deliberately create icons from thin lines.

Use repeating design elements and accents in icon sets

For example, Hemmo de Jong, a famous Dutch designer, uses a repeating element in all his icons - a sharp angle.

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

The number of talented designers creating high-quality icon sets, many of which are now available for free, is growing exponentially every day. Unfortunately, most of them focus on the trends and styles of the most popular designers. Therefore, it is very important that your design is memorable and truly 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

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. When enlarged, this is not visible, 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.

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, so you can avoid unnecessary work when drawing by showing your images to the customer first.

Step Four: Size

This is generally the most important thing: to decide on the minimum size.
What is it 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 themselves. small 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 big, you might get tired quickly and give up halfway through. Normal speed there will be about 20 icons a 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.