Posts Tagged ‘Vector’
Create an Illustration of a Pearl-Filled Clam on an Ocean Bed
|
Plunge with me on a vector ocean dive. In this tutorial, we’ll create a shell with pearls in a unique ocean scene. We’ll be using various effects, such as: mesh, blend, warp, clipping mask, opacity mask, depth of sharpness, editing of swatches, and pathfinder box. Have fun diving in and then surfacing!
Final Image PreviewBelow 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
 Step 1Let’s start with the pearl creation. Open up a new document and select the Ellipse Tool (L), then use it to create an ellipse. Set the fill color to C=2, M=7, Y=24, and K=0, without a stroke.  Step 2Select the ellipse you made and take Mesh Tool from the panel of tools. Put in the ellipse and center the first point.  Step 3Now we deform a mesh line by using the Direct Selection Tool (A).  Step 4Add mesh lines using the Mesh Tool (U).  Step 5Let’s start to paint the pearl. Select points by using the Direct Selection Tool (A) and change the colors. Feel free to get creative and experiment here. Rename the layer to “pearles1.”  Step 6Now we will create the shell. We’ll begin with the creation of the structure of our shell. We’ll use 9 colors. I used the CMYK color mode.  Step 7Over the “pearles1″ layer create a “shell” layer. Select the Rectangle Tool (M), then use it to create rectangles, and fill them with sample shell colors. Experiment here. Note: Rectangles should not be crossed.  Step 8Now we group all rectangles. Create above one rectangle of the same size as the group. Now align a rectangle horizontal and vertical by using the Align box. We then fill the rectangle with a linear gradient.  Step 9Select the rectangle you made and change the Blending mode to Darken and Opacity to 50% in the Transparency palette.  Step 10Select and group all the rectangles and go to Object > Transform > Move… Position it 12 px (width of group of rectangles) Horizontal and press Copy. Now press Ctrl + D forty times.  Step 11Select all the textures and apply Divide from the Pathfinder palette. Ungroup all textures. Now displace the horizontal segments of a texture by using the Selection Tool (V).  Step 12Select and group all textures. Duplicate and place a texture to the side. It is useful to us for working with the bottom part of the shell. Step 13Select a texture and go to Object > Envelope Distort > Make with Warp… Apply the settings you see below. Select this object and go to Object > Expand.  Step 14Select the object you made and go to Object > Envelope Distort > Make with Warp… Apply the settings you see below. Select this object and go to Object > Expand.  Step 15Select the object and go to Effect > Distort and Transform > ZigZag… Apply the settings you see below. Select this object and go to Object > Expand.  Step 16Select the Pen Tool (P), then use it to create a shell shape. Now reduce to the size of a texture height.  Step 17We duplicate a shell and click on Toggle Visibility in the Layers box. It is useful to us for work in following steps. Step 18Now select the form and texture of the shell, then make a Clipping Mask.  Step 19Now we will add shade to the shell. Select the duplicate shape of the shell (see Step 17) and fill it with a radial gradient, and make the layer visible. Change the Blending mode to Multiply at 47% Opacity in the Transparency palette.  Step 20Rotate the top part of the shell. Under the layer “pearles1,” create an “Internal shell” layer. Select the Ellipse Tool (L), then use it to create an ellipse. Select the Pen Tool (P), then use it to create the bottom part of the shell as shown.  Step 21Duplicate an ellipse and select the bottom part of the shell. Now use this ellipse and apply Subtract From Shape Area in the Pathfinder palette, then press Expand.  Step 22Take the texture, which was duplicated in a Step 12, and reduce its height.  Step 23Select the texture you made and go to Object > Envelope Distort > Make with Warp… Apply the settings you see below. Select this object and go to Object > Expand.  Step 24Rotate and place a texture under the bottom part of the shell.  Step 25Repeat Step 18 to make the bottom part of a shell. Select the texture and go to Trim by using a Pathfinder palette or make a clipping mask.  Step 26Now create the shadows on the bottom part of a shell. Repeat Step 19 for this.  Step 27Now we’ll work on the internal part of the shell. Select the ellipse and add anchor points by using the Pen Tool (P). Then deform the shape a bit.  Step 28Now create a new shape by using the Pen Tool (P).  Step 29Fill the bottom shape with a linear gradient.  Step 30We the top shape with a linear gradient.  Step 31Now create a new shape by using the Pen Tool (P) and fill the shape with a linear gradient.  Step 32Select both the top shapes and apply a Blend (Object > Blend > Make). Apply the settings you see below.  Step 33Let’s create a pearl necklace. Go to the “pearles1″ layer. Select the pearl we created earlier, duplicate it and move it by using the Direct Selection Tool, while holding Alt.  Step 34Add some more threads.  Step 35Go to the “shell” layer. We create a shade from the top part of a shell. Go to Effect > Stylize > Drop Shadow… Apply the settings you see below.
|
20 Tutorials to Help Master Illustrator’s Gradient Mesh
|
The gradient mesh is one of the most powerful tools in your Illustrator toolbox, but it’s also one of the trickiest to get the hang of. This year I’m determined to master this amazing tool, so I’ve searched the web far and wide to pull together the best free training materials. This collection of tutorials covers everything from basic gradient mesh tool to some full on photorealistic vector designs. If, like me you have a mission to get to grips with gradient mesh, look no further than this collection of resources.
Gradient mesh capabilitiesYou only have to glance at amazing artwork such as this motorcycle rendering by Yukio Miyamoto to realise how powerful the gradient mesh tool can be. It allows the most minute control over colour gradients, enabling you to recreate highlights and shadows that help produce photorealistic images.
I like to think of the gradient mesh like the great Nunchaku, it’s a weapon of awesome capabilities that when used to its full potential by masters like Bruce Lee or Michelangelo the turtle looks insanely awesome. However it takes years of practice to become a true ninja. The same goes with the gradient mesh, when in the hands of a veteran, it can be used to create some unbelieveable photorealistic artwork, but it takes time, dedication and mental power to become a true master. Wrap a scarf around your head Karate Kid style and let’s get down to some serious training with these tutorials! Gradient mesh tutorialsTips for Working with the Gradient Mesh Tool In Illustrator
How to Make a Vector Military Cap Icon
Illustrator Tutorial: Gradient Mesh Flower
Create a Yummy Ice Cream Icon with Mesh Objects and Blends
Create realistic illustrations using Illustrator’s Gradient Mesh
Vectors Imitate Life with Gradient Mesh
Gradient Mesh Tutorial
Illustrate a Pair of Sweet Gradient Mesh Cherries
Gradient Mesh Bell Pepper Tutorial
Master the gradient mesh tool
Make a Shiny Gum Ball Machine with Mesh Gradients
Gradient Mesh Editing Tutorial
How to Create an Energy Saving Bulb in Illustrator
Mastering Mesh
Make an Aurora Borealis Design in Illustrator
Illustrator Tutorial: Realistic Curtain
Video TutorialsSometimes it’s handy to get that extra level of help from a video screencast. These tutorials help you understand the actual workflow and see the techniques in action. |
Three Ways to Create Celtic Knots in Illustrator
|
In this tutorial, we’ll explain how to create magical Celtic knots. Ornaments accompanied Celts in life and in death. Ornaments decorated clothes, books, furniture, ware, weapons, and gravestones. I’ll show you three ways to create Celtic knots in vector – from simple to the difficult. The last techniques allows one to create knots of any complexity. Intrigued? Read more!
Final Image PreviewBelow are the Celtic knots we will be working towards in this tutorial. 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
 Step 1Let’s open a new document in Illustrator (File > New) and enter the size 600 px by 600 px (but you can choose any size you want). I used the CMYK color mode to use it for printing. Now select the Rounded Rectangle Tool, and create a rounded rectangle without fill, and with a black stroke. The radius can be changed by pressing the arrows up or down button, while keeping the left button of the mouse held down.  Step 2Open the Appearance and Stroke palettes and create multiple strokes as shown.  Step 3Select a Rounded Rectangle and go to Object > Transform > Rotate, then enter the angle 90 and press the Copy button.  Step 4Select both rounded rectangles and apply Object > Expand Appearance, and then Object > Expand.  Step 5Select the Live Paint Bucket (K), then fill a few areas with white as shown below  Step 6Change the fill to black and fill in areas as shown.  To convert the Live Paint group into individual paths press Expand on the top tool panel. Now group (Command + G) all the objects. Step 7Select the Ellipse Tool and create an ellipse without a fill and a black stroke. Align them along the vertical and horizontal as shown.  Step 8Select the ellipse and create multiple strokes (see Step 2).  Step 9Select the ellipses, go to Object > Expand Appearance, Object > Expand. Select all objects and apply a Live Paint Bucket (K) (see steps 5 and 6).  Step 10Select the Live Paint Bucket (K), set the fill to black and fill in areas as shown below.  I congratulate you! The first simple ornament is ready!  Step 11The second way. Now we start weaving the ornament from three simple elements. For convenience of work go to View > Show Grid. Create the first element. Select the Rounded Rectangle Tool and create a rounded rectangle without fill and a black stroke.  Step 12Select a path and add two points as shown. Select the Scissors Tool (C), cut the left and right new anchor points and delete the right bottom part of the path.   Step 13Create multiple strokes. |
Creating Imaginative Typography with Adobe Illustrator – Vector Plus Tutorial
|
We have another great Vector Plus tutorial available exclusively for Plus members today. If you want to learn how to create retro typographic illustrations, then we have an awesome tutorial for you. This one will teach you to control color and add subtle effects, after tracing your custom lettering sketches.
This Tutorial is Filled with Creative TechniquesIllustrative typography has become an increasingly popular direction for creating dynamic and personal designs, using words and letterforms instead of more common pictorial elements. Over the past 18 months, I have explored this approach in my own work, often using popular quotes as a starting point for the design. The letterforms, shapes, patterns and choice of colors have developed over this time to reflect my own style, but this tutorial can be used with a variety of hand-drawn typefaces of your own. Tutorial Details
A preview of the final image is below.  Plus members can Log in and Download! If you’re not a member, you can of course join today! You can view the final illustration below. This is a Detailed and Professional TutorialPlus members can Log in and Download! Otherwise, Join Now! Below are sample images, which show some of the development of this tutorial.      Vector Plus MembershipAs you know, we run a premium membership system here called Plus that costs $9 a month (or $22 for 3 months!) which gives members access to the Source files for tutorials as well as periodic extra tutorials, like this one! If you’re a Plus member you can log in and download the tutorial. If you’re not a member, you can of course join today! |
How to Make Super-Sharp, Vector Swords
|
In this tutorial I’ll show you how to draw a sword in Illustrator, using the Rectangle Tool, gradients, and other Illustrator tools. Actually the tutorial isn’t very hard, let’s see the final result that is our goal first!
Final Image PreviewBelow 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
Here is the illustration we’ll be creating.  Step 1Open a new document, pick the Rectangle Tool (M), create a rectangle like the one shown below, and fill it with a linear gradient with colors from R=213, G=237, B=254 to R=142, G=158, B=171.  Step 2Now pick the Add Anchor Point Tool (+) and add two points in the bottom part of the rectangle. Now use the Convert Anchor Point Tool (Shift + C) to edit the two key points that you added, as showed below. Select the bottom two points and go to Object > Path > Average (Alt + Command + J) and in the new open window turn on Both, and click OK.  Step 3Pick the Rectangle tool (M), create a rectangle in the bottom part of the first rectangle as shown.  Step 4With the rectangle you created earlier selected, pick the Add Anchor Point Tool (+), add two points in the positions as shown and edit them as indicated below. Fill them with the same gradient from Step 2, open the Pathfinder panel and click on Add to Shape Area.  Step 5Now copy the newly created shape from Step 4 using Command + C followed by Command + F to paste in front. Decrease the copy’s size from the right and the left side. To do this, pick the Selection Tool (V), click on one of the side points, then press and hold the Alt key and slide it a little bit inwards.  Step 6With the shape whose size you just decreased still selected, pick the Direct Selection Tool (A) and delete the points on the right side. To do this, click on the point which has to be removed and press the Delete key. Then pick the Pen Tool (P), click on the top point in the top part in the middle, and then on the point at the bottom, and fill with a Linear Gradient. Add three more Gradient sliders, for the first one from left to right select this color: R=30, G=73, B=123, for the second one R=54, G=102, B=162, for the third one R=0, G=97, B=148, for the fourth one R=91, G=127, B=173 and for the last fifth slider R=124, G=156, B=189.  Step 7Copy the shape you filled with a linear gradient and apply Command + C followed by Command + F, flip it horizontally, and then fill it with the color R=100, G=136, B=168.  Step 8Now copy the shape you filled with a linear gradient using Command + C followed by Command + F. Now turn off the fill color, delete the top-right point of the shape using the Direct Selection Tool (A), and apply a white Stroke with a weight of 1pt.  Step 9Copy the shape you created in Step 4 using Command + C followed by Command + F. Remove the top points of the copy using the Direct Selection Tool (A), also remove the right point. Use the Add Anchor Point Tool (+) to add one point as shown below, then using the Direct Selection tool (A) edit the top key point as indicated. Now use the Pen Tool (P) to close the path like we did in the previous steps. Fill with color R=121, G=134, B=158 and reduce the Opacity to 70%.  Step 10Copy the last shape you created using Command + C followed by Command + F, flip it horizontally, change the Fill color to white and reduce the Opacity to 50%.  Step 11Copy the shape from Step 4 once more using Command + C followed by Command + F. Now we need to move the shape on top of all the other shapes. With the copy still selected, go to Object > Arrange > Bring to Front.  Step 12As the shape is still selected, pick the Direct Selection Tool (A) and this time delete the bottom points of the shape and fill with a linear gradient as shown.  Step 13Create a rectangle using the Rectangle Tool (M) on top of all the other shapes and position as shown, then fill it with a linear gradient. To do this, open the Gradient panel and select Type: Linear. You need 3 Stop color sliders all together. For the first one from left to right select color R=84, G=110, B=114, for the second one R=12, G=20, B=39, for the third one R=21, G=27, B=48 and reduce the Opacity to 75%.  Step 14Copy the shape from Step 4 using Command + C followed by Command + F. And now we need to move it on top of all the other shapes. To do this, go to Object > Arrange > Bring to Front. |
Create a Vivid Themed Illustration Using Simple Hand-Drawn Elements – Part II
|
Drawn elements are certainly something that can enhance an illustration. Even if you’re not very good at drawing, you can still create a quality piece. All you need is a good idea and some Photoshop skills. And if you don’t believe me, you will definitely change your mind after reading this Part II of his two part tutorial series. So let’s take a look inside!
Final Image PreviewTake 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.  Part II Tutorial Details
Introduction and PreparationIt’s a themed illustration about "No Beauty," this hides an idea that no beauty lasts forever. Suddenly all that’s great and beautiful falls apart. All the happiness is gone with the colorful pieces. The final outcome has its own mood, even thou it’s colorful, it’s still kinda frightening. And as I said this is kinda simple but you may be wondering why this tutorial is labeled as advanced level. Well everything is fine as long as you have some base to work on. Here we have absolutely nothing, we will create this piece from scratch. So what’s hard, is all the illustration depth, shading and colorization. Beside that, there are some things you just need to feel. Ok, now let’s take a look what we’re going to use here:
Step 1Just to remind you of what we created in the Tutorial Part I, the first image below shows our final outcome. Remember that you need to work now below all adjustment layers (which affect the whole illustration) and also below the overall room shading that we added. OK, so pay attention to the second image below. I drew something like that in the first tutorial part, this is the sketch of how I pictured the splashes. And I decided not to cover the whole face with splashes.  Step 2I found three nice splashes (1,2,3) from istockphoto, which you can view in the first image below. There are few ways to do the extraction, and because the background is white it’s quite an easy task. You can do this using Color Range, however we don’t need the full splashes here, and a more accurate job need the Pen Tool. Look at the third splash below and the green rectangle. It’s a good part to fit our face. Let’s zoom into this part and use the Pen Tool to cut it out. Using this technique is reasonably fast (and the color range technique sometimes leaves a little bit of the background color, which we don’t want). So check the last image below (the black one) and you can see it’s very precise. I compared the background with a black color and yes, it’s full red, no white edges.  Step 3Now as I said we just need a little bit of this splash, so make it fit into the face and use a soft eraser or a layer mask to get rid of the square edge of the splash (first image below). Then apply Image > Adjustments > Selective Color and brighten all the tones in this dark red splash. To do this we need to use Reds, Yellows, Neutrals, and Blacks (second image below). Now this looks over saturated, so let’s take the saturation down (third image below). Then it’s good to give a little more brightness (forth image).  Step 4I’ll show you now what to do in points:
 Step 5Now duplicate the face layer and place it above the splash. Flip it horizontally to make the dark skin cover our splash (first image below). Go to Layer > Layer Mask > Hide All (second image below). Then use a soft, black brush and paint on the layer mask while having the “splash” selection activated (third image below). This may look a little confusing. Let’s review what this does? Well, basically we’re revealing the skin from the copied face. And we’re doing this on the splash to make it look more skin textured. It’s a tiny difference, but believe me, if you zoom in, you will see the difference. The splash will look like real skin.  Step 6OK, let’s bring up another splash. Again use the Pen Tool to make a precise cut out. Now turn it in the right direction (first image below). Then use a hard eraser (or layer mask with a hard, black brush) to make a perfect match to the skin (second image below). Then soft-erase the squared top part of the splash.  Step 7As when we were applying the previous splash, use Image > Adjustments > Selective Color and adjust the same colors. Play around with the values starting from Reds, Yellow, Neutrals, and Blacks. Try to make the splash color brighter (first image below). Then turn down the saturation (third image below) and finally give a touch of brightness (forth image below).  Step 8
 Step 9OK, when it comes to adding lighter splashes, the job is much easier.
Note: The lights may sometimes come a bit sharp and bright, so you can always get rid of them using the Patch Tool or just by erasing some parts of the splash.  Step 10As you see now, the shadow below the face will be a little bit different because we changed the shape. Find the same color as you used previously, while painting the shadow. Grab a very soft brush and add more shadow where objects are getting closer to the ground (as you see in the fist and second images below).  Step 11Now to add more skin-splash touches, we need to use another image of paint. It’s a good to have it in the same color, then the adjustment values will not change much. So bring up this Splatter image to Photoshop and start extracting using the Pen Tool. As you see in the first image below, you do not have to cut out the whole piece, just the bottom part. And also the extraction needs to give you a nice rounded stain without dark shadows. Everything is shown in the images below. You just need to repeat what you did previously with the splashes, but yeh, with each new splash you must search new adjustment values (as they are not the same). So the values will be quite similar, but not exactly the same.  Step 12Grab the Brush Tool with soft settings (Flow at 2% and Hardness set to 0%). Create a new layer below these skin parts, and use a dark color (that fits to the surface) to add a tiny shadow. I used the color: #2f1d0e. Then look at second image below and create two new layers above the skin parts. We will make a small touch up to one of them. As shown in the image – change these layer Blending Options: one to Overlay and the second to Multiply. Then using the same soft brush, change your color as shown in the second image below and paint in the indicated spots to make this skin look more realistic.  Step 13It’s the right time to add some hand-drawn pieces. My drawing skills are pretty lame and I’m aware of that, but since I have some basics I was able to create several very simple elements that look good enough for this purpose. And with good Photoshop skills you can turn your simple drawings into something really cool. So take a piece of paper, a pencil and use your imagination to create some nice shapes (or you can use mine as well). Now shoot a photo of each one (it’s good to have natural daylight while taking a picture). Then open each one and if they are too dark, use Layer > Adjustments > Brightness/Contrast and then Layer > Adjustments > Levels to get a nice contrast between the edges and the background. Next use the Pen Tool to extract. While extracting, work on a big canvas (don’t resize the photos).  Step 14As you see my drawn element is quite big and that’s a good thing. Now you can use Command + T and click Warp in the top menu bar. Work on bending this shape to get various results. Obviously the warping will get our element a little blurry, but after we resize it down it will not be noticeable (second image below). Next I wanted to add some depth to this piece by making it less plane. To do this you need the Burn Tool and Dodge Tool. In the third image below, the green arrows indicate the lower spots (that need to get painted using the Burn Tool set to Midtones) and the red arrows indicate the upper spots (that need to get painted with the Dodge Tool set to Highlights). And after adding depth, you may color this element using Hue/Saturation. |
Create a Vivid Themed Illustration Using Simple Hand-Drawn Elements – Part I
|
Drawn elements are certainly something that can enhance an illustration. Even if you’re not very good at drawing, you can still create a quality piece. All you need is a good idea and some Photoshop skills. And if you don’t believe me, you will definitely change your mind after reading this tutorial. So let’s take a look inside!
Final Image PreviewTake 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.  Part I – Tutorial Details
Introduction and PreparationIt’s a themed illustration about "No Beauty," this hides an idea that no beauty lasts forever. Suddenly all that’s great and beautiful falls apart. All the happiness is gone with the colorful pieces. The final outcome has its own mood, even thou it’s colorful, it’s still kinda frightening. And as I said this is kinda simple but you may be wondering why this tutorial is labeled as advanced level. Well everything is fine as long as you have some base to work on. Here we have absolutely nothing, we will create this piece from scratch. So what’s hard, is all the illustration depth, shading and colorization. Beside that, there are some things you just need to feel. Ok, now let’s take a look what we’re going to use:
Step 1I always try to work on a big canvas, but for the tutorial purposes I will go use a document that is 815 px by 1050 px. Just to save you some money from buying large pictures. Anyway, drag the paper texture to our document, duplicate it twice and to each copy hit Command + T (Free Transform) and then select Distort. Refer to the second image below and look how to transform these two paper copies, they need to create a perspective as shown. Now in the same image – two green frames show you where to cut the main paper to get a good connection. Finally, grab the Patch Tool and get rid of the bad looking textures (third image below).  Step 2Next use Command + U and lower the Saturation of this background paper texture a bit. If the texture still needs some work (first image below), then use the Patch Tool or Clone Stamp Tool to cover some imperfections. Then, let’s say that the paper background is some kind of a room, so I thought these walls need some more contrast. To make the texture look better, use the Burn Tool (Range – Midtones), and burn in the connection lines to make it look more like a room.  Step 3Now, while you still have the Burn Tool selected, make the diameter very small and paint in the top and bottom edges (first image below – where the arrows indicate). This should help to keep the walls, floor and ceiling separated. OK, look at the second image below. From my experience I knew I’d give this image more contrast in the final product so for now I kinda lowered the overall contrast giving the feeling that all these walls are very light. To do this use levels as shown in the second image below.  Step 4I assume you have merged all your wall layers together for easier work. If you didn’t, let’s do it now. Then duplicate (Command + J) the “walls” layer and change its Opacity to Overlay. Now go to Filter > Other > High Pass and add the value of 1 or 2. You should immediately get the result shown in the first picture below. Now hit Command + Shift + A to select the whole canvas, then Command + Shift + C (Copy merged), and Command + V (Paste). Turn the previous “walls” layer off. Leave only the white background layer visible and the new merged layer. Create a new layer above all, change its Opacity to Multiply, grab the Eyedropper Tool and sample some dark brown color. Then use the Brush Tool with 0% Hardness and around 3% Flow, and then paint as shown in the second picture below to create some irregular shading. Notice how the floor and ceiling is being created by doing this.  Step 5Select the merged layer (the one with the whole canvas) and use the Rectangular Marquee Tool to select the top part of the image, then hold Command and drag this part down. This will help us repair the perspective, because in the beginning we made it pretty much random (if you can imagine this, the diagonal wall lines should cross in the center of the image). Next, look at the second image below and use the Patch Tool to get rid of the straight line indicated by the arrows (which is a result of repairing perspective).  Step 6Let’s open the scratchy texture (link in introduction) and hit Command + Shift + U to Desaturate it. Then you can add Levels (Command + L) and enhance the whites, just to make these tiny scratch lines more visible. Take a look at the second image below, what we need to do is place this texture in the floor spot. There is also alternative way to do this step by stretching the texture (as you see in the third image below) to get the right perspective (using Command + T > Distort), but well, as not everyone has the correct eye to make this right, we can stick to the position in the second image below.  Step 7As you have positioned this texture, go to Layer > Layer Mask > Hide All. This will make the texture totally invisible. So then grab the Brush Tool, make your brush setting very soft (Flow at around 4% and Hardness at 0%). Then use white for the color and paint on the layer mask of the texture. The first image below shows the full mask view, and it’s shown where I painted to reveal the texture. Now look at the second image below, and notice how nicely this texture blends with the white background.  Step 8Use the same technique from the previous step to create the ceiling surface. Now open the face picture. Now grab the Eraser Tool set to 100% Hardness and 100% Flow, and get rid of the surrounding skin flowers. An accurate cut out is not necessary, as we will work the face shape in the following steps. For now we also need to resize down this face to make it more suitable to the illustration (third image below). Everything needs its own place in a quality piece, let your own eye be the judge of proportions.  Step 9Now let’s shape up this face. Grab the Pen Tool and draw a curvy path around the whole face. Pay attention to make lots of cavity shapes (absolutely no squares). After you’re done, turn the path into a selection and hit Command + Shift + I to inverse the selection (first image below), then hit Delete. Now you should get something similar to the second image below. When you work on an illustration like this you need to do a lot of work and planning. In the third image below I wanted to show you how I pictured in my head – what the next steps might look like. I sketched the face falling apart, and basically I wanted to do this by smudging the skin, but ultimately this turned out as splashes.  Step 10I made some further corrections to the face, as I didn’t like the face center (first image below). So if you want you can use the Pen Tool to cut more of the face. Pay attention to her nose, the holes are looking kinda weird (like the right one is barely noticeable). To correct this use the Burn Tool (with Range set to Midtones) and a small diameter. Burn the right nose hole (second image below). Be careful, the Burn Tool can affect the nose skin also, so that’s why we need a small diameter to make it with precision. If you still have the Burn Tool selected, make your diameter bigger and paint where the green arrows indicate (third image below). I wanted to enhance some shadows and also the bottom of the face. Soon we will drop some shadow below this face, and to make everything work properly it’s good to add shade to the bottom part of this skin.  Step 11The face seems kinda pale so let’s warm it up a little. Select the “face” layer, hold Alt and go to the Layers Palette, and pick Gradient Map (check option Use Previous Layer To Create Clipping Mask). Look at the first image below and use similar colors as mine. Select the Gradient Map layer, change its Blending Mode to Soft Light and lower its Opacity to around 20-30% (not to overload the face with color). Then using Alt again, add another Adjustment Layer, which is Curves and adjust it just a little bit to get the similar look as in the third image below.  Step 12OK, now make sure you no longer need to change anything in the color of the face and then select these two adjustment layers (Curves and Gradient Map) and also our “face” layer. Then hit Command + E to merge them. Next use Command + J to duplicate the “face” layer, drag the copy below original one and move it a little to the top left (first image below). You can achieve even more variety and less plane results if you rotate this face (second image below). Then grab the Lasso Tool and make a selection around the indicated part above the nose, hit Command + Shift + I to inverse the selection (third image below) and use delete to get rid of all the unwanted parts.  Step 13And what is this all about? This face looked very flat to me. To avoid that look it’s good to add some depth. As you can see, the first image below is the view that we get after deleting all the unwanted parts from the previous step, and the face cut is barely visible. We’re going to use the Burn Tool (with Range set to Midtones) to add the skin depth by giving some shade to the duplicated “face” layer lying below the original one (second image below). |
Creating a Surrealistic Hand-Drawn Illustration
|
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 PreviewBelow 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
 ResourcesIn 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 1First of all prepare all the things you need to draw and keep them handy.  Step 2Let’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 3Then 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 4Open 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 5Repeat 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 6Print 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 7While 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 8Continue 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 9You 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 10The 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 11Now 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 12With 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 13Your 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 14Now 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 15In 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 16Repeat 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 17Create 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 18Then, 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 19The 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 20Import 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.
|
Best of the Vector Web – December 2009
|
As you know, each month we round up some of the best vector content on the web. This month, we found a ton of amazing tutorials, freebies, and inspirational posts including some excellent holiday themed tutorials and freebie sets, screencasts, and stunning round ups. Please take a moment to review some of the fantastic vector content released during the month of December.
Tutorial Wrap
(FREE!) Download Picks
|
Vector Valentines Inspiration, Filled with Love, and Warm Hearts
Grab some vector Valentines inspiration to fill your winter days with a warmth and heart felt happiness. Rejoice in each moment of snow, frost, every breath of wind, the stars in the sky, and a lovers hand. Feast on this massive overload of lovely illustrations. Get inspired to create for this coming holiday.
Inspiration
Spread Love.
Vector illustration by Andy Gosling.
Very unique,creative and lovely graphics. The details and the colors are spectacular. Though the ground between the roots is somewhat sterile in contrast with all the leaves. The flat horizon is also a little strange. Rolling hills perhaps?
Love Birds.
Vector illustration by Edgeplus.
Fascinating birds. I love how their wings and bodies are hearts.
Love is in the air.
Vector illustration by Don Clark.
Excellent illustration for greeting cards and children’s books. Illustration makes me wonder how the artist got those lovely brush stroke textures. Some great little touches there, like the snake wrapped around the elephant trunk. This evokes philosophical reflections.
Love Wallpaper.
Vector illustration by Wallcoo.net.
The world through the window of the heart. Excellent wallpaper for your computer. The direction of movement is from right to the left (plane, birds) and is composed so the spectator sees it as a coming. Coming of Love.
Broken Love Type.
Vector illustration by Tom.
Interesting 3D composition. Good combination of colors. It turns out robots can love. In my opinion he is broken.
Sunset Love Song.
Vector illustration by toinjoints.
This is a musical message to his beloved girl. I love the small hearts and the little kitty; the style is so unique.
Bleeding Love.
Vector illustration by Yunart.
That’s rather sad. Love is cruel. The artist drew perfect hands and hair.
Love Wallpaper.
Vector illustration by mohammadamiri.
Funny character perfectly contrasts with the soft pink background. Interesting drawing technique and texture of the background. Good combination of rough and gentle.
A Simple Love Poem.
Drawing artwork by 2DCale.
Thoughts of the poet about love. What else can you think of on Valentine’s day? The artwork is done in warm colors; cute characters cause a smile. The sun’s rays and the background texture add warmth to the image.
Kittens in Love…. Sleeping.
Adobe Photoshop CS2, Wacom Graphire4 A5. Artwork by DarthEldarious.
They are in love and already have a little one. This is a beautiful composition, in the bottom cushion guess the outline of the heart. The main color is pink. What kind of love without the pink color? With a combination of green and pink, I would argue.
Love…
Vector illustration by MrEdgar.
The night is the time of lovers. Artwork uses a wonderful composition making use of bright moon against a dark foreground.
Love…
Vector illustration by thewiseninja.
Heart spreads love. Bubbles adds some contrast in the bottom of the composition.
See more…