Post pobrano z: Create Cartoon Icons for International Transgender Day of Visibility in Adobe Illustrator

Let’s draw some fun cartoon icons in Adobe Illustrator CC! Download the sketch file to the right of this tutorial, or you can sketch out some portraits of your own and apply the techniques outlined below to create your own personalized icons, ready for web and print use.

On 31st March, it is International Transgender Day of Visibility, a day celebrating the transgender community and raising awareness of the discrimination transgender people face worldwide. The people I chose for these icons identify in a variety of ways and have been active for transgender awareness and within the larger LGBT community:

• Janet Mock: Notable writer, trans+ activist, and entertainment host. Janet has worked with LGBT organizations in creating transgender-specific youth programs to support and educate, as well as written and spoken frequently about trans* issues within our society and her own experiences.
• Laura Jane Grace: The front woman for the punk band Against Me!, Laura is not only a fantastic musician, but also went through the process of transition in a public way. Against Me!’s album Transgender Dysphoria Blues deals with the topic of gender dysphoria.
• Marsha P. Johnson: Notable LGBT activist, Stonewall Riot veteran, and drag queen, Marsha was a staple of New York City’s gay and art scene throughout the 60s and 70s. She, along with Sylvia Rivera, co-founded STAR (Sweet Transvestite Action Revolutionaries), a group focused on helping homeless drag queens and trans* women of color.
• Chaz Bono: Quite famous as the son of Cher and the late Sonny Bono, Chaz is a writer, entertainer, and LGBT activist in his own right. Like some of the others in this list, his transition was public. He has written for the magazine The Advocate, worked as spokesperson for the Human Rights Campaign, and worked with GLAAD as their Entertainment Media Director.
• Balian Buschbaum: German pole vaulter who competed in world and Olympic competitions before retiring to transition. I included him for his openness and public transition, as athletes are often regarded in high esteem and those who tackle gender issues in a public way are icons to youths.
• Tyler Ford: Though not as famous as those listed above, Tyler is a noted agender youth and LGBT activist and writer. They’ve written for Rookie magazine, MTV, and worked with the Happy Hippie foundation, an organization supporting homeless LGBT youth. 

The list of notable trans* activists goes quite a bit further than this, and I encourage you, after creating something fantastic with the tutorial, to consider those profiled here as a starting point for International Transgender Day of Visibility.

1. Using a Sketch for an Icon

Step 1

Let’s check out my initial sketches. All six of my subjects have portraits drawn out in little rounded boxes. I’ve made notes about their hairstyles and face shapes, and aimed for a cute, cartoony likeness for each. 

You’re welcome to build your icons off these sketches and follow along with me, or use something of your own and apply the techniques outlined below.

Step 2

Our first icon subject is Janet Mock. I’ve locked my sketch on its own layer in the Layers panel of a New Document in Adobe Illustrator. On a new layer, I started with the Pen Tool (P) and traced the basic head shape from my sketch.

Then I started to trace the eyes. I temporarily set the head shape’s Blending Mode to Multiply in the Transparency panel in order to make sure it fit with the facial features I was beginning to draw. 

Step 3

I’ve hidden the head shape for now in the Layers panel. Using the Blob Brush Tool (Shift-B), with pressure enabled, I followed my sketch’s lines in order to draw the eyes, nose, and mouth. (If you’re using a mouse, feel free to stick with the Pen Tool or Curvature Tool (Shift-~) to draw components and trace your sketch.)

For the eyes, I drew two almond-shaped gradient objects with Linear Gradients going from dark purple to white and back to dark purple. Adjust the gradient’s distribution with the Gradient Tool (G) or the Gradient panel.

I find that using the Blob Brush Tool keeps the design cartoony and looking as if it was drawn with a marker. You can also get a similar look by using stroked paths and adjusting the stroke weight with the Width Tool (Shift-W).

Step 4

I’ve placed the head shape beneath the newly drawn facial features. Group (Control-G) together the face components and center them vertically with the head object. As you can see, we have the basics ready: eyebrows, eyes, nose, and mouth. Let’s get on to the details!

2. Detailing the Face With Gradients

Step 1

I like to reference my sketches as often as possible. Give the nose some color variation by drawing a shape over the entirety of the nose and applying a gradient that goes from a red, orange, or brown hue to the skin tone you’re using for your portrait.

I’ve done the same thing with eyeshadow behind both eyes, emphasizing the arch of the brow and the cat-eye shape of the eyelashes.

I changed the lines of the nose and mouth to a dark pink and drew the mouth with the Pencil Tool (N) as two distinct shapes placed below the mouth lines in the Layers panel.

Step 2

Let’s break down some of the details created so far:

1. Place the eyeshadow gradients behind the eyes. Also note the transparent shadow drawn over the eyes. Make sure it’s the same color as your eye outline and adjust the transparency or apply a gradient to it to give a little bit of depth to the face.
2. The teeth are the same gradient and shadow attribute as those on the eyes—note how the shadows are in the corners of the mouth and the highlight is in the center.
3. For the nose, I drew an oval for the center of the nose using the same gradient used previously on the nose. The Blending Mode was set to Screen and the Opacity was reduced to 70-50% in the Transparency panel.

Step 3

For Janet’s high cheek-bones, I drew a shape that cuts the side of her face in half diagonally and used the Shape Builder Tool (Shift-M) to fit it to the head object perfectly. I applied a Linear Gradient to the shape that goes from dark brown to the same brown used for her skin color, with the darker color on the outside of the jaw (see below).

Step 4

Next up I drew some highlight shapes on the forehead and cheeks. I applied Radial Gradients to each, going from skin tone at 100% Opacity to 0% Opacity with the Blending Mode set to Screen.

Step 5

Speeding up our face creation process, let’s take a look at the details I’ve added:

1. Add some simple ears! Using the sketch as a guide, draw two ear shapes and place them behind the head with dark pink detail shapes.
2. The earrings are two rounded rectangles with a Linear Gradient applied that goes from yellow to light yellow and back to yellow again. There’s also a yellow-orange stroke applied to the shape to separate it a bit from the face.
3. Finally, I’ve added shadow and highlight shapes to the chin and mouth areas. 

3. Creating Hair and Clothes

Step 1

I like to handle the drawing of hairstyles in sections. For Janet’s fabulous, thick hair, check out my process below:

1. I like to start with the largest section and a side part. Using the Pencil Tool, I’ve drawn a fluffy, cloud-like shape in the same dark brown I’ve used throughout this illustration.
2. Continue filling in the other side of her hair. I want to make sure it covers most of her forehead and part of her ears.
3. I added another fluffy shape to the left side in order to lead us into the rest of the hairdo, which will be placed behind the head.
4. Finally, with a darker brown, I’ve drawn a large shape behind the head in order to give the hair some depth in addition to all of this dimension.

Step 2

The neck and shoulders are one shape drawn with the Pen Tool. The Linear Gradient applied to the shape goes from dark brown at the top to medium brown. Place this behind the head but above the lower layer of hair.

For the shirt, I drew it quickly and simply with the Pen Tool and added a couple of stroked paths to create a quick bit of detail without taking away too much attention from the rest of the portrait.

Step 3

Each of my icons will have a similar background of a rounded rectangle, which you can draw with the Rounded Rectangle Tool, with a Radial Gradient applied. Group all of the icon components together. Draw another rounded rectangle and place it over the icon group. Create a Clipping Mask (Control-7) so the portrait body stays within the icon’s frame.

Add other details like a bit of scripted text (check out some fantastic fonts over at GraphicRiver, or draw them in yourself) and additional shadow shapes to define the hair.

4. Creating Other Hair Styles

Step 1

Rather than going through the same process for each of the icons, I’d like to highlight some of the techniques that make each icon unique. Starting with a cartoony version of Laura Jane Grace, let’s check out how I handled her long tresses.

1. On a layer above the rest of her body, I started with a half circle for her bangs. This was drawn with the Blob Brush Tool, but could definitely be done with the drawing tool of your choice.
2. Like Janet’s hair above, I like to handle hair in sections. A couple of curved lines take care of the details in the top of her hair.
3. Then, I focused on wavy hair to frame the face. Notice how it’s not detailing every strand, but gives you a good idea of volume and shape.

Group these hair outlines together, and we’ll define the hair further with some shadow shapes next.

Step 2

Much like shadow shapes drawn before, we’ll be using Linear Gradients that go from 100% to 0% Opacity.

Draw a large shape outlining the hair with the Pen Tool or Pencil Tool and place it beneath the hair line art. I drew a big, jagged shape that follows the contour of the bangs.

Apply the shadow gradient and continue drawing shapes that define a few sections of hair, similar to what’s seen below. 

Step 3

The highlights are similar to the shadow shapes: they accentuate several sections in the hair and bring depth to the design. Use a lighter shade than the hair or set the gradient shapes to Screen as the Blending Mode in the Transparency or Appearance panels.

5. Drawing Clothes and Accessories

Step 1

For the crown of flowers on either Marsha P. Johnson’s or Tyler Ford’s heads, I mostly followed my initial sketch and drew shapes with the Pencil Tool. Like the hair, I took it all in sections. 

In the case of the flower crown below, I went for color sections of flowers and leaves. I drew red flowers, Grouped them together, and then drew yellow flowers and leaves after that.

Step 2

Drawing something complex like a crown of flowers or a floral arrangement in sections allows you to change colors quickly and easily. I drew veins on the leaves with the Blob Brush Tool.

To add some shadow to the flowers I Grouped the crown together and then Copied (Control-C) and Pasted (Control-V) the whole thing. In the Gradient panel, I applied a Radial Gradient of dark brown at 100% to 0% Opacity (with the opaque color in the center), and set the Blending Mode to Overlay in the Transparency panel.

The highlights are light yellow Linear Gradient shapes, similar to those drawn on the Laura Jane Grace icon’s hair.

Step 3

Most of the clothes drawn on each icon are simple. The clothes drawn on my Balian Buschbaum icon were drawn in three steps: shirt, scarf around the neck, and scarf hanging down. Then I drew simple gradient shadow shapes that accentuated the draping and folds in the scarf itself (as seen below). 

Great Job, You’re Done!

The icons seen below were created with the techniques highlighted above. Feel free to follow along with the sketch provided or create some designs of your own and use the ideas, style, and techniques from this tutorial. Share your results in the comment section below!

Post pobrano z: Create Cartoon Icons for International Transgender Day of Visibility in Adobe Illustrator

Let’s draw some fun cartoon icons in Adobe Illustrator CC! Download the sketch file to the right of this tutorial, or you can sketch out some portraits of your own and apply the techniques outlined below to create your own personalized icons, ready for web and print use.

On 31st March, it is International Transgender Day of Visibility, a day celebrating the transgender community and raising awareness of the discrimination transgender people face worldwide. The people I chose for these icons identify in a variety of ways and have been active for transgender awareness and within the larger LGBT community:

• Janet Mock: Notable writer, trans+ activist, and entertainment host. Janet has worked with LGBT organizations in creating transgender-specific youth programs to support and educate, as well as written and spoken frequently about trans* issues within our society and her own experiences.
• Laura Jane Grace: The front woman for the punk band Against Me!, Laura is not only a fantastic musician, but also went through the process of transition in a public way. Against Me!’s album Transgender Dysphoria Blues deals with the topic of gender dysphoria.
• Marsha P. Johnson: Notable LGBT activist, Stonewall Riot veteran, and drag queen, Marsha was a staple of New York City’s gay and art scene throughout the 60s and 70s. She, along with Sylvia Rivera, co-founded STAR (Sweet Transvestite Action Revolutionaries), a group focused on helping homeless drag queens and trans* women of color.
• Chaz Bono: Quite famous as the son of Cher and the late Sonny Bono, Chaz is a writer, entertainer, and LGBT activist in his own right. Like some of the others in this list, his transition was public. He has written for the magazine The Advocate, worked as spokesperson for the Human Rights Campaign, and worked with GLAAD as their Entertainment Media Director.
• Balian Buschbaum: German pole vaulter who competed in world and Olympic competitions before retiring to transition. I included him for his openness and public transition, as athletes are often regarded in high esteem and those who tackle gender issues in a public way are icons to youths.
• Tyler Ford: Though not as famous as those listed above, Tyler is a noted agender youth and LGBT activist and writer. They’ve written for Rookie magazine, MTV, and worked with the Happy Hippie foundation, an organization supporting homeless LGBT youth. 

The list of notable trans* activists goes quite a bit further than this, and I encourage you, after creating something fantastic with the tutorial, to consider those profiled here as a starting point for International Transgender Day of Visibility.

1. Using a Sketch for an Icon

Step 1

Let’s check out my initial sketches. All six of my subjects have portraits drawn out in little rounded boxes. I’ve made notes about their hairstyles and face shapes, and aimed for a cute, cartoony likeness for each. 

You’re welcome to build your icons off these sketches and follow along with me, or use something of your own and apply the techniques outlined below.

Step 2

Our first icon subject is Janet Mock. I’ve locked my sketch on its own layer in the Layers panel of a New Document in Adobe Illustrator. On a new layer, I started with the Pen Tool (P) and traced the basic head shape from my sketch.

Then I started to trace the eyes. I temporarily set the head shape’s Blending Mode to Multiply in the Transparency panel in order to make sure it fit with the facial features I was beginning to draw. 

Step 3

I’ve hidden the head shape for now in the Layers panel. Using the Blob Brush Tool (Shift-B), with pressure enabled, I followed my sketch’s lines in order to draw the eyes, nose, and mouth. (If you’re using a mouse, feel free to stick with the Pen Tool or Curvature Tool (Shift-~) to draw components and trace your sketch.)

For the eyes, I drew two almond-shaped gradient objects with Linear Gradients going from dark purple to white and back to dark purple. Adjust the gradient’s distribution with the Gradient Tool (G) or the Gradient panel.

I find that using the Blob Brush Tool keeps the design cartoony and looking as if it was drawn with a marker. You can also get a similar look by using stroked paths and adjusting the stroke weight with the Width Tool (Shift-W).

Step 4

I’ve placed the head shape beneath the newly drawn facial features. Group (Control-G) together the face components and center them vertically with the head object. As you can see, we have the basics ready: eyebrows, eyes, nose, and mouth. Let’s get on to the details!

2. Detailing the Face With Gradients

Step 1

I like to reference my sketches as often as possible. Give the nose some color variation by drawing a shape over the entirety of the nose and applying a gradient that goes from a red, orange, or brown hue to the skin tone you’re using for your portrait.

I’ve done the same thing with eyeshadow behind both eyes, emphasizing the arch of the brow and the cat-eye shape of the eyelashes.

I changed the lines of the nose and mouth to a dark pink and drew the mouth with the Pencil Tool (N) as two distinct shapes placed below the mouth lines in the Layers panel.

Step 2

Let’s break down some of the details created so far:

1. Place the eyeshadow gradients behind the eyes. Also note the transparent shadow drawn over the eyes. Make sure it’s the same color as your eye outline and adjust the transparency or apply a gradient to it to give a little bit of depth to the face.
2. The teeth are the same gradient and shadow attribute as those on the eyes—note how the shadows are in the corners of the mouth and the highlight is in the center.
3. For the nose, I drew an oval for the center of the nose using the same gradient used previously on the nose. The Blending Mode was set to Screen and the Opacity was reduced to 70-50% in the Transparency panel.

Step 3

For Janet’s high cheek-bones, I drew a shape that cuts the side of her face in half diagonally and used the Shape Builder Tool (Shift-M) to fit it to the head object perfectly. I applied a Linear Gradient to the shape that goes from dark brown to the same brown used for her skin color, with the darker color on the outside of the jaw (see below).

Step 4

Next up I drew some highlight shapes on the forehead and cheeks. I applied Radial Gradients to each, going from skin tone at 100% Opacity to 0% Opacity with the Blending Mode set to Screen.

Step 5

Speeding up our face creation process, let’s take a look at the details I’ve added:

1. Add some simple ears! Using the sketch as a guide, draw two ear shapes and place them behind the head with dark pink detail shapes.
2. The earrings are two rounded rectangles with a Linear Gradient applied that goes from yellow to light yellow and back to yellow again. There’s also a yellow-orange stroke applied to the shape to separate it a bit from the face.
3. Finally, I’ve added shadow and highlight shapes to the chin and mouth areas. 

3. Creating Hair and Clothes

Step 1

I like to handle the drawing of hairstyles in sections. For Janet’s fabulous, thick hair, check out my process below:

1. I like to start with the largest section and a side part. Using the Pencil Tool, I’ve drawn a fluffy, cloud-like shape in the same dark brown I’ve used throughout this illustration.
2. Continue filling in the other side of her hair. I want to make sure it covers most of her forehead and part of her ears.
3. I added another fluffy shape to the left side in order to lead us into the rest of the hairdo, which will be placed behind the head.
4. Finally, with a darker brown, I’ve drawn a large shape behind the head in order to give the hair some depth in addition to all of this dimension.

Step 2

The neck and shoulders are one shape drawn with the Pen Tool. The Linear Gradient applied to the shape goes from dark brown at the top to medium brown. Place this behind the head but above the lower layer of hair.

For the shirt, I drew it quickly and simply with the Pen Tool and added a couple of stroked paths to create a quick bit of detail without taking away too much attention from the rest of the portrait.

Step 3

Each of my icons will have a similar background of a rounded rectangle, which you can draw with the Rounded Rectangle Tool, with a Radial Gradient applied. Group all of the icon components together. Draw another rounded rectangle and place it over the icon group. Create a Clipping Mask (Control-7) so the portrait body stays within the icon’s frame.

Add other details like a bit of scripted text (check out some fantastic fonts over at GraphicRiver, or draw them in yourself) and additional shadow shapes to define the hair.

4. Creating Other Hair Styles

Step 1

Rather than going through the same process for each of the icons, I’d like to highlight some of the techniques that make each icon unique. Starting with a cartoony version of Laura Jane Grace, let’s check out how I handled her long tresses.

1. On a layer above the rest of her body, I started with a half circle for her bangs. This was drawn with the Blob Brush Tool, but could definitely be done with the drawing tool of your choice.
2. Like Janet’s hair above, I like to handle hair in sections. A couple of curved lines take care of the details in the top of her hair.
3. Then, I focused on wavy hair to frame the face. Notice how it’s not detailing every strand, but gives you a good idea of volume and shape.

Group these hair outlines together, and we’ll define the hair further with some shadow shapes next.

Step 2

Much like shadow shapes drawn before, we’ll be using Linear Gradients that go from 100% to 0% Opacity.

Draw a large shape outlining the hair with the Pen Tool or Pencil Tool and place it beneath the hair line art. I drew a big, jagged shape that follows the contour of the bangs.

Apply the shadow gradient and continue drawing shapes that define a few sections of hair, similar to what’s seen below. 

Step 3

The highlights are similar to the shadow shapes: they accentuate several sections in the hair and bring depth to the design. Use a lighter shade than the hair or set the gradient shapes to Screen as the Blending Mode in the Transparency or Appearance panels.

5. Drawing Clothes and Accessories

Step 1

For the crown of flowers on either Marsha P. Johnson’s or Tyler Ford’s heads, I mostly followed my initial sketch and drew shapes with the Pencil Tool. Like the hair, I took it all in sections. 

In the case of the flower crown below, I went for color sections of flowers and leaves. I drew red flowers, Grouped them together, and then drew yellow flowers and leaves after that.

Step 2

Drawing something complex like a crown of flowers or a floral arrangement in sections allows you to change colors quickly and easily. I drew veins on the leaves with the Blob Brush Tool.

To add some shadow to the flowers I Grouped the crown together and then Copied (Control-C) and Pasted (Control-V) the whole thing. In the Gradient panel, I applied a Radial Gradient of dark brown at 100% to 0% Opacity (with the opaque color in the center), and set the Blending Mode to Overlay in the Transparency panel.

The highlights are light yellow Linear Gradient shapes, similar to those drawn on the Laura Jane Grace icon’s hair.

Step 3

Most of the clothes drawn on each icon are simple. The clothes drawn on my Balian Buschbaum icon were drawn in three steps: shirt, scarf around the neck, and scarf hanging down. Then I drew simple gradient shadow shapes that accentuated the draping and folds in the scarf itself (as seen below). 

Great Job, You’re Done!

The icons seen below were created with the techniques highlighted above. Feel free to follow along with the sketch provided or create some designs of your own and use the ideas, style, and techniques from this tutorial. Share your results in the comment section below!

Post pobrano z: Create Cartoon Icons for International Transgender Day of Visibility in Adobe Illustrator

Let’s draw some fun cartoon icons in Adobe Illustrator CC! Download the sketch file to the right of this tutorial, or you can sketch out some portraits of your own and apply the techniques outlined below to create your own personalized icons, ready for web and print use.

On 31st March, it is International Transgender Day of Visibility, a day celebrating the transgender community and raising awareness of the discrimination transgender people face worldwide. The people I chose for these icons identify in a variety of ways and have been active for transgender awareness and within the larger LGBT community:

• Janet Mock: Notable writer, trans+ activist, and entertainment host. Janet has worked with LGBT organizations in creating transgender-specific youth programs to support and educate, as well as written and spoken frequently about trans* issues within our society and her own experiences.
• Laura Jane Grace: The front woman for the punk band Against Me!, Laura is not only a fantastic musician, but also went through the process of transition in a public way. Against Me!’s album Transgender Dysphoria Blues deals with the topic of gender dysphoria.
• Marsha P. Johnson: Notable LGBT activist, Stonewall Riot veteran, and drag queen, Marsha was a staple of New York City’s gay and art scene throughout the 60s and 70s. She, along with Sylvia Rivera, co-founded STAR (Sweet Transvestite Action Revolutionaries), a group focused on helping homeless drag queens and trans* women of color.
• Chaz Bono: Quite famous as the son of Cher and the late Sonny Bono, Chaz is a writer, entertainer, and LGBT activist in his own right. Like some of the others in this list, his transition was public. He has written for the magazine The Advocate, worked as spokesperson for the Human Rights Campaign, and worked with GLAAD as their Entertainment Media Director.
• Balian Buschbaum: German pole vaulter who competed in world and Olympic competitions before retiring to transition. I included him for his openness and public transition, as athletes are often regarded in high esteem and those who tackle gender issues in a public way are icons to youths.
• Tyler Ford: Though not as famous as those listed above, Tyler is a noted agender youth and LGBT activist and writer. They’ve written for Rookie magazine, MTV, and worked with the Happy Hippie foundation, an organization supporting homeless LGBT youth. 

The list of notable trans* activists goes quite a bit further than this, and I encourage you, after creating something fantastic with the tutorial, to consider those profiled here as a starting point for International Transgender Day of Visibility.

1. Using a Sketch for an Icon

Step 1

Let’s check out my initial sketches. All six of my subjects have portraits drawn out in little rounded boxes. I’ve made notes about their hairstyles and face shapes, and aimed for a cute, cartoony likeness for each. 

You’re welcome to build your icons off these sketches and follow along with me, or use something of your own and apply the techniques outlined below.

Step 2

Our first icon subject is Janet Mock. I’ve locked my sketch on its own layer in the Layers panel of a New Document in Adobe Illustrator. On a new layer, I started with the Pen Tool (P) and traced the basic head shape from my sketch.

Then I started to trace the eyes. I temporarily set the head shape’s Blending Mode to Multiply in the Transparency panel in order to make sure it fit with the facial features I was beginning to draw. 

Step 3

I’ve hidden the head shape for now in the Layers panel. Using the Blob Brush Tool (Shift-B), with pressure enabled, I followed my sketch’s lines in order to draw the eyes, nose, and mouth. (If you’re using a mouse, feel free to stick with the Pen Tool or Curvature Tool (Shift-~) to draw components and trace your sketch.)

For the eyes, I drew two almond-shaped gradient objects with Linear Gradients going from dark purple to white and back to dark purple. Adjust the gradient’s distribution with the Gradient Tool (G) or the Gradient panel.

I find that using the Blob Brush Tool keeps the design cartoony and looking as if it was drawn with a marker. You can also get a similar look by using stroked paths and adjusting the stroke weight with the Width Tool (Shift-W).

Step 4

I’ve placed the head shape beneath the newly drawn facial features. Group (Control-G) together the face components and center them vertically with the head object. As you can see, we have the basics ready: eyebrows, eyes, nose, and mouth. Let’s get on to the details!

2. Detailing the Face With Gradients

Step 1

I like to reference my sketches as often as possible. Give the nose some color variation by drawing a shape over the entirety of the nose and applying a gradient that goes from a red, orange, or brown hue to the skin tone you’re using for your portrait.

I’ve done the same thing with eyeshadow behind both eyes, emphasizing the arch of the brow and the cat-eye shape of the eyelashes.

I changed the lines of the nose and mouth to a dark pink and drew the mouth with the Pencil Tool (N) as two distinct shapes placed below the mouth lines in the Layers panel.

Step 2

Let’s break down some of the details created so far:

1. Place the eyeshadow gradients behind the eyes. Also note the transparent shadow drawn over the eyes. Make sure it’s the same color as your eye outline and adjust the transparency or apply a gradient to it to give a little bit of depth to the face.
2. The teeth are the same gradient and shadow attribute as those on the eyes—note how the shadows are in the corners of the mouth and the highlight is in the center.
3. For the nose, I drew an oval for the center of the nose using the same gradient used previously on the nose. The Blending Mode was set to Screen and the Opacity was reduced to 70-50% in the Transparency panel.

Step 3

For Janet’s high cheek-bones, I drew a shape that cuts the side of her face in half diagonally and used the Shape Builder Tool (Shift-M) to fit it to the head object perfectly. I applied a Linear Gradient to the shape that goes from dark brown to the same brown used for her skin color, with the darker color on the outside of the jaw (see below).

Step 4

Next up I drew some highlight shapes on the forehead and cheeks. I applied Radial Gradients to each, going from skin tone at 100% Opacity to 0% Opacity with the Blending Mode set to Screen.

Step 5

Speeding up our face creation process, let’s take a look at the details I’ve added:

1. Add some simple ears! Using the sketch as a guide, draw two ear shapes and place them behind the head with dark pink detail shapes.
2. The earrings are two rounded rectangles with a Linear Gradient applied that goes from yellow to light yellow and back to yellow again. There’s also a yellow-orange stroke applied to the shape to separate it a bit from the face.
3. Finally, I’ve added shadow and highlight shapes to the chin and mouth areas. 

3. Creating Hair and Clothes

Step 1

I like to handle the drawing of hairstyles in sections. For Janet’s fabulous, thick hair, check out my process below:

1. I like to start with the largest section and a side part. Using the Pencil Tool, I’ve drawn a fluffy, cloud-like shape in the same dark brown I’ve used throughout this illustration.
2. Continue filling in the other side of her hair. I want to make sure it covers most of her forehead and part of her ears.
3. I added another fluffy shape to the left side in order to lead us into the rest of the hairdo, which will be placed behind the head.
4. Finally, with a darker brown, I’ve drawn a large shape behind the head in order to give the hair some depth in addition to all of this dimension.

Step 2

The neck and shoulders are one shape drawn with the Pen Tool. The Linear Gradient applied to the shape goes from dark brown at the top to medium brown. Place this behind the head but above the lower layer of hair.

For the shirt, I drew it quickly and simply with the Pen Tool and added a couple of stroked paths to create a quick bit of detail without taking away too much attention from the rest of the portrait.

Step 3

Each of my icons will have a similar background of a rounded rectangle, which you can draw with the Rounded Rectangle Tool, with a Radial Gradient applied. Group all of the icon components together. Draw another rounded rectangle and place it over the icon group. Create a Clipping Mask (Control-7) so the portrait body stays within the icon’s frame.

Add other details like a bit of scripted text (check out some fantastic fonts over at GraphicRiver, or draw them in yourself) and additional shadow shapes to define the hair.

4. Creating Other Hair Styles

Step 1

Rather than going through the same process for each of the icons, I’d like to highlight some of the techniques that make each icon unique. Starting with a cartoony version of Laura Jane Grace, let’s check out how I handled her long tresses.

1. On a layer above the rest of her body, I started with a half circle for her bangs. This was drawn with the Blob Brush Tool, but could definitely be done with the drawing tool of your choice.
2. Like Janet’s hair above, I like to handle hair in sections. A couple of curved lines take care of the details in the top of her hair.
3. Then, I focused on wavy hair to frame the face. Notice how it’s not detailing every strand, but gives you a good idea of volume and shape.

Group these hair outlines together, and we’ll define the hair further with some shadow shapes next.

Step 2

Much like shadow shapes drawn before, we’ll be using Linear Gradients that go from 100% to 0% Opacity.

Draw a large shape outlining the hair with the Pen Tool or Pencil Tool and place it beneath the hair line art. I drew a big, jagged shape that follows the contour of the bangs.

Apply the shadow gradient and continue drawing shapes that define a few sections of hair, similar to what’s seen below. 

Step 3

The highlights are similar to the shadow shapes: they accentuate several sections in the hair and bring depth to the design. Use a lighter shade than the hair or set the gradient shapes to Screen as the Blending Mode in the Transparency or Appearance panels.

5. Drawing Clothes and Accessories

Step 1

For the crown of flowers on either Marsha P. Johnson’s or Tyler Ford’s heads, I mostly followed my initial sketch and drew shapes with the Pencil Tool. Like the hair, I took it all in sections. 

In the case of the flower crown below, I went for color sections of flowers and leaves. I drew red flowers, Grouped them together, and then drew yellow flowers and leaves after that.

Step 2

Drawing something complex like a crown of flowers or a floral arrangement in sections allows you to change colors quickly and easily. I drew veins on the leaves with the Blob Brush Tool.

To add some shadow to the flowers I Grouped the crown together and then Copied (Control-C) and Pasted (Control-V) the whole thing. In the Gradient panel, I applied a Radial Gradient of dark brown at 100% to 0% Opacity (with the opaque color in the center), and set the Blending Mode to Overlay in the Transparency panel.

The highlights are light yellow Linear Gradient shapes, similar to those drawn on the Laura Jane Grace icon’s hair.

Step 3

Most of the clothes drawn on each icon are simple. The clothes drawn on my Balian Buschbaum icon were drawn in three steps: shirt, scarf around the neck, and scarf hanging down. Then I drew simple gradient shadow shapes that accentuated the draping and folds in the scarf itself (as seen below). 

Great Job, You’re Done!

The icons seen below were created with the techniques highlighted above. Feel free to follow along with the sketch provided or create some designs of your own and use the ideas, style, and techniques from this tutorial. Share your results in the comment section below!

Post pobrano z: How to Create a Layer Mask in Photoshop

In this quick tip tutorial, we will learn what a layer mask is, what it does, and how to create a mask in Photoshop! 

Follow along with us on the Envato Tuts+ YouTube Channel:

What You Will Need

You will need the following image in order to follow along with this tutorial.

• Night Sky with Stars and Galaxy

Find more resources on Envato Elements!

1. What Are Layer Masks? 

Layer masks are your go-to tool when doing photo composites or manipulations! You can add a mask to a layer and then use that mask to hide, or „mask,” portions of the layer. 

Masking is different from erasing as you aren’t deleting anything, but hiding it. Anything you mask can be brought back at any time! Let’s get to learning how to make a layer mask in Photoshop.

2. How to Use Layer Masks

Below, I will walk you through a simple example of how to add a layer mask in Photoshop.

Step 1

Create a New Layer over a background. I’ll be using this Night Sky image. 

Create a shape using the Shape Tool.

Step 2

With the shape selected, click on the Add Layer Mask button found at the bottom of the Layers panel, right in the middle. The icon is of a square with a circle in the middle.

A white box will appear next to your layer icon.

Step 3

Click the layer mask, the white box that appeared, to make sure it’s active. This is your Photoshop mask!

Now, with a Brush set to black, you can mask out any part of that shape. 

Step 4

You can then mask things back in using the color white! Remember, nothing is ever really gone. 

You use black to erase and white to recover. You can even use shades of gray; the darker the gray, the more it will erase. 

Below, I created some star-shaped selections and then masked them out with a black brush.

Step 5

If you move your layer around, your mask will follow and stay attached, indicated by the Chain Link icon located between the layer and layer mask icons.  

However, you can also Unlink the layer and the layer mask, allowing you to move the layer and layer mask around independently, depending on which one you have active. 

Step 6

Finally, if for any reason you want to permanently apply your layer mask, you can Right-Click > Apply Layer Mask on your layer mask.

Once a layer mask is applied, whatever is masked out will become permanently deleted, the layer will turn back into a standard rasterized layer, and you are free to add a new layer mask.  

And There You Have It!

We’ve learned how to create a layer mask in Photoshop! Layer masks are what make photo composites and manipulation possible, allowing us to blend dozens of images to create one cohesive new piece of art! The possibilities are endless. 

So, as always, keep experimenting with different techniques, continue learning how to mask in Photoshop, and don’t forget to post your version below, along with any questions, comments, or critiques!

Looking to learn more? Why not check out the following excellent photo manipulation tutorials:

• 
  Adobe Photoshop
  How to Create an Abstract Diamond Lens Effect in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Honey Bee Themed Photo Manipulation in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Futuristic Fashion Portrait in Adobe Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Ghostly Horror-Themed Photo Manipulation in Adobe Photoshop
  Abbey Esparza

Post pobrano z: How to Create a Layer Mask in Photoshop

In this quick tip tutorial, we will learn what a layer mask is, what it does, and how to create a mask in Photoshop! 

Follow along with us on the Envato Tuts+ YouTube Channel:

What You Will Need

You will need the following image in order to follow along with this tutorial.

• Night Sky with Stars and Galaxy

Find more resources on Envato Elements!

1. What Are Layer Masks? 

Layer masks are your go-to tool when doing photo composites or manipulations! You can add a mask to a layer and then use that mask to hide, or „mask,” portions of the layer. 

Masking is different from erasing as you aren’t deleting anything, but hiding it. Anything you mask can be brought back at any time! Let’s get to learning how to make a layer mask in Photoshop.

2. How to Use Layer Masks

Below, I will walk you through a simple example of how to add a layer mask in Photoshop.

Step 1

Create a New Layer over a background. I’ll be using this Night Sky image. 

Create a shape using the Shape Tool.

Step 2

With the shape selected, click on the Add Layer Mask button found at the bottom of the Layers panel, right in the middle. The icon is of a square with a circle in the middle.

A white box will appear next to your layer icon.

Step 3

Click the layer mask, the white box that appeared, to make sure it’s active. This is your Photoshop mask!

Now, with a Brush set to black, you can mask out any part of that shape. 

Step 4

You can then mask things back in using the color white! Remember, nothing is ever really gone. 

You use black to erase and white to recover. You can even use shades of gray; the darker the gray, the more it will erase. 

Below, I created some star-shaped selections and then masked them out with a black brush.

Step 5

If you move your layer around, your mask will follow and stay attached, indicated by the Chain Link icon located between the layer and layer mask icons.  

However, you can also Unlink the layer and the layer mask, allowing you to move the layer and layer mask around independently, depending on which one you have active. 

Step 6

Finally, if for any reason you want to permanently apply your layer mask, you can Right-Click > Apply Layer Mask on your layer mask.

Once a layer mask is applied, whatever is masked out will become permanently deleted, the layer will turn back into a standard rasterized layer, and you are free to add a new layer mask.  

And There You Have It!

We’ve learned how to create a layer mask in Photoshop! Layer masks are what make photo composites and manipulation possible, allowing us to blend dozens of images to create one cohesive new piece of art! The possibilities are endless. 

So, as always, keep experimenting with different techniques, continue learning how to mask in Photoshop, and don’t forget to post your version below, along with any questions, comments, or critiques!

Looking to learn more? Why not check out the following excellent photo manipulation tutorials:

• 
  Adobe Photoshop
  How to Create an Abstract Diamond Lens Effect in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Honey Bee Themed Photo Manipulation in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Futuristic Fashion Portrait in Adobe Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Ghostly Horror-Themed Photo Manipulation in Adobe Photoshop
  Abbey Esparza

Post pobrano z: How to Create a Layer Mask in Photoshop

In this quick tip tutorial, we will learn what a layer mask is, what it does, and how to create a mask in Photoshop! 

Follow along with us on the Envato Tuts+ YouTube Channel:

What You Will Need

You will need the following image in order to follow along with this tutorial.

• Night Sky with Stars and Galaxy

Find more resources on Envato Elements!

1. What Are Layer Masks? 

Layer masks are your go-to tool when doing photo composites or manipulations! You can add a mask to a layer and then use that mask to hide, or „mask,” portions of the layer. 

Masking is different from erasing as you aren’t deleting anything, but hiding it. Anything you mask can be brought back at any time! Let’s get to learning how to make a layer mask in Photoshop.

2. How to Use Layer Masks

Below, I will walk you through a simple example of how to add a layer mask in Photoshop.

Step 1

Create a New Layer over a background. I’ll be using this Night Sky image. 

Create a shape using the Shape Tool.

Step 2

With the shape selected, click on the Add Layer Mask button found at the bottom of the Layers panel, right in the middle. The icon is of a square with a circle in the middle.

A white box will appear next to your layer icon.

Step 3

Click the layer mask, the white box that appeared, to make sure it’s active. This is your Photoshop mask!

Now, with a Brush set to black, you can mask out any part of that shape. 

Step 4

You can then mask things back in using the color white! Remember, nothing is ever really gone. 

You use black to erase and white to recover. You can even use shades of gray; the darker the gray, the more it will erase. 

Below, I created some star-shaped selections and then masked them out with a black brush.

Step 5

If you move your layer around, your mask will follow and stay attached, indicated by the Chain Link icon located between the layer and layer mask icons.  

However, you can also Unlink the layer and the layer mask, allowing you to move the layer and layer mask around independently, depending on which one you have active. 

Step 6

Finally, if for any reason you want to permanently apply your layer mask, you can Right-Click > Apply Layer Mask on your layer mask.

Once a layer mask is applied, whatever is masked out will become permanently deleted, the layer will turn back into a standard rasterized layer, and you are free to add a new layer mask.  

And There You Have It!

We’ve learned how to create a layer mask in Photoshop! Layer masks are what make photo composites and manipulation possible, allowing us to blend dozens of images to create one cohesive new piece of art! The possibilities are endless. 

So, as always, keep experimenting with different techniques, continue learning how to mask in Photoshop, and don’t forget to post your version below, along with any questions, comments, or critiques!

Looking to learn more? Why not check out the following excellent photo manipulation tutorials:

• 
  Adobe Photoshop
  How to Create an Abstract Diamond Lens Effect in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Honey Bee Themed Photo Manipulation in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Futuristic Fashion Portrait in Adobe Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Ghostly Horror-Themed Photo Manipulation in Adobe Photoshop
  Abbey Esparza

Post pobrano z: How to Create a Layer Mask in Photoshop

In this quick tip tutorial, we will learn what a layer mask is, what it does, and how to create a mask in Photoshop! 

Follow along with us on the Envato Tuts+ YouTube Channel:

What You Will Need

You will need the following image in order to follow along with this tutorial.

• Night Sky with Stars and Galaxy

Find more resources on Envato Elements!

1. What Are Layer Masks? 

Layer masks are your go-to tool when doing photo composites or manipulations! You can add a mask to a layer and then use that mask to hide, or „mask,” portions of the layer. 

Masking is different from erasing as you aren’t deleting anything, but hiding it. Anything you mask can be brought back at any time! Let’s get to learning how to make a layer mask in Photoshop.

2. How to Use Layer Masks

Below, I will walk you through a simple example of how to add a layer mask in Photoshop.

Step 1

Create a New Layer over a background. I’ll be using this Night Sky image. 

Create a shape using the Shape Tool.

Step 2

With the shape selected, click on the Add Layer Mask button found at the bottom of the Layers panel, right in the middle. The icon is of a square with a circle in the middle.

A white box will appear next to your layer icon.

Step 3

Click the layer mask, the white box that appeared, to make sure it’s active. This is your Photoshop mask!

Now, with a Brush set to black, you can mask out any part of that shape. 

Step 4

You can then mask things back in using the color white! Remember, nothing is ever really gone. 

You use black to erase and white to recover. You can even use shades of gray; the darker the gray, the more it will erase. 

Below, I created some star-shaped selections and then masked them out with a black brush.

Step 5

If you move your layer around, your mask will follow and stay attached, indicated by the Chain Link icon located between the layer and layer mask icons.  

However, you can also Unlink the layer and the layer mask, allowing you to move the layer and layer mask around independently, depending on which one you have active. 

Step 6

Finally, if for any reason you want to permanently apply your layer mask, you can Right-Click > Apply Layer Mask on your layer mask.

Once a layer mask is applied, whatever is masked out will become permanently deleted, the layer will turn back into a standard rasterized layer, and you are free to add a new layer mask.  

And There You Have It!

We’ve learned how to create a layer mask in Photoshop! Layer masks are what make photo composites and manipulation possible, allowing us to blend dozens of images to create one cohesive new piece of art! The possibilities are endless. 

So, as always, keep experimenting with different techniques, continue learning how to mask in Photoshop, and don’t forget to post your version below, along with any questions, comments, or critiques!

Looking to learn more? Why not check out the following excellent photo manipulation tutorials:

• 
  Adobe Photoshop
  How to Create an Abstract Diamond Lens Effect in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Honey Bee Themed Photo Manipulation in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Futuristic Fashion Portrait in Adobe Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Ghostly Horror-Themed Photo Manipulation in Adobe Photoshop
  Abbey Esparza

Post pobrano z: How to Create a Layer Mask in Photoshop

In this quick tip tutorial, we will learn what a layer mask is, what it does, and how to create a mask in Photoshop! 

Follow along with us on the Envato Tuts+ YouTube Channel:

What You Will Need

You will need the following image in order to follow along with this tutorial.

• Night Sky with Stars and Galaxy

Find more resources on Envato Elements!

1. What Are Layer Masks? 

Layer masks are your go-to tool when doing photo composites or manipulations! You can add a mask to a layer and then use that mask to hide, or „mask,” portions of the layer. 

Masking is different from erasing as you aren’t deleting anything, but hiding it. Anything you mask can be brought back at any time! Let’s get to learning how to make a layer mask in Photoshop.

2. How to Use Layer Masks

Below, I will walk you through a simple example of how to add a layer mask in Photoshop.

Step 1

Create a New Layer over a background. I’ll be using this Night Sky image. 

Create a shape using the Shape Tool.

Step 2

With the shape selected, click on the Add Layer Mask button found at the bottom of the Layers panel, right in the middle. The icon is of a square with a circle in the middle.

A white box will appear next to your layer icon.

Step 3

Click the layer mask, the white box that appeared, to make sure it’s active. This is your Photoshop mask!

Now, with a Brush set to black, you can mask out any part of that shape. 

Step 4

You can then mask things back in using the color white! Remember, nothing is ever really gone. 

You use black to erase and white to recover. You can even use shades of gray; the darker the gray, the more it will erase. 

Below, I created some star-shaped selections and then masked them out with a black brush.

Step 5

If you move your layer around, your mask will follow and stay attached, indicated by the Chain Link icon located between the layer and layer mask icons.  

However, you can also Unlink the layer and the layer mask, allowing you to move the layer and layer mask around independently, depending on which one you have active. 

Step 6

Finally, if for any reason you want to permanently apply your layer mask, you can Right-Click > Apply Layer Mask on your layer mask.

Once a layer mask is applied, whatever is masked out will become permanently deleted, the layer will turn back into a standard rasterized layer, and you are free to add a new layer mask.  

And There You Have It!

We’ve learned how to create a layer mask in Photoshop! Layer masks are what make photo composites and manipulation possible, allowing us to blend dozens of images to create one cohesive new piece of art! The possibilities are endless. 

So, as always, keep experimenting with different techniques, continue learning how to mask in Photoshop, and don’t forget to post your version below, along with any questions, comments, or critiques!

Looking to learn more? Why not check out the following excellent photo manipulation tutorials:

• 
  Adobe Photoshop
  How to Create an Abstract Diamond Lens Effect in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Honey Bee Themed Photo Manipulation in Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Futuristic Fashion Portrait in Adobe Photoshop
  Abbey Esparza

• 
  Photo Manipulation
  How to Create a Ghostly Horror-Themed Photo Manipulation in Adobe Photoshop
  Abbey Esparza

Post pobrano z: How to Create Line Patterns in Adobe Illustrator

In today’s tutorial, we’re going to take a quick look at the process of creating a set of vector line patterns in Adobe Illustrator, using nothing more than some basic shapes that we’re going to adjust here and there.

Also, don’t forget you can always expand your library by heading over to Envato Elements, where you’ll find a great selection of vector patterns.

So, assuming you already have the software up and running, let’s jump straight into it!

Looking to download vector line patterns? Check out the following article for our recommendations:

• 
  Adobe Photoshop
  40+ Best New Line Patterns (Vector & PSD)
  Melody Nieves

1. How to Set Up a
New Project File

As with every new
project, we’re going to kick things off by setting up a New Document. So head over to File > New (or use the Control-N
keyboard shortcut), and use the following settings:

• Profile: Web
• Number of Artboards:
  3
• Spacing:
  200 px
• Columns:
  3
• Width: 400
  px
• Height: 400 px

2. How to Create
the First Pattern Variation

Now that we’ve
finished setting up our project file, we can start working on our first repeating pattern
segment, which we will later use to create the actual pattern.

Step 1 

Create the main shape for the background using a 400 x 400 px square, which we will color using #78B9FF and then
center align to the first Artboard
using the Align panel’s Horizontal and Vertical Align Center options.

Step 2

Grab the Pen
Tool (P), and draw a diagonal line using a 4 px thick Stroke
(#FFFFFF) starting from the background’s upper-left corner
and going all the way down to its bottom-right one.

Step 3

Adjust the shape
that we’ve just created by heading over to Effect
> Distort & Transform and applying a Zig Zag effect with the following settings:

• Size:
  4 px
• Absolute:
  checked
• Ridges per segment:
  15
• Points: Smooth

Quick tip:
when adjusting the effect, make sure you use an odd number for the Ridges per segment input box since
otherwise when you create the larger pattern, your lines won’t align properly.

Step 4

With the resulting shape selected, add the bottom-left lines by right clicking and then going to Transform > Move where we will
enter -8 px in the Horizontal value field and 8 px in the Vertical one, making sure to press the Copy button in order to create the first line.

Step 5

Once you have the first copy, simply use the Control-D keyboard shortcut (24 times) to duplicate the
action until you’ve filled in the lower empty space.

Step 6

Add the top-right lines by selecting the initial stroke again, and then
going through the same process, making sure to reverse the direction of
the Position, by using a value of 8 px for the Horizontal field and -8 px
for the Vertical one. 

Once you have
the first copy, add the remaining ones using the Control-D keyboard shortcut (23 times), making sure to
select (Select > Same > Stroke
Color) and group all of them together afterwards using the Control-G keyboard shortcut.

Step 7

Finish off the current pattern by creating a copy (Control-C) of the background, which we will paste in front, and
then with both it and the diagonal lines selected, simply right click > Make Clipping Mask. 

Once you’re done, make sure
you select the resulting shapes and the background, and then group (Control-G) them together before moving
on to the next pattern.

3. How to Create
the Second Pattern Variation

Assuming you’ve
finished working on the first pattern’s repeating segment, move on to the neighbouring
Artboard, where we will gradually
build the next one.

Step 1

Start working on the pattern’s first column of repeating shapes by
creating a 20 x 20 px square, which
we will color using #FFE180 and then position in the bottom-left corner of the Artboard, as seen in the reference image.

Step 2

Adjust the shape that we’ve just created by selecting its right anchor
points using the Direct Selection Tool
(A), and then pushing them to the bottom by 16 px using the Move tool (right click >
Transform > Move > Vertical > 16 px).

Step 3

Give the resulting shape an outline using the Stroke method, by creating a copy (Control-C) of it, which we will then paste in front (Control-F) and adjust by first changing
its color to #191515, and then setting its Stroke Weight to 4 px and its Corner to Round Join. Once you’re done, make sure
you select and group the two shapes together using the Control-G keyboard shortcut.

Step 4

Create the right side of the column using a copy (Control-C > Control-F) of the shapes that we’ve just grouped,
which we will vertically reflect (right
click > Transform > Reflect > Vertical) and then position as seen
in the reference image so that their paths overlap.

Step 5

Add the column’s second row by selecting the shapes that we have so far
and then dragging them up while holding down the Shift key (in order to drag in a straight line) and the Alt one (in order to create the
duplicates), making sure to flip the colors as seen in the reference image.

Step 6

Create the remaining upper rows by using the select and drag method to
create the first instance, and then adding the remaining duplicates using the Control-D keyboard shortcut (nine
times), making sure to remove the last row. Take your time, and once you’re
done, select and group all of them together using the Control-G keyboard shortcut.

Step 7

Finish off the pattern by adding the remaining nine columns using the
select and drag method, making sure to group (Control-G) and then mask them using a 400 x 400 px square (desired shapes selected > right click > Make Clipping Mask).

4. How to Create
the Third Pattern Variation

We are now down to
our third and last repeating pattern segment, so assuming you’ve already
positioned yourself on the remaining Artboard, let’s jump straight into it.

Step 1

Start by creating the main shape for the first row using a 40 x 40 px square, which we will color
using #FFB685 and then position in the bottom-left corner of the Artboard, as seen
in the reference image.

Step 2

Adjust the shape that we’ve just created by adding a new anchor point
to the center of its bottom edge using the Add
Anchor Point Tool (+) and then removing its bottom corner ones using the Delete Anchor Point Tool (-). Give the
resulting shape a 4 px thick outline
(#191515) with a Round Join, making
sure to select and group the two together using the Control-G keyboard shortcut.

Step 3

Create a copy (Control-C >
Control-F) of the shapes that we’ve just grouped, which we will
horizontally reflect (right click >
Transform > Reflect > Horizontal) and then position on top of the
original shapes as shown, so that their paths overlap.

Step 4

Add the smaller details using four 16 x 16 px circles (#A0EFD5) with a 4 px thick outline (#191515), which we
will individually group (Control-G)
and then position onto the larger shapes as shown in the reference image. Once
you’re done, make sure you select and group all of
them together using the Control-G
keyboard shortcut.

Step 5

Fill in the row by creating ten overlapping copies using the select and
drag method, making sure to change the color of the inner shape on every second one to #FFE180.

Step 6

Create the second row using ten copies of the orange based triangles,
making sure to position them in-between as seen in the reference image.

Step 7

Add the remaining rows using nine instances of the ones that we already
have, making sure to adjust the position of the yellow triangles as seen in the
reference image. Once you’re done, select and group all of them together using
the Control-G keyboard shortcut,
making sure to mask them using a 400 x
400 px square (desired shapes selected >
right click > Make Clipping Mask).

5. How to Turn the
Repeating Pattern Segments Into Actual Patterns

So up to this
point we’ve gone through the process of creating three different repeating line
pattern variations, which means that now we can finally see how we can turn
them into an actual usable pattern.

Step 1

Start by selecting any of the three pattern segments (since the process
is identical), and then going to Object
> Pattern > Make, which will bring up the following window, where we can
fine tune some of its settings. First, let’s give it a custom name.

Step 2

Moving on down, we have Tile Type, which we’ll always want to leave set to Grid,
followed by the Width and Height settings, which will
automatically be set to that of the Artboard (400 x 400 px) as long as you check the Size Tile to Art option. Leave all the other settings as they are,
and then create the pattern by simply clicking on the Done button found underneath the current project tab.

6. How to Use the Patterns You’ve Created

Okay, so we’ve
created the actual patterns, but how do we actually go about using them?

Well, if you open up the Swatches
panel, you’ll quickly notice that your new patterns have now been added to your
library.

To use any one of them, simply set it as your Fill color and then select the Rectangle Tool (M), and click and drag
in order to draw the desired shape.

Great Job!

There you have it,
a nice and easy exercise on how to create three different line patterns using
some basic shapes.

As always, I hope you had fun working on the project and managed to
learn something new and useful during the process. That being said, if you have
any questions, feel free to post them in the comments section and I’ll get
back to you as soon as I can!

Want to Expand Your Adobe Illustrator Skillbag?!

Just started out using Adobe Illustrator, but haven’t quite gotten the hang of it? Well, today’s your lucky day since we’ve hand-picked a few tutorials that should get you up and running in no time!

• 

  How to Create Pixel-Perfect Artwork Using Adobe Illustrator

  As a beginner, creating digital artwork intended for web use can sometimes get a bit frustrating, especially when you put a lot of time into a piece (be it…
• 

  Understanding Adobe Illustrator’s Grid System

  This quick tip is focused on explaining what the Grid is, how it works, and how you should use it to benefit your design process.
• 

  Quick Tip: Advantages of Using the Clipping Mask Over the Pathfinder Panel

  In today’s quick tip, we will shed some light on a tool that a lot of the time gets ignored due to the complexity that most associate with the way it…
• 

  10 Illustrator Tools Every Designer Should Be Using

  In this article, we’re going to talk about the top ten most useful tools in Adobe Illustrator. Whether you’re into icon design, illustrations or any other…
• 

  40+ Best New Line Patterns (Vector & PSD)

  Love design resources? Check out this list of incredible line patterns from Envato Market and Envato Elements

Post pobrano z: How to Create Line Patterns in Adobe Illustrator

In today’s tutorial, we’re going to take a quick look at the process of creating a set of vector line patterns in Adobe Illustrator, using nothing more than some basic shapes that we’re going to adjust here and there.

Also, don’t forget you can always expand your library by heading over to Envato Elements, where you’ll find a great selection of vector patterns.

So, assuming you already have the software up and running, let’s jump straight into it!

Looking to download vector line patterns? Check out the following article for our recommendations:

• 
  Adobe Photoshop
  40+ Best New Line Patterns (Vector & PSD)
  Melody Nieves

1. How to Set Up a
New Project File

As with every new
project, we’re going to kick things off by setting up a New Document. So head over to File > New (or use the Control-N
keyboard shortcut), and use the following settings:

• Profile: Web
• Number of Artboards:
  3
• Spacing:
  200 px
• Columns:
  3
• Width: 400
  px
• Height: 400 px

2. How to Create
the First Pattern Variation

Now that we’ve
finished setting up our project file, we can start working on our first repeating pattern
segment, which we will later use to create the actual pattern.

Step 1 

Create the main shape for the background using a 400 x 400 px square, which we will color using #78B9FF and then
center align to the first Artboard
using the Align panel’s Horizontal and Vertical Align Center options.

Step 2

Grab the Pen
Tool (P), and draw a diagonal line using a 4 px thick Stroke
(#FFFFFF) starting from the background’s upper-left corner
and going all the way down to its bottom-right one.

Step 3

Adjust the shape
that we’ve just created by heading over to Effect
> Distort & Transform and applying a Zig Zag effect with the following settings:

• Size:
  4 px
• Absolute:
  checked
• Ridges per segment:
  15
• Points: Smooth

Quick tip:
when adjusting the effect, make sure you use an odd number for the Ridges per segment input box since
otherwise when you create the larger pattern, your lines won’t align properly.

Step 4

With the resulting shape selected, add the bottom-left lines by right clicking and then going to Transform > Move where we will
enter -8 px in the Horizontal value field and 8 px in the Vertical one, making sure to press the Copy button in order to create the first line.

Step 5

Once you have the first copy, simply use the Control-D keyboard shortcut (24 times) to duplicate the
action until you’ve filled in the lower empty space.

Step 6

Add the top-right lines by selecting the initial stroke again, and then
going through the same process, making sure to reverse the direction of
the Position, by using a value of 8 px for the Horizontal field and -8 px
for the Vertical one. 

Once you have
the first copy, add the remaining ones using the Control-D keyboard shortcut (23 times), making sure to
select (Select > Same > Stroke
Color) and group all of them together afterwards using the Control-G keyboard shortcut.

Step 7

Finish off the current pattern by creating a copy (Control-C) of the background, which we will paste in front, and
then with both it and the diagonal lines selected, simply right click > Make Clipping Mask. 

Once you’re done, make sure
you select the resulting shapes and the background, and then group (Control-G) them together before moving
on to the next pattern.

3. How to Create
the Second Pattern Variation

Assuming you’ve
finished working on the first pattern’s repeating segment, move on to the neighbouring
Artboard, where we will gradually
build the next one.

Step 1

Start working on the pattern’s first column of repeating shapes by
creating a 20 x 20 px square, which
we will color using #FFE180 and then position in the bottom-left corner of the Artboard, as seen in the reference image.

Step 2

Adjust the shape that we’ve just created by selecting its right anchor
points using the Direct Selection Tool
(A), and then pushing them to the bottom by 16 px using the Move tool (right click >
Transform > Move > Vertical > 16 px).

Step 3

Give the resulting shape an outline using the Stroke method, by creating a copy (Control-C) of it, which we will then paste in front (Control-F) and adjust by first changing
its color to #191515, and then setting its Stroke Weight to 4 px and its Corner to Round Join. Once you’re done, make sure
you select and group the two shapes together using the Control-G keyboard shortcut.

Step 4

Create the right side of the column using a copy (Control-C > Control-F) of the shapes that we’ve just grouped,
which we will vertically reflect (right
click > Transform > Reflect > Vertical) and then position as seen
in the reference image so that their paths overlap.

Step 5

Add the column’s second row by selecting the shapes that we have so far
and then dragging them up while holding down the Shift key (in order to drag in a straight line) and the Alt one (in order to create the
duplicates), making sure to flip the colors as seen in the reference image.

Step 6

Create the remaining upper rows by using the select and drag method to
create the first instance, and then adding the remaining duplicates using the Control-D keyboard shortcut (nine
times), making sure to remove the last row. Take your time, and once you’re
done, select and group all of them together using the Control-G keyboard shortcut.

Step 7

Finish off the pattern by adding the remaining nine columns using the
select and drag method, making sure to group (Control-G) and then mask them using a 400 x 400 px square (desired shapes selected > right click > Make Clipping Mask).

4. How to Create
the Third Pattern Variation

We are now down to
our third and last repeating pattern segment, so assuming you’ve already
positioned yourself on the remaining Artboard, let’s jump straight into it.

Step 1

Start by creating the main shape for the first row using a 40 x 40 px square, which we will color
using #FFB685 and then position in the bottom-left corner of the Artboard, as seen
in the reference image.

Step 2

Adjust the shape that we’ve just created by adding a new anchor point
to the center of its bottom edge using the Add
Anchor Point Tool (+) and then removing its bottom corner ones using the Delete Anchor Point Tool (-). Give the
resulting shape a 4 px thick outline
(#191515) with a Round Join, making
sure to select and group the two together using the Control-G keyboard shortcut.

Step 3

Create a copy (Control-C >
Control-F) of the shapes that we’ve just grouped, which we will
horizontally reflect (right click >
Transform > Reflect > Horizontal) and then position on top of the
original shapes as shown, so that their paths overlap.

Step 4

Add the smaller details using four 16 x 16 px circles (#A0EFD5) with a 4 px thick outline (#191515), which we
will individually group (Control-G)
and then position onto the larger shapes as shown in the reference image. Once
you’re done, make sure you select and group all of
them together using the Control-G
keyboard shortcut.

Step 5

Fill in the row by creating ten overlapping copies using the select and
drag method, making sure to change the color of the inner shape on every second one to #FFE180.

Step 6

Create the second row using ten copies of the orange based triangles,
making sure to position them in-between as seen in the reference image.

Step 7

Add the remaining rows using nine instances of the ones that we already
have, making sure to adjust the position of the yellow triangles as seen in the
reference image. Once you’re done, select and group all of them together using
the Control-G keyboard shortcut,
making sure to mask them using a 400 x
400 px square (desired shapes selected >
right click > Make Clipping Mask).

5. How to Turn the
Repeating Pattern Segments Into Actual Patterns

So up to this
point we’ve gone through the process of creating three different repeating line
pattern variations, which means that now we can finally see how we can turn
them into an actual usable pattern.

Step 1

Start by selecting any of the three pattern segments (since the process
is identical), and then going to Object
> Pattern > Make, which will bring up the following window, where we can
fine tune some of its settings. First, let’s give it a custom name.

Step 2

Moving on down, we have Tile Type, which we’ll always want to leave set to Grid,
followed by the Width and Height settings, which will
automatically be set to that of the Artboard (400 x 400 px) as long as you check the Size Tile to Art option. Leave all the other settings as they are,
and then create the pattern by simply clicking on the Done button found underneath the current project tab.

6. How to Use the Patterns You’ve Created

Okay, so we’ve
created the actual patterns, but how do we actually go about using them?

Well, if you open up the Swatches
panel, you’ll quickly notice that your new patterns have now been added to your
library.

To use any one of them, simply set it as your Fill color and then select the Rectangle Tool (M), and click and drag
in order to draw the desired shape.

Great Job!

There you have it,
a nice and easy exercise on how to create three different line patterns using
some basic shapes.

As always, I hope you had fun working on the project and managed to
learn something new and useful during the process. That being said, if you have
any questions, feel free to post them in the comments section and I’ll get
back to you as soon as I can!

Want to Expand Your Adobe Illustrator Skillbag?!

Just started out using Adobe Illustrator, but haven’t quite gotten the hang of it? Well, today’s your lucky day since we’ve hand-picked a few tutorials that should get you up and running in no time!

• 

  How to Create Pixel-Perfect Artwork Using Adobe Illustrator

  As a beginner, creating digital artwork intended for web use can sometimes get a bit frustrating, especially when you put a lot of time into a piece (be it…
• 

  Understanding Adobe Illustrator’s Grid System

  This quick tip is focused on explaining what the Grid is, how it works, and how you should use it to benefit your design process.
• 

  Quick Tip: Advantages of Using the Clipping Mask Over the Pathfinder Panel

  In today’s quick tip, we will shed some light on a tool that a lot of the time gets ignored due to the complexity that most associate with the way it…
• 

  10 Illustrator Tools Every Designer Should Be Using

  In this article, we’re going to talk about the top ten most useful tools in Adobe Illustrator. Whether you’re into icon design, illustrations or any other…
• 

  40+ Best New Line Patterns (Vector & PSD)

  Love design resources? Check out this list of incredible line patterns from Envato Market and Envato Elements