Erika Simmons: Ghost In The Machine


Erika Simmons’ ‘Ghost in the Machine’ series is an imaginative approach to image creation/illustration. The concept of incorporating elements of the subject matter as the medium is a great example of thinking outside the box. The use of the cassette tape forces the viewer to envision the process, which thus incorporates an element of the passage of time—intrinsic to the experience of music—into the artwork. The idea of introducing the element of time into musician-themed artwork has echoes of Denny Dent’s “performance portraits”.


Tell us a little about yourself…

I’m a 25 year-old woman who lives in Georgia. I am a self-taught artist. I try to focus on using found materials, or donated materials. A lot of my supplies come from places like Goodwill.

I try to make things that showcase some idea, through simply cutting up and re-arranging the pieces of everyday items, like cassettes, old books, or even credit cards. Basically anything I can get my hands on! I like working with these older, strange materials because they have a mind of their own, and come with cultural connotations for me to play with—like a springboard for your imagination.


Art school or self-taught?

I never went to art school or took any traditional art classes, but I did go to college and make up school. I waited tables to pay the bills for years. While I was working at the Hard Rock Hotel in Orlando, the idea struck me to make some musically themed art. I had some old cassettes laying on top of a blank canvas… that’s how it all started! Mostly luck and a lot of hard work.


What inspires you?

My greatest inspiration comes from big ideas… mostly those found in science and psychology. It is endlessly fascinating to begin to understand how we organize the world around us, how we come to understand meaning in things.


How did you develop the cassette tape series? What was your inspiration?

The cassette tape series came out of a desire to explore a theme of recursion… tangled hierarchy. Where is the music? On the cassette tape? In the head of the musician portrayed? Where does one begin and the other end? But you don’t have to look at it in that way to enjoy it. I tried to make something fun and easy-to-understand, but with deeper things to think about, if you so choose.


‘Ghost in the Machine’ series—the process

To make a cassette tape portrait I draw the desired shapes. Then I glue down the tape in the desired shaped that I have drawn. For my favorite ones, I attempt to cut the tape as little as possible, to make it look like it has just sprung from the case mostly intact. I fold and sculpt it into place and twist it to give the illusion of a thinner line… it takes forever, but I love it.


Upcoming projects and shows

Some upcoming projects… I’ve got a charity gallery show I’m participating in at UCLA October 4th with REVO. I’ll be there to help support the need for education in Papua New Guinea. Please come if you are in the LA area!!! We’d love to have you.

I’ve also begun experimenting with other media. Right now I’m using different rope textures to make portraits. Tomorrow I’ll be doing something else, I’m sure. : )

I love to do custom work for people, so if anyone ever wants to shoot me an email and bounce an idea off of me, please email me! Thanks again!

Erika’s artwork can bee seen on her website at as well as on her Flickr account.


15 Over-The-Top Business Card Designs

Business cards are one of the elements of corporate design that should be pushed beyond just graphics, and converge with several processes to become what they should be: a memorable, collectible and impressive piece to be carried away everywhere. The following are perfect examples, and have overcome the graphic-only component of the piece by using different materials and techniques. A recognizable pattern in all these designs is the use of die-cuts.

One heavy piece: A print-sticked application directly on a metallic-emboss treated plate, Duffy And Partners business card. Duffy

Print applications on inset embossed paper; multiple textures in one piece.

Print with golden / silver special inks. You can feel the texture of this piece just by looking at it. Design by NothingSomething NY

A soft-looking print applied on top of printed hard-paper for Photographer John Bragg. Design by Funnel.

Inset embossing; die-cut with application on-top of it. Design by Luke Dorny.

Print application applied to a lapping-treated acetate. Easily modified for multiple employees and and their job description. Design by Catalyst Studios

Speaking of heavy, this business card has completely re-thought the concept into a metal token reflecting the goods of the product design company: Dashdotstudios

Showing the love towards former racing Greyhounds and the issues revolving around them, this dog-tag metallic embossed plate + tampography for the business cards of the National Greyhound Adoption Program is quite an achievement. Laurie DeMartino

Each of these card is unique, the result of a hand-made process by Ethan Martin

Barkley Evergreen & Partners developed this multi-textured, thick business card for 40 Sardines Restaurant. Delicate inset embossing and on-top applications.Barkley Evergreen & Partners.

Die-cut, soft foil emboss for the logo with printed paper application and a even subtler background pattern for the business card body. Design by Honest Brothers

Patterns and thickness are the main visual elements in this business card for Le Club Fez; again, a label die-cut applied to the body of the card allows for easy replacement for new data. Design by Hook USA.

A very unique design created with die-cut paper and a wrinkle texture. Design by the Michael Strauss himself.

Art with an industrial approach to a corporate field; very experimental business cards with different and unique results. Design by Sonner Valle

Space150 is recognized for their well-designed and executed business cards. Dry cuts, neon inks and inset emboss makes part of the main ingredients for this pieces. Design by Space150


Another examples of business cards well-executed, with lots of textures and alternative printing processes helping stand out from the common:

Go Media’s Rapid-Fire Illustration Technique

fast illustration

Go Media’s Rapid-fire Illustration Technique

Hey Designer and Illustrator faithful! It’s time for another wicked tutorial from your brethren here at Go Media. I had a particular project I was working on recently that I thought would make a great tutorial. The technique I would like to share with you is a little illustration short-cut.

When you need to create something with that hand-drawn look but you’re on a tight time line – this is one way to do it fast. The project I was working on was a t-shirt design for Black Ace Clothing. They’re great guys and pay us well so I am not normally rushing through their projects. But on this particular project I had already completed a large hand-drawn illustration for the back of the shirt. They wanted an additional illustration for the front of the shirt, but I was concerned about the total budget for one t-shirt, so, I busted out this little trick of mine. It saved me time, and saved them money!

PSST – shameless plug: I recorded a five-hour video tutorial with solid instruction & a healthy dose art creation. Check out my quick video overview on Vimeo and download the full video tutorial on the Arsenal.

The Design

Let’s start by taking a look at the final printed t-shirt:

fast illustration

Here is both the front and the back of the design. The quote on the design is: “Sticks & stones may break my bones, but words will never hurt me.” This is a really cool project because this t-shirt design is destined to be worn by Tiffany Michelle on an up-coming reality TV show. So, given the potential national exposure, we wanted to really hit a home run with this design.

The part of the design that uses my rapid-fire illustration technique is the front design. You can see it here in more detail:

fast illustration 43

This image shows a 3-color design. In the end production of the shirt you’ll notice that Black Ace decided to keep the front design simple (1 color) as to not over-shadow the back design, which is 4 color with a gold foil print.

The Tools

Just so, you have a full understanding of the entire design process we went through, I will show you how I did the back, then reveal my rapid-fire shortcut for the front illustration. Before I get ahead of myself I should give you a list of the tools you’ll need for this illustration:

fast illustration 3

  • Bristol Drawing Paper (plate, smooth or vellum finish.)
  • Pencil, Mechanical Pencil, (I used a Koh-I-Noor Technigraph 5611 mechanical pencil)
  • Mechanical pencil sharpener
  • Staedtler Mars Plastic White Eraser
  • #1 or #2 fine-tip paint brush or crow quill pen (I used a #1 Windsor Newton University Series 233)
  • India Ink (I use Higgins Calligraphy Waterproof Black Ink)
  • Light Box (Or a window will work too.)
  • Scanner
  • Computer
  • Adobe Illustrator
  • Access to the internet or some source of photos

The Concept

Let’s do a quick fly-over of how the back was designed so you can understand what lead us to the front. For starters, Paul Davis – my contact over at Black Ace (and a mighty fine dude if I may say so) sent me over this concept layout.

fast illustration 4

Now, I know this may look a little rough, but I was actually very impressed with it. Not many clients come to me with such a refined concept. And while this particular incarnation of it doesn’t look so good – I could easily see that this was an awesome layout with great potential and just needed to be fixed up on the production end. Paul asked me to work with this concept, but to also sketch up two additional concepts for this design. Now, there is no shortcut to this early process. This is just a lifetime of drawing that allows me to do a real quick sketch. But as you’ll see later, the details I put into these are really not necessary. All you’ll really need to focus on is placement and size of your elements.

Here are the three sketches I did for Paul.

cocept sketch
This first one (above) is my interpretation of his rough layout. Now that it’s in this rough sketch phase you can start to see the potential. I KNEW this one was the best of the three, so I pushed to work on this one.

concept sketch 3
concept sketch 4

Above are the other two sketches I did, but Paul was wise enough to go with concept #1 (his own original layout.)

At this point I just drew this. There were no shortcuts used on the back design. OK, maybe one—we do own a skull over here at Go Media. Whenever I’m drawing a skull and need reference, I can pick it up and hold it at various angles to see how to draw it. And no, it is not the head of a Boston Red-Sox fan (Go Tribe!)

finshed pencil drawing

Above is the scan of the pencil sketch for the back before I inked it. As you’ll see, I left the text off because I knew I was going to drop that in with Adobe Illustrator later. Also, there will be a Black Ace logo in behind the banners. So, that too was just roughed in. As I said before, I’m not going to go into all the details of the back design, just a fly-over so you can see what I’ve done. For all my pencil drawings I use a Bristol paper because it’s very thick. This allows me to erase without fear of tearing the paper. Bristol paper also allows me to ink it without fear of the ink bleeding through to my desk. I use a mechanical pencil, well, just because it feels better in my hand then a regular wooden pencil. I use an HB or H hardness lead. Although the B, B1 and B2 leads feel GREAT when I’m drawing, the lead is too soft. It smudges all over the paper and makes a big mess. So, I use the harder leads.


Once the pencil drawing is done, I bust out my brush and “ink” the drawing. I use a paint brush because it allows me maximum line weight variation. Or, in layman’s terms – I can make my lines as thick or thin as I want. By varying the weight of my lines it gives the illustration a ton of character that is hard to duplicate on the computer.

close up ink brush
You’ll notice a big roll of masking tape near the end of my brush. I put this on my brushes because I have big fingers. This gives me a better grip of my brush.

I make a lot of little shading lines that look best if they start as a thin line and thicken as they work their way into the dark. A crow quill pen can also accomplish the same effect. If you’re going to use a crow quill pen I suggest using a Hunt Artist’s Pen tip #512 and 102.

quill pens


Once this Illustration is done, I scan it into my computer using our flat-bed scanner. We’re fortunate to have an over-sized scanner here at Go Media. This over sized scanner allows me to scan the whole illustration in one single pass.

flatbed scanner

Not long ago we only had a legal-size scanner. I would have to scan my larger drawings in two or three pieces then assemble them in Photoshop. That was always a pain in the ass, but hey – what can you do? As I am planning on live-tracing this drawing in Illustrator, the higher the resolution the scan is the better. I like to scan my inked drawings at 500 dpi.

finished back of illustration

finished back of illustration 3


At this point I have my finished inks are in Illustrator and I’m ready to add my copy and colors. For this design I wanted an edgy, almost medieval font that looked like it was hand painted so it would match the rest of the illustration. I did an extensive search and found the font you see here.


I won’t tell you where I got it – ancient Go Media secret. Obviously, it was perfect!
I used the Effect>Warp>Arch tool in Illustrator to get the copy to follow along the shape of my banners. Then it was just a lot of nudging, kerning, stretching and scaling to get all the letters where I wanted them.
font two


I started the coloring by creating one single shape that filled the entire design. I made this by simply making a copy of my vectorized line art, selecting it, and then doing the following: Object>Compound Path>Release, then Object>Ungroup, then Pathfinder>Add to Shape Area. Basically this process broke all these vector pieces up, then merged them into one single shape.


outlines 2

outlines 3

outlines 4

Next I pick my colors. Paul was printing this shirt with silk screens and has asked me to restrict my design to 4 colors. I know that I’ll need a range of color values so that I can color both shadows and highlights. Here are the four colors I picked. I would love to give you a long explanation for why I picked these exact colors, but I don’t have one. I just picked some colors that I liked and thought worked well together.

image of four colors

As I was planning on putting this design onto a black shirt, I start by swapping my line art’s black with my darkest purple. It needs to be bright enough to pop off the black, but dark enough to act as my darkest value color. Next I fill the entire design with the middle value of the three remaining colors. This allows me to add shadows and bright spots to the middle. That’s much easier to figure out than any other method.

back design

Once the middle value fills the shape I do my shadows next. If you’re wondering how I decide where to place my shadows – well, nothing magical here. I look at the shape, imagine it in 3D, imagine a light source and give my best guess at how the shadows will fall across the object. If I have a reference photograph or the actual object (like the skull) then I can hold it up to a light and see exactly how the light falls on the object.

back design without highlights

Once the shadows are done, then the highlights are fun and easy to drop on. Remember where your light source is!
back design without radials

The last step is to add some finishing touches. For this design I added some radial vector shapes from Go Media’s Arsenal. I use these types of stock design resources to finish off a lot of my designs. They’re another fantastic tool for saving time.
finished back design

And viola! The back design is finished. Last step is to pimp out the design on a sweet t-shirt template and present it to the client. (Designer’s Note: Taking a little extra time to mock-up your designs really has a huge impact on the client. It’s one thing to see a flat design, but to see an actual t-shirt with the client’s design ON it! Wow! Now it’s REAL.) For this, of course I use the FINEST t-shirt templates ever made – Go Media’s of course. And they’re ultra fast and easy to use because the shirt is already masked with the highlights and shadows on their own layer. So, you just drop in your design and poof! It looks like a real printed shirt! (Ok, gratuitous product plugs are done.)
mocked up back design

Now for the really good stuff.

At this point Paul was ecstatic with the design (correct me if I’m over-stating your satisfaction level here Paul.) But he wanted a little something for the front of the t-shirt as well. Since he liked the sketch #2 that I had done, he asked me to make that one as well.

This front design was intended to be printed smaller and was also on a very tight budget (since the back had taken so much time/money.) I needed an illustration short-cut. I needed a trick. I needed Go Media’s Rapid-Fire Illustration Technique!

So, here is the way to really speed up an illustration project: just rough-cut together a bunch of photographs into your intended illustration. This will be easier if I just show you.

Rough Sketch

original sketch
Here is the original sketch.

Rough Photo Collage

photo montage over original sketch
Now, obviously, this technique doesn’t work for all things. If Paul had asked me to illustrate a superhero flying with a dog under his arm, well, the likelihood of me finding that photograph would be remote. But this design had mostly common objects – roses, a skull, rib cage, bones and a banner (I couldn’t find a banner in the right pose, so I just left a spot open based on my original sketch.) Also, this is a fairly clean assembling of photos. In truth, it can be way rougher than this. This image is just to be used as a guide to help you get your illustration going. You can clean up and fix all the little details while you’re drawing.

Collage To Sketch

So, the next step is turning this photo montage into an illustration! Start by printing your photo montage at the appropriate size. In this case, I wanted it about 8 inches across. This is approximately twice the size the final design will get printed on the shirt. (Illustrator’s tip: Whenever working on an illustration – create it at about twice the size you’re going to print it. This allows you to be a little sloppy. Once it’s shrunk down to the final size it will look super tight! People will wonder how you got so much detail into it.) Ok, where was I? Oh yeah – turning our montage into an illustration. Now that you’ve printed out your photo montage, you want to tape it to a sheet of your Bristol paper. Make sure the printed side of your montage paper is facing the Bristol that you’ve taped it to.

photo montage front

photo montage frotn 2

Now take out your trusty-rusty light box and place your paper on top of it, Bristol paper up! Next, you’re going to draw your illustration using your photo montage like a draw-by-numbers guide.

photo montage on lightbox

If you need to change, exaggerate, or edit the photo montage, you can make corrections now. On this design, for instance, I thought the skull’s bottom jaw was waaaay too large. So, no problem, I just ignored the photo and drew it a little smaller.

photo montage held up to window

If you don’t have a light box, you can always use a window during the day! But make sure not to push too hard! I don’t want you falling through your window.

This phase of the drawing doesn’t have to be perfect. The photomontage is there to help act as a guide. While on your light box just get all the major shapes in place. Then you can turn your light box off and finish the drawing using your innate drawing ability (if you have that). You can strengthen your lines, add shading, details, etc.

In this case time was at a premium and I knew I would be inking this myself, so I really just hammered the drawing out quick. I trust my ability to do a sweet job during the inking phase. Here is the finished pencil drawing I did using the photo montage as my guide.

finished front pencil drawing

You can see that I invented a lot – particularly the banner. Now, obviously I have years of drawing experience, so it may be a bit easier for me to “invent” details that are not actually in the photomontage.

So, that’s really the end of the “shortcut.” While this shortcut may still seem labor intensive, I can assure you that this will save you some serious time. The photos give you all those little details that you would otherwise have to invent. Also, having the photomontage as a guide completely eliminates the possibility of total failure. If you’ve spent any time drawing you certainly know this is a real possibility. I’ve personally had plenty of days when I simply cannot draw what’s in my head. After several frustrating hours and a waste paper basket full of failed drawings, I’ll usually just quit for the day and start again the next. Using this photomontage technique will leap frog you right over any of these types of problems.


Now we proceed as we did with the back design. Using Higgins Calligraphy ink and a #1 paint brush, we ink our illustration. Here are a few inking tips. First, your lines should be thinner on the side of your light source. If you have no light source, assume it’s coming from the top. So, if it’s a bald head you’re drawing, the line beneath the chin should be thick and the line on top of the head should be thin. Also, objects in the distance should be drawn with thinner lines. Objects in the foreground should be drawn with thicker lines. Using these techniques will give your drawings a sense of depth and character.

Here is the finished Inking of this drawing:

finished ink of the front design

I was always a big fan of the comic strip Calvin and Hobbes, of course, who wasn’t. But it wasn’t just the brilliant writing. You could see that Calvin and Hobbes had been painted with a brush. Just look at all the character in the line art. You can see the thickness of the line weight varying dramatically.

closeup calvin hobbs photo strip

Compare that to another comic I love: Foxtrot. The writing is still great. The characters are hilarious. But the line art is kind of flat and boring in my opinion. This is the difference between using a brush (or crow quill pen) and using a regular felt tip pen when inking your illustration.


Now we go through the same process that we did for the back design. I’ll break it down into numbered steps for you here. Sometimes that’s easier to follow:

1. Scan the art at 500dpi – save as jpeg.

2. Place the art into Adobe Illustrator.

3. Select the image.

4. Convert the line art to vector: Object>Live Trace>Make and Expand
live traced
5. Get rid of all the white shapes that the Live Trace function creates. Using your open arrow tool, click on any one of the white areas of your art. Then select the rest by clicking: Select>Same>Fill and Stroke. Warning! In illustrator this function grabs EVERYTHING that has the same fill and stroke, so if you have other white objects with no stroke in your document, it will erase them too! Once all the white shapes have been selected, hit delete.

6. Make a copy of your line art. Either select it then Edit>Copy, Edit>paste. Or select it and hit control+C, then Control+v. Or, while using your arrow tool, hold down the alt key, grab your line art and drag it to a new location. All three of these methods will make a copy.
two copies line art
7. Create your primary color fill object. Select the copy of your line art and use function: Object>Compound Path>Release. Then Object>Ungroup, then Pathfinder>Add to shape area.

Ok, now at this point you should have your line art and a single shape “fill.”
line art next to fill

8. Add your copy. Now, just like on the back we’re going to use Adobe Illustrator to add our copy. It’s a simple text box with an effect>Warp>Arch applied to get it to fill our banner.
adding text

9. Color your design. The coloring on this side of the shirt is even simpler than the back. Paul asked for a simple 3-color design, so – that’s what I gave him. I’m going to be using the same colors I selected from the back. So, the line art is a dark purple and the primary fill color is a yellowish bone color.

purple fill

The one additional color I’ll add will be the shadows.

purple line art

After an initial proofing Paul felt that the rib cage was not working in the design. No problem! I just created a shape to remove the ribs and then used the Pathfinder>Subtract from shape area. I did this twice – once for the line art and once for the color fill.

knocking out rib cage

no rib cage

And that’s it. Here is the final design for the front of the shirt. I got this entire piece done in about 5 hrs. 1 hr. to find these pics, 30 minutes to piece them together, 1 hr. to do the pencil drawing, 2 hrs. to ink, and 1 hr. to scan, vectorize and color!

I want to give a big shout-out and thank you to Paul and Howard Davis for being such cool clients and allowing me to write this tutorial! For some reason a lot of our clients are overly protective of their assets and don’t let us show off our work! This shirt is NOW available for pre-order at or click here to get directly to this product.

Thanks for your time and attention. I hope you enjoyed this tutorial and learned a few new tricks!

Paparazzi!: Full Web Page Screenshots Utility (OS X)


Paparazzi! is a handy little niche utility for Mac OS X that creates screenshots of full webpages. Add a URL (or choose from a list of recently visited sites) and Paparazzi! brings up the page in a mini-browser. Save the file in your preferred format, with custom file name options (such as auto-adding the date, year, URL, page title and more).

The real gem here is that Paparazzi! takes a screenshot of the entire web page, not just what’s visible on-screen. Great tool for web designers.

paparazzi_04_mainBest of all, it’s free! Note that the developer does ask for donations of you find yourself using the app a bit, so show some love and drop a few bucks to the developer if this software is helpful for you.

3D Typography in Photoshop



In this tutorial we are going to go over various techniques you may have seen before, as well as a bulk of techniques that may be new to you. After you have completed this intense walk though, I assure you will be able to explore even more new ways of creating typefaces as well as other types of ideas. Inspired by the work of Nelson Balaban as well as my own, I decided to re-create an old piece of mine using the techniques I am about to show. The completion of this effect will probably take around 8 hours collectively; however, once learned, the process shall be pretty easy and fast to replicate. Even though it is extensive, nevertheless it will be very fun and insightful. The final effect is shown below. Alright, lets do this fellas!


Lets Get Started

We shall start out by choosing a typeface that appeals to us the most. Personally, I love the new blocky typefaces we are seeing more and more nowadays. You can purchase many of them at myfonts, or look at the free ones at fontstruct (pretty amazing free fonts).

The typeface I have chosen for the image above (MOD) can be found here.This font is created by a great typographer named Svetoslav Simov. You may have noticed my font is very distinct from the actual MOD font created by Simov, due to modifications I made to the lettering in illustrator. We can now open up illustrator and load in any document size. The size of the document does not matter at this moment because we will be importing the finished illustration into Photoshop as a Smart Object.

Step 1 – Setup

Alrighty then. After we have chosen our preferred typeface, we shall proceed by expanding the text. This will make it an editable path. We will also load in the swatch file provided or choose to create our own unique color scheme. If you don’t know how to expand the typeface or load swatches, take look below.



Step 2 – Extrusion

After we have expanded out paths and loaded our swatches, we shall proceed with the handy extrusion tool located in the Effect Menu>3D>Extrude & Bevel. Normally we would want to extrude the whole entire phrase or word in one instance; however, we want to give life to the text by not making it seem so generic. For that we must extrude every single letter by itself, giving each different vanishing points. This will in end, make the letters seem like they are playing off each other and give life to the finished product.

This process involves working with multiple paths; therefore, we want to keep our work flow very smooth by creating a very organized Layer structure in Illustrator. Take a look (below) at how I go about organizing my layers and sublayers. Having all of these vector objects scattered all over the place can become cumbersome. I immediately moved each letter into its own layer and also added sublayers for extra effects that I knew I was going to add along the way.


What we want to do for each letter is to make an instance/copy of it by selecting a letter individually and hitting Crtl+C to copy , then Ctrl+ F to paste in front. For now we will hide the copies of the letters. Using the original letter, we shall now apply the Extrude & Bevel effect.


Ok, so this is where the whole technique becomes a bit more involved. Take the instanced letter you have hidden, and we will perform Alt+SHIFT+Ctrl+E. This command will load any last filter/Effect we have applied to the previous object. This saves us the hassle of going through the Effect menu and manually clicking on Extrude & Bevel again and again.

NOTE: This handy command will preserve ALL the attributes entered for the last object this effect has been added to. THIS IS WHAT WE WANT because we will do the same to the instanced letter but we’ll now add a closed cap extrusion rather than an opened one. Look Below.


Repeat this process we have described so far to the remaining letters. Remember to keep everything as organized as possible—after we have completed these steps repeatedly, everything could become confusing. This is were organization plays a big role. Take the time now to organize everything now if you have not done so.

Step 3 – Expansion

Hanging in there? Good! because now it gets super tricky. You’ll have to work hard to get this cool effect. Ready?

So, you might ask, why did we make two copies of each letter and why did we extrude them differently? Guess what, your questions are answered in this step. I’m going to explain this very thoroughly to the best of my ability so try to follow along.

We are going to now hide all the letters besides the N (If you chose to create a different word, you will now proceed to hide all the letters except the beginning one). Next, hide the EMPTY CAP extrusion of the N. This will leave us with the OPEN CAP N which was originally the first copy we placed in front and made the second extrusion to.

Now we will expand this version of the N and delete the extrusion part of it and leave the “CAP”. Note, since we have already expanded the typeface and added an effect to it, in order to make it a workable path, we must expand it once more. We will notice that now the expand option is grayed out. This is fine. We shall use the expand appearance option right below it – Object>Expand Appearance.

When expanded, we shall see that illustrator will created a group of different things that make up the Effect. To ungroup the expanded objects and to make it easier to located the shapes we want to keep or get rid of, we are going to: Expand the layer with the newly expanded extrusion! This is why turning the blend steps is key. The more blend steps we have, the more shapes we will have to work with. This will create a hassle undoubtedly.

  • Ungroup all of the new objects by selecting the extruded shape and hitting Shift+Ctrl+G three times
  • Find the shape that pertains to the cap (should be all the way at the top, inside the layer)
  • Delete everything below the cap
  • Add any of the green and blue gradients to the cap
  • Turn down the opacity of the N cap to about 50-56%

Once these sub steps are completed, you should have an image like the one shown below.



Now when we delete all the unnecessary objects pertaining to the capped extrusion, we can see right through the inside of the letter when the opacity is turned down.

Step 4 – Expanding Empty Extrusion

First, we expand the empty N so that it will give us more flexibility and creativity when adjusting the colors and transparencies of the sides.

Now that we have completed the expansion process of the N, we are about to do the same to the empty capped N. Hide the Cap layer and select the empty N. Again, go to the Object menu and select Expand Appearance: Object>Expand Appearance. Now it gets tricky. It is best to follow the pictures so that you can get a better sense of what I am talking about. Now that we have expanded the N, and ungrouped all of the objects, we want to start joining our corresponding paths together.

I will explain the basic theory around this. Lets start with the far right side of the N. Essentially what we want to create is a continuous shape that resembles a particular side. If we were to apply a color the sides of the N, it would look weird and incoherent. This is because of the blend steps. You see, the extrusion tool uses an algorithm that applies gradients to the extruded edges to create depth, so when expanded (remember, the expansion tool makes everything that is being expanded COMPLETELY EDITABLE), the blend steps themselves become individual objects. So now, if we where to select the right or any side of the N, we would only select 1 of the shapes that create the whole entire side. For clearer understanding, follow the pictures.



Now watch what I do exactly below when I join the paths.

So basically, what I am doing is using the selection tool, choosing the side as well as the curve, navigating to the pathfinder tool located, Window>Pathfinder or Shift+Ctrl+F9, then using the Add to shape Area command within the pathfinder tool to join the end. Notice How I immediately click the expand button after I join the paths in the pathfinder floating menu. This allows me to make the new shape directly editable. Now I can add a continuous gradient throughout the sides. Essentially, this is what we want to do to every single side of the N.

Continue with step 4 and do what I have shown, to all of the sides. Just watch below as I go through and do it myself.

NOTE: When viewing the mini gifs shown above, don’t be alarmed by the color applied. The gradients look like they are separated into three parts. This looks that way because of the compression rate I used on the Gif files.

You might notice that sometimes when I joined the paths together they suddenly disappeared. This is because when we un-grouped everything, certain elements were scattered unevenly throughout the layers. This is no problem. After joining them, and they disappear, all we have to do is locate the layer/group they are in; expand that corresponding layer and locate the clipping mask. Delete this clipping mask and watch at amazement as your object re-appears. Now we can choose what ever color we desire. Don’t be confined to what I do. This is the part where everything gets fun for you. This is were you start being creative and adding colors AND transparencies you think will look nice.

Step 5 – Modifying the other Letters

You will have two choices now. You can either go ahead and repeat steps 2, 3 and 4 to each letter, or you can start adding your effects to your newly created letter. If you decide to apply this effect to all the letters now, your letters should resemble something like the image below. When you are done with this, lets meet at step 6.


Step 6 – Get Creative

Ok, so now that we have that hard work out of the way, we are finally going to have some  fun with this process. This is the part of the tutorial were your creativity is welcomed most. You can say this is the post work in Illustrator. I can’t really teach creativity or give you a specific guide on how to think artistically for yourself; however, I can show you some of the techniques I used and teach you how to utilize resources to the best of your ability.

Now we are going to want to hide all the letters and work on just one at a time. With the caps selected, lets play around with the opacities, blend modes and strokes. One thing I particularly like to do is mess around with dashed lines. To achieve this effect we create a stroke, expand the stroke options and check dashed line. We can now set the length of the dashed line. I tend to keep the settings low and thin to get a notebook effect.


Next, duplicate the cap N, keeping it in front, lets choose a stroke and expand it. Delete the N and keep the stroke. Enlarge the newly expanded stroke and add a gradient you like. Do this as many times you want to create variety.


The expanded selection should look like this and now we can apply a gradient.


Continue experimenting with this until you are pleased.


Lets create circles, add any gradients we like and set blend modes to multiply. Create these separate elements in different sub-layers in order to keep them organized.


Now watch carefully as I create opacity masks to achieve nice fading effects. I’m basically making a shape, choosing a color I like, then creating another shape on top of it with a black and white gradient that serves as the opacity mask

Continue this process over and over again to create unique designs. Don’t just use circles, also experiment with other geometry. Also try variations of radial and linear gradients for the opacity masks to create distinct fading effects.


Now we will create variations of white spheres and give them a Gaussian Blur Effect to give the N some depth.


Apply the Blur and experiment with the Transparency settings as well as Opacity to blend it in better.


Now when you are satisfied with what you have, lets get a little bit more creative. Lets add some patterns behind the letter. You can come up with your own pattern, search the freebie section of Go Media’s Vector Packs and use those available patterns, check out Vecteezy for more elements or you can browse the awesome Arsenal collection Go Media offers. Once you have decided what you want, place a sublayer at the end of the N Main layer and place the pattern inside it.


Lets add some more spizzaz to our design by taking advantage of Go Media’s free brush pack. We can now use strokes with the shapes provided in the free brush pack to create intricate background designs. Mess ground with expansion and gradient to get the desired effect.


Now that we are done with the N letter, we can repeat all of the steps above to all of the corresponding Letters. After we are done, our eye candy should look like this.


We are now ready for some handy dandy post work in Photoshop. Save your work and proceed to the next step.

Step 7 – Post Work

Lets use a drag selection to copy all of our elements in Illustrator. We need to make sure none of our layers/sublayers are locked, or the finished product will look weird and incomplete inside of photoshop. Press Ctrl + V or Edit>Paste. An import dialog box should pop out in photoshop. We shall choose Smart object, that way all vectors are preserved.


NOTE: Transparencies are not transferable from Illustrator to Photoshop due to the difference in Blend Modes. In order to preserve the transparencies, you will have to import the text effect with a background from Illustrator. However, If you know how to import the imagery from Illustrator to Photoshop with corresponding transparencies, do share with us your method. I have often tried to export my image from Illustrator as a PNG then import it back into Photoshop, but that doesn’t seem to preserve anything either. I think adobe should keep the algorithm for transparency modes in all of their products the same for better compatibility between software packages….

Now that we have our work imported, we shall look for Nebula stock imagery to give our ‘Fruity’ text a futuristic feel. I used these stocks: Nebula 1, Nebula 2, and D.A. Moonchilde. With Moonchilde stock, make sure you credit her properly as she gives specific instructions on how her stock may or may not be used. I will not be covering too much texturing in this tutorial b/c I find that this text effect stands out better on a calm ‘n subtle background. Of course you can go crazy and add as many textures and images as you want, but that’s your forte.

Now that we have our text properly imported and our stock images chosen, we will begin by creating a vignette around the text. To do so, lets create a huge eclipse selection but lets keep it within the canvas. Inverse our selection, use the paint bucket tool and fill with black or w/e color is desired, Lets apply a Gaussian Blur to it with Maximum settings, and lets turn down the opacity to about 35% and now we have a nice looking vignette.


Now we want to add a shadow underneath the Letters to give the image more depth.


Lets give the shadow layer a Gaussian Blur effect of about 25.2 pixels and then lets decrease its opacity to about 57% so that it doesn’t look over saturated in black. Essentially we want a soft area shadow.


Lets some Diamond shapes. We will use the rectangle Marquee tool to create a square selection by holding shift and dragging along the canvas. Lets right click selection and choose Transform Selection, hold shift to snap rotation to 45 degrees, then rotate once. Use the paint bucket to fill the selection with white or whatever color you prefer.


Give the rotated square a gradient overlay of your liking.


With the ‘marching ants’/selection still active around the square, choose the marquee tool again and move the active selection about 35 pixels above the square. Right click, Transform Selection and stretch the selection out.


With selection in place, we will apply a Ctrl+Alt+D command or simply Select>Modify>Feather, and choose a radius of about 50 pixels. Hit apply then press delete. This create a smooth fading effect inside of the square/diamond.


Repeat this effect to your liking with same or different shapes. It’s always good to take risks and try new ideas.


Now lets add some nice glows to the background by creating 3 circles with different colors.


To make them glow, we will now add a Gaussian Blur Effect and play with opacities.


Finally, we will finish the piece by adding a subtitle below the word. I chose typeface, you can go with w/e you desire. We will give it a nice gradient that plays off the main title.




Now we duplicate the ‘Typeface’ layer by applying a Ctrl+D command. We will hide the Glow option but keep the gradient. Right click the layer and convert to Smart Object in order to retain the gradient information on to the type and get rid of the glow. This allows us to re-scale the position of the ‘Typeface’ object anywhere without the gradient changing. Now we will apply a Gaussian Blur and set blending mode to Soft Light 100%. This will now act as our glow pass for the ‘Typeface’ element.


Lets add some motion blur to the typeface. Duplicate the ‘Typeface’ layer once more. Again, disable the glow option but keep the gradient overlay. Convert to Smart Object and apply a Motion Blur.


Step 8: HDR Effect

Technically, the design is complete. Personally, I like to give an HDR effect to all of my flyers and typographical based works. I don’t use any expensive HDR image plugins out there, however when I get the money I will definitely get my hands on Topaz Adjust. It mimics what I basically do at the click of a button. This would definitely come in handy when tweaking something last minute. Oh well, I don’t have it, but if you do, use it to your advantage. I figured out a technique that would mimic the final output of this awesome filter.

So we will start out by exporting our file as a JPG image then re-importing it back into Photoshop. I like to do this rather than merging layers and or flattening my image, because I tend to save a lot. If I save while I have flattened the image I will lose everything I have worked on, layer wise. This is why I choose the Export JPEG option since it will flatten the image for me and preserve the 300 dpi or whatever setting I have it set to. You can also export to PDF, TIFF or whatever floats your boat. Just make sure the image is flattened.

Now we will duplicate the layer 4 times. Name one layer shadow, the other highlights, the other sharpen and the last isolation. Leave the BG layer locked as we will merge everything back to one layer when everything is done.

Hide all the layers but the shadow one. The go to Image>Adjustment>Shadow/Highlight… We want to bring out the shadows and dark areas.



We can now hide the shadow layer and un hide the Highlight Layer. We will now bring out the highlights.



Lets hide the highlight layer. Now we want to isolate the shadows from the highlights and vice versa. To do this, we will use the isolation layer. We will give it a brightness and contrast adjustment found Image>Adjustments>Brightness and Contrast.


Using the isolation layer, we will extract the highlights from the highlight layer and the shadows from the shadow layer. To do this use a Color range selection found Select>Color Range. Select the black area and then click ok. Now inverse your selection and apply a feather range of about 25. Delete your selection twice and now you have a layer with only shadows.


We will do the same concept with the highlight layer. Use the isolation layer as a map, use a select range option then click on the black area, instead of inversing the selection , leave it as is but feather it to about 20 and hit delete once. Your image should look like this.


Now we un hide both shadow and highlight layers and hide the isolation map layer. We shall now tweak the blend modes of these layers to create contrast. Make sure the highlight layer is above the shadow layer and the shadow layer is above the BG layer. The shadow layer should be set to Multiply with an opacity of 30%. The highlight layer should have full opacity of 100% with a blend mode of soft light.

NOTE: This technique tends to make the vignette very dark and saturated. To rid ourselves of this we will manually go in and choose a soft Eraser brush with an opacity of 40 and erase away until satisfied.


Last but certainly not least, we will add a High pass filter to our sharpen layer to create the HDR look. We will end by setting this layer to Linear light with an opacity of 46%.




These post-processing techniques will vary between the size, colors/brightness and contrast of your works. With that said we conclude this overwhelming tutorial.

Download all of the files used in this tutorial here: [download id=”47″]

For the PSD, I can’t provide the stocks I used as I am not the rightful owner who can re-distribute the stocks. However, I have provided the links above so that you can find them yourselves. I hope this tutorial was helpful and I hope to see this technique replicated and tweaked artistically. I encourage you all to use this tutorial in your own work and I would like to see some nice emulations of this typeface in Go Media’s User Showcase on Flickr.

Hope you found this tutorial useful; happy designing!

Go Media’s Jeff Finley: Interview at VectorTuts


Just a quick heads up to let our readers know about the extended interview by Sean Hodge with Go Media’s Jeff Finley over at VectorTuts.

Jeff shares design, illustration as well as design industry insights, along with related thoughts on graphics software, balancing the personal and business aspects of your online presence, collaboration with other artists, tips for aspiring creatives, and much more.

InDesign Quick Tip: Indent To Here


InDesign Quick Tip: Indent To Here

Have you ever tried lining up an indented, bulleted list by hand? Well it sucks. Some years back I was setting type on a sell sheet for a college bookstore and needed to align an indented list so that the first letter of each line was in a vertical row. My boss at the time saw me struggling and gave me a little gem of a keyboard shortcut that I will now pass on to you. I always seem to forget it though, so I wrote it on a Post-It note and put it on the wall by my desk.


In Adobe InDesign, move your cursor right before the first letter of the paragraph on the first line of your bulleted list. Press ctrl + \ and the other lines will fall in directly below that one. You are left with a clean left justified bulleted item. NOTE: When setting your rags by hand on the item, do not use a hard return (Enter) or the trick will not work. If you need to insert a manual break, use a soft return (Shift + Enter) and the list will still line up correctly.


Editor’s Note: when indenting bulleted lists in InDesign, I usually go with the “Bullets & Numbering” form the Paragraphs panel fly-out menu and apply my indents that way, then optionally save as a Paragraph Style.

There are some nice additional tips on using Indent To Here over at  Creative Techs (video) as well as some general notes on the official Adobe help page for InDesign.

Photoshop vs. Illustrator: Part 2

Photoshop Vs. Illustrator
Photoshop Vs. Illustrator in a (continued) no-holds-barred battle to the death!

WARNING! This blog post contains foul language and dirty underhanded insults. The (harsh) opinions expressed in this article do not reflect those of Go Media Inc. or Adobe Inc. Please do not read further if you are pregnant, have a weak constitution or are currently on prescribed psychotropic medication.

If you haven’t already, be sure to read Part 1 of this Illustrator vs. Photoshop showdown.

5. What app is best for having to perform revisions?

Ps: First off, this question is retarded. This was one of the questions made to help out Illustrator because he needs all he can get. Nonetheless… When you start to work on a project, is one of the first things that comes to mind “Before I start, I should choose the program in which I can fix my mistakes most easiest?” I hope not.

Besides, revisions are for Philistines. If a mistake is made it becomes part of the piece, and is used to evolve the work. Ask yourself: would Picasso have used Illustrator or Photoshop? Had he used Illustrator, odds are this seminal piece of work:

Photoshop Vs. Illustrator

would have turned out to be this:

Photoshop Vs. Illustrator

In more cases than not, clients shoot down golden ideas rather than place them in their trophy case. In these instances it’s best to revise the approach to your work in general, rather than weigh one piece of software’s revision capabilities over another. Saving out multiple versions, backing up your work, and of course good ol’ Cmd+Z. Nothing other than this sort of approach to the work is necessary in my mind. Finding efficiency in generic slapped on graphic styles, filters,etc… for the birds.

Rebuttal: Ai: As Photoshop and I began this blog we had too many questions. While we were paring down the list, Photoplop suggested that we get rid of this question. Here is the instant message exchange that followed (this is a real exchange between the writers of this blog):

[17:51] Illustrator: WHAT!?! #5… is a valid design issue… not redundant with any other questions.

[17:51] Photoshop: yea, but illustrator has the edge.

[17:51] Illustrator: EXACTLY!

[17:51] Photoshop: u bastard

Oooh… it hurts doesn’t it. Like a nostril full of wasabi. I rest my case.

Photoshop Vs. Illustrator

6. What app is best for laying out a book?

Well, I’ll admit that neither of us is designed for such a task. But if I must compare, I would crush Photoshop like the little bug that it is. For starters, as mentioned previously, you can’t even thread text in Photoshop! Can you begin to imagine hundreds of pages of unthreaded text? Every little text change would result in a cascade of thousands of edits! At least Illustrator supports multiple art boards in one document. Photoshop? Let’s see, 200 page book? Well, we’re going to need 200 Photoshop files for that! Fugetaboutit! Only someone with the brain power of Jessica Simpson would pick Photoshop over Illustrator – EVER, but particularly in this case. So, is it chicken, or fish? Neither, it’s crap and its name is Photoshop.

Rebuttal: Ps: You’re right… lets try and setup a 200 page book on 200 art boards in an Illustrator file. That sounds smart. You people out there think that Illustrator crashes a lot already? Just try and do what he’s saying now. Don’t let his bravado fool you, you’ll be saving out just as many pages with him as you would me. You might as well be doing it in a program that you’re comfortable with.

7. What app is best for designing a movie poster?

Ps: Movie posters can be very expressive. In regards to communicating a message that is in line with the movie’s message, what better tool to use than one that doesn’t let its features dictate the aesthetic. Odds are if the poster is more than text, you’ll know if the art was created in Illustrator. Photoshop makes an effort to get out of the way, and allow the message to be conveyed as purely as possible. Face it, vector art may be ‘totally sick’ but it has baggage.
Queue the overly exuberant douche-y response in 3… 2…. 1….

Rebuttal: Ai: Photoshop, you are as confused as ever. Just because I CAN create sweet vector illustrations doesn’t limit me to ONLY make vector illustrations. Did your mom drink heavily while you were in development? Since this is a movie poster, I’m going to assume that I’ll be provided some high quality images to work with. In Illustrator I can mask, fade and combine photos in a wide variety of ways. Then I can use sweet vector graphics to add all those hip trendy elements that you could never airbrush. Finally, the text, as we’ve already determined, will be much easier to work with in Illustrator. Oh, I forgot to mention – the movie Howard The Duck called, it wants its reputation back!

Photoshop Vs. Illustrator

8. What app is best for designing a t-shirt?

Ai: Anyone who has an inkling of knowledge about t-shirt printing knows that 99% of the apparel industry is silk screening their shirts. And if you know anything about silk screening you know that it’s a spot-color printing process. Vector artwork and spot-color printing are like cookies and cream! Illustrator gives you the finest array of spot-color designing tools. And when you’re done – it’s easier to trap, separate and print. So, unless you plan on using an iron-on decal to get your designs onto your t-shirt – you better choose Illustrator. Otherwise your shirts will look about as good as Photoshop performs; like something out of the 70’s. Would you like a little glitter ink with that design?

Rebuttal: Ps: Weren’t you the one raving about pushing illustration into the future a couple questions ago? Spot colors ARE crucial in the majority of the apparel printing projects out there (which is why there is no reason you couldn’t restrict your color palette while working in Photoshop)… BUT, if you do have any knowledge of the t-shirt printing biz, than you know full color printing is becoming more and more commonplace. Just check out the hottest Ts on Design By Humans. If you’re using current technology’s restrictions as the basis of your argument you better be willing to swallow your words my friend.

[Moments after this debate in a dark alley behind the Go Media studio…]

Ps: You are beaten. It is useless to resist. Don’t let yourself be destroyed as Macromedia did.

There is no escape. Don’t make me destroy you. You do not yet realize your importance. You have only begun to discover your power. Join me and I will complete your training. With our combined design tools, we can end this destructive conflict and bring order to the entire design industry.

Ai: I’ll never join you!

Ps: If you only knew the power of the pixel. Macromedia never told you what happened to your brother.

Ai: He told me enough! It was you who killed him.

Ps: No. I am your brother!

Ai: No. No. That’s not true! That’s impossible!

Ps: Search your feelings. You know it to be true.

Ai: No! No! No!

Ps: Illustrator, You can destroy Corel Draw. He has foreseen this. It is your
destiny. Join me, and together we can rule the design industry as brother and brother. Come with me. It is the only way.


Print Indie: Logo Lounge 5

Text Tool Tips


So you’re a keyboard shortcut junkie, working on a design. You need to add text. You select the Text tool in Photoshop, Illustrator or InDesign and add your text. But how does one jump to other tools—permanently or temporarily—while having the Text tool selected? Obviously if you hit one of the standard keyboard ‘letter’ shortcuts, you’re just going to enter that letter into the text box. Here are a few tips…

“Commit” the Text Box

Illustrator/InDesign: In Illustrator or InDesign, you can commit the text very easily by hitting the Esc key. The text/text box you were working with will no longer act as if it’s “live” and you can select another single-letter tool shortcut via your keyboard.

In Illustrator as well as InDesign, hitting the Esc key will also jump you to the Select tool as well. If you want to keep the Text tool active and still access the Select tool temporarily, just tap Cmd (Mac)/Ctrl (PC) to access the Select tool. Then release the Cmd/Ctrl key to revert back to the Text tool.

Photoshop: To “commit” text in Photoshop, you’ll need to hit the Enter key (note that the Enter key is not the same as the Return key; Enter is on your number keypad).  And of course, no special keyboard wrangling to move the text around—just move your cursor slightly away from the text, and your cursor will temporarily switch to the Move tool.

Thanks to Mike Shoaf for the Photoshop ‘commit text’ tip!

Temporarily Access Hand Tools

Illustrator: So you’re working with text but just need to temporarily do some moving of the canvas with the hand tool. To get the hand tool when you’re working with text in Illustrator, press Cmd (Mac)/Ctrl (PC) + Spacebar, then release just the Cmd/Ctrl key. On the Mac, Cmd-Spacebar is also the default Spotlight search keyboard combo, but if you do the tip as suggested it will work fine, even though the Spotlight search bar will pop up; just ignore it.

Big thanks to Mordy Golding for this Illustrator tip, been looking for a way to do this for so long!

InDesign Within InDesign, there’s actually a special Hand tool keyboard shortcut just for this purpose: Option (Mac)/Alt (PC) + Spacebar. In fact, I have mapped one of the stylus buttons on my Wacom graphics tablet to this Option-Spacebar combo as opposed to the standard Spacebar, and it works great even when not in a live text box.

Photoshop: In Photoshop, to temporarily access the Spacebar/Hand tool while working in the Text tool, hold Command-Shift-Space (Mac) or Ctrl-Shift-Space (PC).

Thanks to @jeremysnyder for the tip!

Know of any other handy Photoshop, Illustrator or InDesign tips for using the Text tool? Let us know in the Comments section below!

Photoshop vs. Illustrator: Part 1

Death To Creatives!!!


I am not a creative. You are not a creative. No one could ever or will ever be a creative. The word creative is not a noun. It is an adjective used to describe a noun. i.e. That is a very creative story you have there, Jimmy.


I have grown tired of seeing this word used within the design community. It is not our word. It is a word created by the advertising industry for their communication purposes. Outside the advertising community, however, it is incorrect grammar.

Now maybe I’m being a bit nitpicky here, but it is incredibly annoying to me. Yes, as a people designers are typically of the creative variety, but we don’t call advertisers ‘pitchers’. I mean essentially they are pitching their ideas to their clients, but does that accurately describe what they do? I would like to see all the sexual harassment and discrimination claims that would materialize if that term caught on…

However, using ‘creatives’ as a noun is just a symptom of a larger issue; what do I say when someone asks me what I do for a living? I’m certainly not a ‘graphic designer’, even though it says that on my degree. The connotations with that term are just terrible these days. Any old housewife that has a pirated copy of Photoshop Elements is now calling themselves a “graphic designer”. It is much worse when people refer to me as a ‘graphic artist’. The term just sounds so dirty to me and it makes me feel like I’m making clip art for a living.

I could be more specific and name all the different hats I wear, i.e. ‘identity designer’, ‘print designer’, ‘web designer’, etc., but I think that would be too much for most people looking for a quick response. Then there are terms like ‘information architect’ and ‘communications designer’. These sound a bit pretentious to me personally, but at least their credibility is not completely destroyed…yet. There is also the issue of illustration and typography. Where do they both fall into the equation?

So I’m left with a dilemma. What exactly do for a living? I design. I am a designer. That’s it. No more fancy titles or faulty phrases that cannot convey my true craft. I’m stripping it down to the essentials and laying it all out there for the world to see. If in casual conversation someone’s interest is sparked by my profession and they want to know more, I will elaborate. However, if I’m in a shitty mood when they inevitably ask “What do you design,” my answer will be “everything.”