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 it is for your website design project. It's about combining photos and illustrations in one design.

Photography is currently used to give a realistic appearance to the project, the ability to focus 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 in graphic editors. Therefore, it is quite possible to combine two types of images. Today we will look at not only the options for how webmasters use this kind of image, but also the intricacies 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 your web design project, then using an illustrated logo image is a good option. The first project madebyfew.com 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 the 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 painted 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 the 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 the illustrations should match 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 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 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 the contour lines more saturated 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 of 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 you use other drawings of kittens in different poses nearby, 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 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.

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, then 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 look for 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 little 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
that they have a good rating - it is no coincidence that they are issued on the first page of Google when searching for 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 exchange rate of the ruble against the dollar!

I also found out that Andrey himself had been thinking about teaching others for a long time, 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 a high level of proficiency in 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 simply mesmerizing to watch how funny mischievous characters appear on a blank slate 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.

Hello! My name is Hatice Bayramoglu, I am a 3D artist and illustrator from Turkey. In this tutorial I'll show you how to draw and color a character - an illustration for a children's book. As the lesson progresses, I will explain my choice of certain tools and my thoughts on the illustration. My tutorial shows how I create an illustration from an initial sketch to a full-fledged drawing. I believe that after reading this lesson you will find something useful for yourself. I will be using Photoshop and a Wacom tablet to create the artwork.

This drawing will be entirely created in Photoshop CS2.

Step 1: Sketch
Start by creating a new document in Photoshop. Its dimensions should be around 800x778 pixels. I started by making a quick sketch that reflects my main idea. Here is a sketch of the main environment around the main character.

So, as you can see, this sketch shows the main character - a little girl standing next to an apple tree with an apple in her hands. She smiles because she is happy, and perhaps a little sad.

Step 2: Adjusting the Brushes in Photoshop
Here is the one and only brush I use to color my character. For painting, I will use standard brushes.

Before you start painting, you need to set up the brush. Start by choosing a tool Brush(Brush), then use the standard brush, which is presented below.

(click on image to enlarge)

Step 3: Color Palette
You must decide on the colors you will use before you start painting. Here are my colors used in the work:

Step 4: Layers (layers)
Create New layer(New Layer) and name it Sketch (Sketch). You can create this sketch in Photoshop or on paper. Once you've created your sketch layer, edit it Blend Mode(Blending Mode) to Multiplication(Multiply) and always keep it on top of all layers so you can see what you're painting over.
Now look at my layers palette. Here are separate layers for each sketch object. Coloring each detail on a new layer makes it easy to make adjustments as you draw. It's much easier to correct mistakes if the main elements of your illustration are on separate layers. This step is really important!

Step 5: Work on the background color
Here let me show you how I paint the background. Choosing a tool fill(Paint Bucket) (G). After you fill the background, it should look like this. Make sure the layers are arranged as shown in the image below.

Step 6: Coloring the Basic Shapes
Before I start coloring, let me show you the order of the layers again. I changed it because the sketch layer should be above all layers and also set to Multiplication(Multiply). At this point, we can start coloring the sketch and we can define the main shapes. Using the tool Brush(Brush) (B), start painting the main character and the tree on separate layers. Make sure that Rigidity(Hardness) of the brush is set to 100%. A brush with soft edges can result in a slightly blurry result.

And in this step, I would like to change the size of my file, because I want to add finer details. So I open Image(image)- Image size(Image Size) and increase the file size to 1500x1495.

Step 7: Adding Details
Now I can start adding details. In this step, I started by painting the main character's face. Make sure you are working on the correct layer before painting.

And here I made a copy of the tree layer and added some details to it. I also hid the first tree layer.

Here's a screenshot for details. I started adding even more details to my drawing, such as grass and small flowers. At this stage, I created a layer called Flowers (Flowers).

I add even more colors and fine detailed lines to the wood.

Now look at the details I just created. I continue to add details and, if necessary, create new layers.

Step 8: Special attention to the main character
Now, since I'm happy with the detailing of the scenery and wood, I'll add details to the girl's clothes. At this stage, I noticed that my character looks very simple and not very attractive, so I thought I should take the time to make some changes. I tried to give a slightly different look to the heroine and continued to add more details. Pay attention to the order of the layers again. As you can see, in this step I have a few more new layers. All layers have their own names.

Now I start adding small details to the heroine by adding more yellows and greens. By the way, do not forget that in this step you do not have to detail everything. At this stage, I work on the main details and lighting until I get a nice contrast. Sometimes I change some colors. I have almost finished painting her clothes and body. I also moved the sketch layer to one side a little so that you can see what the heroine looks like without a base with a sketch.

Step 9: Adding Highlights and Contrast
I used the tool clarifier(Dodge) (O) to lighten areas. This is what the work looks like after all the adjustments made by the tools clarifier(Dodge) (O) and Dimmer(Burn). I continue to add even more details on the tree using brushes of various sizes and colors. Once enough details were added, I began to smooth them out using a soft-edged brush. I also use tools clarifier(Dodge) (O) and Dimmer(Burn) to give shadows to the branches.

I also add a few strokes with the tool Finger(Smudge). I use it because I want to add soft blurry areas to the clouds and background. At this stage, I noticed that my clouds are not very detailed. So I created a new layer to paint the details to the cloud using two tools: Finger(Smudge) and Brush(Brush).

Step 10: Adding More Details
At this stage, I noticed that I need to add more flowers to my drawing. So I create a new layer and, as you can see, draw some nice and simple flowers. I keep adding more details. I add some strokes with the tool clarifier(Dodge) (O) I'm doing this because I want to add some lightly lit patches of grass.

Now that I've completed the grass and background, I can start adding more detail to the girl's hair and face. Select brush mode Lightening Basics(Color Dodge) and add some strokes to her face.

Now pay attention to the details that I added using only the brush in mode Lightening Basics(Color Dodge).

Step 11: Color Correction
The work on the drawing is almost finished except for the color correction. To start Drain(Merge) all layers. Now in Image(image)- Corrections(Adjustments)- Brightness/Contrast(Brightness/Contrast) Change the color a bit. I want to give the illustration a more sunny effect.

Set the options I have set. This is what the illustration looks like - more sunny and joyful.

Finished illustration
And here is the finished illustration, I hope you found this lesson interesting. Thanks for reading.

In recent days, I have had some kind of unprecedented creative and working upsurge. Finally, I like my own work, made for both customers and stocks. Therefore, it is drawn and typeset easily, pleasantly, which pleases.
I want to slightly reveal the secret of the workflow. For a long time the idea has been lingering to record a video of how objects for stocks are drawn, but so far my hands have not reached something, so I will show it only in pictures and words.

Stage 1. Choose a topic
Where does work start? From the choice of topic. To be honest, I'm not particularly wise about trends, choosing niches (maybe that's why I have modest numbers in my wallet), I draw what I want. I chose a style for myself, calling it “multi-realism”, that is, realistic enough to convey volume, shadows, but at the same time leave cartoonish fury and gloss. Currently I'm working in the "objects" genre, but later I plan to include people and small plots here.

I never get the question “What to draw”, rather “What to draw first”. I am impressed by absolutely everything: food in cafes, shop windows, beautiful photographs of people, works of other authors. Fortunately, I do not have to sit at the monitor, drag different flowers back and forth in the hope that something worthy will come out. I completely abandoned the creation of backgrounds, textures, business cards and other things that are quite popular among other stockers. It just didn’t work, I didn’t enjoy the process when I made them, and accordingly they didn’t sell at all.
Sitting down at the computer, I always already have an idea of ​​​​what I want to see as a result, but I'm getting ahead of myself a little.

So, the choice of topic. Always and everywhere I carry a diary with me, which, by the way, also not weakly sets in a creative way. And as soon as an idea comes to my mind, I add it to the Mind Map. I will not go into details of what it is, this information is easily googled, I will only clarify that the method is really cool. Allows you to structure ideas without squeezing them into frames, allowing the development of one thought indefinitely.
This is what my cards usually look like.
Ideas are written down in a cobweb, then they are thought over, analyzed. Something is postponed, and something gets life in the second stage.

Stage 2. Sketches
Everything here is extremely simple and clear, if I choose a topic, then I throw in exactly which objects can relate to it. And then I look for pictures of the necessary items and copy them into my moleskin. It is necessary to draw, stocks do not allow using other people's photos as direct references (redrawing other people's photos), but if you pick up several pictures, take something from one, something from the other, and eventually get your own drawing, then everything is fine, copyright right is not affected.
I draw, to be honest, so-so, the hand is not set to create straight lines, but this is not particularly necessary, for which I love the vector.
The sketches here have the role of approximate schematic sketches, from which I will take the general form. Later, Illustrator's tools will save you from crooked lines, allowing you to draw even circles and rectangles.

Stage 3. How do others do it?
For myself, I approved the basic principle of working with stocks: my pictures should be no worse in quality than those presented on the first pages among the popular ones. If the work falls short, I will procrastinate it until I am satisfied with the result. Naturally, here we are talking about works on the same topic and in the same technique as mine.

Yesterday I decided to draw on the theme of Fast Food. For this search query, I found cute sausages in dough, potatoes, cola. I chose what I would buy myself if I had such an order, and just what pleased the eye. I directly throw the found pictures on the sheet where I am going to work. I take nothing from them, neither color, nor form, nor style. I only need a general impression, everything else will come from my sketches and selected palettes.

Stage 4. Registration of the main forms.
Next comes the work on the computer. I have a graphics tablet, but I rarely use it, I like to boast that all my work was done with a mouse, which, by the way, is true. Main tool: pen. Those who understand the vector will understand what the point is. In short, the pen allows you to draw curved lines of any shape using points and vectors.
With a pen (for objects that require evenness: mugs, plates, boxes - ellipses, rectangles), I trace the main details, paint them in chaotic colors, just to determine the shape.
As a result, such unattractive illustrations are obtained, but the general idea is already clear, further only complication.


This 5. Color matching.
Color selection is one of the most important moments that I categorically do not trust myself and do not select colors myself. There are many services that allow you to collect beautiful palettes, but this is not quite the same. The main assistant in the selection of colors was the service: shutterstock.labs. An interesting thing, I recommend digging, even just for the sake of general development. The site allows you to select photos on topics of interest, taking into account the preferred palette. For example, I know that for drawing Fast Food I will most likely need yellow, red, orange, brown and their shades. I form the corresponding search query and the program gives me ready-made photos with the same hot dogs, potatoes and other things, and even in bright, beautiful colors, which I will later use in my work thanks to the eyedropper tool.

Stage 6. Development of the subject.
The draft part of the process is over, let's start creating. For the rendered details, I select colors from the found photos, after which I add new details: shadows, highlights, light, texture. As a result, I get a set of individual items that can now be combined.


Stage 7. Compilation of compositions.
The objects are drawn, it's time to think about how to present them. Even during my short work as a stoker, I managed to figure out that compositions are sold better than just objects on a white background (although I also upload it in this form, sometimes they buy it). Therefore, now I simply combine our entire collection into different pictures, with backgrounds, without backgrounds, with inscriptions, without them. The more you can make from one collection of pictures, the better. I especially like it when some items can be taken from past works. For example, I added ice cream from the Summer collection to the Fast Food set. Therefore, I try to draw in the same style so that everything can be combined.


This is what my work on pictures looks like. I found that such stages left their mark on my design activity, I began to make products of a different style and much better quality, which also pleases.

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

To begin with, it is necessary to understand the very 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 photo

The main advantage of this method is that it will suit everyone without exception, giving an opportunity to those who cannot boast of the ability to draw well. The principle of such an outline 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 both with a mouse and with 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 of creating such illustrations:

Creating an illustration from a scanned drawing

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

So, the finished (or partially finished) work is scanned and opened in the appropriate program on the computer for further imposition 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 the computer

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

Relevant videos attached: