Wszystkie wpisy, których autorem jest admin

Web Tools

How to Create a Candy Monster Character in Adobe Illustrator

Post pobrano z: How to Create a Candy Monster Character in Adobe Illustrator

Final product image
What You’ll Be Creating

In
this tutorial, you will learn how to draw a candy monster cartoon
character in Adobe Illustrator. 

There are plenty of techniques used
throughout the entire tutorial, from textures to small details, a new
Blend Art Brush, masking techniques, reverse spine blending options, and even a 3D effect. Not to mention the colorful candy and jelly
worms that are fun to draw. 

By the end of the tutorial, you will have
the skills to draw other cartoon characters in future projects. Let’s
start!

If
you are hungry for more cartoon characters or cartoon styles in
general, make sure to go over to GraphicRiver and you’ll surely find
what you are looking for there. 

1. How
to Open a New Document 

Launch
Illustrator
and
go to File
> New to
open a blank document. Type a name for your file, set up the
dimensions, and then select Pixels
as the Units
and
RGB
as the Color
Mode.
Make sure that Align
New Objects to Pixel Grid is
not checked.

Next,
go to Edit
> Preferences > General and
set the Keyboard
Increment to
1
px and
while there, go to Units
to
make sure they are set as in the following image. I usually work with
these settings, and they will help you throughout the drawing process.

how to open a new illustrator document

2. How
to Create the Body of the Monster

Step
1

Take
the Ellipse Tool (L) and draw a 192 x 339 px ellipse on your artboard
(1). Switch to the Direct Selection Tool (A) and use it to select
only the right and left points; then move them outwards to make the
ellipse rounder (2). Now, select only the bottom point and drag the
handles to make them longer (3).

how to draw the body of the monster

Step
2

Make
a few extra adjustments to get the shape from the image below and
fill it with light blue. This will be the “body shape”.

how to color the body of the monster

3. How
to Create the Eyes of the Monster

Step
1

Draw
two shapes like the ones in the following image as the eyes and give them a 1
pt light blue Stroke. They don’t have to be perfectly rounded.

Select
only the left eye and go to Effect > 3D > Extrude & Bevel.
Change the settings as indicated and hit OK. As a result, you will get
the outer contour of the eye.

how to create the left eye contour of the monster

Step
2

Select
the right eye and go to Effect
> 3D > Extrude & Bevel
again. The settings are the same except for the rotation coordinates
and the light, which you have to move from the upper right side
(default) to the upper left side.

how to create the right eye contour of the monster

Step
3

Zoom in on the eyes and draw the eyeballs inside the 3D contours, making sure
not to cover the shading and highlights created by the 3D effect (1).
Fill the eyeball shapes with the radial gradient shown (2), and you
can see the result in the image below (3).

how to draw the eyeballs of the monster

Step
4

Use
the Ellipse Tool (L) to draw a small 18 x 19 px ellipse as the iris
for the right eye. Select light brown as the fill color; then go to
Effect > Stylize > Inner Glow and apply the settings shown (1).

Next,
grab the Pencil Tool (N) and draw a random star-like path over the
iris (2). Use the Ink Spatter 1 Scatter Brush from the Brush
Libraries Menu > Artistic > Artistic_Ink and reduce the Stroke
Weight to 0.1 pt. Set the Blending Mode to Multiply (3).

Select
the iris shape and Copy and Paste in Place (Shift-Control-V) in order
to make a copy of it in front of everything. Remove all existing
appearances. Now, select the stroked path along with the copy of the
iris and go to Object > Clipping Mask > Make (Control-7) (4).

how to create the iris of the monster

Step
5

Draw
a 7 x 7 px black circle in the center of the iris as the pupil (1).

To
add a sparkle, draw a small circle in the upper right side filled
with a basic white to black radial gradient (2), and then set the
Blending Mode to Screen (3).

how to draw the pupil of the monster

Step
6

Select
the iris, the stroked path, the pupil, and the sparkle, and make copies
of them for the left eye.

Group
(Control-G) all the shapes that make up each eye to keep things
organized in the Layers panel.

how to create the left iris and pupil of the monster

Step
7

Select
the left eye contour, go to Effect > Stylize > Drop Shadow, and
apply this effect twice using the settings shown.

how to add shadow around the monsters left eye

Step
8

Now,
select the right eye contour and apply the two Drop Shadow effects.
The settings are the same as above, except for the X Offset, which is
negative this time.

how to add shadow around the monsters right eye

4. How
to Create the Mouth of the Monster

Step
1

Take
the Pen Tool (P) and draw a big mouth shape for all that candy, and fill it with a dark burgundy red (1). While this shape stays
selected, go to Effect > Stylize > Drop Shadow and apply the
settings shown (2) to obtain the blue bottom lip. Apply the Drop
Shadow effect again, using the other settings shown (3) to obtain the
upper lip.

how to create the mouth and lips of the monster

Step
2

With
the mouth shape still selected, apply the third Drop Shadow effect to
obtain a thin highlight line above the upper lip (1).

Apply
the Drop Shadow effect for the last time to obtain the highlight line
under the bottom lip (2).

how to add highlight around the monsters lips

Step
3

Select
the mouth and Copy and Paste
in Front (Control-F)
to make a copy of it. Remove the four Drop Shadow effects and just
keep the dark red fill color (1). Draw a similar but smaller shape at
the top of the mouth and fill it with a lighter shade (2).

Now,
select both shapes and go to Object > Blend > Blend Options.
Choose 20 Specified Steps, hit OK, and then go back to Object >
Blend > Make (Alt-Control-B) (3).

how to create depth in the mouth of the monster

Step
4

Next,
take the Pen Tool (P) and draw four paths on the lips (1). Give them
a 1 pt white Stroke and use the Black Blend Art Brush 100×3 (info
below). Set the Blending Mode to Overlay for all four (2).

I
have an entire tutorial dedicated to Blend
Art Brushes and
how useful they are. I use them in my drawings all the time. You can
find out how to create and save the Black
Blend Art Brush 100×3 that
we are using today in How
to Create a Set of Multi-Use Blend Brushes in Adobe Illustrator.

Since
the Colorization of the brush is set to Tints, when you select white
as the stroke color, the brush becomes white as well, despite its
name. The same thing happens with any other color.

how to add shine on the monsters lips

5. How
to Create the Tongue of the Monster

Step
1

Use
the Pen Tool (P) to draw a shape like the one in the following image as the
back piece of the tongue (1). Continue with the front piece and fill
it with red (2).

how to draw the tongue of the monster

Step
2

Draw
a path through the middle of the back piece and move it behind the
front piece of the tongue (1). Give it a 1 pt Stroke using the color
indicated and select Width Profile 2 in the Stroke panel.

With
the path still selected, go to Effect > Stylize > Outer Glow
and apply the settings shown. Reduce the Opacity to 75%, but only for
the Stroke attribute, and you can see the result below (2).

how to add detail on back tongue of the monster

Step
3

Next,
draw a path through the middle of the front piece of the tongue (1). Give
it a 1 pt Stroke using the color indicated and select Width
Profile 2 again. Set this Stroke attribute to 75% Opacity.

With
the path still selected, go to Effect > Stylize > Outer Glow
and apply the settings shown (2).

how to add detail on front tongue of the monster

6. How
to Create the Teeth of the Monster

Step
1

Grab
the Pen Tool (P) and draw the shapes of the four top teeth filled
with beige (1). Next, draw a similar but smaller shape above each
tooth filled with cream (2) and finally, four smaller shapes filled
with white (3).

Now,
select the three shapes that make up the first tooth and go to Object
> Blend > Blend Options. Choose 10 Specified Steps and hit OK, and then go back to Object > Blend > Make (Alt-Control-B).
Repeat the same thing for the other three teeth (4).

how to create the top teeth of the monster

Step
2

Follow
the technique explained above and create the four bottom teeth.

how to create the bottom teeth of the monster

Step
3

Group
(Control-G) the four top teeth and apply the Drop Shadow effect to
create a shadow. Do the same thing for the bottom teeth.

how to add shadow to the monsters teeth

Step
4

Select
the two pieces of the tongue and apply the Drop Shadow effect using
the settings shown.

how to add shadow to the monsters tongue

Step
5

It’s
finally time for a mask. Select the mouth shape and then Copy and
Paste in Place (Shift-Control-V) to make a copy of it in front of
everything. Remove all existing appearances (1).

Now,
select this copy of the mouth along with the top teeth, the bottom
teeth, and the tongue, and go to Object > Clipping Mask > Make
(Control-7). You can see the result in the image below (2).

how to mask the teeth and tongue of the monster

7. How
to Add Texture on the Monster’s Body

Step
1

Grab
the Pencil Tool (N) and draw a random path on the body of the monster, and then send it behind the eyes and the mouth (1). Give it a 1 pt white
Stroke using the Ink Drop Scatter Brush from the Brush Libraries Menu
> Artistic > Artistic_Ink (2).

While
the Stroke attribute stays selected in the Appearance panel, go to
Effect > Blur > Gaussian Blur and apply a Radius of 2.5 px. Set
the Blending Mode to Overlay and reduce the Opacity to 20% (3).

how to add light spots on the monsters body

Step
2

With
the path still selected, add a New Stroke in the Appearance panel
above the first. Use the Ink Drop Scatter Brush again, but open the
Stroke Options window and switch the Scatter settings. This will make
the dark spots not overlap with the white spots from the previous
step (1).

Apply
a 2.5 px Gaussian Blur again; then set the Blending Mode to Overlay
and reduce the Opacity to 50% (2).

If
your spots go over the edge of the body, simply use the Direct
Selection Tool (A) to modify the path or create a mask.

how to add dark spots on the monsters body

8. How
to Add Shading on the Monster’s Body

Step
1

Use
the Pen Tool (P) to draw a curved path at the top of the head. Give
it a 10 pt blue Stroke and choose Width Profile 6 from the Stroke
panel (1).

Next,
draw a curved path at the bottom of the body. Give it a 15 pt blue
Stroke and use Width Profile 6 again (2). Apply a 12 px Gaussian
Blur for both of them (3).

how to add shading on the monsters body

Step
2

Select
the body shape and then Copy and Paste in Place (Shift-Control-V) to
make a copy of it in front of everything. Remove all existing
appearances. Now, select the two curved paths along with the copy of
the body and go to Object > Clipping Mask > Make (Control-7).

how to mask shading on the monsters body

9. How
to Create the Arms of the Monster

Step
1

Use
the Pen Tool (P) to draw the shapes of the arms as shown in the following
image (1). Next, draw two smaller shapes on the inside filled with a
darker shade of blue (2).

Select
the two shapes that make up one of the arms and Blend them using 20
Specified Steps. Do the same thing for the other arm (3).

how to draw the arms of the monster

Step
2

Draw
two curved paths on the arms and apply the two strokes using the Ink
Drop Scatter Brush as you did earlier for the body. Position the
paths so the spots fall on the arms (1).

Make
a copy in front for each arm shape and use them to mask the stroked
paths (2).

how to add texture on the monsters arms

10. How
to Create a Tapered Blend Art Brush

Step
1

Earlier in the tutorial, you used the Black Blend Art Brush 100×3 from How
to Create a Set of Multi-Use Blend Brushes.
Now, let’s create a new Blend Art Brush that is not featured in that
tutorial but definitely should be.

Grab
the Line Segment Tool (\), click on your artboard, and choose 100 px
as the Length and 0 degrees as the Angle. This will generate the
green horizontal line. Use the Line Segment Tool (\) again, and this
time choose 5 px in Length and 90 degrees as the Angle to generate
the small blue vertical line. While both lines stay selected, press
Vertical Align Center and Horizontal Align Right in the Align panel
(1).

Use
the two lines as guides and draw a sharp triangle (2). While this
triangle stays selected, go to Object > Path > Offset Path and
apply an Offset of -2 px to obtain a smaller one inside (3).

Fill
both triangles with black, but set the Opacity of the bigger one to 0%
(4). Blend them using 15 Specified Steps, and the brush is ready to be
saved (5).

how to create a new tapered blend art brush

Step
2

Drag
the blend group obtained in the previous step into the Brushes panel
and choose New Art Brush. Type Tapered Blend Art Brush 100×5 as the
name and choose Tints as the Colorization Method. Hit OK, and you’ll
find the new brush right next to the Black Blend Art Brush 100×3 in
the Brushes panel.

how to save a new tapered blend art brush

11. How
to Create the Feet of the Monster

Step
1

Draw
the shape of the right foot with the Pen Tool (P) and fill it with
blue (1). Continue with a smaller shape above, filled with a lighter
shade of blue (2), and with the smallest shape at the top filled with
a darker shade of blue (3).

Blend
these three shapes using 15 Specified Steps, and you can see the
result below (4).

how to draw the foot of the monster

Step
2

Use
the Pen Tool (P) to draw a path at the bottom of the foot, and give it
a 5 pt Stroke using black and Width Profile 6. Apply a 5 px
Gaussian Blur and set the Blending Mode to Overlay.

how to add shading on the monsters foot

Step
3

Draw
two short paths at the top of the foot and give them a 1 pt azure
blue Stroke using the Tapered Blend Art Brush 100×5 that you saved earlier (1).

Make
a copy of the foot shape in front and set it to stroke-none and
fill-none. Use this copy to mask the last three stroked paths (2).
You can see the result below (3).

how to add details on the monsters foot

12. How
to Create the Claws of the Monster

Step
1

Draw
three triangle-like shapes as the claws and fill them with dark
orange (1). Next, draw a similar but smaller shape on each claw, filled with a pale shade of orange (2).

Select
the two shapes that make up one of the claws and Blend them using 10
Specified Steps. Repeat the same thing for the other two claws (3).

how to draw the foot claws of the monster

Step
2

Follow
the top edge of the claws and draw three paths with the Pen Tool (P).
Give them a 2 pt Stroke and use Width Profile 6. Send these paths
behind the claws in the Layers panel.

how to add shadow at the base of the foot claws

Step
3

Use
the Direct Selection Tool (A) to select only the bigger claw shapes
from the blend groups and then Copy and Paste in Place
(Shift-Control-V) to make copies of them. Move the copies behind the
claws in the Layers panel. Keep the same fill color and just apply
the Drop Shadow effect to create the shadows (1).

Copy
and Paste in Place (Shift-Control-V) the bigger foot shape, and set
the copy to stroke-none and fill-none. Use it to mask the three
copies of the claws with the shadow applied to them (2). As a result, the shadow that falls outside the foot area will not be visible (3).

how to add shadow under monsters claws

Step
4

Use
the Pen Tool (P) to draw a path on each claw and give them a 0.5 pt white
Stroke using the Tapered Blend Art Brush. Also apply a 1 px Gaussian
Blur.

The
base (thicker part) of the brush should be at the top of the claws, and the tip of the brush should be at the bottom. If not, open the
Stroke Options window and check the Flip Along option.

how to highlight the foot claws of the monster

Step
5

At
this point, the right foot is ready, and you can Group (Control-G) all
the shapes that compose it to keep things organized in the Layers
panel.

While
the right foot stays selected, go to Object > Transform >
Reflect. Check Vertical and hit Copy to obtain the left foot. All you
have to do is to move it into place and make small adjustments if needed.

how to create the left foot of the monster

Step
6

Focus
on the right arm of the monster and use the same technique to create
the claws (1-3).

Select
only the bigger claw shapes from the blend groups, and then Copy and
Paste in Place (Shift-Control-V) to make copies of them. Move these
copies behind the claws in the Layers panel, and choose brown as the
fill color. Use the Direct Selection Tool (A) to select only the top
anchor points of these shapes (without the tip) and move them inwards
a little with the help of the arrow keys on your keyboard (4). You
can see the result below (5).

how to create the right arm claws of the monster

Step
7

The
right arm’s claws are ready now, and you can Group (Control-G) all the
shapes. Reflect this group to obtain the claws for the left arm.

how to create the left arm claws of the monster

13. How
to Create the Horns of the Monster

Step
1

Use
the technique explained earlier for the arm claws to create the horn
on the right side of the head (1-4).

To
add some shine, use the Pen Tool (P) to draw a path on the horn (5).
Give it a 1 pt white Stroke and use the Tapered Blend Art Brush. Also
apply a 2 px Gaussian Blur (6).

how to draw the big right horn of the monster

Step
2

Follow
the previous step again, and create a smaller version of the horn next
to the first one (1). Now, take the Pen Tool (P) and draw a shape
like the one in the next image at the base of the horns (2).

To
add some details, draw a few short paths on the blue shape. First,
select a 2 pt blue Stroke and use the Tapered Blend Art Brush. Add a
New Stroke above, select a 0.25 pt gray Stroke, and use the Tapered
Blend Art Brush again (3). You can see the result below (4).

how to draw the skin around the horns of the monster

Step
3

At
this point, the right horns are ready, and you can Group (Control-G)
all the shapes. Reflect this group to obtain the horns on the left
side and move them into place.

how to create the left horns of the monster

14. How
to Add Extra Details on the Monster’s Body

Step
1

Take
the Pen Tool (P) and draw a few triangle-like shapes at the bottom of
the body filled with the linear gradient shown at a 90 degrees Angle
(1). Continue with the pieces of fur at the top of the head, and use
the same gradient but change the Angle to -90 degrees (2).

how to add top and bottom fur on the monster

Step
2

Next,
draw two fur pieces on the sides of the head and a few smaller ones
on the arms. Use the gradient shown to fill all of them. The darker
shade of the gradient should be at the tip of these fur shapes, so adjust the angle accordingly.

how to add extra fur on the monster

Step
3

Use
the Ellipse Tool (L) to draw a bunch of ellipses of different sizes
on the body. Fill all of them with blue. Add a New Fill above and use
the same color; then apply a 4 px Gaussian Blur.

how to add blue spots on monsters body

Step
4

Use
the Pen Tool (P) or the Ellipse Tool (L) to draw a few tiny shapes
under the eyes as the freckles. They don’t have to be perfectly
round.

how to add freckles under the monsters eyes

Step
5

Select
the body, the arms, and the feet, and then Copy and Paste in
Place (Shift-Control-V) to make copies of them. Remove all existing
appearances (1) and then press Unite in the Pathfinder panel to merge
them into a single shape (2).

how to create a mask shape for the monster

Step
6

Select
the body shape; then go to Effect > Stylize > Drop Shadow and
apply the settings shown (1).

Select
the shape that you obtained in the previous step, set it to
stroke-none and fill-none, and move it right in front of the body in
the Layers panel. Now, select the body along with this shape and go
to Object > Clipping Mask > Make (Control-7) (2). As a result,
the shadow around the monster that falls on the white background will
not be visible (3).

how to add shadow on arms and feet of the monster

15. How
to Create the Colorful Candy

Step
1

Grab
the Ellipse Tool (L) and draw a 35 x 35 px circle filled with the
radial gradient shown (1). Switch to the Pen Tool (P) and draw four
shapes as shown in the image below. All four shapes have a white fill
color, but set the Opacity for the bigger ones to 0% (2).

Select
the pair of shapes on the upper left side and Blend them using 15
Specified Steps. Set the resulting blend group to Blending Mode Soft
Light.

Blend
the other two shapes on the bottom right side; then set the Blending
Mode to Soft Light and reduce the Opacity to 75% (3).

how to draw the orange candy

Step
2

The
orange candy is ready, and you can Group (Control-G) all the shapes.
Make a copy of the group; then select only the circle and replace the
orange gradient with the green radial gradient shown.

Do
the same thing to obtain the pink candy, the chocolate candy, and the
caramel candy.

how to create colorful candy

Step
3

It’s
time to arrange the candy inside the monster’s mouth. First, arrange
the orange candy in the desired place; then select only the orange
circle and apply the Drop Shadow effect.

Arrange
the pink candy on the right side and apply the Drop Shadow effect
again to the pink circle. Continue to arrange the rest of the candy or as many as
you want. You can also scale them up or down, and don’t forget to add
the shadow.

After
you are done, select all the pieces of candy and move them behind the
teeth but in front of the tongue in the Layers panel under the
existing mask.

how to arrange candy inside monsters mouth

16. How
to Create the Jelly Worms

Step
1

Use
the Pen Tool (P) to draw a wavy path between the colorful candy and
one on the right side of the mouth. Give them a 10 pt Stroke using
the color of your choice.

how to draw the jelly worm paths inside monsters mouth

Step
2

Draw
a small 10 x 10 px circle on your artboard. Go to Object >
Transform > Move, type 170 px in the Horizontal field, and hit Copy
to obtain the second circle. The fill colors are not important at this moment—just make sure they are different.

While
the two circles stay selected, go to Object > Blend > Blend
Options and choose 18 Specified Steps. Hit OK and then go back to
Object > Blend > Make (Alt-Control-B).

how to create a blend group

Step
3

First,
make a copy of the blend group from the previous step because you
have worms to create. Now, select the blue path along with one of
the blend groups and go to Object > Blend > Replace Spine (1).
Use the other blend group for the green path and do the same thing.
You can see the result below (2).

how to create the jelly worms

Step
4

Zoom in on the mouth and use the Direct Selection Tool (A) to select each
circle at the end of the blended worms and replace the fill colors
(1). You can choose other colors as well.

Use
the Pen Tool (P) or the Pencil Tool (N) to draw slightly curved paths
on the yellow/green worm. Give them a 0.5 pt black Stroke and select
the Width Profile 1 in the Stroke panel. Set the Blending Mode to
Overlay and reduce the Opacity to 75%; then Group (Control-G) all of
them (2).

Repeat
the same thing for the pink/blue worm.

how to recolor and add details on jelly worms

Step
5

To
add shine, draw a path on the yellow/green jelly worm following its
shape (1). Give it a 1 pt white Stroke and use the Tapered Blend Art
Brush (2). With this path still selected, duplicate the existing
Stroke attribute in the Appearance panel, but open the Stroke Options
window and check the Flip Along option (3). Set the Blending Mode to
Overlay (4).

Draw
a similar path on the pink/blue jelly worm and apply the same
settings to make it glossy as well.

how to add shine on jelly worms

Step
6

Select
only the blended yellow/green worm (without the lines and the
highlight), and then Copy and Paste in Back (Control-B) to make a copy of
it and expand it (Object > Expand). Apply
the Drop Shadow effect to the resulting group using the settings shown (1). Repeat the same
thing for the other jelly worm.

It’s
time to mask the yellow/green jelly worm, and for that, you need a
copy of the mouth shape. Bring the copy in front of everything by
going to Object > Arrange > Bring to Front (Shift-Control-])
and set it to stroke-none and fill-none. 

Now, select all the shapes
that make up the yellow/green worm, along with the copy of the mouth, and go to Object > Clipping Mask > Make (Control-7) (2). The
result is not quite what we want, so you need to distort the mask
shape a little to reveal the front end of the worm (3).

how to add shadow and mask the jelly worm

17. How
to Add the Final Elements

Step
1

Let’s
create a stick for the orange candy. Draw a rectangle-like shape, slightly rounded at the ends and filled with a very light gray (1). Continue
with a similar but smaller shape on the stick filled with white (2)
and finally, draw a small ellipse at the end filled with gray as the
hole (3).

To
add the shadow, draw another rectangle-like shape under the stick
filled with a linear white to black gradient. Set the Opacity to 0%
for the white slider to make it transparent, and after that, apply a
1.5 px Gaussian Blur (4).

how to draw the orange candy stick

Step
2

You
can also add smaller versions of the chocolate and caramel candy on
the tongue and then apply the Drop Shadow effect to the circles.

how to add extra candy inside monsters mouth

Step
3

The
last thing is the saliva, and it’s easy to make. Use the Pen Tool (P)
to draw a shape between the top teeth, as shown in the next image. Select
light blue as the fill color; then set the Blending Mode to Screen
and reduce the Opacity to 30% (1).

Draw
a small, droplet-like shape at the bottom, filled with pale blue; then
set the Blending Mode to Screen and reduce the Opacity to 40% (2).
Group (Control-G) these two shapes and apply the Drop Shadow effect
using the settings shown (3).

You
can add more saliva using the same technique, but draw different shapes to
make it more realistic.

how to draw saliva inside monsters mouth

Step
4

This
big guy is done now.

candy monster cartoon character

Congratulations!
You’re Done!

Here
is the final image of the candy monster. He is quite cute, right?

I
had a lot of fun creating this cartoon character, and I hope the
tutorial was fun for you as well. If you decide to recreate it,
please share an image because I would love to see it.

Now
you have the knowledge to create other cute characters, so be creative
and keep drawing!

final image of candy monster cartoon character
Design

The surreal conceptual illustrations of Andrea Ucini

Dodaj komentarz

Post pobrano z: The surreal conceptual illustrations of Andrea Ucini

If you are a reader of notorious magazines such as Wired, Entrepreneur Magazine, LeMonde, Die Zeit and New Scientist, you may have already stumbled upon Andrea Ucini’s work. If you are like me, you were probably charmed by the surreal scenes depicted by the artist, as well as the considerable amount of poetry Ucini puts in his work.

Andrea Ucini was born in Italy and started his artistic career with music. He has a classical piano and composition degree from the prestigious Music Academy of Florence. Now the Italian illustrator has become an illustrator specialized in editorial work and he lives in Denmark. You can see more of his work on his website, but also follow him on Instagram or Behance.

Design

How to Be Better at Designing Vectors

Dodaj komentarz

Post pobrano z: How to Be Better at Designing Vectors

Vectors are an effective way of creating online illustrations which can be blown up to large sizes without losing quality.  If you’ve ever looked at an image and believed it would look great as a vector, but wondered where to start, these helpful tips are for you.

When working with a vector program, your first job is to get to know your drawing program.  After this, taking a design down to its foundations will enable you to create an effective illustration.

Seek out the basic structure of your drawing

 

Seek out the core areas of your design.  Based on the flat shapes in front of you, you’ll get an idea of the composition of the page.

Next, seek out the essential elements.  How can you create focus by reducing the elements on the page?  This will give your drawing focus.

As you develop base shapes for the elements of your page, such as the laptop, table, coffee cup and glass, you’ll see your rendering begin to take form.  These shapes might feel flat, but you’ll begin to get a sense of your layout.

Add texture and patterns

Now that you have your layout, start to look at where you can add texture or pattern.  You could look at the surface of the table and add just enough texture to show that it is made of wood.

Adding some grain will achieve this effect.  Focus carefully on where you’d like to add texture so that you don’t complicate your page.

Repeat Elements

If you have repeat shapes such as window frames or coffee cups, you can repeat these images, adding some new details such as different blind lengths or patterns in order to create a unique image.

Take creative shortcuts

If you’d like to add interesting details to your drawing, such as shadows of trees framed against a night sky, you can use Image Trace.

This way you do not have to draw every detail, but you’ll still be able to add texture or background to your illustration.

Start with simple shapes

When you’re starting your drawing, begin with basic geometric shapes such as rectangles, triangles, squares or trapeziums.

From here, you can use the warp function to alter your shape.  When you’re working from stock images, sketches or even your own imagination, begin by breaking the image down into basic shapes and work from there.

Consult your client

When you are about to hand over the final image to your client, find out the format they require.  This way you can supply them with the file they want most.

If the client wants an Illustrator file, and you have a great many layers that you don’t want to move over one by one, simply draw a rectangle over your image, control, and right click, and ‘create clipping mask’.

This will give you the shape of your artwork that you are now able to present to your client.

Use Bezier Curves

When you are drawing with a Wacom pad and pen, you could use Bezier Tools to create smooth curves.

Bezier curves might take time to learn but they will give you the smooth lines or shapes you want.  Learning keyboard shortcuts will help you to work quickly and efficiently with this tool.

Consider your medium

Your medium will determine your approach to your design.  If you are designing for a magazine or a billboard, the end result will be different than a design you would like to spray onto a wall.  Choice of shapes, color, texture, and complexity will all depend on the end goal.

If you are designing a T-Shirt artwork, for example, you should look first at how others are creating them. Also, frame your design in a blank T-shirt template, so that you will present it better to your client.

Experiment

Feel free to play and experiment when working on your design.  Create simple shapes, lines or curves, move them about, erase some of the details and then add new elements.

Allowing yourself to play with your design gives you space for spontaneity, and to allow the process to evolve.  Even though you might plan your design carefully, allowing experimentation creates space for new ideas to flow.

Develop your own style

When working with vectors, try to find your own unique style.  This is possible with Adobe Illustrator, which offers unlimited ways of working.  After experimenting with the program, allow your own style to emerge.  Below are some opportunities for experimentation:

When working with a pen, use the least number of anchor points and draw on curves so that your design looks clean and smooth.

Calligraphic brushes used alongside your tablet will give your illustration a hand-drawn feel.

In Illustrator, close off all the shapes you don’t need, and experiment with using the pencil tool.  You can draw basic shapes, expand on them and use color to add life to your work.

If you are using line art, play with the lightness or thickness of your strokes.  This will add texture and depth to your work.

Using layer folders

When you are creating complex artworks, it is often helpful to work in layers, an option provided by Illustrator.  Layers are like clear folders which manage all the different elements of your artwork.

You can place them together, change their stacking order or delete aspects of your work that you no longer like.  Shifting and playing with layers gives you the opportunity to experiment with your design without losing the original concept.

Color opacity and transparent gradients

The gradient palate is a very effective feature on Illustrator.  Transparent gradients give you the opportunity to fade out a color in different areas of your page, providing different levels of opacity.  Using transparent gradients will also give you a watercolor effect.

Store your work

Once you have created shapes or drawing, you can store them, giving you a collection of drawings or ideas to play with while working on a new project.

These shapes will be able to provide you with foundations for new projects which will feel easy and natural to use.

Use your imagination

When using Adobe Photoshop, creating new forms or shapes means imagining how they will look in 3D.

Working with multiple layers which add color, light, and shadow will create a three-dimensional effect.  You can adjust these shapes or layers later on to suit your needs.

Which software is most helpful when drawing vector icons?

When Drawing Shapes

When creating icons, you can achieve incredible results simply by combining basic shapes and sizes.  All drawing apps have tools for basic shapes, but when you’re choosing which product you’d like to work with, it’s worth thinking about how easy each program is to use, and the flexibility offered.

Photoshop is not so easy to use because it isn’t made for vector drawing, and so isn’t as smooth or intuitive as Illustrator or Sketch when it comes to drawing.  You may also struggle with editing shapes such as polygons or stars, and this might limit your flexibility.

Illustrator is great for creating basic shapes, and it has a Live Corners feature which can smooth out corners.  However, Illustrator (like Photoshop) can limit you when it comes to polygons or stars, which can’t be adjusted.  Sketch allows you to edit all shapes, including polygons and stars and will let you round all corners, which gives you a greater degree of flexibility.

When using Pathfinder or Boolean Operations

You can use the Pathfinder panel to create new shape combinations.  This allows you to add complexity to your vector illustrations.  The panel gives you 4 options to create new shapes:

  • Unite/Add: combines and merges selected shapes
  • Minus/Subtract: Uses a cookie cutter to subtract top shapes from bottom ones.
  • Intersect deletes shapes that do not overlap.
  • Exclude: deletes everything that does overlap

Photoshop has non-destructive operations on Pathfinder (and so they won’t make permanent changes to your shapes), and these can be flattened if you need this.  However, you will need to merge layers together as Photoshop can only perform pathfinders on single layer vectors.

Illustrator has a far wider range of Pathfinder options.  These extra options increase the flexibility of your vector drawings.  However, they are destructive, so they will make permanent changes to your shapes.

Sketch has non-destructive Pathfinder operations which can be modified within the various layers.  You can also flatten your combined shapes to create permanent changes.  Sketch is a very helpful program when it comes to Pathfinder options.

When exporting to SVG

SVG creates scalable vector graphics and is a standard format used by the World Wide Web Consortium.  SVG is the best way to share vector illustrations as it is supported by browsers, drawing applications, and image viewers.

Photoshop enables you to export multiple SVG files by either using individual artboards or creating a .svg suffix for layers or group files.  There is, therefore, no need to create an artboard for each icon.  This sets Photoshop apart.  It can be helpful when you are working with large numbers of icons or layers.  You can also overlap layers in Photoshop using the same artboard.

Illustrator has a range of SVG export options which enables you to create font preferences, CSS properties, and image embedding.  You can export multiple SVG files simultaneously.  However, there is a limit of 100 artboards per Illustrator document.

Sketch allows you to export SVG files using Slices.  However, this process can be buggier than Photoshop and Illustrator and can be a drawback when using Sketch.

Ending thoughts

Little tips can be effective to turn your work around, or allow your thoughts or ideas to ‘click’.  Going through the foundations, although this may seem like common knowledge, might give you a simple solution to any problem you might be having.  Good luck with your vector drawings.

CSS

New flexbox guides on MDN

Dodaj komentarz

Post pobrano z: New flexbox guides on MDN

MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox properties are nicely and conveniently attached to the table of contents, making this extremely easy to use.

In this post, Rachel adds helpful thoughts and context about Flexbox. Her comment on Flexbox initially being treated as a silver bullet solution for all our layout issues struck me:

Prior to Grid shipping, Flexbox was seen as the spec to solve all of our layout problems, yet a lot of the difficulty in using Flexbox is when we try to use it to create the kind of two-dimensional layouts that Grid is designed for. Once again, we find ourselves fighting to persuade a layout method to do things it wasn’t designed to do.

Guilty as charged. I remember being so eager to ditch floats and learn a new syntax that I treated Flexbox as a square peg trying to be fit into a round hole. That definitely bit me on at least one project.

Most importantly about this guide is that it forms a sort of trifecta of reference materials on layout specifications provided by CSS: Flexbox, Grid and other Box Alignment properties.

Oh, and while we’re on the topic, we have Flexbox and Grid guides right here on CSS-Tricks. You can never learn too much, right?

Direct Link to Article — Permalink

New flexbox guides on MDN is a post from CSS-Tricks

CSS

Third-Party Scripts

Dodaj komentarz

Post pobrano z: Third-Party Scripts

Trent Walton:

My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts. No matter how solid I think my prototype is, it doesn’t absolve me from paying attention to what happens during implementation, specifically when it comes to the addition of these third-party scripts.

I recently had a conversation with a friend working on quite a high profile e-commerce site. They were hired to develop the site, but particularly with performance in mind. They were going the PWA route, but were immediately hamstrung by third-party scripts. One of them, apparently unavoidably, couldn’t be HTTPS, meaning the site was immediately disqualified from being a PWA. They could still do a good job in many other areas, but right and left their great performance work was slaughtered by third-party scripts. I don’t envy being in that position.

It’s often the fault of „tag managers.” There are a bunch of them out there. Here’s a marketing pitch for one of them:

Marketers want tag management that’s simple, reliable, and integrates easily with existing systems … You’ll launch programs faster, so you can make swifter decisions.

In other words, „Give your marketing team the ability to add whatever third-party JavaScript they want quickly without having to go through your normal deployment process.” I can understand why they are needed in some organizations, but it still sends chills up my spine.

Third-party scripts could conceivably be a part of a design style guide. Right alongside your buttons and modals could be a list of the third-party scripts in place on a site. Brad Frost:

The idea is that someone (or as Trent points out, some *thing*) could hypothetically crawl through all the included scripts on a site, and display them in the in style guide alongside all the color swatches, icons, UI components, etc. After all, they affect the end user experience just as much (if not more) than all those other design elements. You can visually weight them based on how gnarly they are and thus have thoughtful conversations with your team — especially those folks are carelessly chucking in all these performance-damning scripts — about the pros and cons of each script that gets included.

Third-party scripts are probably the #1 cause of poor performance and bad UX on the web. It’s no wonder things like AMP exist. The fact that it disallows third-party scripts is probably the largest contributor to it making sites fast. Controversial as hell, though, in its other choices.

As fate would have it, third-party JavaScript is even more dangerous than it ever has been, thanks to Spectre and Meltdown. Jorgé:

Q: Is JavaScript vulnerable in my browser?
A: Yes, browsing a web can give access to third parties to your machine’s memory beyond the browser.

😳

More on Third-Party JavaScript

If you, like Trent, are planning to bone up on your third-party JavaScript chops, here’s a bunch of stuff from other developers in the past few years digging into it all. Some of this is targeted at you being the deliverer of the third-party JavaScript.

Third Party JavaScript (In the Third Person) Slides by Alex Sexton

Presentation slide

View Presentation

On Third-Party Javascript – The Principles by Gergely Nemeth

When serving third-party JavaScript applications the size of it and the cache policy are crucial, as both not just affect the time your users have to wait to see the application, but also your monthly bills.

See also: Writing third-party Javascript the integration part in a nutshell.

Read Post

Third-Party Javascript by Ben Vinegar and Anton Kovalyov

Things to Know (and Potential Dangers) with Third-Party Scripts by Yaphi Berhanu

The web is full of third-party scripts. Sites use them for ads, analytics, retargeting, and more. But this isn’t always the whole story. Scripts can track your behavior, your preferences, and other information.

Read Post

I’m harvesting credit card numbers and passwords from your site. Here’s how. by David Gilbertson

My goal is simply to point out that any site that includes third party code is alarmingly vulnerable, in a completely undetectable way.

Read Post

Ain’t No Party Like A Third-Party JS Party by Rebecca Murphey

You thought you had the hang of this whole JavaScript thing, but now you’re in the world of third-party JavaScript, where all you control is a single script tag and where it’s all but impossible to dream up every hostile environment in which your code will be expected to work. „It works on my machine” has never rung quite so hollow. In this talk, we’ll take a look at some of the delightful bugs we’ve had to solve at Bazaarvoice while working on the third-party JavaScript app that collects and displays ratings and reviews for some of the world’s largest retailers.

Watch Video

(Subscription required)

3rd Party Javascript Management Cheat Sheet

The invocation of 3rd party JS code in a web application requires consideration for 3 risks in particular:

  1. The loss of control over changes to the client application,
  2. The execution of arbitrary code on client systems,
  3. The disclosure or leakage of sensitive information to 3rd parties.

Read Post

Third-Party Scripts is a post from CSS-Tricks

CSS

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

Dodaj komentarz

Post pobrano z: Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape.

I’ve written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much.

Let’s dive in!

Document Structure and Semantics

It probably doesn’t come as much of a surprise that structuring your HTML in an organized, semantic way will make a big difference. Screen readers rely on a well-structured document in order to follow a coherent narrative, so make sure that you’re using the elements that the HTML5 spec provides responsively and effectively.

If you’re unsure about how to markup your work correctly, check out resources such as HTML5 Doctor, Code Academy and of course, CSS-Tricks. You can also check out articles like “Writing HTML with accessibility in mind” and “Semantic Structure” to get you going in the right direction.

Let’s look at three specific things that can help ensure a well-structured and semantic document.

Use a Single <main> Element

A good example of building a responsible, semantic document structure is only using one <main> element. This should serve as a signpost for the most important content of the page for your user.

Add an ID to it and offer a skip link in your main <header> like so:

<header role="banner">
  <h1>Your main page title</h1>
    <a href="#main-content">Skip to the main content</a>
 </header>
    
<!-- Further down the document -->
<main id="main-content">
  <!-- Put your main body of content in here and other really important stuff -->
</main>

This little trick should help your screen reader users out in a big way, because they can go ahead and skip the fancy bits and dive right into your important content. It’s also great for keyboard users for the same reason.

Another nice touch is to add a :focus style to the skip link that makes it visible. Try pressing your tab key on GitHub.com. Pretty neat, right?

Use Elements Appropriately

So, <button> elements are a pain in the butt to style right? That doesn’t mean you should attach your JavaScript events to a <div> or an <a href="#"> though. You see, when you use a <button>, you get keyboard events for free. You’re also helping screen reader users out because it’ll announce the element correctly. Check out this example:

document.getElementsByTagName('button')[0].addEventListener('click', evt => {
  alert('Oh, hey there!');
});

If a user focused on that button and hit the enter key, that event would fire. That makes both yours and the users’ lives a bit easier. Well worth it, right?

See the Pen Button click example by Andy Bell (@hankchizljaw) on CodePen.

Get Your Heading Hierarchy Locked-Down

It’s really common for screen reader users to navigate a page by using the heading structure. That means we should help them out and create a nice hierarchy for them. Let’s take a look at a standard blog post:

<main id="main-content">
  <article>
      <!-- The page title is up in the main <header> in this instance -->
      <h2>My awesome blog post</h2>
      <p>Vestibulum id ligula porta felis euismod semper.</p>
      <p>Vestibulum id ligula porta felis euismod semper.</p>

      <h3>A sub-section of this post</h3>
      <p>Vestibulum id ligula porta felis euismod semper.</p>

      <h4>A sub-section of the sub-section</h4>
      <p>Vestibulum id ligula porta felis euismod semper.</p>
  </article>
</main>

With that sample, the user can navigate to the start of „My awesome blog post” and then have the ability to skip to sub-sections and nested sub-sections easily. They can also skip back up. It’s just a nice way of helping them consume the content you’ve produced as easily as possible.

It can be recommended that a page has a single <h1> element, even though the W3C HTML5 spec says you can have many. I personally agree with the use of a single <h1>, but you can have many, as long as you follow a nice structure and hierarchy. That’s the key here.

Get Your Color Contrast Right

To be WCAG 2.0 AA compliant, you need to have a contrast ratio of 4.5:1 for normal text. This is your paragraphs, buttons, navigation, etc. You need to go for a ratio of 3:1 for larger text, such as headings. I’d say this should be your minimum as it’s incredibly achievable with tools such as Tota11y, Contrast and the WebAim contrast checker. You can still get plenty of color balance and variation in your design too.

The reason that contrast is so important is because there’s so much variation in environment that you probably don’t even consider, such as bright sunlight and poor quality displays. Add this to a visual impairment or, say, a migraine and you’re potentially causing problems for your users.

Getting the contrast right will have a huge, positive effect across a wide spectrum of your users.

Responsible Text Labels

We’ve all built out a list of items with a non-descriptive, but visually appealing „More” button, right? More what though? We need to be more responsible with this and provide some context.

One way to achieve this is by visually hiding descriptive text with CSS and hiding the non-descriptive text from screen readers. It’s tempting to use display: none;, but screen readers can ignore elements with that set, so we need to be more creative. I use something like this little helper:

.visually-hidden { 
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  visibility: hidden;
  white-space: nowrap;
  position: absolute;
}

With this CSS in place, we can do something like this:

<a href="/link-to-your-page">
  <!-- This is hidden from a screen reader, but visible visually -->
  <span aria-hidden="true">More</span>

  <!-- This is visible to a screen reader, but visually hidden -->
  <span class="visually-hidden">Continue reading: "Your post title here"</span>
</a>

A sighted user will only see “More” and a screen reader user will hear “Continue reading: 'Your post title here.'” Both sets of users are happy.

You can also achieve the above by using an aria-label on the <a> tag. This will override the text within for a screen-reader: 

<a href="/link-to-your-page" aria-label="Continue reading: 'Your post title here'">
  More
</a>

Small Typography Tweaks With a Big Impact

It’s always worth remembering that people with a visual impairment or learning difficulty could be trying to read your content, so some small tweaks to your typography can go a long way.

A body of content such as an article should be sized at 16px (or equivalent unit) at a minimum. It’s also worth increasing your line-height to around 1.5 too. Space between lines can help readers with dyslexia to understand your content better. The combination of size and space is also great for older people and/or short-of-sight people. Even small summaries and aside content should be at least 12px (or equivalent unit). Anything smaller than that will alienate users who struggle to read.

Another trick is to highlight key words and phrases if your content is quite complex. This not only benefits users who are slightly slower at processing content but it also helps people who like to scan over an article, like I do.

Lastly on this section, I’d advise you to be careful with your font choices. Fonts with complex ligatures and decorative elements can be really distracting, so maybe limit the usage of those to key, large headings only. It’s also been advised that sans-serif fonts are better for readers with dyslexia. Check out this article for more on that and other text formatting tips.

Enhance Keyboard Support

There are a few little tweaks you can do to help users who primarily use their keyboard to navigate your website.

Say you’ve got a little button that shows a dialogue when you click it. You should attach an event to the escape key that hides it. Here’s a sample snippet:

document.addEventListener('keyup', (evt) => {
  if(evt.keyCode === 27) {
    // Run whatever code hides your dialogue
  }
});

See the Pen Escape key demo by Andy Bell (@hankchizljaw) on CodePen.

Another tweak you can do for our keyboard-navigating buddies is not hiding focus from them. Browsers give us focus states for free with outline. I know it can look ugly, but hot-damn it’s useful for keyboard users. If you want to get rid of that blue glow, I get it—just please use the :focus pseudo selector to add an obvious state change to it instead. Here’s a sample:

.your-element {
  background: red;
}

.your-element:focus {
  outline: none; /* Reset the default */
  box-shadow: 0 0 0 3px black; /* A very obvious state change */
}

Don’t Rely on Color Alone to Communicate State Changes

Let’s end on a really important one. Color shouldn’t be relied upon alone to communicate state changes. Take this scenario as an example:

You’ve got a button that posts a form. You wrote some neat JavaScript that makes it go grey while it sends the data. It then either turns green or red, depending on what the status is.

For a colorblind user, this is a nightmare. To them, the button may have barely changed enough for them to notice, so they may just keep clicking and clicking while getting really frustrated. This isn’t ideal.

So, instead of relying on color, let’s enhance that with a status message that supports the button’s state on response.

See the Pen Enhanced state change communication demo by Andy Bell (@hankchizljaw) on CodePen.

That sample is a great way to quickly communicate to the user that something has changed and the use of color, text and iconography clearly communicates that change. Disabling the button whilst the response is processed is also a great help to the user.

Wrapping Up

These little tips should make a big difference to your users, and I hope you dive into your projects and implement some of them.

You should also keep learning about accessibility. I recommend following people such as Heydon Pickering, Scott O’Hara, Laura Kalbag, and Rob Dobson on Twitter. I also recommend that you check out resources such as Inclusive Components and the A11y Project.

The greater your knowledge gets, the better your websites and products will be for a much wider audience. That can only be a good thing, right?

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility is a post from CSS-Tricks

CSS

​Incapsula’s Global DDoS Threat Landscape Report

Dodaj komentarz

Post pobrano z: ​Incapsula’s Global DDoS Threat Landscape Report

(This is a sponsored post.)

The newly released Q3 2017 Global DDoS Threat Landscape Report features insights on attacks and mitigation. These are some of the key findings:

  • Bitcoin was one of the most targeted industries
  • High packet rate attacks grew more common
  • A third of network layer attacks were highly persistent
  • Botnet activity out of India and Turkey continued to climb

Learn about the top attacked countries, industries, and vectors here and how to protect your site with Incapsula.

Direct Link to Article — Permalink

​Incapsula’s Global DDoS Threat Landscape Report is a post from CSS-Tricks

Web Tools

How to Create a Promotion Vector Badge in Adobe Illustrator

Post pobrano z: How to Create a Promotion Vector Badge in Adobe Illustrator

Final product image
What You’ll Be Creating

In the following steps, you will learn how to create a promotion vector badge in Adobe Illustrator. 

For starters, you will learn how to set up a simple grid. Next, using basic tools and some aligning techniques, you will learn how to create a set of concentric circles. Moving on, you will learn how to create a stylized ribbon and how to easily bend it using some Warp effects. Finally, you will learn how to add some text on a path and a subtle texture for the entire design.

For more inspiration on how to adjust or improve your final badge, you can find plenty of resources at GraphicRiver.

1. How to Create a New Document and Set Up Grid

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 850 in the width and height boxes, and then click that More Settings button. Select RGB for the Color Mode, set the Raster Effects to Screen (72 ppi), and then click Create Document.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You will need a grid every 5 px, so simply go to Edit > Preferences > Guides & Grid, and enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-„ keyboard shortcut.

You can learn more about Illustrator’s grid system in this short tutorial from Andrei Stefan: Understanding Adobe Illustrator’s Grid System.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don’t forget to set the unit of measurement to pixels from Edit > Preferences > Units. All these options will significantly increase your work speed.

setup grid

2. How to Create a Set of Concentric Circles

Step 1

Pick the Ellipse Tool (L) and focus on your Toolbar. Remove the color from the stroke and then select the fill and set its color to R=73 G=35 B=84. Move to your artboard and create a 300 px grid—the grid and the Snap to Grid should make it easier.

Make sure that your shape stays selected and open the Align panel (Window > Align). Simply click the Horizontal Align Center and Vertical Align Center buttons to bring your selection to the center of the artboard.

ellipse tool

Step 2

Make sure that your shape is still selected and go to Effect > Distort & Transform > Zig Zag. Enter the attributes shown below and click OK.

zig zag

Step 3

Using the Ellipse Tool (L), create a 260 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 4

Using the Ellipse Tool (L), create a 240 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

Step 5

Using the Ellipse Tool (L), create a 220 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 6

Using the Ellipse Tool (L), create a 150 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

Step 7

Using the Ellipse Tool (L), create a 130 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 8

Using the Ellipse Tool (L), create a 110 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

3. How to Create the Ribbon

Step 1

Using the Rectangle Tool (M), create a 310 x 70 px shape and fill it with R=228 G=242 B=255. Center this new shape, make sure that it stays selected, and focus on the Appearance panel (Window > Appearance).

Select the stroke and set its color to R=73 G=35 B=84, and then open that Stroke fly-out panel. Set the Weight to 10 px and don’t forget to check that Round Join button.

rectangle tool

Step 2

Using the Rectangle Tool (M), create an 80 x 70 px shape and fill it with R=198 G=212 B=255. Place this new shape as shown in the first image, make sure that it stays selected, and focus on the Appearance panel. Select the stroke and set its color to R=73 G=35 B=84, and then open that Stroke fly-out panel. Set the Weight to 10 px and don’t forget to check that Round Join button.

Make sure that this rectangle stays selected and pick the Add Anchor Point Tool (+). Use a simple click to add a new anchor point as shown in the second image.

add anchor point

Step 3

Make sure that the rectangle made in the previous step is still selected and pick the Direct Selection Tool (A). First, select the top-right anchor point and drag it 30 px to the left, and then select the middle-left anchor point and drag it 30 px to the right. In the end, your shape should look like in the second image.

direct selection tool

Step 4

Pick the Pen Tool (P) and create a simple shape as shown in the following image. Fill it with R=73 G=35 B=84 and add a 10 px stroke of a similar color. Don’t forget to check the Round Join button for the stroke, and then lower the Opacity of your entire selection to 30%.

appearance panel

Step 5

Using the Pen Tool (P), create a simple triangle as shown in the following image. Fill it with R=73 G=35 B=84 and add a 10 px stroke of a similar color. Don’t forget to check the Round Join button for this stroke.

round join

Step 6

Select the three shapes highlighted in the first image and Group them (Control-G). Make sure that your group is selected and go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click OK.

group

Step 7

Using the Pen Tool (P), create the two triangle shapes shown in the following images. Fill both shapes with a random yellow, for now.

triangles

Step 8

Select the bottom yellow shape and focus on the Appearance panel. Replace the fill color with R=73 G=35 B=84 and add a 10 px stroke with a similar color. Remember to check the Round Join button for this stroke and then select the entire path (simply click that „Path” piece of text from the Appearance panel). First, lower the Opacity to 30% and then go to Effect > Warp > Arc Lower. Enter the attributes shown below and click OK.

Move to the top yellow shape and apply the same Appearance attributes, but replace the Arc Lower effect with the Arc Upper effect shown in the second image.

opacity

Step 9

Select your 310 x 70 px rectangle and bring it to front using the Shift-Control-] keyboard shortcut.

Pick the Pen Tool (P) and create the tiny horizontal paths shown in the second image. Add a 10 px stroke for these new paths, set its color to R=73 G=35 B=84, and don’t forget to check that Round Join button.

round cap

4. How to Add Some Text

Step 1

Pick the Type Tool (T) and open the Character panel (Window > Type > Character). Select the Insaniburger font, set the size to 30 px, and increase the tracking to 22.

Simply click on your artboard and add the „PROMOTION” piece of text. Place it as shown in the following image and set the color to R=73 G=35 B=84.

type tool

Step 2

Select all the shapes highlighted in the first image, Group them (Control-G), and then go to Effect > Warp > Flag. Enter the attributes shown below and click OK.

warp flag

Step 3

Pick the Ellipse Tool (L) and create a 200 px circle. Fill this new shape with a random yellow and center it.

Make sure that this new shape stays selected, pick the Type on a Path Tool, and simply click on the edge of your selected shape. This will allow you to add text along your path.

Add the „BEST DEALS” piece of text, set the color to R=73 G=35 B=84 and focus on the Character panel. Select the Insaniburger font, and set the size to 22 px and the tracking to 0. Next, you need to adjust the position of your text. Switch to the Direct Selection Tool (A) and simply drag that middle bracket from the outside to the inside of your circle. This should move your text inside the circle. Use that same bracket to move your text along the path as shown in the following image.

type on path

Step 4

Pick the Ellipse Tool (L) and create a 170 px circle. Fill this new shape with a random yellow and center it.

Make sure that your yellow circle stays selected, pick the Type on a Path Tool, and simply click on the edge of your selection.

Add the „SPECIAL OFFER” piece of text, set the color to R=73 G=35 B=84, and focus on the Character panel. Apply the attributes shown in the following image and use that bracket to move your text along the path as shown below.

type on path

5. How to Create the Background and Add a Subtle Texture

Step 1

Pick the Rectangle Tool (M) and create an 860 px square. Fill this new shape with R=228 G=242 B=255, send it to back using the Shift-Control-[ keyboard shortcut, and don’t forget to center it.

background

Step 2

Finally, let’s add a subtle texture. Download this set of Grunge Abstract Backgrounds from Envato Elements and drag the first image inside your document.

Resize it a little, make sure that it covers your entire artboard, and then change its Blending Mode to Soft Light.

texture

Congratulations! You’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your design.

final product