We draw a colorful illustration in Photoshop. Digital painting: three ways to create illustrations on the computer

Surely many artists have repeatedly wondered how to create digital illustrations, and not just of a satisfactory level, but quality work, which will take the breath away of any sophisticated viewer. This, like any craft, requires constant attention and time.

First, you need to understand the process of creating digital painting, which can develop in several directions. The article will tell you about these options, among which you can choose the one that suits you.

Creating an illustration from a photograph

The main advantage of this method is that it is suitable for everyone, without exception, giving an opportunity to those who cannot boast of the ability to draw well. The principle of such sketching is as follows: the original photograph serves as the basis for the drawing until the artist feels comfortable continuing to work without it.

If, for example, you work in Adobe Photoshop, then by reducing the transparency of the photo and creating a new layer, you can safely create an illustration, stroke by stroke, repeating all the lines and folds of objects. This can be done either with a mouse or using a special tablet with a stylus - an accessory in the form of a small thin pen for controlling a device with a touch interface.

Below is a video showing this method creating illustrations like this:

Creating an illustration from a scanned drawing

This method is already for people who actively practice creating high-quality illustrations, that is, who know how to draw.

So, the finished (or partially finished) work is scanned and opened in the appropriate program on the computer for further application of strokes on top of the drawing.

The following videos will demonstrate this method in practice:

https://youtu.be/UVGxAJL7dSQ

Create an illustration directly on your computer

As the name suggests, this is the most difficult level, which is actively used by professionals in this field.

Relevant videos are attached:

Are you ready to take 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 imagine the theme and mix variations of elements, but also to imagine how appropriate it is in your website design project. It's about combining photographs and illustrations into one design.

Photography is now used to add realism. appearance project, the ability to focus the visitor’s attention on what we're talking about about quite important and the right things in the life of every person. An illustration or drawing is more often suitable for narrowly focused projects and is subconsciously associated with action, “cartooniness” or even frivolity.

But web design is the art of innovation and professionalism graphic editors. Therefore, combining two types of images is quite possible. Today we will look at not only the options for how webmasters use this type of image, but also the intricacies of creating them in Photoshop.

Custom Accents

Incorporating illustrations into web design is almost easy as long as they represent user interface elements. But they also don’t have to be hand-drawn or just specific buttons/arrows. This can be high-quality plot vector graphics. In the examples below, you can see how illustrations have brought the design to life (www.wittycookie.com), with the hero character representing the company's capabilities.

Logo image illustration

If you love illustration as such and plan to focus on it in your web design project, then good option will be the use of an illustrated logo image. The first project madebyfew.com represents this perfectly. Moreover, drawings were used everywhere as separate design elements in the form of circles, serpentine ribbons, smiles, and 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 photo of the participants.

Another example from onehappycampernj.org is somewhat more modest, using a texture with plant elements as an illustration. The peculiarity is that the image was created for only one section per home page. This allows you to focus attention on the information, enliven the site and emphasize the peculiarity of the information. In one of our previous materials we already talked about huge collections of textures. Then you only need to change the color in Photoshop, the 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 website design. However, even on the initial page this combination looks very interesting.

Typography illustration

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

Steptoandson.co.uk/about/ looks more modest, where typography and font pairs were used not as an illustration, but as a text layer. However, the right style creates the impression that the photograph was painted and written by hand, calligraphy or stencil.

Tell a story

The project mamyfactory.com/fr/ is interesting because drawings are used literally everywhere, but combined with photographs. Creating such a design is more difficult. Firstly, you will need a real photograph of hands engaged in knitting, and secondly, you will have to carefully select the threads and knitting with a magnetic lasso in Photoshop, and then convert it all into a drawn form. This may require plugins, drawing skills, 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, photographs are designed in page breaks, prints, titles are created in the form of brush strokes and illustrated typography.

Gili-lankanfushi.com looks similar, in the design of which illustrated icons and inscriptions, leaves, side panel and footer all the more enhance the effect of drawing with their appearance.

Rules for using illustrations

Using illustrations and photographs in one project is an opportunity to develop imagination, add intrigue to the project, and add a little sophistication to the design. But it is necessary to follow some rules. Yes, yes, alas, but even for a combination of photos and pictures they are also available.

The style of illustrations should correspond to the overall design. This means that icons and pictograms, as well as text, should also be consistent with the general style.
It is better to use illustrations for icons and buttons, additional small pictures, but for visual emphasis and interaction with users - only photographs.
Start by creating a template with illustrations and then add accents by adding photos and videos.
Not just pictures, but animated elements look great next to photographs. 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.

Creation of illustrations inPhotoshop

Despite the fact that the “risk” that we talked about at the beginning turned out to be not so terrible, the question arises of what is the easiest way to create an illustration. On the one hand, you can use clipart, of which there are many freely licensed ones on the Internet. 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 and color. And yes, there are a lot of illustration styles, hand drawing.

But we will give a small example of 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 into a vector, you can use an eraser to remove unnecessary details and leave only the outlines. For example, you need a drawing of a handbag or a shoe, but there is no suitable clipart or drawing style. Transfer to Photoshop and then remove all unnecessary things, make them more saturated contour lines

and..voila, the drawing is ready.

For example, let's 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 using Gaussian . 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 properties of this layer - Split

. You will already receive a blank for the pencil drawing. Now it's a matter of small things. Copy the contents to a new layer

(Ctrl+Shift+Alt+E) and Desaturate (Image-Adjustments-Desaturate). Now create a copy of this layer and select the option

Linear dimmer. That's all. Now especially You can create even more layers, achieving clarity. You can touch up gray areas with a brush to avoid stains. But it all depends on the specific material and your imagination.

What to do now with a seemingly incomprehensible illustration? It can be inserted into the template. We chose one with kittens, where there is a section with sections and inserted our kitten into one of them. Additionally, we added more layers and made it clearer. If you use other drawings of kittens nearby different poses, give a slightly different style, make the kittens more contoured, then you will get the personification of the theme of our material. 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 an eraser, apply sharpening, or even send it to Illustrator for tracing and converting to vector. It is more convenient to translate architecture and faces into drawings.

Completion

Using illustrations in combination with photographs within the design of one website is quite possible. 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 it yourself in graphic editors. This is more difficult to do if you are not particularly good at drawing by nature and in life. However, it is possible to create an illustration, you just need to have an idea of what style you want. If the analogue is mamyfactory.com/fr/, then you can draw the store building yourself, but transfer the dog from a photograph, select the contours, and remove everything that appears inside (dots, artifacts, pixels) with an eraser.

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

I still receive letters with the same consistency with questions: “I want to become an illustrator, where to start?”, “How can I learn to draw?”, “What should I do if I can’t draw, do I have a chance to become an illustrator?”

At first glance, the questions are quite strange. If you don’t know how to draw, you don’t want to start and try, you don’t even want to learn how to draw - what kind of illustrator are you? Why do you need it? But everything is not as simple as it seems at first glance.

I recently came across a higher private school in Hamburg online that trains illustrators only. On the very first pages of "About Me" they say that an illustrator is a designer who knows how to draw.

I felt funny because I am a graphic designer and I received, without false modesty, a good education. Behind long years During our training, we were constantly told that any designer must be able to draw, handle a camera, understand typography and understand art.

Along with such subjects as typography, we were taught drawing and photography - things that were reflected in my ideas about illustration. I devoted several sections to the influence of photography on illustration in my book “Profession - Illustrator. Learning to think creatively.”

The statement that an illustrator is a designer who knows how to draw seemed very strange to me. At first I decided that people simply did not know what modern designers were teaching. But then I seemed to understand what they were talking about. Namely, that the illustrator is a professional who has a wide variety of skills and image techniques, which can often be called more like design ones.

Really, modern illustrator no longer tied to traditional visual techniques: he does not have to work only with paints or pencils on paper. He doesn't even have to be able to draw very well. It is enough to be able to handle paper and scissors, wood and a chisel, fabrics and a sewing machine, to be able to draw only at the level of contours and sketches and at the same time be no less successful and a selling illustrator than colleagues working in traditional techniques.

Today I would like to draw your attention to the techniques of modern illustrations.

To questions like “Where should a future illustrator start?” I already answered, and below you can follow the link to my answer. And to the question whether someone will turn out to be an illustrator if he has not learned to draw traditionally, academically, I will say yes. Because if paper and light and shade are not given, it’s worth trying yourself in some unconventional technology, if, despite everything, you want to do illustration professionally.

For inspiration, I will show you a beautiful book - a collection of works by illustrators and artists working in non-traditional illustration techniques.

Book on American Amazon:
Book on German Amazon: Illustration Play: Craving for the Extraordinary

The cover is made on very beautiful, textured paper with real stickers.

And this is what the content looks like - a list of featured illustrators.

Illustrations made using a burner. Author: Genevieve Dionne

Installation illustrations from various materials. Posted by Stephanie Dotson

Illustrations-installations made of paper and wood. Author: Aj Fosik

Illustrations on old packaging, envelopes, etc. Posted by Melvin Galapon

In my Virtual school For several years now, courses and trainings on working in Adobe Illustrator . Back in 2012, I recorded a short video course “Adobe Illustrator in 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 to not only create high-quality portfolios - they actually started making money on microstocks!

Several works of training participants

To view the entire image, click on its thumbnail

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

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

Learning to draw simple icons, ornaments and textures that are starting to be sold on microstocks, people are getting a taste for it. 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 are entering this market with standard set icons, abstract backgrounds and mockups, it will be extremely difficult for you to stand out from thousands of competitors with similar portfolios.

For your work to be noticed, it must be different in some way, have its own "zest".

There are 2 ways for this:

Path one: persistently search for new ones non-standard forms and rendering styles to stand out from the crowd of illustrators.

The second way: find a niche with relatively little competition and become one of the best in it.

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

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

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

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

I searched for Andrey's work on several stock sites and discovered that
what do they have good rating- it’s no coincidence that they appear on the first page of Google when searching for children’s cartoon characters.

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

Andrey sold his first illustration on microstock 9 years ago, when he only had a few in his portfolio basic work. Moreover, the work is far from “killer”. Andrei himself says today that back then he could do little. However, since then his illustrations have been sold almost every day and bring the author a stable income, which is in no way affected by fluctuations in the ruble-dollar exchange rate!

I also learned that Andrey himself had long been thinking about teaching others, he even recorded several videos for YouTube, but he never got around to doing anything more... In a word, he readily agreed to become one of the teachers of our Virtual School .

Meet:
Andrey Panchenko
Illustrator,
microstoker.

“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 companies, such as OJSC 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 custom illustrations.”

Andrey's portfolio:

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

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

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

Well, thirdly, I was extremely inspired by the workflow of creating illustrations performed by Andrey. His work is different high accuracy, confidence and rationality of all actions. It’s simply mesmerizing to watch how clean slate funny mischievous characters appear before your eyes - puss 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 Andrey deliberately does not use a graphics tablet in his work - he draws all illustrations with a regular mouse! Moreover, he doesn't 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 lessons, in which he showed in detail the process of creating a professional character vector illustration - from pencil sketch before final implementation in Adobe Illustrator.

French artist Xavier Collet explains how to make the painting process more efficient using 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 design, thoughtful compositions and effective color schemes - can slow you down, but... fast work is not always of high quality, remember this.

I believe that the best way to the top is to learn to feel, to do things instinctively. With practice, seeing the things that are in the image and identifying those elements that still need work becomes second nature, filling 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 photos in my head so that my subconscious could start generating ideas. After that, I completely immersed myself in the drawing process.

Initial sketches

I don't know how far I'll go with this illustration. But I know that I want it main character was a queen of sorts—someone who would make you feel afraid, uneasy, when you looked into her eyes.

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

Fifty Shades of Gray

It is important to take into account the depth of the image and decide on the planes: a background with two or three levels of depth; your character'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 dress to the character, I began to define her character.

A 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 detailing elements in isolation is not a good practice because you end up missing the big picture.

Helpful advice, no doubt, but I can't stand the fact that there will be only a few details on the face, I'm terribly itching to add them. So I took some time to draw the face, crown, horns and hair.

Sometimes it is very difficult to determine what colors the illustration will be in. So here's a little advice for you. Take 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 – Blend Mode – Overlay. And see if this color scheme inspires you for your work illustration.

Search for a color theme

After that, I adjusted the Hue/Saturation and painted with the brush in color mode. Another tip is to apply Auto Levels or Auto Contrast and then play around with the layer blending modes. Sometimes happy accidents will inspire you and help you overcome the wall of “uncreativity.”

Add details

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

I'm not doing any dress ideas like I said, I'm just flipping through a large selection of different images to get my creative juices flowing so I can come up with ideas unusual design for a dress.

Contrast

It's good if there is contrast in the drawing. More specifically: the contrast of shapes, brightness and color. My choice for this illustration is a bluish light which will indicate magical power and control over all living beings in this illustration.

More details

Now that I'm happy with the colors I've chosen, I can finalize her costume by adding details like jewelry, and introduce a range of materials like fur, leather, metal, and glitter that all add up to make the design more interesting.

Plastic surgery is your friend

Remember the benefits of digital graphics programs. Photoshop's Plastic filter is a powerful editorial option. Here in my illustration I use it to touch up the fairy's face since I decided it was too long.

Let's finish with her

Time to complete the final 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, etc.

Now it's time to spice up the background with some light and some noise. The speckled brushes in the Foundation Lightening mode 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 the help of her dark magic.

I don't have a specific idea of what I'm going to do, so I sketch it out with a dark brush and then use a brush in the Dodge mode to add details like eyes and mouths with wisps of magic coming out of them.

Menagerie of Monsters

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: create a small sketch and then add details using the brush in the base dodge mode.

Blurred elements

I'm almost finished with this illustration and will now be applying some of the tricks I've learned over the years. I want my fairy to look at the observer - the spectator who is hiding in the forest.

So I'll finish off 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 ready!

Grain adds texture

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

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