Phantasm CS Studio Competition

Astute Graphics is running a competition on their site for Phantasm CS Studio owners. You can win some great prizes over on their site. In order to enter, you need a copy of the Phantasm CS range. If you don’t own a copy of Phantasm CS Studio, well then now is your chance to win one. For one lucky Comment to Win Vectortuts+ reader, you’ll receive a free copy of Phantasm CS Studio.

Astute Graphics is allowing us to give away a copy of Phantasm CS Studio. Instructions for winning this free copy of Phantasm CS Studio from Vectortuts+ follows below.

Phantasm CS is a range of plugins for Adobe Illustrator providing the following benefits:

• Color adjustment tools (inc. Curves, Levels, Hue/Saturation) that works directly in an Illustrator document on all embedded vector objects and images
• Creative tools including vector Halftones and Duotones
• Print production previews including quick and full separations and ink coverage
• Embedded image editing

What Must I Do to Enter?

To enter into the drawing, all you need to do is follow Vectortuts+ on Twitter, if you aren’t already! Next, leave a comment containing your username for verification purposes. I’ll then randomly select one person from this list and email you! It’s as simple as that. I’ll be selecting one random winners in the next 24 hours, and then I’ll update this post with the winner’s name!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

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.

Step 1

I went over to stock.xchng and picked a photo that I thought would suit an illustration for a face. The guy had such a cool look on his face that I couldn’t pass. Let’s start with placing the image into a new Illustrator document.

Step 2

Lock the image layer and create a new layer. Then start tracing the face with the Pen Tool (P). I chose a gray since I am going for a black and white look.

Step 3

Start tracing the eyebrow with a black fill. Be as easy going about it as possible. We are not going for a photo realistic look, but rather for a stylized one.

Step 4

Trace the other eyebrow too, as shown below.

Step 5

Then move on to the eyes themselves. Start by simply tracing the outline.

Step 6

I filled the eye outline shape with a light gray. Then add the eye details. Simple but effective. Just add a shape filled with a darker gray.

Step 7

Then add the pupil as a half moon black filled shape.

Step 8

Add some highlights to bring the eyes to life. You can do that by simply adding two small white circles and place them into the pupil.

Step 9

Next we need some eyelashes. Take the Pen Tool (P), and start tracing an eyelash, then duplicate it several times and place them around the eye.

Step 10

Next we will trace the lips. Again, keep the shapes simple, just trace in easy shapes with the Pen Tool (P). Remember, the Pen Tool is your best friend. Now fill the shapes with a red color and a black stroke, and fill the upper lip with a darker red. This will give the face a dramatic look, since we kept the other shapes black and white.

Step 11

Start tracing the hair. Since the photo cuts of the rest of his head, we need to get a little creative. Just imagine the hair and add as many points and loops you need. Fill it with black.

Step 12

Don’t forget the nose. Trace it and then fill it with a
gray gradient, linear or radial, it depends on how it will blend in with his face color.

Step 13

Here is the finished face. I went ahead and stylized it some more, sliced it up, and filled each shape with a different gray or black.

Step 14

Let’s move on to the pin button. Create a circle and fill it with a white to black radial gradient, then add a Drop Shadow. Set the Layer Mode to Multiply.

Step 15

Make two copies of the circle, scale one down and set the
Layer Mode to Normal. Now add a gray Stroke of 6pt to the inside. Select both and Divide them via the Pathfinder palette.

Step 16

Delete the inner part with the Direct Selection Tool (A) and place the circle shape on top of the other.

Step 17

Duplicate the first circle in Step 14 and scale it down a bit and place it on top.

Step 18

Create a small rectangle (M) and fill it with a black to white to black linear gradient. Apply rounded corners (Effect > Stylize > Rounded Corners) and a Drop Shadow.

Step 19

Repeat Step 18 and create another rectangle, but don’t apply the rounded corners, just a Drop Shadow.

Step 20

Next, create a needle shape with the Pen Tool (P) and fill it again with a linear gradient, then add a Drop Shadow.

Step 21

Create another small rectangle (M). Add rounded corners, a Drop Shadow, and set the Layer Mode to Color Burn.

Step 22

Create another rectangle, but cut out the middle, just like you see below. Also, add a Drop Shadow.

Step 23

Let’s move on the top part of the pin button. Create a circle that is the same size as the back part of the pin button. Fill it with white and add a Drop Shadow.

Step 24

Create a sickle like shape by simply dividing two circles via the Pathfinder palette. Fill it with black and set the Layer Mode to Multiply.

Step 25

Create another circle on top and fill it with a radial black to white gradient. Set the Layer Mode to Multiply.

Step 26

Create two funky shapes, one in black and one in red, then overlap them.

Step 27

Select both and apply the Pucker and Bloat effect (Effect > Distort & Transform > Pucker & Bloat). Apply the settings shown below.

Step 28

This is what it should like with the effect applied to both shapes.

Step 29

Make a copy of the circle for the pin button, remove all effects and fills, then place it on top of the puckered shapes. Select all and apply a Clipping Mask (Command + 7).

Step 30

Place the clipped shape on top of the pin button. Then create a small circle filled with a very light gray to white radial gradient and set the Layer Mode to Overlay.

Step 31

Take the face and group it (Command + G), then place it on top of the pin button and scale it down if necessary.

Conclusion

This is the final result. A stylized pin button with an illustrated face. Of course, you could use your own photo, or even a photo of yourself. Enjoy!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Cgtuts+ - 3D

• 

  How to Create a Video Game Dumpster: The Complete Current-Gen Workflow

  As technology evolves, the tools and requirements for creating current-gen game art are constantly changing. In this tutorial we will learn the current game art workflow in its entirety, from the low-poly model all the way to final game-ready asset. We will create a realistic grimy dumpster suitable for any urban setting.

  This mammoth video training series features over 194 minutes of video instruction on all aspects of game art creation, including creating the low-poly and high-poly models, the UVW unwrap, baking normal maps from high-poly, and creating diffuse, specular and detail bump textures.

  Visit Article

• 

  Create Amazingly Realistic Renders Using Advanced Render in Cinema 4D

  Maxon’s 11th release of Cinema 4D introduces significant improvements to Advanced Render. AR 3 now uses two new algorithms (Irradiance and Quasi-Monte Carlo), making it much easier and faster to get clean, and beautiful renders than ever before. In this tutorial we will learn how to take advantage of these amazing new features!

  Visit Article

• 

  Sculpt, Model and Texture a Low-Poly Skull in Blender

  Normal maps are widely used in games to make low poly models look high poly. In this tutorial you will learn how to create a high res Skull model, generate a normal map from that model and learn how to apply this to its low poly version.

  Techniques covered in this tutorial include multires sculpting, baking a normal map, baking ambient occlusion and applying the maps to a low poly model.

  Visit Article

• 

  Model, Sculpt and Texture a Demon-like Monster in 3ds Max and ZBrush

  This is a multi-part tutorial on creating a Demon-like ‘Lok Warrior’ with realistic muscle anatomy. On the first day of this tutorial we created a base mesh for our character using poly modeling. On the second day, we took the mesh into ZBrush and sculpted the intricate muscle anatomy. On the third day we will texture the monster.

  Day 1, Day 2, Day 3.

• 

  Create a Spectacular Crash Animation With Maya Dynamics

  It is always great to learn new animation tools and techniques that can help you to bring your creations to life. In this tutorial we will learn how to use Maya’s powerful animation, dynamics, and camera tools to create an explosive crash effect between two vehicles.

  Day 1, Day 2.

Aetuts+ - After Effects

• 

  War! Or How to Create a 3D Particle Generated Video Display

  Wes comes back with another adrenalin fueled piece that is sure to become an Aetuts+ favorite. Using Trapcode Form as the basis to display video, he shows how to use the audio reactors built in to form to achieve something very very cool.

  Continue Reading

• 

  Create an Effect Inspired by the Bourne Ultimatum End Credits Sequence

  In a very clever use of Trapcode Particular, this tutorial shows us how to create an effect that is inspired by the Bourne Ultimatum end credits sequence.

  Continue Reading

• 

  Create a Split-Flap Type Display

  Split-Flap-What? It’s the term used for displays that are found in train stations and airports, where they typically display departure and/or arrival information and do that cool flipping of letters to display the new information.

  This tutorial does not show how to create the effect from scratch but instead it is a tutorial to explain how to use the project file created by Mattias Peresini who runs the totally awesome mattrunks website which has incredible tutorials for After Effects in French. We are very happy to have Mattias doing his first English tutorial for us here at Aetuts+.

  Continue Reading

• 

  Create a Sci-Fi Movie Title Sequence

  This tutorial covers the creation of a space-like si-fi title sequence from scratch. Michael shows us how you can easily create a visually interesting and impressive title animation with some simple title cards and text animation. The tutorial uses the Twitch plugin from Video Copilot, though a similar effect could be obtained by manual keyframing.

  Continue Reading

• 

  Create a Surprising Billowing Cloth Reveal

  It’s amazing how much pseudo-3D you can do in After Effects today. This tutorial will focus on using a new plugin that brings 3D bicubic deformations to layers that allows you to truly bend and twist layers in 3D space. If you are familiar with 3D packages, this is true displacement as opposed to just bump mapping.

  Continue Reading

Nettuts+ - Web Development

• 

  24 JavaScript Best Practices for Beginners

  As a follow-up to “30 HTML and CSS Best Practices”, this week, we’ll review JavaScript! Once you’ve reviewed the list, be sure to let us know what little tips you’ve come across!

  Visit Article

• 

  20 Tools to Make the Life of a Web Developer Easier

  Developing a well-rounded aesthetically pleasing website can be a daunting task even for the most seasoned web developer. You must identify current trends and standards and determine ways to incorporate them into your designs. Luckily, there are many free tools which are available that can help you speed up your efforts and work in a more efficient manner. Below are 20 tools which are sure to benefit all developers.

  Visit Article

• 

  Outside the Box Navigation With jQuery

  Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.

  Visit Article

• 

  10 Essential SQL Tips for Developers

  SQL is yet another essential language for developers wishing to create data-driven websites. However, many developers are unfamiliar with various aspects of SQL; so in this article, we’ll analyze ten essential tips.

  Visit Article

• 

  Build a Custom CMS Using PHP and MySQLi: New Plus Tutorial

  In this video tutorial, we’ll be building a custom Content Management System (CMS) using PHP and MySQLi. We’ll start off by pulling our content from a MySQL database and then build a CMS admin panel to manage our content. For easy content management, we will be using TinyMCE as our editor. I hope you enjoy the screencast. Join today!

  Visit Article

Flashtuts+ - Flash, ActionScript, Flex

• 

  Animate a Continuous Quad Run Cycle With Flash

  In this tutorial we’ll create a quad run cycle. The animation will be created using simple lines. Along the way we’ll cover a bit of work flow and animation theory, then near the end we’ll use Motion Tween and ActionScript to move the animal across the screen.

  Continue Reading

• 

  Create an Apple Inspired Flash Preloader

  Preloaders are a must have in your Flash applications. They tell the user that the program is running but can’t show any contents until they’re sufficiently loaded. In this tutorial I’ll help you create an Apple inspired preloader MovieClip and teach you how to display some loading information. All this using Flash and ActionScript 3.0.

  Continue Reading

• 

  50 Flash Twitterers Worth Following

  There’s no denying how useful Twitter can be when it comes to trawling the web for content. With that in mind, here’s a quick roundup of 50 twitterers who tweet some of the most useful Flash-related content around.

  (It goes almost without saying; if you have any more who deserve a mention, we want to hear them!)

  Continue Reading

• 

  Using the YouTube Player API with ActionScript 3.0

  Though more and more of us are developing with AS3, certain technologies remain in AS2. This forces us to find fast, simple ways to use these technologies within our projects. One such technology is YouTube.

  The current YouTube player is still in AS2 and until it’s updated to AS3, we have to create a wrapper to allow us to load videos into our projects. Remember, stealing the FLV feed is against YouTube’s terms and conditions, so let’s do it the right way using the chromed or chromeless player.

  Continue Reading

• 

  AS3 101

  Pads are an extremely useful device for all styles of music, allowing for warm, calming, uplifting, sad, ominous, or even threatening effects. This tutorial shows you one simple way to create your own unique pads.

  Creating your own pads is yet another way to help build a custom library and develop a personal voice. And by having more control over the various elements that make up your pad, you have more freedom to add subtle layers of complexity and imperfection for an organic sound.

  AS3 101: Variables, AS3 101: Functions.

Audiotuts+ - Audio and Music

• 

  How to Use Saturation Effectively

  Saturation is an often misunderstood process, sometimes written off as basic distortion effect, too subtle for most uses. While this isn’t entirely inaccurate, saturation has a lot to offer and can impart a true analog flavor on our mixes if used correctly. Most saturation plug-ins are pretty simple devices, but the real key to using the effect is understanding how it works. Let’s take a look at the process in detail and then we can go through a few examples of a few saturation plug-ins in action.

  Continue Reading

• 

  A Guide to the Electric Guitar

  This article is a general overview of the electric guitar. We cover the woods, acoustic sound, construction, necks and fretboards, pickups and hardware and show you how to purchase and maintain an electric guitar that you’ll love for years to come.

  Continue Reading

• 

  7 Places to Find Inspiration for Songs

  Where do you find inspiration? It is as intangible and elusive as a ghost. You know when you have it, and can’t manufacture it when you don’t. Without it, creative work is a chore, and often a fuitless one. With it, magic happens.

  The question of where inspiration comes from interests me, and over the years I’ve kept notes about where the inspiration for successful songs has come from. It has been found in many and varied places. Most of all, it comes from real life - especially from sincere insights into life truths, and emotional responses to events and relationships. Some artists seem to have discovered ways to help the creative process, and inspire inspiration.

  Continue Reading

• 

  Working With the Intangibles of a Mix — Audio Plus

  In this week’s Audio Plus content, Bobby Owsinski teaches us how to set about creating a mix that works beyond the basic techniques of getting levels right. This tutorial is about planning the mix and creating the balance that makes everything come together. Bobby is the author of many best-selling audio books including The Mixing Engineer’s Handbook — this is a tutorial of expert advice that’s not to be missed!

  Continue Reading

• 

  How to Use Reverb to Create Your Own Pads

  Pads are an extremely useful device for all styles of music, allowing for warm, calming, uplifting, sad, ominous, or even threatening effects. This tutorial shows you one simple way to create your own unique pads.

  Creating your own pads is yet another way to help build a custom library and develop a personal voice. And by having more control over the various elements that make up your pad, you have more freedom to add subtle layers of complexity and imperfection for an organic sound.

  Continue Reading

Psdtuts+ - Adobe Photoshop

• 

  Making Sense of the Warp Tool - It’s All About the Lines

  Every now and then a project comes along that challenges me to use one of Photoshop’s tools more than ever. This particular image was part of a series of ads I was working on with photographer Richard Radstone for a clothing line based in Colombia, South America. he challenge with this one was to wrap an accordion around the palm tree like a giant snake.

  Continue Reading

• 

  It’s Time to Create a’Neo-Constructivist’ Poster with Photoshop

  Constructivist graphic design is often associated with communist politics and propaganda, but it’s more than that, Constructivism is about using bright colors, playing with lightness, perspective, geometrical forms, besides photomontage techniques and digital collage. This time I’ll dare to name this tutorial a ‘Neo-Constructivist’ design. It’s time to get started!

  Continue Reading

• 

  Illustrate a Sensitive Subject Using Poser, Cinema 4D, and Photoshop - Psd Plus Tutorial

  We have another Psd Plus tutorial exclusively available to Plus members today. If you want to take your illustrative skills to the next dimension, then we have an exciting tutorial for you. Discover how to use Multiple 3D programs to create a composed render, then use Photoshop to add texture, polish, and refinement!

  Continue Reading

• 

  Creating a Spy Fly Photo Manipulation

  Welcome to a new Photoshop based tutorial. This time I’ll try to describe the main steps in creating a dead robot fly. Before we get started, I would like to thank Hortensiu Milstein (Personal Portfolio) for the great collaboration. We decided to make this tutorial a year ago, but the lack of time postponed the realization of this tut. This piece was actually created for a contest and off course the first prize was the result. The concept of this illustration was to take a picture and be creative, use parts of that image and create something unique. So, let’s get to it!

  Continue Reading

• 

  How to Create a Moka Express Icon

  The staple of every Italian breakfast is home espresso coffee, brewed with the iconic ‘Moka Express’ pot. In this tutorial, we’ll create a Moka entirely from scratch using shapes, layer effects and a bunch of productivity-enhancing tips. We will then proceed to turn our design into a Leopard and Vista-ready professional icon. So get your coffee mugs ready and let’s start brewing!

  Continue Reading

Vectortuts+ - Vector & Illustrator

• 

  How to Create a Rocketing, Vector Aircraft Shuttle

  In this tutorial, we’ll be creating a illustration of a speeding aircraft shuttle. It’s going to be all vector, but along the way we’ll use blends, and other techniques that give this rocketing aircraft an interesting look. Let’s get to it!

  Continue Reading

• 

  How to Create a Stinking Zombie Flesh-Eater in Illustrator

  In this tutorial, I will show you how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques. Let’s ‘rip’ this one apart!

  Continue Reading

• 

  How to Create a Smokin’ Western Type Treatment in Illustrator

  In this easy tutorial, I will show you how to create a western type treatment primary using Illustrator’s Effects. Using the effects from this tutorial, you can easily apply them to other type treatment and logos. Let’s get started!

  Continue Reading

• 

  How to Design a Custom Newspaper Icon - Vector Plus Tutorial

  We have another great Vector Plus tutorial available exclusively for Plus members today. If you want to learn how to craft a custom newspaper icon in Illustrator, then we have an awesome tutorial for you. In this tutorial, Jonathan takes us through the process of using Illustrator’s tools to construct this icon. Learn more about this tutorial at the jump!

  Continue Reading

• 

  How to Create a Fun, Illustrated Skateboard Design

  Today we are going to be making a skateboard design. I will show you how I turned a funky looking character into the skateboard you see. The great thing about skateboard designs is that there are no limitations whatsoever. You can make a skateboard design about anything you want and let’s learn how!

  Continue Reading

Final Image Preview

Below is the final image we will be working towards. Click here for a larger version. 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: Adobe Illustrator
• Version: CS3
• Difficulty: Advanced
• Estimated Completion Time: 1.5 hours

Step 1

Using the Rectangle Tool (M) draw a rectangle like the one below.

Step 2

Select the Warp Tool (Shift + R) and drag it over the edges of the rectangle to vary the edges. You can also double-click the Warp Tool to change its settings.

Step 3

We’ll make the ridges along the sides of the package by first copying and pasting the rectangle shape. Now stagger the two shapes slightly. Lastly, use the Pathfinder to subtract the large area from the thin edge.

Step 4

Use the Direct Selection Tool (A) to get rid of the leftover fragments that you don’t need.

Step 5

Duplicate the ridge twice and use the Align Palette to make them perfectly spaced.

Step 6

Repeat the process to create the ridges for the other edge of the package.

Step 7

Fill the ridges with a gradient that varies from light to dark a few times. You can give each ridge a similar but not identical gradient to add some visual interest.

Step 8

Apply a Radial Gradient to the package too.

Step 9

Now we’ll make shadows on the left and right side of the package. Select one of the ridges and give it a dark gray fill. Go to Effect > Blur > Gaussian Blur and enter a value that looks good to you.

In the Transparency Palette set the mode to Multiply so the shape blends well with the colors behind it. This will be more obvious on the right side of the package, where that edge will eventually have the camouflage pattern behind it.

Step 10

To give the package the illusion of bulk and shine we’ll add some highlights around the edges of it.

Use the Pen Tool to draw an arbitrary shape like the one below. Don’t try to draw all the shinny areas with one shape, rather, make at least one or two shapes along each edge of the package. This will give you the opportunity to vary the intensity of the shine on each area.

Step 11

While they are comprised of more of an organic shape it’s still important to have a general idea of how reflections work.

Below you’ll notice that toward the edge of the package the lines are smoother. Towards the center of the package the lines taper down to a point. This suggests that the plastic has something inside it causing the plastic to protrude where the object inside meets the plastic. So, as the highlight reaches the center it is likely to come to a point. Again, there is no finite method but this technique seems to be realistic enough.

Step 12

Using the main rectangle shape as the basis, add a drop shadow by going to Effect > Stylize > Drop Shadow. Place the object behind all the other elements and on a separate layer so it’s out of the way.

Step 13

Here’s what your package should look like right now.

Step 14

The beauty of this simple white packaging is complemented by the military camouflage pattern. To make the pattern first draw a square.

Step 15

Duplicate the square several times. Use the Align Palette to adjust the spacing between each square so they are equally spaced apart. The objective is to make sure there is no gap between the squares. After the squares are evenly distributed, group them by going to Object > Group.

Step 16

Duplicate the rows of squares and again adjust the spacing between them so they’re uniform. Try to position them so that there is no white space between any of the squares.

Step 17

Ungroup all of the squares. Select a pattern of squares and give them a different color.

Step 18

Continue giving the squares more colors.

Step 19

Since I wanted the design to spread onto the packaging from the lower right corner I decided to get rid of a few squares in the upper left corner. The squares you get rid of will be determined by the final design you want to achieve.

Step 20

Select all the squares and give them a rounded corner by going to Effect > Stylize > Rounded Corner. Once you do this you may notice that there are small white gaps in between. There is an easy fix for this…

Step 21

First, make sure all the squares are ungrouped. Select them all and go to Object > Transform > Transform Each, and enter about 105 for both the Horizontal and Vertical Scale, then select OK.

Step 22

Now, your shapes are slightly larger which fills in the gaps! It’s OK if all the shapes aren’t touching exactly at their corners. The actual military camouflage pattern is similar in this fashion.

Step 23

We’ll want the squares to have a slight distortion so they fit better when we place them over the packaging. To do this select them and go to Object > Envelope Distort > Make with Warp. Select Flag and enter a subtle variable to add some movement to the squares.

Step 24

Use the main package shape as a mask for the squares. To make a mask press Command + 7 or go to Object Clipping Mask > Make.

Step 25

Place the military pattern behind the highlights. Fill the reflections with a black to white gradient and select Screen in the Transparency Palette. This will make the reflections blend seamlessly with the color below it. Also, adjust the reflections’ Opacity if need be.

Step 26

Use the Pencil Tool (N) to draw an arbitrary shape, as shown below. Fill the shape with white, give it a Gaussian Blur and adjust it’s Opacity so it is almost completely see-through. This shape will create a nice overall shine for the package.

Step 27

Add the text to your package. I’ve used a font called ITC Franklin Gothic.

Step 28

We’ll give the text a little distortion like we did with the camouflage. Select the text (either one text area at a time or all at once, it’s up to you) and go to Object > Envelope Distort > Make with Warp. Under Style select Flag and adjust the sliders slightly to suit your taste.

NOTE: When you apply a warp to text you can no longer edit what the text says. Once you apply a warp to text you have to Expand it by going to Object > Expand in order to adjust gradients or colors.

Step 29

Once you get all the elements of the package in place you may want to add in a few more highlights to balance or complete the effect. I’ve added in a couple more gray shapes that I’ve blurred and some white blurred shapes to all four corners, which act as highlights.

Step 30

We’ll create a rough and dirty background texture by using the chalk brushes in Illustrator. To open this panel go to Window > Brush Libraries > Artistic > Artistic_ChalkCharcoalPencil. Drag any one of the shapes onto the Artboard.

Step 31

In order to successfully edit this shape you’ll need to use the Direct Selection Tool to get rid of the invisible shape around the edges. Select the points in each of the corners and delete them.

Step 32

Now, you can fill the shape with whatever colors or gradients you choose.

Step 33

Overlap the shapes in interesting and unique ways to create a completely new texture. Place the new shape behind the package and you’re all set!

Final Image Preview

Here is the final package. You’ve just learned how to create a shiny military themed ration package! Click here for a larger version.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

GraphicRiver - Modern Web UI Set

FlashDen - AS2 XML Free Photo Gallery

AudioJungle - Audio Logo Pack 04

ThemeForest - ‘Nice & Clean’ Site Template

VideoHive - Float

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.

Step 1

Open up a new document and draw a similar shape as you see in the image below with the Pen Tool (T). This will be the basic ice cream shape.

Step 2

I picked several shades of brown and grouped them in the Swatch Palette. This is optional, since you might want to create a vanilla or strawberry flavor of ice cream. Fill the shape with the darkest brown.

Step 3

Select the Mesh Tool (U) and start adding mesh points by clicking on the outline of the shape in a vertical manner. If you make a mistake, you can easily undo this by pressing the Alt key and clicking on the mesh point.

Step 4

Grab the Direct Selection Tool (A) and click on the outer point top-left. Then fill the point with a lighter brown. We just created our first highlight.

Step 5

Keep adding mesh points and select them and give them a different color.

Step 6

Start adding mesh lines on the horizontal. Keep in mind that you should place three mesh lines close together. Then pick a mesh point on the middle mesh line and fill it with a lighter brown. This will create the highlight.

Step 7

Repeat this with several other lines on the horizontal with this. Go by feeling and set the highlights like you have in mind.

Step 8

Sometimes you might want to add another mesh point and set it close to another and fill it with a darker brown.

Step 9

Once you move up on the shape, place the mesh points closer together and create more highlights.

Step 10

Sometimes you might have to go back and change the colors around, from dark to light or light to dark.

Step 11

You want to make sure that you place a light point next to a dark point. Select only one mesh point on a mesh line. This will keep the highlight more natural looking.

Step 12

This is how the mesh shape should look like.

Step 13

And here is a preview without the shape selected.

Step 14

Let’s move on to the cone. Create an ellipse shape with the Ellipse Tool (L) and fill it with a golden brown linear gradient. Set the Stroke to a darker brown.

Step 15

Make a copy of it and scale it down. Choose a slightly darker gradient.

Step 16

Select both ellipses, go to Object > Blend > Blend Options and choose Specified Steps. The number will depend on how far apart the shapes where placed.

Step 17

Create a path like you see in the images below. Set the Stroke to the same color as the ellipse and duplicate it several times.

Step 18

Create a copy of the blend shape and expand the appearance. Then set the fill to none and place it on top of the shapes you just duplicated.

Step 19

Select all the lines and the cone outline and apply a Clipping Mask to it (Command + 7).

Step 20

Place the clipped shape on top of the cone shape.

Step 21

Place the mesh shape over the top of the cone. As you can see, we need some slightly melted ice cream on the side.

Step 22

Create a droopy looking shape and add a mesh point in the middle. Give it a lighter brown by selecting the point with the Direct Selection Tool (A)

Step 23

Just because that was so much fun, let’s repeat this. Add another drop of ice cream.

Step 24

Select the clipped shape of the cone and add a Drop Shadow to it. (Effect > Stylize > Drop Shadow).

Step 25

Create a rectangle with the Rectangle Tool (M) and fill it with a yellow to blue radial gradient. Set the gradient yellow highlight towards the top-left corner. Place this shape behind all the other shapes.

Step 26

Duplicate the mesh shapes on top and set the Layer Mode to Multiply with an Opacity of 70%.

Step 27

Duplicate the small mesh drop on top and set the Layer Mode to Multiply with an Opacity of 100%.

Step 28

This step is the quickest way to create a starburst. Create a circle and fill it with the blue from the background. Set the Layer Mode to Multiply at 25%.

Step 29

Then select it and go to Effect > Distort & Transform > ZigZag, with 100pt size, Absolute, Ridges per segment at 100, and Points set to corner.

Step 30

There you go. The fastest way of creating a simple starburst.

Step 31

Create a shape like you see in the image below. This will resemble the sand. Fill it with a beige linear gradient and place it behind the cone shapes.

Step 32

Repeat Step 31 and place the shape this time in front of the cone shape. Offset it a little to the left or right.

Step 33

Duplicate it again and place it in front again

Conclusion

This is it. I created a small stylized border (you might say it resembles a stamp) and cut out a window allowing the ice cream and background to look through. I hope you enjoyed this tutorial!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

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.

Step 1

Begin by creating a new document of any size you’d like, I’ve used 600px by 400px, as that’s the size used for the tutorial images.

We’ll start with drawing the gear. First, draw a circle and center it relative to the artboard (by doing this we can easily align all of the shapes we’ll need to draw). Then draw three more circles that get progressively smaller toward the center (and center them in the artboard). Also, add a light gray fill to the circles, which will make it easier to work with the Pathfinder pallet when we cut out pieces of the circles.

Step 2

Next, select the largest and second largest circles, then open the Pathfinder palette and click the Minus Front button to subtract the smaller circle from the larger one.

Now select the other two smaller circles, and do the same.

Step 3

Next, draw a rectangle, center it vertically in the artboard, and place it over the top half of the circles.

Select it, and click the Rotate Tool in the toolbox. Hold down Alt and click the very center of the circles to place the light blue origin point there, and a dialog box will appear. We can now rotate the rectangle relative to the center of the circles. Since we want six of these spokes on the gear, enter 60 for the angle in degrees (360 / 6 = 60).

Then, click copy to make a copy of the rectangle rotated.

Finally, with the new rectangle still selected, press Command + D to repeat the transformation three more times, until you have five evenly spaced rectangles.

Step 4

Select all of the shapes, then in the Pathfinder palette click the Unite button to merge them into a single shape.

Finally, select the new shape and rotate it 30 degrees by selecting Object > Transform > Rotate from the menu.

Step 5

Now we’ve got the basis for our gear, but it’s lacking the critical attribute that makes a gear a gear - the teeth! So, draw a small rectangle as shown below.

Select the rectangle, and then go to Effect > Warp > Arc… enter -6 for Bend, and leave Horizontal and Vertical Distortion at 0, and click OK.

Then, select Effect > Stylize > Rounded Corners…, enter 6 for the Radius in pixels, and click OK.

Step 6

Now that we’ve got our tooth, center it vertically in the artboard, and place it over the gear so that the outer edge of the gear meets just where the bottom corners of the tooth begin to curve.

Then, select the tooth and select Object > Expand Appearance to trace out the effects we added into a path.

Step 7

We now need to rotate the tooth around the rest of the gear, and we’ll do it the same way we did earlier with the spokes. Start by selecting the tooth and then the Rotate Tool from the toolbar. Then, Alt-click the very center of the gear. Since we want 18 teeth, enter a value of 20 for the angle in degrees (360 / 18 = 20).

And click copy to rotate a copy of the tooth.

With the second tooth still selected, press Command + D 16 more times, for a total of 18 teeth.

And finally, select all of the shapes and again click Unite in the Pathfinder palette to merge everything into a single shape.

Step 8

At this point we can remove the stroke from the gear and fill it with a slightly darker shade of gray (I used #C6C8CA).

Select the gear and copy it (Command + C), and paste it directly behind the original (Command + B). Then, fill it with a dark gray and nudge it down a few pixels.

And do the same thing again (copying the original gear and pasting it in back), but this time fill it with white and nudge it up a number of pixels (you might not see it unless you change your background color).

Now we can group all three shapes together, but before we do, make a copy of the top, light gray gear and move it off to the side - we’ll need it later.

Step 9

Draw a circle slightly larger than the smallest opening at the center of the gear, and add a thin stroke to it (enough to overlap both sides of the inner edge of the opening - I used 15px).

Select Object > Path > Outline Stroke to trace out the stroke.

Fill the new shape with a dark to light gray gradient (from top to bottom).

And finally select the shape and send it to the back (Command + Left Bracket key , or right-click and select Arrange > Send to Back).

Step 10

Now repeat the same process as in the last step, but overlap the second largest circular edge as shown below. Fill this circle with a dark to light gray radial gradient, going from dark in the center to light toward the edges.

Step 11

Now, select this shape, copy it (Command + C) and paste it directly in front (Command + F). Now change its gradient from radial to linear.

Then, change its blending mode (in the Transparency palette) to Overlay and lower its Opacity to 50%.

And finally, select both of the ring shapes and send them to the very back (Command + Left Bracket key).

Step 12

We’ve almost finished the gear. The last step is to add a bit of a metallic texture to it. Alright, so we do have to use the Pen Tool, but this is the only time, and it’s easy - promise.

Draw a few oddly shaped triangles (some distortion is good, we don’t want them perfectly equilateral), and have their points all converging in the center. Now fill them with varying shades of gray.

Select all of the shapes and group them (Command +G). Then, select Effect > Blur > Radial Blur…

Enter 50 for the amount, and set the method to Spin.

Note: the radial blur effect is quite processor-intensive, so if you’re working on a slower computer, you can set the quality to Draft for now. This will greatly speed up rendering of the effect, and you can easily go back and change it to Good or Best before you save the final product as a graphic or print it.

Step 13

Still have that copy of the original gear shape we made way back a while ago? Good, because now it’s time to use it (and just in case, in your infinite wisdom, you decided not to follow my advice to make a copy, you can just make a copy of it now. Once you’ve got the shape, move it over the top of the metal texture, and center them with each other.

Select both objects, and then select Object > Clipping Mask > Make (Command + 7).

And finally, center the shape horizontally and vertically in the artboard, and group all of the shapes together that compose the gear. And we’re finished with that!

Step 14

Now it’s time to create the box that will contain our gears (and form the boundaries and shape of our icon). Start be creating a rectangle that covers about 2/3 of the gear. Fill it with a light to medium gray gradient.

Next, select Effect > Stylize > Round Corners…, enter 20px for the radius, and click OK.

Then, select Object > Expand Appearance to convert the rounded corners into a path.

Step 15

Continue by drawing a smaller rectangle above the first. This will designate our window through which we’ll see the gears. Center it with the first rectangle.

Select both rectangles…

…and click the Minus Front button in the Pathfinder palette to cut the smaller rectangle out of the larger one.

Step 16

We’ll now repeat the process again that we did earlier with the gear, to create the inner bevel around the window. Start by drawing a rectangle a bit larger than the window opening.

Change it’s stroke to something fairly thick, enough to overlap the window edge (I used 20px).

Send it to the back (Command + Left Bracket key).

Select Object > Path > Outline Stroke to trace out the path into a shape.

And fill it with a black to white gradient (top to bottom).

Step 17

We’ll repeat the same process one last time to create the bevel around the outer edge. Draw the slightly smaller rectangle and change it to a thick stroke.

But this time before we outline it, we’ll round the corners to match the box.

Now outline the stroke and send it to the back.

And finally, fill it with a gray to white gradient (bottom to top this time).

Step 18

Now we need to add the perforated metal backing to the box. Start by drawing a rectangle slightly larger than the window opening, and fill it with a dark gray.

To add the perforated holes, draw two small circles, one smaller than the other, and place them in the top-left corner of the rectangle. Fill the smaller one in front with black and the larger one behind with a dark gray to white gradient (top to bottom).

Group the two circles together and select Object > Transform > Move… Enter 40px for horizontal and 0px for vertical, and click Copy.

Now with the second hole still selected, press Command + D to repeat the transformation. Keep repeating until you have a row about the same width as the rectangle. Then, group the row of holes together.

Step 19

Select the row and go to Object > Transform > Move… again. This time, enter 0px for horizontal and -40px for vertical and click Copy.

Now press Command + D again to repeat the transformation. Once you’ve filled the rectangle, select all of the rows, and group them into a single object.

Step 20

Select the grouped holes and again, and select Object > Transform > Move… and this time enter 20px for horizontal and -20px for vertical.

Click Copy, and then select all of the holes and group them one more time.

And finally, select the grouped holes and the rectangle and center them relative to each other.

Step 21

To complete the box, group the holes and rectangle and move them behind the frame we created earlier.

Select the inner bevel shape of the frame, and add a drop shadow to it.

Then, add a drop shadow to the outer bevel shape as well.

Step 22

Now that we’ve got the main components done, all that’s left to do is assemble them!

Start by making two copies of the gear (make sure to group all of the shapes first) and place them in the bottom corners of the main one.

Add a drop shadow to each of the gears, and then group all three. You can also rearrange them however you’d like (I move the two front gears a bit farther up, so they’ll be more visible through the window).

Now, draw a rectangle the same size as the window opening (or it can be a bit larger, just not smaller), and place it over the gears. You can position it however you’d like, as whatever is covered by the rectangle is all that will show through in the final image.

Once you’ve positioned it how you want, select both the gear group and the rectangle, and then select Object > Clipping Mask > Make.

Step 23

Drag the gears into the box and center the box and gears with each other. Then, send the gears to the back and bring them forward until they’re directly above the perforated backing, but behind the frame.

And finally, the last step is to add the reflection to simulate a glass window over the opening. Create a rectangle the width of the opening and about 1/2 the height.

Then draw a large ellipse above the rectangle. We’re only really interested in the arc it creates over the bottom of the rectangle, so make sure it completely covers the rest.

Select both the ellipse and the rectangle, and then select Intersect in the Pathfinder palette. Then delete the excess shapes.

Step 24

Now, add a transparent gradient to the shape (from top to bottom, with the top being more opaque and the bottom being more transparent). This can be done in Illustrator CS4 with the transparent gradients, or in earlier versions with an opacity mask.

For Illustrator CS4

In the gradient palette, add two white color stops, one at each end. Set mode to Linear and the angle to -90 degrees. Then, set the transparency of the left stop to 100% and the right stop to 50%.

Then, set the overall transparency of the shape to 50% (in the Transparency palette). In addition, send the shape backwards until it is above the gears and backing, but behind the outer frame (so that the shadow is visible over it).

For Illustrator CS3 and Earlier

Fill the object with solid white, and then copy it (Command +C) and paste the copy in front (Command + F).

Add a linear gradient to it, with a -90 degree angle. Drag a color stop to each end, and make the left one white and the right one 50% gray.

Then, select both reflection shapes and click the small menu icon in the top right corner of the Transparency palette. In the menu that pops up, select Make Opacity Mask.

And finally, lower the overall transparency of the shape to 60%. In addition, send the shape backwards until it is above the gears and backing, but behind the outer frame (so that the shadow is visible over it).

Conclusion

We’re finished! Hopefully this tutorial has demonstrated some of the power of simple shapes, transformations, and tools like the Pathfinder, and how they can be used to produce quality illustrations and graphics. Good luck with your own work!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Sites Used in this comic

• Owltastic - by Meagan Fisher
• 37signals

Other posts about contrast:

• Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
• Contrast and Meaning
• 10 colour contrast checking tools to improve the accessibility of your design
• Colour Contrast Check
• How C.R.A.P is Your Site Design?

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

This Vector Plus Tutorial is Filled with Creative Instruction and Tips

In this intermediate tutorial, I show you how to create a children’s coloring book cover from sketch to finished vector art. We’ll use gradients, custom brushes, and typography. You can easily put together a book cover and use the techniques learned on other projects.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 3 hours

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 Fun and Professional Tutorial

Plus members can Log in and Download! Otherwise, Join Now! Below are some sample images, which show some of the development of this text effect illustration tutorial.

Vector Plus Membership

As 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!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

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.

Step 1

Normally you would start with a sketch, then make the line-art, add the base colors and finally add some shading and your illustration is finished. For this tutorial that’s only the state where we just begin. As you can see in the image below, I already made the line-art and colors for my parrot illustration. Here is the reference photo I used.

I only used the Pen Tool for this and made sure I painted everything on a different layer. This is handy if you want to select and edit specific parts. You can lock the layers you don’t want to edit, which makes it easier to select the things you do want to edit.

I made the base colors in 1 layer, shading for each body part on different layers and placed line-art on different layers. For example, I wanted the claws to have a different line thickness than the rest of the body so I made them on a different layer.

Step 2

When drawing animals I always think eyes are very important. Animals have beautiful eyes and it’s one of the first things viewers look at. The first opportunity to use a brush is on the white spots around the eye.

Select the Brush Tool (B) and open the Brush Window (Window > Brushes). Select the first standard Illustrator brush (2 pt Oval) and then paint some short lines around the eye, the result will be more like ovals than stripes because you are painting with an oval brush.

If you want the brush to be bigger or smaller you can double-click on the brush in the Brush Window and change the diameter. If you have a pressure sensitive tablet you can also change Fixed to Pressure and set an amount of points for Variation. In the image below you will get a 1 pt brush if you press softly and a 2 pt brush if you press harder when using a tablet.

Step 3

You can experiment with different standard Illustrator brushes and the brush options like angle, roundness and diameter. If you still can’t get the exact shape like you have in mind, you can also select the shape you made and go to Object > Expand Appearance. This will break the brush into a normal vector shape and you can edit the anchor points like you are used to with normal vector shapes.

Personally I like the randomness of brushes and don’t use this very often. Most of the times I remove a brush stroke if I don’t like it (Command + Z) and try again and again.

Step 4

Now Let’s work on the branch the parrot is sitting on. In the first image the only hint that it’s wood is the color, but it looks more like brown plastic. To solve this we will add some wood texture.

In the Brush Window, click on the arrow with three horizontal lines next to it, just under the cross (see image below). Go to Open Brush Library and you will see some categories containing brush libraries. Illustrator has a pretty nice collection of brushes, be sure to check them out! For this step, we will use a charcaol brush, so go to: Open Brush Library > Artistic > Artistic_ChalkCharcaolPencil.

Step 5

I made the textures with the brush “Charcaol pencil.” For the first step, I drew some waves with the Charcaol pencil and stroke set to 0.5. In the second step, I used the same brush, but with a darker fill color and stroke set to 1.0. This time I also drew some circles instead of only waves.

Step 6

Now you know how to use the standard Illustrator brushes. We’re going to make our own brushes! We’ll make a brush for the feathers of the parrot. First you have to draw one feather using the Pen Tool. It’s handy if you draw it horizontal or vertical (instead of diagonal).

Select your shape and click on the arrow button in the top-right corner of the Brush Window, then go to New Brush. In the new window that will pop up choose New Art Brush. Don’t delete the original shape you made with the Pen Tool, as you will need it for making more brushes.

Step 7

Now you can set the options for your new brush. The Direction is very important. Here you can see why it’s handy to draw your shape horizontal or vertical.

If you use a diagonal shape, it will not follow the line you make. In this window you can also change the size, but it’s handy to get the size right before you make the brush. At the top of the window you can also give your brush a name, which is handy if you want to use your brush more often.

Step 8

Your new brush will appear in the Brush Window. Try it out by drawing some random lines next to your real drawing, just to see how your brush reacts. Draw straight lines, curved lines, go from right to left, from left to right, vertical, etc.

Maybe you want to change the direction or the size, you can do that by double-clicking on your brush in the Brush Window. Once you’re satisfied with your brush, you can start painting your first feathers.

Step 9

To achieve some depth I will paint multiple layers of feathers, each with a different color. The feathers on top will have brighter colors because they get more light. To make the same brush in a different color simply select the single feather you made with the Pen Tool, change the color and make a new brush like in Steps 6 and 7. I also set the size of the top feathers to 60%, which makes them smaller.

Step 10

For the feathers on his belly and wings I made a second brush because the feathers are smaller and thinner in those areas. You can see the shape of the brush in the image below with the result on his belly next to it.

Step 11

If you want to use as many brush strokes as I did in this illustration, I highly recommend a drawing tablet. It’s possible with a mouse, but it just goes quicker with a tablet.

It also isn’t necessary to cover your whole drawing with feathers or texture, as this effect also looks great if you only use it on certain areas where you want some extra detail. After I’m done with all the brush strokes (this took me a lot of hours), my parrot looks like the image below.

Step 12

There are two more tricks before this image is finished. First I made a thick outline around the parrot. Unlock all layers that contain line-art and lock all other layers.

Select all line-art and copy it (Command + C). Make a new layer under all other layers and paste the line-art in the exact same place, you can do this by pressing Command + F instead of Command + V. With Command + V it will past in the middle of the screen. Using Command + F will paste it in the same place you copied it from, which is what we want.

Now set the stroke size higher than the other line-art. I used 5 pt while my normal line-art is 2 pt. This will make a thick outline around your subject because the lines in the middle of the drawing are hidden by the colors. You can see the result in the image below.

Step 13

Now the illustration only needs a background. I made a background with the Mesh Tool. First draw a normal rectangle with the Rectangle Tool (M) and make it the right size. Then select the Mesh Tool (U) in the toolbar and click somewhere in your rectangle.

A white anchor point will appear every time you click. Each anchor point can hold a different color and the lines between it will make a gradient that changes the color of one point to the color of another point. Make a few points, then select a point with the Direct Selection Tool (A) and change the color. Do this with a few points and then move the points and lines around. Simply play around until you get a nice result.

I was going for the look of a soft focus photo of a forest.

Conclusion

The final image is below. Have fun applying these techniques in your work.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.