Quantcast
Channel: Envato Tuts+ Design & Illustration
Viewing all 8958 articles
Browse latest View live

How to Use Optical Illusions to Be a Better Digital Artist

$
0
0

Reality can't be painted; it's impossible. However, our brains are easy to fool—if something shows certain features of the real thing, we see it as the real thing. We aren't usually aware of this, until we come across pictures presenting optical illusions. Only then do we feel fooled, but the truth is we are being fooled all the time.

optical illusions this is not a cube

This isn't a cube. A cube is a three-dimensional form, and it can be rotated to present other views. What you see are flat lines made out of light dots on your screen. The visual information you receive when looking at this is similar to information coming from a cube seen in a certain view, so your brain assumes this is a cube. What's more interesting is that this information doesn't even need to be fully accurate:

optical illusions impossible cube

You can see a cube in many views, but this isn't one of them. A cube simply never looks like this! But these lines look close enough to what your brain expects to get from a cube, so you see a cube.

Drawing and painting are the art of illusion. We don't draw/paint a horse—we create something generating visual signals similar to the ones our brain would expect from a horse. To become a great realism artist, you must understand how it works, and optical illusions are a perfect material to learn from. This way you'll be able to use the power of illusion instead of accidentally working against it.

So, what can we learn from optical illusions?

1. We Use the Autocomplete Function

To help us survive, our brain must be very efficient at what it does. It can't wait to get 100% information—most of the time it quickly gathers a few facts and then fill the gaps with assumptions, gaining the most time possible for our reaction. That's why we can notice something after getting only a percentage of information, but it also means we can easily get deceived:

optical illusions kanizsa triangle
Kenizsa's Triangle: the white triangle is created by your brain. You see its contours, even though there are none!
optical illusions invisible outline
There's no circle in this picture

This mechanism is the reason why drawing is so easy, at its most basic level. You draw a line, it reminds you of something, and then you add another line to make this impression more striking. You don't need to learn anything to draw a simple representation of a real object—if you are able to recognize it, your brain knows what should be drawn. You just need to guess it!

optical illusions why drawing is easy
It doesn't meow, it doesn't have paws, you can't pet it or feed it... Yet you call it a cat!
optical illusions where drawing styles comes from
When does it stop being a lion? (Image from How to Learn to Draw: Stage Four, Style)

When you have a word on the tip of your tongue, you are not able to say it aloud, but if you read it, you'll know it's what you meant. Our vision uses the same mechanism. If you want to guess what you should draw, you need to draw it to see if you're right. If it's wrong, you'll have to start from scratch, but often you won't see your mistakes until you're halfway there.

To avoid fruitless work, use the autocomplete function of your brain. Don't draw full lines—create an illusion of them by drawing dots in crucial places. First, they're simple to draw, and second, you can easily fix their position when you see they make the wrong kind of line. Also, it's so much easier to draw a line when you see both its ends!

optical illusions hwo to draw a line precisely

You can apply this mechanism to the whole process of drawing an object: start from general lines, and then go towards more specific ones. This way you'll be creating steps for yourself, instead of trying to jump over a gap.

Let's say you want to draw this cat. Don't start from the eyes or paws—these are details. Start big, for example by defining the area where the torso will be with dots. Dots will show you the area even though there's no outline yet.

optical illusions how to draw animal torso
Image: Animal Reiki

Connect the dots by simply drawing over the line you already see, even though it's not there. Once you have one part drawn, use it as a point of reference. Add more dots.

optical illusions how to draw propertions from a reference
Draw a line after you see it, not the other way around

Connect the dots or use them as another point of reference. Then go more and more into details.

optical illusions how to draw cat from a reference
optical illusions how to draw perspective from a reference
optical illusions how to draw cat precisely

Finally, when the body is sketched, you can draw the details. Again, these don't have to be all the details! The autocomplete function works here as well, so people will see what hasn't been drawn on the basis of what has been.

optical illusions how to draw cat from reference proportionally

This kind of drawing uses visual cues as a support, and this makes the process more precise. What's more, if you don't like the sketch, you can create another in a few minutes. If you did it the classic way (details first), you would have to spend a lot of time drawing without any guarantee that it will look good in the end.

2. Brightness Creates Form

Light is all we can see. Our brains get much information from light reflected from an object, but the most important information is the amount of that light, which hints at the form of the object.

Sound complicated? Just look at this picture. These are both flat shapes—you can't rotate them. However, the one on the right looks as if you could.

optical illusions how do we see form

It's the same with these shapes. They're both flat, and they're both made of the same lines. Yet, the one on the right looks as if you could hold it in your hand.

optical illusions how do we see spheres

This is because your brain has learned to read the form of an object by analyzing the disturbance of the light rays on its surface. This information is presented to you in the form of various shades of gray. It can be simplified to:

  • White—light source
  • Bright grays—a surface turned to the light source
  • Dark grays—a surface turned away from the light source
  • Black—a surface blocked from the light source by another surface

It means that once you know where the light source is, the location of everything else can be calculated accordingly. It also means that the brightnesses of every surface of the scene are all closely tied together. This lead to two conclusions important for us:

  • You can create a 3D-looking scene without using a single line.
  • The brightness of a surface is never random.

We all know, intuitively, that different shades of gray are necessary to create a 3D effect, but again, we need to paint it to see if we guessed right. This may result in getting a fully shaded, but still flat painting. To avoid it, we need to work according to this and the previous mechanisms of vision.

When painting something, imagine that you're actually sculpting it. Imagine a big block of clay or a stone, the most generalized form of what you want to create. Then establish your light source and shade that big block. Once you're done, make that block slightly more specific and adjust the lighting to it. Do it repeatedly, step by step, until there's no more detail left to add.

If you want to learn more about how light and shadow affect what we see, check out Improve Your Artwork by Learning to See Light and Shadow.

optical illusions how to create realistic shading
This method lets you create a painting that's read by your brain as a 3D scene.

3. Brightness Is Relative

This is a very popular type of optical illusion. The squares in the middle are the same brightness, but they certainly don't look this way. You could swear that the one on the left is much darker. And you know what? You'd be right!

Sure, both squares send the same amount of light to our eyes, but the perceived value is different. And we don't care about the specific amount of light—it's perception that interests us!

optical illusions how we see brightness

When looking at a scene, your brain searches for the brightest and the darkest shade. They are being used to create the sense of contrast. And it doesn't matter that white is the brightest shade, or that black is the darkest shade we know—if they're not in the scene, some other shades become the extremes.

If you compare both tonal schemes, you'll notice that the same shade of gray is the darkest shade in one scene, and the brightest shade in another. No wonder we perceive them differently! They simply have a different role in their schemes.

optical illusions how contrast is created

This knowledge is really important in painting, because it lets you achieve proper contrast. Contrast is measured in the amount of distinct shades between both extremes. If the contrast is low, it doesn't mean your scene lacks black and white—it means that it has few distinct shades.

Just look: this picture had a seemingly low contrast, so it has been fixed in Photoshop. Both extremes have been switched into, respectively, black and white, but it didn't help the picture. The contrast became too high—the shades are too distinct.

optical illusions how to fix contrast in digital painting
optical illusions low contrast high contrast difference
1—contrast too low; 2—balanced contrast; 3—contrast too high

In order to achieve a balanced contrast, you don't need to use black and white.
You only need to remember two rules:

  • There should be a lot of distinct shades between the extremes.
  • The more extreme the shade, the less of it should be in the scene.
optical illusions how to use contrast in digital painting
How many is "a lot"? It depends on the result you want to get. In cartoons, for example, three can be just enough.
optical illusions how to fix contrast in photoshop
An automatic adjustment of contrast will neither create distinct shades, nor will it make the extremes less prominent.

4. Lines Come From Contrast

This illusion is so obvious to us that we don't even notice anything odd about it. But look: the shapes on the left look like a single shape, while on the right we can see two. How does it happen?

optical illusions where do lines come from

Of course, it's the matter of contrast. Our brain uses contrast—the difference of brightness— to analyze edges of the objects. These edges can be then converted to lines:

optical illusions how to create lines in digital drawing
optical illusions how lines are created in digital painting

So, this is where lines come from! Why is it so interesting? Most of us start our artistic journey with a pencil, a line making tool. We draw lines that make sense to us without asking why they do.

If you're this kind of artist and you get a digital tablet, your first impulse is to create paintings by coloring your drawings. You notice that other artists paint without lines, somehow, but if you try to remove lines from your artworks, they start looking bad. Why?

It's because our brain sees lines in the proper changes of contrast. If you want to remove the linework, you must paint the shading that created the lines in the first place. A lineless artwork still has lines—the ones created by contrast.

optical illusions how to paint linelessly
Contract has much more impact than lines

The lesson to take from this is pretty obvious. If you want to paint something, contrast should be the first thing to consider. Not colors, not details, but the contrasting brightness of various elements in the scene. Use both shading and the local brightness of the elements to achieve this goal. You can learn how to create a painting based on line art here: The Basics of Coloring and Shading Line Art in Adobe Photoshop.

To check the impact of contrast in your scene before spending time on it, you can use thumbnails. These are little sketches consisting of shapes only, without any details. They should look like the final artwork observed at a great distance or with your eyes squinted. Because they are so simple, you can paint a lot of them and move on with the most promising version.

You can read more about thumbnails here: Digital Painting 101: Thumbnail Drawing for Beginners.

optical illusions painting thumbnails what are they for
You can use thumbnails to test composition and colors as well

One more thing: you are not able to paint something without a background. Whether it's neutral gray or white, it's always a shade that becomes a part of the scene for your brain. Don't ignore it, or it may be used against you!

5. Colors Are Relative

These two purple squares have exactly the same hue, saturation, and brightness. Yet they look pretty different to our eyes.

optical illusions colors are relative
This illusion proves that color is created by your brain

This isn't only about brightness—colors can change hue and saturation depending on their neighbors! Why? In the real world, colors are affected by light conditions, so you often see the same object colored differently. That difference isn't random—for example, colors in shadow seem darker.

But colors are supposed to be information for us, and it's useless if it changes all the time. Thus, your brain adjusts to various light conditions and makes you believe you see the same color all the time.

optical illusions colors are based on lighting

But for this to work, the changes must be consistent. Your brain analyzes them like this: colors get darker = colors are in the shadow = remove the darkness from them to show the original colors. That's why the purple square looks brighter on the "shadow" side. If an object in the shadow is as bright as one in the light, it must mean it would be brighter in the light. 

optical illusions colors are based on comparison
Your brain knows these can't be the same colors!

What does it mean for us? We must understand that colors don't exist separately, each on their own. Even if you paint a red dot on a white background, a visual relation between red and white is created. And we see that relation, not separate colors.

This is the problem. Once you choose the color of the background, it will affect any other color. You can't just take a color with a certain Hue, Saturation, and Brightness, because its actual look will depend on its environment. We want a certain appearance of a color, but we are only left with certain properties that give different results!

For example, in the illustration above, the colors on the "shadow side" look bright only because they are all equally darkened. When they are put outside, on a white background, they become so dark you can barely recognize them. The same color, #333300 ("dark yellow"), is perceived as two different ones.

optical illusions why we perceive the same colors differently

So how can you manage colors, if you can't truly see them until they're all in the picture? There are many methods, the efficiency of which depends on your favorite technique of painting.

If you like to start your paintings in grayscale, the best way is to use the value (relative brightness) of colors without considering their hue and saturation. They can be added later using a layer in Color Blend Mode, and if the contrast is proper, every color will look good on it.

You can learn more about value in my tutorial The Secret to Realistic Painting: How to Master Value. Also, if you want to discover the real power of Photoshop's Blend Modes, try one of our courses:

optical illusions how to color grayscale

If you're a more traditional kind of artist, and you prefer to use colors from the start, you may find it useful to plan a color scheme first. You can use thumbnail paintings for this—just sketch your idea in a small format and adjust the colors on the fly. Use local colors, i.e. "colors seen on an overcast day", with the potential to be brighter yet.

optical illusions how to use color thumbnails for digital painting

Thumbnail painting lets you see the relation between all the colors in the scene before you start working on the actual piece. This way you create a color scheme including a percentage of each color in the artwork.

Another thing to consider is that every material has a certain color reached at perfect illumination. "Green" grass and a "green" monster may not be 100% green in perfect light—they all have their own limits. This is another reason to avoid looking at a color as a certain combination of HSB—natural colors rarely reach 100% "global" Brightness, even when they are, "locally", 100% bright:

  1. Global Brightness of green
  2. Local monster-green
  3. 100% bright monster-green
  4. Local grass-green
  5. 100% bright grass-green

If it seems confusing to you, you can try my article Color Fundamentals: Shading.

optical illusions why colors are relative
A surface's 100% brightness may not have anything to do with 100% Brightness

6. Patterns Make Form

This chessboard pattern looks as if it covers hills and valleys. It doesn't, though—it's as flat as any other pattern on your screen.

optical illusions types pattern
Image: Black-white plane

Our brain relies greatly on the distortions made by perspective, and a pattern is affected by perspective exceptionally strongly. Just compare a plain floor to a tiled one! Patterns are so powerful that they're able to define form without any outlines or even light and shadow.

How to use this knowledge? First, whenever you use a pattern, don't leave it flat. It will make it all worse! Adjust it to the form that you want your viewers to see, and you'll be greatly rewarded.

optical illusions how to use pattern to create 3d effect

Patterns can be anything that's repeatable: scales, fur, cloth marks, dirt... Whenever you use them, adjust them to the surface they're placed on. Make them fit the shading, too. A random, half-baked pattern does more harm than good!

In Photoshop, you can use one of these tools to adjust the patterns:

  • Edit > Puppet Warp
  • The Free Transform Tool (Control-T) in Warp Mode
  • Filter > Liquify

Also, keep in mind that most of the time it will be necessary to use a few pattern layers for separate body parts. Don't avoid it! Use a Layer Mask to hide the seams (you can learn about Layer Masks in this quick tutorial: Quick Tip: Layer Mask vs. the Eraser Tool in Adobe Photoshop).

how to adjust pattern scales fur digital painting

Second, form is revealed by repeating lines, too. For example, here your brain sees a cylinder, even though it's just a set of curves.

optical illusions cylinder curves

Such curves are very powerful. If you create a piece of line art with them, you'll be able to see the form fully, leaving nothing to guess.

optical illusions how to daw wireframe digital drawing

Such a "wireframe" of lines affected by perspective can then be used for estimating the direction of fur, and it makes shading obvious as well.

If you want to learn how to create such a wireframe, take a look at Think With Forms, Not Lines: Take Your Drawing to the Next Level.

optical illusions how to shade animals digital painting

Conclusion

The human brain is a fascinating structure, but it's not flawless. It does a great job at helping us survive in our reality, but it achieves it often by guessing and estimating. That's actually good for us—otherwise, we wouldn't be able to draw or paint anything realistic!

You have learned what optical illusions tell us about the way our brain works. Now you can use your knowledge to fool it into thinking it's looking at real things even when they're only drawn or painted. Be it drawing, shading, or coloring, every technique can be improved by following the rules of our vision.

But the good news is that our brains are so easy to fool that you can make a lot of mistakes without losing any clarity. That's why we have so many more or less realistic styles! Don't push yourself to achieve photo-realism—it's completely unnecessary. There are countless ways to picture reality, so find your own!


Getting Started With Photoshop Actions

$
0
0

Actions are one of the most powerful features in Adobe Photoshop. With actions you can automate almost anything. If you have a process that you regularly do over and over, actions can really save you a lot of time.

As you start using more advanced Photoshop techniques, you’ll find that many of them involve multiple steps. For example, setting up a portrait for frequency separation retouching requires you to go through at least six steps. With an action, you can combine all of them into a single button press.

In this tutorial you'll learn how to get started with actions.

colour toning action results
The layers created by my colour toning action.

How to Install Actions

There are two ways to get actions: you can build your own or install ones created by someone else. Building your own gives you the most control but it can be a complicated process. If you can find a high quality action that someone else has made, it can save you a lot of time.

The Envato Market has hundreds of great actions for sale. You can often find one that does what you’re looking for. You can also find hundreds of actions available for free online although they aren’t always very good.

To install an action, download the .ATN file. Open the Actions Panel in Photoshop and select Load Actions from the dropdown. Navigate to the .ATN file and select Load. The actions will then be available for you to use.

For a more detailed walkthrough, check out Kirk Nelson’s tutorial on installing Photoshop actions.

In Defence of Presets

Actions can be a divisive subject. Some photographers dismiss them as a heavy handed tool for beginners. While there is some truth to this—a lot of bad, free actions get overused by photographers when they’re just starting out—there are plenty of great reasons to use actions in your workflow. 

The biggest problem with actions is when someone uses them to apply a complete effect without tweaking it in anyway for the specific image. The final effect is normally over-the-top and ugly. This is the wrong way to use actions.

Instead, actions should be used to automate different parts of your workflow, not slapping on someone else's. For example, rather than applying a gaudy high-contrast sepia effect, an action should create the layers for you to add your own split toning. The default can be sepia, but the layers should be easy for you to modify so they work for that image.

I’ve written a full defence of presets and actions before. If you’re still not sure where actions can fit into your workflow, check out my article on five reasons to automate your post-production.

What are Photoshop Actions and How to Create Them?

You’ve probably picked up by now that, while I’m a huge fan of actions, I’m not always big on using ones created by other people. I think that by far the best way to use them is to create actions that fit your needs perfectly. While it’s a bit more effort, it pays off in a big way. I use two or three actions on every image I edit—collectively they’ve saved me days of post-processing time. 

To record an action in Photoshop, open the Actions Panel, press the New Action button and then press the Record icon. Every step you take will be saved. For example, if you create a Curves adjustment layer, that will be added to the new action. When you run it, an identical Curves layer will be created.

Melody Nieves has a great article that covers the basics of creating Photoshop actions as well as offering some really helpful tips. If, however, you’re completely new to actions, Kirk Nelson’s course, Building Your Own Actions in Adobe Photoshop, is the best place to start.

Finding the Actions In Your Workflow

The hardest part of creating your own actions isn’t the actual recording, but thinking about your workflow and breaking down what you want an action to do. It’s too easy to limit your actions to a single, specific situation rather than creating ones that can work with any image. It’s not about creating a single perfect action, but rather using them to assist in how you approach post-processing.

Go For Broad Strokes Over Specifics

The best analogy I’ve found is to think of actions as a Swiss Army Knife: you won’t use every tool each time, but it’s really handy to have them available. For that reason, I tend to create broad, all-encompassing actions with more layers than I need. I can always delete the layers I don’t use.

As an example, I’ve an action for colour toning images in Photoshop. It creates five layers:

  • A Gradient Map layer that I can modify to have any effect I want.
  • A Solid Colour layer that’s limited to the Highlights.
  • A Solid Colour layer that’s limited to the Shadows.
  • A HSL layer.
  • A Curves layer.

I’ll rarely use all five layers to colour tone an image; instead, I’ll use two or three and delete the rest. However, the action provides me with all the tools I need to colour tone almost any image at the single click of a button. It’s a Swiss Army Knife.

Find The Repetition

The key is to analyse your workflow from a high level to find repetitive techniques that can turned into actions. Adding an action too early when you're learning how to process photographs in a particular style can actually be detrimental: not doing the work manually stops you from feeling things through. It's the sticky points, the things you find yourself doing over and over again, that are perfect for automation.

Rather than creating three or four different colour toning actions, it’s better to create one that can be adjusted so that it works for any image. I always colour tone my photos, but the technique I use depends on the effect I want. Make action that are flexible enough to work in a variety of situations.

If there are steps, such as cleaning up an image, that you always do but you often use different techniques, look at how you can combine them into a single Swiss Army Knife action. I’ve similar actions for dodging and burning, black and white conversions, and sharpening.

I’ve gone into more detail on how to break your workflow into actions in this article. While it is more concerned with creating actions for a consistent post-processing approach than general tools, everything I said in it still holds true.

Wrapping Up

Actions are one of my favourite Photoshop features. They save you a tonne of time and make using Photoshop much more pleasant. Over the next few months, I’m going to be covering actions in more detail by breaking down and teaching you how to build some of my actions.

If you’ve any questions about actions, please ask away in the comments. I’m happy to help.

How to Create Delicious Cupcake Icons in Adobe Illustrator

$
0
0
Final product image
What You'll Be Creating

In this tutorial you will learn how to create a cupcake icon in Adobe Illustrator, and starting from the first one, you'll create other delicious variations just by making a few changes.

Let's take advantage of the overhead view of these icons and be as creative as possible with the decorations. The four flavors that I've chosen are vanilla confetti, red velvet, chocolate almond, and blueberry cream. Let's begin!

If you are hungry for more food icons or vector icons in general, then Envato Market has you covered, with plenty of designs to choose from.

1. Start a New Project

LaunchIllustratorand go to File> New to open a blank document. Type a name for your file, set up the dimensions, and then select PixelsasUnitsandRGBasColor Mode. Make sure that Align New Objects to Pixel Grid is not checked.

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

Start New Illustrator Document

2. Create the Paper Cup

Step 1

Start by drawing a 190 x 190 px circle on your artboard with the Ellipse Tool (L). With the shape still selected, go to Effect > Distort & Transform > Zig Zag and apply the settings shown.

Draw Ellipse for Paper Cup and Apply Zigzag

Step 2

With the circle still selected, choose Expand Appearance from the Object menu and Ungroup (Shift-Control-G) if necessary. Fill the resulting shape with the linear gradient shown at a -45 degrees Angle. Let's name this shape “paper exterior”.

Fill with Gradient

Step 3

While “paper exterior” stays selected, go to Object > Path > Offset Path and apply a -3 px Offset. Fill the smaller shape with the radial gradient shown and name it “paper interior”.

Group (Control-G) these two shapes and name the group “paper cup”.

Offset and Fill

3. Create the Cupcake

Step 1

UseEllipse Tool (L) to draw a 170 x 170 px circle and arrange it in the center. Fill it with the radial gradient shown and name the shape “cupcake”.

Draw and Fill Ellipse for Cupcake

Step 2

While “cupcake” stays selected, take a look at the Appearance panel. Add a New Fill above the first and keep the same gradient. Go toEffect > Texture > Texturizer, apply the settings shown, and hitOK. Reduce the Opacity to 33%

Apply Texturizer to Cupcake

4. Create the Vanilla Icing

Step 1

Draw a shape like below and fill it with yellow (1). Copy and Paste in Back (Control-B) this shape, change the fill color to warm brown, and then move it a little down and to the right to act as the shadow (2).Copy and Paste in Front (Control-F) the first shape, make it smaller, and change the fill color (3).  

Create icing shapes

Step 2

Grab the Pen Tool (P) or the Pencil Tool (N) and draw a spiral in the center (1). Stroke it with the Charcoal – Rough Art Brush from theBrush Libraries Menu > Artistic > Artistic_ChalkCharcoalPencil. Select yellow as the stroke color and set the Weight to 2 pt (2). Next, go to Effect > Stylize > Feather and apply a Radius of 5 px (3).  

Apply Rough Art Brush

Step 3

Copy and Paste in Front (Control-F) the spiral from the previous step, change the stroke color to brown, and set the Weight to 0.5 pt. The rest of the settings remain the same. 

Add Another Smaller Stroke

Step 4

Draw a new spiral in the middle but smaller. Use the Charcoal – Rough Art Brush again to stroke it and keep the Weight at 1 pt. Apply a 5 px Feather Radius.

Add and Feather another stroke

5. Decorate With Confetti Sprinkles and Cherry

Step 1

To create the confetti, just take the Ellipse Tool (L) and draw as many small circles as you like. Fill them with various colors, and after that Group (Control-G) all of them. With the group still selected, go to Effect > Stylize > Drop Shadow and apply the settings shown. 

create confetti on cupcake

Step 2

For the cherry, start with a 50 x 50 px circle. Fill it with the radial gradient shown below. 

Draw Circle for Cherry

Step 3

Draw a small shape on the upper left side using the Pen Tool (P). Fill it with the linear gradient shown; then go to Effect > Blur > Gaussian Blur and apply a Radius of 2 px

Add Reflection Shape

Step 4

Draw another small shape in the bottom right side and fill it with the linear gradient shown. After that, apply a 2 px Gaussian Blur

Add second refection shape

Step 5

Group (Control-G) all the shapes that compose the cherry and move them onto the icing. Draw a new circle about the size of the cherry, fill it with the radial gradient shown, and then set to Blending Mode Multiply. This shape will act as the shadow and should be behind the cherry. 

At this point, the Vanilla Confetti Cupcake is ready.  

Move Cherry and Add Shadow

6. Create the Red Velvet Cupcake

Step 1

Now, we are going to transform the vanilla cupcake into a red velvet cupcake. First, make a copy of the vanilla cupcake, but delete the confetti and the cherry because you don't need them. 

Copy all but confetti and cherry

Step 2

For visual purposes and to focus better on the changes that you need to make, I've hidden the icing group, but you don't have to.

First, select “paper exterior” and change the fill gradient, and after that change the fill color for “paper interior”. 

Change fill colour

Step 3

Select “cupcake”, and in the Appearance panel, change the two existing gradients to the one shown below. Increase the Opacity to 44%

Change gradients

Step 4

Change the fill colors of the three shapes that compose the icing, and after that change the stroke colors of the three spirals. The rest of the settings remain the same.

Change spiral stroke color

Step 5

Use the Pen Tool (P) to draw a random but very small shape and fill it with red. Don't draw a circle because in the end, the red crumbs on the icing will look too perfect and regular. Drag this shape into theBrushes panel and choose New Scatter Brush.

Now, grab the Pen Tool (P) and draw a messy spiral on the icing, and use the Scatter Brush that you just saved to stroke it. Keep the Weight at 1 pt but open the Stroke Options window (double click on the Stroke attribute in the Appearance panel) and change the settings as indicated. 

Create and use new scatter brush

Step 6

While the messy spiral stays selected, go to the Object menu and choose Expand Appearance. As a result, the stroked path will turn into a group of red crumbs. Take the Selection Tool (V) and double click on this group to enter the Isolation Mode

Now, you'll be able to select the crumbs individually and delete the ones that are scattered too far away. To Exit Isolation Mode, press the arrow in the corner twice. 

At this point, the Red Velvet Cupcake is ready. 

Delete unwanted crumbs

7. Create the Chocolate and Almonds Cupcake

Step 1

Now, let's transform the red velvet cupcake into a chocolate cupcake. First, make a copy of the red velvet cupcake, but delete the red crumbs. 

Copy all but crumbs

Step 2

The paper cup remains the same. Select “cupcake” and change the two gradients in the Appearance panel. 

Modify gradients

Step 3

Change the fill colors of the three shapes that compose the icing, and after that, change the stroke colors of the three spirals as indicated. I also made a copy of the smaller spiral and moved it to the top. 

Change colors

Step 4

Draw an oval shape with the Pen Tool (P) similar to an almond slice. Make a few copies and arrange them over the chocolate icing. Use the two gradients to fill them. 

Draw Almond Slices

Step 5

Apply the Drop Shadow effect to each almond slice in order to add a small shadow. You can't really apply the same settings to all of them because that depends on the position of the almonds, but in the next image, you can see two examples. 

At this point, the Chocolate and Almonds Cupcake is ready. 

Apply drop shadow

8. Create the Blueberry and Cream Cupcake

Step 1

Now, let's transform the vanilla cupcake into a blueberry cupcake. First, make a copy of the vanilla cupcake, but delete the confetti and the cherry. 

Copy the cupcake

Step 2

The paper cup and the cupcake remain the same. Change the fill colors of the three shapes that compose the icing, and after that, change the stroke colors of the three spirals. 

Change the colors

Step 3

Go to the red velvet cupcake, select only two out of the three shapes that compose the icing, and make a copy. Group (Control-G) the two shapes, make them smaller, and arrange them over the blueberry icing. 

Copy the icing

Step 4

Now, make a copy of the cherry, and let's transform it into a blueberry. First, select the circle and change the gradient fill. After that, change the fill colors of the two highlight shapes. The Gaussian Blur effect remains the same. 

Change the cherry color

Step 5

Move the blueberry on the icing. Draw a new circle about the size of the blueberry and fill it with the radial gradient shown. Set theBlending Mode to Multiply. This shape will act as the shadow and should be behind the blueberry. 

At this point, the Blueberry Cream Cupcake is ready. 

Apply shadow

9. Add the Shadows

Step 1

Select the “paper cup” group, go to Effect > Stylize > Drop Shadow, and apply the settings shown. 

add shadow to cupcake

Step 2

Repeat the previous step for the other three cupcakes. Apply the Drop Shadow effect to each “paper cup”. 

add shadow to other cupcakes

Congratulations, You're Done!

Challenge your creativity and use these cupcakes as a starting point to create other delicious flavors, or decorate them in a different way. If you do, don't forget to share your re-creations with us. I would love to eat them.... oops! I mean, to see them! 

overhead view cupcake icons

The Graphic Designer's Presentation and Promotion Kit

$
0
0

Last month we shared a huge list of assets to boost your work, and now it's time to focus on promotion and presentation. We'll run through a fantastic list of web design templates and presentation mock-ups for portfolios, resumes and business cards for all of your print needs, and social media icons and graphics for your web presence, all of which you can find on Envato Market!

WordPress Themes

First up is a big collection of WordPress themes for portfolios, blogs, and more! Below you'll find a variety of styles, from single pages to creative styles to beautifully designed minimal themes. Take each theme and its variations for a spin with live previews to get a feel for what you can expect should you purchase the design.

Lydia

Lydia works fantastically as a combination portfolio and blog. Focusing on big images in a responsive and highly customizable layout, Lydia makes great use of WordPress portfolio features as well as interactive social media sections (such as an Instagram feed).

Lydia - Photography  Magazine WordPress Theme

Boden

Boden is a clean, modern layout perfect for displaying your work without too many frills or fuss. 

Boden - Creative WordPress Portfolio Theme

Bigbang

A fantastic portfolio theme with customization options like the way images are shaped in the portfolio and more!

Bigbang - Responsive WordPress Template

Nobel 

Nobel is a minimal, image-focused theme, perfect for cutting down on the wordiness of websites and focusing entirely on the imagery of your portfolio itself.

Nobel - Minimal  Versatile Multi-Concept Portfolio  Agency WordPress Theme

Jarvis

Jarvis is a popular one-page theme filled with customization options in order to really make it your own. As a base template, it's bold and stylish, perfect for content that needs to move with a variety of devices and make your work pop.

Jarvis - Onepage Parallax WordPress Theme

Expression

Expression is a fun, responsive portfolio theme that focuses on showcasing your work in a variety of customizable designs that include a variety of color themes, backgrounds, and more.

Expression Photography Responsive WordPress Theme

Visia

Visia is a responsive, one-page theme perfect for showcasing projects, services, and more for your own design business or a partnership with others.

Visia - Responsive One Page Retina WordPress Theme

Daisho

Daisho is a fun and flexible theme whose portfolio settings tile together in a dynamic layout and allow for beautifully designed pages or blogs. 

Daisho - Flexible WordPress Portfolio Theme

Studiofolio

Studiofolio comes equipped with dynamic sliders and responsive image galleries that give viewers an additional kick of information when running through your portfolio. 

Studiofolio A Versatile Portfolio and Blog Theme

Hazel

Hazel is a huge, multi-concept theme that allows you to choose from several layout designs for your portfolio, blog, and services pages. From full-screen image pages to a gridded portfolio with a navigation bar, you can customize this theme in so many ways to really make your work shine.

Hazel - Multi-Concept Creative WordPress Theme

Fluxus

Fluxus is a dynamic but minimal theme focused on presenting your work and keeping menus and information small and less of a distraction than most themes out there. Choose from a variety of layouts and features to make this theme your own.

Fluxus - Portfolio Theme for Photographers

Alpha

Alpha truly shines with its custom-built slider that showcases your work first and additional information (such as project details) second. You can choose from a small variety of customizations that combine into a variety of styles.

Alpha - The Unique Portfolio Theme for Creatives

Story

Story is a creative WordPress theme with several styles ready for customization from image-focused to blog content-focused. Beautiful, full-screen vertical sliders keep visitors to your website engaged with current projects and information while a horizontal, minimal navigation bar gives them more.

Story - Creative Responsive Multi-Purpose Theme

WowWay

WowWay is a dynamic portfolio theme with a responsive navigation bar that allows visitors to focus on your work or focus on getting more information as they see fit. Smooth animations allow viewers to jump from project to project, from lightbox to lightbox, with extra content built into the design, telling a project's story one at a time.

WowWay - Interactive  Responsive Portfolio Theme

KON/CEPT

KON/CEPT is a minimal design theme whose focus is entirely on showcasing your work and only giving more information if a viewer engages with the layout and images.

KONCEPT - A Portfolio Theme for Creative People

Lobo

Lobo begins with a beautiful loading animation that leads visitors into a modular layout whose contents are up to you. From a sticky header to its page and portfolio settings, Lobo shines at showing off your creative endeavors.

Lobo - Portfolio for Freelancers  Agencies

BORDER

Border is true to its name with a bold border around all contents, giving your work a beautiful frame, no matter the page. From its first page to its portfolio to its blog, Border is reminiscent of a well-designed magazine, perfect for combining artwork and blog content on a single domain.

BORDER - A Delightful Photography WordPress Theme

Corsa

Corsa is a creative one-page theme perfect for project-heavy content or small design teams. Fantastically customizable, Corsa is a theme that adapts to all of your website needs, from portfolio to business to interactive blog content.

Corsa - Retina Responsive Creative OnePage Theme

Skylab

Skylab has several design styles, each focused on showcasing your work and engaging visitors to your site in an elegant, professional manner. 

Skylab - Portfolio  Photography WordPress Theme

Oyster

Oyster allows you to choose from a light or dark theme to showcase your work in a variety of gallery and portfolio styles. I'm especially fond of how well the grid style gallery and blog look when part of the same website. Really, all of the style choices complement each other perfectly.

Oyster - Creative Photo WordPress Theme

Cartel

Cartel is a simple theme with bold headers, a masonry-style gallery, and modern image customization options. Take it for a spin below.

Cartel - Responsive Portfolio WordPress Theme

PhotoPro

If the image-focused themes above aren't your cup of tea, PhotoPro should have what you crave for your portfolio with animated portfolios, minimal design features, and multiple skin settings to showcase your work in its best light while allowing visitors to interact with your work.

PhotoPro - Photography WordPress Theme

Bow

Bow boasts a clean and modern feel and delivers expertly. I'm partial to its blog style which carries over the modular image theme, showcasing each post as though you're still viewing the portfolio or gallery portions of the theme.

Bow - Clean Photography Portfolio Theme

Capri

Capri is right: huge titles are trendy. Moreover, they're eye-catching and bold, working fantastically with design work that may be more minimal and need something to shout for it. With 12 styles to choose from to get started and nearly unlimited possibilities through customizable options, this theme is excellent.

Capri - A Hot Multi-Purpose Theme

Cabin

Cabin is a vintage-inspired theme with several design styles from which to choose. Along with the usual bells and whistles, a visual composer is included, which can be fantastically helpful for those who want to stick to graphics and not worry about code.

Cabin  A Beautiful Vintage-Inspired Theme

Enar

Enar is a huge mix of theme styles in one. Choose from something that's image-focused, blog-focused, shop-focused, and more. With such versatility built into the theme, it'd be easy to change up your site often or offer a different experience on multiple pages or a subdomain.

Enar - Responsive Multi-Purpose WordPress Theme

Website Templates

Next we have a small collection of website templates to show off your work and bridge the gap between your portfolio and potential clients. Take each theme and its variations for a spin with live previews to get a feel for what you can expect should you purchase the design.

Newave

Newave is a one-page site template that's modern and elegant. I think it's the perfect answer to similarly styled WordPress themes for anyone who wants to stick with a full website versus a blog theme for their portfolio and other pages.

Newave - Responsive One Page Parallax Template

Avoc

Avoc offers a minimal and modern touch to website and portfolio design. With bold headers and responsive features, this template may not be for everyone, but works brilliantly for those who need something with an edge to complement their work.

Avoc - Minimal Portfolio  Agency Template

Wolverine

Wolverine is a multipurpose theme with over a dozen demo styles to choose from, customize, and implement when creating your own fantastically designed site. With clean layouts, it places the focus on your content and artwork rather than flashy animations.

Wolverine - Multipurpose HTML5 Template

Sreative

Sreative is a creative template perfect for project-heavy portfolios or group efforts (such as a small agency). What caught my eye most about this theme was its focus on bold, bright colors that are easily customizable. Imagine putting your brand's color themes front and center, unifying your work and content and making a bold statement to clients and visitors.

Sreative  Digital Agency Html Template

Wave

Wave shines with its unique animations and scrolling style, bringing your work front and center to visitors. If you're up for a site design that includes the bells and whistles, Wave hits the spot in a beautiful way without being overdone.

Wave  Agency  Freelancer Portfolio

Resume Templates

Whether you're posting a PDF version on your site or handing your CV to a potential employer, resumes are often the first impression you give out to the world. Starting with a fresh template can be the first step in the right direction with a resume overhaul. Check out some fantastic templates below!

The CV

This resume template comes in both light and dark themes and is easily editable for a clean, stylish version of your latest resume. Multiple file types and pages (including room for portfolio samples) are also included in the template file.

The CV

JOB RESUME

This resume template makes a bold statement with its header image and then gets right down to business with a professional and clean layout. The template includes 24 images, making it easy to switch up your design for a variety of needs.

JOB RESUME

Infographic Resume Vol.1

Whether you're using pre-made infographic icons or adding your own, this resume template puts a fun design spin on the usual rundown of job experience and skills. Easily editable, the template also includes a cover letter and three file formats.

Infographic Resume Vol1

Simple Resume

Keep it clean and easy with this simple resume template. Using pops of color, let your experience shine on a document that's easy on the eyes and will surely give your future employer or client everything they need in a modern layout.

Simple Resume

X Clean Resume

For a more spacious layout style, X Clean Resume showcases work, experiences, and your skillset and makes it brief. When your resume needs to get down to brass tacks, a layout like this is sure to give clients or potential employers what they need without wasting time with too much information.

X Clean Resume

Resume/CV - Blair

For a resume that sticks to a more traditional layout with small bursts of design, Blair does the job perfectly. I find this template design especially good for conservative employers or job opportunities where bright colors and flashy graphics may not fit with their tone and you simply want your experience to speak for itself.

ResumeCV - Blair

Info Resume

This 20-page information-filled resume is the perfect fit for bringing along work to an interview and showcasing a keen design style. Show off work samples and keep your experience, skill set, and contact information together in one modern document.

Info Resume

Metro Inspired Clean Resume Booklet

For a shorter resume booklet with brighter pops of color, consider the eight-page Metro-Inspired piece below. With clean layouts and each page representing a section of information, this booklet leaves a mark with potential clients, employers, or networking leads.

Metro Inspired Clean Resume Booklet 8 Pages

Business Card Templates

Like resumes, business cards are great for potential clients, employers, or networking opportunities. Whether you just need a handful of them to keep on hand or a stack kept beside your work at a gallery show, working with a template can speed up your process in designing something quick or even give you options to have multiple versions. Check out a collection of templates below!

Creative Personal Business Card

Show off your creative and fun side while remaining clean and simple with the overall design. This business card template has places for social media accounts and a variety of contact information, giving recipients everything they need to keep in touch.

Creative Personal Business Card

Modern Business Card

For a modern take on design, consider color blocks and the addition of infographics to showcase what you do at a glance. With room for personalized imagery on the front and all of your contact information on the back, this design is a great option for those in multi-disciplinary fields of design.

Modern Business Card

Creative Designer Business Card

For an artsy take on the creative business card, check out the template below. It primarily showcases your work in a graphic style, with brief contact information at the bottom.

Creative Designer Business Card

Creative Modern Polygon Business Card

This trendy technicolor design is perfect for showcasing your brand's logo and catching the eye of recipients. With options for a square or round edge and three backgrounds, this template is ready for your information in an easy-to-edit format.

Creative Modern Polygon Business Card

Criclegra Corporate Business Cards

For a more corporate design style without getting too conservative, the Criclegra template offers a design style that places the focus on your brand. It's a perfect fit for small agencies or as a jumping-off point for refreshing a business card that needs to compete in the corporate world.

Criclegra Corporate Business Cards

3 in 1 Business Card Bundle

This bundle features templates that utilize depth in their design. It's fantastic for grabbing the attention of recipients without being loud and all over the place. A perfect fit for designers in the tech industry or similar fields.

3 in 1 Business Card Bundle

Minimal Business Card Bundle

From simple to small spots of color, this minimal business card template design is like a breath of fresh air. Simplicity is the name of the game, and it does it excellently. With several design styles to be mixed and matched on both sides of your card, you'll get straight to the point for whatever your business card needs may be.

Minimal Business Card Bundle

Creative Design Business Card

Pack a punch in the creative realm with this colorful template. Recommended for designers who work in highly visual fields or want to stand out from drab, conservative design.

Creative Design Business Card

Modern Business Cards

Get bold with this two-color design. This design prioritizes typography over graphics and is a perfect fit for graphic designers in almost any field. The three color styles included in the template give designers a great jumping-off point for customizing this bright template.

Modern Business Cards

Elegant Business Card

As the name states, this card is elegant, prioritizing keen design over flashy colors or graphics. A great template for something simple while remaining well designed and eye-catching. Perfect for those who need a card that gets straight to the point but isn't boring in any way.

Elegant Business Card

Presentation Mockups

How you show off your work can make such a difference in your portfolio. While it'd be great if you could print and mock up everything for an in-person presentation or even to create your own staged work, time is often a huge factor in when you can fix up your portfolio. Speed things up a bit with a variety of mocked-up images and polish up your work with the template designs below.

Pads - Mock-ups VOL03

Show off recent design work with an iPad mockup. I chose this set for its sweet, dream-like quality that's perfect for social media and connects viewers to your work through relatable media. Take a spin through other digital media mockups that will allow your digital design work to shine.

Pads - Mock-ups VOL03

Branding / Stationery Mock-ups

Ideal for showing off your own stationery and business card designs, identity mock-ups are the perfect addition to your portfolio. Easily editable files give you multiple options to showcase a new logo or brand to a client or run through multiple projects without having to waste time staging dozens of photos.

Branding  Stationery Mock-ups

A4 / A5 / Poster / Flyer Mock-up

Show off poster designs in your portfolio, shop, or on social media accounts in style with the help of 12 pre-made scenes and 10 different backgrounds. Switch up the poster size with additional mockups available through Envato Market.

A4  A5  Poster  Flyer Mockup

Landscape Book Mock-Up Set

Show off your book layout designs with a landscape book mockup. From covers to interiors, mockups like the one seen below give viewers something tangible to connect with when you're showcasing multiple layout projects that may not have made it to print.

Landscape Book Mock-Up Set

Book Mock-Up / Dust Jacket Edition

Go back to basics with a simple dust-jacket mockup. This set features several layouts and scenes sure to give your jacket designs an edge in your portfolio or in a presentation to a client.

Book Mock-Up  Dust Jacket Edition

Art Equipments Scene Generator V1

Create scenes for your mocked-up design work with this fantastic scene generator. Spruce up your website or media feed with a fine arts twist. This kit is perfect for showcasing works in progress and illustrated media and is just one of the many fantastic scene generators in the Hero Image section of Envato Market.

Art Equipments Scene Generator V1

Die Cut Stickers Mock-Up

Whether you're showing off sticker designs to a potential client, working up content for pre-orders in a shop, or simply showcasing ideas, these die-cut mockups are second only to the real thing. 

Die Cut Stickers Mock-Up

Paper Bag Mock-up

Packaging mockups are a fantastic way to present design options to a client or in your portfolio. These paper bag mockups are beautifully photographed and easily editable, allowing you to focus more time on creating graphics.

Paper Bag Mock-up

A6 Postcard & Envelope / Invitation / Flyer Mock-Up

Show off your greeting card, postcard or invite design skills with these elegant card mockups that include 16 card scenes and 15 backgrounds and textures. Like all print design mockups available through Envato Market, these are easy-to-edit files that will speed up your portfolio creation process so you can spend more time creating and less time formatting images.

A6 Postcard  Envelope  Invitation  Flyer Mock-Up

Social Icons

Spruce up your blog, emails, website or print media with social media icons. Start with a template and customize it to fit your brand, or give your mailing list blast a quick redesign with some help from the digital assets listed below!

60 Social Media Icons

For full-color social media icons in seven sizes, look no further than this set of 60. Files include fully editable PSD files and transparent PNG files.

60 Social Media Icons

160 Social Icons Flat and Long Shadow Bundle

Get on trend with this flat and long shadow icon bundle. Featuring eight sizes and four variations for each icon, this set gives you everything you need.

Black and White Social Media Icons

Keep things simple and elegant with 200 black and white social media icons. Eight sizes of each icon included and ready to use!

Black and White Social Media Icons

3D Social Media Icons Pack

A fun option for social media icons on your website or in a mailing list blast, these 3D icons are beautifully designed and come in several sizes and file formats.

3D Social Media Icons Pack

50 Stylish Social Icons

From handmade to flat to extruded, this set of 50 social media icons gives you 10 style options for each, making such a bundle a no-brainer for presenting your social media accounts in a variety of situations.

50 Stylish Social Icons

Social Media Graphic Templates

For our final section we're highlighting social media graphics themselves. Whether it's a Facebook or Twitter cover image or simply a promotional graphic for Instagram, using a pre-made template can put more focus on designing or creating for billable items versus spending hours creating social media content meant to put focus on your real projects. Check out the possibilities in the templates listed below!

Softporate - Facebook Timeline Cover

For a soft, modern design to your Facebook page, look no further than the Softporate Timeline Cover. Easily editable and coming in six designs, this template is an elegant answer to vibrant cover themes.

Softporate - Facebook Timeline Cover

Jana Facebook Timelines Covers

Showcase multiple design pieces in one go with the Jana template design. This template features six PSD documents with each image section set as a Smart Object, ready to be edited quickly and easily.

Jana Facebook Timelines Covers

Bundle Facebook Timelines Covers

For bold and bright cover designs, look no further than this Facebook cover bundle. Files are easily editable and ready to go, giving you or your design business a quick refresh any time you need it.

Bundle Facebook Timelines Covers

Email Signature

With 50 designs and 10 color options for each, this email signature bundle is a no-brainer for additions to your promotional media kit. Showcase a quick bit of design in your emails and change it up easily with the pre-made templates linked below.

Email Signature

Instagram Promotional Banner Templates

Whether you're promoting your latest design work, products in your shop, or work for a client, speed up your process and get sharing on Instagram with these promotional banner templates. Featuring 18 easily editable designs, these templates will let you run through multiple popular design styles and create a cohesive Instagram presence.

Instagram Promotional Banner Templates

Twitter Covers

This bundle of 10 Twitter cover profile images places the focus on your creative work, with placement for logos and additional branding. The templates include fonts, badges, and social icons in addition to the layouts.

Twitter Covers

Promotion Twitter Header

Bring promotion front and center to your Twitter account with these Twitter cover templates. Whether you're promoting your design services, products, or adding content to a client's account, this bundle includes 61 templates in total, and they're easily editable.

Promotion Twitter Header

Twitter Profile Covers - Creative Studio

Check out this set of four creative Twitter cover templates, ready to showcase your design work and contact information in a beautifully designed and easily edited PSD file.

Twitter Profile Covers - Creative Studio

Multi Purpose Twitter Header

Focus on work with this multi-purpose Facebook and Twitter cover image. Easily editable, with the ability to change the images seen on each device as well as the text and fonts used in the final image.

Multi Purpose Twitter Header

Conclusion

This resource kit aims to highlight current design trends and some must-have assets for every graphic designer or professional artist's promotional needs. Chances are we've missed some Envato Market items that you think would be an excellent asset to any graphic designer's toolbox. Share those links in the comment section below, and let this kit be a jumping-off point for building your ultimate promotional asset toolkit!

Illustrator in 60 Seconds: How to Use the Appearance Panel

$
0
0

Welcome to our Illustrator in 60 Seconds series, in which you can learn an Illustrator skill, feature, or technique in just a minute!

The Appearance Panel

Keeping track of your artwork's appearance can sometimes prove to be a tedious task, especially if you have a lot of visual effects.

Luckily for us, Illustrator comes with a central hub from where we can easily edit and adjust all of these effects on the fly.

If you've never used the feature before, I strongly advise you give this little video a go since it will show you all the basics that you need to be aware of in order to start using the Appearance panel.

A Bit More Detail

Learn more about Adobe Illustrator on Envato Tuts+:

60 Seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ in which we introduce a range of subjects, all in 60 seconds—just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you'd like to see explained in 60 seconds!

How to Make Pixel Characters

$
0
0
Final product image
What You'll Be Creating

If you've ever thought about creating pixel art, here's a very quick and easy introduction to one of the most fundamental aspects of it: characters.

We'll be creating an extremely simple character, but although it will be simple, it will still allow a decent amount of detail, so it will work fine as an avatar for yourself or for representing your favorite movie or TV characters or celebrities.

Can't think of any inspiration? Perhaps work from a stock image from Envato Market.

1. Create the Character's Body

Usually I'd recommend starting with the head, and that's still a viable starting point, but since this character will be so simple and its proportions will be somewhat realistic, the body will be an equally good place to start.

You'll need to create a new file in Adobe Photoshop. It could be 100 px by 100 px; the character I made is only 28 px tall.

Step 1

Let's define a skin color. This is 25˚ in Hue, 40%Saturation and 98%Brightness, but choose what works for you.

defining skin color

Step 2

We're going to be working with the Pencil Tool with a 1 px point size and under a nice amount of zoom, like 800%.

With our newly created color, draw the legs, which will be 2 px across with one blank pixel between each leg… this'll work fine unless you're doing a chubbier character.

The dimensions of the legs will help us define the rest of the character.

basic legs and torso

You may want to try your own dimensions/proportions, rather than just follow mine, to find what you like best. But if you want your character to look just like mine, then the legs above are 9 px tall, and so is the torso.

Step 3

To finish the extremities, we add arms on the side; they're simply one extra pixel on the side of the torso. We also add an extra row of pixels at the bottom of the legs with an extra pixel on each side for the feet.

I also added a row of pixels for the shoulders. It's a little odd to call the shoulders' corners "rounded" but those missing pixels do give a more rounded—and thus more natural—look in the end.

finishing limbs

Step 4

Finally we add the head, also with some "rounded" corners. I made it as wide as the torso and 7 px tall.

adding head

2. Add Facial Features

Our character will be very minimal, limited by its small size, but we'll still be able to add some detail.

Step 1

There's just enough space on the face to add a pair of eyes.

I chose to make them a slightly darker (about 15% darker) shade than the skin tone. I didn't want to have too much contrast there as I didn't think that we should be able to see eye color on such a small resolution.

adding eyes

Step 2

Let's add some hair. I used a dark brown shade and added an extra row of pixels, so the head grew in size a little bit, because of the hair.

adding hair

Step 3

Add a bit of hair on the sides of the head. I used a lighter color as if it's either short or antialiased. To add this color I lowered the Opacity of the Pencil Tool to 50%, which can be done easily by pressing the number 5 while the Pencil Tool is on. Just remember to return it to 100% afterwards (you can press the number 0.) And finally I gave my character a little bit of a pompadour hairdo.

finishing hair

3. Add the Clothes

The clothes will be where we can do most of our customization. This style benefits from not using up any pixels on outlines, so even if the character is tiny, it allows plenty of detail.

Step 1

Let's get some pants on the character. The shade here is a low-saturation aquamarine, which I'm using to represent blue jeans. To try variations on colors, I usually Copy the area I'm coloring to a New Layer and open the Hue/Saturation/Lightness panel (Image > Adjustments > Hue/Saturation…) and move the sliders on that panel until I like the result.

adding pants

Step 2

Add some shoes. I'll make them sneakers and they'll be almost white; there's really not much room to give these detail.

I won't make them white because I'll leave the background white. A downside of not using outlines is that if the background and foreground colors are the same, some detail can get lost.

adding shoes

Step 3

Give the character a shirt. I liked how this color went with the pants color. I made the shirt with short sleeves and a V-neck.

adding shirt

Step 4

As I said before, you can add a decent amount of detail—maybe a tie or some graphic in the middle of the shirt. I added some (low contrast) stripes.

adding extra details

Step 5

And finally another layer of clothes: a jacket. If you want, you could also give the character accessories like a vest or a wristwatch or headphones.

more extra details a jacket

4. Shade the Character

Now that all character and clothes details are done, we add a touch of shading that corresponds to the different volumes of the character.

Step 1

Create a New Layer and in it draw your shadows in black.

Some of the shadows here correspond to the head casting a shadow over the neck and to the jacket casting a shadow over the shirt. The rest just correspond to the volumes of the character; the legs aren't flat, so shading one side conveys extra volume, and the same goes for the right side of the torso.

the shape of the shadow

The arms, I thought, were too small to shade.

Step 2

And to apply the shading, just lower the Opacity of the layer to 15% or somewhere around there. You can do that in the Layers panel or also by pressing 15 on the keyboard, while the Move Tool is selected.

the shadow applied character finished

You can then Merge Down (Layer > Merge Down) and export your graphic.

Seen at 100%, the character might be too small to appreciate. So you can Select it, Copy it and Rescale it to 200% or 300% (Edit > Free Transform) with Interpolation set to Nearest Neighbor.

Then Save, preferably as a PNG or GIF, and you're done!

Awesome, Character Complete!

Congratulations! You've finished the pixel character.

Of course, now you can make more of these, or tackle something like your favorite rock band or a group of characters you like from TV or film, or pixel yourself or your friends, etc.

End result

2,000 Translations Later: Your Favorites From Tuts+ Design & Illustration

$
0
0

Almost exactly two years ago we published our first translation; a step into the unknown, a risk perhaps, but something we felt sure our community would be enthusiastic about. Fast forward to today and we’ve published over 2,000 translations, ranging across 41 different languages, submitted by almost 600 dedicated volunteers. These posts see around a quarter of a million monthly pageviews and are helping us build upon our strong global community.

Thank You!

2,000 is a very significant milestone–thank you, community members. You rock! I should also thank translation platform Native, without which we’d still be wrestling with text files and email.

So which translations and which languages have fared best on Envato Tuts+ Design & Illustration over the last two years?

Most Active Language: Chinese (Traditional)

The top ten most visited Design & Illustration translations reveal a broad range of languages, including French, Russian, Indonesian, Spanish, Arabic, and Chinese (both simplified and traditional). This diversity isn’t found on any other topic at Envato Tuts+.

Most significantly, the number one slot is filled by 10個阻擋你進步的繪圖迷思. This Chinese translation sky rocketed across social media, making it the most visited single post of any language (including English) across the whole network in 2015! Its success gave us reason to seriously consider how we’re approaching our Chinese audience–I’ll let you know what we’re doing about that in a moment.

For now, here are the top three visited translations for this topic:

Most Widely Translated Tutorial: Create a Pride Rainbow Gradient Overlay in Adobe Illustrator

Perfectly reflecting D&I’s diversity, this tutorial by Sharon drew in 9 translations.

The most visited of these translations is (wait for it) the Japanese Adobeイラストレーターでレインボープライドカラーのグラデーションオーバーレイを作る. Love it!

Most Productive Translator: Maja Petek

Croatian is one of our less prominent languages, but thanks exclusively to Maja’s dedication (and love of Design & Illustration) we now have 37 Croatian translations which bring in growing numbers of visitors every week.

Here are the top three most productive translators for this topic:

Where Next?

We’ve built a great foundation for a truly global educational platform. Thanks to this solid start we’re reaching more people than ever, helping them learn and understand creative subjects.

We’d like to continue this growth, especially in less prominent languages. If you can help, please volunteer by clicking the Translate this post button in the sidebar of a tutorial which interests you! Read more about what this entails by going to Translate for Envato Tuts+.

Help us spread the word by sharing translations on social media, and sign up to our newsletter to stay up to date.

If you’d specifically like to hear about our progress in China, talk to Kendra; our feet on the ground in Beijing. Kendra is working to build our community in China, talking with translators and instructors, and managing Chinese social media. Get in touch via Twitter @kendraschaefer, or through WeChat at kendrakai

Check out How do you say Envato in Chinese? to get a taste of what Kendra’s doing.

नबिर्सनुहोस्! (“Don’t Forget”, in Nepali)

Don’t forget: the translation project belongs to you! Let us know if you have any ideas, criticism, or suggestions to improve what we’re doing!

International Artist Feature: The Netherlands

$
0
0

For this article in the international artist series, we turn to the Netherlands, featuring six illustrators and designers who create fantastic work, from illustration to graphic design and more! I asked each artist how their country and culture inspired their work, and they delivered fantastic answers. Enjoy!

Kokako

Kokako is a small animation and illustration studio in the Netherlands that includes the work of Mina Stojanovic, Hannah Damstra, and Kenzo Bruijnaers. From fun motion graphics to fantastic illustrative work, their portfolios are positively wonderful. You can check out more of their work in their portfolio or in the selection of pieces below!

Through Another Looking Glass

"The Netherlands is a very free country. The way our culture and country itself influenced our work is that we feel we have a freedom of speech. Because of that, we are able to express our thoughts and views on different subjects and include humor, something that we often do and that characterizes our work.
Through Another Looking Glass
Through Another Looking Glass

Winter Worlds

Winter Worlds
Winter Worlds

Weird Words

"The Netherlands also has a very rich history in art and design. This is maybe more of an inspiration than an influence, but we do feel like we have a stage to showcase our work because of the many initiatives in the art and design sector."
Weird Words
Weird Words

Traject

Traject
Traject

Loulou & Tummie

Loulou and Tummie are a design duo based in Tilburg, Netherlands. Their work is vibrant and fun, fueled by kooky character designs and ranging from plush art to graphic design to print media. You can check out more of their work in their portfolio or in a small section of pieces below.

Ukulele feel good crap

"Knowing what it is exactly or not, everyone in the Netherlands at least has heard of or is known with the term Dutch Design. It's used to connote designs created in the Netherlands. This mainly applies to product design but also graphic design and perhaps other design that features a certain look at things.
Ukulele feel good crap
Ukulele feel good crap

CONVERSE Surprise & Delight campaign

"Typical about Dutch Design is probably that it's often minimalist, somehow innovative and being a bit funny or silly I guess.  Now, our work has been referred to as Dutch Design as well, something that might be correct, we're not sure. We never looked at it that way before but I guess our work often shows some of those features.
CONVERSE Surprise  Delight campaign
CONVERSE Surprise & Delight campaign

New prints!

"Anyway, the term comes from a tradition of contemporary design and the pride of it. The Dutch have been making a name with their graphic design in the previous century and art and design schools have been pretty good all along here, I believe.
New prints
New prints!

Android Wallpapers

"So, we all grew up unconsciously surrounded by 'quality design' and if you look around you can still see it too. I can't tell if it's all quality but it is somehow recognizable at least."
Android Wallpapers
Android Wallpapers

Marta Veludo

Marta is a graphic designer and art director based in Amsterdam, Netherlands. Her aesthetic is modern and filled with bright colors and geometric design. You can check out more of her work in her portfolio or in the small selection of pieces below.

Marta Veludo Identity

"I think by living in Amsterdam I had to get used first of all with weather changes. This changes the way you live, your daily routine and all aspects of your life.
Marta Veludo Identity
Marta Veludo Identity

Rebok Creative Hub - 25 Years of Ventilator

"In the winter I work more than in the summer and I intend to be more strict and practical. In the summer I want to go out, meet new people (possible new clients) make exhibitions, collaborations, stuff outside and not behind of the computer.
Rebok Creative Hub - 25 Years of Ventilator
Rebok Creative Hub - 25 Years of Ventilator

Find The M - 36daysoftype

"Dutch culture gave me the chance to be more experimental, daring and with no fear of hard measures. I really admire the free and 'everything is possible' mindset."
Find The M - 36daysoftype
Find The M - 36daysoftype

Bookstore Foundation

Bookstore Foundation
Bookstore Foundation

Wijtze Valkema

Wijtze is an illustrator and designer based in Meppel, Netherlands. His work is vibrant and fun, consisting mostly of geometric shapes and an assortment of characters. You can check out more of his work in his portfolio or in the small selection of pieces below.

DripforDrip - Cars

"The biggest way that growing up and living in the Netherlands has influenced me as an illustrator is our bicycle culture. Growing up I wasn't aware of how unique my country's bike culture is, but spending a year doing an internship in the US made me realize how much attention we have for bikes and how much I need my bike to stay sane.
DripforDrip - Cars
DripforDrip - Cars

Pencil Bear

"Riding a bike provides room to breathe, and there's a particular rhythm you feel on a bike that's hard to explain. My illustration style is very graphic design based and in creating illustration compositions I believe I am looking for that same rhythm, space and air that happen on a bike.
Pencil Bear
Pencil Bear

Stack-o-Houses

"Not having objects touch each other too much, always looking for the balance between too-busy and too-minimalistic, a lot of my artwork is based on the rhythm of the composition. Obviously I also draw a lot of characters riding bicycles."
Stack-o-Houses
Stack-o-Houses

Wheels Of Cheese

Wheels Of Cheese
Wheels Of Cheese

Rafael Varona

Rafael is an illustrator and animator based in Amsterdam, Netherlands. His work is dreamlike, capturing beautiful, often muted tones and a fantastic amount of motion. You can check out more of his work in his portfolio or in the small selection of pieces below. 

MYKITA

"There are a lot of interesting spots in Holland quite close to each other. You have Amsterdam, where I live, with its centuries-old always-busy center and elegant parks and then Rotterdam, young in architecture and more diverse in its city life just half an hour away, followed by Eindhoven with its design-excellence and the beautiful south, especially Brabant, is again just a short train ride.
"There is inspiration to find in every corner, in the beautiful museums, canals and markets, the kindness and laissez-faire attitude of people around you. 
MYKITA
MYKITA

Impossible Bottles

"The simplicity of Dutch design never really related to me with the people´s general character, but it surely helps you as an artist to discipline yourself to filter out the best in your work. 
"In general the mercantile history of Holland has led to Dutch culture becoming quite easy and open-minded. These days you can see that especially in its modern architecture and in the incredibly innovative design creations of the last decade. 
Impossible Bottles
Impossible Bottles

A Maze - Poster

"On the other hand you have very traditional art forms of pottery (in Delft) and all sort of cute knitted work around. Dutch artists tend to be huge professionals with a never ending almost childlike interest for anything new. If anything that's what I'm trying to adopt: to get really good in what I do and to never shut myself away from new ideas."
A Maze - Poster
A Maze - Poster

Self Promotional Work

Self Promotional Work
Self Promotional Work

Rutger Paulusse

Rutger is an illustrator based in Amsterdam, Netherlands. His work is playful and shows a fantastic amount of depth thanks to the medium in which he works. You can check out more of his work in his portfolio or in the small selection of pieces below.

Camper Life

"My country is really flat. Maybe my urge to make very flat 3D renderings (no reflections or textures) is inspired by the Dutch Landscape. Who knows! 
"There is also a thing I have with orange, our national color. I love to use that color in my work. Besides my own illustrations I don’t have anything with it; I don’t have orange walls or clothes. Really funny, it’s my favorite color to work with, but ignore it completely in the rest of my life. Maybe it’s an unconscious influence of my home country to represent them.
Camper Life
Camper Life

Home is...

"There is a strong graphic design culture; Dutch Design used to be a huge thing. My art school teachers made sure we were very aware of that. I’m educated as a graphic designer, so that culture and the ‘old’ heroes such as Wim Crouwel definitely inspired me. I loved the graphical, almost abstract work; I think it shows in my work as an illustrator these days. 
Home is
Home is...

Fortune Magazine - Contracts

"Besides the design culture the Netherlands is very good at planning and making everything very neat and organized. I feel my work definitely has that organized element. I also love to make very slick and neat renderings, it can definitely be something I inherited from the urge of the Dutch to make sure there is no clutter or noise, everything is organized very well. 
Fortune Magazine - Contracts
Fortune Magazine - Contracts

Hero Jam - Production Process

"Planning is also a thing that is important to me, because I plan the things I want to do properly and work very structured I don’t have to worry or think about things such as deadlines which gives room in my head for the creative process. Also because of a proper planning I always have enough time to make an illustration perfect."
Hero Jam - Production Process
Hero Jam - Production Process

Many thanks to the artists featured above who took time out of their busy lives and work schedules to answer my questions about how their country and culture has influenced them and their work. 

You can check out more of the work in the links below:


Illustrator in 60 Seconds: How to Use the Blend Tool

$
0
0

Welcome to our Illustrator in 60 Seconds series, in which you can learn an Illustrator skill, feature, or technique in just a minute!

The Blend Tool

Having trouble understanding how the Blend Tool works? Well, you're in luck, since this video was created to help out all those who want to learn how to use the tool in order to improve their technical skills.

Find out how you can create incredible gradients or color swatches using just a couple of clicks.

A Bit More Detail

Learn more about Adobe Illustrator on Envato Tuts+:

60 Seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ in which we aim to introduce a range of subjects, all in 60 seconds—just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you'd like to see explained in 60 seconds!

New Course on Adobe Photoshop's Smudge Tool

$
0
0
Final product image
What You'll Be Creating

The Smudge Tool is one of the most powerful tools that Adobe Photoshop has to offer. In our new Coffee Break Course, How to Use Photoshop's Smudge Tool for Digital Painting, digital artist Brian Lee will show you exactly how to use it. 

You'll get a brief introduction to the tool and how to set it up. Then you'll learn how to manipulate it to achieve different types of results for your digital artworks. 

Watch Brian's introduction below to find out more.

You can take our new Coffee Break Course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

If you're looking for other ways to create smudge effects, check out the range of smudge brushes and Photoshop actions on Envato Market, such as Creative Liquid-Smudge HD Action.

Creative Liquid-Smudge HD Action
Creative Liquid-Smudge HD Action

25 Creative Resume Templates: To Land a New Job in Style

$
0
0

Are you eyeing a new position? If so, is your resume design current? And will it represent you creatively—allowing you to stand out distinctively in a crowded pool of applicants?

If you’ve recently seen a compelling job ad, or you worked your contacts to find an irresistible open position, now is the moment to act. You can’t let a career opportunity pass you by! Now’s a great time to level-up your resume, and make sure it represents your experience and skill set effectively.

Focused, in restrained style, and with plenty of whitespace these resume designs are a professional context for highlighting your strengths. We have a number of creative resume templates in this post with unique modern designs.

Browse through to find one that resonates with your personal brand and goals. They are setup to work with in popular software, like Photoshop, InDesign, Illustrator, or Word. They’re also print-ready and designed for quick customization.

Showcase your innovative portfolio alongside your work skills. Leverage visual features like subtle infographics, organized layouts, and multiple page options to make an impact and land that job!

Creative Resume Templates

If you need a great resume template, with clean minimal style, and packed with creative options, we have 25 here to choose from:

1. Creative Modern Resume Design

If you’re applying for a creative position, or want to stand out from job applicants visually, this modern resume is a distinctive option. It has a minimal design with a clean box and bold line style which punctuates your job history and skills.

In addition to a resume, cover letter, and references pages, this design pack also includes a portfolio page for displaying your work. It comes in A4 / US Letter size. Also, the files come with both InDesign (INDD) and MS Word template options. 

It’s setup with organized layers, character styles, and easy to customize features. Using this set, you can get your resume ready, and out to potential employers fast!

Creative Modern Resume Design

2. Graphic Designer Resume Template

If you’re a graphic designer, looking to land a creative job, this is the resume made just for you. It has a distinctive modern design with a highlighted visual theme that drives the eye to key areas of each page.

It includes a distinctive cover, resume, letter, portfolio display options, and more. There are 24 pro pages that are fully-editable in InDesign or Photoshop. You can use a dark or light version. Just add your own career info and folio images, then print or export to PDF.

Graphic Designer Resume Template

3. Material CV/Resume Design Set

If you’re a digital worker, this creative template has a clean, modern design that feels on-style for professionals working online. It’s great for web designers, UI/UX experts, or marketing pros.

It comes packed with resume/CV, cover letter, portfolio page, and matching business card template. It’s ready to work with in Photoshop (PSD), Illustrator (AI), or MS Word (DOC). There’s also a matching material style site template (HTML5/LESS CSS) you can grab as well, so you present a cohesive brand when applying for jobs.

Material CVResume Design Set

4. Structured Creative Resume Template Design

This creative resume template has a clean, structured design that highlights relevant job info, and is made to read easily. It’s attractive to present your work and has a minimal intuitive design flow. It presents all your career detail in an organized, orderly manner—with subtle design details and infographic callouts.

This professional resume template set is packed with Indesign and Word files. It includes four different pages: cover page, cover letter, resume, and portfolio. You only get that first chance to spark interest as an applicant, make the right first impression with a great resume design!

Structured Creative Resume Template Design

5. Job Resume Template Set (With Logos & Business Cards)

With a classic modern design, and ample visual options, this resume template pack has a full assortment of files to build a creative resume with. It comes with 12 vintage logo styles, 24 retro images with effects, customizable resume pages, business cards, icons, and more. 

The files come in Adobe Illustrator (AI), Adobe Photoshop (PSD) and Microsoft Word (DOCX). Create your identity and resume quickly, and stand out with sharp, bold graphics and clean typography.

Job Resume Template Set With Logos  Business Cards

6. Blair - Branded Minimal Resume Set

This minimal resume template, has a strong baseline grid, that makes great use of font choices and whitespace. Present your resume and cover letter professionally, with subtle visual details, and simple infographics and icon options.

With InDesign, Photoshop, and MS Word file options, this clean modern template is ready to customize with your details. Fonts and colors are editable, it’s set with paragraph and object styles, print-ready, and comes with extensive PDF help files. Highlight your creative work history and personal brand with minimal style!

Blair - Branded Minimal Resume Template Set

7. Photography Resume Portfolio Pack

Whether you’re a photographer, or want to make use of extensive portfolio display options, this resume is a visually engaging template for creatives. Work with the 10 pages it comes packed with, such as: cover, distinctive quote, cover letter, multiple resume pages, portfolio, and back cover.

This minimal concept, with clean cut design is made to help land you that creative job and elevate your career progress. You can even use this as a PDF portfolio to help land gigs as a freelancer. It’s as much a creative booklet as a resume. It comes with InDesign and Illustrator files. It’s print-ready and has 17 pre-made color options. Make use of this fully-loaded pack today!

Photography Resume Portfolio Pack

8. The Resume Modern Design

This resume template has strong typographic features, infographic options, clean professional structure, distinctive icons, and diamond offset boxes. It comes with both light and dark versions. 

It’s also packed with files to work with, such as resume templates, cover letter, portfolio, and business cards as well. The resume is print ready and easy to customize. The files are ready to work with in Photoshop, Illustrator, or MS Word.

The Resume Modern Design

9. Clean, Creative Resume Template

This professional resume, cover letter, and portfolio template set has a clean minimal design. It includes multiple color versions, infographic features, paragraph styles, easy to use files, and is set with free fonts. 

You have three format options: Photoshop, Illustrator, or MS Word. So, you can work in the software you’re most comfortable in. The flexible page designs are ready to add your details to, so you can land that creative job you’re aiming for!

Clean Creative Resume Template

10. Minimal Resume Design for Creatives

If you’re a creative, needing a full package of resume files, then this minimal style set is a great option. It comes with 52 files, with multiple color options, and resume, cover letter, portfolio pages, and matching business cards. Work in PSD, AI, or MS Word. Whether you’re aiming for a design job, or a creative online position, you want to stand out visually as a professional applicant.

Minimal Resume Design for Creatives

11. Professional Creative Resume Set

This is a creative resume with sharp design set in PSD, AI, and MS Word formats. It’s packed with multiple color variations, a full assortment of cover letter, resume, and portfolio templates, as well as infographic and icons options. 

You can display your photo to make a personal connection, include your visual work in the portfolio page, and make an professional impression with this elegant resume design set.

Professional Creative Resume Set

12. Modern Resume/CV Template Design

This is a beautiful modern resume design. It has a flat web style, with understated highlighted white boxes, set against a mid-gray background. If you’re a marketer, digital creative, or web professional, this is a resume template design to take notice of.

Packed with a full assortment of features and files, this set has resume page, cover letter, portfolio work page, and business cards as well.  There are 11 files in total. They are all 100% customizable in MS Word or Photoshop and fully print-ready. It includes a number of subtle infographic details and featured area to display your headshot and stand out as a creative applicant.

Modern Resume CV Template Design

13. Simple CV/Resume & Cover Letter Design

This simple resume is designed for creatives. It has basic infographics, like timelines and visual skill displays, as well as a portfolio page to display your best work, in addition to the resume and cover letter pages. It features a clean, boxy design that puts your work and experience first. It’s setup to easily change colors and customize in Photoshop, Illustrator, or MS Word.

Simple CVResume  Cover Letter Design

14. Responsive & Printable Resume/CV Pack

This responsive resume design is a big pack with 80 files in AI, EPS, PSD, DOCX, and DOC formats. It’s professional and easy to edit with your details. Includes: resume, cover letter, thank you card, business cards, icons and more.

This unique resume is double-sided and can fold up for mailing. It also features a distinctive modern design with unique centered photo area to display your creative self portrait—whether that’s you smiling, busy working, or zoomed-in holding your tools. Make an instant connection when applying for creative jobs or gigs.

Responsive Printable Resume CV Pack

15. Dynamic Resume - With Portfolio Pages Included

This is a professional resume template set with two dynamic portfolio page options. You can impress new clients or potential employers by showcase your best work samples. Provide three large thumbnails with titles and detailed descriptions.

Also included are resume and cover letter pages with distinctive header design, as well as matching business cards. Work in Word, Illustrator, or Photoshop, to add your custom work and summarize your skills and abilities. Then apply for that creative job you’re eyeing!

Dynamic Resume With Portfolio Pages Included

16. Flat, Minimal Style Creative Resume Design

If you’re a web professional, whether a marketer, coder, or designer, this is a great way to stand out in modern style. This minimal resume template set has a number of creative features. It’s designed with bold type, and flat design illustrations, to showcase your personality and professionalism.

It includes A4 and US Letter print ready files in Illustrator, Photoshop, and InDesign. With resume, cover letter, Facebook templates, icons, and business cards. You can build your own resume and brand set in a few steps and easily customize with your own logo and screen design illustrations. It comes with all the instruction and asset you need!  

Flat Minimal Style Creative Resume Design

17. Technic - Stylish Resume CV Template

Technical is a modern, stylish resume that features bright colors, and easy to read clean white font, set against a dark background. It’s designed for creative directors, graphic designers, web developers, or other digital professionals. The flexible page design is made to be customized and can be updated with your work details and job history quickly.

Technic Stylish Resume CV Template

18. Omni Infographic Resume + Folio

This template has a number of great user comments, such as “I really enjoy this template. I have researched over 50 templates for resumes and this one is comprehensive and professional. Thank you for this design.” 

If you’re needing to visually make an impression as a creative job candidate, Omni Resume is a professional choice. You get a full assortment of resume, cover letter, reference sheet, and portfolio pages in AI and PSD, as well as icons and infographic options to work with.

Omni Infographic Resume With Folio

19. Modern Resume Iconic A4 / US Letter

This is a modern resume with a unique style that features icons, flat graphics, and infographics to visually engage potential employers a a creative applicant. This high-energy resume design comes with Photoshop, Illustrator, InDesign, and MS Word files. It includes resume, cover letter, portfolio page, business card templates, and distinctive design features.

Modern Resume Iconic A4 US Letter

20. Mono Resume With Minimal Design

This is a clean, modern resume with a creative design. It features minimal infographics, a black and white monochrome design, great use of whitespace, a portfolio page, business cards and icons. It’s bold, simple, and clear.

Prep these resume files in Illustrator, InDesign, Photoshop, or MS Word. Add your accomplishments and emphasize your skills. Display your creative brand, showcase your best work, and make an impact that will land your next position as a creative pro!

Mono Resume With Minimal Design

21. Creative Resume Templates (2 in 1)

When applying for any new job, you need to make the right initial impression, and that starts with your resume. With two creative resume design options, this graphic pack comes loaded with options.

Either of these Photoshop sets can readily be customized to your brand. They come with resume, portfolio displays, infographics, photo areas, business cards, covers and more. Two awesome resume style options in one affordable set.

Creative Resume Templates 2 in 1

22. Web Design Style Resume / CV Pack

This web design style resume, with a digital-inspired theme, features both light and dark options and neon pops of color. It’s designed in Photoshop (PSD) and the files are made to customize fast. 

If you’ve got a job to apply for this week, then you need an attractive resume that is easy to update with your info and is on-style for the position. This clean-cut design has clear sections to display your work experience, education, profile, and data-like icons to highlight your strongest skills.

Web Design Style Resume CV Pack

23. Pro Design Clean Resume Set

This clean resume template design, has an organized layout, with clear columns to structure your work experience and achievements. The sharp design highlights your headshot and information about your profile on the left side with a large rectangular strip.

There are four-pieces in this set with two resume options, cover letter, portfolio page, and also both light and dark versions. You can edit them in Photoshop, Illustrator, InDesign, or Word. Then get them off to the printers or exported as a PDF.

Pro Design Clean Resume Set

24. Visual Creative Resume Template

Ready to knock the socks off a potential employer! This visually striking resume template is made for individuals that work in creative fields. If you need to include portfolio images with your written resume or CV, then this InDesign brochure template is an appealing design to use.

It includes resume page, cover page, cover letter, and portfolio page. It’s set up with master pages, character styles, editable text, a 12 column grid, and ready to customize features. Use this creative resume to land a coveted new position!

Visual Creative Resume Template

25. Infographic Resume and Portfolio Set

Make a statement and visual impression with this creative infographic resume. This modern template is designed to highlight your experience, showcase your work, and demonstrate your creative talent.

It’s packed as a multi-page design with introduction page, timelines, work experience, multiple portfolio pages, brands experience folio, awards, testimonials, contact page, and covers. It’s more a booklet presentation, than a standard resume.

It comes with multiple color options, clean infographics, over 50 icons, light and dark versions, and ready to work with in InDesign (INDD). If you need to shoot a PDF off to an art director or contact at an agency, this template set is packaged with the design files that will help you land that job!

Infographic Resume and Portfolio Set

Grab a Creative Resume Template!

If you have an important job you’re considering applying to, then you should take some time to craft a visually engaging resume, and position yourself to stand out as applicant. 

We have hundreds of creative resume templates to choose from on Envato Market. Browse through our professional designs. Find just the right one you need to land that new job in style and level-up your career.

How to Create a Seder Plate for Passover in Adobe Illustrator

$
0
0
Final product image
What You'll Be Creating

Whether or not you observe Passover, this is a great time to create and learn about the Seder plate and what it means during this Jewish holiday season. Celebrated this year from sunset on 22 April to 30 April (or nightfall of the 29th if you're in Israel), Passover celebrates the story of the exodus of the Israelites from Egypt.

The Passover Seder marks the beginning of Passover and involves the creation of the Seder plate, which contains six items that retell the story of the Passover.

In this tutorial, we'll work from provided sketches in creating rendered illustrations of the six Seder dishes, while learning a little bit about each. As an alternative, you may want to use references for various food types from stock images purchased from Envato Market. Fire up Adobe Illustrator CC and let's get to it!

1. Beitzah (Hard-Boiled Egg)

The six items of this tutorial may not be presented in the correct order for the holiday, but are presented in an order that corresponds to the illustration techniques I'll be covering for the duration of this tutorial. We'll begin with a hard-boiled egg, of the Beitzah. The Beitzah is a reminder of the festival offering (Hagigah) brought to the Holy Temple.

Step 1

Let's start with my initial sketches. Below you'll see all six of the items we'll be illustrating today. You can download my sketches via the download link to the right of this tutorial if you wish to follow along with my design. You're also welcome to sketch out your own designs to work from during this tutorial.

Start with sketches or other reference

Step 2

Using the Ellipse Tool (L), draw a circle. Pull the top anchor point upward with the Direct Selection Tool (A) in order to form an egg shape. Draw a yellow circle in the lower half of the egg shape. We now have our basic hard-boiled egg.

Draw circles and ovals to create a hard boiled egg

Step 3

In order to render the egg, let's create some basic Gradient Meshes.

  1. Using the Mesh Tool (U), select the white egg base and add instances of gray around the edges of the egg. 
  2. Add mesh points along the lower edge of the egg in order to give it a little bit of depth.
  3. Do the same for the egg yolk. This time you'll be adding instances of dark yellow or yellow-orange around the edges of the egg.
Add gradient meshes to the egg objects in order to render them

Step 4

Further render each egg object (egg white and egg yolk). Notice below how my egg white mesh has five internal horizontal lines and three vertical lines added to it. This was to allow for gray and white to be added around the egg white and around the yolk shape itself.

For the egg yolk's mesh, however, there are more color variations:

  1. Two hot spots appear on the top portion of the egg yolk. Make these white or light yellow.
  2. The center of the yolk is dark yellow or orange.
  3. The mesh points around the yolk are all dark yellow or orange, giving the yolk some depth.
  4. The darker color on the bottom edge of the yolk is thinner than on the sides. This is repeated on the egg white itself.
Further render the egg yolk

Step 5

I've Zoomed (Z) in on the yolk in order to add some smaller details. Using the Pencil Tool (N) (or whatever drawing tool you're most comfortable with), draw curving shapes for highlights. Set their fill color to white and their Blending Mode to Overlay or Soft Light. Reduce the Opacity of the highlight shapes to 20-40% and layer a couple of them on each other in order to create a reflection on the egg yolk.

Draw a circle in the center of the yolk with a Radial Gradient that goes from orange in the center at 100% Opacity to 0% Opacity

Further define details of the egg yolk

Step 6

Finally, we have a few more details on the egg white itself:

  1. Add a couple of mesh points in order to define a thicker edge on the top of the hard-boiled egg.
  2. Darken the gray used on the sides of the egg white. With how much we've rendered the yolk, we need the egg white to pop off the page.
  3. Finally, I've drawn a curved shape on the bottom of the egg yolk to add a bit of shadow. I've filled it with dark yellow and set the Opacity to 20% or so.

Experiment with shadow and highlight shapes, gradient mesh points, and additional gradient shapes in order to render your egg as you see fit.

Complete your rendered egg design

Step 7

Group (Control-G) your egg components and apply a simple Drop Shadow (Effect > Stylize > Drop Shadow) with the following attributes:

  • Mode: Multiply
  • Opacity: 30%
  • X Offset: 0 px
  • Y Offset: 1 px
  • Blur: 8 px

This drop shadow will be repeated for each item and their respective plates throughout this tutorial.

Add a drop shadow to your design

2. The Plates

This is an optional section of this tutorial. I decided for my final design that I wanted to have each item arranged on its own plate. You, however, may wish to combine them on a proper Seder plate that has compartments for each item, or no plate at all.

Step 1

Draw a circle with the Ellipse Tool. Set the fill color to white or light cream. With the Mesh Tool, I've added four mesh points around the edge of the circle and four mesh points in the center in order to create three horizontal and vertical lines in the center.

  • Set the outer mesh points to a beige or tan, much like what we did with the egg (darker colors on the outer edge).
  • Set the center color to a light beige.
  • Set each of the four points that form a square around the center to the same beige as the center. Other mesh points should remain as white or light cream.
Render a circle with the mesh tool

Step 2

Draw a circle in the center of the plate and set its fill color to a Radial Gradient going from dark beige at 100% Opacity to 0% Opacity. Use the Gradient Tool (G) to adjust the spacing between the gradient's colors and the radius of the gradient itself.

Add a circle in the center to create an indentation

Step 3

Add a simple Drop Shadow to the plate and arrange two instances of the hard-boiled egg made previously to the center of the plate. Group all three of these objects together.

Complete the eggs on a plate icon

3. Zeroa (A Roasted Bone)

The Zeroa (or Zeroah or Z'roa), or the roasted bone, represents the Paschal sacrifice in the Holy Temple made on the eve of exodus from Egypt. In the case of this tutorial, we'll be drawing and rendering a drumstick as a representation of the Zeroa. You are more than welcome to alter your representation of this item to be a lamb shank or other roasted meat on a bone.

Step 1

Let's start with the bone shape itself. We're going for the classic drumstick bone shape. Draw a rectangle with the Rectangle Tool (M) and two circles with the Ellipse ToolUnite all three objects together to form the bone shape. Select your bone object with the Direct Selection Tool and pull the Live Corners inward in order to round out the object's edges slightly.

Draw a basic bone shape

Step 2

Set the fill color of the bone object to a Linear Gradient that goes from tan to cream and back to tan again. Adjust the angle of the gradient with the Gradient Tool so that the lighter central color is in the middle of the bone.

Apply a linear gradient to the bone shape

Step 3

Using the Pen Tool (P), draw shadow and highlight shapes. My aim for these was to add more shadow shapes to the contour of the bone as well as define the indent of the bottom of the bone shape.

  1. Draw thin shadow shapes on either side of the bone and small curving shapes on the bottom, defining the indent of the bone. I've set the fill colors to brown and varied the Opacity with each shape so they can be layered, creating more depth.
  2. For highlights I've used a light cream colored gradient that goes from 100% to 0% Opacity. These curved and rounded shapes are placed on the round end of the bone.
  3. Keep layering shadow and highlight shapes as you see fit. You can refer to my images below, the sketches I've provided, or photo stock.
Render the bone

Step 4

Once you're satisfied with how you've rendered your bone, it's time to work on the meat portion of the drumstick. I've drawn, with the Pencil Tool, a large teardrop-like shape with a jagged edge that overlaps the bone itself. Make sure your bone components are Grouped together and placed below the meat portion of the design.

Draw the meat of the design

Step 5

For the meat portion I wanted to create a mottled texture in order to make rendering the object a bit easier. Do this by layering brown and tan shapes in varying levels of Opacity. Keep your shapes rounded and splatter-like.

  1. Starting with the left side of the meat, I've drawn a large splat-like shape and filled it with a light brown hue.
  2. Reduce the opacity to 20% or so and layer various sizes of similarly transparent shapes. I find it easiest to draw these shapes with the Pencil Tool and have set its fidelity to Smooth.
  3. Add smaller shapes over the top of larger shapes and vice versa in order to create a mottled look. This builds up the texture.
  4. Notice how these shapes almost fit together like a puzzle.
  5. As you build up lighter shapes, decide which side of the meat you want your highlights to be. I've chosen the right side.
  6. This process can be tedious, but notice how building texture like this renders the object without having to worry about Mesh shapes and placement.
Start rendering the meat

Step 6

Continue rendering the drumstick with finer details now that you've got the basic texture done.

  1. As you build up your texture and render your meat object, concentrate lighter and brighter colors on the right side of the meat.
  2. Make sure to alternate between large sections of tiny shapes and larger, transparent, curving shapes in order to create a mottled, painterly effect.
  3. Smaller pieces work best for lighter, highlighted portions. Consider using orange hues as well, in order to lighten up different areas.
  4. You can also overlap your meat shape with large Linear Gradients. In this case I've used brown with its Opacity going from 100% to 0%. Use the Gradient Tool to change the angle of the gradient, and don't forget to trim the object to the contour of the drumstick.
  5. Lighten up the center and upper right of the drumstick and add shadow shapes to either edge of the design.
  6. Finally, add a bright highlight, similar to the bright reflections used on the egg yolks, to the upper right of the drumstick. 
Complete the rendering and fine details of the drumstick

Step 7

In order to make the drumstick pop, I've outlined it with a stroked path of 0.5 pt Stroke Weight and added a Drop Shadow to the completed object. Place your finished drumstick group on a plate, and let's move on to the next item.

Complete your drumstick and place it on a plate

4. Maror (Horseradish Root)

Maror, or horseradish root, is a bitter herb that is meant to symbolize the suffering endured before the exodus from Egypt. I'll be drawing a version of the whole root below, but you can show grated horseradish or an alternate bitter herb if you wish in your own vector Seder plate.

Step 1

My horseradish root will end up being just as shiny as the other items in this design set. This is a stylistic choice, and if you'd like to make a more realistic root design, definitely go for it!

Starting with the Pencil Tool, I drew a long, curving shape whose top is bulbous and whose end tapers a bit. With the Blob Brush Tool (Shift-B), I've drawn nine grass-like protuberances on the right side of the root. Group these together and place them behind the root base.

Draw the basic root shapes

Step 2

  1. Using the Mesh Tool, add beige tones to the bottom right edges of the root shape.
  2. Concentrate various shades of beige around the narrow tip of the root.
  3. Since we'll have some portions of the leaves sticking out the top, let's go ahead and darken up the top edge as well.
Render the root with the mesh tool

Step 3

  1. Add a couple of mesh points in the lower center of the root and set them to a light cream in order to make a bright highlight.
  2. Set the mesh points on the upper left of the root to a warm beige or light tan color.
  3. Repeat the warm tones on a couple of the mesh points on the root's tip.
Continue rendering the root

Step 4

  1. Using the Blob Brush Tool, draw bands around the root. You can also use this time to draw lumps and bumps if you wish.
  2. Draw a shape that outlines the root's contour and indents at each band. Apply a Radial Gradient so that the outer color is dark and opaque and the inner color transparent. Adjust the radius with the Gradient Tool so that you've given the root a slight shadow around its edge.

You may want to create a rougher-looking root than the one I've created below if you're looking to create more realistic designs.

Create bands lumps and bumps

Step 5

  1. Add highlights to each section by drawing narrow, curving shapes that contain Radial Gradients going from cream at 100% to 0% Opacity with the color in the center. Repeat for each section as you see fit.
  2. Moving on to the root's stems, apply a Linear Gradient that goes from brown or dark green to green and the same brown again.
  3. Add a thin stroked outline (0.5 pt or so) to the root's stems.
Add highlights and render the stems

Step 6

Finally, draw small light green and yellow highlights with the Blob Brush Tool as you see fit, and add a Drop Shadow to the final object group. As I said in the beginning of this section, my horseradish root is shiny and cute, which is more of an artistic choice so it fits in with the other pieces in this set versus illustrating a realistic object.

Complete your design with tiny details

5. Charoset Part One (Apple)

The Charoset is a sweet paste comprised of nuts and fruit. It represents the bricks and mortar used by Jewish slaves when they were forced to work in Egypt. 

In the case of this tutorial, I've broken down the pieces of the Charoset into a couple of items: an apple and grapes. Push your design further with the addition of nuts or even illustrate the final paste for your set if you wish.

Step 1

  1. Start with a half circle. Draw a full circle with the Ellipse Tool and drag the ellipse anchor to quickly form a half circle.
  2. With the Pen Tool, draw the top portion of the apple slice. Note the indent in the center of the apple. This is where the seeds were.
  3. Draw a curved angled shape that makes up the peel of the apple. Do your best with the apple's perspective using photographic reference or referring back to my initial sketch if need be.
Draw an apple slice

Step 2

I've drawn a light tan Radial Gradient shape in the center of the apple where the core would be. Then, with the Paintbrush Tool (B), I outlined the empty seed shape and drew a line defining the planes of the apple slice. I set the stroke color to brown and their Blending Modes to Color Burn.

Using the Blob Brush Tool I drew some scribbled highlights in the center of the apple slice to create a bit of texture on the object.

Define the seed space and the apple slices planes

Step 3

Further render the apple slice by layering brown shadow shapes onto the core of the apple slice and in the corners of the apple slice.

Further render the apple slice by layering brown shadow shapes onto the core of the apple slice and in the corners of the apple slice

Step 4

The Linear Gradient on the peel includes red and orange hues, placing the oranges on the left and dark reds on the right.

The Linear Gradient on the peel includes red and orange hues placing the oranges on the left and dark reds on the right

6. Charoset Part Two (Grapes)

Step 1

The grapes begin quite simply: draw circles and ellipses of varying shapes and sizes with the Ellipse Tool. Layer three or more tones of purple and violet with the darker colors below the lighter colors. When you're satisfied with your grape shapes, let's move on!

Layer circles to create a bunch of grapes

Step 2

Copy (Control-C) and Paste (Control-V) the grape group and set the fill color to a Radial Gradient with dark purple on the outside at 100% Opacity and 0% Opacity on the inside. Use the Shape Builder Tool to unite some overlapping grapes so they don't look see-through. Place the gradient group over the base grape group. This may help you decide which overlapping shapes to unite in the gradient group.

Apply a gradient to a copied grape group

Step 3

Using the drawing tool of your choice (I used the Pencil Tool), draw curved highlight shapes on each grape. Fill them with an inverted version of the gradient from the previous step and set the Blending Mode to Screen. Adjust the Opacity as you see fit.

Step 4

Continue drawing shadow and highlight shapes on each grape.

  1. Each grape has a highlight shape set to Screen.
  2. Each grape has a shadow shape that defines the underside of the grape set to Multiply.
  3. Add an additional highlight to grapes that are higher up in the bunch.
  4. Add additional shadow shapes to show more depth on the grapes that are below others.
Render the grapes

Step 5

When satisfied with your grape rendering shapes, Group everything together and let's move on to the stem and leaf in our grape bunch design.

Group everything together and lets move on to the stem and leaf in our grape bunch design

Step 6

Draw a large wavy shape for the grape bunch's leaf. Use the Mesh Tool to add dark green to the mesh points on the bottom edge of the shape.

Draw a wiggley leaf and render it

Step 7

Let's continue rendering the leaf!

  1. I've added light green to the top of half the gradient mesh (add additional nodes to create smooth transitions).
  2. Feel free to draw shadow shapes with green gradients to create texture and variation in the leaf.
  3. Draw in veins or larger texture shapes with the Pen Tool or Pencil Tool. Fill them with green gradients or make the shapes transparent (or both).
Continue rendering the leaf

Step 8

Finalize the grape design with a brown stem and outline the leaf and grapes with a 0.5 pt weight stroked path. Group everything together and add a simple Drop Shadow to the design.

Finalize the grape design with a brown stem and outline the leaf and grapes with a 05 pt weight stroked path

7. Chazeret (Romaine Lettuce)

Chazeret is the second of the bitter herbs. Romaine lettuce is used on account of its initial taste not being bitter, but becoming bitter at second bite. This symbolizes the suffering endured over time by the Israelites in Egypt.

Step 1

I'll be referencing my sketch heavily for this design. To start, I traced three leaves with the Pencil Tool, filling them with green. I've outlined them below so you can see their shapes. The middle leaf (the largest of the three) is to be placed above the others in the next step.

Draw your romaine lettuce base

Step 2

Let's start to render the lettuce. For starters I drew a light green oval-like shape on the lower half of the middle leaf. This will form the light green heart of the lettuce.

Select each leaf shape and apply a Linear Gradient that goes from green to dark green. Romaine lettuce leaves are darker on the outside and top of the leaves than they are toward the center of the plant.

Start rendering the romaine lettuce head

Step 3

Much like the other designs in this tutorial, I've used gradient shapes in order to render it.

  1. I've drawn dark green shapes along the top edge of each leaf to let the curves and waves of the lettuce pop.
  2. The middle leaf's gradient goes from light green to dark green now.
  3. Since the middle leaf overlaps the other two leaves, we need to show depth by casting shadows onto the two smaller leaves. Notice the shadow shapes are concentrated around the edges and near the center leaf.
Use gradient shapes in order to render the lettuce head

Step 4

Keep building up shadow and highlight shapes as you see fit.

  1. I added wide dark green shapes to the center leaf in order to prepare the lettuce head for the veins we'll draw in the next step.
  2. This large shadow shape adds some variation to the leaf's texture.
  3. Repeat the shadow shapes that were drawn on the left leaf on the right leaf.
Keep building up shadow and highlight shapes as you see fit

Step 5

Using the Blob Brush Tool draw veins in the leaves, starting with the middle leaf.

  1. Start with large vein shapes emanating from the lower center of the lettuce leaf.
  2. Create smaller veins branching off from the larger ones. Select your first layer of veins and Unite them in the Pathfinder panel.
  3. Overlap the first layer of veins with lighter, smaller ones.
  4. Draw some veins on the side leaves. A ton of detail isn't necessary. Do your best to keep the veins inside the boundaries of the leaves.
Draw veins on each of the leaves

Step 6

Finally, much like the other designs, add some highlight details in light yellow or cream, and outline the lettuce leaves with a thinly stroked brown path. Apply a Drop Shadow to the entire group and place it on your plate. Group everything together and let's move on to the final item!

add some highlight details in light yellow or cream and outline the lettuce leaves with a thinly stroked brown path

8. Karpas (Parsley)

Karpas is a vegetable other than the bitter herbs in the Seder plate. This vegetable is dipped in salt water and is most often parsley, celery, an onion, or a boiled potato. The dipped vegetable prompts children to ask questions about the Seder and may also represent the salty tear cried by the Israelites when they were kept as slaves.

Step 1

Like the head of lettuce, the parsley is referenced from my initial sketch. To start, I've used a drawing tool (in this case the Pencil Tool, though the Pen Tool will do just as well) to draw two stems. Set their fill colors to a Linear Gradient that goes from light green to medium green.

Draw two stems for each parsley

Step 2

  1. Next I've drawn seven leaves (the number is arbitrary) on my stems and United everything in the Pathfinder panel.
  2. Draw large shadow shapes over each leaf to show how they bend and curve.
  3. You can use the Shape Builder Tool to select and delete the non-intersecting portions of each shadow shape. Set the shadow shape's fill color to medium or dark green.
  4. Copy and Paste the main parsley shape and set the fill color to null and the stroke to 0.5 pt weight. This gives your design a simple outline like those on the other Seder items.
Draw and render leaves

Step 3

  1. Another leaf rendering technique is to Group together your shadow and highlight shapes (keep layering them on top of each other) and to create a Clipping Mask (Control-7).
  2. Once your shadow shapes are GroupedCopy and Paste the main parsley shape. Align it over the entire parsley group and create the Clipping Mask by hitting Control-7.
  3. Move the outline out of the clipping group and add any additional highlights of veins you want on your parsley leaves. Place your parsley on your plate and add a Drop Shadow to the final design.
Create a clipping mask for our final design

Great Job, You're Done!

Arrange your items on your plate or in a circle according to the arrangement of a real Seder plate. Feel free to continue with this design, including Matzo and other traditional Seder foods. Share your final designs in the comment section below!

Arrange your items on your plate or in a circle according to the arrangement of a real Seder plate

How to Create a Set of X-Men Avatars in Adobe Illustrator

$
0
0
Final product image
What You'll Be Creating

Are you waiting for the new X-Men: Apocalypse movie as much as I am? Let’s get ready together and follow this tutorial to create flat, faceless X-Men avatars! We’ll discover some useful tips and tricks and learn simple techniques, while using basic shapes, the Pathfinder panel, the Shape Builder Tool and Clipping Masks.

X-Men are my favorite heroes from the whole Marvel universe, so I always wait for the new movies with impatience. However, this tutorial can be useful not only for X-Men fans! You can use the following techniques to create some superhero avatars, flat human portraits and any other kind of flat avatars! You can even use your own photo or any reference image from Envato Market to create a similar avatar for your social network profile. Let’s try it out!

1. Create Wolverine's Avatar

Step 1

Let’s shape Wolverine’s face, starting with his chin. Take the Rectangle Tool (M) and make a 100 x 60 px shape of pinky-beige skin-tone color. Keeping the shape selected, go to Object > Path > Add Anchor Points to add a point in the middle of each side.

create face from the rectangle 1

Step 2

Let’s form the chin. Select the bottom left anchor point with the Direct Selection Tool (A) and hit Enter to open the Move window. Set the Horizontal value to 20 px and Vertical to 0 px. Click OK to move our point 20 px to the right.

Repeat the same for the bottom right anchor point, but this time set the Horizontal value to -20 px in order to move the point in the opposite direction.

create face from the rectangle 2

Step 3

Now let’s make the shape of the chin more rounded and smooth with the help of the Live Corners function. Select all the anchor points except the top two with the Direct Selection Tool (A) and pull the circle markers of the Live Corners up, making the corners slightly rounded.

If you’re using earlier versions of Adobe Illustrator, which do not include this function, you can use Effect > Stylize > Round Corners instead. But notice that it will make all the corners rounded. In this case, use the Eraser Tool (Shift-E) while holding Alt to make the top of the shape straight and flat again.

make the chin rounded using live corners

Step 4

Now let’s shape the upper part of the face. Create a rectangle of 100 x 75 px. Go to Object > Path > Add Anchor Points.

shape the upper part of the face

Step 5

Let’s adjust the hairline a bit. Select the top central anchor point with the Direct Selection Tool (A) and move it 10 px down. Switch to the Anchor Point Tool (Shift-C) and drag the anchor handles of the selected point up, as shown in the image below. This way we form a gull-shaped hairline.

adjust the hairline

Step 6

Move the handles of the top left and right anchor points to make the hairline more flowing and curved.

make the hairline more flowing

Step 7

Let’s make sure that the parts of the face are perfectly aligned to each other. We’ll be using the same technique further on when we need to align the objects to each other.

Select both parts of the face with the Selection Tool (V) and click the upper shape once again to make it a Key Object. It will be indicated with a thicker selection around the shape. Now head to the Align panel and click Horizontal Align Center. This way we align the chin to the upper shape.

align the shapes to the center

Step 8

Move the top part of the face down, attaching it to the chin.

attach the parts of the face

Step 9

Use the Move function again to move the upper left and right corners a bit closer to each other, making the top of the shape narrower.

make the face narrower

Step 10

Now let’s draw Wolverine’s well-known hairdo! Arm yourself with the Pencil Tool (N) and draw the left part of the hair. Connect the extreme anchor points either with the Pencil Tool (N) or with the Pen Tool (P) to make the right edge of the shape straight and squared. 

draw hair with pencil tool

Step 11

Fill the shape with dark-grey color. And let’s flip the copy to the other side to make the second half of the hairdo. Double-click the Reflect Tool (O) to open the options window and select the Vertical Axis. Click Copy and attach the right part of the hairdo.

form the hairdo

Step 12

Now let’s add the ears. Take the Ellipse Tool (L) and make a 15 x 30 px oval. Attach the shape to the face, rotating it a bit. Add a second ear, using the Reflect Tool (O).

add the ears with ellipse tool

Step 13

Now let’s form Wolverine’s beard! First of all, Copy the face shape and Paste in Front (Control-C > Control-F). Use the Eyedropper Tool (I) to pick the color from the hair and apply it to the created copy.

Take the Ellipse Tool (L) and make a 125 x 130 px shape, placing it above the upper part of the face. Now you can see the beard has started showing up in the bottom of the face.

form the beard 1

Step 14

Add another ellipse of smaller size (60 x 45 px), partially covering the chin.

form the beard 2

Step 15

Select both ellipses and Unite them in Pathfinder, merging them into a single shape.

Unite the shapes in Pathfinder

Step 16

Now let’s cut out the ellipses, leaving only the dark-grey pieces for the beard. Select both the dark-grey shape and the merged ellipses and use the Minus Front function of Pathfinder to cut the shapes.

use minus front to cut out the beard

Step 17

Let’s add a couple of locks of hair to Wolverine’s forehead. Make a 60 x 5 px ellipse. Select its side anchor points with the Direct Selection Tool (A) and make the tips of the shape pointed, using the Convert selected anchor points to corner function on the control panel on top.

Keeping the shape selected, go to Effect > Warp > Arc. Set the Horizontal Bend value to 30% and Object > Expand Appearance to apply the effect.

form a hair lock from ellipse

Step 18

Attach the created hair lock to the hairline and add a smaller copy next to it.

Attach the created hair lock to the hairline

Step 19

Let’s add the neck. Make a 60 x 70 px rectangle of a darker skin tone color. Place the neck beneath the head by Moving it to Back (Shift-Control-[). Adjust the length of the neck by moving it up or down, hiding the unneeded part beneath the head.

Add another rectangle of 75 x 25 px for the collar and fill it with dark greyish-blue color.

add neck and collar from rectangles

Step 20

Let’s shape the torso. Make a 160 x 110 px rectangle of lighter greyish-blue color and place it right under the collar. Align all the shapes to the center, if needed.

Select the bottom left anchor point with the Direct Selection Tool (A) and press Enter to open the Move window. Move the point father left, setting the Horizontal Position value to -20 px.

Move the right anchor point in the opposite direction, making the bottom of the rectangle wider and forming a trapezium.

form a torso from rectangle

Step 21

Use the Live Corners feature (or the Round Corners effect) to make the shoulders of the torso rounded.

Let’s add a round X-Men emblem to the collar. Make a 28 x 28 px circle with the Ellipse Tool (L) with dark-grey Fill and thick yellow Stroke (set the Stroke Weight to 5 pt in the upper control panel).

Use the Line Segment Tool (\) to form two yellow 5 pt strokes for the X sign in the center.

make the X-Men round emblem

Step 22

Let’s add the base to our avatar. Make a 300 x 300 px yellow square and Send it to Back (Shift-Control-[), beneath the character. Group (Control-G) all parts of Wolverine and resize him to make the silhouette fit the square. You may leave the lower part of the torso outside the square, as in the screenshot below.

Copy the square and Bring toFront (Shift-Control-]), above all other objects.

Finally, select everything (Control-A), click the right mouse button and Make Clipping Mask, hiding the unwanted parts outside the square. Great!

make the base from square

Now we have our first X-Men avatar ready! Let’s move on to the next one.

wolverine avatar

2. Draw Mystique's Avatar

Step 1

Our second character will be marvelous Mystique.

Let’s start forming her face from the chin, as we did previously. Take Wolverine’s chin from our first avatar and modify it, making the corners more rounded with the help of the Live Corners feature. Select the bottom middle anchor point (the tip of the chin) and make it pointed by Converting it to Corner from the Convert menu on top.

form the chin

Step 2

Now let’s form the upper part of the face. Make a 100 x 60 px rectangle and Align it to the chin shape. Use the Direct Selection Tool (A) to select both top left and right anchor points and make the top of the shape fully rounded.

Use the Anchor Point Tool (Shift-C) to form the heart-shaped hairline by placing the anchor handles as shown in the image below.

form the hairline

Step 3

Attach the upper part of the face to the lower part and change the skin color to blue.

Let’s add a hairdo shape! Make a 100 x 80 px red rectangle and place it beneath the face in the upper part of the head. Make the top of the rectangle fully rounded.

Adjust the position of the shapes towards each other. In my case, I move the upper part of the face further down to make the face shorter and to reveal the hairdo a bit more.

recolor the skin and add hair

Step 4

Add the ears and neck to Mystique’s head. Form a trapezium for the torso and this time Unite the torso and the neck in Pathfinder.

add ears neck and torso

Step 5

Use the Direct Selection Tool (A) to select the anchor points at the bottom of the neck. Make them rounded, using the Live Corners feature. Make the shoulders rounded as well, forming a smooth, gentle silhouette.

make the silhouette rounded

Step 6

Use the Ellipse Tool (L) to make a 5 x 10 px ellipse of a slightly darker color than the face. Add some more spots to the face, varying their size and position.

add elliptical spots

Step 7

Finish up with Mystique’s avatar by adding some spots to her body and putting the character into a square mask with dark-blue background.

Mystique avatar

3. Render the Avatar of Magneto

Step 1

Let’s make the head and helmet for Magneto. Copy the base of the body from Wolverine and change the upper part of the head by replacing Wolverine’s face and hair with a 100 x 75 px rectangle. Make the top of the head fully rounded using the Live Corners function.

Create a rectangle on top (slightly larger than the head) and make its top part rounded as well. This will be Magneto’s helmet.

At this stage I also remove the ears and set the Fill color of the helmet to None in order to see the head clearly.

make Magnetos helmet from rectangle

Step 2

Now let’s form the facial parts of the helmet. If you remember the X-Men movies, Magneto had a large cut-out for eyes, nose and mouth.

Make a small ellipse and place it in the eye-area on the left, as shown in the image below. Use the Reflect Tool (O) to create a second ellipse. Add a vertical stripe, combining it with the eye-holes. Finally, select the created ellipses and the stripe and Unite them in Pathfinder.

make the elements of the helmet 1

Step 3

Switch the Fill color of the helmet to dark purple and the central shape to any contrast color, for example, yellow. Keeping the yellow shape selected, go to Object > Path > Offset Path and set the Offset value to 5 px, creating a larger shape.

make the elements of the helmet 2

Step 4

Select the helmet and the smaller yellow shape. Use the Minus Front function of Pathfinder to cut the shape out.

Now we have the darker yellow-shape and a helmet with a hole in the center.

Use the Minus Front function

Step 5

Keeping both shapes selected, arm yourself with the Shape Builder Tool (Shift-M), hold down Alt and click the middle of the dark-yellow shape that we need to delete. Great! Now we can see the face.

use the Shape Builder Tool

Step 6

Change the dark-yellow color to light-purple to make it blend with the helmet. And let’s add a thin 5 px stripe in the bottom of the helmet as well. Use the Shape Builder Tool (Shift-M) again to delete the unneeded pieces of the stripe outside the helmet.

complete the helmet

Step 7

Let’s work at Magneto’s suit a bit. Make it darker, changing the Fill color to dark greyish-purple. Add a thin line right in the center of the suit, depicting a stylized zip fastener.

And let’s darken the shoulders. Take the Line Segment Tool (\) and draw two diagonal lines across the shoulders. Select both the lines and the torso and use the Shape Builder Tool (Shift-M) to click the shoulder pieces that we need to cut. Wonderful—now the shoulder parts are divided from the rest of the torso and we can make them darker.

Don’t forget to delete the pieces of the line that we don’t need.

add details to the suite

Step 8

Make a light-purple avatar base and use theClipping Mask to form the composition.

Finally, use the Convert function to make the outer corners of the eye-holes a bit pointed. Edit the shapes with the Direct Selection Tool (A).

make the eyes pointed

Great! Magneto’s avatar is ready. We have the last one to go!

The Magnetos avatar is ready

4. Draw the Avatar of Rogue

Step 1

Our final avatar is going to be pretty young Rogue.

Let’s duplicate the whole of Mystique’s silhouette and use it as a base for Rogue’s avatar by recoloring the skin and removing the spots from the body.

duplicate Mystiques body

Step 2

Select the central point of the hairline with the Direct Selection Tool (A) and move it to the right a bit, changing the shape of the hairline.

Now grab the Pencil Tool (N) and make a slightly curved stroke for the hair lock of the bang.

change the hair

Step 3

Let’s modify the bang. Switch the Stroke color to pale-grey. Head to the Stroke panel (Window > Stroke) and set the Weight to 16 pt, making the bang much thicker.

Set the Cap and Corner to middle positions to make the tips of the stroke rounded.

Finally, change the Profile to Width Profile 5 (one of the default profiles in the drop-down menu) and use the Flip Along button next to it to change the direction of the stroke line. Great work!

Add a light-beige vertical stroke on top of the dark hair for the parting. Set its Stroke Weight to 1.5 pt and the Profile to Width Profile 1.

make a bang from a stroke

Step 4

Add another lock at the opposite side of the face and use similar settings as in the previous step. You can use the Eyedropper Tool (I) to pick the appearance from the previous lock and apply it to the new one, reducing the Weight to 12 pt.

Copy the collar from Wolverine’s avatar and place it on Rogue’s neck.

add a second lock the the hair

Step 5

Let’s dress our character up. Select the body shape and use the Knife tool to split the shape into two parts. Fill the torso with dark-grey color, depicting the X-Men suit.

add a dark suite

Step 6

Add a zip fastener and the X-Men logo to Rogue’s suit.

add details to the suit

Step 7

Finish up the avatar by adding a green square base and putting the objects into a Clipping Mask.

Avatar of Rogue

Marvelous! Our X-Men Flat Avatars Are Finished!

We’ve done a fantastic job! You can continue tweaking the avatars and adding minor details to your liking. What is more, you can use these simple techniques to create the whole X-Men team, including both the good guys and the villains!

Have fun!

X-men flat avatars are finished

Colossus: How to Turn Skin to Metal in Adobe Photoshop

$
0
0
Final product image
What You'll Be Creating

As our X-Men week continues, we honor everybody's favorite Steel-Skinned Russian with a look at how to transform skin into metal in Photoshop.

1. Prepare the Depth Map

Piotr Rasputin, otherwise known as the super-strong, steel-skinned X-Man Colossus, is large and very well muscled. So an image of a very large, well-muscled male is required for the image to have any resemblance to our favorite bulletproof member of the classic X-Men team. The image will be used to create a Depth Map that can be turned into a type of 3D topography of his form.

Step 1

This technique will work with almost any image of a bare-chested body builder. I opted for this image. Download the image and then open it in Photoshop.

Bodybuilder stock image
Strong and handsome young bodybuilder

Step 2

Duplicate the background layer with Layer > New > Layer Via Copy (Control-J) and then go to Image > Adjustments > Desaturate to turn the duplicate layer into black and white.

duplicate and desaturate

Step 3

The depth map technique reads light areas as high and dark areas as deep. That means the shiny parts of his skin would translate as unnatural bumps and ridges. To eliminate the issue, go to Image > Adjustments > Curves (Control-M). Adjust the curve as shown here to flatten out the highlight areas.

Flatten out the highlights with Curves

Step 4

Hide the background layer and create a Selection around the model. There are various tools that can accomplish this; my preferred method is with the Pen Tool (P), but the Quick Selection Tool (Q) is a viable alternative. Use the selection to create a Layer Mask with Layer > Layer Mask > Reveal Selection.

Create a selection around the model

Step 5

Use the Brush Tool (B) with the Soft Round preset and Black paint. Reduce the brush Opacity to 50% and make sure to click on the layer thumbnail to change Photoshop's focus to the layer and not the mask. Then use the brush to darken the outside edge of the model—this will ensure the depth map creates a curve along the outside edge of the model.

Darken the outer edge

Step 6

The details in his skin will create a very rough surface, so to help smooth things out, reduce the number of colors in the image with Image > Adjustments > Posterize. Set the Levels to 8.

Posterize the image

Step 7

Temporarily unlink the layer mask by clicking on the chain-link icon between the layer thumbnail and the mask thumbnail. (This is so the Blur filter doesn't blur the mask too.) Then go to Filter > Blur > Gaussian Blur and use a Radius of 10 px.

Blur the layer but not the mask

Step 8

Using the Brush Tool (B) while alternating between black and white paint, envision how the surface should be shaped. The brighter the pixels, the closer the surface will be to the viewpoint; the darker, the further away. So areas like the eye socket and the cleavage between his pectoral muscles should be nice and dark, while the rounded area of his bicep, pectorals, and head should be gradually lighter. Use the brush to gradually shape the form of his body.

Form the depth map with the brush tool

2. Add a City Scene Background

Before moving forward with the metal figure, it's helpful to have a sense of the background image. After all, any shiny metal surface will reflect the environment.

Step 1

I selected a city background to place behind Colossus. The fisheye warping of this image will be particularly interesting when using it as a reflection on the metallic surface.

city stock image
City

Step 2

Go to File > Place Linked and select the city image. Photoshop adds the image as a Smart Object. Scale and Position the image to fill the frame. 

Place the city background into the project

Step 3

The background is way too sharp and clear to be believable as a background image. Go to Filter > Blur > Gaussian Blur and use a Radius of 2 px.

Blur the background image

Step 4

Go to Filter > Lens Correction and switch to the Custom tab. Increase the Remove Distortion slider to about +18 to help even out some of the fisheye distortions. Then set the Vignette Amount to -56

Lens Correction settings

3. Create the Seams

One of the most recognizable characteristics of Colossus's metal form is the series of horizontal seams that piece his metal together. Before the 3D form is created, those seams should be incorporated into the Depth Map.

Step 1

Use the Pen Tool (P) set to Path and begin creating horizontal lines that follow the curvature of his body. Do not include lines for his head or hand yet. At the end of each path, Control-click to end that path before beginning another one. It's OK for the paths to extend beyond the edge of the body; sometimes that makes it much easier to get a good angle at the edge.

Create paths for the seams

Step 2

Create a New Layer over the painted figure layer. Clip it to the figure layer with Layer > Create Clipping Mask (Alt-Control-G). Set the Brush Tool (B) to the Hard Round preset with a size of 4 px

setup the layer and brush size

Step 3

Go to the Paths panel, right-click on the path thumbnail and select Stroke Path. Select the Brush as the tool to use to stroke the path. Then set the blending mode to Multiply and the Opacity to 50%.

Stroke the paths

Step 4

Add another layer and another set of paths for the finger seams. Set the brush Width to 2 px and stroke the finger paths. Set the blending mode to Multiply and the Opacity to 50%.

Create seam lines for the fingers

Step 5

Select the figure layer and both seam layers. Then hold down the Alt key while going to Layer > Merge Layers (Control-E) to create a merged layer of the figure and seam lines. Name this layer Depth Map. Hide the figure layer and the seam layers. 

Create a Merged Layer

4. Use the Depth Map to Create a 3D Form

As unintuitive as it seems, this strange gray figure will generate a 3D form that will provide a very convincing metallic render. The depth map feature in Photoshop is rarely used, but in instances like this, it can be surprisingly helpful.

Step 1

Make sure the Depth Map layer is the actively selected layer and go to 3D > New Mesh From Layer > Depth Map to > Plane. Photoshop switches to the 3D workspace and extrudes the layer into a 3D form depending on the grayscale values. 

Create a 3D layer based on depth map

Step 2

In the 3D panel select the Depth Map mesh. In the Properties panel, select the Coordinates icon and change the Scale value to be significantly smaller, something around 40

Scale the mesh down in the Z direction

Step 3

Select the Current View and use the Move Tool (V) with the Slide 3D Camera icon in the Properties Bar. Adjust the camera view to match the composition of the original image.

Change the Camera View

Step 4

The next step requires a metallic material. If you haven't installed the added materials from Adobe, they are available here. Download and install the Versatile Materials to add a set of metallic shaders to your 3D library.

Install the added shaders from Adobe

Step 5

In the 3D panel, select the Materials tab; there should only be one material in the list. In the Properties panel, use the Shader drop-down menu to select a metallic shader like the Metal Steel2 (Stainless) shader.

Assign a metallic shader

Step 6

The same link that contained the additional shaders also offers additional Image-Based Lights for HDRI lighting. Download the Creative IBLs set and unzip the download package.

Download additional Image Based Lights from Adobe

Step 7

In the 3D panel, select the Environment line. In the Properties panel, click on the document icon next to the IBL thumbnail. Select Replace Texture and select one of the new Creative IBLs to light the scene. I'm particularly fond of the Creative IBL-07-LightRigB. Then spin the HDRI widget around to reposition the angle of the texture.

Use a new HDRI texture to light the scene

Step 8

Go to 3D > Render 3D Layer (Alt-Shift-Control-R) to render the scene. The render may take a while, so just be sure to give Photoshop time to work.

Render the Layer

Step 9

When the render is finished, go to Select > All (Control-A) and then Layer > New > Layer Via Copy (Control-J) to copy the render information into a new layer. 

Make a copy of the render layer

Step 10

Hide the copied render layer for now, and go back to the 3D layer. Change the IBL texture to be the background stock image. Rotate the texture around until it appears the model is lit by the sky of the background. This texture will also show up in the rendered reflection.

Change the IBL to match the background stock image

Step 11

Render out the model again with the new reflections and copy the rendered information to another new layer with Select > All (Control-A) and Layer > New > Layer Via Copy (Control-J).

Render out the reflection pass

Step 12

Hide the 3D layer and reveal the Render layer again. Add a Curves adjustment layer and clip it to the Render layer with Layer > Create Clipping Mask  (Alt-Control-G). Pull the bottom point of the curves about one grid space to the right to deeply darken the shadow areas of the render.

Use curves to darken the render layer

Step 13

Move the reflections render layer above the curves adjustment layer and add a clipping mask for it too. Then set the blending mode to Soft Light.

move the reflections render to the top and set to Soft Light

Step 14

Make a duplicate (Layer > Duplicate Layer) of the original stock image background layer of the muscled model. Move this copy to the top of the layer stack clip it to the others. Go to Image > Adjustments > Desaturate (Shift-Control-U) and change the blending mode to Overlay.

5. Metallic Effects

Using the 3D tools to render the metallic shader is a clever method, and you may feel that the effect is already metal enough. But there are a few other techniques that can be used to really enhance this metallic appearance.

Step 1

Make a copy of the desaturated stock image layer. Keep this one unclipped and with a Normal blending mode. Go to Filter > Blur > Gaussian Blur. Use a blur Radius of 5 px

Create a blurred copy of the model

Step 2

If you still have the paths originally used to create a mask for the model layer, load that selection again. If not, Control-Click on one of the rendered layers to create a selection from those. Then use the selection to create a mask for the blurred layer with Layer > Layer Mask > Reveal Selection.

Mask the layer

Step 3

Add a Curves adjustment layer and Clip it to the blur layer. Then adjust the Curve so the leftmost point is at the very top of the grid and create several peaks and valleys throughout the middle of the curve. The effect on the model will look pretty strange right now.

Add a Curves adjustment layer with several peaks and valleys

Step 4

Select the Curves adjustment layer and the Blur layer and Group them together with Layer > Group Layers (Control-G). Then set the group's blending mode to Difference and reduce the Opacity to 47%.

Create a group and set the blending mode to difference and opacity to 47

Step 5

Make another copy of the blur layer and move the copy to the top of the layer stack, outside the previously created group. Then go to Filter > Filter Gallery and open the Sketch set. Choose the Chrome filter and set the Detail to 0 and Smoothness to 10

Use the Chrome filter

Step 6

Set the chrome layer's blending mode to Soft Light and reduce the Opacity to 40%.

Set the chrome layers blending mode and opacity

6. Finishing Effects

Our Colossus is certainly looking metallic, but there are a few more effects that will help put some polish on the piece and finish it off. That includes a few custom reflections, some painted touch-ups, and some bright glints of light on his metal skin.

Step 1

We will start with some custom reflections. Insert the city stock image again through File > Place Linked. Set the smart object's blending mode to Soft Light and reduce the Opacity to 50%. Go to Edit > Transform > Warp and adjust the warp cage to form the image roughly around the curves of his figure.

Place teh city image again and warp it

Step 2

The reflection shouldn't be nearly that sharp. Go to Filter > Blur > Gaussian Blur and use a blur Radius of 5 pixels

Blur the reflection

Step 3

Copy the Layer Mask from the chrome layer to the new reflections layer by holding down the Alt key while dragging the Mask Thumbnail from one layer to the other.

copy the layer mask to the new reflections layer

Step 4

The rendered form created a merged appearance between the fingers on his fist. There needs to be some visual separation there. Add a New Layer for Fingers Touch Up, and use the Brush Tool (B) with a small, soft round brush to paint in some darker lines between the fingers of his fist.

Touch up the lines between his fingers

Step 5

Add a new layer for Dodge and Burn. Go to Edit > Fill and set the Contents to 50% Gray. Then set the layer's blending mode to Overlay. Use the Dodge Tool (O) set to midtones and 8% Exposure to manually add bright spots to the metallic surface. 

Then switch to the Burn Tool (O) to darken the shadow areas too. This is a very versatile method of hand-painting the brights and darks of the metal surface.

use a custom dodge and burn layer

Step 6

Create a merged layer at the top of the stack by holding down the Alt key while going to Layer > Merge Visible. Name the merged layer "Highlights" and turn it into a Smart Object with Layer > Smart Objects > Convert to Smart Objects.

Create a merged layer as a Smart Object

Step 7

Go to Image > Adjustments > Threshold. Adjust the Threshold Level until only the very brightest portions of the image are filled with white, somewhere around 225

Use threshold to isolate the brightest parts

Step 8

Set the blending mode to Screen to see how the highlights render onto the image. The threshold adjustment does tend to make them too sharp and the edges too noticeable. So add a Gaussian Blur (Filter > Blur > Gaussian Blur) to smooth out the edges. A Radius of 4 Pixels should work just fine.

Use a Gaussian Blur to soften the highlights

Step 9

Add a new layer at the top named Flares and fill it with Black. Convert it to a Smart Object with Layer > Smart Objects > Convert to Smart Object and set the blending mode to Screen. Then go to Filter > Render > Lens Flare. Use the 105mm Prime at a Brightness of 64%. Try to position the flare about where his knuckle is. 

Add a layer for a lens flare

Step 10

The great thing about using the flare as a Smart Filter is that it's very easy to reposition. Just reopen the Lens Flare settings under the Smart Filter and move the flare center until it sits at the right point. Then add a secondary flare with lower Brightness, about 51%, and place it onto his collarbone.

Adjust flare center and add a second flare too

Step 11

As a final effect, add a new layer over the background city image. Set the blending mode to Multiply and Opacity to 50%. Use the Gradient Tool (G) to add a few radial gradients of dark blue to tint the background image so Colossus stands out more from the background.

Adding a gradient

And You Are Done!

Behold our X-Man Colossus!

In this tutorial we went over several different techniques for creating a metallic effect out of skin. Even though this project used them all in conjunction with each other, you can still achieve good results with just a single technique too. Post your skin to metal in the comments below so we can all see how you implemented these techniques! 

Final Image

How to Create a Wolverine Photo Manipulation With Adobe Photoshop

$
0
0
Final product image
What You'll Be Creating

In this tutorial I'll show you how to create a Wolverine photo manipulation. We'll go through a variety of photo manipulation techniques including blending, retouching, lots of painting, adjusting color, creating lighting effects, and more. 

Tutorial Assets

The following assets were used during the production of this tutorial:

1. Add the Background

Step 1

Create a new 1500 x 1000 px document in Adobe Photoshop with the given settings:

new file

Step 2

Open the factory image. Drag this image into the white canvas using the Move Tool (V). Activate the Free Transform Tool (Control-T) to adjust its perspective as shown below:

add background

Step 3

Go to Filter > Blur > Gaussian Blur and change the Radius to 7 px:

blur background

This step is to add some depth to the scene.

Step 4

Use an Adjustment Layer and set it as Clipping Mask to desaturate the background. Select Layer > New Adjustment Layer > Hue/Saturation and bring the Saturation value down to -84:

background hue saturation

Step 5

Make two Curves Adjustment layers (set as Clipping Mask) to darken the background.

background curves 1
background curves 2

2. Prepare the Model

Step 1

Isolate the model image from the background using your familiar method.  I've found an image of a man with a perfect pose for this tutorial, but feel free to use your own muscular ones! Make a New Layer with fill color between the background and the extracted model and fill with any medium dark colors.

isolate model

Step 2

I've noticed that the man's hairstyle doesn't really fit the character we're creating, so I'll be using an image with another hairstyle to fix it. Open the hair image and isolate the head only using your favorite method.

cut out the hair

Drag this image into the first document and use the Transform Tool (Control-T) to rotate the head to fit the existing one.

add hair

Step 3

Click the second icon at the bottom of the Layers panel to add a mask to this layer. Use a soft round Brush with black color (soft black brush) to erase the hard edges and blend the forehead and hair with the existing head. Lower the brush Opacity when brushing around the forehead to make the blended area smooth and natural.

hair masking

Step 4

Use a Hue/SaturationAdjustment Layer to make the forehead color and hair match the existing one. Change the Hue value of Yellows to -23:

hair hue saturation

Step 5

You can see that the light and shadow on the second head part doesn't fit the first. In the first image, the light on the head comes straight from above while in the second it comes from the left and makes a shadow on the right. Make a new layer and use the Clone Tool (S) to correct this skin area.

forehead cloning

3. Add the Model

Step 1

Hide the background layer and the fill layer and then hit Control-Shift-Alt-E to Merge All the transparent layers into a new one. Move the merged model into our working document and place him in the middle:

add model

Step 2

Use the Liquify Tool to retouch the model a bit. Go to Filter > Liquify Tool and choose the Forward Warp Tool. Use this tool to increase the muscles near the neck, make the face a bit bigger and the chin shorter.

model liquify
liquify result

Step 3

Create a New Layer (set as Clipping Mask) and use a soft Brush with the color #9a6349 and opacity about 30% to reduce the highlight on the armpits, body and arms. We're aiming to make another light affect these areas, but it's not very strong so we don't need many highlights.

reduce model highlight

Step 4

Add a Hue/SaturationAdjustment Layer and reduce the Saturation value to -73:

model hue saturation

Step 5

The model looks too bright compared with the background, so use a Curves Adjustment Layer and decrease the lightness:

model curves

On this layer mask, use a soft black Brush to define the light and shadow on the model. Remember the light on him comes straight from above. You can see how I did it on the layer mask and the result in the picture:

model curves masking
model curves result

Step 6

The man looks less rough and wild. Make a new layer, change the Blend Mode to Overlay 100% and fill with 50% gray:

DB new layer

Activate the Dodge and Burn Tool (O) with Midtones Range and Exposure about 15-25% to correct the light and shadow on the man and draw more details on his body. Also paint the tendons on his arms, neck and shoulders, and the veins on his face, especially on the forehead to strengthen the look, making him more tense and terrific when screaming. Here are the results with Blend Mode in Normal mode and Overlay mode:

DB normal mode
DB overlay mode

Step 7

Create a new layer and select a hard black Brush. Lower its size to 2-3 px to paint the hairs on his chest and the middle area of the body, and also paint on the arms and hands. The Wolverine must be a hairy one!

body hairs

Step 8

Make a New Layer and use a medium-soft Brush with the color #443f3b to paint the bright hairs on top of the head, especially on the right to fit the light there.

hair painting

4. Add the Smoke

Step 1

Create a New Layer on top of the layers and press D to turn the foreground and background to Default (black and white). Go to Filter > Render > Clouds:

cloud filter

Reduce the Opacity to 80% and use a Layer Mask to erase the effect on the upper half and leave it visible only on the lower. Don't make it cover the man's body—just leave a subtle effect there.

smoke masking

Step 2

Use a Channel Mixer Adjustment Layer to change the smoke color:

smoke channel mixer

Step 3

Make a New Layer and use a soft Brush with the color #7fc1d7 to make the smoke effect a bit brighter and more vibrant. Change this layer's Blend Mode to Soft Light 100%:

smoke light
smoke light result

5. Make the Metal Claws

Step 1

We're in the most interesting stage of the tutorial: making the metal claws. Create a New Layer on top of the layers and use the Pen Tool (P) to draw a shape like the claws we often see in the movie. Fill it with any colors you like, but bright ones so that they can be seen clearly on the dark background.

claw shape 1

Duplicate this layer five times. Place the claws between the fingers and use the Transform Tool (Control-T) to change their perspective. You can see that the poses of the hands are not the same—they're a bit different in angle and position—so the claws should follow them.

other shapes

Step 2

Add a Mask to each of these layers and use a hard black Brush to make the claws come from the split of the fingers. Don't use a soft Brush for that because it will leave soft and unnatural edges. Group them in a new folder by selecting all of them and pressing Control-G. We'll be using these shapes as a guide.

shapes masking

Step 3

Open the metal image. Select a metal bar on the left side using the Polygonal Lasso Tool (L) and add it to a claw on the left. Use the Transform Tool (Control-T) to warp it following the shape of the claw. Make the bright contour of the bar shown on the left side.

select a bar
add metal bar

Load the selection of the correlative shape by holding the Control key and clicking its thumbnail. Click the Add Layer Mask icon to get the result below:

load shape thumbnail
claw result

Step 4

Load the layer mask thumbnail of the shape.

shape layer mask thumbnail

Press Control-I to Invert the selection:

invert selection

Still on the layer mask, switch the foreground to white and hit Delete. We have the result:

after masking

Step 5

Use the same technique to add the other claws. After finishing, switch off the shape group as we don't need it anymore.

add other claws

Step 6

Make a group for the claw layers and change the group mode to Normal 100%. Use a Curves Adjustment Layer to darken the claws, and also increase the contrast to make the 3D effect more visible. The selected areas show where to paint on the layer mask:

claws curves 1

Step 7

Add another Curves adjustment layer to decrease the highlight on the claws more. Their bottoms still look so bright at the moment.

claws curves 2

After masking off the light, here is the result:

claws curves 2 masking

Step 8

Create a new layer, change the Blend Mode to Overlay 100% and fill with 50% gray. Use the DodgeTool to increase the hair highlight and the Burn Tool to darken the bottom of the claws to make them blend well with the hands.

DB 2 normal mode
DB 2 overlay mode

6. Add the Light Effect

Create a New Layer and use a soft Brush with the color #659eb2 to paint the blue light effect on the model's body. Take care of the curvy areas; the light on them should be brighter and stronger.

 blue light normal mode

Change this layer Blend Mode to Overlay 100%:

blue light overlay mode

7. Add the Particles

Step 1

Add the particles image to the current document using the Move Tool. Change this layer Blend Mode to Screen 100%:

particles screen mode

Step 2

Use the Liquify Tool to distort the particles, making them look as if they're flying from the bottom. Also try to make the effect look ghostly and unreal— we're in a fantasy world!

liquify particles
particles liquify result

Step 3

Apply a Gaussian Blur of 2 px to soften the particles:

particles gaussian blur

Step 4

Use a Layer Mask to reduce the particle intensity. Also make some particles fade and appear less visible than the others—it helps to increase the depth.

particles masking

Step 5

Add a Channel Mixer adjustment layer to change the particle color to fit the smoke light:

particles channel mixer

8. The Final Adjustment

Step 1

Make a Gradient Map Adjustment Layer on top of the layers and pick the colors #e10019 and #00601b. Lower the opacity of this layer to 20%.

gradient map

Step 2

Add a Color Fill layer and pick the color #280002. Set this layer Blend Mode to Exclusion 100%:

color fill layer

Step 3

Use a Color Balance adjustment layer and change the Midtones and Highlights settings:

whole scene color balance

Step 4

Make a Photo Filter adjustment layer and pick the color #66afd8:

photo filter

Step 5

Create a Curves Adjustment Layer to increase the contrast of the whole scene:

whole scene curves

Step 6

The last step: use a Levels Adjustment Layer and decrease the lightness.

whole scene levels

The following areas show where to paint on the layer mask:

levels masking

Congratulations, You're Done!

I hope that you've enjoyed my tutorial and learned something new. Feel free to share your ideas or comments in the box below—I'd love to see them. Enjoy Photoshopping!

final result

The Ultimate Design Guide to Standard Business Card Sizes

$
0
0
Final product image
What You'll Be Creating

Looking to update your business stationery, and impress new clients at your next networking event? Are you unsure what is a standard business card size or what business card dimensions you should use? 

This guide will take you through the standard sizing for business cards by country, and also take a look at a couple of ways you can make your business cards really stand out by choosing an unusual size, print finish or detail. 

Looking for the perfect ready-made business card? Discover a huge range of business card templates on Envato Market. Or why not track down the perfect designer over at Envato Studio to make your business card ideas come to life? 

Things to Note About Business Card Sizes

1. There is No Single ‘Standard Size’...

The first thing to talk about is that there is no single ‘standard business card size’ for a business card. Most countries will have a preferred average business card size which is more commonly used, but that’s not to say that other sizes aren’t also used by businesses based in that country. Choice of printer and personal preference are just two factors which might influence the dimensions of a business card. 

2. ... and This is in Part Due to Historical Reasons

There’s also a historical dimension to business card sizing, which is why sizes can vary between countries. Today’s business cards can trace their roots back to 17th Century Europe, where cards were used as announcements for the arrival of aristocratic and other wealthy people back to their home town or even their own household. By the 19th Century these ‘calling cards’ or ‘visiting cards’ were widely popular amongst the middle and upper classes, with many houses featuring ornate card trays in the hallway for visitors to leave their cards in when leaving.

calling card
Calling card of Kaiser Wilhelm. The text reads, “Wilhelm, Deutscher Kaiser u. König von Preußen” (translation: “William, German Emperor and King of Prussia”).

Printed cards were not only intended for social purposes. Tradesmen in Europe began using ‘trade cards’ which were given to a customer before or after a job was completed. They often featured maps detailing the trademan’s business premises, allowing the customer to get in touch easily. Originally these trade cards would have been produced on a press, but after 1830 it was more likely to have your card produced using lithograpic printing methods.

trade card
Lithograph-printed trade card for Murray & Lanman Florida Water Cologne, 1881

Europe, the Americas and other parts of the world adopted the trade card model and produced them according to their own cultural preferences. As the ways in which individuals carried their cards evolved (the modern bi-fold wallet only became standardized in the mid-20th Century when the first credit cards were introduced), so did the dimensions of business cards, which were adapted to fit inside wallets, purses or satchels accordingly. Over time, each country developed their own preferred standard size, which still tends to be the most commonly used size in that country today.

3. Technical Things to Note Before You Begin

Before you get started with designing your cards, check with your printer whether they have a standard size that they prefer to work with. If you want to go for a more unusual custom size you should also make sure to ask whether it would be difficult for them to print and cut the cards consistently. Nobody likes a business card with wobbly text!

Another thing to check is the printer’s preference for bleed dimensions. You should always provide your completed artwork with a bleed around the entire edge of the card, but the width of the bleed can vary between about 3 and 5 mm*, depending on the printer’s preference. So be sure to check in with them about that to avoid having to redo your artwork. 

Note: All the standard business card sizes pictured below are illustrated with a 3 mm bleed.

You might also want to add some more unusual print finishes to your card design, such as rounded corners (which will require die cutting), foiling (to add metallic or floro touches), or laser-cutting (to create intricate internal designs, to mimic a lace effect). You should prepare your final artwork with these desired finishes in mind, or talk to your printer about how to set up the artwork according to their preferences.

Read on to find the most commonly used business card size in your country:

If You’re in the USA or Canada

The standard size of a business card here is 89 mm by 55 mm (or 3.5 by 2 inches). 

usa
usa
Creative Business Card Template

If You’re in Western Europe

Aside from a few variations, European countries mostly share the same standard size for business cards. The UK, Ireland, Italy, France, Germany, the Netherlands, Spain, Switzerland and Belgium all tend to go for a slightly narrower average business card size at 85 mm by 55 mm (3.346 by 2.165 inches).

western europe
watercolor business card
Watercolor Business Card Template

If You’re in Australia, New Zealand or Scandinavia

Australia and New Zealand share the same business card dimensions, as do Northern European countries Denmark, Norway and Sweden. Taiwan also shares the same size, which is 90 mm by 55 mm (3.54 by 2.165 inches), just ever so slightly wider than the American size.

australia
australia new zealand
Beauty Business Card Template

If You’re in Japan

Japanese business cards are called ‘Meishi’, and they have a very specific ritual associated with how they are given. They are printed on a Japanese paper size called Yongo, which is 91 mm by 55 mm (3.582 by 2.165 inches) in diameter. It used to be traditional for women to have smaller cards (at ‘Sango’ size, about 3 and 3/8 by 2 inches); and it was also customary for these to have rounded corners.

Meishi are stored in special leather cases. When meeting a new business contact, the card is presented with both hands, held by the top two corners, allowing the recipient to be able to read the text on the card easily. The giver also introduces himself formally to the recipient at the same time. The recipient accepts the card by holding the bottom two corners of the card with both hands, taking care not to cover the name or other information on the card, which would be considered disrespectful. The recipient then reads the card, thanks the giver and bows. The card is then placed carefully inside his or her own leather case. 

japan

If You’re in China

The standard business card size used in China, Hong Kong and Singapore is 90 mm by 54 mm (3.543 by 2.125 inches). 

china

If You’re in South America, Central America, Eastern Europe or South Africa

This card size is shared by a large number of countries across the world, including Argentina, Brazil, the Czech Republic, Finland, Hungary, Israel, Kazakhstan, Poland, Romania, Russia, Serbia, Slovakia, Slovenia, Ukraine, Bulgaria, Latvia, Mexico and South Africa. The 

typical business card size used here is 90 mm by 50 mm (3.543 by 1.968 inches).

eastern europe
eastern europe
Creative Business Card Template

If You’re in Iran

The Iranian standard card size is a little smaller than some of the others, at 85 mm by 48 mm (3.582 by 2.165 inches).

iran

If You’re Looking for Something More International

Although there is no international standard card size, there are a couple of sizes that are more widely recognized by printers in different countries, and can serve as international crossovers as a result—which is perfect if your work involves meeting people across many different continents.

The ISO 7810 ID-1 size which is 85.6 mm by 53.98 mm (3.370 by 2.125 inches), is the size of most international ID and credit cards, and so will fit quite happily into most people’s wallets without a problem.

international ISO
abstract business card
Abstract Business Card Template

A little on the rarer and smaller side but nonetheless still an internationally recognised size is the ISO SO 216 (A8) which is 74 mm x 52 mm (2.913 by 2.047 inches) in diameter. 

international ISO

If You’re Looking for Something More Unusual

As businesses look for more ways to stand out from their competitors, business cards too are evolving and becoming ever more unique and eye-catching. Unusual dimensions of a business card are now becoming more common, with some printers offering services for producing smaller ‘minicards’ and even square cards. These sizes are great for creative businesses looking to produce a card that steps away from the norm. 

mini card

Square cards are also great for showcasing Instagram-style photos; giving you just that extra bit of room to make more of a visual statement.

square card

Go Forth and Make Fantastic Business Cards!

What I’ve hoped to show you here is that, although there are some standard sizes which are considered more common and normal in particular countries, there is also no single standard size for producing a card. As long as the card is reasonable practical and portable, you can consider creating a card at either a more standard size, or go for something a bit different, like a mini or square card. 

Think about the real purpose of your business card—where will it be picked up or given? If it’s more important for somebody to keep the card to place in their wallet then a standard size is probably the wisest choice, but if you’re relying on the card to attract someone’s eye, say at a convention or in a shop, then you might want to go for a slightly different size that stands out a little more.

Subtle details added to your card can also make a difference. Adding rounded corners can soften the appearance of a card, making it feel more curved and tactile, as in the rounded business card template below:

rounded corners
Rounded Business Card Template

Choosing a beautiful print finish can also add to the final look and feel of your cards. Why not choose a textured paper, teamed with embossed typography for a luxurious feel? Or why not choose an ultra-modern matte coated paper finish for a super-smooth, contemporary style?

matte finish cards
Photography Business Card Template

Adding unusual texture, whether ‘faked’ with texture images or created using embossing or bevelling post-print techniques, can also add extra character to your cards and turn them into keepsakes for potential clients or customers.

textured cards
Textured Business Card Template

Once you have chosen your preferred card size, you can get started with the fun stuff! Designing your own business cards can seem like a daunting task at first, but these top tips will give you plenty of food for thought: 

Looking for a specific style of business card, or simply to get some more inspiration for your own designs? These premium card templates are a great place to start either way:

Stuck on what to actually include on your business card? This useful guide will help you to edit your details down and make a lasting connection with a prospective client:

You can also find a huge range of stylish business card templates over on Envato Market. Make sure to check it out!

How to Create a Fabulous Professor X Pin-Up in Adobe Illustrator

$
0
0
Final product image
What You'll Be Creating

Comic book covers are basically pin-up illustrations. It's incredibly common for artists to tackle X-Men characters as a range of pin-ups, but one of my favorites is often ignored or not as fabulous as I think he should be.

Join me as we illustrate a fun pin-up design with Professor X in the starring role, all within Adobe Illustrator CC! We'll be using a couple of stock images and textured vector brushes courtesy of purchases I made from Envato Market. Open up Adobe Illustrator and let's get to it.

1. Prepare Your Illustration

Step 1

Let's start with a couple of stock images from Envato Market. This is entirely optional, as you may be more comfortable with fleshing out a character and pose from scratch. 

I chose an elderly man in a wheelchair and a businessman in a swivel chair as references for the pose, chair, and clothing. When combining reference images, it's important to try to get as similar an angle as possible. You can sketch over an image or next to it, again depending on what you're more comfortable doing for your design.

Choose your stock references for your project
Images featured are Elderly Man in Wheelchair and Executive in Swivel Chair from Envato Market.

Step 2

Using the top half of the businessman as a reference for Professor X's torso, I sketched out my design with the Blob Brush Tool (Shift-B) on a layer above my reference images. Alternatively, you may want to sketch your design out onto paper or in another drawing program.

Keep your sketch loose and try to figure out your figure's pose. Use references as needed.

Sketch your design out for your illustration

Step 3

In order to tighten up my sketch, I Grouped (Control-G) portions of my illustration and proceeded to draw on top with a darker color. Repeat this process as needed until you have the sketch or clean-line drawing you'll need to create your final artwork. You can also download the image below in the download link on the right side of this tutorial.

Tighten up your sketch to prepare for the next step

2. Define Flat Colors

Step 1

On a New Layer, trace sections of your sketch with the Pen Tool (P). This section focuses on defining blocks of color: skin, clothes, the chair, etc. Draw the head and neck, and section the hand into several parts, making sure to organize objects in the Layers panel.

I've also added a stroke onto each object. Since I'm covering up my sketch layer, this is to help you figure out what shapes you're looking at (and what their boundaries are) while working up the full image.

Trace your sketch with filled in objects

Step 2

Continue drawing each section of your image. Below I've separated the arm and suit into multiple sections. This allows me to see which parts overlap each other (such as fingers or the forearm) as well as help define the final shapes I'll be using.

Keep tracing and layering objects within your design

Step 3

Initially I'd chosen Professor X's classic green suit. Since I grew up with the animated series from the early 90s, it's the suit and bright colors I like drawing the most. Pastels, however, are much more up my alley, so whatever color scheme you choose, make it your own, and have fun with it!

Work up the design in sections: jackets, lapels, arms, shirt components underneath, legs, and so on. This is also a good time to figure out how fitted or loose the suit is and how much of it will show while he's in his chair.

Define the body clothing and color palette

Step 4

Since the chair hides some of the suit and the suit hides some of the chair, I found it easiest to Hide the other flat color objects in the Layers panel in order to block out the basic chair shapes.

When working up the line art and details later, you can look more closely at your chair reference (if this is something you're using). Any time you're working on a portion of the design that may be hard to see on the sketch, such as the blanket, suit details, or chair details, feel free to Hide and Unhide components in order to trace or draw them more effectively.

Work up the chair line art and hide or unhide components as needed

Step 5

Below you'll see the fully color-blocked version of my design. Figuring out the placement of objects early on will help you when you're rendering your illustration later. Each object is outlined with a darker hue of its fill color, with the stroke's Cap and Corner set to Rounded in the Stroke panel.

It's sort of like working on a painting: you could focus on one area and render it fully, but you'll work more effectively at creating a harmonious design if you work on it in stages throughout.

Copy (Control-C) and Paste (Control-V) an instance of this color-block group and set it aside for later. We'll be adding an outline to the final product, and it's easier to save this now instead of deleting all of the details to be added during the rendering sections later.

Block in the color and shape of each object before moving on ahead

3. Render the Face and Hands

Step 1

In order to make this section easier to complete, I've moved my sketch layer above my color block layer, selected it, and set its Blending Mode to Multiply in the Transparency panel. This allows me to see my object boundaries while still being able to see my sketch details.

Set the sketch layer to multiply and place it above the color block layer

Step 2

Let's work on the face a bit. For my purposes, the face has the most detail of the entire piece. Using the Shape Builder Tool, draw over your original sketch. I've set the brush size at 1-2 pt with Pressure enabled (since I'm using a graphic tablet). You can also trace your sketch with the Pen Tool (P) or the Pencil Tool (N) if you wish.

Focus on the eyebrows (these are incredibly important on Professor X), eyes, nose, and mouth. Speed up your process by drawing one half of the face, Grouping it together, and Reflecting a copy of it over a Vertical Axis. If that's too symmetrical for you, you can, of course, draw both sides.

Since this is a pin-up illustration, I've given Professor X full lips, high cheekbones, and a hint of eyelashes.

Trace your face with a drawing tool

Step 3

Adjust the placement of the facial features as needed (I moved the nose and mouth up). Using a dark peach tone, define the cheekbones and top lip as well as the structure of the nose itself.

Further define the face

Step 4

Using the drawing tool of your choice (I opted for the Pencil Tool), draw shadow shapes in dark peach around the professor's head.

  1. You want to define his chin, cheekbones, and temples. Draw in shadow shapes under the mouth, nose, eyebrows, and on the sides of the nose as well. Group these shadow shapes together.
  2. Copy and Paste the basic head and ear objects.
Start drawing shadow shapes on the head

Step 5

Continuing on from the last step, Unite the head and ear objects in the Pathfinder panel. Align this shape on top of the original head. Make sure it's above your shadow shape group. Create a Clipping Mask and make sure the base head object's stroke is set to Outside in the Stroke panel.

Clip the shadow group to the head object

Step 6

Let's finish up this section with the hand and some highlights on the face.

I've layered my hand pieces so that there are three fingers and two sections for the hand (of course, there are five digits in total). Three of the objects that are closest to the viewer are peach while the other two are dark peach.

  1. Draw shadow shapes on each of the peach objects.
  2. You can Make a Clipping Mask or simply draw the shapes precisely so they fit within the object boundaries.
  3. Use an even darker peach color for the shadow of the palm of the hand and on the pointer finger near his eyebrow.
  4. Let's add some light and even lighter peach (or cream) objects for the highlights. I've added highlight shapes on the chin, lower lip, cheeks, forehead, nose, and a couple of parts of the hand.
  5. Feel free to render the skin as much as you want. Repeat the process on the other visible hand.
Render the hand and highlight the face

4. Render the Clothing

Step 1

Textured brushes can add a lot to an illustration. I purchased a large set of textured vector brushes from Envato Market. You are welcome to check out the same set, or create your own.

Don't be afraid to alter the brushes you use so that they work with the scale of your document. In the case of these Scatter Brushes, they were too large overall. Double-click a brush in the Brushes panel and adjust its Options to your liking. I adjusted the Scale, Spacing, and Rotation of the brushes I used.

Choose and adjust textured brushes as needed
Brushes featured are the Vector Brush Set from Envato Market.

Step 2

With a textured scatter brush and the Paintbrush Tool (P), draw a few strokes of dark teal and light aqua over the arm of your figure. Group these elements together. Copy and Paste an instance of the suit jacket arm and Align it over the brushstrokes with the original object. 

Make a Clipping Mask so the shadow and highlight shapes stay within the boundaries of the arm shape. Use this technique throughout the rest of your illustration.

Draw a couple shadow and highlight strokes and clip them to your object

Step 3

Let's take a look at how my suit's rendering process is going:

  1. I've used a light blue to add some shadow shapes to the shirt cuff.
  2. Solid shadow and highlight shapes are on the lapels of the jacket. These are also Clipped to the lapel object.
  3. Consider not only cast shadows, but also how your fabric may move. For the purposes of this tutorial we're not getting too involved in rendering, but some fabric folds will do quite nicely all the same.
  4. Consider a simple striped pattern on the pocket square or something geometric.
  5. Note the difference in Scatter Brush textures. The highlight shapes on this arm are like cross-hatched lines while the shadows are more like dry brush strokes.
  6. Finally, check out the cast shadows and highlights on the second hand. It's simplified quite a bit here. If you want to put more detail into the hand, go right ahead!
Breaking down the rendering process

Step 4

Let's move on to the legs. As with the arms of the suit, I've clipped shadow strokes and highlight strokes to each pant leg. I've also shown some dimension in the pant cuff with a dark teal rectangle. Keep your objects and their associated Clip Groups organized by Grouping together like objects in the Layers panel.

Render the pant legs

Step 5

The professor's shoes are a lovely lilac. I used a darker lilac for the initial shadows. I want to define each plane of the shoe. For some additional depth, I added a few shadows of even darker lilac on top of the first to show where the shoes bend a bit.

Clip the shadow groups to their respective shoe shapes. Make sure you're making a copy of your original object for each Clipping Mask or else you'll find your shoe or pant leg is suddenly missing, having become a clipping path.

Alternatively, you may want to create a textured pattern on the shoes to show a difference in material from the other objects.

Add shadows to the shoes

Step 6

For the socks, I drew dark pink shadow shapes that define the cast shadows onto the ankles from the pant legs. Then, I drew a couple of stripes to match the stripes on the pocket square.

Add details and shadows to the socks

Step 7

I created the blanket's pattern and shadow shapes in a few steps:

Use dark pink objects (these were drawn with the Pencil Tool) to define some of the folds in the fabric.

Then, overlay those fold shapes with shadow shapes that help show how the blanket curves into the legs and is flat against the professor's lap.

Next, draw horizontal and vertical stripes. Make sure they follow the contour of the blanket a bit. Set their Blending Mode to Overlay or Multiply in the Transparency panel.

Group all of the shadow and pattern objects together and Create a Clipping Mask, much as we've done with most of the other objects within this design.

Add shadow and pattern shapes to the blanket

Step 8

I repeated the same steps from the arms into the torso of the suit jacket and added the same shadow colors from the shoes onto the tie. Group together similar objects and make sure you don't change the order of your object sections (such as accidentally moving parts of the wheelchair above the body) while organizing your Layers panel.

Completed figure

5. Render the Chair

Step 1

The process of rendering the chair is fairly similar to the body: creating shadow and highlight shapes and making clipping masks. I'll be using yellows and oranges to render the chair into a glorious gold.

Draw orange shadows to show the cylindrical shape of the bar that holds the wheel in place. Play with texture on the wheel itself. For this I drew little square and triangle shapes with the Pencil Tool.

Render the chair with orange shapes

Step 2

  1. Don't forget the bar that connects to the foot rest. How shiny or detailed you render the chair is up to you. I've opted to keep things fairly simple.
  2. I've added a darker shadow on the wheel to help show the angle as well as the curvature of the shape.
  3. Maroons and reds make up the highlights of the wheels themselves. Since the wheels are already a dark color, there's no need to add shadow shapes to them. Layer highlight colors and make sure they curve in their centers rather than cut straight across the wheel. It is a rounded object after all.
Render the wheels

Step 3

As you render the outside of the seat of the chair, consider where you've basically established your light source (in front of the figure). Also consider where the professor's arm and the chair's wheel cast a shadow.

Consider wavy shapes to show how shiny the chair is unless you're going for a different textured look. Textured scatter brushes would do well in making a brushed metal effect on the chair, or you can render it so it's shiny and chrome-like.

I've chosen to repeat the mottled pattern created on the chair's wheel. Simply draw squares, circles, triangles, and additional wiggly shapes, Group them together, and Clip them to the chair base object in the same way we've made Clipping Masks previously in this tutorial.

Render the chair itself

Step 4

Render the inside of the chair as well. Repeat similar shapes and textures that you used on the other side. I like to layer objects that have been set to Multiply in the Transparency panel to add a bit of color variation.

Render the inside of the chair

6. Add Details

Step 1

Using the Blob Brush Tool (Shift-B) with the brush set to 1 pt, I've drawn over sections of my design to add details such as stitching and fold lines. Match the color of the detail line work to your object's outline color.

Add details to the shoes and pants

Step 2

The suit coat got quite a bit of detailing. Define the lapels a bit more with a thin line or stitching details. Alternatively, you can draw a stroked path with the Pen Tool and set the stroke to a Dashed line in the Stroke panel.

Draw buttons on the suit and folds into the elbows and waist of the jacket itself. Group everything together.

Add additional details on the suit jacket

Step 3

Retrieve your copied instance of the color-blocked professor. Unite the objects in the Pathfinder panel. Copy and Paste two of these behind the Professor X group. The top copy will be filled with white with a white stroke set to 4-10 pt (the stroke width depends on how thick an outline you'd like). The bottom copy will be set to dark brown with its Blending Mode set to Multiply and Opacity set to 70-50%. Offset it slightly behind the other groups and objects.

Add an outline and shadow behind the professor

Step 4

In my final illustration, I've created a series of sparkles around the professor's gorgeous bald head. In order to do so, I've manipulated circles and made a simple scatter brush.

Draw a small circle with the Ellipse Tool (L). Apply a Pucker effect to it (Effect > Distort & Transform > Pucker & Bloat) of 50-80%. Repeat with a small collection of circles in varying sizes and Pucker effects.

Expand your group under Object. With your sparkles selected, create a New Brush from the Brushes panel options. Choose Scatter Brush and check out the attributes I assigned to one of mine below:

  • Size: Pressure 28% 85%
  • Spacing: Fixed 63%
  • Scatter: Random -55% 74%
  • Rotation: Random -136° 165°
  • Rotation relative to: Path

These settings are arbitrary. I played around with them until I got a brush that I liked. Feel free to make multiple brushes like this. Play with size and scatter variations, sparkle styles, and even colors! Hit OK when you're done, and you'll find your new brush in the Brushes panel ready to use.

Create a custom sparkle brush

Step 5

Brush on some sparkles around the professor's head. Play with their color, size, rotation, and transparency to really make him glisten.

Add sparkles around the professors head

7. Create a Background

Step 1

On a layer beneath the professor, draw a fun wiggly shape. You can manipulate a polygon or simply draw something out with the Pencil Tool. Place this shape behind the professor's head.

Draw a wiggly shape behind the professors head

Step 2

Select your wiggly shape and go to Object > Path > Offset Path to offset it by 25 px or so. Repeat a couple more times to create larger and larger shapes. Then, change to 405075100 px and more to let the shapes radiate outward. Set every other object's fill color to hot pink and all others to white to create a striping effect. Group these objects together.

Offset each shape to create radiating wavy lines

Step 3

I created a copy of my radiating shapes, set the fill color to null, the stroke to bright blue at 5 pt weight, and applied an Outer Glow (Effect > Stylize > Outer Glow) with the following attributes:

  • Mode: Screen
  • Color: Light Blue
  • Opacity: 75%
  • Blur: 0.1 in

This step is entirely optional and works even better if you create a dark background behind the professor.

Apply an outer glow effect to the wiggly lines

Great Job, You're Done!

Fantastic work, you've made it to the end! Add some additional sparkles around the professor's chair to complete your design, or create alternate mutant power effects with glowing lines and other effects. 

Most important of all, share your Professor X pin-up illustration in the comment section below, and don't forget to check out the other X-Men themed tutorials we've cooked up for you here at Envato Tuts+!

The final image

How to Digitally Paint a Superhero Portrait in Adobe Photoshop

$
0
0
Final product image
What You'll Be Creating

If you could have any superpower, what would it be? With digital art, you don't have to wait to create magic. Just open Photoshop and grab your favorite pen tablet.

For this tutorial, follow along as I show you the process of creating a digital portrait inspired by the electrifying X-Men character, Storm.

1. Research Storm

Whether you're inspired by the cinematic version or the original comic, it's always a good idea to do a little background research before starting your painting.

A Little About Storm

Storm is well known as the X-Men mutant who controls the weather. Born from a tribal princess, her power and tenacity make her a natural leader and a pivotal member of the team.

From a design standpoint, there are a couple of things we should consider when crafting her portrait. Here's a quick list of character details we'll need to know:

  • Storm has long white hair.
  • Her eyes turn white as she accesses her power.
  • She controls the weather, and lightning shoots from her hands.
  • Her outfits vary, but their colors may include, black, white, and gold.
  • Consider dark, stormy weather for the background.

The Inspiration

After spending many hours looking for the right photo to reference from, I finally landed on this fierce portrait of an Angry Girl from Envato Market. And don't limit yourself by race or other particular details when looking for references. Whenever I look for pictures, I'm always searching for photos with the right attitude or vibe.

Storm Sketch and Photo Reference
Here's the original reference next to the final sketch.

In this picture, the model looks at us with a powerful stare and tense pose. At its core, this composition drives a clear expression and mood that will be perfect for a superhero portrait.

2. Sketch a Superhero

Step 1

Now that I've chosen the perfect picture, it's time to move on to the sketch. Use a Hard Round Brush with Pen Pressure for Opacity enabled to begin sketching Storm.

For this composition, I want Storm to be in an action pose, revving up her electromagnetic powers before unleashing them.

Drawing a Rough Sketch of Storm

Concentrate on getting the proper form and position of your model before moving onto details. Allow yourself to be a little messy as you experiment with the composition as well as her uniform. Just like the photo, I want her body to be out of bounds. This will ultimately help make the angle of the pose more dynamic.

Step 2

Lower the sketch Opacity to 30% and create a New Layer. Use this layer to draw a much cleaner sketch with the same brush. One of the other reasons why I chose the photo is because I wanted to draw a pose that was more challenging than I was used to. Strive to create the best sketch that you possibly can while drawing much more fluid strokes.

Draw a Cleaner Sketch of Storm in Photoshop

It's crucial that you draw Storm with all her important details first before moving onto the painting. From her outfit to the way her hair flows, draw each line with a sense of purpose. The only area I'm not worried about is the hands. Later on I'll adjust their position to fit the scene better.

Step 3

Since I plan to change the lighting scheme a bit, it's important for me to create my own reference as a guide. Here I use quick strokes of gray and white to establish the lighting scheme, concentrating the light source from the lower right side.

Painting Grays to Establish Light and Shadow
Quickly paint some gray values as a guide for how you'd like the lighting.

3. Paint the Base

Step 1

One your sketch is done, Merge all the layers together except for the gray values and the white background. Keep a copy of the lighting reference nearby as you work. Kick off this painting by filling in the Background Layer with a rich purple color using the Paint Bucket Tool (G).

Now add a New Layer and use a completely solid Round Brush at 100% Hardness to paint solid colors for the base of the painting. Set the Sketch Layer to Overlay so that it blends into the colors better. 

Paint the Base Colors for the Storm Painting

Now obviously, the final portrait doesn't include any yellow. But I want you to see how important it is to keep an open mind as you paint conceptual pieces. Whether it's the composition, colors, or lighting scheme, your painting can change at any point. 

Step 2

Set a couple of layers as Clipping Masks to the base colors and background. Change the Layer Blend Modes to Multiply to begin painting shadows for the portrait. Simply pick up nearby colors with the Eyedropper Tool (I) to set that as the Foreground Color as you paint. As long as the layer is set to Multiply, the color will appear much darker.

Paint Shadows for Superhero Portrait in Photoshop

Step 3

Continue to paint more shadow as you begin to explore the lighting. Set a New Layer to Linear Dodge (Add) to incorporate some light into the scene. Just like before, all you have to use is colors from surrounding areas. This time, the effect will result in much brighter colors, making it easier for you to understand how to paint the light.

Add Highlights to Your Painting with Linear Dodge Add

4. Adjust the Color Scheme

Step 1

Once you have a grasp of how you would like to light your portrait, it's important to start blending the colors as best as you can.

Use a Hard Round Brush for painting details like the hair and outfit...

Use Hard Round Brushes to Paint Intricate Details

... and a Soft Round Brush for beautiful, smooth skin.

Use Soft Photoshop Brushes to Paint Skin

Here's what we have so far after cleaning things up.

Clean Up Your Digital Painting with Hard and Soft Brushes

Step 2

Now that I've progressed pretty far with this painting, I'm starting to realize that the colors don't work too well together. Although I originally intended for there to be gold details in the outfit, the colors started to confuse me while trying to maintain this stormy lighting scheme.

Use Layer Blend Modes to Color Paintings in Adobe Photoshop

Take a moment to step away and come back to your art with fresh eyes. Since her hair should be white anyway, I simply use a New Layer set to Color to paint black all over the hair and gold accents. Immediately the color scheme is massively improved!

5. Change Her Body Shape

Listen to your painting. If something doesn't feel right, it's probably because it isn't.

Although I wanted a dynamic pose, Storm is starting to look a little bulky in the upper torso area. Fix any body shape easily with Liquify.

First, Merge all your layers together. Keep a copy nearby in case you mess up by hitting Control-J to create a duplicate. Now go to Filter > Liquify and use the Forward Warp Tool (W) to cinch the back, waist, and chest area. 

Before and After Liquify Transformation
Here's a quick animation of the painting before and after using Liquify.

Be very careful with this step! Avoid distorting the body too much or else you'll do more damage than good!

6. Final Details

Step 1

Now that we have that out of the way, you may be wondering:

"What's left?"

Well, let's start with the background. Since I had to merge all the layers together, I need to separate Storm from the background again. Select the Polygonal Lasso Tool (L) and use it to create a selection all around Storm. Then Right-click and select Layer Via Copy.

Blur a Digital Painting Background with Gaussian Blur

Now Blur the background using Gaussian Blur. Go to Filter > Blur > Gaussian Blur and set the Radius to 8 px. This will help to create the perfect base for our stormy background. Follow up this step by setting a New Layer to Overlay to paint soft, fluffy clouds using a Soft Round Brush. Gather plenty of Cloud References to help you understand the shape and texture of clouds.

Step 2

As you gain momentum with this piece, take this opportunity to Zoom back in and add more personality by painting extra details that add more to the character's backstory. Glam her up with some lashes and full lips. And switch out the ruby jewel for a quick X-Men logo planted onto her chest.

Painting the X-men Logo Onto Storm
Every extra detail you paint adds even more to your character's design.

Step 3

I'm not really feeling this purple undertone. Let's change it up with an Adjustment Layer. Go to Layer > New Adjustment Layer > Color Balance. Adjust the settings for the Midtones and Highlights to favor bluer hues.

Use Color Balance to Adjust the Colors in a Digital Painting

Step 4

Next up, highlights! As one of the last steps, painting the highlights is definitely time-consuming. Because she has so much hair, begin by painting the highlights for her hair first. Use a Hard Round Brush with 100% Hardness to create clean strokes for each hair strand, while also incorporating some lustrous shine.

Digitally Painting Hair Strands in Adobe Photoshop

Don't forget to tackle those pesky hands before moving onto the lightning. Show her incredible power by painting squiggly strokes of electricity onto her eyes, hands, and background.

Digitally Paint LIghtning Bolts for X-men Storm
Painting lightning bolts is similar to painting veins. Use squiggly, sharp strokes for each one.

Step 5

Last but not least, I'm going to quickly try to readjust her skin tone by removing some of the pink undertones and giving her a richer tan. To do this, I'll need a layer set to Color Burn.

Just like before, sample nearby colors to deepen her skin tone so that she's more contrasted against the bright blue and white scene. If you need further adjusting, consider a New Adjustment Layer like Curves to bring more yellow values into the painting. 

Painting a Tan with Color Burn in Adobe Photoshop

Continue to refine the edges of your painting. Try to make everything look as crisp and clean as possible. Add more reflected highlights onto her outfit and face until she looks as if she's beaming with incredible power.

X Men Storm Fan Art by Melody Nieves

Awesome Work, You're Now Done!

Crafting a wicked superhero painting is not unlike any other digital portrait. The key to success is to create a composition full of powerful energy and magic.

And with Photoshop at your fingertips, you can correct mistakes better than in any traditional medium.

I really hope you've enjoyed this tutorial. Who's your favorite X-Men character? Let us know in the comments below!

And to follow along with the step-by-step process of more magical digital art, check out these amazing fan art tutorials:

End result

How to Create a Mystique-Inspired Text Effect in Adobe Photoshop

$
0
0
Final product image
What You'll Be Creating

This tutorial will show you how to create a text effect inspired by the unique and bold coloring and texturing of X-Men's fictional character Mystique. 

It is similar to the text effects that can be purchased on Envato Market, but we'll be using a ton of textures, layer styles, and adjustment layers to create it. So let's get started!

Tutorial Assets

The following assets were used during the production of this tutorial:

1. Create the Background Gradient

Step 1

Create a new 1250 x 800 px document and duplicate the Background layer.

Duplicate the Background Layer

Step 2

Double-click the Background copy layer to apply a Gradient Overlay effect with these settings:

  • Check the Dither box
  • Angle: 70
  • Create the Gradient using the colors #1a1a1b to the left and #162228 to the right
Gradient Overlay

This will create a simple gradient to add the textures on top of.

Background Gradient

2. Add the Background Textures

Step 1

Add the cloud texture, resize it as needed, and change its layer's Blend Mode to Overlay.

Add Texture 1

Step 2

Add the Blurred stripe background image, resize it, and then change its layer's Blend Mode to Soft Light and its Opacity to 80%.

Add Texture 2

Step 3

Place the m-a32 image, go to Filter > Blur > Gaussian Blur, and change the Radius to 5.

Add and Blur Texture 3

Step 4

Resize the m-a32 image, and change its layer's Blend Mode to Overlay and its Opacity to 50%.

Adjust Texture 3

3. Add the Gradient Map Adjustment Layers

Step 1

Click the Create new fill or adjustment layer icon at the bottom of the Layers panel and choose Gradient Map.

Add a Gradient Map Adjustment Layer

Step 2

Check the Dither box and choose the gradient fill below. Change the layer's Blend Mode to Color and its Opacity to 50%.

Gradient Map Settings

Step 3

Add another Gradient Map adjustment layer, check the Dither box, and choose the gradient fill below. Change the layer's Blend Mode to Color and its Opacity to 25%.

Gradient Map Adjustment Layer 2

4. Create the Text Layers

Step 1

Create the text using the font PoetsenOne Regular. The Size is 235 pt and the Color is #1166c5.

Create the Text

Step 2

Duplicate the text layer twice to create two copies, and drag them below the original.

Name the copy in the middle Stroke, and the one at the bottom Stroke Blur. Then change the Stroke Blur layer's Fill value to 0.

Duplicate the Text Layer

5. Create the Stroke Blur

Step 1

Double-click the Stroke Blur layer to apply a Stroke effect with these settings:

  • Size: 13
  • Color: #4e5c69
Stroke

Step 2

Right-click the Stroke Blur layer and choose Convert to Smart Object.

Convert to Smart Object

Step 3

Go to Blur > Gaussian Blur, and change the Radius to 13.

Gaussian Blur

Step 4

Change the Stroke Blur layer's Blend Mode to Color Dodge.

Change Blend Mode

6. Create the Stroke

Double-click the Stroke layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Style: Stroke Emboss
  • Size: 9
  • Gloss Contour: Ring
  • Check the Anti-aliased box
  • Highlight Mode: Vivid Light
  • Opacity: 50%
  • Shadow Mode: Linear Burn
  • Color: #751b0f
  • Opacity: 50%
Bevel and Emboss

Step 2

Add a Contour with these settings:

  • Check the Anti-aliased box.
Contour

Step 3

Add a Texture with these settings:

  • Pattern: Type
  • Depth: 1000%
Texture

Step 4

Add a Stroke with these settings:

  • Size: 6
  • Color: #8a4909
Stroke

Step 5

Add an Inner Glow with these settings:

  • Blend Mode: Hard Light
  • Opacity: 100%
  • Color: #edb01d
  • Size: 5
Inner Glow

Step 6

Add a Gradient Overlay with these settings:

  • Check the Dither box
  • Opacity: 35%
  • Angle: 31
  • Choose the Gradient fill below
Gradient Overlay

Step 7

Add an Outer Glow with these settings:

  • Blend Mode: Linear Dodge (Add)
  • Opacity: 100%
  • Noise: 50%
  • Color: #cf6701
  • Size: 11
  • Contour: Ring
Outer Glow

Step 8

Add a Drop Shadow with these settings:

  • Blend Mode: Color Burn
  • Color: #cbcdd7
  • Opacity: 35%
  • Distance: 26
  • Spread: 6
  • Size: 35
Drop Shadow

This will create the bright outer stroke with a simple glow effect.

Outer Stroke and Glow

7. Style the Text

Double-click the text layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Size: 24
  • Uncheck the Use Global Light box
  • Angle: 45
  • Altitude: 74
  • Gloss Contour: Cone - Inverted
  • Check the Anti-aliased box
  • Highlight Mode - Opacity: 75%
  • Shadow Mode:
  • Color: #474747
  • Opacity: 75%
Bevel and Emboss

Step 2

Add a Texture with these settings:

  • Pattern: Broken Noise
  • Depth: 256%
Texture

Step 3

Add an Inner Shadow with these settings:

  • Blend Mode: Hard Light
  • Color: #ff9630
  • Opacity: 100%
  • Distance: 1
  • Size: 5
Inner Shadow

Step 4

Add an Inner Glow with these settings:

  • Blend Mode: Linear Light
  • Opacity: 35%
  • Noise: 15%
  • Color: #f8f5f5
  • Technique: Precise
  • Source: Center
  • Size: 90
  • Check the Anti-aliased box
Inner Glow

Step 5

Add a Gradient Overlay with these settings:

  • Check the Dither box
  • Blend Mode: Overlay
  • Opacity: 35%
  • Angle: 115
  • Use the Gradient fill below
Gradient Overlay

Step 6

Add a Drop Shadow with these settings:

  • Blend Mode: Color Burn
  • Color: #050505
  • Opacity: 50%
  • Distance: 7
  • Size: 9
Drop Shadow

This will style the text and add the navy texture base.

Styled Text

Step 7

Select both the Stroke and Stroke Blur layers, pick the Move Tool, and drag those layers slightly to nudge the stroke apart for the text.

Nudge the Stroke Layers

8. Add the Scales

Step 1

Add the webtreatsetc-opart-3.jpg image from the Abstract Warped Dots Patterns pack, and rename its layer to Pattern.

Add the Scales Pattern

Step 2

Pick the Magic Wand Tool, uncheck the Contiguous box in the Options bar, and click a white area of the pattern image.

Select the White Area

Step 3

Go to Select > Inverse, and click the Add vector mask icon at the bottom of the Layers panel to get rid of the white part of the texture.

Mask the Pattern

Step 4

Duplicate the Pattern layer, change the copy's Fill value to 0, and duplicate it.

Duplicate the Pattern Layers

9. Style the Pattern Layer

Double-click the Pattern layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Size: 35
  • Uncheck the Use Global Light box
  • Angle: -145
  • Altitude: 42
  • Gloss Contour: Cove - Deep
  • Check the Anti-aliased box
  • Highlight Mode: Linear Light
  • Color: #c5dffc
  • Opacity: 35%
  • Shadow Mode - Opacity: 50%
Bevel and Emboss

Step 2

Add a Contour with these settings:

  • Contour: Cone - Inverted
  • Check the Anti-aliased box
  • Range: 25%
Contour

Step 3

Add a Texture with these settings:

  • Pattern: Bright Squares
  • Depth: 752%
Texture

Step 4

Add an Inner Shadow with these settings:

  • Color: #4d565a
  • Opacity: 30%
  • Uncheck the Use Global Light box
  • Angle: 12
  • Distance: 13
  • Size: 2
Inner Shadow

Step 5

Add a Color Overlay with these settings:

  • Color: #2b2f59
Color Overlay

Step 6

Add an Outer Glow with these settings:

  • Blend Mode: Vivid Light
  • Opacity: 35%
  • Noise: 50%
  • Color: #dff1fd
  • Size: 0
Outer Glow

Step 7

Add a Drop Shadow with these settings:

  • Color: #1b1635
  • Opacity: 70%
  • Distance: 2
  • Size: 6
Drop Shadow

This will style the first layer of scales.

Styled Scales Layer 1

10. Style the Pattern copy Layer

Double-click the Pattern copy layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Size: 2
  • Uncheck the Use Global Light box
  • Angle: 22
  • Altitude: 64
  • Check the Anti-aliased box
  • Highlight Mode - Color: #c5dffc
Bevel and Emboss

Step 2

Add a Contour with these settings:

  • Contour: Gaussian
  • Check the Anti-aliased box
  • Range: 20%
Contour

This will add more shininess to the scales.

Styled Scales Layer 2

11. Style the Pattern copy 2 Layer

Double-click the Pattern copy 2 layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Size: 1
  • Uncheck the Use Global Light box
  • Angle: 90
  • Altitude: 30
  • Gloss Contour: Cove - Deep
  • Check the Anti-aliased box
Bevel and Emboss

Step 2

Add a Contour with these settings:

  • Contour: Sawtooth 1
  • Check the Anti-aliased box
Contour

This will add some more dimension to the scales.

Styled Scales Layer 3

12. Mask the Scales' Layers

Step 1

Group all the scale (Pattern) layers in a group and call it Pattern.

Group the Pattern Layers

Step 2

Command-click the text layer's thumbnail to create a selection.

Create a Text Selection

Step 3

Click the Add vector mask icon to get rid of the extra parts.

Mask the Pattern Group

13. Add the Smoke and the Top Texture

Step 1

Place the Smoke Texture image on top of all layers, resize it as you like, and then change its layer's Blend Mode to Lighten and its Opacity to 90%.

Add the Smoke Layer

Step 2

Go to Filter > Blur > Gaussian Blur, and set the Radius to 3.

Blur the Smoke

Step 3

Add a mask to the smoke texture's layer, make sure it is selected, and pick the Eraser Tool.

Set the Foreground Color to White, and choose a soft round brush tip to remove any unwanted parts.

You can play around with the brush Opacity value in the Options bar to get lighter effects.

Erase the Smoke

Step 4

Add a Gradient Map adjustment layer, clip it to the smoke texture's layer, and then check the Dither box and choose the gradient fill below.

Change the adjustment layer's Blend Mode to Color and its Opacity to 25%.

Gradient Map Adjustment Layer

Step 5

Finally, add the Orange City Sunset image on top of all layers, resize it as needed, and then change its layer's Blend Mode to Darken and its Opacity to 10%.

Add Top Texture Image

That will adjust the coloring a bit more, and finish off the effect.

Congratulations! You're Done

In this tutorial, we used a simple gradient fill and a couple of different textures to create the background for our text.

Then we created a couple of text layers and styled them to create the stroke and the main texture for the effect. After that, we added and styled some pattern layers to create the scales.

Finally, we added some smoke and a final texture to finish off the effect.

Please feel free to leave your comments, suggestions, and outcomes below.

Final Result

How to Create a Stationery Set for Xavier’s School for Gifted Youngsters

$
0
0
Final product image
What You'll Be Creating

Professor X doesn’t write his letters on just any old stationery. This tutorial will show you how to create a stationery set fit for the X-Men leader, and will teach you how to bring a modern flat design look to a letterhead and business card for Xavier’s School for Gifted Youngsters.

For this tutorial, which is suitable for beginners, you’ll need access to Adobe InDesign, Adobe Illustrator, and Adobe Photoshop. 

Looking for an easy-to-edit stationery set? Browse a huge range of on-trend print templates over on Envato Market.

Ready to get started? Great, let’s go!

1. Create the School’s Logo

The X-Men logo is iconic, but the ‘X’ sitting within a circular border has seen many reinterpretations in the comics and movies. Here, we’ll create a version of the logo that has a flat, on-trend look, with a bit of vintage-style texture that’s going to look great on printed stationery.

Step 1

Open up Adobe Illustrator.

The key feature of the iconic logo is that perfectly proportioned ‘X’ letter. A perfectly symmetrical ‘X’ is surprisingly hard to find; but I’ve tracked down a near-perfect option in the Intro typeface, which has a similar feel to graphic Futura-style typefaces.

Download and install Intro and return to your Illustrator document.

Take the Type Tool (T), create a new text frame and type in an uppercase ‘X’. Set the Font to Intro and the Font Color to Black.

intro font

With the text selected, go to Type > Create Outlines, to turn the X into an editable vector shape.

create outlines

Step 2

Take the Scissors Tool (C) and snip the ‘X’ shape at it’s two central points, on the left and right sides of the shape, to create two separate halves to the shape.

cut shape

Delete the lower half of the shape to leave just the top ‘v’ shape. 

deleted shape

Edit > Copy this remaining shape and Edit > Paste.

Control-Click (Mac) or Right-Click (Windows) > Transform > Reflect to flip the pasted ‘v’ shape to create an upside-down ‘v’ shape.

pasted shape

Position the pasted shape below the original, to create a full ‘X’ shape again. By doing this, you’ve ensured that the ‘X’ is perfectly symmetrical.

Select both parts of the ‘X’ shape and go to Object > Path > Join to combine the two sections together. 

paths joined
vector x

Step 3

Take the Ellipse Tool (L) and, holding Shift, drag onto another part of the artboard. Set the Fill Color to Black

circle

Position your ‘X’ shape over the top of the circle, making it completely central, and allowing the edges of the ‘X’ to just poke out past the edge of the circle, as shown below. Adjust the Fill Color of the ‘X’ to White.

shape and circle

Step 4

With both the circle and ‘X’ selected, go to Window > Pathfinder. From the Pathfinders selection of icons, choose Trim

pathfinder trim

Now you’ve cut out the ‘X’, leaving just the shape of the black below.

finished vector

This will be our base logo, which we can now add texture to using Photoshop...

Step 5

File > Save As your Illustrator document as an AI file and minimize Illustrator. Open up Adobe Photoshop and create a new document. File > Place your vector AI file onto the canvas.

To create a letterpress-style, textured version of the logo, we’ll need to bring in a texture image. Images of cracked charcoal or concrete will look great. Try this image of charcoal or this one of cracked concrete from Envato Market.

File > Place your chosen texture image onto a new layer in the Photoshop document.

With the texture layer selected, hit Command-Shift-U to Desaturate the layer of color.

Add a new Levels Adjustment layer (accessible from the bottom of the Layers panel), and play around with the position of the sliders. 

levels

Try and aim to increase the amounts of black and white, creating more harsh elements in the texture.

texture image

Step 6

Select the AI logo’s layer, and add a Layer Mask.

Then choose the texture layer and press Command-A on the keyboard to select everything on the layer, then hit Command-C to Copy

Turn off the visibility of the texture layer and then Alt-Click the Layer Mask’s thumbnail icon. You’re now able to edit the Layer Mask’s content. 

Hit Command-V to Paste the texture. 

layer mask

Come out of the Layer Mask by clicking anywhere else in Photoshop’s Layers panel.

Your logo will probably appear very pale, as all the black parts of the texture are being rendered opaque. You can invert the effect to make it darker.

pale texture

To do this, go to Window > Properties. From the Properties panel, and with the Layer Mask selected, click the Invert button at the bottom right of the panel.

properties invert
texture effect

Step 7

Just to make the effect a little darker, make a duplicate of the original logo layer by dragging it down onto the Create New Layer button at the bottom of the Layers panel.

create new layer

First go to File > Save As and save the file as a Photoshop (psd) file. 

Then go to File > Save As again, and choose Photoshop EPS from the Format options. Make sure the image is saved with a transparent background. Set the file name to‘Final Logo_Texture.eps’.

Step 8

Return to your Illustrator logo file, and select the original vector version of the logo. Copy and Paste into a new Illustrator document. 

Add a new CMYK swatch to the Swatches panel (Window > Swatches), with the values C=17 M=100 Y=96 K=7.

Adjust the Fill Color of the logo from Black to your new Red swatch.

vector in red

Save the document as a new AI file, with ‘Red’ somewhere in the file name.

Step 9

Open up your Explorer (Windows) or Finder (Mac) window and navigate to your saved Photoshop (psd) file which you saved in Step 7, above.

Copy and create a duplicate of the file in the same folder. Rename the file with ‘Red’ in the file name.

Open the new psd file in Photoshop.

Right-Click (Windows) or Control-Click (Mac) on each copy of the AI logo file in the Layers panel, and choose Replace Contents. Select the red AI logo file and replace. 

finished red logo

File > Save As the textured image as a Photoshop EPS file, with a transparent background, naming the file‘Final Logo_Texture_Red.eps’.

2. Set Up the Letterhead Template

Step 1

For now, leave Photoshop and Illustrator. Open up Adobe InDesign.

Go to File > New > Document. 

Set the Intent to Print and the Number of Pages to 6. Deselect Facing Pages.

Choose Letter from the Page Size drop-down menu (which is equivalent to 215.9 mm by 279.4 mm). Set the Margins to 13 mm on all sides, and add a Bleed of 3 mm on all edges of the page.

new document window

Click OK to create the new document.

new document

Step 2

Expand the Layers panel (Window > Layers) and double-click on the default Layer 1 name. Rename it Paper Texture.

Then click on the Create New Layer button at the bottom of the panel. Rename the new layer Paper Background.

Create a further two new layers, named Watermark and, at the top of the pile, Content.

content layer

Lock all layers except the bottom layer, Paper Texture.

paper texture layer

3. Design the Letterhead

Step 1

Download a paper texture image, like this one from Envato Market. I chose to lighten up the image a little in Photoshop first to make it appear a little less grey, but this is completely optional.

In your InDesign document, and remaining on Page 1, take the Rectangle Frame Tool (F) and drag onto the page to create a frame that extends across the whole page, up to the edges of the bleed.

Go to File > Place and choose the paper texture image. Click on the Fill Frame Proportionally button on the top Controls panel to fill the frame with the image.

paper texture

Step 2

Return to the Layers panel and lock the Paper Texture layer. Unlock the next layer up, Paper Background.

paper background layer

Expand the Swatches panel (Window > Color > Swatches) and click on the panel’s New Swatch button. Double-click on the new swatch to open the Swatch Options window.

Name the swatch Cream and set the Type to Process and Mode to CMYK. Move the sliders to C=4 M=5 Y=6 K=0. Click OK.

cream swatch

Step 3

Take the Rectangle Tool (M) and drag onto the page to create a shape the same size as the rectangle sitting on the layer below.

Set the Fill Color to Cream.

cream rectangle

Then go to Object > Effects > Transparency and set the Mode to Multiply. Reduce the Opacity to 95%, to bring through the texture of the paper image below.

multiply
paper texture brought through

Step 4

Lock the Paper Background layer and unlock the Watermark layer.

Take the Rectangle Frame Tool (F) and drag onto the page to create a large square frame. Go to File > Place and choose the ‘Final Logo_Texture.eps’ file, which is the black version of the textured logo. Position the image nicely in the frame.

placed logo in black

With the frame selected, go to Object > Effects > Transparency and set the Mode to Multiply. Reduce the Opacity to 3% to create a watermark effect.

multiply
finished watermark

Step 5

Return to the Layers panel and lock the Watermark layer and unlock the top layer, Content.

content layer

Create a new CMYK Process swatch from the Swatches panel, call it Red and set the values to C=17 M=10 Y=96 K=7. Click OK.

red swatch

Take the Rectangle Tool (M) and drag onto the bottom of the page to create a long rectangle that extends across the length of the page, up to the bleed, and down to the bottom bleed, as shown below. Set the Fill Color to Red.

red rectangle

Step 6

Zoom into the top of Page 1 and then take the Rectangle Frame Tool (F). Create a small square frame centrally at the top of the page, close to the top margin. 

File > Place your ‘Final Logo_Texture_Red.eps’ file. 

logo in red

Move over onto the pasteboard next to the page and take the Type Tool (T). Drag onto the page to create a text frame. Type in ‘Xavier’s School for Gifted Youngsters’. 

Place your cursor at the beginning of the sentence and set the Font to Futura Std, Light, Size 9 pt. From the Glyphs panel (Window > Type & Tables > Glyphs), insert a bullet glyph.

futura std

Highlight the remaining text and set the Font to BankGothic, Bold, Size 11.5 pt. 

Highlight all the text and set the Color to Red and the text to Align Center.

bank gothic

Step 7

Move back over to the page, and to the red logo at the top.

Take the Ellipse Tool (L) and, holding Shift, drag to create a circle 35.4 mm in diameter. Position centrally over the top of the red logo.

circle

Then remove any Stroke or Fill Color from the circle by choosing [None] from the Swatches panel.

Head back to your text frame (created in Step 6, above), and highlight and Edit > Copy the text.

Select the Type on a Path Tool (Shift-T) and click onto the circle around the logo to transform it into a type path. Edit > Paste the text onto the path. Rotate the frame until the bullet point is at the bottom center of the circle.

type on a path

Step 8

Move down to the bottom of the page, and use the Type Tool (T) to create a few text frames over the top of the red rectangle. 

Here you can type in the address for Xavier’s School—1407 Graymalkin Lane, Salem Center, Westchester County, New York—placing each line of the address in a new text frame.

Set the text in Bank Gothic Bold, 8 pt, and add bullets set in Futura Std between each section of text. 

typography

Create a new CMYK swatch, C=16 M=11 Y=14 K=20, and name it Grey. Set the text and bullets in Grey.

grey swatch

Your letterhead is complete—fantastic work! 

finished letterhead

Why not use Page 2 of your InDesign document to create a duplicate of the letterhead artwork (unlock all layers before copying and Edit > Paste in Place). Invert the colors, using Red for the Paper Background color, and changing the top logo to the black version.

reversed color

Awesome work. Now you can read on to find out how to create a matching business card...

4. Create a Matching Business Card

Step 1

Remaining in your InDesign document, move down to Page 3. 

Take the Page Tool (Shift-P) and click onto Page 3 to select it. From the top Controls panel, adjust the Page Size to US Business Card (88.9 mm Width, 50.8 mm Height).

us business card size

Hop back up to Page 1 of your document, lock all layers except the Paper Texture and Paper Background layers, and then Edit > Copy all content sitting on these layers.

Move back down to Page 3 and Edit > Paste. Resize the rectangles to fit the business card dimensions.

pasted texture

Adjust the Fill Color of the Paper Background rectangle to Red, and make sure the transparency settings are set to Multiply, 95%.

transparency

Step 2

File > Place the ‘Final Logo_Texture.eps’ file in a frame made by the Rectangle Frame Tool (F) on the center of the page.

logo

Step 3

Move down to Page 4 of your InDesign document and use the Page Tool (Shift-P) to again resize the page to US Business Card size.

page tool

Copy the Paper Texture and Paper Background content from Page 3 and Edit > Paste in Place onto Page 4.

Adjust the Fill Color of the top rectangle to Cream.

cream swatch

Step 4

Add text to the business card using the Type Tool (T) to create a series of text frames down the left side of the card.

Put the name (‘Prof. Charles Xavier’) at the top, in [Black], occupation and school name (‘Principal’; ‘Xavier’s School for Gifted Youngsters’) next, in Red, and finally place the address (‘1407 Graymalkin Lane, Salem Center, Westchester County, New York’) at the bottom, in Grey.

Set all text in Bank Gothic Bold.

bank gothic bold

Step 5

Save your InDesign document, minimise it, and return to Adobe Illustrator. Create a new document.

Use the Arc Tool to create a gently curved diagonal line going from top-left to bottom-right.

arc tool

Copy and Paste the line twice to create three Wolverine-style ‘claws’. 

pasted lines

From the Brush Definition menu on the top Controls panel, open the Brush Libraries menu and choose Artistic > Artistic_ChalkCharcoalPencil. 

With the lines selected adjust the Brush Definition to Charcoal Smooth, and set the Stroke Weight to 4 pt.

Select all three lines and Edit > Copy.

brush definition

Step 6

Return to your InDesign document, and to Page 4 and Edit > Paste.

Resize the claws graphic, position on the right side of the page, and set the color to Red.

pasted graphic
finished reverse

Step 7

Great work—your X-Men business card is finished, and it’s looking fabulous!

You can use Page 5 and 6 of your document to create an inverted version of the card, duplicating the artwork from Pages 3 and 4, and then reversing the colors.

red card front
red card reverse

5. Export Your Stationery for Printing

Your stationery artwork is finished. You’re now ready to export it, ready for professional printing.

Step 1

Go to File > Export and choose Adobe PDF (Print) from the Format drop-down menu. Name the PDF‘Letterhead Artwork’ and click Save.

In the window that opens, choose Press Quality from the Adobe PDF Preset menu. Set the Page Range to 1-2, just so the letterhead artwork is exported this time.

press quality

From the Marks and Bleeds options, check All Printer’s Marks and Use Document Bleed Settings.

marks and bleeds

Click Export.

Step 2

To export the business card artwork, repeat the process above, but this time adjust file name to‘Business Card Artwork’ and change the Page Range to 3-6. 

pdf finished

Conclusion

We know that Professor X is going to love using his brand new stationery set—great work! 

In this tutorial we’ve covered a broad range of techniques and skills that you can apply to other print design projects. You now know how to:

  • Create vectorised logos in Illustrator and add modern texture to them in Photoshop
  • Prepare an InDesign template for a letterhead
  • Create a watermarked letterhead design complete with papery textures, colors, logo and typography
  • Resize an InDesign document ready for a business card design
  • Design a modern, simple business card complete with stylish typography and cool vector graphics 

Want to discover even more cool stationery sets? Browse the huge selection of stylish print design templates over on Envato Market.

final product
Viewing all 8958 articles
Browse latest View live