The texture added is similar to the name of the effect (scribbles), but there is a great deal of variance you can control, and you can add a random feel as well. Let’s take a close look at how to use this effect and how you can get creative with it!

Final Image Preview

Below is one of the designs from the final set of Photoshop Brushes we’ll be working towards in this tutorial, after explaining how the Scribble Effect works in Illustrator. Want access to the full Vector Source files (and ABR brushes file), as well as downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Program: Adobe Photoshop CS4
• Difficulty: Beginner - Intermediate
• Estimated Completion Time: 1 hour

Introduction

In this tutorial we’ll take a close look at every option within the Scribble Effect menu. Then I’ll show you how to apply it to a rectangular design and a simple flower design. I’ll even walk you through how to create a set of Photoshop brushes which use this effect.

Since the Scribble Effect can produce interesting textures, which can appear hand-made, it serves as an excellent tool to create an interesting stamp brush for Photoshop. I created a set of Scribble brushes using this method recently for Psd Plus, and you can see the results in this release Floral Scribble Photoshop Brushes - Psd Plus Pack.

Keep in mind there is a whole lot more you could potentially create using this effect. You could use the Scribble Effect to create hatch like patterns to shade your character designs, childlike scribbles, and more. The video tutorial Check out the Scribble effect in Illustrator from the Creative Suite Podcast showcases this tool and gives a few tips on possible uses such as Flash animations, which really broadens the scope of creative possibilities. This is one of those tools that once you open it up makes you want to play with it. The results even feel playful, so experiment away!

Illustrator CS4 comes with a set of Scribble Effects that you can open up and use, or just analyze. Notice that many of them have more than one scribble effect applied (as shown in the Appearance panel below). You can see there are two fills both with Scribble Effects applied here. You can open up these by going to Windows > Graphic Style Libraries > Scribble Effects.

Background

Before looking at Scribble Effects it’s a good idea to have an understanding of what Effects are in Illustrator, and the advantages they offer over using Filters. You should also have a basic understanding of what Appearances are and the options that the Appearance Palette offers.

There is an article called Working Most Effectively with Effects over at the Layers Magazine site. It even uses the Scribble Effect for many of the examples, and is a great article to read to understand effects before continuing on with this tutorial. Also, while limited, it would be a good idea to read what Illustrator help has to say on Creating a sketch using the Scribble effect. Now let’s get started!

Section 1 - Exploring the Scribble Effect Options

In this section of the tutorial, we’ll explore each option that the Scribble Effect offers and give visual examples that will demonstrate how to use these and make all the settings clear. After going through this quickly you’ll understand how to use this tool fully - the settings will no longer be a mystery.

Step 1 - Global Installed Settings

First up, there are quite a few options under the Settings tab within Scribble Options. These are global settings, which are basically pre-made Scribble Settings. Getting started by taking a look at these settings is excellent. It shows a good diversity of options available and interesting scribble results. Take a look at all of them, note the changes of each option, various characteristics of each scribble, and be sure to check Preview so you can view them without needing to apply. Below are a few examples.

Step 2 - Angle

The angle option is simple to understand. It controls the angle of the scribble lines. Also, notice that whenever making a change to this, or the following options, that the Settings drop-down list changes from Default to Custom, which indicates you are creating a unique Scribble Effect at that point. Notice the change the angle has to the effect, as demonstrated in the examples below.

Step 3 - Path Overlap and Variation

Moving the Path Overlap slider towards the Inside moves the area the scribble effect is applied to further inside the shape (see first image below). Whereas, moving the slider toward the outside will apply the scribble lines past the shapes outer dimensions (see second image below). Path Overlap controls the amount the scribble lines stay within or extend beyond the path boundaries.

Applying the effect to the center keeps the effect applied to the outer edge of the shape, however increasing the variation means that the path will vary based on the amount you turn it up. Variation controls the lengths of the difference in scribble line lengths relative to each other. In the last example below the Variation is increased enough that it goes both inside and outside the shapes edge.

Step 4 - Line Options: Stroke Width

The stroke width functions in the way you would expect. It works in the same way as the stroke panel; it changes the scribble line width. Increasing or decreasing the size of the stroke will apply the change to the single long line that makes up the scribble effect. A few examples are shown below.

Step 5 - Curviness and Variation

Curviness manipulates the amount the scribble lines curve before they reverse direction. The first example below shows the default curviness, which is set relatively low, and the second shows the curviness turned up all the way.

The Curviness Variation controls how different the scribble line curves are relative to each other. Notice in the first image below how the lines look relatively the same, as Variation is set to 1 there; it looks clean. In the last example below variation is turned up all the way, and notice how different all the lines look compared to each other; it looks a bit messy.

Step 6 - Spacing and Variation

Spacing controls the amount of space between scribble line folds. Notice how extreme the spacing changes are by just increasing the Spacing slider from 5px to 24 px in the example below.

The Spacing Variation controls how different the amount of space is between scribble line folds. Notice how different the first and last images are in the example below. Turning the Variation up creates areas of differing spacing between each line - the spacing is no longer uniform.

Now Put it All Together

Putting it all together is all about experimentation. Now depending on the project, you may have a variety of outcomes you’d like to create. Below are a couple examples using multiple settings in combination, which also demonstrate how setting can work together and effect each other. In the first example below the spacing is decreased dramatically, which necessitates decreasing the stroke width as well, otherwise it would end up as a solid mass. The second example is just a random experiment.

You may also want to save some of these experiments as Graphic Styles, so you can use them again later. Once you’ve created a Scribble Effect that you like, drag it into the Graphic Styles palette, then click the arrow button in the palette’s top-right corner and choose Save Graphic Style Library, which will add this as a new collection.

Section 2 - Applying Scribble Effects and Making Photoshop Brushes

In this section, we’ll learn how to apply the Scribble Effects to a simple diagonal pattern made up of multiple rectangles of varying sizes. Then we’ll create a small sample set of Photoshop brushes.

Step 1 - Create a New Document

Let’s create a new Illustrator document (I’m using Illustrator CS4) at the size you want your maximum brush size to be at, which in this case will be 2500px by 2500px. Now create a basic rectangle filled with black and no stroke at a size of your preference, then create a handful of other randomly sized rectangles as well.

Step 2 - Rotating, Copying, and Arranging

Rotate these shapes by selecting the Rotate Tool (R), then hold down Shift to constrain and rotate 45 degrees as shown. Now copy the shapes and paste into a layer named “Rectangle_1.” Continue to copy, paste, and arrange the shapes until you create a composition you like. You can also change the size of the rectangles or add more as needed. Keep in mind, you can always change this later on.

Step 3 - Experimenting with Scribble Effects

Now experiment with various scribble effects until you make one that you feel would be a good Photoshop brush. We’re working with black in this tutorial, but Photoshop brushes can interpret a full grayscale, so keep that in mind with your own designs.

Below is a scribble effect I’m happy with to use for a set of brushes. Notice how the patterns interact with each other as they overlap, which is cool and you can experiment with that - even playing directionality of lines into each other. You could create moire effects this way for example. Here though we’re keeping everything going straight at a 45 degree angle, as indicated in the screenshot of the Scribble settings.

Keep in mind, this is a live effect so we can manipulate the Scribble Effect at anytime. In order to manipulate this effect do so through the Appearance palette, as shown below. Don’t go to Effect > Stylize > Scribble, as that will apply a second instance of a Scribble Effect to your shapes.

Step 4 - Create More Designs

Now create quite a few more designs of varying rectangle shapes. A good set of Photoshop brushes should have 15 or more designs that work together as a set visual, but are each distinct as well. For the purposes of this tutorial though, I’m just going to add a couple more, which are shown below. So, we’ll be working with a set of three for this tutorial. I’ve placed these designs on new layers named “rectangles_2″ and “rectangle_3″ to keep things organized.

Step 4 - Turn These Designs into Photoshop Brushes

Now copy the “Rectangles_1″ design, which has the live Scribble Effect applied to it. Fire up Photoshop (I’m using Photoshop CS4). Open a new Photoshop file (Command + N). Photoshop should automatically detect the size of the copied design, which should be a little smaller than 2500px by 2500px for this design, as the rectangles don’t reach all the way to the layouts edges. Be sure to Name the file appropriately, in this case it’s named “rectangle_1.”

With this new Photoshop document open paste the “Rectangles_1″ scribble design. A popup dialogue comes up. It’s fine to choose Pixels in this case, then hit enter to apply the paste.

Now select the Brush Tool (B). Go up to the Brush Tools Settings at the top-left of Photoshop’s interface. Click the drop-down arrow to open the Brush Preset Picker. Within the Picker there is a small arrow in the top-right corner. Click that and choose Preset Manager.

Within the Preset Manager brush area hit Command + A to select all the brushes, then click Delete. This will remove the brushes from the Brush Preset Picker, as shown in the last image below, but doesn’t delete the ABR files of these brushes, as long as you have those files saved.

Now got to Edit > Define Brush Preset and save the brush as “Rectangle_1.” Now we have our first brush created.

Go ahead and follow the same copy, paste, and define brush preset workflow to create the rest of your brushes. In this case, we’re creating brushes: “Rectangle_2″ and “Rectangle_3″ as shown.

Step 5 - Export Your Final Photoshop Brush Set

Now click and open the Brush Preset Picker, then click the arrow in the top-right corner, and click Save Brushes as shown. Save the brushes with the name “rectangular_angled_brushes,” which creates the ABR file. This file can be saved, given to friends, or sold, and loaded into any other Photoshop of the same version (CS4 in this case).

Information on Design Scalability

Keep in mind that when creating these types of brushes, they don’t scale well, even though they are based on vector designs. They are used more like stamps in Photoshop. So if you design huge 2500px by 2500px brushes, then they are great for large-scale work, or for applying large textures, or big backgrounds.

If you want to create these brushes for smaller scale work, or smaller scale use, then you should create them in Illustrator at the scale you plan to use them at. If you need to use them at 600px by 600px size for example, then it’s best to design at that size first in Illustrator.

You may think that you could create them big, export the EPS files and then scale to any size, but it doesn’t work that way. This is because the brushes are made of lines, and when those lines get smaller they blend together and it drastically changes the character of the design, even in vector format, let alone as pixel brushes. The best solution is to plan the design at the size you will be exporting the brushes to.

Section 3 - Quick How to Create Floral Scribble Brushes

In this section, we’ll take a quick look at the process I used to make Floral Scribble Photoshop Brushes - Psd Plus Pack. The actual brush creation is the same process, so we’ll just review the vector techniques and Scribble Effects applied.

Step 1 - Create an Oval and Spin It

First of all create an oval that is about half the size of your document size. Use the Direct Selection tool to manipulate the shape of the oval to look more like a petal.

Now with the shape selected, grab the Rotate Tool (R), hold down Alt and click below the petal shape, which will open up the Rotate settings dialogue box.

Insert a degree to spin the petal. It’s good to pick something divisible by 360, which is a full circle. Use 45 degrees, which will give use 8 petals total once competed. Now click OK. Go ahead and hit Command + D six more times to complete the floral shape creation. Select All (Command + A), then copy and paste, which will center the shape on the canvas, as long as you have your canvas centered. Go ahead and hold down Shift (to constrain the scale) while you have this shape selected, and scale the size to your preference.

Step 2 - Give the Flower an Organic Feel

Use the Direct Selection Tool to manipulate the points and handles of each flower. You may also want to scale and move them around a bit using the Selection Tool. The goal here is to give each petal more of an organic feel and to finalize the floral shape. You can see I made quite a few changes to the final flower design.

Step 3 - Apply the Scribble Effect

Go ahead and apply the Scribble Effect to the flower design using the settings shown below, or choose your own settings. The final Scribble Flower is shown below.

Now you can apply the same process to create more floral patterns, or use other floral designs as the base to apply the Scribble Effect to. Once you have a good size collection, go ahead and apply the same steps as in Section 2 to make a set of brushes.

Conclusion

Armed with knowledge of how Scribble Effects work in Illustrator, jump in and make your own effects. Have fun applying these effects to your vector creations. It’s an interesting tool to play with and a quick way to add texture. Also, for your Photoshop work, don’t be shy to create your own brushes. As demonstrated, the process is really simple.

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

Open up a new document and create an ellipse with the ellipse Tool (L). Fill it with a dark gray linear gradient. Then duplicate the ellipse and scale it down to about 2/3 of the other one.

Step 2

Select both and open up the Align Palette. Then while still selected, click once on the bigger one. This will set the object where the other shape will be aligned at. Then click the horizontal and vertical center button.

Step 3

Make a copy of the two shapes. We need the shapes later again. Then select both again and click the Divide option in the Pathfinder Palette. Select the Direct Selection Tool (A) and delete the inner shape.

Step 4

Go back to the copy we made and select the ellipse and apply an Outer Glow to it.

Step 5

Make two more duplicates of it (you can remove the outer glow via the Appearance Palette) and overlap them slightly. Then apply again the Divide option in the Pathfinder Palette. Delete the pieces until you have one small sickle shape left.

Step 6

Fill the sickle shape with a lighter radial gradient. This shape will be the highlight around the hat rim.

Step 7

Take the three shapes we created and place them on top of each other just like you see in the image below. The hat rim is ready. The divided shape we will need later on for an Opacity Mask.

Step 8

Create a rectangle the same width as the small dark center of the hat rim. Then make a copy of the small dark ellipse from the previous steps and align it on the bottom of the rectangle.

Step 9

Just in case, you can verify the width and make them exactly the same by selecting the shape and opening the Transform Palette.

Step 10

Place the ellipse flush to the rectangle. Then click the Unite option in the Pathfinder Palette.

Step 11

This will be the hat bottom.

Step 12

Select the outer left path point of the shape with the Direct Selection Tool (A) and move it towards the left several points. We want to widen the bottom of the shape. Repeat this with the other side. You might have to remove some extra points.

Step 13

Fill the shape with a dark gray to black radial gradient and add an Outer Glow to it.

Step 14

Create a band like shape with the Pen Tool (P) and fill it with a black to pink radial gradient. Place it on top of the previous shape.

Step 15

Create another rectangle with a rounded bottom on the long side of the shape. Fill it with a silver linear gradient, then set the Layer Mode to Overlay and Opacity to 30%. Fill the smaller ellipse with black.

Step 16

Create a small shape for the bottom of the hat. You can either create it with the Path Tool (P) or create it out of the hat shape, just like we created the sickle shape for the hat rim highlight in Step 5. Fill it with black and place it on top of the hat bottom.

Step 17

Create two ellipse shapes. One bigger than the other one. Place the bigger one behind the smaller one, fill it with black, and set the Opacity to 0.

Step 18

Select both and apply a Blend with Specified Steps of 100. This will be the hat shadow.

Step 19

Place the shadow shape underneath the hat bottom.

Step 20

Place the hat rim shapes on top of everything.

Step 21

Create a bunny ear like shape, fill it with pink, and add a white stroke of 5pt.

Step 22

Create a smaller shape inside and fill it with a darker pink. Leave the stroke empty.

Step 23

Group the shapes and duplicate it to the right. Then scale and rotate it.

Step 24

Duplicate these ears and expand the shapes. Click Command + C once. Then re-select the original ear shapes and apply an Opacity Mask to them. Once you activate the Opacity Mask by clicking on the black square in the Transparency Palette, simply copy the shape onto it by hitting Command + V. Move it on top of the ears, then apply a black to white gradient to hide the bottom of the ears.

Step 25

Click on the ears on the square to leave the Opacity Mask. We need to go and make a copy of the shape we created in Step 3. Cut it in half and repeat the copy command and go back into the Opacity Mask. Paste the shape. Align it so it covers the ears and hides them. To do so, fill the shape with black.

Step 26

In case the shape doesn’t cover the full ears on the bottom, drag the mid-bottom point downwards.

Step 27

Leave the Opacity Mask and place the ears on top of the hat. Now they look like they come out of the hat.

Step 28

Let’s create some eyes. Create three circles, each one bigger then the other. Fill the smallest with white, the next with black and the biggest with a white to black gradient. Then place the circles on top of each other. The smallest circle is the pupil highlight.

Step 29

Group the shapes and duplicate them. Then place them next to each other and apply an Outer Glow to them.

Step 30

Place them on top of the hat rim.

Step 31

Create a background with a dark gray to black radial gradient. Then create a small circle, fill it with yellow and apply a Feather effect of 35pt to it.

Step 32

Repeat Step 31 and place several other circles with different colors and the Feather effect behind the hat. Then select the circles and change the Opacity.

Conclusion

This is it! I added some funky star light shapes, and abracadabra - the magic hat is ready!

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

1. Hello Julian, tell us a bit about yourself, where you’re from and how you got started in this field? How long have you been designing/illustrating?

Hi there! I am a Graphic Designer from Buenos Aires, Argentina. I’ve been living in this beautiful city since birth and at the age of 10 I already knew that I wanted to be part of the artistic universe. So I kind of started very young constantly drawing strange creatures (I was a bit fatty so girls where not my field at that point) and ended up studying Graphic Design at the age of 18. Now I am 23, so I guess I’ve been designing for 5 years.

2. What are your design and artistic influences? Are there specific artists, movements, books, or online resources that have been pivotal in your development and daily work?

I try to get influences from everywhere, in that way I am able to have a richer mind at the moment of creation. So my world of influential artists is composed of artists such as Picasso, Modigliani, Giacometti, Ensor or movie makers such as Buñuel, Miyasaki, Kubrick, Lang and of course the amazing work done by Pixar Studios. I’ve been following the project called Pictoplasma and I am also constantly checking new characters that appear on the Mojizu website.

3. Could you tell us about the Typefaces project? What is it? How did it get started? How has it evolved and where do you see it going? What is it that draws you to illustrating letterforms through characters?

It all started with a simple and concrete idea. The word “Typefaces” started to flip around my head and suddenly I realized that the word itself locked up a very visible secret. Typefaces, or faces with type, would be my new project to develop. Since that moment in time, I’ve been creating a huge amount of characters based on different typography.

The project has evolved a lot due to the fact that people are really attracted to the fact that every single creation is done out of a single set of letterforms. This procedure is what makes my interest in typefaces never-ending. They are not just funky characters, they are more interesting because they are made from type. The simplicity of the concept behind Typefaces is what draws me to keep on illustrating these letter-formed characters. I really dig the thought that says simplicity brings up the best ideas.

4. What’s it like collaborating with various artists on the Tyepfaces project? Could you go over some of the flow with working with another vector illustrator on a project like this, and give an example of an interesting collaboration you’ve done for the project?

It’s amazing to see collaborations done by other artists due to the fact that the results look always very different and distant to my work with letterforms. I think this is great because it is always opening new dimensions to the work that can come out of typography. And also it adds another variable to the mix, that is always a rich and nice thing to see.

Sometimes it’s a difficult task to make coexist two Typefaces done by two different artists. So I’ve decided not to participate in the collab work much and let the artists take their shot in the interpretation and outcome of the project. In some cases, I did participated in the collab, and below is a nice result of one of them.

5. Please tell us about your creative process for your work. Do you sketch first, or how do you narrow down your ideas? What tools or software do you use, and which of these tools is your favorite?

I do not sketch at all. The fun of typefaces is that the process is like a Rorschach test, you start to see forms when mixing up different letters, or signs, or numbers, or even sections of them. I’ll put it this way, with Adobe Illustrator I give birth to the character and with Adobe Photoshop I work in his make-up. Also I get some help from my dear friend the Wacom for the last details in Photoshop.

6. How is your freelancing work going and teaching? Could you tell us a bit about the mix of professional work you do? Also, where do you see yourself in the next few years?

My freelancing work is mainly dedicated to a Fashion brand here in Buenos Aires and some personal project called Pura Porquería that is kind of an artistic development (you can check out some news of it in my flickr stream). And teaching is stunning for me, I keep on learning from my students every single week and that keeps me moving and developing new activities for them to exercise their creativity.

I would love to get more and more in touch with my personal illustrations on Flickr and keep bringing out my artistic skills. I’ve started drawing about 2 years ago and I’m really happy and amazed with my progress, so I’ll keep them coming

7. Do you have any favorite typefaces? And does the font itself contribute to the process of coming up with the character design? Or does the character design come first and then the font and letters are chosen?

Don’t have a favorite one, I really think that every single Typefaces reflects a side of my personality.
The font itself is essential to the final outcome of my work. The interesting thing about Typefaces is that different type gives different aspects to the characters, for example the calligraphic or the italic fonts are very difficult to work with due to the fact that they have little symmetry and this slows down the process of creation.

You can see a making of a typefaces on youtube.

8. Julian, thanks for the interview. Any final thoughts?

I’ve enjoyed this interview and working with the Vectortuts+ editor Sean! Cheers and thanks you for reading

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 tutorial I show how I create a character I’ve named the “Cactus King.” My normal approach to designing is to create a sketch on paper first, scan and then build in digital form. However for this character project I wanted to explore creating in vector right from the get go. This tutorial covers a complete and comprehensive workflow. You’ll learn interesting techniques, such as creating dimensional images using shapes and layers, usage of gradients and opacities to shade the character, and more.

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.

]]> http://vector.tutsplus.com/articles/news/how-to-make-the-vector-character-cactus-king-vector-plus-tutorial/feed/ http://vector.tutsplus.com/articles/news/how-to-make-the-vector-character-cactus-king-vector-plus-tutorial/ http://feedproxy.google.com/~r/vectortuts/~3/4wWGYy4nwQQ/ http://vector.tutsplus.com/articles/web-roundups/best-of-the-web-%e2%80%93-june-2009/#comments Tue, 30 Jun 2009 13:12:46 +0000 Grant Friedman http://vector.tutsplus.com/?p=2810 ]]> Each month we round up some of the best vector content on the web and post it here for everyone to enjoy. This month we had a lot of fun identifying the best vector tutorials, freebies, and articles. Please take a moment and review some of the best vector content from around the web for the month of June.

Tutorial Wrap

• 

  Create a Realistic Candy Bar in Illustrator

  Photo-realism in Illustrator can be a difficult goal to achieve. This tutorial from Web Designer Depot will guide you through the process of creating a photo-realistic candy bar in Illustrator.

  Visit Tutorial

• 

  Creating an Amazing Palm Pre Icon in Fireworks

  If you follow technology, you my have heard of the Palm Pre. The Palm Pre is an awesome new gadget that hopes to compete with the iPhone. This tutorial from Abduzeedo demonstrates how to mockup the Palm Pre in Adobe Fireworks.

  Visit Tutorial

• 

  Create a Cute Furry Vector Monster in Illustrator

  Character creation can be one of the most satisfying uses of Adobe Illustrator. This tutorial from Spoon Graphics guides us through the process of creating a cute, furry monster in Illustrator.

  Visit Tutorial

• 

  Turn Any Font into a Sketch Font

  There are a lot of sketchy fonts out there. Some of those fonts are free, others are not. Save yourself the trouble of tracking down your favorite sketch font and just create one out of your favorite font for free. This tutorial from Vectips demonstrates how to turn any font into a sketch font.

  Visit Tutorial

• 

  Perfect Silhouette with Live Trace

  Drawing a silhouette with Adobe Illustrator’s pen tool can be a long and painful process. This tutorial from Vector Diary shows how to create vector silhouettes with ease using Illustrator’s Live Trace tool.

  Visit Tutorial

• 

  A Comprehensive Guide to Illustrator’s Live Trace Tool and More

  Speaking of Illustrator’s Live Trace tool. Check out this article by Kevin Kirsche on my website that explains the functions of Illustrator’s Live Trace tool in detail. This tutorial also compares the features of Illustrator’s Live Trace to some of the other tracing tools available on the Internet.

  Visit Tutorial

(FREE!) Download Picks

• 

  Stylized Clouds 1

  Seamless patterns are excellent tools to have in your arsenal. They are great to have to add a bit of interest to an otherwise boring background. This beautifully unique set of stylized vector clouds from Pattern Head will make a wonderful addition to your graphic design arsenal.

  Visit Download Site

• 

  Floral Curves

  Everyone loves floral curves right? This set of vector floral curves from Vector Diary is fantastic! Use this set of floral curves to spice up your backgrounds, add interest to part of your design, or to create a cool background.

  Visit Download Site

• 

  15 Paint Brushstroke Illustrator Brushes

  Ever wondered how to create photo realistic brush strokes in Adobe Illustrator? It’s actually not that difficult. This set of 15 paintbrush strokes for Adobe Illustrator is fantastic and a lot of fun to play with. Download it and give it a try.

  Visit Download Site

• 

  Free Cuties

  Mascots and cartoon characters can make excellent additions to your web designs. This uber cute freebie from Pehaa includes three characters that can be used in your children’s illustrations or designs. Go cute and download this fantastic set of children’s characters.

  Visit Download Site

Vector Inspiration

• 

  100 Inspiring Character Designs

  Need some inspiration for your latest character design project? Check out this fantastic round up of character designs from Design Blurb. With over 100 inspiring designs you should have no problem coming up with a unique idea of your own!

  Visit Article

• 

  Vector Backgrounds in Web Design: Examples and Best Practices

  You may have noticed that a lot of websites are now using intricate vector backgrounds to make their designs a bit more interesting. This article from Web Air shows examples and describes some best practices for using vector backgrounds in your web designs.

  Visit Article

• 

  15 Cute Vector Scenes

  There is no shortage of cute vector art on the Internet. This round up from Graphic Mania shows 15 examples of some of the cutest vector scenes out there. Take a look at this excellent round up if you’re in the market for some inspiration for your next cute project.

  Visit Article

• 

  Vector Inspiration

  Illustrator, artist, and frequent Vectortuts+ contributor Ryan Putnam from Vectips always does a great job of identifying stunning vector artwork on his blog. Check out his round up from earlier this month for some fantastic vector inspiration.

  Visit Article

• 

  Creative Process of Maxime’s Quoilin Final Year Project

  While not entirely vector, this article from Abduzeedo details the process behind the creation of a fictional brand of bottled (or canned) water by graphic designer Maxime Quoilin.

  Visit Article

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

]]> http://vector.tutsplus.com/articles/web-roundups/best-of-the-web-%e2%80%93-june-2009/feed/ http://vector.tutsplus.com/articles/web-roundups/best-of-the-web-%e2%80%93-june-2009/ http://feedproxy.google.com/~r/vectortuts/~3/M0xNDE_cADg/ http://vector.tutsplus.com/freebies/vectors/cute-vector-penguin-freebie/#comments Mon, 29 Jun 2009 21:57:28 +0000 Jim Miller http://vector.tutsplus.com/?p=2847 ]]> File Type: EPS (compatible with AI8)
License: Creative Commons License

This Penguin was used for a plumbing website to bring a soft,cold and cuddly image for the brand.

]]> http://vector.tutsplus.com/freebies/vectors/cute-vector-penguin-freebie/feed/ http://vector.tutsplus.com/freebies/vectors/cute-vector-penguin-freebie/ http://feedproxy.google.com/~r/vectortuts/~3/5sNGdVGuEZE/ http://vector.tutsplus.com/tutorials/illustration/how-to-draw-a-realistic-vector-light-bulb-from-scratch/#comments Mon, 29 Jun 2009 13:49:52 +0000 Kamen http://vector.tutsplus.com/?p=2186 ]]> In this tutorial, I’m going to show you how I build a light bulb from scratch in Illustrator. We’ll use numerous shapes and effects to create this illustration. I’ll take you through each step in creating this bulb. Let’s get started!

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.

Introduction

First, there are a lot of different bulbs out there. A client recently requested a traditional one and instead of using reference images, I took a real light bulb and took some time watching how the glass parts bend the light and how highlights and shadows are formed. So, get a reference image or better yet, grab a real bulb and let’s start drawing. First, you have to get a grip of the elements that make the bulb, because we’re going to recreate all of them.

Step 1

Let’s begin by drawing the glass body first. Create a new document of your choice. I renamed my Layer 1 to “Glass Body.” I suggest you name it the same, so it will be easy to follow the rest of the steps and this will help you with the final alignment of all the layers later.

Drag a vertical guide onto the artboard. Create a perfect circle (while holding Shift), and center it to the guide. Select both the right and bottom anchor point and delete them, thus leaving only the top-left part of the circle present.

Step 2

Grab your Pen Tool and using Bezier curves, draw the rest of the left side of the glass body. Duplicate the completed shape and merge them together. We have made the glass body. Let’s move on to the screw thread contact.

Step 3

A light bulb is not perfect. This is good for us, because the left and right side of the thread contact don’t have to match at all. Ready the Pen Tool and start drawing. When we have completed this part we can move on and do a quick drawing of the electrical foot contact at the very bottom.

Those two shapes are pretty easy and somewhat creative shapes, so you shouldn’t have any problems. See how my shapes are overlapping, that doesn’t matter at this point.

Step 4

Again with the Pen Tool and Bezier curves, draw a shape that represents the actual screw part. When finished, copy and paste it two more times as shown below.

This is the basic outline of outer bulb shapes, but we are missing something, right. Yep, the glass mount, the support wires and the tungsten filament. I found those to be the real challenge of the bulb, so let’s leave them for last.

Step 5

Let’s move some elements to new layers. Create a new layer and call it “Metallic Body.” Move it above our “Glass Body” layer. Select the thread contact, the three screw elements and the foot contact and move them to the “Metallic Body” layer.

Let’s start painting the elements from bottom to top. Fill the electrical foot contact shape with a radial gradient. Set the colors, locations and gradient sliders as shown in the image below. Apply Inner glow as well and remove the stroke.

Step 6

Let’s move on to the thread contact. Repeat the above actions, by applying a Radial Gradient and Inner Glow with the settings shown. Also, remove the stroke.

Step 7

Moving on to the actual screw elements. Apply the settings shown below on all three of them. Remove the stroke. We are basically applying the same radial gradient we did with the thread contact, but we are changing the sliders’ positions slightly.

Step 8

Moving to the glass body. You can lock the “Metallic Body” layer and continue working on the glass one. Remove the stroke and give it a fill color of K=3. We want very light gray that will separate the bulb from the white background. With the shape still selected, give it an Inner Glow and use the settings and color shown below.

Step 9

So far, so good. Now comes the hard part - the glass mount. Your task here will be easy or hard, depending on the light bulb you’ve chosen. I didn’t really have a choice, since the client wanted a traditional bulb. Create a new layer and call it “Glass Mount.”

I’m going to hide the rest of the layers to better focus on the mount. I created the shape and filled it with K=10 (Step 9.1). On top, I made an additional shape and gave it a radial gradient going from K=10 at 0%, K=20 at 64%, K=25 at 80% and K=10 at 100% (Step 9.2.) I used the Pen Tool and Bezier curves to draw the support wires with 1 pt stroke color of K=90 (Step 9.3).

Step 10

Now, I moved to create four more shapes for the big support wires.

I drew the two wires and noticed that in an actual bulb they are folded at the end. The left one is folded back and the right is folded in front. I drew the folded shapes and sent one at the back and the other in front. Then I filled the wires with K=90, and the folded shapes with K=95. No stroke (Step 10.1).

Moving on to the tungsten filament. What I did was pretty simple. I Pen Tooled a line between the big wires and applied Effect > Distort and Transform > Zig Zag. I entered: 1% for the Relative size, Ridges per Segment at 8, Points at Smooth and finally K=90 stroke color. The effect gave nice curved line, just like the real thing.

Additionally, I created the bottom element of the glass mount, along with two ellipses for the central part. I selected both ellipses and in the Pathfinder palette I chose Minus Front to get rid of the front one, this creating a hole in the big ellipse. After that, you guessed it, radial gradient from K=70, K=90, K=80, at respectively 0, 63 and 100% (Step 10.2).

Step 11

I noticed that the big support wires go inside the glass mount, and the glass acts like a magnifying glass and the wires in there look magnified.

Let’s draw that. I made four shapes. Notice that they go all the way down and at places it looks like they are separated, that’s why I made four and not two (Step 11.1).

The glass mount is complete, but look at it - it’s flat. We have to make some highlights and play with the opacity and blending modes to create the illusion of 3D. Let’s do that!

For the top glass shape I made two highlights. The left one I filled with a white to black gradient, and no stroke. I did the same with the right one, this time with black to white gradient fill. I set both shapes to Screen blending mode. Next I applied a Gaussian Blur of 2 pixels to both shapes and the glass started to appear (Step 11.2).

Step 12

Let’s go on and create more highlights. Simply draw and repeat the same steps until you’re satisfied. Experiment with both shapes and with smaller and larger blur radius, but don’t forget always to use a white to black gradient set to Screen. This is what gives the actual glass look.

We have to add one final detail to the glass mount - a big reflection going all the way from top to bottom. I made a shape following the curves of the mount, gave it a white to black radial gradient, set it to Screen and gave it big 7-pixel blur. Additionally, I adjusted the gradient sliders to punch it up a bit (Step 12.1).

This is the finished glass mount. Be careful with the object layering. My glass mount is on one Illustrator layer, but the object layering inside the layer is critical. Keep the basic shapes in the back and bring forward the highlights and glows. This will add more to the glass effect (Step 12.2).

Step 13

Group all the stuff in the “Glass Mount” layer and switch on the other layers. Move the Glass Mount to the center of the bulb using our vertical guide we created in the beginning. Rearrange the layers order as follows (from top to bottom): “Metallic Body,” “Glass Mount,” and then Glass Body.”

Step 14

The last step in the tutorial is to add highlights to the bulb itself. I put them on a new layer named “Reflections,” then moved it on top of all the others.

Next, I created a series of shapes along the right part of the bulb, the bottom and the top left part, where I placed some ellipses. I scaled some of them down and rotated them accordingly. I outlined them in blue for better illustration. At the end I colored all the reflections in white and added Gaussian Blur of 8 pixels to each one.

Step 15

This step is optional. For those of you interested in making the bulb turned on, create a new layer over the “Glass Mount” and below the “Metallic Body” layers.

Create a circle, smaller than the glass body. I gave it a yellow-to-white radial gradient at -180 degrees and set it to Multiply Blending Mode.

Conclusion

The final print came out great. At the end my client was really happy and so was I. I hope you enjoyed creating this realistic vector light bulb!

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

]]> http://vector.tutsplus.com/tutorials/illustration/how-to-draw-a-realistic-vector-light-bulb-from-scratch/feed/ http://vector.tutsplus.com/tutorials/illustration/how-to-draw-a-realistic-vector-light-bulb-from-scratch/ http://feedproxy.google.com/~r/vectortuts/~3/0vFy_KtUhT0/ http://vector.tutsplus.com/articles/news/seamless-vector-patterns-plus-pack-botanical-pop/#comments Sat, 27 Jun 2009 12:15:35 +0000 Sean Hodge http://vector.tutsplus.com/?p=2840 ]]> We have a new set of seamless vector patterns available exclusively for Vector Plus members. These are great for using in your work, adding to your blog background design, or twitter page. There are numerous plants, flowers, and pop elements making up each design of this set. You can use them in your next project to add a bit of happy, organic, vector goodness! Learn more at the jump!

New Vector Plus Illustrations

This new Vector Plus Pack is created by Sean Hodge. I enjoyed making this set of seamless vector patterns. There is a healthy mix of plants, flowers, and pop elements, which repeat organically. There is a nice tutorial from Ian on how to make these types of patterns and you can use just about any design element to construct them once you’ve practiced a bit.

There are eight seamless vector patterns in this pack. The license allows these to be used in your commercial client projects as well, see the download file for details. Below are the set of unique botanical pop patterns, which can be colored any way you choose, as it’s all vector (EPS format)! Note that the images below are scaled and cropped; they are seamless in the Plus download.

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.

]]> http://vector.tutsplus.com/articles/news/seamless-vector-patterns-plus-pack-botanical-pop/feed/ http://vector.tutsplus.com/articles/news/seamless-vector-patterns-plus-pack-botanical-pop/ http://feedproxy.google.com/~r/vectortuts/~3/rMuBlY4nzIQ/ http://vector.tutsplus.com/articles/interviews/interview-with-giulia-balladore/#comments Fri, 26 Jun 2009 14:21:02 +0000 Sonali Vora http://vector.tutsplus.com/?p=2638 ]]> Giulia Balladore is an illustrator based in Italy. She has a extraordinary and hyper-realistic style of illustration which possesses the rare talent of breathing personality and life into her vector drawings. Her illustrations are beautiful, alive and captures the spirit of modern women.

Giulia’s work has the ability to grab your attention and her choice of software to create the vector illustration is Flash. She eloquently uses Flash’s vector capabilities to create amazing still images. This stands as proof that the software is indeed more than an animation tool. So, let’s move on to this interview with Giulia Balladore.

1. Hi Giulia, tell us a little about yourself, where are you located and how does the culture of your country influence your art?

Hi everybody! My name is Giulia Balladore, I’m an Italy based illustrator and I’ve been drawing since I can remember. Drawing has always been part of my life, and I feel lucky for it. My father was a painter in his spare time when he was young and this fact hugely influenced me. I can easily say that it was his fault that I’ve always liked scribbling on everything I had at hand.

Since I was a child, I’ve always been influenced by what my eyes wanted to see. My taste for beauty is simple, and simple is my decodification of it. I cannot say in which way the culture that I daily live influences my art; surely it has, we are always what we eat.

LUSSURIA

2. What was your first experience in digital art field? Did you have any formal education in this field or are you self taught?

I am completely self taught. Everything began some years ago, in 2002, by chance, as the most things in my life, when I bought my first PC.

FUCSIA

3. Where do you work on your designs and projects? What tools and applications do you use most?

The main tools I use for my works are my hands and my eyes! The process of every vector illustration is first manual, then digital. Every kind of paper I have at hand and my PC do the rest.

CREMA, VENTISETTE

4. You use Adobe Flash for creating your vector arts. Flash, no doubt is a great vectoring tool but it is better known for creating animations than for creating still works. Why do you prefer it over other applications like Adobe Illustrator or Corel Draw?

You’re right, Flash has a lot of limits than other software doesn’t not.

Why am I a self-injurer? Because I’m in love with Flash. When I bought my first PC to approach digital illustration, a friend of mine who is a programmer gave me the opportunity to bungle with it. I began to outline simple forms, only secondly I linked together hand-drawn and digital illustration. In the years I’ve acquired a personal technique that makes me realize something satisfying, and someway, completely new and fresh for me.

SMOKING MUG

5. What design projects have given you the most satisfaction? Share with us something about those projects.

I’m happy when my work is published on books and magazines with other people’s work. I love sharing experiences all over the world.

THOM YORKE

6. Your vector images are very detailed, clean and they look ultra realistic - almost like a photograph. Give us an insight into your creative process from start to finish. And what resources you use, if any.

You’re right, the hyper-realistic taste of my vector illustrations comes from the time spent in my hairdresser’s waiting room, taking a glance at those glittering fashion magazines full of sophisticated pictures. When I take the pencil in my hand and start drawing I feel free to put on paper what strikes more my attention. I scan the drawing and start playing with flash, first outlining, then coloring, using a big amount of layers…the more layers I use, the better the result will be.

BIANCO E NERO

7. Women also seem to be a main focus for most of your works. Why is that? Also, most of your vector illustrations are portraits, why?

My work is mainly focused on female portraits for the simple reason that for me the purest and simplest beauty stands in the look of a woman, with all of her imperfections and boundaries.

8. What is it about vector illustrations that you enjoy the most? What is your favorite vectoring or Flash tool, tip or technique?

It will sound banal, but the thing that I adore about vector illustration is its unique possibility to scale in an unlimited way without loosing the quality. This lets me find different points of view of the piece I’m working on, and it can be considered the peculiarity that I prefer most.

CATPOWER

9. How would you define your artistic style? Apart from your own style do you also explore and experiment with other illustration styles or digital arts?

My style is personal and common at the same time. I like playing with my HB pencil in my spare time. I like as much manual and analogue illustration as digital illustration.

IERI

10. Where do you look for inspiration? Who are your favorite artist or designers, and if you listen to music, what kind of music do you like?

I love music, I always listen to music when I draw, so I can say that I do two things contemporaneously. Above all, I love the magnetic sound of the National.

Obviously I love a lot of illustrators, painters and artists, too. In open order I can mention Chagall, John Solimine, Paul Smith, Caravaggio, Chan Marshall, Massimo Vignelli, Emmanuelle Alt, Okkervil River, and above all my father.

11. Thanks Giulia, for the interview. What are the things a beginner vector artist or graphic designer should keep in mind, any advice?

I’m not in the position of giving advice…I’ve always done what I’ve liked, maybe this is the main thing to keep in mind for anyone who is still reading these lines.

Thank you everybody, my pleasure…ciao!

BIANCO

Giulia on Web:

• Portfolio
• Flickr

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

]]> http://vector.tutsplus.com/articles/interviews/interview-with-giulia-balladore/feed/ http://vector.tutsplus.com/articles/interviews/interview-with-giulia-balladore/ http://feedproxy.google.com/~r/vectortuts/~3/oWrY1GVNnoI/ http://vector.tutsplus.com/freebies/vectors/cute-elephant-character-freebie/#comments Thu, 25 Jun 2009 17:17:59 +0000 Ann Storer http://vector.tutsplus.com/?p=2830 ]]> File Type: Illustrator CS3
License: Creative Commons

A sugary-sweet elephant character in vector format. Aww, he loves you!

]]> http://vector.tutsplus.com/freebies/vectors/cute-elephant-character-freebie/feed/ http://vector.tutsplus.com/freebies/vectors/cute-elephant-character-freebie/