1. Hello Ryan, please tell us a bit about yourself. Where are you from, what training do you have, and how did you get started in the field?

Currently I live in Colorado Springs Colorado. I have been drawing and doodling my whole life. It started when I was young, re-creating comic books, cartoons, and magazine advertisements. I continued drawing and explored fine art in high school. I graduated college with a BFA in Fine Arts with a Concentration in Graphic Design from Colorado State University.

During my time in college I worked for the student newspaper laying out pages and designing ads. After college, I worked for a print shop as a designer for a short time, then worked for a smaller design agency designing and illustrating. While working at the small agency, I contributed stock illustrations to iStockphoto, did some freelance work, and started Vectips. Eventually all the extra work generated enough income to go into business for myself. Currently, I do client work under Rype Arts, still contribute to iStock, and write tutorials for Vectips, other blogs, and books.

2. How long did it take you to get a foothold in the industry and establish some regular clients? Did you get experience working at agencies before going freelance?

It took about a year of freelancing to get some established clients. During that year I was lucky enough to work for an agency that didn’t mind me doing freelance work on the side. I worked at the agency for about three years and the experience was great! I don’t think I could have gained this experience just starting a freelance career straight out of college. In college you learn the principles of design, but you don’t learn the business of design. There is no better training in this area other than experience.

3. What pulled you toward vector graphics as an artistic medium? What are your favorite aspects of working with vectors?

I love the clean and crisp shapes and lines vector art embodies. It’s kind of weird, because my non-digital traditional art is very loose and sporadic, the opposite of my digital art. Vector art is great for editing and scaling, making the art versatile and easy to use for any type of design (print, web, product, etc…). Still, there is always a time for rasterized artwork, but I like to make excuses not to use rasterized artwork (kidding)!

4. To what extent do design and formal principles impact your art? How much is guided by playful creativity, experimentation, and discovery? Is there anything off the computer that you find essential to your artistic process?

I think formal principals have a lot of impact on my work. Some design and composition principles were nailed into my head through my studies, so it is always a part of my work whether it is subconscious or not. Still, there is a lot of discovery and experimentation in my work. This is just as important to me in my work as the formal principals. For me, I can’t have one without the other.

I have numerous sketchbooks off the computer that are essential to my creative process. I use them extensively for thumbnails, sketches, and ideas regarding projects, illustration, blog posts, and just doodling for fun. I can’t always get away from my computer, so I have digital sketchbooks as well. Spending time with my wife, watching movies, throwing pottery, and crocheting are all other essential off computer activities. Without these, I couldn’t be creative on the computer. It’s important to me to have a balanced life.

5. I notice that you work in multiple styles? For example, I see really sketchy vectors and super clean characters? What are the advantages and disadvantages of working in multiple styles?

The advantages for me is I never get bored. I tend to get bored if I stick too much to one thing or style. The bad part is that I might not seem to have a marketable style. A potential client will not remember me as much as if I had one style. But, design agencies like that I have a versatile style. So it is a mixed bag. Really, I just admire so much work that other people are doing, I want to do it all!

6. Could you tell us a bit about how you got involved with blogging? How has it had a positive influence on your design business? What do you think makes a great tutorial? And what vector tutorial are you most proud of?

I love reading blogs and learning about anything. I find it amazing that you can teach yourself so much just from the content people are putting out there. When I started Vectips I was using Illustrator extensively in my job and looked for a blog that I could count on to serve up tips and tutorials. There wasn’t really any blog at the time that captured that for me, so I started one. I figured if I wanted it, someone else would. It was also a chance to give back to the blogging design community from which I learned so much from.

Vectips has had a huge impact on my design business! It has created many clients and jobs that I probably wouldn’t have the chance to do. It is a way to keep my designs and illustration fresh and out in front of people’s eyes.

With my tutorials on Vectips and other blogs I try to keep them simple, relevant in regards to design trends, and easy to apply to other illustrations and projects. I see some really great tutorials on how to create something very specific, and it works great if you are creating something exactly like the tutorial, but I find the most useful tutorials are ones that can easily be applied to other projects. That is what I strive for.

I think the Creating an Environmentally Friendly Green Type Treatment tutorial I did for you guys is my favorite. This is the tutorial that people seem to find the most helpful. I have seen the tutorial applied to type treatments, illustrations, logos, and more. It makes me happy that I can create something that people find useful and I think this tutorial does it the best.

7. What do you think makes a great character? How do you infuse personality into your character designs? Do you plan backstories, do you often do multiple sketches, or are there other creative ways your characters tend to come to life?

A great character personifies the project, idea, or story it is a part of. A character doesn’t necessarily have to have a set of features, style, or attributes to make it great. I always keep this in mind when creating characters. I also use backstories and envision the character as if it was real and interacting with me. Makes it fun! I usually do many sketches when creating characters and discuss the character with others. It is a great way to see how others interpret the character and see how compelling the character is.

8. Without getting too specific, are there any contracts or agreements you’ve entered into that have been difficult down the road? What would you advice artists to watch out for when entering into formal agreements?

There are some contracts that I signed that I don’t necessarily regret, but would have been more wary of if I had more information. Because of some of these contracts, it has limited me in pursuing other projects, ideas, and ventures. I don’t mean to scare any new artist, but it is always a good idea to think of the implication of signing a contract. It might sound great at the time, but think of how it can limit your creative and finical potential in the future.

This might not be possible for a designer and artist starting out, but I suggest have a lawyer look over any contracts you sign. Luckily, I have a friend that is a lawyer and we trade services. I did some design work for him and he gives me legal advice. Even though having a lawyer might not be a reasonable choice, carefully read the contract, and if you have questions, just ask the other party you are signing the contract with. Freelanceswitch.com has some great blog posts on legal question and contracts which I find invaluable!

9. What was your role in contributing to the The Adobe Illustrator CS4 Wow! Book? Could you give us a brief rundown of what’s in this new version and why Illustrator artists should pick it up?

It was so awesome to work on the Adobe Illustrator CS4 WOW! Book! I have been using the WOW! book series for years, and was giddy at the change to work with the great contributors of the book. In the book I was a contributing writer and artist. As a writer, I wrote around 5 basic lesson dealing with typography, Illustrator Effects, and some of Illustrator’s tools. The lessons are not as in depth as some of the tutorials on Vectortuts+ or Vectips but still very useful. The artwork that I contributed was a mixture of stock art and client work of mine.

My favorite new features in Illustrator CS4 are the Blob Brush, Appearance panel upgrades, Gradient tool upgrade, and Multiple Artboards. In previous versions of Illustrator I used Calligraphy brushes extensively with my Wacom pen tablet. Basically, I would use the Calligraphy brush with the Wacom’s pressure sensitivity to create varied strokes that appeared to be more natural than an Art brush. Using the new Blob brush, I can create the same type of strokes without having to Expand all the lines of a Calligraphy brush.

The Gradient tool upgrade make it so mush easier and quicker to edit and create gradients. The Appearance panel upgrades give me much more control of the appearance of an object in Illustrator, making it easier to create Graphic styles and edit objects. I also love using Multiple artboards. Multiple artboards has streamlined my workflow making it easier to create consistent branding project, exporting proofs, and organize files. The tutorial I did for Vectortuts+ called How to Create an Identity Package in Illustrator really shows how Multiple artboards can improve a workflow.

10. Could you tell us a bit about web design? Where do your vector graphic skills come into play in that? How often do you do web design for clients? Do you do just the graphics, or also the html/css, and blog integration? What workflow and programs do you use for web design and how do vectors fit in?

I do a lot of my wireframing and initial designing in Illustrator for web design. It might seem weird to some, but I am just faster and more comfortable in Illustrator. I do almost all my web design illustration and icon designs in Illustrator as well. For smaller and more precise stroke and single pixel based elements, I stick to Photoshop. Sometimes Illustrator has problems with converting small vectors to rasterized artwork.

I do most of the front end html, css, and blog integration. I am really only fluent in Wordpress and have yet to explore any other CMS. I leave the PHP and other programing to contractors. Sometimes if I have a tight deadline or quick turnaround, I hire freelancers for the front end. Some people are just faster and better at it than me. I tend to like doing the graphics more.

So in a typical web design project, I do all the initial tasks, like research and tons of sketches. Then, like I said in the beginning, I use Illustrator for wireframing and initial design, then Photoshop for the fine tuning (highlights, better drop-shadows, any single pixel based elements), and I code the site in Coda.

11. Would you recommend that artists get involved with creating stock vector illustrations? And if so, what advice do you have for those getting started? And what are some good goals to set that will lead them on a path toward success in that field?

I guess it just depends. Creating stock artwork has been a great source of income and has generated a lot of bigger client projects for me. Sometimes stock artwork can be difficult to get into because there is so much of it out there, but it is a good way to get your foot in the door and show your work. Some designer and illustrators say it devalues the industry so they like to stay away from stock.

Personally, I think there is a market for low cost artwork that is not going to go away and it is your choice if you want that to be part of your finical strategy. Still, I have gotten many jobs that are high paying custom client work that would never be suitable for stock. I think for the foreseeable future, these custom jobs will not be in jeopardy.

If any aspiring artists want to get into stock, I would suggest keeping your options open. Even though there are some big stock sites that drive more traffic than others, you never know what will happen in the future. Displaying your artwork on as many sites as you can might generate more income and get your name out there more as well.

This might seem a little hypocritical because I am a exclusive contributor to iStock, but if I did it again, I might not have gone exclusive. To be successful in the stock area, you really need to be up on current trends in design. Some stock that you created a year ago might not do as well as now. Just putting pieces for sale doesn’t mean they will sell.

12. What are your plans for the future? Any creative work coming up, or that you’re currently working on, that you’re excited about? What can we expect from you over on Vectips this coming year?

Currently, I am re-branding the Rype Arts side of things, but it is taking forever! The site is the last part of the re-branding and it’s almost done, but I just need to finish it. I also do other fine art stuff. I am really into wheel throwing right now. I might look at selling some pieces or creating a blog for ceramics. I haven’t found any that capture what I am looking for.

As for Vectips, I really want to explore video, but like everything else, it is hard to find the time. Really I just want to create great content that can help people.

13. Thanks for the interview Ryan! Is there any advice that you’d like to give aspiring illustrators and designer who are working hard to grow professionally?

Thank you! I love all the work Vectortuts+ does. It’s at the top of my RSS reader and everyday I can’t wait for a new tutorial, interview, or inspirational post. All the contributors put out some great content.

I would advise aspiring designers or illustrators to always keep at it. If you have a passion to be in this industry, you will do fine. Also, always be mindful of the next step and were you are heading in your career, learn to take criticism, and most important, have fun! If you are not having fun, go do a boring job and leave the fun work for others!

Ryan Putnam (Rype) on the Web

• Rype Arts
• Vectips
• On iStockphoto

Phantasm CS

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.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Beginner
• Estimated Completion Time: 1.5 hours

Step 1

Open up a new document and select the Rectangle Tool (M). Create a rectangle. This will be used for the cable. We will keep it simple, for now set it to the default white fill and black stroke.

Step 2

Duplicate the rectangle below the first (Alt-drag).

Step 3

Create another rectangle and set the height to the same as the two long rectangles together, as shown below.

Step 4

Duplicate the small rectangle five times. Either use Alt + drag and the Command + D or use the Blend Tool. Select all of them and align them along the vertical.

Step 5

With the shapes still selected, distribute them now horizontally .

"step05.jpg" width="600" border="0">

Step 6

Create another rectangle and repeat the Steps three to five times.

Step 7

We now have six smaller rectangles and seven slightly taller ones in between.

Step 8

Again, create another more square rectangle next to the smaller ones.

Step 9

Create yet another rectangle, but make it slightly bigger. Use the Direct Selection Tool (A) to select both right side points, then use the Scale Tool (E) to scale them up, while pressing Shift + Option.

Step 10

Create one more square looking rectangle.

Step 11

Add another one and make sure you keep the sizes oriented with the previous ones.

Step 12

We are now moving on to the thin part of the plug. Create another rectangle, which is the same height as the last one, but much thinner. Quick Tip: You could just duplicate the rectangles and scale them to the correct sizes.

Step 13

Make another rather long rectangle and align it to the vertical center of the rest of the shapes.

Step 14

Rinse and repeat!

Step 15

We need two small thin rectangles that will simulate the two small black rings on a headphone plug.

Step 16

Rinse and repeat.

Step 17

Copy the small rectangle from Step 15.

Step 18

Add another rectangle, but on the right side add one path point with the Pen Tool (P) in the middle of the path line and with the Direct Selection Tool (A). Repeat the scaling we did in Step 9. Now select the middle point and move it to the right. You can do this by hitting the right arrow key on your keyboard.

Step 19

This is the basic shape composition of the headphone plug.

Step 20

Select the small shapes we created earlier in Step 3-7 and group them (Command + G). Now go to Effect > Stylize > Rounded Corners and apply a radius of 2pt.

Step 21

Let’s move on to the colors. Create a linear gradient that goes from 100% black to 90% black to 100% black. Now drag it into the Swatch Palette.

Step 22

Setup another linear gradient with browns and beiges to simulate a golden color and drag it into the Swatch Palette.

Step 23

Now use the Selection Tool (V) to select the two rectangles that simulate the cable, then apply a dark gradient. Set the radius in the Gradient Palette to 90 degrees. Keep the Stroke.

Step 24

Apply the same gradient to the shapes with the rounded corners but set the radius to 0 degrees.

Step 25

Select all the other shapes and fill them with the golden gradient, radius 90 degrees. Just keep the two small rectangles filled with black.

Step 26

Select each golden shape separately, duplicate it on top (Command + C + F) and set the Layer Mode to Multiply.

Step 27

Select the next two shapes and repeat Step 26.

Step 28

Skip the next two shapes and select the following two rectangles. Repeat the duplicate and Layer Mode change.

Step 29

Select the two black shapes, duplicate them on top and increase the width with the Scale Tool (E), then fill them with the golden gradient and set the Layer Mode to Multiply.

Step 30

Last but not least, duplicate the tip shape on top and change the Layer Mode to Multiply.

Step 31

Select the cable shapes and make a duplicate. Then select the Warp Tool (Shift + R) and start pushing the cable shapes.

Step 32

Keep it simple and apply slight warping.

Step 33

This is what it could look like. Make sure you don’t warp to much so the shapes won’t separate.

Step 34

Connect the warped cables to the plug and voila, we have our little golden headphone plug. I applied small white squares which I duplicated and then grouped to simulate the rippled texture on a plug.

Conclusion

I grouped the shapes, reflected them and applied an Opacity Mask to simulate a reflective surface. You can easy change the colors or apply other gradients. Have fun!

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

1. JAT – Branded by nature

2. Conserve Rain Water

3. Eagle in your mind

4. Chemtrail

5. Beauty is in the eye of the beholder

6. Globale 09

7. Every color of your summer

8. John Petrucci BFR

9. Future Imperfect

10. Firs

11. Pequenos Mundos #1

12. Iron & Wine

13.

14. Horizon Fire

15. Enerjxpro 2007

16. Holy Noise Night 2007

17. Retro Vector Poster

18. Conor Oberst & The Mystic Valley Band

19. Creative State R.L. Jones Jr.

20. SHeeepy

21. Endustrie

22. The Kooks

23. The Hotel Café Tour

24. ADDICTIVEstudios

25. Man of the year

26. Indology Poster

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 Techniques

Shapes are the foundation and basis to everything we see. In this tutorial I will show you how to study shape forms and teach you the fundamentals of experimenting with shapes and apply them to facial features. Throughout this tutorial you will learn about my personal way of working and you can adapt these methods to your own and create your own experimental shape illustrations.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Intermediate
• Estimated Completion Time: Time: 5-7 hours

A preview of the final image is below.

Plus members can Log in and Download! If you’re not a member, you can of course join today! You can view the final illustration below.

This is a Detailed and Professional Tutorial

Plus members can Log in and Download! Otherwise, Join Now! Below are sample images, which show some of the development of this 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.

Here is a link to the written version of the tutorial Create Flash Animations Entirely in Illustrator and the video version is below.

Final Image Preview

Below are two final SWF animations we will be working creating. 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 CS4
• Difficulty: Intermediate
• Estimated Completion Time: 45 minutes

Video Tutorial

I’ve created this video tutorial to compliment this text + image tutorial.

Method I: Blend and Morph

For this type of animation, in which one shape transforms into another (and another and another, if you wish), we’ll use the Blend Tool to make the in-between shapes, then release each shape to its own layer, then export these as a sequence for the Flash file.

Step 1

Since this animation will be used on the Web, start with a new RGB document. Here I have four simple icons, representing the four seasons. Select all the shapes, then center-align them horizontally and vertically, using the Align panel (or the Control panel). Make sure that each shape is on the same layer.

Step 2

Double-click the Blend Tool in the tool palette to bring up its options. Choose Specified Steps in the Spacing pull-down menu, and type 8. That will give us a smooth transition between the shapes, but won’t make too many layers.

Step 3

With all the shapes selected, go to Object > Blend > Make.

Step 4

With the blended shapes still selected, go to Object > Expand. This will separate the blend into individual shapes. For this effect to work, the individual shapes must be disassociated from one another, so go to Object > Ungroup.

Step 5

The ungrouped shapes should still be all on one layer. In the Layers panel, make sure the layer is highlighted, click the flyout menu, and choose Release to Layers (Sequence). You’ll notice that each shape is now on its own layer, and each layer has a different color. If you don’t see this, go back and make sure you have ungrouped the expanded blend.

Step 6

Go to File > Export and choose Flash (SWF) as the file format (NOTE: Depending on the version of Illustrator and/or the version of Flash you have installed on your computer, the file format might be called Macromedia Flash). Choose AI Layers to SWF Frames as the Export method.

Now click the Advanced button to bring up more options. Choose Lossless as the Image Format. Click Looping, so that your animation will play over and over again. The default settings are fine for the rest of the SWF Options dialog box, but you may want to experiment with them in future projects.

Step 7

To see your animation in action, do one of two things: Click the Web Preview button in the SWF Options dialog box, which will launch your default Web browser and play the animation. Or, save the SWF file, then drag it onto a blank browser window to play it.

Options

1. When working with a Blend to create an animation, you may have noticed the Animate Blends checkbox in the Advanced SWF Options dialog. This does what it says: it uses the blend for the animation and separates each expanded shape in the process. So you really don’t have to do Steps 4 and 5, but it helps to understand how Illustrator creates the animation.

2. If you prefer, the Illustrator file can be exported to Photoshop, then opened in ImageReady to create animations there. Follow Steps 1 through 5 above, then export as a Photoshop (PSD) file. The key here is to check both Write Layers and Maximum Editability in the Export Options dialog box. When you open the file in Photoshop, you’ll see each layer (in this case, all 29 of them) is preserved. You can then jump to ImageReady and edit the animation frame by frame.

Now that you understand the basic concept, you can experiment will all sorts of blends and morphs. For some really trippy animations, try using 3D objects or gradient-filled shapes.

Method II: The Appearance Panel

Step 1

Again, start with an RGB file. I’m using this simple zombie silhouette, with a fill of black and a stroke of none. I’m going to add a series of strokes to the outside of the shape, so that when animated, the strokes will radiate out from the shape.

Select the shape, go to the Appearance panel and choose Add New Stroke from the flyout menu. In CS4, all the modifications to this new stroke can be made directly in the Appearance panel. Going from left to right, first click the word Stroke to bring up the Stroke options. Click the third icon next to Align Stroke to align it to the outside of the shape. Next, click the color swatch to apply the color (I started with black), and then finally choose the stroke weight in the third field.

Step 2

To add the remaining strokes, you could repeat step one over and over, changing the options, color and weight each time. But to save a bit of time, simply click the Duplicate Select Item icon at the bottom of the stroke panel to make a copy of the stroke. Now choose the copy (it should be the one UNDER the original), and change its color to a very dark blue (or whatever you want), and the weight to 2 points.

Repeat this procedure several times, adding a lighter and thicker stroke each time. The end result should look something like the image below. You’ll see each additional stroke in the Appearance panel.

Step 3

Go to Object > Expand Appearance. This will expand and separate the strokes.

Step 4

Ungroup the expanded strokes, and just like you did in Part I, select the layer in the Layers panel and choose Release to Layers (Sequence) from the flyout menu (for this method, you really have to do this step).

Step 5

Export the file to Flash, as in Step 6 above. For this image, I am going to change the background color to black, but the other settings remain the same.

Step 6

To see your animation in action, do one of two things: Click the Web Preview button in the SWF Options dialog box, which will launch your default Web browser and play the animation. Or, save the SWF file, then drag it onto a blank browser window to play it.

Conclusion

As before, preview the file in your Web browser. Try dragging the browser window bigger and smaller. Since this is a vector-based file, the quality is great at any size. Happy animating!

Final Image Preview

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

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Beginner to Intermediate
• Estimated Completion Time: 30 minutes

Introduction

I decided to create a stained glass effect when I saw one very beautiful Tiffany lamp. And, although it might be easy to create a mosaic with Illustrator raster effects, I thought it would be better to make it a different way. The simple method I describe in this tutorial involves only a few tools. Also, you’ll get better results with a reference image – whether it’s your own sketch, a photo, or any other image you like.

Step 1

Let’s open Adobe Illustrator and create a new document. Make it default A4 paper size (210×297 mm horizontal), but your image may be created in any size. I set it to RGB color mode, but you can choose CMYK if you prefer.

Now we’ll need a reference image, and you need to know something about it. Resolution and quality doesn’t matter, it can be a small photo. For a stained glass effect it’s better not to choose high-frequency images, which means images with many small details, or with very distant objects.

It’ll be rather hard to reproduce tiny areas with so many glass pieces (you’ll have to create each of them). Thus, city landscapes or detailed portraits are not the best choice. Choose a low-frequency image like a still life, flowers, or a landscape. See the examples below.

Step 2

Okay, when the reference image is chosen, place it in your document (File > Place). I used a great photo “Spring bouquet” that the Russian photographer Nattalia Shloma kindly allowed me to use in this tutorial. She has some amazing flower compositions that are perfect for stained glass effects.

Position and scale the placed image to your liking, so that the main object is in the center. Then click twice on the layer in the Layers panel (F7) and rename it to “photo.” Check the “template” option, also enter 100% in the Dim To field. This way the image will be visible even in outline mode.

I left some blank space to fill it with glasswork later, and I also decided to crop it with a clipping mask. Simply create a rectangle the same size as your document, select both the rectangle shape and the image, and then press Command + 7.

Step 3

Now create a new layer and name it “Glasswork.” Choose the Line Tool (\) and make sure your bottom layer with a reference image is locked, so you don’t accidentally select it. Colors do not matter now, you’ll change them later, so you can choose a vivid stroke color to work with.

Now it’s time to create the basic shape of the glasswork. This is the most time-consuming part of tutorial and requires some patience. Draw the rough draft of the glasswork, so that the lines are the borders between glass pieces.

Start creating lines that follow the main objects in your image. Make sure that every line touches either another line or the image border with its endpoints. You are making future glass pieces, keep it in mind – so the idea is to break the surface down into separate objects. Avoid open line ends, it’s very important, so overlapping is the key!

Turn on smart guides (Command + U) for help. This way you’ll see where the lines intersect. You don’t have to copy the reference image exactly. I decided to make the table flat and clean, dropped the fallen tulip, and change the vase shape.

Step 4

The flat areas like the wall or table will consist of larger glass pieces, while smaller objects (flowers and leaves) need more detailed work. Try to draw lines that roughly follow the borders of every object. Remember: It’s better to create smaller glass pieces where we do not actually need them, than to create one huge piece where we need more detail.

Here I replaced the mimosa with more simple leaves to avoid too much small detail. You can switch to outline mode (Command + Y) if the line color disturbs you. That’s what I have for now.

It’s easy to know you’re ready for the next step: just turn off visibility of the bottom layer, and you’ll see if the lines look recognizable. Make sure every important object of your reference photo has the appropriate glass piece bounded by lines on the top layer.

Check twice that the lines touch each other or the image border. Correct gaps and any points that are bit over the border – just move them into place with the Direct Selection Tool (A). You’ll be able to correct it later though.

Step 5

Once the lines’ draft looks OK, select all the lines you created (you can simply click the circle beside the layer name in the Layers panel). Now choose the Warp Tool (Shift + R) and start deforming lines to make them wavy – begin with large glass pieces using the default tool size. When you come to working on smaller pieces, change the tool settings to a handle more subtle areas – click Enter and adjust intensity, simplicity, and size.

You can also change the Warp Tool size quickly by holding Alt and dragging inwards or outwards (to constrain proportions also hold Shift). Make the line work repeat the shape of image objects. You have to end up with something similar to the image shown below (I made the bottom layer invisible).

Step 6

Well, the last thing to do before adding color is to create a rectangle that will be the image border. Make sure it has no fill and it touches the lines so there are no gaps. Now, select the whole layer (lines and rectangle together), group these objects (Command + G) and give this group a 3pt stroke of light brown color (#BC8B0F).

Now you should make a copy of this group, we’ll use it later: press Command + C and Command + F. The copy appears above the original group. Hide it for now by pressing Command + 3 or clicking the eye icon beside the group copy in the layers panel. Below shows what it looks like with the bottom image turned off.

Step 7

Now we’ll add some color to our artwork: select the original group of line work and go to Object > Live Paint > Create (Alt + Command + X). This turns the group into a Live Paint Group – the bounding box around it might change a little. Now you can recolor the space between lines with the Live Paint Tool (K).

To choose swatches I suggest that you go to Window > Swatches Libraries and select the combination you like (I used the “Food” and “Nature” libraries). Simply click the color swatch as a fill color and bring the tool cursor to the area you want to paint, it will be indicated with a wide selection. Start painting the entire image with colors you like (don’t change the stroke color though).

Step 8

You may face some problems when painting your glasswork. If some areas appear as a single one due to gaps between lines, select the line endpoint with the Direct Selection Tool (A) and move it to close the gap.

If you feel that some lines are missing, draw new lines and deform it with the Warp Tool, then select both the new lines and the Live Color group and go to Object > Live Paint > Merge. The lines will be added to the group.

Keep painting your image – you can change the color of any piece in this group if you like with the same Live Paint Tool. Switch the bottom layer’s visibility off to check the fill of glasswork. Below is what I have so far.

Step 9

To complete the basic shape of glasswork, unhide the backup group you duplicated in Step 6 (press Alt + Command + 3). Select the duplicate and change its stroke to 2 pt and dark yellow color (#EAA00C). Now copy the group in front again (Command + C and Command + F) and give this one a 1 pt stroke and light yellow color (#FCD515). This way the glass borders look as if they are made with copper foil.

Finally, let’s crop the image. Draw the rectangle above the glasswork so that it covers the entire canvas (or you can copy one from the bottom layer). Make the layer a clipping mask (select the “Glasswork” layer in Layers panel and choose Make Clipping Mask in the fly-out menu). You can lock the “Glasswork” layer now, as the basic work is done.

Step 10

Create a new layer and name it “Realism” (as we’ll add some realistic details now). Create a rectangle that covers the whole canvas again (or copy the clipping path from the layer below). Duplicate it twice and hide the copies for a moment (Command + C and Command + F). Select the first one and make it’s fill 50% black with no stroke. Now go to Effects > Artistic > Sponge, enter these values:

• Brush size: 2
• Definition: 12
• Smoothness: 5

You can go to the Opacity panel now (Shift + Command + F10) and change the rectangle’s blending mode to Overlay. Now, with it still selected, again go to Effects > Sketch > Plastic Warp, and enter the following:

• Highlight strength: 9
• Detail: 5
• Smoothness: 11

It will create a nice glass texture. You can reduce it’s opacity for a more subtle effect. Also, if your document has different dimensions, you may want to change the effects’ settings a little bit.

Step 11

Unhide the first rectangle copy and fill it with a white to black radial gradient. Move the gradient’s center point with the Gradient Tool (G) wherever you want to imitate the light outside the glass window. Now change the rectangle’s blending mode to Soft Light.

Step 12

The image looks good already, but if you want to add extra lighting, select the third rectangle above two others, fill it with a gray color and turn it into a gradient mesh (Object > Create Gradient Mesh), enter 4 for rows and 6 for columns. Now change some point color to white, selecting them with the white arrow (A), and move some points and handles to create the shapes of the color transitions.

Now, again change the mesh mode to Soft Light and adjust the opacity if you want. This object imitates additional light sources outside a glass window. At this point I also changed the colors of the Light Paint group slightly. That’s it, below is my result.

Conclusion

In this tutorial we made a stained glass effect with simple method using several Illustrator tools. You can use most images for reference to create this effect, but try to avoid high-frequency pictures.

This method produces good results when created from scratch, as you can randomly make a line work and paint it as you like. Moreover, even the simplest ornament with this effect applied looks nice – look at the image below. Hope you’ve found something useful for yourself in this technique.

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

Rubens has a bold and funky vector style. He tends to mix different or even opposite feelings into his character creations. Learn all about his background, interests, influences, creative process and more in this interview!

1. Hello Rubens, please tell us a bit about yourself. Where are you from, what training do you have, and how did you got started in the field? How long have you been illustrating and designing?

Hello, first of all: thanks for this opportunity, I’m a regular reader of Vectortuts+ (as well as Psdtuts+) so I’m honored to be on it. My name’s Rubens Cantuni, I’m Italian and from Genoa. I was born in 1982 and my journey in illustrating and designing started a little later .

I’ve always been involved in drawing, coloring and creating stuff, but I’ve never had specific training in arts at school, so I can say that I’m self-taught. I have a degree in Industrial Design, that is not exactly what I’m doing now, but it was fun and I enjoyed my university years a lot. When I was in my last year I started working as an art director for an advertising agency, and in my spare time I’ve always been creating my stuff.

In January 2009 I was making some space on my hard disk and I noticed there were a lot of works making dust in there. At that time I was already running the blog koikoikoi.com (a visual arts blog I co-founded with my colleague Danilo) so I thought “Why just talk about other artists’ works and keep all my stuff in the closet?” and so I made my site Tokyo Candies, my Behance profile, etc. So even if I’ve always been illustrating my career is brand new.

2. How did you get started working with vector graphics? How long have you worked with Illustrator? Do you have any favorite vector tools or techniques? Where does Photoshop fit in your workflow?

I think I started with vectors in 2005 or 2006. I knew I needed to know Illustrator, but they weren’t teaching it at university (where I learnt things like 3Dstudio Max, which I forgot 1 minute later after passing the exam), so I had to learn it by myself.

At first, I have to say, I hated it. I was used to Photoshop and I couldn’t understand a lot of things happening in Illustrator. I don’t know why, at that time, it was pretty hard to find tutorials on Illustrator, while there were tons for Photoshop. So I experimented A LOT, and soon I became more and more familiar with it and found it was really handy to be able to manage all the elements.

I don’t have a favorite tool, I use the most standard tools: brush, pencil, pen, scissors, mainly. I don’t like the gradient mesh tool too much. I mean, it’s a powerful tool that lets you make some incredible stuff, but I’m a pretty radical vector artist . About Photoshop, I use it sometimes as a final step, to add some texture, vintage effects and things like that, but not all the time.

3. To what extent are you attracted to uniting extreme concepts in your work? I notice cute mixed with evil? Chubby imbedded with erotic sexuality? What are the mix of ideas that bring about your work?

Yes, one of the main things you may notice in most of my works I think is the mix of different or even opposite feelings. Cute and evil, funny and disturbing, the perfect example are, of course, the sexy chubby girls, that are my favorite subject and maybe my most distinguishing characters.

An artist I really love, that I think is bringing something similar is Jeremy Fish. The point is: arouse a feeling in the spectator. Could be surprise, curiosity, hilarity or whatever. If you look at one of my works, and you think “Why? Why is it like that?,” then I just hit my point.

4. How does working as a freelance illustrator and designer influence your work as an art director? How has working as an art director helped you work as a freelancer? Are there any lessons that cross these two roles you’d like to share?

I have to say that as a professional I live two separate lives. My everyday work is art direction/graphic design as an employee. I really like my job and it pays my bills, but of course my dream is to live just making my things one day, so I’m working hard, day and night, to do that.

My art direction job has been useful to me as a freelancer mainly in understanding client’s requests. Plus I learned all the things about the printing process while working there: problems related to it, limitations, preparing a file to be printed, and all this technical stuff you have to know. You can’t just be able to draw and/or use Illustrator alone.

5. With your busy schedule, how often do you find time to just draw in your sketchbook or do other creative things just for fun? What are your favorite creative outlets?

One of the main things I regret is neglecting my sketchbook so much. The other thing is painting so rarely. But I take time to do things for fun, also because they can become sold works, or prints or t-shirts. I also have to work on koikoikoi.com, which is a sort of creative outlet. Even if I don’t work in first person on something creative, presenting artists, designers, photographers, works, projects, videos, all feed my creativity hunger and increase my knowledge and my inspiration sources.

6. How has travel influenced your work? What places have made an impact on you and why? How often do you hit the road and explore new places?

I don’t think traveling has influence directly on my works, but it has certainly impacted my knowledge. It may sounds pretty obvious but the place that really had an impact on me is Japan, both for places and people. It was really like being on another planet, so far from italian culture. Last April I’ve went to New York. It was my first time in the USA. That city is magical, you really can smell endless opportunities, especially if you’re involved in art. I hit the road as much as I can, depending on money and spare time, and both things are not as much as I’d like .

7. How active are you online with various design communities, blogs, and social media? Have you had business opportunities arise because of these activities?

With my works I’m on: Behance, Facebook, BloodSweatVector, deviantArt, Twitter, and I have shops on Redbubble and Artsprojekt, where you can buy prints, t-shirts, sweatshirts etc. I can say that all my collaborative works come from these channels, I don’t have an agent (if there’s one reading, we can discuss about it, feel free to contact me!) and there’s not much to do locally.

8. You have such a distinctive style? How did that come about? What helped narrow your focus as an illustrator and what continues to inspire you as an artist? What are your greatest influences?

I really like a lot of different things. My style was a natural evolution and it’s still evolving. The most important thing I think is doing things as they naturally come to you, without forcing on making them look a certain way or like someone else’s products.

My inspiration comes from a lot of different sources, such as asian cultures, tattoo art, cultural icons, movies, comics, cartoons. I have tons of people I admire as artists, just to name a few: Mike Giant, Simone Legno, Jeremy Fish, Jeremyville, Shawn Barber, Audrey Kawasaki, Jason Lìmon, 123Klan, Koralie, Jeff Soto, Flying Fortress, Blu, Sheena Aw, Tado, and Jared Nickerson.

9. Could you tell us about your illustration process using the project “The Dirty Cream” as an example? Does the process for that project flow like many of your others, or do you find yourself often changing how you approach your work?

My workflow may vary from work to work. If I have a precise idea in mind, I start drawing directly in Illustrator. Sometimes if it’s not clear enough, or it’s a bit complicated, I make a sketch on paper, as I did for “The Dirty Cream” work.

After the sketch on paper (pencil and markers) I traced it with my Wacom tablet, then I gave it the basic color and after that I worked on shadows and lights. While doing these steps I usually make some changes to basic color, removing shadows or changing the transparency, etc. In this work, I noticed that the outlines traced with my Wacom were confusing the type work, so I used them just as a track for coloring. After the main work is done I start refining details, adjusting some curves, adding little elements, etc. The final step was adding the cherry characters and the ice cream lady recycled from a previous work and adjusted a bit.

10. Thanks for the interview Rubens! Is there any advice that you’d like to give aspiring illustrators and designer who are working hard to grow professionally?

Trivial but so true: keep working hard. Try to develop your own style and work hard on promoting yourself. Thanks again for this opportunity! Also, I will be participating in the upcoming Blood Sweat Vector West Berlin Gallery show, which opened just a couple days ago with loads of other vector artists’ work on display.

Rubens Cantuni on the Web

• Tokyo Candies Portfolio
• Behance Portfolio
• koikoikoi.com Visual Arts Blog (italian/english)

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

Winner!!!

How to Enter

To be eligible to win, all you need to do is leave a comment. Make sure to include your correct email address with your comment so that we can contact you. This giveaway is open worldwide, but make sure to get your comment in before midnight this Sunday, November 15th, 2009, Eastern Eastern Standard Time. We’ll be announcing the winner next week.

Please note: Envato staff and people who have written more than two tutorials/articles for a Tuts+ site are not eligible to enter.

The Prize

“Cartooning: The Ultimate Character Design Book (Paperback),” by Christopher Hart, and published by Chris Hart Books, 2008.

Product Description

“Chris Hart’s how-to-draw books have sold in the several millions of copies. Now, in his latest, he delivers detailed instructions, inspiring ideas, and invaluable tips for creating appealing and original manga-style characters. Character design is the key to success in comic books and animated films, and with this clear step-by-step guide, it’s a skill that can be quickly learned. Starting with the basics—body types, facial features, costumes, and expressions—Chris shows how to draw a hyper kid, bratty teen, lovable pooch, cool rapper, and many other distinctive types. Then, he takes the reader on a guided tour in search of original characters in places that range from suburban malls to the glitter and glamour of Hollywood and Beverly Hills.”

Afterwords, we talk about how to market yourself as a logo designer. How do you get your first clients? How do you figure out what to charge? What is a logo designers best marketing tool? We have some great discussions with guests Von Glitcha and Dickie Adams, both regulars of our popular Freelance Switch podcast: Freelance Radio.

We’ve Done it Again

This is our second Tuts+ podcast, so we are still learning the ropes. Please leave your feedback in the comments section on how we can improve future episodes. Also, make sure to tell us what you’d like to hear next time. Enjoy!

All music and sounds supplied by the very awesome AudioJungle!

• Length: 1 hour
• Download Audio
• Subscribe in iTunes
• Subscribe to RSS Feed

Introductions

• Host: Danny Outlaw
• Tuts+ Editor: Sean Hodge
• Guest: Von Glitschka, Illustrative Designer
• Guest: Dickie Adams, Jack of All Trades

In the News

Article 1: “iStock opens can of nasty worms“

This article discusses some of the potential negative issues with iStockphoto’s decision to start selling pre-made logo design solutions. There are links to other articles on this subject and don’t miss: The best logo design tutorial in the world… ever!.

Article 2: “Your Halloween Costume Sucks“

Check out these awesome Halloween costumes from the DragonCon convention. As some of you may know, many people dress up at these sort of events as their favorite fantasy related character. These blow away just about anybody’s costume this year.

Suggested Tools

• Danny Outlaw recommends: Screenr for recording screencasts through your browser.
• Sean recommends: Helvetic Brands run by logo and brand designer David Pache.
• Von Glitschka recommends: Copy Craft printers and their Business Card Recycling Program.
• Dickie Adams recommends: the mysterious Google Wave.

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