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.

Timeline: Version Control Plugin for Photoshop

gomedia-timeline-header

Timeline by PixelNovel is an interesting version control system built for designers who use Adobe Photoshop. As far as I am aware, there’s really nothing else like this out there for Photoshop users.

Timeline allows you to save and review a file’s history and save file versions and get file versions without switching from the main Photoshop window.

timeline-screenshot

Forget having to save multiple versions of the same Adobe Photoshop file with arcane file names like File1.psd, File_final.psd, File_ForJohn.psd and so on. Timeline allows you to use one .psd file, and all versions of your file will be safely kept on the pixelnovel.com server and you will be able to access them at any time from Photoshop or from your web browser.

Version control system is a software system that allows you to easily store and manage multiple versions of the same file. When you’re at a stage where you want to save a version, you just click a button in the Timeline palette in Photoshop and your file is saved as a version on the PixelNovel server. Timeline also allows you to add comments to each saved version.

The Timeline plugin adds a new panel into Adobe Photoshop that has thumbnail previews of all your saved versions. Hovering your mouse over any of the preview thumbnails will reveal any comments for this version. Click on any of the version thumbnails, press the “Get version” button in Timeline and voila — the selected version will be delivered.

The online viewer is also great for showing a client multiple versions of a file.

Pricing for the Standard account is $1 per GB/per month with a 5GB minimum. Pro accounts get $0.80 per GB/per month with a 20 GB minimum ($20/month). Head on over to the Timeline page and check it put for yourself.

Also available for all you Subversion geeks out there is a standalone version of Timeline. Pricing is $60 per license, with bulk license discounts. Works with both PC (XP and above) and Mac (10.4and above). Requires Photoshop  Adobe Photoshop CS2, CS3 or CS4.

(via TUAW)

Blank Canvas: Where Do You Freelance?

blank-canvas-where-do-you-freelance-header

This installment of Blank Canvas is directed towards you freelancers and self-employed illustrators and designers out there. Go Media wants to know: where do you work?

There are quite a bit of options for those who can choose where to get their work done. Some prefer the “Fortress of Solitude” route, while others need some sort fo social interaction whether it be a coffeeshop, library or perhaps even sharing a coworking space with others.

So where do you work? What decisions led to that choice, and has it changed over the years? Pros and cons? Wishlist? Advice? Warnings? Let us know in the comments section below.

I’ll start things off with my situation:

I primarily work from a dedicated second bedroom in my apartment. I have plenty of space for a large work table, a drawing table (which I use for storage more than anything else as of late) as well as bookshelves, a flat file, etc. The solitude of working from home can be an oasis at times, allowing me to focus on my work and keep me clear from distractions, but it can also get to be a bit isolating at times.

I’m working towards making more of an effort to get out and work at local coffeeshops and restaurants to break up the cycle, but many times I find myself distracted and far less productive when I am working away from home.

With the internet, mobile phones and laptops/smartphones, there are many options for me to work away from home on the business side of my illustration and design work, however I find the creative process needs to be done primarily at “Command Central”. From back when I was freelancing around some regular off-site work, I’ve grown into the habit of associating the work with the location. Perhaps it’s just the opportunity to work distraction-free, but I am sure at least some of it is just plain habit.

Recently I’ve learned the finer distinction between introverted and extroverted personality types (it’s probably not what you think) and discovered that I lean towards the introverted side, which also plays a factor in my choice of workspace as well. Introverted types aren’t necessarily anti- or non-social, they just tend to “recharge their batteries” and work/concentrate better in solo.

OK readers, your turn—GO!

Mac Vector Apps

gomedia-mac-vector-apps-header

Our recent “Blank Canvas” post asked the question: “Adobe Or Not?“. As a followup, here’s a quick web roundup of some alternative vector graphics software applications for Mac OS X. These applications vary in price from free to about $100, and each offer some nice features that may fill a gap in the feature set of your current vector graphics software.

If you’re using any of these apps, please sound off in the comments section below. We’d love to hear what you think of these, which features others should be aware of, and how you’re using the unique tools in your workflow.

Eazy Draw ($95): vector-based graphics editing for creating simple, non-photographic drawings, technical diagrams, and illustrations such as logos, icons, buttons, and stylized art.

Support for Classic Mac drawing formats including full import of ClarisDraw, MacDrawPro, and MacDrawII files.

VectorDesigner ($69.95) features a wide range of tools and smart shapes: easily create rectangles, ovals, polygons, stars, bezier curves – even convert bitmap images to vector-based drawings thanks to VectorDesigner’s automatic raster to vector conversion!

VectorDesigner even provides advanced tools for performing geometric operations, to achieve total control over your drawings (union, subtraction, intersection and exclusive-or operations)

Achieve unique effects by applying filters and Quartz compositions to your shapes and images non-destructively.

LineForm ($79.95) is the ideal tool for vector based diagrams and illustrations. Powerful features combine with a simple interface to create an intuitive artistic process:

  • Launches in under a second
  • Bezier editing tools
  • Boolean operations
  • Expert typesetting
  • Artistic strokes
  • SVG for full document import/export
  • Core Image support for real-time, nondestructive filters and effects

Cenon (free): Besides the general design abilities of Cenon, the following list of features stick out in the field of desktop publishing:

  • Color shading (gradual, radial, axial)
  • Exposing of images
  • Thumbnails of images
  • Generous text functions
  • Vectorization of images
  • Color Separation

Images can be read in the formats JPG, GIF, TIFF etc. For image procession, Cenon offers a simple and suitable function to expose images. Memory hungry images can be replaced with thumbnail images during work. This makes working a breeze even with fat images.

Text, Lines, Poly-Lines, Arcs, Rectangle, Vezier Curves and complex paths are the basic elements for graphical work. All graphic objects can be created and handled fast and intuitively. A clean layer management, grouping function, and Undo/Redo allows for fluent working in a professional environment. The graphic elements can be rotated, scaled and aligned.

Cenon also offers some special functions to punch, build contours etc. What was created for the output on CNC machines serves very well in design and publishing applications, too.

There are three different kinds of color shading implemented in Cenon. Linear in all direction, concentric and axial.

DrawIt (about $43): DrawIt is a vector editing application with support for bitmap-like image filters. Vector editing as well as the filters are completely non-destructive which means that a vector layer can still be edited even after a stack of filters has been applied.

DrawIt includes ready-to-use shapes such as rectangles, ovals and stars. Boolean operations on these shapes can create even more more complex ones.

Built on top of the vector tools is support for 50+ CoreImage filters and other effects like (inner) shadow, stroke, bevel and many more. These filters are applied in a non-destructive way which means that you can change both the effects and the underlying vector even after you added the effects because the result is never rasterized. Filters can be stacked and this too is all non-destructive and live.

Inkscape (free): an Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

Supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more.

DrawBerry (free): with layers, powerful tools, inspectors and workspace, DrawBerry is a complete and easy-to-use drawing solution featuring CoreImage filters. Some great exclusive features, like the magnifying glass or the undo history, will help you to draw more and more accurately.

Sketsa SVG Editor (free) is a cross platform vector drawing application based on SVG. Scalable Vector Graphics (SVG) is a graphics format and technology based on XML developed by World Wide Web Consortium (W3C).

Interview: Designer Paul Lee

paul lee design page header
GoMediaZine:Hi Paul, thanks a lot for being part of this interview! I’ve admired your work for awhile now, so it’s pretty great to be talking with you. You don’t have much biographical information on your portfolio site, so can you start off by telling us a little about your background? When did you know you wanted to be a designer? Are you self-taught or formally trained?

Paul Lee: I guess my interest in graphic design started when I was pretty young. I wasn’t particularly gifted in drawing or painting as a kid, but I loved to look at typefaces and copy the nuances of the letter forms or sit down with a bunch of markers and try to come up with the nicest color combination. Later in high school, my dad bought me one of the early Powerbooks, and I started fiddling around with Pagemaker and a copy of Photoshop 2.5 that I shoplifted and started teaching myself to design.

nike women

I went to college at Berkeley, and fortunately they didn’t have a design program which forced me to get a much broader education than I would have gotten if I went to art school. I majored in Rhetoric, thinking I would go to law school after graduating. But it was a crazy time in the Bay Area with the dot-com era at it’s peak. There was a voracious appetite for designers at the time, even for an untrained amateur designer like myself. So I worked as a designer while going to school and fortunately, it got my foot in the door. I learned a lot and I began to think that I could actually make a living doing what, until then, had just been a hobby. After that I attended the MFA program at Yale for a year, but I dropped out because I was young and stupid. And I’ve been working since then thankful that I’m designing rather than writing depositions or preparing legal documents.

GoMediaZine:The white frame & distinctive logotype is a great way to identify your work around the web. I’d love to hear about the concept behind your personal mark/logo. What was your process in developing it? What significance does it have?

Paul Lee: I liked the idea of having my first name be the logo. There’s something offhand and chummy about first names that I thought felt good and would be an interesting counter balance to the work which I feel is sometimes a little cold and too polished.

As for the white frame, it really just started with the impulse to brand the work with a watermark so that if a particular piece got passed around, at least people knew where it came from and where they could find more if they wanted to. At first, I wanted to do something more subtle, placing the watermark on top of the work, but eventually I just went with the white frame. If you go to the website and scroll down the page, you’ll see the logo over and over again. It’s definitely not subtle, but hopefully you’re more likely to remember the name. That was the idea, anyway.

GoMediaZine:Can’t argue with that logic. Seems to work pretty well, I’d say. Your logotype was what drew me into your site the first time. Now, can you tell us a bit about the inspiration / influences for the angular shapes that appear in a lot of your work? Could you share a few of your favorite designers with us?

Paul Lee: Not sure where the fascination with these angular shapes comes from. And it’s definitely not just me. These shapes seem to be in the design zeitgeist at the moment. If I think hard, I think my fascination started years ago when I started noodling around in some primitive 3D program (can’t remember which one). The technology back then was so crude that whatever was rendered never looked all that great, but I always thought that the wireframes had an austere beauty to them. They were technical and raw, like the way a machine might see the world. Years later, I guess those wireframes have found a way into my aesthetic.

album art

As for favorite designers, I’ve always admired and been humbled by the work of Mark Farrow. With a few gestures, he’s able to evoke so much with his work. The economy of his design always impresses me. Not surprisingly, then, I’m also a big fan of Peter Saville. Mostly, I’m inspired by his inventiveness, trying something graphically new and interesting with everything he touches.

GoMediaZine:Ah, I agree that wireframes can be beautiful. Sketches too – sometimes more interesting than the final colored piece.
Speaking of sketches, let’s talk a little bit about your workflow. Do you prefer working in Photoshop or Illustrator? What are some pieces of the process (without giving away too many secrets, of course) that create your incredible style?

Paul Lee: My pencil sketches are actually pretty awful. I sometimes wonder if I got into design because I was so bad with my hands. When I got my first Mac, I was so relieved to learn I could release a lot of my creative energy without having to pick up a pen or paintbrush. So yeah, although sketching out a few ideas are part of my creative process, they’re just to remind me of ideas I have, but definitely not anything pretty or interesting and I would be embarrassed if someone flipped through my notebooks.

In terms of process, I’m afraid there isn’t anything too enlightening to reveal. I get a few ideas quickly down on paper and then dive right into Photoshop. I find that starting out with only a vague idea of what I want the finished product to be is best because it then allows you to roll with all the happy accidents and revelations that come from actually working in the application. I think it allows the work to be more spontaneous and surprising. When I start out with a very rigid finished product in mind, I find it sucks the creativity right out of the process, making designing very tedious and the finished product less interesting.

milk poster

The main application I work in is Photoshop. For fine-tuning pixels and colors, no other application comes close. The secondary application I used to use most often was Illustrator, but more and more, I find that that secondary application is now Maya. It’s a vast program that I’ve only begun to scratch the surface of. Working in 3D has really opened up a whole new world of visual possibilities. My feeling is that in the next few years, knowledge of a 3D application will be par for the course for any designer. If it isn’t, I really think it should be. Animators and Illustrators have worked in 3D to amazing effect, but I really think it’s time for designers to bring their sensibilities to 3D. It’s a whole new dimension out there to be explored. It’s changed my design dramatically and visually, and it’s opened up a whole new space to play in.

jeep

GoMediaZine: A lot of your work features beautiful photography. What are your thoughts about using stock photos and artwork? Do you usually process stock until it’s unrecognizable – or at least greatly enhanced? The photos in your work seem to share a beauty that’s beyond the typical shot.

Paul Lee: Oh boy, there are definitely many times I’ve spent all day looking for that perfect photograph among a sea of stock photography mediocrity. Photography is often the anchor for an entire composition, setting the mood and tone, so it’s imperative that you get the right shot. Once I do find the right shot, I do a couple color adjustments and not much else. I find it much more effective to find the right shot from the get go, rather than to manipulate the photo into something it didn’t start out as.

After feeling a little burnt out by design, I picked up photography a few years ago and since then it’s become a great passion and hobby of mine. You can see some of my photos here: http://www.paulleephoto.com (My dirty little secret is that I do wedding photography on the side to finance my photo gear which gets really expensive!) Learning how to use a camera and understanding lighting, color and composition has really developed my eye for the way I use photography in my design, cheesy wedding photography notwithstanding.

paul lee photography

GoMediaZine: How do you get that nice grain / texture that’s very subtle in your colors?

Paul Lee: It’s mostly different combinations of Photoshop adjustment layers and texture overlays. I usually start with a “Curves” adjustment layer to get a strong contrast. Then a series of adjustment layers on top of that to control for saturation and color balance. The graininess comes near the end when I place a 50% gray fill on top of everything and set that layer as “Overlay”. Then I apply the noise filter to that layer and adjust the graininess to an appropriate level. That’s the simplified version of it, anyway. It’s mostly trial and error and tinkering with different settings until I get the desired effect.

GoMediaZine: How do you get most of your design work? Do you go direct to the client or through an agency or rep company?

Paul Lee: I freelance for agencies that have relationships, or are in the process of building relationships, with clients.

GoMediaZine: What type of work do you aspire to do in the future? What’s your ideal project?

Paul Lee: I see design work as a spectrum. On one end is design that’s strictly confined (by a client’s demands, by technical constraints, by strict brand guidelines, etc.). On the other end of the spectrum is design that’s completely unfettered by any constraints or parameters. The confined side of the spectrum sounds limiting, but there’s actually quite a bit of satisfaction that comes from working within tight constraints, finding the right balance and solving complex problems. The freer side of the spectrum sounds like a lot of fun at first, but designing with no constraints is actually quite paralyzing and can be aimless and meaningless.

To answer your question, on that spectrum, the ideal project is somewhere in the middle, perhaps leaning slightly more towards the freer side of the spectrum.

golf page

GoMediaZine: Seems like you have a strong sense for web UI design. Do you also do the development? If not, who do you work with?

Paul Lee: I’ve tinkered in HTML and Flash so I have a general understanding of development, but my code is pretty awful, held together by masking tape and twine. So, no, I don’t do any development. It’s usually handled by the site dev team at the agencies I work for.

GoMediaZine: What are your 3 favorite websites?

Paul Lee:

ffffound.com
gizmodo.com
npr.org

GoMediaZine: Hey Paul, it’s been really fun picking your brain and hearing your thoughts on life & design. For myself and our readers that are familiar with your work, it’s been quite a treat. For those who met you for the first time in this interview, I’m sure it’s been inspiring. Would you like to leave us with some words of wisdom?

Paul Lee: You know, people often ask me where I get my inspiration from. And this question always takes me aback because I don’t think I ever designed something as the result of some deep artistic inspiration or revelation. Most of the time, I’m just noodling around in Photoshop, seeing what looks interesting and running with it. I guess my closing thought, something that I’ve learned and embraced over the years, is not to take design too seriously. In the grand scheme of things what we do as designers is pretty insignificant. This may sound like a downer, but remembering our place in the world has actually done two very important things for me.

First, I think it’s made me an easier, more humble designer to work with. Since I keep a healthy distance from the work that I do, I can hear criticism and comments about my work more objectively, and the work can change and morph without me feeling like things are getting butchered and mutilated.

Second, and more importantly, not taking design too seriously gives me the freedom to explore and try new things without the weight of feeling like I have to create something of significance or merit. It’s only design, so let’s try these shapes, or these color combinations or this crazy composition. When I don’t take myself so seriously, it allows me to wander down the alleys of serendipity and whimsy. And it ultimately makes the work more interesting and novel. So in the end, the work that I create isn’t the result of some magical inspiration, but a series of accidents and discoveries that I’ve managed to corral into a finished design.

Those are my two cents, anyway. Thanks for the opportunity to share some of my thoughts out loud. And thanks for the interest in my design. You guys, keep up the good work.

Adobe Illustrator Feature Requests: Round 1

gomedia-illustrator-requests-01-header

A while back I ran a post encouraging Adobe software users to use the feature request/bug report feedback form on Adobe’s website. This time around I want to start an semi-regular feature asking our loyal readers and visitors to take action on some specific feature requests.

As Illustrator is the program I work primarily in, it always seems to have the biggest list of feature requests for me. Go figure. Seems a lot of other vector-based illustrators feel the same way, and a lot of them were former FreeHand users jarred by the switch to Illustrator.

After some extended conversations via Twitter, IM and email with fellow cartoonist and illustrator Garth Bruner, he’s put together a list of the feature requests he’s submitted to Adobe (I wish I had saved all of mine!) and graciously  shared them with me to post here. In his own words:

Here’s my list of Feature Requests I sent to Adobe via their Feature Request Form. Most of these are to increase my efficiency with Illustrator. I really want to love Illustrator and learn as many shortcuts and tricks so that Illustrator can get out of the way, and just let me create.

Anyway, if there are ways to accomplish the things I’ve listed here, I would love to be told I’m wrong ;)

The following are Garth’s wishlist, and I am publishing them here with the added request that if you find any of these to be something you’d also like to see implemented in Illustrator, that you use the Adobe Feedback Form and requests these as well. The more voices, the better.

Also, I have annotated some of these with potential workarounds for any FreeHand users who aren’t aware how to perform a certain task within Illustrator.

Objects and Selections

Enhanced Selection tool behavior and access: I want to be able to rotate, scale, and skew an item by dragging various points/areas on the bounding box. When using the Pen tool, using Command to toggle to the Selection tool works great; please add the ability to use Command+Control to toggle to the Direct Selection tool, eliminating the need to select that tool in the Tool panel improving drawing efficiency.

* In Illustrator CS4 at least, while the Pen tool is selected, one can access the most recently used Selection tool (Selection, Direct Selection and Group Selection tools) by holding down the Command key. If one chooses the Direction Selection tool before switching to the Pen tool, one can temporarily access the Direction Selection tool via the Command key and the Group Selection tool by holding down the Command+Option modifier keys. The Group Selection tool is not the same as the Selection tool, but in many instances it can suffice.

I propose that permanent modifier keys are added to all the Selection tools: Command key for the Direct Selection tool, Command+Option for the Group Selection Tool and Command+Option+Shift for the Selection tool.

Sub-select by Command-clicking through a stack of items. Adobe has already implemented this in InDesign; if one has the Selection tool active, holding the Command key and clicking repeatedly will select each object successively below one another. This is super handy and I would love to see this implemented in Illustrator.

Visual group/path differentiation: As Illustrator currently functions, one cannot visually differentiate between a group or a path on the artboard. It would be wonderful if when an item is grouped, that just the bounding box shows with no highlighted outlines.

* I would like to see this implemented as an option in the Preferences.

Text feature requests

– A visual preview of what fonts look like from the Control Bar, just like it does in the Menu Bar > Type > Font.

– The ability to increase/decrease the kearning/leading of a paragraph by dragging the side points on a text box using a combination of key commands/click and drags.

* This can be done with keyboard shortcuts: select a text box, then use the Option key plus the right & left arrow keys to change kerning; Option plus the up/down arrows will increase/decrease leading.

– The ability to select a block of text by selecting the text itself rather than the invisible surrounding text box. This is especially irritating when there are overlapping text boxes.

Miscellaneous

Select paths by the Appearance: Illustrator needs the ability to select a path by clicking on the appearance of a path (thick line edge) rather than just on the path itself. When you have 2 paths, one with a thin line and a duplicate directly underneath with a thicker path, you should be able to select the thicker path by clicking on the outer edges of the path.

Easier blend tweaking: Need the ability to modify a blend in the contextual control bar when a blend is selected. For example, the ability to change the steps in a blend there rather than have to go to Object > Blend > Blend options… every time you want to make a change.

* Agreed, editing a Blend is a big pain in the neck as it works currently.

Copy/Paste Attributes: The ability with a key command to copy attributes from one item to another: Text, color, gradients, transparencies, effects. It is currently cumbersome to have to click on the eyedropper tool every time I want to do this, and I do it often. I know I can hit the “i” key, but not when text is selected. I’d also love the ability to copy effects at all, as you can in Photoshop (Copy/Paste Layer Style).

* A potential workaround for this is to use Graphic Styles, which can be dragged to any object.

Eyedropper Gradient Bug: When using the eye dropper tool to copy a gradient from one object to another, the gradient is copied, but not the gradient angle and placement. This could save so much time if it had the option to do so.

Align to Point: The ability to align a whole object to another object’s selected point. If this is currently possible, I don’t know how.

* The methods I am aware of to align objects are as follows (and these are under CS4): using the Align panel to align objects, select all the objects you want to align, then click on the object you want to use as the “master” object to align the others to. Aligning to point: choose the Selection tool, then click and drag on an object’s anchor point and drag to the object you want to snap to; when your cursor is over a point on the second object, releasing will snap both objects on those anchor points.

In closing

So what’s next? A few things. I want to hear back from our readers on any other Illustrator feature requests they have. Leave yours in the comments below and we’ll round up the most-wanted and run a followup post for those features in the near future.

Next, any of the above features you’d like to see in the next version of Illustrator, please copy/paste the text for the relevant feature(s) above, and submit to Adobe via their official feedback form. Yes, you’ll have to submit each individually. It will probably take about 15 minutes of your time, but if any of these features are important to you in the least, it will be worth the time spent.

The one thing Adobe has repeatedly let us know about the feedback form is that the more users requesting a feature, the more likely it is to get added to Illustrator. Sure, it’s great to complain on a blog and gripe via Twitter, but let’s take action here and put the excellent community of Go Media readers — and every other artist/designer you know — to work. We can make a change with our feature requests, but you gotta submit.

As I said, this is just the first in a series of a call-to-arms to our readers to have the software we use every day built the way we want it. I’ll be running another feature request post for Illustrator in the future, but I also want o do this for Photoshop and InDesign as well. If you have any feature requests for those applications, sound off in the comments below.

Tutorial: Killer 3D Poster Design with 3DS Max & Photoshop

gomedia-3D-poster-header

Introduction

Hello again! I was recently asked to do a flyer for a promotions company by the name of  inFamous Productions; a very popular promotion movement in Western NY mainly stationed in Buffalo.

My main objective was to create something unique that would serve as a creative campaign for a nightclub. Long story short, one thing led to another, and I came up with a poster which led to the flyer design. For this tutorial I will be teaching you guys and letting you all get ahold of the process in which I used to create this Galactic Title in Photoshop.

The tutorial will be 80% Photoshop intensive and 20% 3DS Max. Somethings to keep in mind are: 3D letters can be made in any program, be it Adobe Illustrator, 3DS Max, Cinema 4D, Xara 3D, Photoshop, etc. The great thing about this technique is that it can be translated into any 3D generating software.

I will shed light on the basics of lighting, mapping and Render Setup in the robust package that Autodesk has to offer. I don’t want this to predominantly be a 3D tutorial, thus I will not go into extensive detail on everything I do. Feel free to shoot me an email at [email protected] if you have any questions and or concerns. I can also point you into the right direction if you are interested in pursuing a design career in 3D.

Poster_Final Fill

Lets Have At It!

Begin by finding a great font. I like to browse around this site for inspiration and possible font purchases. I find that rounded san-serif texts tend to work well with this technique.

Step 1 – Setup

We can begin by launching 3DS Max and create our preferred slogan. For this, I chose “Stand Up”, since it was the name of the event. Go the Create Tab, marked by red, chose splines, then hit text. Type in what you like and line up the text as shown in the front viewport.

Create Text

2

Step 2 – Extrusion

Perfect. Now with the text spline selected we will go ahead and hover over to the modifier stack and apply a bevel modifier. Follow the settings displayed below.

NOTE The bevel settings will vary between text sizes so don’t depend on solely on mine. Mine are generally smaller because I exported my splines from illustrator. Just scroll down the arrows until you get something that looks like the preview below.

3

4

Step 3 – Mapping

Lets add some materials to this text by hitting the M key on the keyboard to bring out the material editor in Max. I am using VRAY, which is a physical based rendering engine and I HIGHLY ENCOURAGE all to purchase it or at least try it out.

This is definitely one of the best rendering solutions for any platform. Although 3DS Max and many other 3D software come with their own G.I. Solution, in my opinion, VRAY surpasses them all. For this reason, I chose to use this engine for the tutorial. You can get a hold of a demo from here.

Without further ado, lets continue on. Let’s give the text a semi-glossy white material. I absolutely enjoy white text but you can change the color to match your creative ambition.

5

Step 4 – Lighting

Lighting. I promise, this will be easy. Vray is the way my friends. We will simulate a rig for a studio lit scene without using a 3 pt. Lighting system. Find the Vray Lights and click and drag on the viewport to create the rectangular Vray lights. Feel free to experiment with different lights and shadow parameters. Remember, experimentation is key to success when using software.**

6

7

8

Step 5 – Position Text for Renderer and Create Camera

Follow the picture below. After you are done creating the camera, press F10 to bring out the render settings window:

9

Step 6 – Render Setup | Low-res and Hi-res

Rendering—one of the essential parts of finishing a project in any 3D platform. These settings are very critical, as they determine how long a render task will take and how good a quality the engine will put out. It’s always essential to set up test presets so that you can get relatively quick renders without losing too much quality.

After you are done plugging in these settings, save them as a preset. Name the preset ‘Test High’. This will now help you save time when testing out scenes.

Low-Res Setup

10

11

12

13

14

15

This actually looks OK to go ahead and use for a small production. However, I assume you would like to make this project in large prints. Therefore, I will also show you how to set up a great quality render that will probably take up about 1 hr to 45 minutes to render depending upon what hardware you are working with. Sorry—for great quality you always have to pay the price of render times.

If you really hate render times and want to get a great quality realistic looking render with max’s built in scanline render, I suggest you Google “dome light rigs for Max”. This is basically an array of lights in a scene with multiple settings that are used to fake G.I. With an ambient occlusion pass……whoa, I hope I did not lose you there. Nevertheless, the technique is out there—it’s just up to you to fish it out. Now follow the settings:

16

17

18

19

20

21

**NOTE** if you are a 3DS and Vray Junkie like myself, I would actually ignore the “X” I put on the Mode settings for each GI engine. If you are a beginner, please follow the pictures exactly. I just don’t want to cause confusion and more complexity; therefore, I chose to ignore those options. However, if you are interested in finding out what they do, Google ‘Vray Mode Settings’ and follow the online instructions. Basically what they do is help avoid flickering and lessen calculation times during animation renders by referring to the same map in every frame.

Step 7 – Saving Files for PSD

No that we have that out of the way, we are going to save out PNG’s—not jpgs, not exr’s, not tiffs, but PNG’s. We will also need to mask out the Face of the type because we are going to add a texture later on. I’m very lazy, and rather than wasting 30 minutes of my time tracing a mask of the text face in Photoshop, why not generate one from 3DS Max? Here’s how:

Step 8 – Finding the Resources

OK—now that we are done with 3DS Max, shut the program off and launch your preferred browser. Let’s look for some stock images. The picture above shows a lot of galactic activity, therefore we want to look for nebula stocks, cosmos brushes and the whole nine yards.

Here is a list of places where you can go to find amazing resources for this tutorial.

Blue Vertigo

Bittbox

iStock

Nebula Stock

SXC

Topaz Adjust

…and the list goes on. However, Google ‘nebula’, or space brushes and try to find high res brushes. I got lucky a while back and got a hold of some amazing, free royalty space brushes. I would love to share with you guys however, I don’t remember where I got them. Also, you will need to watch a brief tutorial in order to create cloud brushes:

We will use them as erasers to get nice dynamic “cosmic” clouds.

Step 9 – Setup

We have everything we need. If you downloaded brushes make sure to install them before you launch Photoshop. Lets setup our document size. I encourage you all to make this a large file because when printed large on a poster, this design really turns heads.

22

Step 10 – Mapping and Coloring

Lets begin by adding a semi dark background. Go to blending options and create a radial gradient:

23

24

25

26

Now snag this stock image and place it behind the text like so, and set the blending mode to screen. Feel free to use the cloud brush (from the tutorial above) and erase off anything you don’t want to keep from the stock. Like I did below:

27

28

So far so good. Now let’s go further. Lets begin to add our texture and color map to the extruded text. First add the Color Map:

29

30

Now we are going to do the same but with a texture map. Snag this texture from bittbox’s Flickr Pool. Lets make all the white ares pop out my bringing up the curve editor and raising the curve. Now set the blend mode to soft light and opacity of 75%. Now give it a clipping mask on top of the gradient map:

31

32

33

With the same texture and following these same steps, lets now do this to the mask layer we generated from 3DS Max:

34

Step 11 – Lighting

As you may see, with this mask layer, we have a lot more control of what we can do to the face of the text. 3DS Max is absolutely the best. Now lets create more cosmic distortion by duplicating the first stock image we used, which is the swirl fractal. Hit Ctrl + U to bring out the Hue/Saturation settings. Now go to Filter > Blur > Motion Blur. We will use this technique to create light streaks. Duplicate this layer and set blend mode to soft light to both:

35

36

37

38

Step 12 – Using Brushes

Now with the space brushes loaded, create an array of new layers. In each layer you will place a different space brush. Trust me, you do not want to go ahead and paint all the different brushes in one individual layer. We want to create a dynamic collage, therefore, we need every element in their own individual layer.

Experiment with different shades of green and yellow to create more harmony. You’ll want to switch from brush to cloud eraser in order to get rid of hard edges  in a non-destructive way. Watch as I do it:

39

40

41

42

43

Step 14 – Adding Lights

Now lets create an array of circles with different hues. Blur them using Gaussian blur with a setting of 97.4:

44

Continue adding lights to the comp. Try differentiating the blur densities.

45

46

Step 15 – Brushing Continued…

Lets keep on brushing more cosmic relief. Now lets add depth by brushing in front of the letters since we have spatial design behind the words. This will create a sense of interaction among the elements and will make the text seem as if it is part of the composition rather than look like it was pasted on. Use your creativity and imagination to determine size and colors of the brushes. Continue brushing:

47

48

50

50

51

Step 16 – Fades

Next I will show you how to create fading designs:

52 from That Dude on Vimeo.

OK now that I have shown you how to do this. Repeat this step until you are happy with your light streaks.

53

54

Step 17 – Line Design…

Now we are going to create the intricate line pattern behind the letters. As complicated as it may seem, in reality it is fairly easy. Choose the Line shape tool, with an empty path selection as shown in the video below. While holding shift, create continuous lines from left to right. Go to Brushes and create a simple scatter brush by following along with the video below:

56

Step 18 – Background

Now lets add a final texture to the background layer. Google watercolor textures. When you find one that you like, import it into your comp. and set the blending mode to soft light and the opacity to 75%. We are all set!

57

Step 19 – Topaz Filter

Ha….I lied, we are not all set yet. We have one final step. You can skip this if you like, however this will give your final piece more continuity. After you have downloaded the lovely trial version I posted above, go to Filter > Topaz Adjust and scroll down to the presets and click on Portrait drama. Apply the preset and you are finished.

Voila—now instead of doing the various techniques I showed in my previous tutorial, you can now perform them with the click of a button, but at a monetary trade off.

I hope you all enjoyed the tutorial, and hope it wasn’t too complicated. Comment please and let me know what you think before I move on to the next tutorial.

57

58

I am once again providing all of the files used in this tutorial: Stand Up tutorial source files [Go Media]

I hope this tutorial was helpful. Lets see some submissions of this technique in the Go Media User Showcase. Thank you for your support and happy designing.

Also, be sure to check out my portfolio and my previous tutorial.

Blank Canvas: Adobe Or Not?

blank-canvas-adobe-or-not-header

It goes without saying that Adobe is pretty much the industry leader in professional-level graphics software. But that isn’t to say that there aren’t plenty of other options out there.

Go Media Zine wants to know: Adobe or not? If you do use Adobe products, what version(s) are you using, and why? If you haven’t upgraded, is it a financial or a feature reason?

If you’re not an Adobe user, we want to know what software you’re using to edit and manipulate photos, sketch, create vector art and do page layout. What do these software applications offer that you prefer them over the industry leader? Or is it a financial or philosophical choice?

As usual, I’ll start things off:

I am an Adobe user. I use the Creative Suite CS4 Design Premium which includes Photoshop, Illustrator, InDesign, Acrobat Pro, Fireworks and Dreamweaver. As a vector-based illustrator, I primarily use Illustrator as well as Photoshop for my sketching, in conjunction with a Wacom Intuos4 graphics tablet.

I’m a pretty big software geek, so I tend to try just about every graphics software app that comes out. I’ve yet to find a raster or vector editing/creation app that I’d replace Photoshop or Illustrator with, but have found some great alternatives as well as niche tools. InDesign I am a huge fan of, and besides Quark I am not aware of any competing apps out there—at least not on the professional level. I think one reason I stick with Adobe apps is the “industry standard” nature of them. Seems everyone has a copy, even if it’s not their primary tool for the job.

I see many fellow illustrators on Twitter griping about Adobe apps crashing or taking forever to launch, but I don’t have that experience at all. I suspect many who experience these issues may need to upgrade their RAM. If you don’t have at least 2 GB and preferably 4+ GB on your machine, that may be the culprit.

Overall I am pretty pleased as an Adobe customer, however I know that isn’t the case for everyone, and we want to know what your take is on the tools you’ve chosen to use. Please sound off in the comments section below. And let’s try to refrain from bashing any particular software company.

Go!

Von Glitschka – Adobe Illustrator CS4 Guru

gomedia-von-glitschka-header

If you aren’t already familiar with Von Glitschka’s art, you should be. An ‘illustrative designer’ as he’s coined it, Von’s work is a tour de force in the vector art world. Flexible and versatile in both style and technique, Von’s unique talent shines through in every creation that flows from his vector tools.

Go Media goes in-depth with this master of vectors, and Von shares some insight on the techniques behind his creations using Adobe Illustrator CS4.

BACKGROUND

Tell us a little bit about yourself. What does Glitschka studios specialize in?

Creative ideas. That may seem like a condensed response but it’s true. People hire me for my ability to take their project and execute a well crafted idea. Most of these ideas are carried out through what I call illustrative design. Leveraging illustration through a design context.

Tell us about your first experiences with Illustrator. What version/features were you using?

I once was a diehard FreeHand user. I used FreeHand from version 2 until version 11a, which was a beta never released to the public. I’ve dabbled with Illustrator since version 5 but used to only use it to open files, save files or check color – which ironically enough FreeHand sucked at.

Back in 1997 I worked for Upper Deck Company in California. Our art department had around 25 designers all using Illustrator and I was the sole FreeHand user. It worked fine, there were never any issues and I could do way more than the Illustrator users at that time. I continued to use FreeHand as my core drawing application and augmented it with Illustrator whenever I needed too.

When Adobe bought Macromedia in 2005 I saw the writing on the wall. I held out for almost a year and then a Portland ad agency hired me to create a poster to promote Creative Suite 2 (CS2). They assumed I used Illustrator, and I didn’t tell them I didn’t and forced myself to learn it in about a week. (More about this story here.)

So from late 2005 until now I’ve been using Illustrator as my primary weapon of mass creation. The first year was frustrating, losing features I had grown to love. But in all honesty I can say now I wouldn’t want to go back. (More about my switch here.)

I currently use Illustrator CS4. I don’t get into tools like the Blob Brush, it just doesn’t fit my personal creative process. But I really love the blend modes. Being able to layer colors to achieve a rich detail is something I could never do in my old app. The simple fact is Illustrator facilitates and brings to life my artistic passions.

tickles

How did you get started using vector art? Tell us about your experience of the transition from traditional media to digital.

For the first five years of my professional career I worked at a large sportswear company in Seattle. Everything was drawing by hand, shot on a stat camera and hand separated into film positives. True craft and skill was needed to pull off design and illustration well – something that’s unfortunately being forgotten in our industry now.

Don’t get me wrong, I love digital, it has equipped me to produce far easier and with much more control than ever. But the computer has also lowered the bar in terms of what innate level of skill and craft one would need to even consider this a career as a designer or illustrator. So the digital tools have enabled a legion of marginal talent to survive. But every industry deals with that at some point in terms of progression I guess. I just hope future software doesn’t cater to the lowest common denominator, but rather pushes the higher-end users instead.

Even though I consider myself a digital artist I think it’s important to have solid, refined analog skills as a designer. In other words it’s important to be a good drawer whether or not you ever want to be a full-blown illustrator. (More about my view on this here.)

WORKFLOW

For your workflow, what are the biggest benefits of a vector-based workflow in Illustrator over traditional media?

Flexibility to explore variations in content and color, edit, refine, adapt and repurpose with ease across a broad range of technologies and media formats. Vector-based art’s resolution independence is its biggest asset. Traditional art is great, and can and should be integrated into a digital work flow when appropriate, but it’s almost always built to size even if the traditional style is created in a raster environment.

I think of vector-based art as free range creativity.

Do you have any favorite Illustrator time-saving techniques?

I love the fact that Adobe lets third-party developers create useful plug-ins that expand the application’s ease of use and flexibility, so the user can adapt their personal preference with regards to vector building. I use a very helpful plug-in called XStream Path by CValley Software that makes creating and forming vector shapes a breeze.

I like to use Illustrator styles a lot, custom-designed actions, and a full range of keyboard shortcuts that are now second nature and make going from a sketch to refined vector art a smooth and precise process. I also have an unhealthy fondness for the inner glow effect which makes detailing my art fun.

For more information about how I build my vector shapes visit my Illustration Class tutorial site.

aztec_tribal

What are your favorite features in Illustrator CS4?

The improved building methods and point control, the ability to control gradients on objects, and the new masking features and multi-page capabilities.

What other Creative Suite 4 products do you use for your designs?

I use Photoshop all the time. I import smart objects into my Photoshop files and Photoshop files into my Illustrator files, though I do wish that Smart Objects in Photoshop linked to the source Illustrator file. That’s the only part of using Smart Objects that isn’t so smart. I also use InDesign and Fireworks when needed.

Are you seeing ways in which CS4 is improving your workflow? Are you able to quantify improvements, i.e. number of hours/days of work saved; profitability percentage/dollar amount increases due to efficiency improvements with CS4?

Being able to customize Illustrator and Photoshop via “Actions” and “Keyboard Shortcuts” and “Graphic Styles” etc. makes for a more streamlined creative process. The ability to add in third part plug-ins furthers the customization for my own preferred creative process.

ARTWORK & TECHNIQUE

You have a very broad range of styles, all of which you have mastered. The recent ‘Molar Madness/Ramp Champ’ iPhone design, your ‘Keyboard Characters’ and your Sports Identity designs all have a unique and distinct look while each retains their respective stamp of expertise.

Talk us through this in general. What Illustrator features do you primarily use? Any overall advice or techniques in Illustrator you can share? How do Photoshop and other CS4 apps figure in to your overall vector art workflow?

All my projects are style driven. Each project has its own unique aesthetic and genre that my art has to adapt to. There’s also genre, product and target audience to consider. Sometimes that style is dictated to me by an agency and other times I determine an appropriate style for the given client. That said, I have my favorite styles but it does keep things interesting so I can’t complain.

My creative process follows the same general framework and structure for every project regardless of the style direction I’m taking. My favorite tools within Illustrator CS4 are of course the Pen Tool, PathFinder Palette, Gradient Tool, XStream Path Direct Edit Tool and Blend Modes. The combination of all those with others when needed produces everything one can see on my own Web site. (More about my “Illustrative Designer Creative Process” here)

In particular, what Illustrator tools did you use for the excellent Cubist-style effect for the Keyboard Characters? How do the other Adobe CS4 applications play a role in your creative process?

Whenever I create my segmented style illustration it’s all about shape building. Sometimes I have to create three steps forward and then go two steps back in order to build what I need. For the Keyboard Characters I actually posted a tutorial that takes you through the entire process from sketch to final printed piece. You can view that here.

keyboard_characters

I use Photoshop every day. It’s second only to Illustrator, but I couldn’t do what I do without it. I love how flexible Photoshop is. The same thing can be done in so many different ways, making it very easy for a designer to adapt it to their work flow and preferences. To be honest, I think the Illustrator team could learn a few things from the Photoshop team. There – I said it.

The Ramp Champ artwork is particularly nice. Were there any Illustrator tools that were especially useful in creating artwork specifically for an iPhone game/app? Any particular advice for other Illustrator artists working on artwork for an iPhone app using Illustrator?

Ramp Champ is a project that required both Illustrator and Photoshop. Everything in the art needed to be either animated or have the ability to be modular. So most of the base art was created inside Illustrator and extensively layered as Smart Objects. We actually had Smart Objects within Smart Objects. Double click a layer and it would open up another layered Photoshop file which had its own Smart Objects in it. But all was masterfully contained in one Photoshop file. This enabled easy editing when beta testing and revising art.

iPhone_Game

The key to any GUI graphics, iPhone or otherwise, is to build the art at 100%. Doesn’t matter if it’s a vector Smart Object, you need that pixel precision sans the fuzzy factor and that is only accomplished when working at the final size. This is often the problem with many artists trying to design or illustrate for onscreen content. They assume since it’s vector it can be smaller or larger and they’ll just scale it either way – a rookie mistake. If you want to see some of the best examples of this visit The Icon Factory. They’re the originators of Ramp Champ and the masters of all things GUI.

Your Señor Skully illustration has some great texture effects. Were these created within Illustrator? If so, how were they achieved? What Illustrator tools did you use? If not, how were they implemented within the Illustrator document/artwork and what tools were used?

No, those are authentic textures. I always try to avoid faking an effect, especially when it comes to textures. A few years back I had a local silk screen shop print a throwaway shirt with just a huge white rectangle on it. I then had my wife put it in the wash every time she did laundry and after about a year this wonderful texture came about.

senior_skully

I scanned it into Photoshop and created the texture which is just a hi-res tiff image I placed into Illustrator and colorized the same as the background. Some might Live Trace a tiff like that but I’ve always found it looks far more realistic and detailed to leave it as a tiff image. It’s a less complex vector file too. (I posted more about this texture experiment here.)

Tell us how CS4 played a part in your pattern art creation.

Illustrator is ideal for creating tiled repeat patterns. Once your tile design is complete, the flexibility of applying it using the color palette and other controls such as rotate and scale make it easy to adapt them into your own creative projects. I did a tutorial for VectorTuts on how to create a pattern here.

gs_patterns

Also, anyone is welcome to visit VonsterBooks.com and download sample patterns and spreads.

Tell us more about how CS4 was used to create your “Beautiful Vectors” artwork.

I was asked to be part of the “Adobe Illustrator CS4 WOW! Book” and so I decided to do an illustration in a style I don’t often work in. I felt I had to really challenge myself and wanted to push my comfort zone and get far more extensive with my detailing and methodology. I love the control of gradients you get in Illustrator. I used to avoid gradients like the plague in FreeHand, they just never looked that good. So now that what you see is what you get in Illustrator I use them more and more.

beautiful_vectors

That said I don’t like the whole blended look. I wanted a clean graphic style that retained an element of realism and detail that would carry it forward – a balance of refined simplicity with just enough application of gradient detailing to enhance it. I utilized extensive blend modes, layering, transparency and subtle blurring of shapes to create this artwork.

In the end I felt like I had created work worthy to be part of a WOW! book.

NEW FEATURES

Do you find yourself using the newer Illustrator tools, such as Live Color, the Blob Brush, the Eraser, or do you stick with the more traditional Illustrator vector tool set?

Traditional all the way. Augmented by third party plugins like Xtream Path by CValley Software. I’ve used the eraser a few times but probably won’t use Blob Brush or Live Color –they just don’t fit with my creative process. I never create on the fly, I create from an informed point of view knowing what I need to build before I build it because I’ve drawn it out before I touch the computer.

I’d like to see Adobe focus on improving existing tools and adding missing features that should be part of the core building methods, like “Sub Selection” of shapes without having to mess with the layers palette or fiddle with a sub menu. Adobe is well aware of this limitation. InDesign does it this way so it’s possible.

WISHLIST

What features would you like to see in future versions of Illustrator? How would you improve on existing features to increase productivity for vector artists?

I’m on the Adobe beta team and know what I can’t say, so I’ll just share what I’d personally really love to see in Ai.

  • Layering controls and layer folders and layer masking (like Photoshop).
  • A preference that forces all guides to one “Guide Layer,” thus making guides non-objects.
  • Redesign the Color Palette so the Fill and Stroke aren’t overlapped. Add the ability to drag and drop color to both at same time.
  • Make all the blend modes from Photoshop available in Ai (Example: Vivid Light).
  • The ability to customize the tool bar at the top of screen so it always shows what I want it to
  • Better font preview in font list
  • Make Adobe Illustrator customizable by letting users buy a base app and offering additional features á la carte.
  • Push Zoom to 10,000%.
  • Team up with “What the Font” and add the ability to select converted text and determine source font it was converted from.
  • Make free distort work just like Photoshop. Remember KPT Vector Effects? Make it work like that.
  • Create patterns, styles, borders etc. to include in the app that are pro quality.
  • When upgrading to new versions, have the installer retain all custom settings and plug-ins.

Von’s work can be seen at his website, Glitschka Studios, and be sure to follow him on Twitter here.

Adobe Photoshop CS5: Sneak Peek [video]

gomedia-blog-post-Photoshop-sneak-peek-header

Here’s a quick sneak video of some experimental new features being worked on by Adobe for Photoshop CS5, including “wet” paints (similar to Corel Painter) as well as a very cool-looking warp tool. Warning: corny voiceovers.

Design A Killer Fashion Model Poster

final_image

Introduction:

This tutorial will show you how to make a killer Fashion Model Poster using basic Photoshop functions like Layer Styles, Vector Masks and Filters like Motion Blur. At a time when there’s more DOWNLOADING of source material than actually USING it, this tutorial will get you through the end with only three stock images—two if you have experience with Cinema 4D.

Also, instead of the monotonous step-by-step form of tutorials you find all over the net, I’m using a different approach. Basically I’ll be explaining each effect separately so that you can use this elsewhere and not restrict yourself to the final image here.

This tutorial has two main divisions.

  • Part One – The background
  • Part Two – The model & effects.

Each effect will be explained separately.

So let’s get our hands dirty!

Part One – The Background

Lets start with a new document,  sized 1200 x 1600 px. Press D to set the default palette colors as Foreground Black & Background White. Press Alt + Backspace to paint the background black.

Above this make a new Group, and name it ‘clouds’. Set the group Blend Mode to Normal and set the Opacity to 75%

Within this new ‘clouds’,  Group make a new layer . Select the Gradient Tool(G) and apply a linear gradient going diagonally. Use the colors Orange (#fd7c00) and Purple (#6f156c). Reduce the opacity of the layer to 65%.

1

Above this make a new layer. Press D to bring back the default colours to Black/White. Go to Filter > Render > Clouds > Make. Blend Mode : Multiply; Opacity  100%

3

Next, Merge (Ctrl+E) the group. Duplicate this layer. Go to Filter > Blur > Motion Blur with the following settings: Distance: 600 and Angle :90.
F2_blur

Set the Blend Mode to Soft Light. Opacity is automatically 75% since it’s duplicated from a layer of opacity 75%

5

Now let’s bring in the main city element of our background on to the canvas. Found this stock photo on sxc.hu. Remember – you don’t have to shrink the image for it to fit entirely in the canvas. Our objective is that the main yellow building should occupy a significant amount of space in the canvas, towards the left side.

Once the positioning is done add a Vector Mask to the layer: Layer > Vector Mask > Reveal All

Now using the Lasso Tool (L) or simply Brush (B) , chuck out excess portions of the buildings (sky). You can use a Soft Brush(Hardness: zero) at the end to make things a little smooth.

Add a Gradient Overlay by going to Layer > Layer Style > Gradient Overlay. Use the same orange and purple colours as we had used previously. Blend Mode : Hue
9

Name the layer ‘city’. You should get something like the image below:

8

Make 2 COPIES of ‘city’.(Ctrl+J) TWICE

L1

Merge the two copies so that the vector mask gets applied and layer style vanishes.
L2

Name the upper layer ‘city_colour’ and the lower layer ‘city_blur’. Follow? Look at the screen shot to clear doubts.
L3

On ‘city_colour’:

Apply a Gradient Overlay by going to Layer > Layer Style > Gradient Overlay with the following settings: Blend Mode : Overlay, Opacity : 75%, ‘Purple – Orange’,  Angle : 120 degrees.
city_colour_overlay

Apply a Vector Mask(Reveal All) and paint black over all those parts where you’d like to see the motion blur effect.

10

On ‘city_blur’

Goto
Filter > Blur > Motion Blur
Angle 90
Amount 441
F1_blur

Since after applying a motion blur, the extreme ends become transparent, copy this layer(Ctrl+J) a few more times to extend the blur and then merge it.

On this blurred layer (merged) apply a Gradient Overlay with values same as on layer ‘city’

Blend Mode : Hue
Opacity : 100%
Orange – Purple
90 degrees
9

You can add a vector mask on the blur layer to make minor adjustments.
12

Make a new layer above all and with a soft round brush paint black over the bottom part of the image:
13

Merge everything in part one

This is the end of part one.

Part Two – Model & Effects

Now lets bring our model into the picture.

I got this particular picture while browsing the model’s personal website. You can take any picture you want.

Using the Pen Tool (P) – always my first preference for extracting figures – to make a path around the model. No need to try and include every strand of hair – just go with the general direction of the head. Once path is complete, right click on it and select Make Selection. Feather = 0, Anti-aliasing ON.

Now that we have the marching ants ( yeah, that’s what it’s called ) around the body , just use the Move Tool (V) to bring it on to our canvas. Place it above all other layers and resize (Ctrl+T) it appropriately.

14

Make a Group called ‘Model’ and place her inside it.

Above the model –
Goto
Layer > New Adjustment Layer > Curves
Click Ok and replicate the curve shown below.
Starting from top-right
POINT 1 = Output-172 Input – 193
POINT 2 = Output-132 Input – 174
curve

Next, hold Alt and move the mouse between the two layers. When you see the cursor turn into two overlapping circles, click. Now the curve will affect only the model.
15

This effect will make all small extraction errors disappear. If you still spot something wrong, just add a vector mask and using a soft brush remove it. Merge the Curve with the model.
16

Effect – Facelift

This is really a clever trick to give the model a grungy feel. The shattered pieces is actually a Cinema 4D render. You can do it yourself or just download several such renders from sites like planetrenders.net.

Bring the ‘pieces’ on to the canvas. Let this be below the model. Hide it. Press Ctrl+ click on the ‘pieces’ thumbnail. This makes a selection of the pieces.
19

Now keeping the model layer selected – press Ctrl+J. This will make a copy of the model BUT only the small shattered like parts. Now simply with the Move Tool (V) shift the layer slightly left and watch the neat effect.

Create a Vector Mask and with a Hard Brush (Hardness 100) paint over the areas where you don’t want the scratches.
17

Make a Group BELOW Model called ‘Shatter’

Effect – Wings

The ‘wings’ shattering effect isn’t very difficult. It’s just about using your common sense. We already have a ready-made shatter BUT in the shape of a blob or circular splat. So what we do is simply place it behind the model and apply a vector mask, then with a Hard Brush just paint on the sides to acquire the shape. Do this for each ‘wing’.

21

Effect – Chunk Extraction

Again this effect adds to the “shattered” appearance. On the merged layers of part one, with the Polygonal Lasso (L) Tool make a sharp selection. Remember Feathering should be zero to achieve sharpness. Press Ctrl+J to copy that selection and apply a layer style

Layer > Layer Style > Outer Glow
Apply the following values.
22

Make such an extraction on both sides. You can also select a part of the model and move it.

23
The idea is to move a part of the image but to keep it ‘close’ to the original positions to show the similar colours so that it appears that it’s moving out.

Here’s the final set up of layers to clear any doubts.

layers

To view the final image click here. The full PSD file can be downloaded here: [download id=”51″]

You might find the output quite dissimilar to mine since there is a render involved and lots of brushing. Also, I redid the design for the tutorial so my end result is slightly different from the tutorial screenshots. But the fact is that with any tutorial, even if you use the same values you will always find minute differences in outputs. Nevertheless, feel free to ask for any kind of help whether related to this tutorial or not. It’s what I enjoy doing. You can drop comments or contact me personally at [email protected]

This is DC signing off…

Ten Ton Dreamweaver Winner Announced — And A Super-Killer Offer!

ten-ton-dreamweaver-winner-header

We’ve received some fantastic comments and feedback on last week’s Ten Ton Dreamweaver giveaway. Seems many of you are chomping at the bit to leap into the world of web design, while others have their engines revved to go further with their CSS and web design skills.

I enjoyed reading every single comment, and it was great to chat back and forth with a few of you. Sadly though, we can only draw one random winner. However, we have a very special announcement to make, so keep reading…

But before we get to that, let’s announce our randomly drawn winner. A big congratulations to mikeylikes, you’ve won yourself a copy of Ten Ton Dreamweaver! We liked your show of initiative to go beyond the classroom and teach yourself what you want to learn. We’ll be in touch with you shortly. And thanks to all the other commenters—you guys made the decision a tough one, but we have something special for you as well…

Throughout the week we had some fantastic comments. A lot of our commenters are currently in school and possibly not learning exactly the Dreamweaver / web design skills that they’re after, while many others have a solid footing in the world of print and are ready to make the leap to web. Still others have job opportunities waiting for them, or want to make themselves more marketable in these choppy economic times.

Shot1

Well, I got talking with the fellas at Go Media and I said, “Ya know, there’s so much interest for Ten Ton Dreamweaver, and so many readers need to learn this stuff, it’s too bad that just one person wins a copy. We’ve gotta do something to help everybody else out too.” We got thinking about it, and came up with something that we think you’re really gonna dig…something so extra-special it’s only being offered to Go Media readers. Check this out:

I spent the weekend in the recording studio coming up with some super-killer bonus material. As it turns out, I hammered out nearly a half-hour’s worth of training — and by the way, it was Thanksgiving weekend up here in Canada, so I was rolling myself off to record more content between turkey meals and pumpkin pie. You’re welcome!

So what the heck is Ten Ton Books and Go Media gonna do with all this extra bonus material? Why, give it to you for free of course! So here’s the deal. If you dig Ten Ton Dreamweaver and wanna launch your web design skills through the stratosphere, order the DVD before November 20th and we’ll send you an extra DVD loaded with all the bonus material absolutely free. In fact, as an added thank-you, Ten Ton Books will toss a few extra goodies on the bonus DVD as well. How’s that sound?

TTDWess_BoxArtLeft

The bonus DVD will include nearly 30-minutes worth of training on building and managing CSS-based floats in Dreamweaver (a must-know technique for every web designer) as well as an exclusive 13-minute clip from the soon-to-be-released Ten Ton Photoshop which features material from Go Media’s Arsenal. Freakin’ awesome? You bet.

Shot3

Snag all the free content and your copy of Ten Ton Dreamweaver right here, and lets get ya on the launchpad and ready for lift-off! Be sure to enter the promo code “GoMediaTTDW” on the checkout page to receive your free bonus DVD!

The Best Spray Paint Textures

Do a Google search for “Spray paint textures” and you’ll see why knew that the artistic community deserved better.

So, we brought in a well-known graffiti artist from right here in Cleveland to show us what he could do. And, well, we were mightily impressed!

spray paint texture pack

Our graffiti artist had the supplies, technique, and experience to create incredible blended tones & texture. He quickly laid down a base of colors and then slowly added layers. By the time he got to the topmost layer, he was practically placing each drop individually! His control & detail was pretty amazing.

spray paint texture pack 4

Really, it’s kind of like having your own personal Jackson Pollock at hand. To finish off each texture, he feathered the edges with white spray paint to achieve a natural splattered fade.

spraypaint texture pack 5

I’m happy with what we came up with, and I’ve already used the textures a few times. I like that these spray paint textures can be used without calling attention to themselves. With simple tools like Photoshop’s brightness/contrast and hue shift/saturation, the versatility is pretty impressive. Try blending these into any design that needs a more traditional, naturalistic, urban feel.

spray paint texture pack

Thanks to all of our readers for the support and insight you share with us. Let us know what you think of the textures, and how you could put them to use! In the meantime, we’ll be trying our best to dream up knew tools & resources for everyone to share. If you like what you see, Download the new Spray Paint Textures.

Adobe Shortcuts App – Free Download

adobe-shortcuts-app-header

Here’s a nifty little Adobe Air application that allows you to look up keyboard shortcuts for any Adobe software. Well, at least Illustrator, Photoshop, InDesign, Flash, Dreamweaver, Soundbooth, Fireworks, Contribute, After Effects, Premiere Pro, Encore and Acrobat Pro. The shortcuts are only for the CS4 versions of these applications.

Adobe Shortcuts App runs on Adobe Air, so it’s cross-platform (Mac, Windows, Linux).

adobe-shortcuts-app-screenshotLaunch the app, then select your preferred software from the top row of familiar icon buttons. Below you’ll see three tabs for Essentials, My Favorites, and All Categories. Be sure to click the speaker icon in the bottom-left to turn off the “interesting” sound effects…

Best of all, it free from the Adobe Marketplace. Download the Adobe Shortcuts App here.

(via John Nack, Adobe Photoshop’s Principal Product Manager)