Lesson

Creating an illustration for a website in the style of Flat

Lesson from the authors of the site Webdesign-Master on creating illustrations for the site.


Today we will look at creating an illustration for a flat-style website.


First, let’s open Photoshop and create a document with the following dimensions:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_2
Create a new layer and fill it with # 81b0d5:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_3
Let’s make a blue sky effect. To do this, create a new layer and use a soft white brush with an opacity of 25% to paint a barely noticeable spot of a fairly large size at the bottom of the rectangle:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_4
Let’s make a stand for the devices. To do this, create two rectangles of different thicknesses and fill the top with # 6982A1 and the bottom with # 7591AE:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_5
Now let’s draw the clouds. To do this, create a rounded rectangle and two circles with the Ellipse tool. Let’s make the second cloud by copying the first one and mirroring it to zoom out:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_6

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_7

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_8
Let’s transform our clouds into smart objects and apply the following styles to them:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_9

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_10
The background for our devices is ready, now let’s start creating the illustration objects themselves.

First, let’s draw a flat laptop. Let’s draw the base of the laptop with the “Rectangle” tool. Base width 230 pixels, height – 10:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_11
Fill the base with # 8EA1AB. Let’s make the bottom of the base rounded. To do this, use the perspective tool to bring the bottom points of the rectangle closer together:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_12
And with the Pen tool with the Alt key pressed, add roundings:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_13
We will do the same on the other side of the base.

Let’s create a laptop screen. Let’s make it a rounded rectangle. Radius of rounding, approximately 7 pix. Fill the shape with # 71838B:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_14
Please note that the width and height of the laptop screen must correspond to the HD size so that the picture does not look too cartoonish. That is, the proportions of real devices must be observed.

Another important point – the screen should be already at the base. Since it is further away, according to the rules of perspective, it should be smaller.

Add a small notch at the base. You can simply copy the base, shrink it and paint it with a lighter color:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_15
In general, the Flat style is a very simplified style of drawing illustrations and icons. But the main ones, which give the objects a recognizable shape, should be.

Let’s add a screen and a flare of the webcam. Since the screen of laptops glows, it would be logical to make it pure white. We observe the proportions.

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_16
Note. Elements of a flat illustration should not be blurry. To do this, we enlarge each element and adjust it with the “Scale” tool:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_17
Use the Rectangle and Text tools to fill the screen with colorful graphics and text:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_18
Create a group of layers and send all the details of the laptop into it.

Create another layer group and place it below the laptop group. Let’s start drawing the monitor.

Just like in the first illustration – laptop, let’s create a screen with rounded corners. Fill the monitor frame with # 8EA1AB.

Don’t forget about proportions. If you do not know the proportions of devices, it is better to download their photos from the Internet and measure them with a ruler. For example, there is a good lineup mySize for Windows.

Do not forget, also, to “treat” aliases by scaling:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_19
Let’s add some kind of a logo or a button at the bottom of the monitor frame and draw a stand. Stretch the stand into a small triangle by transforming the perspective. The color of the stand and the logo: # 71838E, the color of the base of the stand is the same as the base of the laptop – # 8EA1AB:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_20
Align the elements in the center by selecting the frame relative to which we want to apply alignment and the element itself:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_21
At the top left, draw a square in the monitor and write a random unreadable text, as we did in the screen of the first illustration:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_22
For this illustration we will use any condensed font. You can find condensed fonts on the website fonts4web.ru by selecting the Compressed category.

At the bottom of the monitor illustration, add 6 multi-colored squares, 10 x 10. The colors of the squares will correspond to the colors of the points on the diagram – # 728CB8, # FF7285, # F1B23A, # 728CB8, # 59BBFF and # CFC8CC:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_23
Group the squares and align them to the center relative to the monitor illustration.

Use the Ellipse Tool to draw some circles, randomly scattered over the graph of the corresponding color. Draw a white circle inside each point of the graph. The colors for each point can be taken from the squares:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_24
Below all the points, create a layer and draw a curve connecting the centers of all points with the Pen tool, having previously selected the Pen mode – “Contour”:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_25

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_26
Next, from the context menu, by right-clicking, select the item “Stroke the path”. Set the tool – “Brush”.

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_27

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_28
Brush options:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_29
The opacity of the brush is 100%.

On the resulting shape, overlay the color # 5E7BAC:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_30
Let’s draw a magnifying glass that will enlarge the second node of the diagram. To do this, create a new circle and fill it with # E7EEF8. Add a 3 px Stroke to the circle with the color # CFC8CC:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_31
Use the Rounded Rectangle Tool to paint the extruded magnifier handle with color # 74838E and place it at an angle:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_32
Now, inside the magnifying glass, in a new group of layers, draw the enlarged node with rectangles and rounds. To ensure that the enlarged node and connecting lines do not go beyond the boundaries of the magnifying glass, we will rasterize the group with the enlarged node and create a clipping mask:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_33
As a result, we should have a monitor like this:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_34
Let’s draw an illustration of an iPad. Don’t forget about proportions, webcam and a button at the bottom of the device. The frame is the same color as the laptop frame. We can copy the webcam and the button from the laptop and monitor. Button color # 889BA3:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_35
Copy the first 3 squares from the monitor and paste them down the iPad. Below we will write a random text in a light gray color:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_36
Let’s draw a multi-colored pie chart:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_37
Such a diagram can be drawn with the Ellipse tool. We make sections of the diagram by copying the circle and cutting off the contour. To trim the path, you can rasterize the ellipse and cut out the unnecessary with the Straight Lasso tool.

The final step is to draw an iPhone illustration in which we place the content. Draw the content with primitive shapes – “Ellipse” and “Rectangle”:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_38
You can make the background of our illustration “Noisy”. To do this, select the background, go to the “Filter> Add Noise” menu and set the following parameters:

sozdanie-illyustratsii-dlya-sajta-v-stile-flat_39
Our illustration is ready. Thank you for your attention and every creative success!

The result of drawing an illustration in the “Flat” style

Source: webdesign-master

PS: well, if you want to learn how to draw interfaces in Illustrator, then read the article How to create interfaces in Adobe Illustrator



Leave a Reply

WorldOfWarcraft Shadowlands Boosting services