How to make a photo from triangles. Lessons on creating a Low Poly portrait
Polygonal graphics have become very popular in Lately and attracts the attention of some designers and artists. The image of portraits, objects or any drawings in the form of vector polygons looks impressive and unusual.
Also, polygonal drawing is often used for the background; a slight color difference on the triangles creates interesting effect volume. The process of creating such drawings will be discussed in this article; you will learn about manual and automatic methods of drawing with polygons.
Manual polygonal drawing method.
The tool is ideal for drawing polygons in Adobe Illustrator "Feather". Make sure there are no gaps between the polygons. On small details a much larger number of elements are required so that they do not get lost. It is advisable to construct polygons in such a way that the boundaries of the image coincide with the boundaries of the polygons.
In order not to waste time drawing each triangle separately, you can drag one of the nodes onto the copy (more details in video lesson at the end of the article).
But in any case, drawing polygons by hand takes a lot of time, especially with high detail. In addition, the jambs may not be noticeable during the work, and then it is very inconvenient to correct them.
When the mesh is ready, it's time to start painting. Take the tool. While holding down the key Ctrl select the element, and then release and click with the eyedropper on the color below the selected element. The polygon will be repainted in the desired color.
It looks much more interesting when the triangle has a gradient fill.
Automatic polygonal drawing method.
This little program can perfectly draw polygons from your photo. Automatically, in any quantities and without jambs. And the best part is that coloring is also done automatically.
Unzip the downloaded archive. Follow this link \triangulator\triangulator\index.html. Run the index.html file. Drag your image into the box "Drop your bitmap here".
By clicking on the image with the mouse you create nodes that are automatically closed and filled with a gradient color. Among the top buttons you can add 25 polygons at once, save and change the transparency of the picture.
When the drawing is ready, you need to save it in vector format - Export to SVG: save this link as file. Right click on the line this link and select "save link as.." (in some browsers the file format must be entered manually).
Export this file to CorelDRAW or Illustrator. Here you can correct defects and refine the image to the final result.
IN video lesson the process is described in more detail polygonal drawing:
(Visited 5,673 times, 1 visits today)
Polygonal portrait or low poly - a popular art technique when processing photographs.
The combination of Photoshop and Illustrator will give you the clearest and fastest results.
If you don't have Illustrator, you can use Inkscape or Xara.
In fact, once you understand the principle, you can use any tool.
But automation is not your help. No script will give even half a good result.
Your brain, eyes and hands are the most important thing.
How to make a polygonal portrait in Photoshop
For those who are not looking for an easy way - read on!
The technical side of drawing a polygonal portrait is extremely simple and a real challenge
Your patience will only be affected by the monotony of work))
01. Choose the right look.
It is worth choosing a high-quality photo. A portrait with bright colors is best
expressive details. You'll need to zoom, so choose a high-resolution photo.
02. Tighten up colors and contrast.
Throw the photo into Photoshop, add color and contrast. You need to pick one that's tall enough
contrast level to make it easier to select the color of the polygons later. However, don't overdo it
color and contrast. No more than 30%!
03. Reduce quality.
If your photo is too large, reduce the resolution. 1000px on the long side is quite
enough. This will help you select colors in the future. Fewer pixels - easier to find color.
04. Don't forget to work on different layers.
Now you can send the picture to Illustrator. Make one layer for photo, layer for color
and another layer for the polygonal mesh. You can add more in the future, but for starters this is enough.
05. Making a colored background.
A polygonal portrait requires a lot of attention to detail. Therefore, it makes sense to make a clean background with
minimal gradient. Best of course suitable color based on the background of the picture. Skin tone will be
look more advantageous.
06. Trying the line.
Line of bright yellow color will look noticeable against most backgrounds. Line thickness -
approximately 0.5 points. In Photoshop you can use the Polygonal Lasso.
07. Let's start small.
The easiest way is to start with the eyes. Enlarge the photo as much as possible and draw a line around it.
You don't need to be too careful here. Just trace the shape. Outline the parts of the eye
and connect everything together. As a result, you should end up with a single mesh.
08. Outline other parts of the face.
Separately the nose, the second eye. Use zoom to speed up navigation through photos.
09. Forget about unfinished lines.
As you trace, you will end up with a lot of unconnected lines. Give them up for now.
Finishing each line will distract you from the main task.
10. Section your hair.
When painting most portraits, dividing the hair becomes a special exercise.
Try separating your hair into separate sections large curls. They don't have to look perfect.
Just catch the direction of the curl and where it intersects with others.
11. Let's continue.
Yes, this is quite a painstaking job) So when you finish tracing everything, take a break!
The next part is even harder.
12. Connecting the lines.
Now we return to our open lines. All of them need to be connected so that the color
didn't come out.
13. Let's polygonize!
The most fun part of a polygon portrait is actually creating the polygons. Starting again
from small objects, begins to draw triangles.
14. Balance of polygons.
Use different polygon sizes. Small for small objects such as eyes. And more
for large parts. But keep a balance. Different size will give more polygons to the work
expressiveness.
15. Convert to Live Paint.
Congratulations! You have done the entire mesh. The hardest part is over. Now select everything except the background and
Click Object > Live Paint > Make. Now you can fill the mesh with color.
16. Coloring.
Enlarge the eye of the photo and select a color using the eyedropper. Fill the triangle with color.
And try not to hit the line with the can! And learn hotkeys if you haven't already.
17. Remove the grid.
After you complete the coloring process, move the stroke color position to
position None. Now check the whole picture and look for polygons that you forgot to color.
18. Add your own to taste!
That's all! Now you have an awesome polygonal portrait. Now you can have it a little
customize. Give it some personality - chop off a couple of polygons, apply other effects.
Polygonal shapes are very reminiscent of origami or faceted gems. Let's figure out what polygonal graphics are? And why do designers love it so much? use this technique in your works ?
Polygon(from the Greek polýgonos - polygonal), a polygonal line is a broken line made up of a finite number of straight segments (links). A polygon also means a closed broken line, i.e. a polygon.
Polygonal graphics are intelligent
This is the visualization of a conscious form. For artists and designers, a polygon helps to simplify, comprehend, and therefore, in the future, correctly convey the shape and volume of an object.
He also helps in 3D graphics. There, a polygon is a minimal surface, an element from which frames of forms of any complexity are made. The more polygons, the more detailed the model will be. In 3D graphics, triangles are usually used as polygons.
Polygons - simple, beautiful, laconic and infinitely diverse - inspire many modern designers. From them you can make abstract compositions and stylish illustrations any complexity
In this article you will learn a lot about polygons and polygon graphics and see great examples of its use. There are also several lessons here that will help you master this technique.
What program can you use to create polygonal graphics?
3D graphics. There is no clear answer to this question. 3D masters will undoubtedly prefer to do this in 3D max, Maya, or Cinema 4D. The latest software is so friendly that even a child can draw in it. In general, polygon graphics are quite easy to create, especially when compared to photorealistic renderings. It's reminiscent of the early days of computer modeling and animation with a twist modern techniques. The fewer polygons you use at the modeling stage, the more abstract the result will be. For a pronounced effect, you can turn off the anti-aliasing function in the rendering settings, and then you will get clear edges. It all depends on the effect you want to achieve. Using low-poly technology does not mean that the scene will be simple. You can use complex textures, realistic reflections and refractions settings in environment etc.
2D graphics. You can create polygonal masterpieces in programs such as Adobe Illustrator, and even Adobe Photoshop. These programs, unlike specific 3D packages, are familiar to most designers. Using this method you can create stylized, decorative images with stunning
You can also complement polygonal graphics with photographs, creating amazing collages reminiscent of augmented reality and hinting at the connections between the real and virtual worlds. Some works are complemented by typography.
You can also try online polygon generators
Trianglify
A very simple generator that will allow you to create low-poly backgrounds with a given color palette. You can create beautiful background for your design. The finished polygon can be downloaded for free in SVG format.
How to convert raster to polygons online
Function generator for creating triangular images. Creates a polygonal composition from any bitmap. There are a number of settings and a randomization button to get random results. Once the image is ready, you can download it in PNG and SVG formats.
Polygonal logos
In the wake of the popularity of polygonal graphics, they began to create in this style
Create a polygonal logo in CorelDraw
Polygonal portrait
This technique allows you to create works of any complexity.
These tutorials show you how to create a polygonal portrait
Good afternoon, today I will tell you how to create a polygonal portrait in Adobe illustrator. Choose a suitable photo good quality, otherwise, you may have difficulty filling in the triangles.
So, for example, I'll take this photo
This photo has poor resolution, but I don’t have a better one, so I’ll create a polygonal portrait from this photo.
We load the photo into illustrator and, for greater convenience, copy it to a new layer so that in the future we can compare the finished portrait with the original photo.
It is best to start drawing a portrait from the eye area. When you create the first triangle, it will probably be filled with the default color by default. For greater convenience, select the triangle and set the parameters: no fill, set the outline to 1 point. As you work, you will see the image you are working on.
Let's enlarge the photo - select the pen tool and draw the first triangle. Returning to the third point, you will see a circle icon, meaning that this triangle will be converted into a closed path.
So, having received the first triangle, we begin to draw the next one, from the edge point of the previous triangle. If you hover over the edge of the drawn triangle to start drawing the next one, you will see a pen icon with a “-” icon, meaning that when you click with the mouse, you will delete a point in this triangle.
But we need to create a new triangle, and not remove a point from an already drawn one. To do this, we hold down the “shift” key and see how the pen changed its value from the “-” sign to the “*” sign (asterisk), meaning that when you press the left mouse button, you will start drawing a new object.
We continue drawing triangles. As a result, we get a grid of triangles on top of the photo
By removing the visibility of the photo in layers, you get this result
Let's return the visibility of the photo and start painting over each triangle. To do this, you need to select the triangle, click on the “eyedropper” button and paint the triangle by taking suitable color from a photograph
If the photo is of low resolution (like mine), then it is possible to see that the points of the triangles in some places are separated from each other. We fix this by enlarging the triangle and selecting it. Select the white arrow in the toolbar (direct selection).
Polygonal graphics are special kind graphics that are created using flat polygons. Polygons are defined by a set of points, consisting of broken lines and are called polygons. The simplest option is a triangular polygon. It is most often used to draw polygonal portraits in various programs. Creating an image from triangles is called triangulation.
Programs for image triangulation
This technology appeared a long time ago and was used to create the first video games with a 3D effect. But now polygonal graphics are experiencing a rebirth and are once again becoming popular among designers and photographers. Most often, polygons are used in photo processing. But since the triangulation process is quite labor-intensive, they were created special programs for polygonal portraits, speeding up image processing. Most often, designers use two Adobe products for this - Photoshop and Illustrator.
Using polygons in Photoshop
Let's consider one of the most quick ways creating a polygonal portrait in Photoshop - without using special plugins. First you need to prepare a photo and process it with special tools:
How to set up the grid correctly
Now let's proceed directly to creating a polygonal portrait in Photoshop. First we set up the grid. Turn on its visibility using the keyboard shortcut Ctrl+H. Select “Editing” from the menu, then “Settings” and “Guides”. In the settings window that appears, select the grid style - “Points”, the distance between them is 10 pixels, change the color to light gray. Now we turn on snapping to the grid: go to the “View” menu, then - “Snap to...” and select the “Grid Lines” item. Now, when using the “Rectilinear Lasso”, the cursor itself will “stick” to the mesh, which makes it easier to create polygons.
Creating a portrait from polygons
We start drawing polygons - put a point, then another one and close the outline by double-clicking on the third point. We have created a triangle. Go to the “Filter” tab, select the “Blur” item and set the value to “Medium”. Now, to create a polygonal portrait, you can use a special key combination that applies the last used filter - Ctrl+F. We continue to process the entire image in the same way, creating triangles of various sizes. We try to create polygons in shape, repeating natural curves. Then we correct the outline and remove unnecessary details of our polygonal portrait, selecting it with a straight-line lasso, and press Ctrl+Shift+Alt to invert the stroke. All that remains is to press the Del key to remove unnecessary parts.
Polygonal portrait in Illustrator
Illustrator and Photoshop are created for different purposes, so the process is different. At the beginning of work, in both cases, we create a new document and drag the image onto it. Then in Illustrator you need to lock the layer with the photo so that it does not move. We will draw polygons using the Line Segment tool. The thickness of the outline can be changed; 4 pixels will be enough. First, we outline the outline of the object, and then we begin to select areas with highlights and shadows. You can start drawing with polygons - then it will be easy to divide them into triangles by connecting the vertices with lines. This way we create a mesh of polygons throughout the image.
Centering Cross Points
It is important that the lines converge at one point, and all polygons are divided into triangles. To make your work easier, we will write down all further steps. Select “Operation” from the “Window” menu and create new operation and click “Record”.
At the next stage, we center the points:
- Using the “Partial Selection” tool, select any intersection from the lines.
- In the alignment options, select “Align to selected area.”
- Click on the “Horizontal Alignment” and “Vertical Alignment” buttons on the panel.
Stop recording.
This operation must be repeated at all places with errors in construction. To search for errors, press the key combination Ctrl+Y and, guided by the grid, look for problem areas. Then select the entire image and go to the “Pathfinder” menu and click “Separation”. Fill the outline again, changing its thickness by 2 pixels. Final stage- contour filling. For this we use hotkey for the selection tool - Y and the letter I for the Eyedropper tool. And, alternating these tools, we fill the triangles with color. Now the polygonal portrait is ready.
