For several years now, my Virtual School has been holding courses and trainings on working in Adobe Illustrator . Back in 2012, I recorded a short video course "Adobe Illustrator One-Two-Three", which I still distribute for free to my subscribers.

Then, in 2014, together with my team, I launched an online training on creating vector illustrations for microstocks. The training turned out to be very popular and successful - we recruited groups of 50-70 people 4 times.

During the course, many of our students were able not only to create high-quality portfolios - they really began to make money on microstocks!

Several works of the participants of the training

To view the full image, click on its thumbnail

Alumni of our Adobe Illustrator training have often asked me if I plan to prepare a new training for advanced illustrators.

The question is quite natural, because in vector illustration, as in design, there is no limit to perfection!

Having learned how to draw simple icons, ornaments and textures, which are starting to be sold on microstocks, a person gets a taste. Drawing vector illustrations becomes not only a hobby for him, but also a constantly growing income. Of course, everyone wants to earn as much as possible, and for this you need to be competitive and constantly improve your skills.

It’s no secret that there is huge competition on microstocks. If you enter this market with a standard set of icons, abstract backgrounds, and mockups, it will be extremely difficult for you to stand out from the thousands of competitors with similar portfolios.

In order for your work to be noticed, they must be different, have their own "highlight".

There are 2 ways to do this:

Path one: to persistently seek new non-standard forms and visualization styles in order to stand out in the general mass of illustrators.

Path two: find a niche with relatively little competition and become one of the best in it.

You don't have to be a professor of sociology to figure out that the second option has a much better chance of succeeding.

But how to find such a niche? And how do you know that you can really succeed in it?

One day, in the process of searching for materials for lessons on working with a gradient mesh in Adobe Illustrator, I found illustrations on the Web Andrey Panchenko.

In addition to the "adult" theme in the author's portfolio, I saw a lot of funny "cartoon" characters - mostly illustrations of cute animals with big eyes and shy smiles. The quality and attractiveness of these characters also did not raise doubts about the skill of the author.

I found Andrey's work on several stock sites and found
what do they have good rating- it is no coincidence that they are issued on the first page of Google for search queries on the topic of children's cartoon characters.

I decided to write to Andrey and discuss possible cooperation. It turned out that the creation character illustrations- a fairly profitable stock niche, because, unlike others, there are not so many competitors in it yet.

Andrey sold his first illustration on microstocks 9 years ago, when he had only a few basic works in his portfolio. Moreover, the work is far from “killer”. Andrey himself today says that then he knew little. However, since then, his illustrations have been sold almost every day and bring the author a steady income, which is not affected by fluctuations in the ruble against the dollar!

I also learned that Andrey himself had been thinking about teaching others for a long time, he even recorded several videos for YouTube, but his hands didn’t get to something more ... In a word, he readily agreed to become one of the teachers of our Virtual School .

Meet:
Andrey Panchenko
illustrator,
microstocker.

“I have been illustrating for about 10 years. At first it was a hobby, but now it is my main professional activity.

Participated in many freelance projects, in particular, performed work for the Disney Channel. Worked with several large furniture firms, such as JSC "Vector" and "Leader", on the design of preschool products.

Currently I sell my illustrations on microstocks - I actively work with almost all major microstocks and draw illustrations to order.

Andrey's portfolio:

We decided to prepare a new training on the topic of creating character illustrations. Why on this topic?

Firstly, as I said, the niche of character illustrations is quite in demand with relatively little competition. By learning how to create such illustrations, a microstock illustrator or freelancer can significantly increase their regular income.

Secondly, drawing vector characters requires high level Proficiency with Adobe Illustrator tools. Therefore, such a course will be especially useful to all those who want to properly "hone" their professional skills.

Well, and thirdly, I was extremely inspired by the workflow of creating illustrations performed by Andrey. His work is distinguished by high precision, confidence and rationality of all actions. It's just mesmerizing to watch how clean slate funny mischievous characters appear before your eyes - a cat in boots, a tiger cub or a sheep.

I am sure that it will be extremely useful for novice illustrators to receive mastery lessons from Andrey.

The most interesting thing is that Andrei deliberately does not use a graphics tablet in his work - he draws all the illustrations with a regular mouse! Moreover, he does not have a tablet at all. Thus, he clearly debunks the myth that high-quality illustrations can only be created using a Wacom tablet.

Don't forget to turn on the sound on your computer

It took us more than six months to develop and create the course. As a result, Andrey recorded 30 detailed video tutorials, in which he showed in detail the process of creating a professional character vector illustration - from a pencil sketch to the final implementation in Adobe Illustrator.

Are you ready for the risks in web design? Most likely, not each of you will give an affirmative answer. However, there is a risk that over time has become a kind of standard, a trend in modern web design. We call this “something” a risk only because it is important not only to fantasize about a theme and mix variations of elements, but also to imagine how appropriate this is for your website design project. It's about combining photos and illustrations in one design.

Photography is now used to give realism appearance project, the possibility of focusing the visitor's attention on the fact that we are talking about quite important and necessary things in the life of every person. An illustration or drawing is more often suitable for narrowly focused projects and is subconsciously associated in a person with action, "cartoonism" or even frivolity.

But web design is the art of innovation and professionalism graphic editors. Therefore, it is quite possible to combine two types of images. Today we're going to take a look at not only how webmasters use this kind of imagery, but also the ins and outs of creating them in Photoshop.

Custom accents

Incorporating illustrations into web design is almost easy if they are user interface elements. But they also don't have to be hand-drawn or just specific buttons/arrows. It can be high-quality plot vector graphics. In the examples below, you can see how the design came to life with the help of illustrations (www.wittycookie.com), and the hero-character represents the capabilities of the company.

Logo image illustration

If you love illustration as such and plan to focus on it in the web design of the project, then good option will use an illustrated logo image. Madebyfew.com's first project represents this perfectly. Moreover, drawings were everywhere used as separate design elements in the form of circles, serpentine ribbons, smiles, miniatures for materials. Since the site is dedicated to the conference and displays its participants, such a picture can be used instead of a mass photograph of participants.

Another example, onehappycampernj.org, is a little more modest, as it uses a texture with plant elements as an illustration. The peculiarity is that the image was created for only one section on the main page. This allows you to focus on the information, enliven the site and emphasize the peculiarity of the information. In one of the previous articles, we already talked about huge collections of textures. Then you only need to change the color in Photoshop, transparency.

Belgian construction company konosair.be also decided to create an illustration above the photo. At the same time, hand-drawn pictures are no longer used in the design of the site. However, even on home page this combination looks very interesting.

Typography illustration

There is a way to add captions on top of a photo. But imagine hand-drawn typography and even animated typography (archrival.com). Such a "chip" can be used over an existing video or image.

Steptoandson.co.uk/about/ looks more modest, where typography and type pairs were used not as an illustration, but as a text layer. However, a well-chosen style gives the impression that it was drawn and written on top of the photograph by hand, calligraphy or stencil.

Tell a story

The mamyfactory.com/fr/ project is interesting in that the drawings are used literally everywhere, but they are combined with photographs. Creating such a design is more difficult. Firstly, you will need a real photograph of hands busy knitting, and secondly, you will have to carefully select the threads and knitting with a magnetic lasso in Photoshop, and then translate it all into a drawn look. It may already require plugins, the ability to draw, or simple knowledge of how to convert a photo into a drawing.

The web design of the discoveryphototours.com/photo-tours/ project can also be called a beautiful combination of illustration and photography. Here, photos are framed in page breaks, and prints, headings are created in the form of strokes and illustrated typography.

Gili-lankanfushi.com looks similar, in the design of which illustrated icons and inscriptions are located on top of the photo of the Maldives, leaflets, in the sidebar and footer, all the more enhance the effect of drawing with their appearance.

Rules for the use of illustrations

The use of illustrations and photographs in one project is an occasion to develop imagination, add intrigue to the project, and give the design a little refinement. But at the same time, some rules must be observed. Yes, yes, alas, but even for a combination of photos and pictures, they also exist.

• The style of illustrations should correspond to the overall design. This means that icons, pictograms, as well as text should also be in a common style.
• It is better to use illustrations for icons and buttons, additional small pictures, but for visual emphasis and interaction with users - only photos.
• Create a template with illustrations to get started and then accentuate it by adding photos and videos.
• Not just pictures, but animated elements look great near photos. For example, tmfp.co.uk; they are barely noticeable near the photos and do not distract the user from studying the information at all.
• In the form of drawings, it is appropriate to create a label or company logo and place them next to or on top of photographs.
• Illustrations help the visitor navigate the site, tell him a story and guide the user through the pages of the project.

Creating illustrations inphotoshop

Even though the “risk” we talked about at the beginning turned out to be not so terrible, the question arises of how the easiest way to create an illustration. On the one hand, you can use clipart (clipart), of which there are many on the Internet with a free license. But on the other hand, you can create a drawing yourself.

The important thing is that the quality of the final material can be improved for a long time, lightened, darkened, played with contrast, color. And yes, there are a lot of illustration styles, freehand drawing.

But we will bring small example how you can create an illustration in general and how to use it further. Remember that then it can be converted into a vector or made vexel, you can remove unnecessary details with an eraser and leave only the contours. For example, you need a drawing of a handbag or shoes, but there is no suitable clip art or drawing style. Translate into Photoshop and then remove all unnecessary, make it more saturated contour lines and .. voila, the drawing is ready.

For example, take a kitten.

Open Photoshop, copy the photo to a new layer, create a copy of the layer. So that there is a background and two layers with a photo.

Select the last layer (top) and Blur it according to Gauss. The parameter is selected "by eye", because all photographs are different in detail and color. But after a couple of attempts at different levels blur, you will see exactly what you need.

After that apply layer properties - Divide. You will already receive a blank for a pencil drawing.

Now it's up to the little things. Copy content to new layer (Ctrl+Shift+Alt+E) and Desaturate (Image-Correction-Desaturate).

Create now a copy of this layer and select the option Linear dimmer.

That's all. Now especially black areas can be Lightened from the toolbar. You can create even more layers, achieving transparency. You can tint gray areas with a brush to avoid stains. But it all depends on the specific material and your imagination.

What to do now, it would seem, with an incomprehensible illustration? It can be inserted into a template. We chose with kittens, where there is a section with sections and inserted our kitten into one of them. Added more layers and made it clearer. If next to use other drawings of kittens in different poses, to give a slightly different style, to make the kittens more contoured, then the personification of the theme of our material will turn out. The source was taken from here: templatemonster.com/ru/demo/47111.html.

As for the text under the paw, it can be moved apart in this place, and the background of the kitten can be decorated with a page break. Additionally, adjust the edge, correct the spots around with the eraser, apply sharpening, or even send it to Illustrator for tracing and vectorization. It is more convenient to translate architecture and faces into a drawing.

Completion

It is quite possible to use illustrations in combination with photographs within the design of one site. It even looks amazing, but it is difficult to create if exactly the drawings that are required are not available and you have to create them yourself in graphic editors. This is more difficult to do if you are not very good at drawing by nature and life. However, creating an illustration is possible, you just need to understand what style you need. If it’s analogous to mamyfactory.com/fr/, then you can draw the store building yourself, but translate the dog from the photo, highlight the contours, and delete everything that will appear inside (dots, artifacts, pixels) with an eraser.

Web design is a creative profession and requires not only time, but also imagination, love for art and search for inspiration. And knowledge too.

French artist Xavier Collet explains how to make the painting process more efficient using the example of his work with a dark fairy surrounded by a forest.

I think the following drawing rules can help you develop your skills, but sometimes it can feel like they are trying to limit you. Trying to satisfy a wide range of artistic criteria such as: character designs, thoughtful compositions, and effective color schemes- you can slow down, but fast work is not always of high quality, remember this.

I think that the best way to the top is to learn to feel, to do things instinctively. With practice, seeing things that are in the image and identifying those elements that still need to be worked on becomes second nature, fills the subconscious as you work.

With practice, it becomes second nature to see things that need improvement.

The only thing I did before I started drawing was to step away from everyone and the pictures in my head so that my subconscious mind would start generating ideas. After that, I completely immersed myself in the drawing process.

Initial sketches

I don't know how far I'm going to take this illustration. But I know what I want main character was a queen of sorts - someone who will make you feel fearful, anxious, looking into her eyes.

So I'll start with a rough sketch to get an idea of ​​what the composition will be. She walks in the forest and watches you. Well, let's start drawing someone who will make you feel real fear and bewitching horror.

Fifty Shades of Grey

It is important to take into account the depth of the image and determine the planes: a background with two or three levels of depth; your hero's main plane and foreground.

I start in mono - it's faster and it will be easier to change something. I chose a palette of many shades of gray, and by adding horns and a full-length long dress to the character, I began to define her character.

The starting point

We all have our little weaknesses. Mine is that I can't resist drawing the character's face in the early stages. It is often said that the detailing of elements in isolation is not very good. good practice because in the end you can't see the big picture.

Useful advice, I do not argue, but I cannot bear the fact that there will be only a few details on the face, my hands itch terribly to complete them. So I took some time to draw the face, crown, horns and hair.

Sometimes it is very difficult to determine what colors an illustration will be in. So here's a little tip for you. Take an old drawing or even a photograph, it doesn't matter. Duplicate the image layer and apply the Gaussian Blur effect to the duplicate. Then change Blending Options - Blending Mode - Overlay. And see if this color scheme inspires you for your working illustration.

Finding a Color Theme

After that I adjusted the Hue/Saturation and paint with the brush already in color mode. Another tip is to apply Auto Levels or Auto Contrast and then play around with the layer's blend modes. Sometimes happy accidents will inspire you and help you overcome the wall of "uncreativity".

Add details

I start drawing the details of the character, starting with the head and bust, before moving on to designing the clothes.

I'm not making any ideas about the dress like I said, I'm just scrolling through a large selection of various images so that my creativity gets fresh juices and I can come up with an unusual design for the dress.

Contrast

It is good if there is contrast in the picture. More specifically: the opposition of shapes, brightness and color. My choice for this illustration is a bluish light that will point to magical power and control over all living beings in this figure.

More details

Now that I'm satisfied with my choice of colors, I can complete the design of her costume by adding details such as jewelry, and depicting a range of materials such as fur, leather, metal, glitter, which all together make the design more interesting.

Plastic surgery is your friend

Remember the benefits of digital graphics software. The Photoshop Liquify filter is a powerful editing option. Here in my illustration I'm using it to touch up the face of the fairy since I decided it was too long.

Finish with her

Time to finish the last details of the character. I added the finishing touches to her corset, painted a skull on her staff, added a blue glow to her costume, and so on.

And now it's time to spice up the background with some rays of light and some noise. The speckled brushes set to Dodge Color are perfect for me.

We create pets

I want my dark fairy to have...pets. The bottom of the composition is a little loose, so it's perfect place to draw creatures that come to life with her dark magic.

I don't have a clear idea of ​​what I'm going to do, so I sketch with a dark brush and then use the brush set to Color Dodge to add details such as the eyes and mouths from which the wisps of magic come out.

Monster menagerie

So far, I'm working instinctively and I'm quite happy with the design of my creature. Now I can add others. I use the same workflow: I create a small sketch and then add details using a brush set to Color Dodge.

blurry elements

I am almost done with this illustration and now I will apply some of the tricks I have learned over the years of my work. I want my fairy to look at the observer - the viewer who is hiding in the forest.

So I paint the branches with hard brush strokes. There is no need to draw them in detail. Then I added a Gaussian Blur effect to them and that's it - they're done!

Grain adds texture

I love adding texture to my drawings. Sometimes it's just a paper texture created with Layer Overlay. But now I'm going to do something completely different.

I added a neutral gray layer (Saturation - 0, Brightness - 50) and applied Filter>Noises>Add Noise twice (set to maximum) and Filter>Blur>Blur three times. Then I set this layer to Overlay (Overlay) and clicked on the Opacity of the layer, setting the settings to 5-6%

More magical life

I decided that the picture needs more life. My solution is to quickly paint the butterflies in the foreground, again to give the drawing more depth.

The last trick

Last advice. An easy way to add a little more variety to your art is to create a new layer and fill it in with a soft cloudy brush.

Set the foreground color to light gray and use a soft cloudy brush to create contrast. Then put this layer in Overlay Mode.

I followed my own advice and finished the drawing!

Over the past few weeks I've been trying to use grayscale filters, I was interested in the result and what they can do. Also, much to my surprise, I discovered the Width Tool in Illustrator CS5. With these two tools in hand, I decided to put them to good use and create an illustration in the style of Roy Lichtenstein.

There are quite a few tutorials on how to create a similar image, but I decided to go through this one myself. I was not interested in other lessons, because. my occupation was only entertainment. Therefore, if I suddenly copied someone's technique, then I really did not know. In addition, it would be quite nice to place on this site a lesson on creating illustrations in a similar style.

Roy Lichtenstein (Roy Fox Lichtenstein; October 27, 1923 - September 29, 1997) - American artist, representative of pop art. The success of the artist brought his work on the themes of comics and magazine graphics. Wikipedia

Step 1

Let's start by working in Illustrator.
Open the photo in illustrator you will be working with. I found this one on Shutterstock, but you can choose any other.

Step 2

Select the Pencil Tool (N) and start drawing over the photo, using it as a background. I started with the eyes. For pupils I used Ellipse (L).

Step 3

Continue drawing with the Pencil Tool (N) and the Pen Tool (P) to get more precise, but don't get carried away because perfection is not required here.

Step 4

Use the Pencil Tool (N) to outline the girl's hair:

Step 5

Then, with the same tools, add some details for the hair:

Step 6

As a result, we got vector elements for creating a girl. You can add more elements as you wish, depending on the photo you are using.

Step 7

Remove the background photo to only work with vector elements:

Step 8

One of my favorite tools in Illustrator is the Width Tool (Shift+W). It allows you to change the stroke width of part of our stroke. Look, it's just fantastic!

Step 9

Using the same tool, change the width of some strokes like this:

Step 10

It's time to add some color. I used beige for the skin, yellow for the hair, white for the eyes and black for the details. Let the blouse be green:

Step 11

Now let's go to Photoshop. Open the paper texture in Photoshop. I found the texture in the same place as the girl, on Shutterstock.

Step 12

On top of the paper texture, create a layer and overlay the photo of the girl with the Blending Options Multiply. In this case, it will be useful to us for importing a vector from Illustrator and for creating halftones.

Step 13

Trim off excess parts of the photo that protrude beyond the edges of the paper texture. The best way to do this, use a layer mask:

Step 14

Create a new layer below the girl photo layer, but inside the same folder with our mask. Change the new layer's blend mode to Multiply and fill it with blue:

Step 15

Copy the vector image in illustrator and paste it into Photoshop. When pasting, I used the "Smart Objects" option, because this allows you to edit the vector at any time right in Photoshop.
As you may have noticed, I set the new layer's opacity to 70%, which allows you to set the desired layer position:

Step 16

Once you find the desired location, make the layer opaque (100%):

Step 17

Change the order of the layers so that the photo of the girl is on top of the vector layer. After that, desaturate the photo (Image > Adjustments > Desaturate). you will succeed black and white photo, just like mine.
Then go to editing levels (Image > Adjustments > Levels).
Change the black channel to 60 and the white channel to 195.
Set our layer blending mode to Multiply:

Step 18

Choose Filter > Pixelate > Color Halftone. In the window that opens, specify a maximum radius of 15 and a value of 199 for all channels.
Note: Depending on the size of the illustration, change the maximum radius proportionally.

Step 19

As a result, we get this image. The illustration is almost ready, it remains to give it an old, shabby look. We also need to clean our teeth and eyes from halftones:

Step 20

Place the paper texture on top of all layers of our illustration and set the blending mode to Linear Burn:

Conclusion

The illustration is ready. Teeth and eyes have already been cleaned from halftones here.
In the same way, you can use halftones to create illustrations in the style of Roy Lichtenstein, as in our experiment.
Thank you for your attention.

This thread is a translation

Creating illustrations is one of the related services in our creative agency. As a rule, we suggest using illustrations for designing booklets or catalogs, especially in cases where it is not possible to take professional photographs. Sometimes photographs are deliberately replaced with illustrations, for example, to create a menu in vintage style.

 
By the way, you should be very careful about the harmonious continuation of the design style of a cafe or restaurant in the style of illustrations in order to avoid eclecticism. The unjustified use of Art Nouveau and Art Nouveau fonts in design looks unsuccessful if the design of the restaurant, for example, is pure baroque. Perhaps not all visitors will notice this, but there will be a feeling that something is not right.

 
Creation of vector illustrations, especially in modern style flat, great for infographic design. We also often use vector images for presentation design. Our illustrators work in different techniques: this is both a botanical drawing and urban sketching.

 
The cost and terms of creating an illustration depend on the complexity and the chosen style. Before starting to create an illustration, we offer the client to decide on the style of the future picture. Perhaps it will be a detailed tech design, or a watercolor translated into a vector. At the beginning of work, we always offer several sketches, sketches or ideas to determine the composition, and then the final picture is carefully drawn according to the approved layout.

 
Examples of works in the category creating illustrations

 
Creation of vector illustrations for a chess textbook