Vectors Imitate Life with Gradient Mesh

VectorsImitateLife-Banner

A Picture Worth a Thousand Points:

To start things off, we need a source image to serve as our template for this gradient mesh image.  For this tutorial I’ll be using a light bulb photograph from the stock.xchng.  I chose this particular image because it has clearly defined edges, as well as components that the subject it can be separated into.  The outline of the light bulb as a whole is crisp.  Also, you can easily subdivide the object into several components, such as the glass bulb, the metallic base, and the wire filament.  This will make it easier to work with, as you’ll see further along in the tutorial.

After downloading the source image and putting it into an easy-to-find location, open up Illustrator and create a new document that is 768×1024 (I’m using Illustrator CS3).  Make sure to open up the Advanced section to make sure that the Color Mode is set to RGB.

VectorImitateLife-001

After your new document is created, go to File > Place…

VectorsImitateLife-002

Now Place our light bulb stock onto Layer 1 of our canvas.  When it’s on the canvas, adjust the height/width of the image so that it better fills the space.  With the stock image selected, use the Free Transform Tool (shortcut:  E).  You can easily and proportionately resize the image by holding Shift+Alt while dragging one of the image corners.  This allows you to resize both the height and width proportionately, while the center point remains firmly in place in the middle of the canvas.

VectorsImitateLife-003

VectorsImitateLife-004

Now go to the Layers tab and double click on Layer 1, which is where your stock image should be sitting on.  A popup window will appear with the Layer Options.  Rename it to “Original”, select the “Template” option, and deselect the “Dim Images…” checkbox.

VectorsImitateLife-005

All Gradients Start Off with a Single Color:

First, create a new layer.  Bring up the Layer Options popup for this one.  Rename the layer “Bulb”.

Next, use your Rectangle Tool (shortcut: M) and create a rectangle about where the middle of the bulb is.  Turn off the outline of this shape, and give it a green fill (0,255,0).

VectorImitatesLife-006

Then, go to Object > Create Gradient Mesh…

VectorsImitateLife-007

In the Popup, give your gradient mesh the following settings.

VectorsImitateLife-008

When that’s done, your green rectangle should look like this:

VectorsImitateLife-009

Now, select your Free Transform Tool again.  Use this tool to resize the rectangle so that its top, bottom, left, and right sides line up with sides of the light bulb’s glass part.  Then change the overall opacity of the rectangle to 50% so that you can see the bulb through it.

VectorsImitateLife-010

Once this is all in place, take your Direct Selection Tool (shortcut:  A) and adjust the outer points of the rectangle so that they line up relatively with the outline of the bulb.  As you select these points, you will notice that they have handles attached to them.  Use them to adjust the curve of the outlines.  Try to make minimal adjustments to the points vertically.  Adjust the points by moving them primarily horizontally.

VectorsImitateLife-011

VectorsImitateLife-012

VectorsImitateLife-013

As you can see, there are not enough points to make this shape completely conform to the outline of the light bulb.  So we will add some.  Select the Mesh Tool (shortcut: U).VectorsImitateLife-014

After selecting this tool, place the cursor over the edge that you want to modify.  Then, when you click on the edge, it will create a new set of points on the gradient mesh.  Once those points are created, you can use them to further refine the outline of this shape.  Repeat this process until your gradient mesh shape is the same as the outline of the bulb.

015

VectorsImitateLife-016

VectorsImitateLife-017

Now some of you might be wondering why I chose to create the light bulb shape like this, instead of just by tracing the bulb’s outline with the Pen Tool.   Take a look at this 2-row, 2-column gradient mesh I created using a shape I made with the Pen Tool:

This is the shape:

VectorsImitateLife-018

And this is the gradient mesh created from it:

VectorsImitateLife-019

As you can see, when the gradient mesh was created out of this shape, it didn’t use any of the vector points from the original shape when it created the columns and rows.  It created its own points on the top, bottom, left, and right sides.  Using the Mesh Tool and clicking on individual points will result in a similar issue.  It may use the point I selected on the left side, but it will create a new point on the right side to connect to, completely disregarding any other points that might be close by.

VectorsImitateLife-020

VectorsImitateLife-021

So essentially, it’s my preference to use a rectangle when I create the initial gradient mesh because it allows me to make better use of all the vector points at my disposal.

This Shade of Green is Not Very Realistic, is it?

Now it’s time to start changing the colors of this gradient mesh from neon green to something that resembles an actual light bulb.  Take your green gradient mesh and restore the opacity to 100%, so that the image is a solid color once more.  Then, change the view of the canvas to Outline Mode.  You can do this either by going View > Outline or by using the shortcut Ctrl+Y.

VectorsImitateLife-022

VectorsImitateLife-023

Now there are two tools you will be using extensively from here on out:  the Direct Selection Tool and the Eyedropper (shortcut: I).  Take your Direct Selection Tool and select the vector point in the middle of the bulb.

VectorsImitateLife-024

Then take the Eyedropper and select the color of the background image as close as you can to the vector point.  In this case, the color will be white.  Now, if you turn off Outline View, instead of the gradient mesh being solid green, there will be a spot of white in the middle.

VectorsImitateLife-025

Turn Outline View back on and repeat the process to change the colors of all the vector points on this bulb.  Every vector should be made to match with colors right next to them (with the exception of the several vector points that are along the middle vertical line running through the bulb.  Aside from the ones that are attached to the outline, those should be made white, like the initial vector color change illustrated above.  We’re ignoring the filament related features of the light bulb for the moment).  When you are done, there should not be one spot of green left on this image and it should look similar to this:

VectorsImitateLife-026

In the original light bulb picture, there is a great deal of white in the middle of the light bulb before it starts turning gray.  We’re going to remedy this not by adding more vector points, but by adjusting the ones that are already in place.  If you take your Direct Selection Tool and select the center vector point, a set of handlebars will appear.  They may be hard to see against the gridlines, if they’re perfectly horizontal and vertical like in the image below, but you can tell they’re there by the four dots that end each handlebar.

VectorsImitateLife-027

These handlebars are used to control not only the curve of the gradient mesh lines, but also how far the vector point’s color extends before blending into the color attached to the next point.  If you keep the handlebars close to their originating vector point, the color will be strongest only close to the point.  If you extend the handlebars out farther, the color will extend further too.  If you extend some lengths of the vector point handlebars, and then shorten up the handlebars of the other vector points connected to them, you’ll see how much the colors are affected by these changes.  This image is what happens if you shorten the middle vector point’s handlebars, and then lengthen the outer edge vector points’ handlebars…

VectorsImitateLife-028

…And this image is what happens if you lengthen the middle vector point’s handlebars and shorten the outer edge vector points’ handlebars.

VectorsImitateLife-029

Now using the original image as a guide, make it so that the white color of the bulb fills most of the gradient mesh, using just the handlebars.  When you’re done, the mesh should looks something like this:

VectorsImitateLife-030

It’s All About the Fine Tuning

Now we have a basic shape and look of the bulb portion of this image.  However, we want to make this as realistic as possible.  The ultimate goal is to create something that, at first glance, someone would mistake for a photo of a light bulb.  So we’re going to have to take a look at the original image again.

Go back to Outline View and let’s take a closer look at the very top portion of this bulb.

VectorsImitateLife-031

As you can see, there are some rather distinct color changes between the edges of the bulb and the white portion of the middle part.  So what we’re going to do is create a few new vector points so that we can recreate this more defined gray area.  Take the Mesh Tool (shortcut: U) and make a point where illustrated below.  Then take the Eyedropper and select the gray color that is right next to point you just made.

VectorsImitateLife-032

Now repeat this action, but this time use the Mesh Tool to create a point right below the one you just made, right where the white/light gray area meets the dark gray.  Use the Eyedropper to select the nearby color for this point too.

VectorsImitateLife-033

Now when you go turn off Outline View, you’ll see that there is now a more defined gray area where you made those points.

VectorsImitateLife-034

VectorsImitateLife-035

VectorsImitateLife-036

It looks a little unnatural for the moment, but this will be fixed after we go through and do some more editing.  Adjust the handlebars.  Add additional points where necessary to the gradient mesh.  It will take some time, but in the end you will end up with a bulb that looks like this:

VectorsImitateLife-037

Compare this image with the original light bulb…

VectorsImitateLife-038

Pretty close, isn’t it?  Here is a look at what the gradient mesh for the bulb looks like after all my tweaking to make it resemble the original:

VectorsImitateLife-039

As you can see, I created more closely packed vector points and lines around the areas where I wanted to add more detail, which were at the edges and their varying shades of gray.  In order to edit some of those points, particularly around the places where they bunched up really closely, I would have to zoom in anywhere from 200% to 800% to be able to adjust the vector point colors and handlebars.  That attention to detail, though sometimes time-consuming, will pay off in the end.

VectorsImitateLife-040

Just Because You Can Doesn’t Mean You Should

Let me let you in on a little secret (well not really a secret… more along the lines of common sense reminder).  Even though this is a tutorial about using gradient mesh in Illustrator to recreate a realistic image, is that reason enough to make EVERYTHING in the image out of a gradient mesh?

Simply put…

No.

If you can get away with replicating parts of the image using regular vector shapes with creative use of gradient fills, strokes, and other filters provided by Illustrator, then by all means do it!  It will save you time and maybe even a little bit of your sanity in the long run when doing gradient mesh images.

Case-in-point:  The filament of the light bulb.

The filament of the light bulb is made up of some very thin pieces of metal with even thinner pieces of wire suspended or placed between them.  In my opinion, it is not necessary to use a gradient mesh because their appearance can be replicated using some very thin strokes for the wires, and then using some shapes with gradient fills for the metal.

First, turn off visibility of your Bulb layer so that you can see the original photo.  Then make a new layer and name it “Filament”.  Then zoom in so that you can clearly view the filament portion of the bulb.  Turn off your fill color, make your stroke color some bright, non-black/white color, and use your Pen Tool to trace the outline of one of the metal pieces holding the wire filament in place.

VectorsImitateLife041

Then, with the shape selected, open up the gradients palette and give the shape a linear gradient fill with a .75 pt stroke.  The stroke should be colored #0D0D0D, and the fill should be #383838 on the far left, #575757 at 50%, and 1F1F1F on the far right.

VectorsImitateLife042

VectorsImitateLife043

When viewed up close, this clearly looks like a flat shape.  However, when viewed from its normal dimensions or smaller, it becomes very hard to tell the vector object from the original.  Can you tell which is which?

VectorsImitateLife044

VectorsImitateLife045

Now, using shapes and lines at your disposal finish building out the filament portion of the light bulb.  When you’re done, your partially completed light bulb should look something like this when both the Bulb and Filament layers are visible:

VectorsImitateLife046

VectorsImitateLife047

Divide and Conquer

Now that you know the basic for manipulating gradient meshes, all that’s left to do is to finish creating the rest of the light bulb.  What you will want to do is to single out specific components of the original image to recreate.

Here is an example of one way could subdivide the remainder of this image.  If it’s easier for you, go ahead and further subdivide larger portions of these components into smaller, more manageable pieces.   Take your time, pay attention to details, and cut corners where you feel that you’re able to.  Also make sure to create a separate layer for each component, so you can keep your work organized.

VectorsImitateLife048

When you’re done, you should have a gradient mesh light bulb that looks as close to a realistic one outside of an actual photograph or 3D rendered object.  In Illustrator, the image may look slightly grainy.

VectorsImitateLife-049

Here is a screenshot of just the gradient mesh of the above image, sans all the colors.

VectorsImitateLife-050

Though it might appear grainy in Illustrator, when you export this image as something like a Jpeg, the gradients become smoother and more refined.

LightBulb-Jpg

The files used in the creation of this tutorial can be downloaded here: [download id=”61″]

In Conclusion

Using the techniques taught in this tutorial, one can go about creating many different kinds of realistic vector images using gradient meshes.  The techniques used here work best with images of things that can be cleanly divided into segments, such as mechanical devices, automobiles, insects, instruments, plants, etc.  It is also very possible to recreate more complex organic objects using gradient mesh, such as birds, fish, reptiles, mammals, and even human beings.

Subject matter like that will be covered in future tutorials at a later date.  Till then, I hope that I was able to enhance your knowledge of gradient meshes and Illustrator by another degree.

All Gradients Start Off with a Single Color:

An Interview with Bill Beachy: Go Media President

GM_header

After countless hours of looking at type, learning how type and image work together, filling up sketchbooks, learning how to code HTML and CSS and even sleeping in the art building, two soon to be “little fish” in the big sea that is graphic design wanted to get to know one of Cleveland’s heavy hitters (Go Media President William A. Beachy).

Where did you receive your education?

I attended The Ohio State University in Columbus Ohio. My degree is in Industrial Design which included studies in product design, interior design and my focus, visual communication. Ohio State’s design school is highly competitive only accepting approximately 60 students per year.

When you got out of school what did you see yourself doing? How does that match up with what you are doing now?

When I first graduated I immediately attempted to break into the comic book industry as a writer and illustrator. When I couldn’t get someone to hire me I decided to self-publish and open my own studio. That failed miserably. Eventually I found that I could get enough jobs illustrating to fill that need and spend the rest of my time doing layout and running my company. In truth, I’m not far from where I expected to be. I’ve always wanted to run my own company, I’ve always wanted to draw and I’ve always wanted a cool warehouse studio. Right now I have all of those. It didn’t come as easily as I had imagined, but I’m here – so I’m thankful for that.

Who influenced your career choice? Any reason you chose design?

Todd McFarlane. He is a comic book artist. He was the most influential artist in my generation (in my humble opinion.) After I took one quarter of fine arts I realized that I needed more technical skills that I wasn’t going to get as a fine art major. I read Todd’s biography and it said he studied design. I checked out what Ohio State had to offer, and its industrial design department was ranked 2nd in the nation. All I had to do was take a portfolio exam and beat out 300+ other students that were applying for the 60 spots. I got in!

GM_1

What made you want to merge businesses with Next Level Multimedia? Did you think it would make you more successful together than separate?

When you run a business there is a LOT of work beyond just design services: billing, accounting, legal stuff, payroll, advertising, selling, on and on and on. One person only has so many hours in a day. I had watched my friends at JakPrints build their business much faster than I was. I’m sure a large part of it was that they had a few partners to divide up the load. There is truly efficiency in division of labor. I could focus on the book keeping and Chris could study programming code.

The reason that I picked both of my partners; (first Chris Wilson then Jeff Finley) was because they were both doers not talkers. When I was running around town passing out flyers – there was Chris doing the same thing. When I was at the printer picking up stuff, so was Chris. He was out actively building his business. Both him and Jeff were quick to take action and build their business. So, that’s why I knew they would make good partners.

Not only did I think it would make us more successful if we worked together, it DID! I couldn’t imagine running this company without their daily support. I think we have a magical partnership. There is serious mojo here at Go Media. We love what we do and the sky is the limit.

Your website refers to Go Media as a Progressive Design Studio, what does this mean to you?

It means that we’re on the “cutting edge” to use a cliché term. Actually they have another term – the “bleeding” edge. That means we’re sometimes so ahead of the curve that people don’t get it. Not designers mind you – I think fellow designers get us easily. But when you’re on the bleeding edge of design or technology sometimes there is a price to pay. It means you make a sacrifice for your love of the art. You say: “everyone might not get this, our clients may tell us to dumb it down, but we’re going to invest the time and energy to do it the very best and deal with the consequences even if that means we lose money.”

What makes Go Media different/better than other design studios in the area?

Hmm, I wouldn’t necessarily say better. Each firm has its own strengths. Our strength is artistry and creative thinking. We got started working in the entertainment industry so, that kind of set up a really high standard for the art coming out of our firm. It also lead us to hire characters that I would say are “out of the box.” One of our most senior designers (Oliver Barrett) is a bass guitarist for the rock band Above This Fire. These guys are seriously hard-core musicians. Several other employees have also put together a punk band. Last fall they held a concert in our building. And that all fits right into what makes Go Media special. We’re highly creative and expressive individuals that are ridiculously passionate about the things we do.

GM_2

Music seems to be the connecting point for many people in your firm. Is doing work for the music industry something that you strive to produce? Or does the music industry find you?

It’s funny how I answer one question and it leads immediately to the next. We all love music – who doesn’t. And there is a rich history of innovative art and design being associated with music. Whether it’s the packaging, apparel, music videos or gig posters, music has been one of the very best vehicles for driving innovative art. Initially we made massive efforts to break into the music industry. Once we had done that and became known as a reliable go-to creative firm, then they started seeking us out. It’s been great.

What do you think about knowing how to design for the web? Most people seem to think it’s a must for people coming out of school. Do you agree?

Ha ha… well, do you want to find a job and make money? If you answered yes, then I highly suggest you dive into web design. The facts are that the demand for web design is massive, and you can charge more money for web design over print design. The number of students coming out of school with GOOD web skills is not what it should be. No offense, but print designers are a dime a dozen. I get 5 resumes a week from designers looking for work that don’t know web. I’m not saying you HAVE to have web skills. But I would guess that web skills will quadruple your chances of landing a job, probably more. And the job you do get will pay more.

When I left school I had almost no web designing skills. But the demand was there immediately. So, I learned Go Live (a precursor to Dreamweaver) and started building websites. Since then I’ve hired lots of web designers and I don’t do that work anymore. But when you’re getting started you don’t have the luxury to write your own perfect job summary. You have to take the jobs that are available. Right now the web is where the demand is.

What would be your dream company/brand/person to design for?

Marvel Comics of course! If I could do a massive marketing campaign for the entire comic book industry, that would be amazing.

Who/What influences you now? Where you do you find inspiration?

I still like comic books. I am also influenced by my staff. They each have their own styles and skill sets. I am also heavily influenced by great business minds. Since that is now a huge part of my day, I read lots of business magazines and biographies.

GM_3

What is your process to deal with unruly clients?

We work VERY hard to “kill them with kindness.” We bend over backwards trying to keep our clients happy, maybe too much. Occasionally when we have a complete and total jerk (or crazy person) we will refund their money and respectfully decline to take on any future projects.

It’s very important to always be professional, courteous and kind. It’s a small world. The older you get the more you realize that the things you do get around. When you kick ass for a client, they tell their friends. And when you make a mistake, they tell their friends that too.

The trick is to not give them any reason to be unruly in the first place. You need to communicate clearly from day one. You have to establish a good relationship and set reasonable expectations. “Under promise and over deliver” is a phrase we use around here a lot. If you say it will take 10 days to complete this project and you complete it in 7 – you have a happy customer. But if you tell them it will take 5 days, and it takes 7 – you have an angry client. In both cases you did the job in 7 days. But the expectation of the latter was higher. So, it’s important to manage those expectations!

Explain the Go Media hiring process?

I ask potential employees to send me a cover letter, resume and 5 jpeg samples of their best work. If they follow my directions I keep their documents on file. When it comes time to hire, I start reviewing everyone’s files. But I also recruit potential employees. The truth is that Go Media doesn’t hire a lot of people. We have almost 0 turnover. Our employees are happy. We haven’t hired a single new designer in over a year and a half. So, by the time I need to hire someone – there is probably someone in the community that I’ve already identified as the next Go Media employee. They need to have mad skills and the right attitude.

Once we’ve identified several candidates we will have interviews and maybe go out for a drink. Sometimes getting out of the office is a good opportunity to get to know the REAL person.

When we do hire it’s on a 3 month probation period. Sometimes designers will have these AMAZING portfolios but when it comes time for them to perform they’re nowhere near that talented. I wonder where all the art in their portfolios comes from.

In the hiring process, do you look to further develop that personality in potential employees?

Personality is very important. This is a check-your-ego-at-the-door firm. Work ethic, loyalty and humility are hugely important to me. I love my employees and will “go to bat” for them. I expect the same in return. When the chips are down we will all have to work to right the ship. And when the times are good, I share the profits with my staff.

GM_4

What’s the most important thing you look for in a potential employee’s portfolio?

You have to be good and well rounded. I want to see a variety of skills, because you’re going to need it all. For instance, I will get a lot of nice portfolios from illustrators. Their drawings may be amazing, but if I ask them to layout a print article – they will be clueless about how to organize the text. That’s a problem. Here is a base set of projects you should have in your portfolio: Illustration, corporate Identity (logo), brochure (with lots of text layout), web page and some specialty skill like 3d modeling or animation.

What’s the best advice you could give soon to be Graphic Design graduates, preparing to enter the work field? What do you wish you had known at the time?

Other than my previous lists of skills that I think people need, I would emphasize humility. The real world is not necessarily what your teachers taught you. I have a lot of designers come in here with some false impressions of what their lives as designers are going to be. The real world is not a stereotype.

One way to quickly get an idea of what the real world is like, while simultaneously increasing your value to potential employers is to start freelancing. Do it while you’re still in school. Walk door-to-door from business to business and volunteer your design services for free. The experience of working with a real live customer will help you learn faster than any book or any class.

Any other comments, words of wisdom or advice?

Keep an eye on Go Media, our GoMediaZine and the Arsenal. We’re working VERY hard at enriching the design community. We have tons of tutorials, products and services that will help designers coming out. So, just stay in touch with us and we’ll keep kicking ass for you.

This questionnaire was prepared by two soon-to-be-graduates of Kent State University with bachelor degrees in Visual Communication Design, Lauren Goldberg and Adam Smith.

Design a Vintage Poster with Vector Pack 16

Introduction

When you think about the design process, what comes to mind?
I believe it is the combination of thoughts, mixed with emotions and pure forms that capture a person’s attention. We are all part of this thing called “madness. ”

The definition of Madness:

  1. 1. The state of being mad; insanity.
  2. 2. Senseless folly: It is sheer madness to speak as you do.
  3. 3. Frenzy; rage.
  4. 4. Intense excitement or enthusiasm.

In this tutorial, we’ll be modifying vector elements from Vector Set 16 to create a retro-vintage poster. Along the way we’ll uncover tips in Illustrator and Photoshop that can lend your designs a little extra TLC. I tend to work in both Illustrator and Photoshop. Both programs have their strengths and weaknesses, but together they’re unstoppable.

Phase one

Collection of assets and file setup in Illustrator

Before we start we need to gather our assets. We will be using a few pieces from the fresh release of Vector Set 16.

I’ve looked through the Set and selected the images that I think are best suited to create a vintage, retro looking poster. The use of vintage pieces mixed in with some color radials will really bring the madness together!

I choose these vectors to show how flexible they can be. Please, go ahead & have fun! Experiment, tear them apart, change their color and size to make them yours.

Picking the right background for your vintage poster is vital. Paper, cardboard, and grunge textures can really bring your poster to life. This is a good time to look for some inspiration, so take a look at a few Bauhaus poster designs.

Author’s Note: Experiment with different paper textures. Here are some free options.
DeviantArt
Zen textures
Lost and taken

If you’d rather just use the background that I did, you can download it and get started.

[download#59#nohits]

Step one

In Illustrator create a new document. Set the color mode to RGB and set the size to 15×20 inches. Next, import the background texture file.

Author’s Note: If you use another background image make sure to re-size it to 15×20.

Step two

Copy the retro loop image from Vintage Elements and paste it into your document. You will notice these are very flexible, you can change colors and re-size different individual sections of the shape.

Using the Direct Selection Tool (white arrow), select the top end of the four lines and drag upwards to lengthen the loop. Repeat this on the left side.

If you’re having trouble editing this shape, take a look at this video overview.

Step three

The color palette plays an important role in setting the mood for a retro poster. If you’d like to use the same colors that I’m using, download these color swatches for free.

[download#60#nohits]

Now lets change the color of the segments in the loop image. With the Direct Select Tool, select a line that you’d like to change.

Hold down SHIFT and select all the segments of the line. Now select a color swatch to change the color of the line segments.

These are the ones used above: Blue-green #66A9A6 Tan #D9D5A9 Red B93826 Black 000000

Author’s Note: Experiment with colors, you’ll surprise yourself sometimes. For added inspiration in the color selection process, visit Colourlovers.com – a great community site with all sorts of color schemes and patterns.

Step four

Let’s add a drop shadow, this will help create some separation from the background.

Step five

Now it is time to bring in other vector elements to round out the poster. I added one mean-looking Ape from Primates and the state of Alaska from Maps of the USA to the eye of the loop.

Make sure these new shapes are arranged underneath the loop that we just altered in steps 1-4.

Author’s Note: I added some quick homemade ink drops for fun right under the chin.

Step six

Lets use this color wheel from Color Radials to give the background some color. Set the blending mode to overlay and opacity to 22%. Now select and drag from the corner to make it larger.

Step seven

Oooo, that looks good. In fact, lets add another Color Radial and place it just above the primate below the vintage element as shown above. Make sure the blending mode is set to multiply and opacity is 49%.

Author’s Note: Use your best judgment for size and placement of vectors.

Step Eight

Now select ctrl+c and ctrl+f to place in front, select and expand it till the center is filled with the smaller circle. Make sure the transparency is set to multiply and opacity is 49.

Step nine

We’re using the same color radial so re-size and place below the chin of the ape.

Step Ten

Add a compass rose from the Maps Vector Pack, and lets set the transparency to multiply and place it over the color radial as pictured above. Now we’re done with adding the vectors and creating the poster’s composition.

Phase Two

Adding Text

Used the font Blockhead and played with the color and transparency to give it a washed out feel. Simple but effective.

  1. 1. Font size 120 set the AV to 50
  2. 2. Change color to 66A9A6
  3. 3. Now go to effect and choose style inner glow. Set mode to screen, opacity to 84 with a blur of 15.2
  4. 4. Go to filter, click on style and add a drop shadow. Set mode to multiply, opacity to 75
  5. 5. Make sure the font transparency is set to multiply.

Phase Three

Creating a vintage pattern background
Alright. We’ve finished the foreground elements, but I think the poster is still missing something. Let’s add in a retro background pattern and see where that takes us. To make the background, we’ll grab a simple shape from the Vintage Elements Vector Pack.

Select the shape and change it’s color to FCBA63. Next, change it’s blending mode to Multiply, and lower opacity to 38%. Now we’re ready to stretch Adobe Illustrator’s legs a bit. Drag the shape to the right, holding Shift (constrain movement) and Alt (drag duplicate). Now, without clicking anything else in between, hit Ctrl+D to duplicate this move eight times. Ta-da! A row of eight vintage shapes.

Watch the video below to get caught up and see Ctrl+D used to finish out the background.

The end of Part I

Congrats! You’re done with your layout and work in Adobe Illustrator. From this point on we’ll be working in Photoshop to add fairy dust & final touches. Get a load of the image below for a sneak peek at the final piece. We’ll be covering these techniques this Friday, so stay tuned for part II.

Share your thoughts, questions, and comments with us below. If you take the challenge to follow this tutorial yourself, post the results in our User Showcase and link to it in the comments.