In this tutorial, you’ll learn how to create a surrealistic illustration using fine liners, marker, an economic all in one printer, Illustrator and Photoshop.

I’m going to explain how to draw the figures that we need even without having great drawing skills. Then vectorize the drawings in Illustrator where we do the most part of positioning and coloring the illustration. After we’ll import into Photoshop to apply a texture, some filters, india ink splashes and some tonal adjustments. This is a great way to create illustrations with a hand-drawn feel!

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS4
• Program: Photoshop CS4
• Difficulty: Intermediate to Advanced
• Estimated Completion Time: 6 hours

Resources

In order to create this illustration you’ll need some photos from Stock Exchange. I would like to thank all the photographers for the images they created: Bird, Tree, Desert tree, Sunflower and Skull.

Then you need some brushes, a marker, some pigment liners pens, china ink and an economic all in one printer.

Step 1

First of all prepare all the things you need to draw and keep them handy.

Step 2

Let’s prepare all the images needed to create a library of hand-drawn useful vectors for the illustration. Let’s begin with the skull image, your aim is to boost up the contrast while preserving details. Open it in Photoshop, and go to Image > Adjustment > Black and White.

From the Preset menu choose High Contrast Blue Filter. Now open the Level menu (Command + L), and drag the input levels arrows toward the center to boost up the contrast, like in the image below.

Step 3

Then you have to repeat the previous step for all the images. Open up the spring robin image and use the Crop Tool (C) to delete the unwanted portion of the image for the printout version (there is no need to waste ink and color printing the entire images). This time the Green Filter will do the job, apply Image > Adjustments > Black and White, then from Preset menu choose Green Filter.

Step 4

Open the desert tree image and after Crop (C) it like in the previous step, use the maximum white Preset this time from Image > Adjustments > Black and White.

Step 5

Repeat the previous operation for the sunflower image, this time the yellow preset with a little tweak does the job. See the image below for the values. Once finished save all those edited images into a folder.

Step 6

Print each image on a single A4 sheet of paper in black and white. The printout should be as big as possible. Take each printout and put a sheet of tracing paper on the top with some tape or some glue-stick for paper. Now, grab your pens and marker and let’s begin to draw.

Step 7

While drawing, use the print as a guide, try to see the image divided into shadows, lights and midtones. With the black marker trace the thicker lines and create some solid black areas where needed, try to choose where those solid black areas should be and draw them. For the shadows create thick to thin parallel lines until the lighter point.

Experiment, using various pens and your style of linework and don’t be limited by the printout below your tracing paper, just draw freely! You should have something like this, but feel free to experiment.

Step 8

Continue with this method until you have traced all the printout. Keep experimenting using different combination of pens, markers and felt pens to give personality to your drawings. Try to varying angles within your lines and create irregular stroke but don’t over do with black areas. There should be a balance between lights and shadows. Your final drawings should be something like this.

Step 9

You notice that in the previous picture there are two images that don’t have a photo reference, the heart on the left, and the other flower in the center. This is because I drew them tracing on two of my old sketches. If you want, you can try to produce your own sketches and than use the same technique of the previous steps for inking your drawings, or use those provided in the tutorial files.

Step 10

The next task is to take each sheet of tracing paper drawn and scan them into Photoshop at a resolution of 600 dpi or 300 dpi at least, in grayscale mode.

In order to do this go to File > Import > your printer model Twain… once finished you use Levels to brighten up the whites and darken the blacks. Go to Image > Adjustments > Levels and bring the arrows toward the center. Your aim is to enhance your blacks and whites and remove any gray smudges.

Notice how the images below are only in black and white, without grays. Do it for all the images except for the big tree one, and save them in TIFF format.

Step 11

Now you need to create the tree, so open the big tree image in Photoshop. You need only about half of the tree. Use a guide to help you, and place it in the image as shown.

Duplicate or unlock the background. Use the Rectangular Marque Tool (M) to make a rectangular selection on the guide, then hit Command + J to duplicate the selection into a new layer.

Duplicate this layer too, then use Command + T and go to Edit > Transform > Flip Horizontal to flip the last layer and drag it from the left to the right with the Selection Tool (V) until you recreate a new entire tree.

Step 12

With a selection exclude the unwanted part of the image, such as soil and trees in the background. Don’t worry about the sky for the moment. Use the tool you feel most comfortable with, I used the Pen Tool (P) for example.

Once finished click on the Add Vector Mask button at the bottom of the layer Palette to generate a mask from the selection. Target the mask thumbnail, and with a small brush adjust the tree. If you need, switch between black and white for hiding and revealing part of the image within the mask. Don’t be too precise for the lower part because it will be hidden later.

Step 13

Your next aim is to remove midtones from the image, without losing too many details. Create two adjustment layers, respectively, Black and White then Levels and insert the values reported in the image below.

Once finished, flatten the image via Layer > Flatten Image and save as “tree.tiff.” Put it in the same folder as the other finished images. Your result should be similar to mine.

Step 14

Now we’ll work for a while with Illustrator, vectorizing one by one the drawings we’ve created. So let’s open Illustrator, create a new document and place an image in, for example the skull one. Go to File > Place and navigate to the folder where you saved your “skull.tiff.”

After the image appears, make sure it’s selected, and go to Object > Live Trace > Tracing Option and here choose Detailed Illustration from the Preset menu. Leave the default option and click Trace. If the result is a little too dark, set the Threshold to 138. Once finished go to Object > Expand in order to end this phase. Name this layer “lineswork.” Now you have your lines, but you could also have the fill. Let’s create it!.

Step 15

In order to easily create a base fill color, it is important not to have gaps in the outline area but it is solid black. In order to get it, hit Command + A to select all the “lineswork,” then create another layer below called fill. target this layer and hit Command + F to paste in the same position.

Now target the little circle in the fill layer just created, and with the selection active apply to Object > Compound Path> Release. In the Pathfinder Palette, Click on Unite. Now you have a solid shape area below your lines, change the color to a light gray to see it under your lines.

Step 16

Repeat the action performed for Step 15 for all the images until you reach a vector version of all the drawings, vectorize the big tree done in Step 13 too, and save all of them as EPS or AI files and put all the stuff in a folder called “vector” for example. For convenience you can enter all the drawings in a single file.

Step 17

Create a new file in Illustrator, I personally created a vertical A2, because I ‘m going to print a big canvas, but feel free to choose your own dimensions. Import the big tree vector file, and place it in the center of the document.

Now change the colors to a bright yellow for the “fill” area, and a purple for the “line” area (feel free to use your own colors). Then, with the selection still active on both the fills and the lines, change their shape to match approximately the one shown below.

Step 18

Then, begin to create the branches, since this design is a false symmetry, it is important that the elements that compose it, appear symmetrical at first sight. Indeed there is a way to get a similar effect, that is to compose only half the image and flip it horizontally, but the result is much less spontaneous, (you’ll never find a symmetric tree in nature).

So import the “desert tree” vector into another layer above (remember for each drawing to group the fill and lines). Place it on the left, change its color, than duplicate ti by hitting Command + C followed by Command + F to paste in front. Select the copied version and go to Object > Transform > Reflect, then in the pop-up choose Vertical > 90 Degrees. Repeat this step four times until your tree is similar to the mine below.

Step 19

The next step is to add the four skulls, like before. Import the skull vector drawing, use the same purple for the fills and a light yellow for the lines, then repeat the actions performed on step 18 to scale and place the four objects properly.

Notice that this is one of the focus points of the entire image. To scale easily use the Scale Tool (S) on one of the skulls, adjust it to the desired size, duplicate until you have four skulls like below.

Step 20

Import the vector bird too, duplicate it and place it in separate layers, immediately below the branches created in Step 18, refer to the image below for positioning. Now create another series of branches placing them in a layer at the base of your stack in the layer palette. Reflect and place them as you have already done in Step 18.

Continue Learning…

We’ve assembled an army of overly-mechanized killer machines, truly nightmarish weaponized bots, ready to lay siege to the nearest city and take over the world as we know it, as a full-on, frontal vector assault! Take a look through this collection of killer machines and grab some inspiration. Infuse your next vector, robot illustration with overpowering, reckless abandon!

Continue Learning…

The first time I tried a Wacom tablet is only comparable with the day I discovered Photoshop, bought my first laptop, tested an Apple computer or I met my girlfriend for the first time – geek joke, honey. But, why are Wacom tablets so special? In this post we’ll review the advantages of these tablets.

Choosing the Correct Tablet

1. In my opinion, it must be a Wacom tablet.
2. The most relevant technical specification is pressure sensitivity. The more, the better.
3. Smaller tablets are better, cheaper, easier to fit into your desktop, and they work just like the bigger ones. I would only choose the big model if you’re going to use it for CAD.
4. Think about the use you’ll give to your tablet. If you want if for painting, coloring and photo manipulation, it will be 100% useful. For drawing, only Cintiq models are really good, and for designing, you need no more than a mouse.
5. There are second hand markets or brand new old models. They are really worth checking.

Amateur Tablets (80-200USD)

If you’re not a professional designer or illustrator, but you’d like to go deeper into design without investing much money, the perfect choice is the Bamboo, available in 3 sizes with the same technical settings.

Professional Tablets (200-800USD)

If you’re a professional or want to be one, you have a tight budget but you want good quality, then I would go for Intuos models. Intuos 4 has 2048 pressure levels, and even Intuos 2 and 3 with 1024 pressure levels are perfect and easy to find on Ebay, brand new or second hand.

Tablets for Rockstar Designers (1000-2000USD)

If you’re already a set up professional and you want to increase your productivity, then you need the crown jewel, the Cintiq series. These are not tablets, but rather pressure sensitive monitors. You can draw directly on the screen.

My Experience

My first pen tablet was an Intuos 2 I bought 6 years ago, when I still was a Psychology student and I was starting to color in Photoshop. I had some doubt about purchasing it because I didn’t have any resources, but my girlfriend convinced me to buy it on a whim, without knowing that she was driving me to take the first step to professionalism. Its design was terrible, it looked like a cardboard box with a very cheap pen, but it worked really well. Even after 6 years of use it still works perfectly, just like the first day.

With my tablet I increased my productivity, and as a result, my quality. What used to take me endless sessions of work in the past, now I could do it in a few hours.

I bought my second tablet about 3 years ago. It was an Intuos 3. The main difference was the incorporation of the Express Keys, and I’ve never considered them useful enough to replace the keyboard. To be honest, I bought it because these tablets were really beautiful, specially if we compare them with previous versions, although functionality was still the same.

My last acquisition is a precious Wacom Cintiq 21UX. From the moment I bought it, I forgot about pencil and papers and now I make my sketches directly in Photoshop. I must say that I haven’t noticed a meaningful advance in coloring, but it’s much better when it comes to drawing, an unresolved matter for tablets.

Now, I use my Intuos 3 only when I travel, and I find it very difficult. Moral: Don’t try the Cintiq if you can’t afford it.

In the video below, you can watch my Cintiq at work.

Here is another example of me coloring with a tablet.

And here you can compare Cintiq and Intuos series, the task is drawing lines at once while joining the points:

My next acquisition will be an Intuos 4 A6. We’ll see if those extra pressure levels really make a difference.

Reasons To Choose a Wacom Tablet

1. No Batteries

Wacoms uses an electromagnetic resonance technology, no batteries are needed. Plus, there’s a notable saving in maintenance, and we can avoid many issues since the pen is lighter and more comfortable to use. No wires, of course.

2. Best Value for Money

There are cheaper options, but not better. If we compare the technical specifications, we’ll find that, at the same price, Wacom models offer similar or better performance. If you have a look to any comparison of pen tablets, you’ll always find Wacom in the first position.

3. Support

Wacom has a forum where the company employees or any other user will answer to your questions. Plus, their web is translated up to 15 languages, and there you can download drivers for any of their products.

4. Variety

Wacom offers a wide range of products at very affordable prices, from the Bamboo, which starts at less than 100USD, to the Cintiq series, that reach 2000USD in some high-end models (IVA not included).

5.- Acknowledgement

Wacom has been a regular winner in the Red Dot Awards for many years. The Red Dot Awards are similar to the "Oscars," only for industrial design.

Continue Learning…

Long hair, shot hair, crazy-wild hair, rockin’ sideburns, funky mustaches, and long beards, we’ve got a full-spectrum of vector hair that is sure to inspire in this collection.

Hair can be a challenging subject. Take a look at how numerous artists depict hair as realistic, stylized, to set the composition, to add pesonality to their characters, and more. If you’re looking to create stylized vector hair for your next illustration, then this is a must view roundup. Time for some hairy vector inspiration!

Continue Learning…

In this tutorial, we will learn how to manipulate a simple photo into a flooding torrent of a scene. We’ll use some relatively simple techniques to give this image a semi-realistic, stylized feel. Let’s get started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Step 1

With the main image opened, use the Clone Stamp tool to remove any unwanted entities, like the elderly couple walking. Try and clone areas around the couple so it doesn’t look odd and mix your usage of soft, and heavy round brushes to define those edges.

Step 2

Next you will want to cut around the edges of the roof tops so we can add in our stormy sky. Use the Polygon Lasso Tool for this. Don’t worry about accuracy, as we’ll be blending everything later, just make sure that the sky is cut out. Once selected, unlock the “background.” Now double-click the layer, then rename it to “backdrop” and hit Enter. Delete the sky.

Step 3

Open the Stormy Sky image and place it underneath your “backdrop” layer. Then press Command + T to Free Transform), hold Command while you drag the bottom corners inwards to add some perspective to the sky, don’t forget to resize if necessary. Apply the transformation when you are happy.

Step 4

It doesn’t look very nice does it? That’s because we’re not done yet. Open and place the wave image in the center of the image. Now use the eraser, and a soft brush on it. Get in close and erase the bits you don’t want. Don’t worry if your messy, as the tidying comes later.

Then go to Image > Adjustments > Brightness/Contrast and use the settings shown below.

Then go to Image > Adjustments > Hue/Saturation and use these settings.

Rename the layer to “Wave,” and your image should now look like the one shown below.

Now comes the complicated bit. What you’ll need to do is add all the water files to you’re image and one by one, free transform them to flow with the perspective of the water then erase the hard edges.

You might also need to duplicate some files in order to fill up areas. Always remember to play about with the textures using the distortion method in free transform and a soft eraser. The more you do, the better it will look. You can see the phases of building up the flooding water in this image.

Step 6

Now we have our water sorted, merge all the “water” layers into one single layer and go to Image > Adjustments > Color Balance and use the following settings.

Your water should now be nice and blue and match the “wave” layer from earlier. Now merge the “wave” layer with the “water” one.

Step 7

Remember the tidy up I mentioned a while back? Well its time now. Turn off the “water” layer so you are left with just the backdrop and the sky.

With the Burn Tool selected at highlights and at 50% exposure, and a soft brush set, start burning the rooftops and the sky around the rooftops so they appear darker.

Open the derelict1 image and place it at the right side of the street in the distance. Use a soft eraser to remove those sharp edges. Merge it with the “backdrop” layer.

Step 8

Let’s tidy up some more. Turn on the “water” layer sand and start tidying around the edges using a soft eraser. Then select the Smudge Tool and a 20px charcoal brush using the settings below.

Start smudging the edges of the “water” layer creating very small splashes and more defined edges to realistically create the effect of water hitting a surface. This might require patience and a steady hand, but time will pay off. It might also be wise to duplicate the layer before smudging as you don’t want to use all your undo’s.

Step 9

Next, select the backdrop layer and go to Image > Adjustments > Color Balance and use these settings.

And your piece should now be coming together. Its still a little off, but there is a lot more to do, so lets move on!

Step 10

Time for the splashes. Now this is the hardest step of the tutorial, and requires a lot of patience, but persevere and you will find that patience is in fact a virtue (I know, silly right?).

Open up the splash1 and splash2 images and carefully cut out the splashes themselves one by one. Place them onto the canvas. Now use the Warp Transformation (Edit > Transform > Warp) to get the arches you need to create effective splashes, and erase any unwanted areas.

You’ll need to do this for the two cars and for where the water hits the wall down the buildings of the street.

You might also benefit from smudging the edges of the splashes to give them more movement, as well as adding some white brushing to a new layer and smudging it. Now merge all your “splash” layers.

Step 11

Getting there right? Now you need to do some tweaking to the colors of the image. This can mean anything from water, to the sky or the buildings. In my example, I think the water is a little too blue, so I’m going to desaturate it a little.

Basically use this step for any odd bits and bobs to tweak your image to make it look more streamlined. Be creative, and more importantly, make it look tidy. I lowered the saturation of the water a little, and added some red to the buildings.

Step 12

Now we’ll work on the fog. Its sounds daunting but its actually fairly simple to do. Select a blue color from your water using the Eyedropper Tool. Now select the Gradient Tool and use the following settings.

You will need to create a new layer underneath you’re “water” layer and create the gradient so it blocks out any backdrop behind the water.

Duplicate the layer (Command + J) and place it on top of your water layer, at about 30% opacity. Set this layer to Multiply.

Step 13

This next step is to add rain. There are lots of tutorials on the web that show how to create rain. Here is one that goes into great detail, which you could check out. We’ll keep it relatively simple in this tutorial though. First, create a new layer and fill it with black. Go to Filter > Noise > Add Noise and use these settings.

Then Filter > Blur > Motion Blur> and use these settings.

Then Image > Adjustments > Levels and use the following settings.

Set the Layer to Screen and use a soft eraser to erase the bottom and top of the Layer, then go to Edit > Transform > Free Transform the “rain” Layer so it covers the whole screen.

Step 14

It looks a little bit empty in the middle of the water doesn’t it?

Open up the car image and place it somewhere in the distance, underneath the “fog” layer. Resize the images and erase the edges carefully and use the splash1 image to give some life to the car.

Step 15

Now is the fun part. You’ll need to create a few gradient maps first. Click the Adjustment layer button located at the bottom of your layers window and select the Gradient Map option. Then Click the little arrow in the top-right of the box and select Pastels as shown.

Use the following settings. Finally, set the layer to Multiply at 100%.