How to Create a Punk-Rock Portrait in Procreate

24/08/2018 admin

Post pobrano z: How to Create a Punk-Rock Portrait in Procreate

Final product image — What You’ll Be Creating

This tutorial will introduce you to the basics of Procreate, which can be a great professional tool for you as it is for me. Procreate has quickly become my go-to digital painting app, and I do most of my work in this app.

In this tutorial, I’ll be using an iPad Pro with the Apple Pencil and Procreate 4. I’ll also guide you through my painting techniques and the process of developing a masculine portrait.

Let’s start!

1. How to Make a Sketch

Step 1

First, open the Procreate application. Tap the (+) icon
in the top right corner to create a New Canvas. Tap to Create
Custom Size and create a 3500 x 4000 px canvas size, RGB, 300 DPI resolution.

Step 2

I start the process by gathering the reference materials for my masculine punk character, collecting images with some attributes
inherent to this style.

I create my sketch directly in Procreate using my Apple Pencil. Procreate has a great selection of
sketching brushes, which you can find in the Sketching set.
Any brush from this set will be
suitable for sketching. My favorite is the 6B Pencil brush.

Let’s modify
this brush a little bit to get more flexibility in the sketching process. Tap the 6B
Pencil icon, and the Settings of the tool will
appear. Choose the General settings and change the Size
Limits to ~30% Max.

Step 3

We already have two layers by default: one layer with the
background color and one empty layer. It’s best
to start with a simple white canvas, without any gradients or colours, so we’re keeping the background color white.

Open the Layers panel, tap „Layer 2”,
and rename it „sketch”. Choose any color you like from the Color menu in the top right
corner.

Step 4

The references are collected and the brush and color are selected, so now it’s time to create the sketch!

Start with the
basic shapes, keeping the image simple and not going into too much detail. Then
build up your rough sketch into something more refined, adding more details to give them a bit more character.

You can
rotate the canvas in the process for convenience. Just use two fingers and rotate your
image or size it.

Also, you can change the Size and Opacity of
any Brush tool by moving the
sliders on the left side of the screen up and down.

2. How to Create the Line Art

Step 1

First, open the Layers menu, tap N on
the „sketch” layer, and lower the Opacity to about 30%.

Then
create a New Layer for your line art on
top of the „sketch” layer.

Step 2

Let’s create
a New Ink Brush for our line work.

First, choose the Inking set, and tap the + icon
in the top-right corner of the brush list to create your New Brush.
The menu with sources will appear.

For the Shape, tap Swap from Pro Library and
choose Ink 2. For
the Grain, tap Swap from Pro Library and choose
the Recycled Paper texture.

pick sources for the brush

Rename it „New ink brush”, and use the brush settings shown below.

apply the new brush settings

Step 3

Let’s make a few trial lines with our new brush,
so we can sense the lines. The
thickness of the line depends on how hard you press with the pencil.

Then tap on the „lines” layer and select Clear from the drop-down list to delete your trial
lines. Now we can start our line art on the clean layer.

Step 4

We’re ready to start creating our line art.

First, let’s pick the color for the lines. Choose a deep blue-gray
color from the Colors menu, avoiding black for
a softer look.

The most convenient
method during the work process is to mirror
your image. It will
allow you to control the proportions and have more flexibility in the drawing process. Also, it helps you to take a fresh look at your work, so you can correct any early mistakes.

Just go to Actions > Canvas >
Flip canvas horizontally as shown below.

Step 5

Set the brush Size to
about 5-10% with 100% Opacity.

Start by
drawing the face with smooth lines on top of your sketch. Create
a variance of line weight, making transitions from thin to thick and imitating
traditional ink. It will give more life to your drawing.

If you feel
the lines are thicker or thinner than you would like them, you can always change their Weight by moving the Brush Size slider on the left side of the
screen up or down.

Step 6

Now let’s draw the outfit: jacket,
t-shirt, and rock collar.

Don’t think
about any details on this stage—just draw the main objects of your character’s outfit.

Let’s add
some necessary details to the outfit.

Draw one rivet on the jacket’s
collar first. Take the Selection tool, and
make sure it’s on Freehand. Select
the area of the rivet. Then tap Transform, which is next in the top panel. Swipe down with three fingers, and the menu
will appear. Choose Copy + Paste and you’ll
get this rivet on a new layer. Move it down
and place it on another part
of the collar.

Create more rivets using the same principle.

As a result,
we’ll get them as
inserted images on the new layers.
Merge these layers into one. Just tap on the top layer and choose Merge
Down from the drop-down list. Or you can take the two layers (one
finger on one, and one finger on the other) and squeeze them together.

Finish the decoration of the jacket by adding more rivets, buttons, pins, and badges.

Step 7

I noticed
that the rock collar is too low on the neck. But we can fix it easily.

Tap
the Selection tool, and draw a shape on the area of the collar. Then tap Transform, so you can move this object up a
little. Use the Eraser
to clean the rock collar a little bit, and finish this by drawing some missing
lines.

use the Transform tool

In the end, decorate the t-shirt
with a skull drawing.

Step 8

Now let’s draw the hairstyle. Create the solid shapes first, making just the main lines. Then add some details
made of very thin lines.

At once, use the same brush to add some volume and deep contrast shadows to the
hairstyle.

Make the
“sketch” layer invisible and admire the result of the line art.

3. How to Create the Main Shapes

Step 1

Let’s start by filling the background with some basic color.

Pick the Charcoal Block brush from the Charcoals set, and modify it by
changing the Size Limit to about 160%.

Now create a New Layer under
the „lines” layer.

Choose pink, and draw the main shape of the background pattern following
the sketch. We can change this
color as necessary later.

Step 2

We can keep all the
colors that we will pick up in the process by creating a Palette of basic colors.

We have the Colors menu in the top right
corner, where we can select the color.

Click on the + icon to Create a New
Palette, and a new area with empty boxes for our new palette will appear.
Rename it „Punk-rock”.

Let’s add the pink
from the background first.
Pick the color and tap on any of the empty boxes, and it saves it.

Further
fill these boxes with selected colors to create your own palette.

Step 3

Create
a New Layer and
pick a beige color for the skin tone.

Now let’s
find a suitable brush for the
painting. My favorite is the Soft Pastel brush from the Sketching set.

brush settings

Use the Max Size of the brush and fill the
face and neck with color. Clean the area around the body using the Eraser
Tool. Choose the Soft Pastel brush as an
eraser as well.

Add
this skin tone color to your Palette.

Step 4

Now let’s find
another cool brush for the jacket.

Go to Brushes > Painting > Nikko Rull,
and change the Size Limit to about 470%.

Set the brush Size to
about 70% with 100% Opacity. Pick a dark
violet color and draw large strokes to cover the whole area of the jacket shape. Add this color to your Palette.

Now we need
to clean the area outside of the lines. We
can use the Eraser Tool, as we did before. But in this case I find
the Selection Tool is a more convenient method.

Tap the Selection Tool
and draw a
shape on the area you need to delete. Then tap Transform, swipe
down with three fingers, and the menu will appear. Choose Cut, and
you’ll get an absolutely clean area.

In
the end, refine the edges using the Eraser
Tool.

Step 5

Create new layers for each
group of objects, and fill them with colors using the Soft
Pastel brush.

Organize the layers as shown in the screenshot below.

Step 6

Let’s set the background color by tapping the
„Background color” layer, which we already have by default. Select a
dark blue color on the Color menu.

Now
we need to change the color of our background shape and make it more saturated. It allows us to create a good range of
contrast and make the character more expressive.

First select the layer, and then tap the Adjustments icon
and choose Hue, Saturation, Brightness from
the drop-down list. Move the sliders
until you get the desired result.

4. How to Add Shadows and Highlights

Step 1

Let’s start by adding some volume to the face.

Tap on the „skin” layer and
select Alpha Lock from the drop-down list. It will help us to
paint inside the body shape without crossing this area.

Now select a peach color and choose the Soft Pastel brush from the Sketching set. I like using
this brush because of the softness and texture, and it also makes the painting look
more realistic.

Start
building the basic shapes of the face and neck with very large
brush strokes and defining the character’s facial features.

Then
create some subtle shadows using a light brown color to show the volume more clearly. You can vary the
brush Size in the process as you like.

Step 2

This way, add some basic
shadows by making strokes on the shadowy area. Use the Bordeaux color for them.

Then
add a little contrast to the face.
Choose the dark blue-grey color and add some deeper shadows to the eyes, nose, ear, neck, and hair growth line.

Step 3

Create a New Layer for the highlights on top of the „skin”
layer.

Select a lighter cold tint starting from the base skin color, and paint some
highlight strokes using the same Soft Pastel brush. Reduce the Opacity of the layer to about 65%.

Once we’re happy with the highlights, we can
merge these layers with highlights and skin into one „skin”
layer. Tap on the top layer with highlights and choose Merge Down from
the drop-down list.

Let’s refine the skin a little bit,
correcting the roughness of the skin and improving the shape of his face
and neck. Also add some volume to the eyes and lips.

Use the Color Picker Button to
select the color you need. You can find this button between the Size and Opacity sliders.

Step 4

Once we’re happy with the volume of the face, let’s add some colors to make the skin more natural and bring some life to it.

Create a New Layer on top of the
„skin”, and rename it „color
zone”.

First select the
„skin” layer. Just tap on the layer and choose Select from
the drop-down list. It will allow us to draw on the „color zone” layer just inside the body
shape.

Now we need to add
some variation in color to the face: yellow tones to the forehead and neck,
reddish tones to the cheeks, nose and ear, and blue tones underneath the eyes
and around the chin.

Change the Blending Mode of
this layer to Multiply. Reduce the Opacity to about 20%. You can play around
with the Opacity until you’re happy with how it looks.

Step 5

Create a New Layer for the bristle on top of the „color zone” layer.

Keeping
the „skin” layer selected, draw large brush strokes on the head and
chin. Use the same Soft
Pastel brush and a deep
blue color. Refine the edges using the Eraser Tool.

In
the end, change the Blending Mode to Hard Light to add saturated colors and
darken areas simultaneously.

Step 6

Let’s add some freckles to make the skin more natural.

Create a New Layer on top of
the „skin”, and rename it „freckles”. Choose the Flicks brush from the Spraypaints set and
pick the Bordeaux color.

Apply Select to the
„skin” layer. Using the middle size of the brush, draw some strokes, spraying tiny
spots on the skin area. Change the Blending Mode to Color Burn and reduce
the Opacity to about 20%.

Using the same color and the Soft Pastel brush, add some freckles and moles randomly to the nose, cheeks, and neck.
Vary the brush Size around 5–15% in the
process.

In the end, let’s draw some falling shadows
from the hair.

Create a New Layer for them on
top of the „skin”. Add some dark blue shadows
to the forehead under the fringe and to the face under the beard.

5. How to Create a Vibrant Hairstyle

Step 1

Let’s start forming the hairstyle.

First, lock the „hair” layer by activating Alpha
Lock.

Use the Soft Pastel brush to add some large green and pink shapes to the hairstyle.

Draw some deep blue strokes on the roots of the hair and on the
shadowy area of the locks.

Then
use a very saturated green colour and mix it with the pink and blue, creating
some interesting effects.

We
don’t paint every strand individually at this stage, but cluster and form
groups.

Now
eye-drop the colors from the skin to the very roots of the hair, and make some smooth color transitions from the skin to the hair.

Then
create some volume by adding some saturated blue color.

Step 2

Use the same Soft Pastel brush and yellow color to add some bright spots to the green part
of the hairstyle. Then draw some gentle aquamarine strokes, styling
separate locks.
And don’t forget about the beard! Use blue and purple tints for it.

Turn off Alpha Lock on the
„hair” layer.

Use the blue, pink and yellow
colors to draw some short, bright strokes, imitating
shaved hair. Also refine the hair’s roots a little bit using
the Eraser Tool.

Step 3

Now we need
to make a shadow for the
outer edges of the
hairstyle. Take the Selection Tool,
and select the area of the hairstyle you want
to make a little darker.

Then tap Transform, swipe down with three fingers,
and the menu will appear. Choose Copy + Paste, and you’ll get this shape on a new
layer.

Tap
the Adjustments icon and choose Hue, Saturation, Brightness from the drop-down list. Move the sliders to the left until you get the desired result.

In
the end, make the edges softer using the Eraser Tool.

use adjustments for the shadow

refine the shadows

Step 4

Let’s make the middle part of the
hairstyle a little brighter.

Select the area using the Selection Tool, tap Transform,
and Copy + Paste this shape to a new layer.

Go
to Adjustments > Hue, Saturation, Brightness, and move
the Saturation and Brightness sliders a little bit to the right.

use adjustments for the highlights

Once
we’re happy with the result, we can merge these layers.

Step 5

Let’s add some single
strands of hair for an element of realism.

Create a New Layer for the tiny details on top of the „lines”
first. Then
pick the 6B Pencil, and draw separate
thin hairs using adjacent colors.

In the end, add some gloss to these hairs.

6. How to Add Volume and Texture to the Outfit

Step 1

Let’s start on the t-shirt.

First, lock in the „t-shirt” layer by activating Alpha Lock.

Take the Selection tool, and
select the lightest area of the t-shirt. Use a big size of the Soft Pastel brush and some bluish tints to
add large shapes of the highlights.

use the selection tool for the highlights

Make the edges of the highlight’s shape softer using the Eraser Tool. Also draw some
dark shadows and bright highlights, using the deep blue and soft blue-grey
colors respectively. Play around with the Opacity where possible.

Now let’s distress this
punk t-shirt by adding holes.

Turn off Alpha Lock on the layer
first.

Then
use the Eraser Tool to make some holes in the fabric. Decorate
them with tiny threads. In the end, make this t-shirt a little bit more shabby
by adding some scratches to the fabric.

Step 2

Now we’ll draw the skull print on the t-shirt.

Lock the „skull” layer by
activating Alpha Lock.

Using the Nikko Rull brush,
add some blue and green textured
strokes to the skull. Then, using the basic color
from the jacket, add some
falling shadows from the collar on both sides of the t-shirt.

Lower the intensity
of the pattern by reducing the Opacity of
the layer to 75%.

Step 3

It’s time to add some volume to the jacket. Activate the Alpha Lock on this
layer as we did before.

We’ll use
the Selection Tool as a more
convenient method to add shadows and
highlights to the certain areas. Tap the + or – symbols on the bottom toolbar
to add the
selected areas to each other, or subtract them accordingly.

Choose
the color from the outlines and the Soft Pastel brush to add some shadows to
the jacket. Then use the Color Picker tool to make some smooth transitions from the shadows on the base of the jacket.

Step 4

Now let’s add a leather texture to the jacket.

First, apply Select to the „jacket” layer, and create a New Layer for the texture on top of it.

Choose a new Old Skin brush from the Touchups set.

Set
the Brush Size to 100%, pick the color from the lines, and cover the whole surface
of the jacket with the texture. Just drive the
brush back and forth across the area without lifting the stylus off the
surface.

Change the Blending Mode of this layer
to Multiply, and drop the Opacity to 70%.

Create
a New Layer again for the highlight texture. Keep the „jacket” layer selected. Pick a pale lilac-blue
color, and add some highlights using the same Old Skin brush.

Step 5

Create
a New Layer for the highlights.

Pick the Soft Pastel brush again, and draw some bright highlights using the same pale lilac-blue color. Change the Brush
Size in the process. Add some large strokes and tiny details to get an imitation
of leather.

Reduce the Opacity of the layer to about 75%.

Step 6

Let’s add some necessary details.

First,
create a New Layer for
reflections. Now
eye-drop the colors from the skin and t-shirt and
draw some shapes of reflections, mostly along the inner parts of the collar. Use
the Soft Pastel brush with 60% Opacity.

Also, add some soft atmospheric
pink light from the background to the outer edge of the jacket.

Create a New Layer again for the
glare.

Draw some bright highlights and gloss using a pale grey
color. It’s a very easy way to get the effect of shining leather.

In the end, add
some scratches to the jacket’s surface.

Step 7

For a
convenient work process, let’s create a Layers
Folder or Group with
all the jacket layers.

Drag
these layers from left to right to
select them. Then tap the lines in the top right, and you’ll get a New Group.
Rename it „jacket”.

You can open or close this folder—just tap the little arrow in
front of the group name.

Step 8

Let’s move to the silver earrings and rivets.

Apply Alpha Lock to
the „accessories” layer. Use dark purple-blue tints to
draw the shadows
and lilac-blue
color for the highlights. Also add some metal gloss to these details.

draw the silver rivets

In the end, add some reflections from the nearby
objects such as the skin, hair, and background.

Step 9

This way, we’ll add
some volume to the last earring and the badges. Don’t be afraid to use bold colors for the highlights and reflections.

draw the badge

Step 10

Let’s refine the whole image a little bit. Add more pink backlight to the edges of the collar and
the hairstyle to fit your character into the background better.

And here’s what we’ve got!

7. How to Create an Abstract Background

Step 1

We already have the basic dark purple color
on our default background layer. Let’s make it a little bit darker.

Then reduce the Opacity of the „background” layer to about 40%.
It will serve as a substrate in adding some texture to the background.

change the opacity of the backgrounds shape

Step 2

Let’s add some texture and a pattern to give your image more of a grunge style.

Create a New Layer on
top of „background”, and rename it „texture”.

Pick a new brush, Rad, from the Retro set
and the same saturated pink color to add a pattern to the background. Feel free to place them in whatever manner you find
best.

Reduce the Opacity of
the layer to about 75%.

choose the brush for the backgrounds pattern

draw the backgrounds pattern

This way, add some
blue spots on the New Layer as well.

We’re Finished!

I like this punk-rock style so much!

It
was a time-consuming process, but at the same time, it’s very interesting.

Thank
you for creating and experimenting with me. Enjoy and share your result!

Want more tutorials on learning Procreate? Why not check out these:

Web Tools

How to Create a Punk-Rock Portrait in Procreate

24/08/2018 admin

Post pobrano z: How to Create a Punk-Rock Portrait in Procreate

In this tutorial, I’ll be using an iPad Pro with the Apple Pencil and Procreate 4. I’ll also guide you through my painting techniques and the process of developing a masculine portrait.

Let’s start!

1. How to Make a Sketch

Step 1

Step 2

I start the process by gathering the reference materials for my masculine punk character, collecting images with some attributes
inherent to this style.

Step 3

Open the Layers panel, tap „Layer 2”,
and rename it „sketch”. Choose any color you like from the Color menu in the top right
corner.

Step 4

The references are collected and the brush and color are selected, so now it’s time to create the sketch!

You can
rotate the canvas in the process for convenience. Just use two fingers and rotate your
image or size it.

Also, you can change the Size and Opacity of
any Brush tool by moving the
sliders on the left side of the screen up and down.

2. How to Create the Line Art

Step 1

First, open the Layers menu, tap N on
the „sketch” layer, and lower the Opacity to about 30%.

Then
create a New Layer for your line art on
top of the „sketch” layer.

Step 2

Let’s create
a New Ink Brush for our line work.

First, choose the Inking set, and tap the + icon
in the top-right corner of the brush list to create your New Brush.
The menu with sources will appear.

For the Shape, tap Swap from Pro Library and
choose Ink 2. For
the Grain, tap Swap from Pro Library and choose
the Recycled Paper texture.

pick sources for the brush

Rename it „New ink brush”, and use the brush settings shown below.

apply the new brush settings

Step 3

Let’s make a few trial lines with our new brush,
so we can sense the lines. The
thickness of the line depends on how hard you press with the pencil.

Then tap on the „lines” layer and select Clear from the drop-down list to delete your trial
lines. Now we can start our line art on the clean layer.

Step 4

We’re ready to start creating our line art.

First, let’s pick the color for the lines. Choose a deep blue-gray
color from the Colors menu, avoiding black for
a softer look.

Just go to Actions > Canvas >
Flip canvas horizontally as shown below.

Step 5

Set the brush Size to
about 5-10% with 100% Opacity.

If you feel
the lines are thicker or thinner than you would like them, you can always change their Weight by moving the Brush Size slider on the left side of the
screen up or down.

Step 6

Now let’s draw the outfit: jacket,
t-shirt, and rock collar.

Don’t think
about any details on this stage—just draw the main objects of your character’s outfit.

Let’s add
some necessary details to the outfit.

Create more rivets using the same principle.

Finish the decoration of the jacket by adding more rivets, buttons, pins, and badges.

Step 7

I noticed
that the rock collar is too low on the neck. But we can fix it easily.

use the Transform tool

In the end, decorate the t-shirt
with a skull drawing.

Step 8

Now let’s draw the hairstyle. Create the solid shapes first, making just the main lines. Then add some details
made of very thin lines.

At once, use the same brush to add some volume and deep contrast shadows to the
hairstyle.

Make the
“sketch” layer invisible and admire the result of the line art.

3. How to Create the Main Shapes

Step 1

Let’s start by filling the background with some basic color.

Pick the Charcoal Block brush from the Charcoals set, and modify it by
changing the Size Limit to about 160%.

Now create a New Layer under
the „lines” layer.

Choose pink, and draw the main shape of the background pattern following
the sketch. We can change this
color as necessary later.

Step 2

We can keep all the
colors that we will pick up in the process by creating a Palette of basic colors.

We have the Colors menu in the top right
corner, where we can select the color.

Click on the + icon to Create a New
Palette, and a new area with empty boxes for our new palette will appear.
Rename it „Punk-rock”.

Let’s add the pink
from the background first.
Pick the color and tap on any of the empty boxes, and it saves it.

Further
fill these boxes with selected colors to create your own palette.

Step 3

Create
a New Layer and
pick a beige color for the skin tone.

Now let’s
find a suitable brush for the
painting. My favorite is the Soft Pastel brush from the Sketching set.

brush settings

Use the Max Size of the brush and fill the
face and neck with color. Clean the area around the body using the Eraser
Tool. Choose the Soft Pastel brush as an
eraser as well.

Add
this skin tone color to your Palette.

Step 4

Now let’s find
another cool brush for the jacket.

Go to Brushes > Painting > Nikko Rull,
and change the Size Limit to about 470%.

Set the brush Size to
about 70% with 100% Opacity. Pick a dark
violet color and draw large strokes to cover the whole area of the jacket shape. Add this color to your Palette.

Now we need
to clean the area outside of the lines. We
can use the Eraser Tool, as we did before. But in this case I find
the Selection Tool is a more convenient method.

In
the end, refine the edges using the Eraser
Tool.

Step 5

Create new layers for each
group of objects, and fill them with colors using the Soft
Pastel brush.

Organize the layers as shown in the screenshot below.

Step 6

Let’s set the background color by tapping the
„Background color” layer, which we already have by default. Select a
dark blue color on the Color menu.

Now
we need to change the color of our background shape and make it more saturated. It allows us to create a good range of
contrast and make the character more expressive.

First select the layer, and then tap the Adjustments icon
and choose Hue, Saturation, Brightness from
the drop-down list. Move the sliders
until you get the desired result.

4. How to Add Shadows and Highlights

Step 1

Let’s start by adding some volume to the face.

Tap on the „skin” layer and
select Alpha Lock from the drop-down list. It will help us to
paint inside the body shape without crossing this area.

Now select a peach color and choose the Soft Pastel brush from the Sketching set. I like using
this brush because of the softness and texture, and it also makes the painting look
more realistic.

Start
building the basic shapes of the face and neck with very large
brush strokes and defining the character’s facial features.

Then
create some subtle shadows using a light brown color to show the volume more clearly. You can vary the
brush Size in the process as you like.

Step 2

This way, add some basic
shadows by making strokes on the shadowy area. Use the Bordeaux color for them.

Then
add a little contrast to the face.
Choose the dark blue-grey color and add some deeper shadows to the eyes, nose, ear, neck, and hair growth line.

Step 3

Create a New Layer for the highlights on top of the „skin”
layer.

Select a lighter cold tint starting from the base skin color, and paint some
highlight strokes using the same Soft Pastel brush. Reduce the Opacity of the layer to about 65%.

Let’s refine the skin a little bit,
correcting the roughness of the skin and improving the shape of his face
and neck. Also add some volume to the eyes and lips.

Use the Color Picker Button to
select the color you need. You can find this button between the Size and Opacity sliders.

Step 4

Once we’re happy with the volume of the face, let’s add some colors to make the skin more natural and bring some life to it.

Create a New Layer on top of the
„skin”, and rename it „color
zone”.

First select the
„skin” layer. Just tap on the layer and choose Select from
the drop-down list. It will allow us to draw on the „color zone” layer just inside the body
shape.

Now we need to add
some variation in color to the face: yellow tones to the forehead and neck,
reddish tones to the cheeks, nose and ear, and blue tones underneath the eyes
and around the chin.

Change the Blending Mode of
this layer to Multiply. Reduce the Opacity to about 20%. You can play around
with the Opacity until you’re happy with how it looks.

Step 5

Create a New Layer for the bristle on top of the „color zone” layer.

Keeping
the „skin” layer selected, draw large brush strokes on the head and
chin. Use the same Soft
Pastel brush and a deep
blue color. Refine the edges using the Eraser Tool.

In
the end, change the Blending Mode to Hard Light to add saturated colors and
darken areas simultaneously.

Step 6

Let’s add some freckles to make the skin more natural.

Create a New Layer on top of
the „skin”, and rename it „freckles”. Choose the Flicks brush from the Spraypaints set and
pick the Bordeaux color.

Using the same color and the Soft Pastel brush, add some freckles and moles randomly to the nose, cheeks, and neck.
Vary the brush Size around 5–15% in the
process.

In the end, let’s draw some falling shadows
from the hair.

Create a New Layer for them on
top of the „skin”. Add some dark blue shadows
to the forehead under the fringe and to the face under the beard.

5. How to Create a Vibrant Hairstyle

Step 1

Let’s start forming the hairstyle.

First, lock the „hair” layer by activating Alpha
Lock.

Use the Soft Pastel brush to add some large green and pink shapes to the hairstyle.

Draw some deep blue strokes on the roots of the hair and on the
shadowy area of the locks.

Then
use a very saturated green colour and mix it with the pink and blue, creating
some interesting effects.

We
don’t paint every strand individually at this stage, but cluster and form
groups.

Now
eye-drop the colors from the skin to the very roots of the hair, and make some smooth color transitions from the skin to the hair.

Then
create some volume by adding some saturated blue color.

Step 2

Turn off Alpha Lock on the
„hair” layer.

Use the blue, pink and yellow
colors to draw some short, bright strokes, imitating
shaved hair. Also refine the hair’s roots a little bit using
the Eraser Tool.

Step 3

Now we need
to make a shadow for the
outer edges of the
hairstyle. Take the Selection Tool,
and select the area of the hairstyle you want
to make a little darker.

Then tap Transform, swipe down with three fingers,
and the menu will appear. Choose Copy + Paste, and you’ll get this shape on a new
layer.

Tap
the Adjustments icon and choose Hue, Saturation, Brightness from the drop-down list. Move the sliders to the left until you get the desired result.

In
the end, make the edges softer using the Eraser Tool.

use adjustments for the shadow

refine the shadows

Step 4

Let’s make the middle part of the
hairstyle a little brighter.

Select the area using the Selection Tool, tap Transform,
and Copy + Paste this shape to a new layer.

Go
to Adjustments > Hue, Saturation, Brightness, and move
the Saturation and Brightness sliders a little bit to the right.

use adjustments for the highlights

Once
we’re happy with the result, we can merge these layers.

Step 5

Let’s add some single
strands of hair for an element of realism.

Create a New Layer for the tiny details on top of the „lines”
first. Then
pick the 6B Pencil, and draw separate
thin hairs using adjacent colors.

In the end, add some gloss to these hairs.

6. How to Add Volume and Texture to the Outfit

Step 1

Let’s start on the t-shirt.

First, lock in the „t-shirt” layer by activating Alpha Lock.

Take the Selection tool, and
select the lightest area of the t-shirt. Use a big size of the Soft Pastel brush and some bluish tints to
add large shapes of the highlights.

Now let’s distress this
punk t-shirt by adding holes.

Turn off Alpha Lock on the layer
first.

Then
use the Eraser Tool to make some holes in the fabric. Decorate
them with tiny threads. In the end, make this t-shirt a little bit more shabby
by adding some scratches to the fabric.

Step 2

Now we’ll draw the skull print on the t-shirt.

Lock the „skull” layer by
activating Alpha Lock.

Lower the intensity
of the pattern by reducing the Opacity of
the layer to 75%.

Step 3

It’s time to add some volume to the jacket. Activate the Alpha Lock on this
layer as we did before.

Step 4

Now let’s add a leather texture to the jacket.

First, apply Select to the „jacket” layer, and create a New Layer for the texture on top of it.

Choose a new Old Skin brush from the Touchups set.

Change the Blending Mode of this layer
to Multiply, and drop the Opacity to 70%.

Create
a New Layer again for the highlight texture. Keep the „jacket” layer selected. Pick a pale lilac-blue
color, and add some highlights using the same Old Skin brush.

Step 5

Create
a New Layer for the highlights.

Reduce the Opacity of the layer to about 75%.

Step 6

Let’s add some necessary details.

Also, add some soft atmospheric
pink light from the background to the outer edge of the jacket.

Create a New Layer again for the
glare.

Draw some bright highlights and gloss using a pale grey
color. It’s a very easy way to get the effect of shining leather.

In the end, add
some scratches to the jacket’s surface.

Step 7

For a
convenient work process, let’s create a Layers
Folder or Group with
all the jacket layers.

Drag
these layers from left to right to
select them. Then tap the lines in the top right, and you’ll get a New Group.
Rename it „jacket”.

You can open or close this folder—just tap the little arrow in
front of the group name.

Step 8

Let’s move to the silver earrings and rivets.

Apply Alpha Lock to
the „accessories” layer. Use dark purple-blue tints to
draw the shadows
and lilac-blue
color for the highlights. Also add some metal gloss to these details.

draw the silver rivets

In the end, add some reflections from the nearby
objects such as the skin, hair, and background.

Step 9

This way, we’ll add
some volume to the last earring and the badges. Don’t be afraid to use bold colors for the highlights and reflections.

draw the badge

Step 10

Let’s refine the whole image a little bit. Add more pink backlight to the edges of the collar and
the hairstyle to fit your character into the background better.

And here’s what we’ve got!

7. How to Create an Abstract Background

Step 1

We already have the basic dark purple color
on our default background layer. Let’s make it a little bit darker.

Then reduce the Opacity of the „background” layer to about 40%.
It will serve as a substrate in adding some texture to the background.

Step 2

Let’s add some texture and a pattern to give your image more of a grunge style.

Create a New Layer on
top of „background”, and rename it „texture”.

Pick a new brush, Rad, from the Retro set
and the same saturated pink color to add a pattern to the background. Feel free to place them in whatever manner you find
best.

Reduce the Opacity of
the layer to about 75%.

draw the backgrounds pattern

This way, add some
blue spots on the New Layer as well.

We’re Finished!

I like this punk-rock style so much!

It
was a time-consuming process, but at the same time, it’s very interesting.

Thank
you for creating and experimenting with me. Enjoy and share your result!

Want more tutorials on learning Procreate? Why not check out these:

Web Tools

How to Create a Punk-Rock Portrait in Procreate

24/08/2018 admin

Post pobrano z: How to Create a Punk-Rock Portrait in Procreate

In this tutorial, I’ll be using an iPad Pro with the Apple Pencil and Procreate 4. I’ll also guide you through my painting techniques and the process of developing a masculine portrait.

Let’s start!

1. How to Make a Sketch

Step 1

Step 2

I start the process by gathering the reference materials for my masculine punk character, collecting images with some attributes
inherent to this style.

Step 3

Open the Layers panel, tap „Layer 2”,
and rename it „sketch”. Choose any color you like from the Color menu in the top right
corner.

Step 4

The references are collected and the brush and color are selected, so now it’s time to create the sketch!

You can
rotate the canvas in the process for convenience. Just use two fingers and rotate your
image or size it.

Also, you can change the Size and Opacity of
any Brush tool by moving the
sliders on the left side of the screen up and down.

2. How to Create the Line Art

Step 1

First, open the Layers menu, tap N on
the „sketch” layer, and lower the Opacity to about 30%.

Then
create a New Layer for your line art on
top of the „sketch” layer.

Step 2

Let’s create
a New Ink Brush for our line work.

First, choose the Inking set, and tap the + icon
in the top-right corner of the brush list to create your New Brush.
The menu with sources will appear.

For the Shape, tap Swap from Pro Library and
choose Ink 2. For
the Grain, tap Swap from Pro Library and choose
the Recycled Paper texture.

pick sources for the brush

Rename it „New ink brush”, and use the brush settings shown below.

apply the new brush settings

Step 3

Let’s make a few trial lines with our new brush,
so we can sense the lines. The
thickness of the line depends on how hard you press with the pencil.

Then tap on the „lines” layer and select Clear from the drop-down list to delete your trial
lines. Now we can start our line art on the clean layer.

Step 4

We’re ready to start creating our line art.

First, let’s pick the color for the lines. Choose a deep blue-gray
color from the Colors menu, avoiding black for
a softer look.

Just go to Actions > Canvas >
Flip canvas horizontally as shown below.

Step 5

Set the brush Size to
about 5-10% with 100% Opacity.

If you feel
the lines are thicker or thinner than you would like them, you can always change their Weight by moving the Brush Size slider on the left side of the
screen up or down.

Step 6

Now let’s draw the outfit: jacket,
t-shirt, and rock collar.

Don’t think
about any details on this stage—just draw the main objects of your character’s outfit.

Let’s add
some necessary details to the outfit.

Create more rivets using the same principle.

Finish the decoration of the jacket by adding more rivets, buttons, pins, and badges.

Step 7

I noticed
that the rock collar is too low on the neck. But we can fix it easily.

use the Transform tool

In the end, decorate the t-shirt
with a skull drawing.

Step 8

Now let’s draw the hairstyle. Create the solid shapes first, making just the main lines. Then add some details
made of very thin lines.

At once, use the same brush to add some volume and deep contrast shadows to the
hairstyle.

Make the
“sketch” layer invisible and admire the result of the line art.

3. How to Create the Main Shapes

Step 1

Let’s start by filling the background with some basic color.

Pick the Charcoal Block brush from the Charcoals set, and modify it by
changing the Size Limit to about 160%.

Now create a New Layer under
the „lines” layer.

Choose pink, and draw the main shape of the background pattern following
the sketch. We can change this
color as necessary later.

Step 2

We can keep all the
colors that we will pick up in the process by creating a Palette of basic colors.

We have the Colors menu in the top right
corner, where we can select the color.

Click on the + icon to Create a New
Palette, and a new area with empty boxes for our new palette will appear.
Rename it „Punk-rock”.

Let’s add the pink
from the background first.
Pick the color and tap on any of the empty boxes, and it saves it.

Further
fill these boxes with selected colors to create your own palette.

Step 3

Create
a New Layer and
pick a beige color for the skin tone.

Now let’s
find a suitable brush for the
painting. My favorite is the Soft Pastel brush from the Sketching set.

brush settings

Use the Max Size of the brush and fill the
face and neck with color. Clean the area around the body using the Eraser
Tool. Choose the Soft Pastel brush as an
eraser as well.

Add
this skin tone color to your Palette.

Step 4

Now let’s find
another cool brush for the jacket.

Go to Brushes > Painting > Nikko Rull,
and change the Size Limit to about 470%.

Set the brush Size to
about 70% with 100% Opacity. Pick a dark
violet color and draw large strokes to cover the whole area of the jacket shape. Add this color to your Palette.

Now we need
to clean the area outside of the lines. We
can use the Eraser Tool, as we did before. But in this case I find
the Selection Tool is a more convenient method.

In
the end, refine the edges using the Eraser
Tool.

Step 5

Create new layers for each
group of objects, and fill them with colors using the Soft
Pastel brush.

Organize the layers as shown in the screenshot below.

Step 6

Let’s set the background color by tapping the
„Background color” layer, which we already have by default. Select a
dark blue color on the Color menu.

Now
we need to change the color of our background shape and make it more saturated. It allows us to create a good range of
contrast and make the character more expressive.

First select the layer, and then tap the Adjustments icon
and choose Hue, Saturation, Brightness from
the drop-down list. Move the sliders
until you get the desired result.

4. How to Add Shadows and Highlights

Step 1

Let’s start by adding some volume to the face.

Tap on the „skin” layer and
select Alpha Lock from the drop-down list. It will help us to
paint inside the body shape without crossing this area.

Now select a peach color and choose the Soft Pastel brush from the Sketching set. I like using
this brush because of the softness and texture, and it also makes the painting look
more realistic.

Start
building the basic shapes of the face and neck with very large
brush strokes and defining the character’s facial features.

Then
create some subtle shadows using a light brown color to show the volume more clearly. You can vary the
brush Size in the process as you like.

Step 2

This way, add some basic
shadows by making strokes on the shadowy area. Use the Bordeaux color for them.

Then
add a little contrast to the face.
Choose the dark blue-grey color and add some deeper shadows to the eyes, nose, ear, neck, and hair growth line.

Step 3

Create a New Layer for the highlights on top of the „skin”
layer.

Select a lighter cold tint starting from the base skin color, and paint some
highlight strokes using the same Soft Pastel brush. Reduce the Opacity of the layer to about 65%.

Let’s refine the skin a little bit,
correcting the roughness of the skin and improving the shape of his face
and neck. Also add some volume to the eyes and lips.

Use the Color Picker Button to
select the color you need. You can find this button between the Size and Opacity sliders.

Step 4

Once we’re happy with the volume of the face, let’s add some colors to make the skin more natural and bring some life to it.

Create a New Layer on top of the
„skin”, and rename it „color
zone”.

First select the
„skin” layer. Just tap on the layer and choose Select from
the drop-down list. It will allow us to draw on the „color zone” layer just inside the body
shape.

Now we need to add
some variation in color to the face: yellow tones to the forehead and neck,
reddish tones to the cheeks, nose and ear, and blue tones underneath the eyes
and around the chin.

Change the Blending Mode of
this layer to Multiply. Reduce the Opacity to about 20%. You can play around
with the Opacity until you’re happy with how it looks.

Step 5

Create a New Layer for the bristle on top of the „color zone” layer.

Keeping
the „skin” layer selected, draw large brush strokes on the head and
chin. Use the same Soft
Pastel brush and a deep
blue color. Refine the edges using the Eraser Tool.

In
the end, change the Blending Mode to Hard Light to add saturated colors and
darken areas simultaneously.

Step 6

Let’s add some freckles to make the skin more natural.

Create a New Layer on top of
the „skin”, and rename it „freckles”. Choose the Flicks brush from the Spraypaints set and
pick the Bordeaux color.

Using the same color and the Soft Pastel brush, add some freckles and moles randomly to the nose, cheeks, and neck.
Vary the brush Size around 5–15% in the
process.

In the end, let’s draw some falling shadows
from the hair.

Create a New Layer for them on
top of the „skin”. Add some dark blue shadows
to the forehead under the fringe and to the face under the beard.

5. How to Create a Vibrant Hairstyle

Step 1

Let’s start forming the hairstyle.

First, lock the „hair” layer by activating Alpha
Lock.

Use the Soft Pastel brush to add some large green and pink shapes to the hairstyle.

Draw some deep blue strokes on the roots of the hair and on the
shadowy area of the locks.

Then
use a very saturated green colour and mix it with the pink and blue, creating
some interesting effects.

We
don’t paint every strand individually at this stage, but cluster and form
groups.

Now
eye-drop the colors from the skin to the very roots of the hair, and make some smooth color transitions from the skin to the hair.

Then
create some volume by adding some saturated blue color.

Step 2

Turn off Alpha Lock on the
„hair” layer.

Use the blue, pink and yellow
colors to draw some short, bright strokes, imitating
shaved hair. Also refine the hair’s roots a little bit using
the Eraser Tool.

Step 3

Now we need
to make a shadow for the
outer edges of the
hairstyle. Take the Selection Tool,
and select the area of the hairstyle you want
to make a little darker.

Then tap Transform, swipe down with three fingers,
and the menu will appear. Choose Copy + Paste, and you’ll get this shape on a new
layer.

Tap
the Adjustments icon and choose Hue, Saturation, Brightness from the drop-down list. Move the sliders to the left until you get the desired result.

In
the end, make the edges softer using the Eraser Tool.

use adjustments for the shadow

refine the shadows

Step 4

Let’s make the middle part of the
hairstyle a little brighter.

Select the area using the Selection Tool, tap Transform,
and Copy + Paste this shape to a new layer.

Go
to Adjustments > Hue, Saturation, Brightness, and move
the Saturation and Brightness sliders a little bit to the right.

use adjustments for the highlights

Once
we’re happy with the result, we can merge these layers.

Step 5

Let’s add some single
strands of hair for an element of realism.

Create a New Layer for the tiny details on top of the „lines”
first. Then
pick the 6B Pencil, and draw separate
thin hairs using adjacent colors.

In the end, add some gloss to these hairs.

6. How to Add Volume and Texture to the Outfit

Step 1

Let’s start on the t-shirt.

First, lock in the „t-shirt” layer by activating Alpha Lock.

Take the Selection tool, and
select the lightest area of the t-shirt. Use a big size of the Soft Pastel brush and some bluish tints to
add large shapes of the highlights.

Now let’s distress this
punk t-shirt by adding holes.

Turn off Alpha Lock on the layer
first.

Then
use the Eraser Tool to make some holes in the fabric. Decorate
them with tiny threads. In the end, make this t-shirt a little bit more shabby
by adding some scratches to the fabric.

Step 2

Now we’ll draw the skull print on the t-shirt.

Lock the „skull” layer by
activating Alpha Lock.

Lower the intensity
of the pattern by reducing the Opacity of
the layer to 75%.

Step 3

It’s time to add some volume to the jacket. Activate the Alpha Lock on this
layer as we did before.

Step 4

Now let’s add a leather texture to the jacket.

First, apply Select to the „jacket” layer, and create a New Layer for the texture on top of it.

Choose a new Old Skin brush from the Touchups set.

Change the Blending Mode of this layer
to Multiply, and drop the Opacity to 70%.

Create
a New Layer again for the highlight texture. Keep the „jacket” layer selected. Pick a pale lilac-blue
color, and add some highlights using the same Old Skin brush.

Step 5

Create
a New Layer for the highlights.

Reduce the Opacity of the layer to about 75%.

Step 6

Let’s add some necessary details.

Also, add some soft atmospheric
pink light from the background to the outer edge of the jacket.

Create a New Layer again for the
glare.

Draw some bright highlights and gloss using a pale grey
color. It’s a very easy way to get the effect of shining leather.

In the end, add
some scratches to the jacket’s surface.

Step 7

For a
convenient work process, let’s create a Layers
Folder or Group with
all the jacket layers.

Drag
these layers from left to right to
select them. Then tap the lines in the top right, and you’ll get a New Group.
Rename it „jacket”.

You can open or close this folder—just tap the little arrow in
front of the group name.

Step 8

Let’s move to the silver earrings and rivets.

Apply Alpha Lock to
the „accessories” layer. Use dark purple-blue tints to
draw the shadows
and lilac-blue
color for the highlights. Also add some metal gloss to these details.

draw the silver rivets

In the end, add some reflections from the nearby
objects such as the skin, hair, and background.

Step 9

This way, we’ll add
some volume to the last earring and the badges. Don’t be afraid to use bold colors for the highlights and reflections.

draw the badge

Step 10

Let’s refine the whole image a little bit. Add more pink backlight to the edges of the collar and
the hairstyle to fit your character into the background better.

And here’s what we’ve got!

7. How to Create an Abstract Background

Step 1

We already have the basic dark purple color
on our default background layer. Let’s make it a little bit darker.

Then reduce the Opacity of the „background” layer to about 40%.
It will serve as a substrate in adding some texture to the background.

Step 2

Let’s add some texture and a pattern to give your image more of a grunge style.

Create a New Layer on
top of „background”, and rename it „texture”.

Pick a new brush, Rad, from the Retro set
and the same saturated pink color to add a pattern to the background. Feel free to place them in whatever manner you find
best.

Reduce the Opacity of
the layer to about 75%.

draw the backgrounds pattern

This way, add some
blue spots on the New Layer as well.

We’re Finished!

I like this punk-rock style so much!

It
was a time-consuming process, but at the same time, it’s very interesting.

Thank
you for creating and experimenting with me. Enjoy and share your result!

Want more tutorials on learning Procreate? Why not check out these:

Web Tools

How to Create a Punk-Rock Portrait in Procreate

24/08/2018 admin

Post pobrano z: How to Create a Punk-Rock Portrait in Procreate

In this tutorial, I’ll be using an iPad Pro with the Apple Pencil and Procreate 4. I’ll also guide you through my painting techniques and the process of developing a masculine portrait.

Let’s start!

1. How to Make a Sketch

Step 1

Step 2

I start the process by gathering the reference materials for my masculine punk character, collecting images with some attributes
inherent to this style.

Step 3

Open the Layers panel, tap „Layer 2”,
and rename it „sketch”. Choose any color you like from the Color menu in the top right
corner.

Step 4

The references are collected and the brush and color are selected, so now it’s time to create the sketch!

You can
rotate the canvas in the process for convenience. Just use two fingers and rotate your
image or size it.

Also, you can change the Size and Opacity of
any Brush tool by moving the
sliders on the left side of the screen up and down.

2. How to Create the Line Art

Step 1

First, open the Layers menu, tap N on
the „sketch” layer, and lower the Opacity to about 30%.

Then
create a New Layer for your line art on
top of the „sketch” layer.

Step 2

Let’s create
a New Ink Brush for our line work.

First, choose the Inking set, and tap the + icon
in the top-right corner of the brush list to create your New Brush.
The menu with sources will appear.

For the Shape, tap Swap from Pro Library and
choose Ink 2. For
the Grain, tap Swap from Pro Library and choose
the Recycled Paper texture.

pick sources for the brush

Rename it „New ink brush”, and use the brush settings shown below.

apply the new brush settings

Step 3

Let’s make a few trial lines with our new brush,
so we can sense the lines. The
thickness of the line depends on how hard you press with the pencil.

Then tap on the „lines” layer and select Clear from the drop-down list to delete your trial
lines. Now we can start our line art on the clean layer.

Step 4

We’re ready to start creating our line art.

First, let’s pick the color for the lines. Choose a deep blue-gray
color from the Colors menu, avoiding black for
a softer look.

Just go to Actions > Canvas >
Flip canvas horizontally as shown below.

Step 5

Set the brush Size to
about 5-10% with 100% Opacity.

If you feel
the lines are thicker or thinner than you would like them, you can always change their Weight by moving the Brush Size slider on the left side of the
screen up or down.

Step 6

Now let’s draw the outfit: jacket,
t-shirt, and rock collar.

Don’t think
about any details on this stage—just draw the main objects of your character’s outfit.

Let’s add
some necessary details to the outfit.

Create more rivets using the same principle.

Finish the decoration of the jacket by adding more rivets, buttons, pins, and badges.

Step 7

I noticed
that the rock collar is too low on the neck. But we can fix it easily.

use the Transform tool

In the end, decorate the t-shirt
with a skull drawing.

Step 8

Now let’s draw the hairstyle. Create the solid shapes first, making just the main lines. Then add some details
made of very thin lines.

At once, use the same brush to add some volume and deep contrast shadows to the
hairstyle.

Make the
“sketch” layer invisible and admire the result of the line art.

3. How to Create the Main Shapes

Step 1

Let’s start by filling the background with some basic color.

Pick the Charcoal Block brush from the Charcoals set, and modify it by
changing the Size Limit to about 160%.

Now create a New Layer under
the „lines” layer.

Choose pink, and draw the main shape of the background pattern following
the sketch. We can change this
color as necessary later.

Step 2

We can keep all the
colors that we will pick up in the process by creating a Palette of basic colors.

We have the Colors menu in the top right
corner, where we can select the color.

Click on the + icon to Create a New
Palette, and a new area with empty boxes for our new palette will appear.
Rename it „Punk-rock”.

Let’s add the pink
from the background first.
Pick the color and tap on any of the empty boxes, and it saves it.

Further
fill these boxes with selected colors to create your own palette.

Step 3

Create
a New Layer and
pick a beige color for the skin tone.

Now let’s
find a suitable brush for the
painting. My favorite is the Soft Pastel brush from the Sketching set.

brush settings

Use the Max Size of the brush and fill the
face and neck with color. Clean the area around the body using the Eraser
Tool. Choose the Soft Pastel brush as an
eraser as well.

Add
this skin tone color to your Palette.

Step 4

Now let’s find
another cool brush for the jacket.

Go to Brushes > Painting > Nikko Rull,
and change the Size Limit to about 470%.

Set the brush Size to
about 70% with 100% Opacity. Pick a dark
violet color and draw large strokes to cover the whole area of the jacket shape. Add this color to your Palette.

Now we need
to clean the area outside of the lines. We
can use the Eraser Tool, as we did before. But in this case I find
the Selection Tool is a more convenient method.

In
the end, refine the edges using the Eraser
Tool.

Step 5

Create new layers for each
group of objects, and fill them with colors using the Soft
Pastel brush.

Organize the layers as shown in the screenshot below.

Step 6

Let’s set the background color by tapping the
„Background color” layer, which we already have by default. Select a
dark blue color on the Color menu.

Now
we need to change the color of our background shape and make it more saturated. It allows us to create a good range of
contrast and make the character more expressive.

First select the layer, and then tap the Adjustments icon
and choose Hue, Saturation, Brightness from
the drop-down list. Move the sliders
until you get the desired result.

4. How to Add Shadows and Highlights

Step 1

Let’s start by adding some volume to the face.

Tap on the „skin” layer and
select Alpha Lock from the drop-down list. It will help us to
paint inside the body shape without crossing this area.

Now select a peach color and choose the Soft Pastel brush from the Sketching set. I like using
this brush because of the softness and texture, and it also makes the painting look
more realistic.

Start
building the basic shapes of the face and neck with very large
brush strokes and defining the character’s facial features.

Then
create some subtle shadows using a light brown color to show the volume more clearly. You can vary the
brush Size in the process as you like.

Step 2

This way, add some basic
shadows by making strokes on the shadowy area. Use the Bordeaux color for them.

Then
add a little contrast to the face.
Choose the dark blue-grey color and add some deeper shadows to the eyes, nose, ear, neck, and hair growth line.

Step 3

Create a New Layer for the highlights on top of the „skin”
layer.

Select a lighter cold tint starting from the base skin color, and paint some
highlight strokes using the same Soft Pastel brush. Reduce the Opacity of the layer to about 65%.

Let’s refine the skin a little bit,
correcting the roughness of the skin and improving the shape of his face
and neck. Also add some volume to the eyes and lips.

Use the Color Picker Button to
select the color you need. You can find this button between the Size and Opacity sliders.

Step 4

Once we’re happy with the volume of the face, let’s add some colors to make the skin more natural and bring some life to it.

Create a New Layer on top of the
„skin”, and rename it „color
zone”.

First select the
„skin” layer. Just tap on the layer and choose Select from
the drop-down list. It will allow us to draw on the „color zone” layer just inside the body
shape.

Now we need to add
some variation in color to the face: yellow tones to the forehead and neck,
reddish tones to the cheeks, nose and ear, and blue tones underneath the eyes
and around the chin.

Change the Blending Mode of
this layer to Multiply. Reduce the Opacity to about 20%. You can play around
with the Opacity until you’re happy with how it looks.

Step 5

Create a New Layer for the bristle on top of the „color zone” layer.

Keeping
the „skin” layer selected, draw large brush strokes on the head and
chin. Use the same Soft
Pastel brush and a deep
blue color. Refine the edges using the Eraser Tool.

In
the end, change the Blending Mode to Hard Light to add saturated colors and
darken areas simultaneously.

Step 6

Let’s add some freckles to make the skin more natural.

Create a New Layer on top of
the „skin”, and rename it „freckles”. Choose the Flicks brush from the Spraypaints set and
pick the Bordeaux color.

Using the same color and the Soft Pastel brush, add some freckles and moles randomly to the nose, cheeks, and neck.
Vary the brush Size around 5–15% in the
process.

In the end, let’s draw some falling shadows
from the hair.

Create a New Layer for them on
top of the „skin”. Add some dark blue shadows
to the forehead under the fringe and to the face under the beard.

5. How to Create a Vibrant Hairstyle

Step 1

Let’s start forming the hairstyle.

First, lock the „hair” layer by activating Alpha
Lock.

Use the Soft Pastel brush to add some large green and pink shapes to the hairstyle.

Draw some deep blue strokes on the roots of the hair and on the
shadowy area of the locks.

Then
use a very saturated green colour and mix it with the pink and blue, creating
some interesting effects.

We
don’t paint every strand individually at this stage, but cluster and form
groups.

Now
eye-drop the colors from the skin to the very roots of the hair, and make some smooth color transitions from the skin to the hair.

Then
create some volume by adding some saturated blue color.

Step 2

Turn off Alpha Lock on the
„hair” layer.

Use the blue, pink and yellow
colors to draw some short, bright strokes, imitating
shaved hair. Also refine the hair’s roots a little bit using
the Eraser Tool.

Step 3

Now we need
to make a shadow for the
outer edges of the
hairstyle. Take the Selection Tool,
and select the area of the hairstyle you want
to make a little darker.

Then tap Transform, swipe down with three fingers,
and the menu will appear. Choose Copy + Paste, and you’ll get this shape on a new
layer.

Tap
the Adjustments icon and choose Hue, Saturation, Brightness from the drop-down list. Move the sliders to the left until you get the desired result.

In
the end, make the edges softer using the Eraser Tool.

use adjustments for the shadow

refine the shadows

Step 4

Let’s make the middle part of the
hairstyle a little brighter.

Select the area using the Selection Tool, tap Transform,
and Copy + Paste this shape to a new layer.

Go
to Adjustments > Hue, Saturation, Brightness, and move
the Saturation and Brightness sliders a little bit to the right.

use adjustments for the highlights

Once
we’re happy with the result, we can merge these layers.

Step 5

Let’s add some single
strands of hair for an element of realism.

Create a New Layer for the tiny details on top of the „lines”
first. Then
pick the 6B Pencil, and draw separate
thin hairs using adjacent colors.

In the end, add some gloss to these hairs.

6. How to Add Volume and Texture to the Outfit

Step 1

Let’s start on the t-shirt.

First, lock in the „t-shirt” layer by activating Alpha Lock.

Take the Selection tool, and
select the lightest area of the t-shirt. Use a big size of the Soft Pastel brush and some bluish tints to
add large shapes of the highlights.

Now let’s distress this
punk t-shirt by adding holes.

Turn off Alpha Lock on the layer
first.

Then
use the Eraser Tool to make some holes in the fabric. Decorate
them with tiny threads. In the end, make this t-shirt a little bit more shabby
by adding some scratches to the fabric.

Step 2

Now we’ll draw the skull print on the t-shirt.

Lock the „skull” layer by
activating Alpha Lock.

Lower the intensity
of the pattern by reducing the Opacity of
the layer to 75%.

Step 3

It’s time to add some volume to the jacket. Activate the Alpha Lock on this
layer as we did before.

Step 4

Now let’s add a leather texture to the jacket.

First, apply Select to the „jacket” layer, and create a New Layer for the texture on top of it.

Choose a new Old Skin brush from the Touchups set.

Change the Blending Mode of this layer
to Multiply, and drop the Opacity to 70%.

Create
a New Layer again for the highlight texture. Keep the „jacket” layer selected. Pick a pale lilac-blue
color, and add some highlights using the same Old Skin brush.

Step 5

Create
a New Layer for the highlights.

Reduce the Opacity of the layer to about 75%.

Step 6

Let’s add some necessary details.

Also, add some soft atmospheric
pink light from the background to the outer edge of the jacket.

Create a New Layer again for the
glare.

Draw some bright highlights and gloss using a pale grey
color. It’s a very easy way to get the effect of shining leather.

In the end, add
some scratches to the jacket’s surface.

Step 7

For a
convenient work process, let’s create a Layers
Folder or Group with
all the jacket layers.

Drag
these layers from left to right to
select them. Then tap the lines in the top right, and you’ll get a New Group.
Rename it „jacket”.

You can open or close this folder—just tap the little arrow in
front of the group name.

Step 8

Let’s move to the silver earrings and rivets.

Apply Alpha Lock to
the „accessories” layer. Use dark purple-blue tints to
draw the shadows
and lilac-blue
color for the highlights. Also add some metal gloss to these details.

draw the silver rivets

In the end, add some reflections from the nearby
objects such as the skin, hair, and background.

Step 9

This way, we’ll add
some volume to the last earring and the badges. Don’t be afraid to use bold colors for the highlights and reflections.

draw the badge

Step 10

Let’s refine the whole image a little bit. Add more pink backlight to the edges of the collar and
the hairstyle to fit your character into the background better.

And here’s what we’ve got!

7. How to Create an Abstract Background

Step 1

We already have the basic dark purple color
on our default background layer. Let’s make it a little bit darker.

Then reduce the Opacity of the „background” layer to about 40%.
It will serve as a substrate in adding some texture to the background.

Step 2

Let’s add some texture and a pattern to give your image more of a grunge style.

Create a New Layer on
top of „background”, and rename it „texture”.

Pick a new brush, Rad, from the Retro set
and the same saturated pink color to add a pattern to the background. Feel free to place them in whatever manner you find
best.

Reduce the Opacity of
the layer to about 75%.

draw the backgrounds pattern

This way, add some
blue spots on the New Layer as well.

We’re Finished!

I like this punk-rock style so much!

It
was a time-consuming process, but at the same time, it’s very interesting.

Thank
you for creating and experimenting with me. Enjoy and share your result!

Want more tutorials on learning Procreate? Why not check out these:

CSS

Using CSS Clip Path to Create Interactive Effects, Part II

24/08/2018 admin Dodaj komentarz

Post pobrano z: Using CSS Clip Path to Create Interactive Effects, Part II

This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible.

One of the biggest drawbacks of CSS clipping, at the time of writing, is browser support. Not having 100% browser coverage means different experiences for viewers in different browsers. We, as developers, can’t control what browsers support — browser vendors are the ones who implement the spec and different vendors will have different agendas.

One thing we can do to overcome inconsistencies is use alternative technologies. The feature set of CSS and SVG sometimes overlap. What works in one may work in the other and vice versa. As it happens, the concept of clipping exists in both CSS and SVG. The SVG clipping syntax is quite different, but it works the same. The good thing about SVG clipping compared to CSS is its maturity level. Support is good all the way back to old IE browsers. Most bugs are fixed by now (or at least one hope they are).

This is what the SVG clipping support looks like:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Opera	Firefox	IE	Edge	Safari
4	9	3	9	12	3.2

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
3.2	10	all	4.4	67	60

Clipping as a transition

A neat use case for clipping is transition effects. Take The Silhouette Slideshow demo on CodePen:

See the Pen Silhouette zoom slideshow by Mikael Ainalem (@ainalem) on CodePen.

A „regular” slideshow cycles though images. Here, to make it a bit more interesting, there’s a clipping effect when switching images. The next image enters the screen through a silhouette of of the previous image. This creates the illusion that the images are connected to one another, even if they are not.

The transitions follow this process:

Identify the focal point (i.e., main subject) of the image
Create a clipping path for that object
Cut the next image with the path
The cut image (silhouette) fades in
Scale the clipping path until it’s bigger than the viewport
Complete the transition to display the next image
Repeat!

Let’s break down the sequence, starting with the first image. We’ll split this up into multiple pens so we can isolate each step.

<p data-height="300" data-theme- data-slug-hash="gzKxwR" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained I”>See the Pen Silhouette zoom slideshow explained I by Mikael Ainalem (@ainalem) on CodePen.

This is the basic structure of the SVG markup:

<svg>
  ...
  <image class="..." xlink:href="..." />
  ...
</svg>

For this image, we then want to create a mask of the focal point — in this case, the person’s silhouette. If you’re unsure how to go about creating a clip, check out my previous article for more details because, generally speaking, making cuts in CSS and SVG is fundamentally the same:

Import an image into the SVG editor
Draw a path around the object
Convert the path to the syntax for SVG clip path. This is what goes in the SVG’s <defs> block.
Paste the SVG markup into the HTML

If you’re handy with the editor, you can do most of the above in the editor. Most editors have good support for masks and clip paths. I like to have more control over the markup, so I usually do at least some of the work by hand. I find there’s a balance between working with an SVG editor vs. working with markup. For example, I like to organize the code, rename the classes and clean up any cruft the editor may have dropped in there.

Mozilla Developer Network does a fine job of documenting SVG clip paths. Here’s a stripped-down version of the markup used by the original demo to give you an idea of how a clip path fits in:

<svg>
  <defs>
    <clipPath id="clip"> <!-- Clipping defined -->
      <path class="clipPath clipPath2" d="..." />
    </clipPath>
  </defs>
  ...
  <path ... clip-path="url(#clip)"/> <!-- Clipping applied -->
</svg>

Let’s use a colored rectangle as a placeholder for the next image in the slideshow. This helps to clearly visualize the shape that part that’s cut out and will give a clearer idea of the shape and its movement.

<p data-height="422" data-theme- data-slug-hash="bMKrBL" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained II”>See the Pen Silhouette zoom slideshow explained II by Mikael Ainalem (@ainalem) on CodePen.

Now that we have the silhouette, let’s have a look at the actual transition. In essence, we’re looking at two parts of the transition that work together to create the effect:

First, the mask fades into view.
After a brief delay (200ms), the clip path scales up in size.

Note the translate value in the upscaling rule. It’s there to make sure the mask stays in the focal point as things scale up. This is the CSS for those transitions:

.clipPath {
  transition: transform 1200ms 500ms; /* Delayed transform transition */
  transform-origin: 50%;
}

.clipPath.active {
  transform: translateX(-30%) scale(15); /* Upscaling and centering mask */
}

.image {
  transition: opacity 1000ms; /* Fade-in, starts immediately */
  opacity: 0;
}

.image.active {
  opacity: 1;
}

Here’s what we get — an image that transitions to the rectangle!

<p data-height="425" data-theme- data-slug-hash="bMKrYM" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained III”>See the Pen Silhouette zoom slideshow explained III by Mikael Ainalem (@ainalem) on CodePen.

Now let’s replace the rectangle with the next image to complete the transition:

<p data-height="402" data-theme- data-slug-hash="jKqWYX" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained IV”>See the Pen Silhouette zoom slideshow explained IV by Mikael Ainalem (@ainalem) on CodePen.

Repeating the above procedure for each image is how we get multiple slides.

The last thing we need is logic to cycle through the images. This is a matter of bookkeeping, determining which is the current image and which is the next, so on and so forth:

remove = (remove + 1) % images.length;
current = (current + 1) % images.length

Note that this examples is not supported by Firefox at the time of writing because is lacks support for scaling clip paths. I hope this is something that will be addressed in the near future.

Clipping to emerge foreground objects into the background

Another interesting use for clipping is for revealing and hiding effects. We can create parts of the view where objects are either partly or completely hidden making for a fun way to make background images interact with foreground content. For instance, we could have objects disappear behind elements in the background image, say a building or a mountain. It becomes even more interesting when we pair that idea up with animation or scrolling effects.

See the Pen Parallax clip by Mikael Ainalem (@ainalem) on CodePen.

This example uses a clipping path to create an effect where text submerges into the photo — specifically, floating behind mountains as a user scrolls down the page. To make it even more interesting, the text moves with a parallax effect. In other words, the different layers move at different speeds to enhance the perspective.

We start with a simple div and define a background image for it in the CSS:

<p data-height="300" data-theme- data-slug-hash="WyVWym" data-default-tab="css,result" data-user="ainalem" data-pen-title="Parallax clip

Explained I”>See the Pen Parallax clip Explained I by Mikael Ainalem (@ainalem) on CodePen.

The key part in the photo is the line that separates the foreground layer from the layers in the background of the photo. Basically, we want to split the photo into two parts — a perfect use-case for clipping!

Let’s follow the same process we’ve covered before and cut elements out by following a line. In your photo editor, create a clipping path between those two layers. The way I did it was to draw a path following the line in the photo. To close off the path, I connected the line with the top corners.

Here’s visual highlighting the background layers in blue:

<p data-height="400" data-theme- data-slug-hash="BVXeab" data-default-tab="result" data-user="ainalem" data-pen-title="Parallax clip

Explained II”>See the Pen Parallax clip Explained II by Mikael Ainalem (@ainalem) on CodePen.

Any SVG content drawn below the blue area will be partly or completely hidden. This creates an illusion that content disappears behind the hill. For example, here’s a circle that’s drawn on top of the blue background when part of it overlaps with the foreground layer:

<p data-height="400" data-theme- data-slug-hash="MBJzzr" data-default-tab="result" data-user="ainalem" data-pen-title="Parallax clip

Explained III”>See the Pen Parallax clip Explained III by Mikael Ainalem (@ainalem) on CodePen.

Looks kind of like the moon poking out of the mountain top!

All that’s left to recreate my original demo is to change the circle to text and move it when the user scrolls. One way to do that is through a scroll event listener:

window.addEventListener('scroll', function() {
  logo.setAttribute('transform',`translate(0 ${html.scrollTop / 10 + 5})`);
  clip.setAttribute('transform',`translate(0 -${html.scrollTop / 10 + 5})`);
});

Don’t pay too much attention to the + 5 used when calculating the distance. It’s only there as a sloppy way to offset the element. The important part is where things are divided by 10, which creates the parallax effect. Scrolling a certain amount will proportionally move the element and the clip path. Template literals convert the calculated value to a string which is used for the transform property value as an offset to the SVG nodes.

Combining clipping and masking

Clipping and masking are two interesting concepts. One lets you cut out pieces of content whereas the other let’s you do the opposite. Both techniques are useful by themselves but there is no reason why we can’t combine their powers!

When combining clipping and masking, you can split up objects to create different visual effects on different parts. For example:

See the Pen parallax logo blend by Mikael Ainalem (@ainalem) on CodePen.

I created this effect using both clipping and masking on a logo. The text, split into two parts, blends with the background image, which is a beautiful monochromatic image of the New York’s Statue of Liberty. I use different colors and opacities on different parts of the text to make it stand out. This creates an interesting visual effect where the text blends in with the background when it overlaps with the statue — a splash of color to an otherwise grey image. There is, besides clipping and masking, a parallax effect here as well. The text moves in a different speed relative to the image when the user hovers or moves (touch) over the image.

To illustrate the behavior, here is what we get when the masked part is stripped out:

<p data-height="500" data-theme- data-slug-hash="djvyyj" data-default-tab="result" data-user="ainalem" data-pen-title="parallax logo blend

Explained I”>See the Pen parallax logo blend Explained I by Mikael Ainalem (@ainalem) on CodePen.

This is actually a neat feature in itself because the text appears to flow behind the statue. That’s a good use of clipping. But, we’re going to mix in some creative masking to let the text blend into the statue.

Here’s the same demo, but with the mask applied and the clip disabled:

<p data-height="500" data-theme- data-slug-hash="KBWKpz" data-default-tab="result" data-user="ainalem" data-pen-title="parallax logo blend

Explained II”>See the Pen parallax logo blend Explained II by Mikael Ainalem (@ainalem) on CodePen.

Notice how masking combines the text with the statue and uses the statue as the visual bounds for the text. Clipping allows us to display the full text while maintaining that blending. Again, the final result:

See the Pen parallax logo blend by Mikael Ainalem (@ainalem) on CodePen.

Wrapping up

Clipping is a fun way to create interactions and visual effects. It can enhance slide-shows or make objects stand out of images, among other things. Both SVG and CSS provide the ability to apply clip paths and masks to elements, though with different syntaxes. We can pretty much cut any web content nowadays. It is only your imagination that sets the limit.

If you happen to create anything cool with the things we covered here, please share them with me in the comments!

The post Using CSS Clip Path to Create Interactive Effects, Part II appeared first on CSS-Tricks.

CSS

Using CSS Clip Path to Create Interactive Effects, Part II

24/08/2018 admin Dodaj komentarz

Post pobrano z: Using CSS Clip Path to Create Interactive Effects, Part II

This is what the SVG clipping support looks like:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Opera	Firefox	IE	Edge	Safari
4	9	3	9	12	3.2

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
3.2	10	all	4.4	67	60

Clipping as a transition

A neat use case for clipping is transition effects. Take The Silhouette Slideshow demo on CodePen:

See the Pen Silhouette zoom slideshow by Mikael Ainalem (@ainalem) on CodePen.

The transitions follow this process:

Identify the focal point (i.e., main subject) of the image
Create a clipping path for that object
Cut the next image with the path
The cut image (silhouette) fades in
Scale the clipping path until it’s bigger than the viewport
Complete the transition to display the next image
Repeat!

Let’s break down the sequence, starting with the first image. We’ll split this up into multiple pens so we can isolate each step.

<p data-height="300" data-theme- data-slug-hash="gzKxwR" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained I”>See the Pen Silhouette zoom slideshow explained I by Mikael Ainalem (@ainalem) on CodePen.

This is the basic structure of the SVG markup:

<svg>
  ...
  <image class="..." xlink:href="..." />
  ...
</svg>

Import an image into the SVG editor
Draw a path around the object
Convert the path to the syntax for SVG clip path. This is what goes in the SVG’s <defs> block.
Paste the SVG markup into the HTML

Mozilla Developer Network does a fine job of documenting SVG clip paths. Here’s a stripped-down version of the markup used by the original demo to give you an idea of how a clip path fits in:

<svg>
  <defs>
    <clipPath id="clip"> <!-- Clipping defined -->
      <path class="clipPath clipPath2" d="..." />
    </clipPath>
  </defs>
  ...
  <path ... clip-path="url(#clip)"/> <!-- Clipping applied -->
</svg>

<p data-height="422" data-theme- data-slug-hash="bMKrBL" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained II”>See the Pen Silhouette zoom slideshow explained II by Mikael Ainalem (@ainalem) on CodePen.

Now that we have the silhouette, let’s have a look at the actual transition. In essence, we’re looking at two parts of the transition that work together to create the effect:

First, the mask fades into view.
After a brief delay (200ms), the clip path scales up in size.

Note the translate value in the upscaling rule. It’s there to make sure the mask stays in the focal point as things scale up. This is the CSS for those transitions:

.clipPath {
  transition: transform 1200ms 500ms; /* Delayed transform transition */
  transform-origin: 50%;
}

.clipPath.active {
  transform: translateX(-30%) scale(15); /* Upscaling and centering mask */
}

.image {
  transition: opacity 1000ms; /* Fade-in, starts immediately */
  opacity: 0;
}

.image.active {
  opacity: 1;
}

Here’s what we get — an image that transitions to the rectangle!

<p data-height="425" data-theme- data-slug-hash="bMKrYM" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained III”>See the Pen Silhouette zoom slideshow explained III by Mikael Ainalem (@ainalem) on CodePen.

Now let’s replace the rectangle with the next image to complete the transition:

<p data-height="402" data-theme- data-slug-hash="jKqWYX" data-default-tab="html,result" data-user="ainalem" data-pen-title="Silhouette zoom slideshow

explained IV”>See the Pen Silhouette zoom slideshow explained IV by Mikael Ainalem (@ainalem) on CodePen.

Repeating the above procedure for each image is how we get multiple slides.

The last thing we need is logic to cycle through the images. This is a matter of bookkeeping, determining which is the current image and which is the next, so on and so forth:

remove = (remove + 1) % images.length;
current = (current + 1) % images.length

Note that this examples is not supported by Firefox at the time of writing because is lacks support for scaling clip paths. I hope this is something that will be addressed in the near future.

Clipping to emerge foreground objects into the background

See the Pen Parallax clip by Mikael Ainalem (@ainalem) on CodePen.

We start with a simple div and define a background image for it in the CSS:

<p data-height="300" data-theme- data-slug-hash="WyVWym" data-default-tab="css,result" data-user="ainalem" data-pen-title="Parallax clip

Explained I”>See the Pen Parallax clip Explained I by Mikael Ainalem (@ainalem) on CodePen.

Here’s visual highlighting the background layers in blue:

<p data-height="400" data-theme- data-slug-hash="BVXeab" data-default-tab="result" data-user="ainalem" data-pen-title="Parallax clip

Explained II”>See the Pen Parallax clip Explained II by Mikael Ainalem (@ainalem) on CodePen.

<p data-height="400" data-theme- data-slug-hash="MBJzzr" data-default-tab="result" data-user="ainalem" data-pen-title="Parallax clip

Explained III”>See the Pen Parallax clip Explained III by Mikael Ainalem (@ainalem) on CodePen.

Looks kind of like the moon poking out of the mountain top!

All that’s left to recreate my original demo is to change the circle to text and move it when the user scrolls. One way to do that is through a scroll event listener:

window.addEventListener('scroll', function() {
  logo.setAttribute('transform',`translate(0 ${html.scrollTop / 10 + 5})`);
  clip.setAttribute('transform',`translate(0 -${html.scrollTop / 10 + 5})`);
});

Combining clipping and masking

When combining clipping and masking, you can split up objects to create different visual effects on different parts. For example:

See the Pen parallax logo blend by Mikael Ainalem (@ainalem) on CodePen.

To illustrate the behavior, here is what we get when the masked part is stripped out:

<p data-height="500" data-theme- data-slug-hash="djvyyj" data-default-tab="result" data-user="ainalem" data-pen-title="parallax logo blend

Explained I”>See the Pen parallax logo blend Explained I by Mikael Ainalem (@ainalem) on CodePen.

Here’s the same demo, but with the mask applied and the clip disabled:

<p data-height="500" data-theme- data-slug-hash="KBWKpz" data-default-tab="result" data-user="ainalem" data-pen-title="parallax logo blend

Explained II”>See the Pen parallax logo blend Explained II by Mikael Ainalem (@ainalem) on CodePen.

See the Pen parallax logo blend by Mikael Ainalem (@ainalem) on CodePen.

Wrapping up

If you happen to create anything cool with the things we covered here, please share them with me in the comments!

The post Using CSS Clip Path to Create Interactive Effects, Part II appeared first on CSS-Tricks.

Design

Russia in the future: a preview by Evgeny Zubkov

24/08/2018 admin Dodaj komentarz

Post pobrano z: Russia in the future: a preview by Evgeny Zubkov

What will Russia be like in the future? Evgeny Zubkov explored the topic in his own artistic way, trying to imagine scenes from the years 2046 and 2077. Apparently, Russian grannies will still be wearing headscarves, but they may very well have to feed a different kind of bird.

More worrying are the scenes with a family taking a stroll with VR headsets, or humans totally blent with technology. Obviously, the future will probably look very different, but the artist raises some serious questions through his artworks on the topic.

Design

Russia in the future: a preview by Evgeny Zubkov

24/08/2018 admin Dodaj komentarz

Post pobrano z: Russia in the future: a preview by Evgeny Zubkov

Web Tools

20 Best Fonts for Making Monograms & Logo Designs in 2018

24/08/2018 admin

Post pobrano z: 20 Best Fonts for Making Monograms & Logo Designs in 2018

Create the best logos with monogram designs. Check out this list of premium logo fonts.

20 Best Fonts for Monograms & Logos

Having trouble designing a logo? A popular concept style that is easy and memorable is the classic monogram logo.

Simply put, a monogram is a symbol, usually made up of letters. Monograms have had a strong function in history, and many designers today use these simple motifs for symbolic professional and personal logos.

So today we’re bringing you another fantastic selection of premium resources from Envato Market and Envato Elements.

Featuring the best logo fonts with 20 amazing styles, this collection is unique and futuristic. Take advantage of cool monogram fonts created by our talented community.

Nixmat Font

Design impressive logos with the cool Nixmat font. Featuring bold rounded letters and creative linear details, this font is sure to make you shine. Pair it with effective brand materials for the all-around complete package. Download it today to add style to your work!

Garde Font

Create compelling campaigns with the luxurious Garde font. A clean monogram font with high-end features, this font is stylish and strong. It works perfectly with many creative industries including beauty, fashion, and so much more. So give your logos that bold edge over the competition with Garde!

Karma Font

Improve your karma with a creative font. The Karma font is unique and outstanding. Its geometric line style perfectly matches the recent trends in retro 90s design. And you’ll love its clean, block-style design. Test it out with your name or company for a new monogram logo.

WS Free Line

Make a bold impact with the WS Free Line typeface. This monogram font is the perfect companion to any design project. Create decorative logos with tall, elegant letters and interesting line details. Use it on posters, stationery, and more!

Hom Monogram

You don’t need extra characters or symbols with the Hom Monogram font. This extraordinary pack features a trendy monogram suitable for weddings or brands. Personalize it easily with the help of most design programs. Try it out!

Robodron Font

How will robotic design affect the future of
fonts? The Robodron font family reflects the incredible look of clean,
futuristic curves and capital letters. This impressive download is
certainly a great find and perfect for any budding creative. Create
logos for posters, websites, and more!

Raisa Script Logo Font

Script font styles with sweeping curves are a popular treat for designers. And the Raisa Script font features a compelling design that is stunning yet casual. Create flowy monogram letters perfect for any wedding invite or stationery. A pretty and elegant look!

Mustica Script Font

Celebrate your special day with the Mustica script font. A favorite among wedding planners and designers, this script font features wavy, calligraphic letters. Each line was created with incredible care for an all-around beautiful and soft look. Add it to your collection!

FreeLine Font

Innovate with a strong monogram font like the FreeLine typeface. This fashionable font features bold capital letters designed with creative, linear details. Wow any crowd with phenomenal headlines and impressive titles. And match it with any color to fit your style!

Giodasi Font

Need a font that looks as if it was made with a brush? Introducing this phenomenal handwritten typeface! The Giodasi font is different and fresh. It features long brush-styled letters that were individually made by hand. Use it for logos on apparel and more.

Sentaline Monogram Font

Sometimes you have to be a little unusual to stand out. The Sentaline Monogram font will help you break barriers with its futuristic monogram style. Great for headlines, logos, and titles, this font comes with a full set of letters, numbers, and characters. Enjoy!

Bowlist Logo Type

Show off your creative style with the Bowlist logo typeface. A bold calligraphic font, this typeface features a natural handwritten look. So update your recent projects with a modern logo font that is cool and impressive. Check it out on posters and more!

Sentagram Monogram Logo

This good-looking font could definitely work for luxury brands or fashionable personalities. Check out the creative Sentagram logo with sleek and sophisticated lines. Create an artistic brand that will shine the moment you place it on any stationery. Add it to your collection!

Radon Monogram Logo Font

Our next font family is definitely like no other. The letters for the Radon logo font interlock with exciting line designs. Perfect for minimalists, this font has just enough details to stand out from the crowd. Great for monogram logos, headlines, and posters too!

Goldiana Font Script

Perhaps you need something simple but elegant. Then check out the lovely Goldiana font script. Including lowercase and capital letters, this font pack is sweet and super pretty. It’s best suited for logos and invites, but I’m sure it’ll work for other creative projects too. Give it a try!

Shintya Typeface

Craft an extraordinary look with the Shintya typeface. A curvy font full of feelings and allure, this typeface is soft and approachable. Fulfill the needs of your brand or wedding planning with this lovely design. And make sure to check out the preview images to see all the letters and characters!

Aline Font

How would you use the thrilling Aline font? A cool, linear style that resembles many Art Deco designs, this font is striking and classy. Update your concert posters, invite cards, and so much more with its fantastic characters. Works best in large font sizes.

Academy House Font

Add a natural, rustic flair to your monogram logo. The Academy House font features striking textures and curvy loops. It’s made with a playful baseline to add a lot of character to your work. Perfect for prints, posters, and invites, this font will refresh your logos!

Austen Display Font

Design a classic monogram like your favorite vintage crests. The Austen display font is elegant and refined. Give your work that Victorian flavor with this beautiful font style that’s great for logos. Test it out on invites for weddings or any special occasion for stunning results.

Gramin Font

Your logo should reflect your unique spirit. So write out stunning letters and more with the Gramin font. A hand-painted display font with tall, serif letters, this font is casual and friendly. Download this official set of all capital letters, numbers, and punctuation today!

More Font Inspiration

You can make exquisite logos with minimalist monogram fonts. Which ones will you try to upgrade your designs and invites?

Love these logo collections? Check out these amazing roundups for more:

Tried any of these assets? Let us know! Tell us your favorite logo monogram fonts in the comments below.

This has been a selection of premium resources perfect for the avid designer. For more logo monogram fonts, make sure to check out Envato Market and Envato Elements, or enlist the help of our talented professionals at Envato Studio. Happy designing!

Web Tools

20 Best Fonts for Making Monograms & Logo Designs in 2018

24/08/2018 admin

Post pobrano z: 20 Best Fonts for Making Monograms & Logo Designs in 2018

Create the best logos with monogram designs. Check out this list of premium logo fonts.

20 Best Fonts for Monograms & Logos

Having trouble designing a logo? A popular concept style that is easy and memorable is the classic monogram logo.

So today we’re bringing you another fantastic selection of premium resources from Envato Market and Envato Elements.

Featuring the best logo fonts with 20 amazing styles, this collection is unique and futuristic. Take advantage of cool monogram fonts created by our talented community.