How to draw a logo in PowerPoint step by step with a photo. Simple Rules for Creating an Icon Design

  • 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 in a lot of effort - in the end you will understand that drawing icons for interfaces is not so easy difficult task, you just need to be patient and know how to work in Adobe Photoshop.

So, let's begin! 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 key combination Ctrl+N, 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 on the keyboard combination Ctrl+K 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 add the desired color and outline, go to the 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 Tool (K) draw the base for the roof

Now let's give it the desired color - go to the menu Layer > Layer Style > Gradient Overlay... and do gradient fill from 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.
We create 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'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.


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.

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

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 anti-aliasing becomes less relevant at 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 a single icon or set of icons is an equally important aspect of 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

Master class "Creating logos for teams in PowerPoint2010"

Author Rostova Natalya Sergeevna, teacher of the first category, MBDOU " Kindergarten No. 155", Nizhny Novgorod.
The master class is intended for educators, teachers and parents.
Target: use the power of PowerPoint2010 to create logos.
Tasks:
- teach how to create emblems;
- improve pedagogical competence;
- expand the possibilities of using ICT technologies in work.
To create emblems you need:
- availability of a PC;
- pictures and backgrounds for emblems of a certain theme;
- computer skills and PowerPoint 2010 software.
The technology for creating emblems is easy to master using the capabilities Microsoft Office Powerpoint2010.

Progress of creation:
Open PowerPoint 2010 and create a blank slide.
The emblem will be round, so on the tab Insert, select Shapes - Oval.


While holding the button ctrl, stretch the oval into a perfect circle. The size is adjustable according to the required dimensions.

The inscription in the logo should be located in a circle, so select the Insert - Inscription tab. Then click on the figure and select the tab Drawing Tools - Text effects- Convert - Trajectory of movement - Arc upward.


Enter the text. I have the name of a kindergarten.
We choose a motto. I have “Fly(m) to victory!” We also place the motto in a circle, but in its lower part.
Select the tab again Drawing Tools - Text Effects - Transform - Motion Path - Arc Down.


Using the tab Home - Font, select the color, font and font size for the inscriptions. Now we need to replace the circle fill:
Drawing Tools tab - Fill - No fill. You can skip this step and just select Fill - Drawing


Select the desired drawing. I have a starry sky.
Now let's insert a picture suitable for the team name. Our team is called “Rocket”, so I have a picture of a rocket, found on the Internet and modified by me. Tab Insert - Drawing and select it from the desired folder.


We adjust the size of the image according to the size of the emblem, reducing its size. My rocket has no fire, so I choose the desired picture and add the missing element. Please note that we put the picture of fire in the background. Tab: Drawing Tools - Send to Back.


The emblem is almost ready. Let's move on to its final design. We work with the outline of the circle, select its color and thickness. Drawing tools - Figure outline - Theme color - Thickness - Other lines - Line type - Width I choose 10.



We again apply a circle to the created emblem.



Let's adjust its size. The second circle should be larger in size than the first. On the Drawing Tools tab - Shape Fill - No Fill. The figure will become transparent.


Now we work again with the outline of the second circle, its color and thickness. The thickness of the outline of this circle is 12.


Adjust the size of the second circle in relation to the first.
Please note that created on this moment The emblem consists of two figures, drawings and inscriptions.


We use grouping.


After this action, the emblem has become a single whole and can be moved entirely to any place on the slide.
The emblem can be saved as a drawing. Click on the logo, click on right button mouse, select save as picture and select a save location.


The emblem is ready. By analogy, we create any other emblems on any topic.
I got these:





Dear colleagues, to create emblems you need to choose drawings on transparent background. If the required drawing is superimposed on the background, then any Photoshop program or command will help us out Working with pictures - Remove background. Thank you. I wish you creative ideas!

Depending on your artistic talents, creating a logo may be something you can do in your sleep, or it may be something that will give you insomnia. If you are one of those who find it difficult to come up with and draw pictures, this article is for you. In this article, a specialist from Logaster will tell you how to create a logo step by step - from choosing an idea to choosing the finished file format. Your logo may not win any awards, but at least you'll have a nice logo to put on your website or business card. So let's begin! Steps 1 to 4 are about " brainstorming" when creating a logo. Steps 5 to 7 will teach us how to create a logo design, including such aspects as choosing a shape, font, and color. And in Step 8 we will learn how to create the final design as a finished file.

Logo creation statistics
Before we move on to tips on how to create a logo, we would like to provide statistics about the logos of top brands. Here are a few key points, which you might want to look into as you develop.

Step 1. Finding an idea for your logo
Online logo galleries such as Logogala.com and LogoFury.com - great places, where you can get inspiration from designers.

Look at the logos of other companies similar to yours. Ask yourself what you like and don't like about them. What works and what doesn't, but don't copy the design - just find what you like and follow that style into own development. Your goal should be to come up with a logo design that communicates who you are, what you do, how you do it, and who you do it for.

Another way to find an idea for a logo is to make several sketches of the future logo. Write the name of your logo in different styles and fonts, draw different symbols, icons – in a word, everything related to your company and product/service. Perhaps one of these sketches will become the basis of your logo.

Step 2: Think about your target audience
A logo is not created because it is necessary or fashionable. The logo must have a specific function and benefit for the company. Therefore, at the initial stage of creating a logo, you should clearly understand who your clients are, what they like, and what qualities of your company they value. Finding out this is necessary to create a logo that will evoke the feelings and emotions that you need and thus create a positive brand for your company. To do this, you can ask yourself 11 questions that need to be answered before creating a logo

Step 3. Adhere to the principles and rules of creating logos
To make a logo truly effective, you need to follow certain rules. To know detailed information You can learn about the principles of creating a logo in the article; below we have selected the most important principles with a brief description.

The logo must be simple: A simple logo design makes it easy to recognize and allows the logo to be versatile and memorable.

The logo must be memorable: Efficient Design The logo must be memorable and this is achieved through the originality of the logo, which will stand out among others.

The logo must be durable: The logo must stand the test of time - not lose its effectiveness under the influence of fashion or any other short-term phenomena, be built for the future and be effective in a few years. For example, well-known companies do not create new logo, but only slightly improve it, making it more modern.

The logo must be universal: A high-quality logo always looks great in any environment and in any form.

Step 4: Draw some logo sketches
Sketching is a quick and easy way transfer ideas from your head to paper. So after you've collected all the ideas, take a paper and pencil and draw some logo examples. If you don't know how to draw with a pencil, you can use graphics programs such as Illusrtator, Photoshop. If they are not possible, use online logo designers. With their help, you can find the right icon or font for your logo.

Step 5: Choose a Logo Shape
The logo shape has psychological impact on people. With the help of certain forms you can evoke the desired feelings and emotions. For example, a square symbolizes stability and constancy, a triangle symbolizes strength and knowledge. How to choose the right logo shape? Look at the image from Logowiks below and choose the one that suits you based on the characteristics of your business.

Step 6. Decide on the color of the logo
When choosing a color for your logo, think about what color reflects your company's personality. For example, if your company is fun, creative and vibrant, consider using yellow or orange shades in your logo. Using the infographic below, you can choose the logo color based on the theme of your business. Click on the picture to view it in larger size.

Finally, think about what colors your competitors are using. This is important in order to stand out against their background. Sometimes, choosing a color that is the opposite of your main competitor can help customers differentiate you.

Also be sure to think about the functional impact of color on things like readability, eye strain, and attention-grabbing. To do this, follow the rules below:

1. Stick to 2 primary colors, and do not use more than 4. A small amount of allows you to achieve the desired effect.

2. Choose only 1 or 2 primary colors and the rest should be additional colors barely distinguishable.

3. Resist the temptation to add more colors - use more shades instead.

4. Provide enough white space to allow the eyes to remain relaxed.

Useful services for color selection
Finding the right color is not easy. Luckily there are many online services, which will help you with the selection of colors for the logo.

Kuler.adobe.com
Adobe's service provides a large library of ready-made color schemes and also using a special color wheel you can select colors that will match the desired color. Detailed video how to work with Kuler.adobe.com

Сolorscheme.ru
This Russian-language service for selecting colors and generating color schemes. The service works similarly to Kuler.adobe.com, but has slightly fewer features. Detailed video on how to work with Colorscheme

Step 7: Choose a font for your logo
Font selection is important aspect logo design. Correct font can highlight the advantages of your company, but an incorrect one can make the logo unreadable and negate all your efforts in creating a positive image of the company. At the same time, among thousands of the most diverse and attractive fonts, how can you find the one that is ideal for your logo? Click on the picture to view it in a larger size.

Here are a few simple tips that will help you in this matter: Avoid popular fonts Yes, yours office suite Microsoft Office includes a set of fonts. The problem is that everyone else has it too. Therefore, using a font from your OS library would be a bad idea. The same rule applies to popular public fonts. Be Timeless If everyone suddenly seems to be using a certain font style (like the now ubiquitous Sketch Block), keep looking. Look for original fonts that will make your logo stand out. Remember, the font and logo as a whole should stand the test of time. Trends come and go, and what you definitely don't want is to invest a significant amount of your time and money into a design that will become outdated almost overnight.

Choose a readable font. The logo text should look great, and even more so, be readable in a small size. Check how the font will appear in different sizes. Give Some Space Jazz trumpeter great Miles Davis once said that the notes you don't play are just as important as the notes you do play. Therefore, when choosing a logo font, it is necessary to take into account the distance between characters (kerning). Too much long distance can make the logo look scattered and disjointed, and too little can make it illegible.

Use the personality of the font. Your logo is the face of your brand. It is number 1 on your company's list of community touchpoints. So when choosing fonts, think about the personality of your brand and what you want to convey with your font. Is it speed, strength, reliability, availability or attention to detail? The style and personality of the font will go a long way in creating a quality logo.

Useful sites for finding fonts
Among popular services To search for fonts, you can highlight the following.

MyFonts.com
MyFonts is one of those places where you can find all the free fonts at once. In addition, there are paid unique fonts.

Fonts-online.ru
Some fonts on the site are distributed free of charge, but you must purchase a license to use them for commercial purposes.

Webfont.ru
Catalog free fonts(there are Cyrillic ones). There is a search and filter by font families.

Also see our selection of 200 free fonts for creating logos.

Step 8: Create the final design
After you have made a few sketches of the logo, you need to move on to creating it. You can do this in 3 ways: - create a logo yourself in graphics program; - create a logo using online generator and logos; - Use an online logo maker.

Create a logo yourself
If you choose this method, you will need to decide on a drawing program, such as Adobe Illustrator and/or Adobe Photoshop.

Adobe Illustrator is vector program for drawing. It is often used to draw illustrations, diagrams and logos. Lessons on creating a logo with using Adobe Illustrator:

Adobe Photoshop is the most popular program for photo editing and raster images. Its uses range from full-featured editing of large photographs to the creation of complex digital paintings and drawings. Lessons on creating a logo using Adobe Photoshop:

Creating logos using an online logo generator
Online logo generators are a good option if you don’t have the skills and knowledge to self-creation logos and lack of resources (time, money). We have collected several online services that will be useful to you when creating logos.

Logaster.ru
Russian-language online logo generator, with support for Cyrillic in logos. We described the process of creating a logo using this service below. Let’s just clarify that after creating a logo, you can download files in raster (PNG and JPEG) and vector formats (SVG and PDF). You can also make business cards, envelopes, forms, favicons based on the created logo.

Zillion Designs
This is a simple logo creation tool. You can create your logo in just 3 steps, similar to Logaster. In Zillion Designs, you choose all the elements of the logo yourself - image, color, font. After successful creation logo, you can download the file at EPS formats, JPEG and PNG.

Hipster Logo Generator
Interesting service to create a logo. This service is full of different tools and settings, so you can create a logo that looks exactly the way you want. With Hipster Logo Generator you can create simple but interesting logos. There are also disadvantages - you cannot edit elements, and the interface is in English.

How to create a logo online
Let's create an example logo using the Logaster service. Go to home page service and click “Create logo”.

Enter your logo text and select a theme. Click “Next”.

The service will offer dozens of logo options. Choose the one you like and click on it.

If you need to make edits, for example, change text, color, icon, font, etc., then click “Edit logo”.

Use the color selection infographic to choose the right font for your type of business. Use the same tips for choosing a font. If you are happy with the logo, click “Save”. Download the logo for free (small size) or full size for $9.99.

In addition to the logo, you can also create other products. For example, a business card or letterhead.

Keep listening
Once your logo is created, it is important to remain open to feedback. To do this, show the logo to a test group of people who match your client's profile. You can show them several design options or just the one you feel is the strongest option. Ask them if they like the logo, what emotions it appeals to. If you are satisfied with the answers, congratulations! You created a great logo. If not, you may need to rework your logo design.

Choose correct format files for logo
Your logo can be saved in two formats. One is known as vector and the other as raster. You need logo files in both one and the other format. Vector format(PDF, CDR, EPS, SVG) are used for editing the logo, as well as for scaling and printing. Raster format(PNG, JPEG) is used for browsing the Internet. For example, to place your logo on a website, social networks, in a caption e-mail. To work with vectors, programs such as Corel, Adobe Illustrator, Inkscape ( free program), for raster - Adobe Photoshop, Pint.Net and others.

That's all! I hope our article was useful. Don’t forget to write what tips you have for creating a logo and share the link to the article on social networks.

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.