Is it possible to get a pseudo-volume image without 3D programs? “Of course,” you say, “you take it, you strain and draw from scratch.” And if without “you take, you strain and draw”? And if at all without any special knowledge? Is it possible to get isometric objects without wasting time on rendering? Is there a digital illustration at all outside the usual graphic programs? I will answer these and other questions in my article on the new method of creating digital illustrations - ExcelArt.

Part 1. A unique method of creating illustrations

The first part of the article is theoretical. Here you will find general information about what this method is, how it appeared and why it is needed. The second part is practical. It will help to see how it works on a concrete example. A step-by-step tutorial awaits you in it, following which you can easily create a realistic phone with your own design on the screen.

A Brief History of Creative Tools

Surprisingly, the digital age has given not so many tools to modern designers and illustrators. And, despite the fact that their capabilities are extremely wide, they still have their limits. It's no secret that we all work in the same photoshop, illustrators and 3D max today. This in itself is not bad; the programs mentioned are wonderful. Nevertheless, the same tools give similar methods of working with them and, accordingly, similar results. It seems that each “fresh” work of a new author is somewhat reminiscent of previous ideas of old masters. The situation is only complicated by the general information globalization: we all watch the work of others and, one way or another, we adopt the best techniques and techniques from each other. Of course, this is what progress is happening, but the reverse side of the coin is some uniformity.

I believe that a truly loving illustrator or designer is simply obliged to constantly be in search of new tools, styles and working techniques. Without this, his professional development is impossible. Without this, progress in the world of design is also unthinkable.

Guided by the idea of ​​finding new creative tools, I conducted a kind of experiment. I tried to create a digital illustration without using the usual graphic programs. Through an nth number of attempts, I came across something completely unique.

Easy and fast isometry without 3D

I noticed that in Microsoft Excel, you can create and combine simple pseudo-volume shapes. Possessing a sufficient share of ingenuity and imagination, with the help of this small function it is quite realistic to draw interesting bright isometric illustrations.

As you know, it is better to see once than hear a hundred times. Therefore, in order to save time for respected readers, I will simply show a video in which the whole process of creating a picture in MS Excel is clearly visible from beginning to end.

What does this give designers and illustrators

In many cases, ExcelArt is a great saving of time, effort and nerves. For example, when you work in the matte-paint technique, there is often a need to obtain isometric figures for subsequent post-processing in Photoshop. To launch due to several cubes and pyramids stacked in a certain order, the 3D editor is like shooting a sparrow from a cannon. In addition, not everyone has sufficient 3D knowledge, and Maya with “Max” are not on every computer.

When problems go beyond cubes, and you need to draw, for example, several buildings, such a task may also require a lot of time. Although with a little practice, doing the same thing in Excel is much faster.

I myself once became a victim of a pseudo-volume problem. I needed to get pseudo-volume letters in a vector. When I tried to do this using regular tools in Illustrator, he first calculated the picture for several minutes, and then gave me a bunch of broken lines. Rendering the same with gradients and contours was unrealistic laborious. The threat of failure loomed over the task. Spas ExcelArt! In just a few seconds (!) I made voluminous text in Excel. And, by the way, the result from there was perfectly exported to the “chandelier" (after all, I needed a vector at the output).

What does this give ordinary people

ExcelArt is extremely easy to learn. Indeed, all the work is carried out in the usual table editor, and not in some complex graphic package with a sophisticated interface. Moreover, a small number of tools are involved in the work, it is possible to understand the application of which without spending a lot of time.

As an example, I will give several illustrations made exclusively by the ExcelArt method without further post-processing.



And now, in the second part of the article, you yourself can try to create a full-fledged digital illustration. Do not be afraid of the size of the tutorial, all the steps in it are intuitive and similar to each other.

Part 2. Tutorial

In the first part of the article, you learned what the uniqueness and advantages of the new method of creating digital illustrations - ExcelArt. It is time for practice. Let's try together to create a full-fledged image - a phone.

Why is the phone selected? The fact is that a significant part of the work of a modern IT specialist is the creation of mobile content. All developers of mobile games and applications, as well as UI designers, love to show their products in a natural environment. Based on this, it will always be convenient to have a small mocap that will help you quickly and easily demonstrate your mobile prototype. This is the kind of mocap with the phone that we will do in this lesson.

1. Let's start by creating the front of the phone. To do this, open MS Excel, select the tab Insert> Shapes> Rounded Rectangle (20.29 x 9.97 cm) in the top panel. Round the corners with the yellow rhombus in the upper left corner of the figure, as in the image below.



To make it easier for you to navigate in proportions, I will indicate the sizes of all created objects in brackets. Once you have created a shape, you can resize it in the Format> Size tab.

Attention! Do not create a shape in the upper left corner of the page. Later, when you start adding other objects and working with isometry, you may have problems with the arrangement of elements. Notice that I made my rectangle closer to the center of the page (W69 coordinates).

2. Let's deal with the screen. First, create the screen itself, it is done in the same way as the previous element, that is, using the top tab Insert> Shapes> Rectangle (15.74 x 9.21 cm). Corners in this case do not need to be rounded. Next, make a speaker: Insert> Shapes> Rounded rectangle (0.18 x 1.5 cm), its corners need to be rounded to the maximum. Then create the button: Insert> Shapes> Oval (1.5 x 1.5 cm).



3. The front camera is created by two Ovals: the lower - the larger diameter (0.29 x 0.29 cm), and the upper - the smaller diameter (0.14 x 0.14 cm). In order to make it convenient to work with them in the future, these two Ovals must be grouped. To do this, hold down the Shift key, select the ovals by clicking on each of them. Shift must be released. Next, by clicking on any of the ovals with the right mouse button, call up the menu and select the items: Group> Group.



4. Now we need to align all the objects relative to each other. Let's start with the camera and speaker. They need to be on the same line. To do this, holding down the Shift key, select the camera and speaker and in the upper tab select: Format> Arrange> Align> Align in the middle. Next, group the speaker and camera in the same way



After that, holding down the Shift key, select all objects (body, screen, button, grouped speaker and camera) and align them on one axis, choosing: Format> Arrange> Align> Align to Center. All selected and aligned objects you now need to group into one.



5. It's time to give the picture a color. Three times left-click on the phone body, so that it is the body that stands out, and not the entire grouped object. The indicator of the right choice will be two blue strokes around the objects: one external dashed and the other internal solid.



Next, in the top tab - Format> Shape Fill - select black color. To remove the phone outline, do the following: Format> Shape outline> No outline.



6. The painting of the speaker and camera is more complicated, since they are painted not with a solid color, but with gradients. To do this, select the speaker (do not forget that all objects are grouped, and you need to select only the speaker with the triple-click, and not the entire group), right-click on the speaker and select - Shape Format. In the pop-up window that appears, select the tab - Fill> Gradient Fill. Create a gradient with the following settings: type - linear; angle 90⁰; the left point of the gradient is the second gray color from the bottom of the second column with a brightness of 15%; the right point of the gradient is the third gray color from the bottom of the second column with a brightness of 25%. And, of course, do not forget to remove the outline, as in the previous step: Format> Shape outline> No outline.



Paint the front camera in the same way. First select the lower oval of a larger diameter. The gradient settings are as follows: type - linear; angle 300⁰; the left point of the gradient is the second gray color from the bottom of the second column at 41% with a brightness of 15%; the right point of the gradient is the third color from the bottom of the second column with a brightness of 25%.



Now select the upper oval of a smaller diameter. Make a gradient with the following settings: type - linear; angle 0⁰; the left point of the gradient is the third blue color from the bottom of the fourth column with a brightness of 40%; the right point of the gradient is the second blue color below the fourth column with a brightness of 25%.



7. The screen is much simpler. We do the screen color as follows: Format> Fill> White. To paint the outline, select: Format> Shape Outline> second gray color from the bottom of the second column.



Unlike all previous objects, the button has no fill, but the outline is painted in a gradient. To configure it, in the Shape format window, select the option: Line color> Gradient line. For the outline we need four gradient points. They can be created by left-clicking on the gradient bar. Please note that the colors of all gradient points are the same, only the position and brightness will differ. So, the gradient settings are as follows: type - linear; angle 50⁰; gradient color - the second gray color from the bottom of the second column; the first point of the gradient - position 30%, brightness 18%; the second point of the gradient - position 48%, brightness 30%; the third point of the gradient - position 62%, brightness –100%; the fourth point of the gradient - position 70%, brightness 15%.



8. It is time to give the objects an isometric view. Click on a grouped shape once to select it, right-click to call up the already familiar Shape Format window. Then select: Rotate a volumetric figure> Billets> Parallel> Isometric, top. Do not close the Shape Format window.



Select the black rectangle of the case and go to the Format tab of the three-dimensional figure. Set the hull to the following terrain settings: on top is a circle, width 4 pt, height 5 pt. Depth, surface and contour need not be changed. If everything is done correctly, small gray shadows should appear from the two edges of the rectangle.



9. Now let's create the metal part of the case. Three times click on the black rectangle of the case, select it, and copy it by pressing Ctrl + C. After that, remove the selection by clicking on any empty cell in the sheet and paste the rectangle by pressing Ctrl + V.

Fill the rectangle with light gray (third color from the bottom of the first column) and slightly increase it (20.53 x 10.09 cm). In the Format tab of a three-dimensional figure, make the following relief settings: on top - a circle of 11 pt in width and height, below - a circle of 11 pt in width and height. Please note that in the same tab you need to change the angle of illumination: Surface> Lighting> Angle> 300⁰. We do not touch the depth and contour.



To place the metal part of the case under the black one, you need to right-click on it and select the items: Into the background> Into the background.



10. At this stage, we examined all the basic techniques for generating objects needed to create an isometric phone. Almost all of the following elements will be created in exactly the same way as all previous structural details.

Let's start making the bottom block of holes with the speaker. Make six identical Ovals (0.2 x 0.2 cm). Align them in the middle and group them. Then select: Shape format> Rotate volumetric shape> Billets> Parallel> Isometric, right up.



Give each Oval the same gradient. This time we need three gradient points. As in the previous case, the color of all points is the same - the second gray color from the bottom of the second column. The remaining settings are as follows: type - linear; angle 130⁰; the first point of the gradient - position 27%, brightness 15%; the second point of the gradient - position 63%, brightness 50%; the third point of the gradient is position 75%, brightness –15%.

Now you need to select the thickness of the outline by clicking on the top tab: Format> Shape Outline> Thickness> 0.5 pt. In the same paragraph, select the color - the first gray color from the bottom of the first column.



11. Now let's deal with the charging hole and the bolts near it. Each bolt consists of two figures. Bottom figure - Oval (0.2 x 0.2 cm), light gray (second color from the bottom of the first column) without outline. The upper figure is a five-pointed star. To create it, select the tab Insert> Shapes> 5-pointed star (0.15 x 0.15 cm). Color: black without contour. Both figures must be selected and aligned relative to each other in the center and in the middle, as well as grouped. The bolts are exactly the same, so you can only make one, and just copy the other side by side.

The charging hole, as you probably already guessed, is a rounded rectangle (0.32 x 1.06 cm), the corners of which are rounded to the maximum. The color of all three points of the gradient is the same as in the previous step. Gradient settings are similar: type - linear; angle 130⁰; the first point of the gradient - position 0%, brightness 15%; the second point of the gradient - position 29%, brightness 50%; the third point of the gradient - position 94%, brightness –15%. The thickness of the contour is 1 pt, the color is the second gray color from the bottom of the first column.

After you make the bolts and the charging hole, align them in the middle and select: Shape format> Rotate volumetric shape> Billets> Parallel> Isometric, right up.



12. The last two Ovals from below are the headphone input (the larger one) and the microphone hole.

The microphone hole is an exact copy of the speaker holes, just copy one of them.
The headphone input is made from Oval (0.48 x 0.48 cm) without a contour. The color of the gradient points is the same: the second gray color at the bottom of the second column. Gradient settings are as follows: type - linear; angle 30⁰; the first point - position 7%, brightness –18%; the second point of the gradient is the position 100%, brightness 37%.

As always, we align both holes in the middle, group them and set the resulting group to rotate: Shape format> Rotate a volume shape> Billets> Parallel> Isometric, right up.



13. It remains to make the side panel. The mute button consists of two rectangles rounded to the maximum. The bottom rectangle (0.3 x 0.85 cm) is dark gray (the third color is from the bottom of the second column) without an outline. The upper rectangle (0.16 x 0.85 cm) is light gray in color (third color from the bottom of the first column) without an outline. Go to the Shape Format tab> Volume Shape Format and specify the following settings for the top rectangle - relief: top - angle, width 0.5 pt, height 1 pt; depth: depth 1.5 pt; surface: material - standard "plastic", lighting - neutral "three points", lighting angle: 170⁰. The bottom rectangle does not require settings. To rotate rectangles in an isometric view, select for each of them: Shape format> Rotate volumetric shape> Blanks> Parallel>



Attention! Do not group the rectangles until you completely make each of them, otherwise, after adjusting the volume format, you may have problems with overlapping one rectangle with another.

14. The volume buttons are made of three maximally rounded rectangles. The ovals of the buttons themselves (0.29 x 1.43 cm) have exactly the same settings as the mute button in the previous step. The rounded rectangle below them (0.36 x 3.39 cm) has no outline. The gradient settings for it are as follows: the color of both points is the third dark gray color from the bottom of the second column; type - linear; angle 90⁰; the first point of the gradient - position 0%, brightness 29%; the second point of the gradient is the position 100%, brightness 75%. Rotate all ovals: Shape format> Rotate a volumetric shape> Billets> Parallel> Isometric, left down.

After you have done all the details of this block, do not forget to group them for ease of placement and dragging.



15. The gray stripes on the side of the case are obtained from two figures. Block diagram (Insert> Shapes> Block diagram: saved data), each 0.5 x 0.4 cm in size, rotation of the figure: Format of the figure> Rotation of the three-dimensional figure> Billets> In parallel > Isometric, left down.



Gradient settings: the color of both points - the second light gray color from the bottom of the first column; type - linear; angle 100⁰; the first point of the gradient - position 0%, brightness –35%, transparency 30%; the second point of the gradient - position 100%, brightness –63%, transparency 0%.



16. Our phone is ready. It remains only to insert the image into the screen. Select the white rectangle of the screen, right-click to call: Shape Format> Fill> Pattern or Texture> Paste From: File. Then select on your computer the image that you want to add to the phone screen, and click the Insert button. I inserted a previously taken screen of the Mail.Ru mail application. You can add a design layout for your application or any other picture.



17. In order for the picture to get a finished look, you need to paint over the background. To do this, simply select the empty cells behind the phone and select the appropriate fill color in the upper tab: Home> Font> Fill Color.



Having already finished the image and looking at the result, I realized that for the sake of more convincing the phone lacks a little shadow. You ask: "Is it really possible to do this in Excel?". You can do much more, but we will stop there.

Select the lower gray rounded rectangle (case) and right-click to bring up the Shape Format window. In the Shadow tab, write the following settings: color - black, transparency - 62%, size - 99%, blur - 11 pt; angle - 60⁰; distance - 3 pt.



18. The last question that we have to solve is how to get a file with a finished image that we have been working on for so long. There are several ways to solve this problem. I will tell you one of the most simple and logical - just take a screenshot.

The desktop version of Mail.Ru Cloud has a wonderful screenshot. Press Shift + Ctrl + 6, select the part of the screen with the image of the phone and click Finish. The link to the image will immediately go to your clipboard, and the picture in png format will lie in your Cloud in the Screenshots folder. So, it’s quick and convenient, and you don’t need to cut and save anything separately.





I hope you enjoyed the tutorial, and now you can fully appreciate all the advantages of creating digital illustrations using ExcelArt. And if you have any questions, feel free to ask them in the comments. And be sure to show what you did if you used my tutorial.