I like finding two things that don’t intuitively mix and extend them out until they touch. It might seem funny to a graffiti writer think that the tools of logo/icon design (vector illustration software like Adobe Illustrator) could help them achieve new things and reach new people. To me, a computer nerd first, a businessman next, and a graffiti artist on the side, the whole process makes perfect sense.

This kind of thinking can work for any kind of artist. If you paint pictures, you can design shirts. If you draw cartoons, you can easily translate that to digital images for web sites or blogs. Find the niche, spread the word, and extent your influence. The more people you can reach with your art, the better (from a sales and reputation standpoint). If you do your art on the west coast and have build a following, there will be people on the east coast who have never heard of you and would probably love your work.

Here’s what I’m talking about…

I started with a simple drawing in my sketchbook. First step was pencil, then just plain old Sharpie marker on top. I don’t pretend to be an accomplished artist by any means but you get the idea. At this point, it was time to put some paint down so it was off the the Art Academy of San Diego.

Overall, this is definitely the best piece that I’ve done. It’s also the third time I’ve ever put can to wall and really went at one of my drawings. This art form is very cathartic for me… more on that another time.

The second picture above is almost where I stopped but I decided to add the white shine on the top and sides which really set the piece off. I really wanted a black outline but I bought Rustoleum satin black and that just is not the right paint for an outline so I ended up falling back to my old faithful, “blue note” by Montana Gold.

This could be the stopping point for an artist but, in my mind, there is more to do… much more.

With just ink on paper, there isn’t much that can be done with it but, as you can see here, I scanned the image into my computer (with my handy-dandy Canon MP610 printer/scanner which I highly recommend). Now, in Adobe Photoshop, I start playing with the image to make it look more vibrant and consistent. First, (this is always first for me) I opened the Image > Adjustment > Levels window. For those unfamiliar with Photoshop, this affects how much white and black is in the image; it’s like a contrast adjustment on crack. Just play with the levels until it looks right. Next adjustment was Image > Adjustment > Saturation. I use this to bring out the colors and make it look a bit more like my drawing (scanned images seem to lose a lot of color). Finally, to make the colors (black, light blue, and orange) perfectly consistent, I used the Eyedropper tool (”I“), picked a color the represented the color the best, then picked the Paint Bucket tool (”G“). At the top, I set the tolerance to “60,” found a spot on the color I sampled, then dumped it. Because the contrast is so high between these colors, it worked out perfectly. Then, using the same color, I picked the Brush tool (”B“), chose an appropriate size (”[" to decrease and "]” to increase), and cleaned everything up. I did this for each color.

This image is “finished,” meaning that this drawing has gone about as far as it can. To move forward and make something transferrable, we need to move it into a new program, Adobe Illustrator.

First, in Photoshop, I took all the color out by going to Image > Adjustment > Desaturate. I’m not going to transfer the scribbles in the middle nor am I going to keep the color, just the outline of the letters themselves and the outline of the background.

Now I select the image, copy it, and paste it into Illustrator. The next part is a pain in the butt (especially if you’re a novice like me).

I keep the black and white image from Photoshop and use it to trace. What we’re doing when we trace a pixel image (image from Photoshop) is creating a line path on top of the illustration. Because this awesome programs work with image layers, we’re not changing the original image (though it looks like we are). Image layers are the digital equivalent of clear transparencies. If you can imagine tracing a picture with pens on a transparency and you have an idea of these layers. The fun part about these is that the layers are basically infinite so minor changes can be made and altered a million different ways.

To make this outline, I took the Pen tool (”P“) and added an anchor point on each corner, following the outline of the letters. See how you can follow that line around the entire piece except for the dot on the “i” and the insides of the letters? Every continous line is its own path and will be traced separately and then combined.

I would love to write out a tutorial about how this is done but it’s a bit beyond the scope of this post. If you’re dying to know, here it is in a nutshell:

1. The path around the edge of each letters is 4 point with no fill (simple techniques you can learn on-line).
2. After creating the path with the Pen tool, it was really blocky with straight lines only. Correcting this was the tricky part. Hold down Shift, then press “C” to use the Convert Anchor Point tool. Click on the point that connects on of the lines you want to be curved, hold down the mouse button, and drag away from the point to make handles appear. If this doesn’t seem to work, zoom in and make sure you’re selecting the point. the two lines that connect to this point will likely be screwed up now. Click on the square end of one of the handles and drag it around the point to separate it from the other handle. You’ve now made a “combination anchor point.” Now, type “A” on the keyboard and screw with the handles until the line curves correctly. You’ll have to do this for all the lines you want curved. This is a pain in the butt, not intuitive at first, and takes practice.
3. The insides of the letters (4 paths… see that?) were subtracted from the outside by selecting all 5 paths (hold down Shift while clicking), then choosing Window > Pathfinder, clicking on the “Subtract from shape area,” then clicking Expand (both are in the Pathfinder window on the left).

After all of that, I finally had an outline. Why all of this work? This image can now be resized to any size, large of small, without losing quality. You can also do some awesome things with this but first…

….I added the original colors to show how clean this format is. Picking new colors is as easy as selecting the shape and finding a new color in Illustrator’s swatches. I was really excited to find some amazing combinations of colors, things I would never think go together. You can also use Adobe’s kuler.com site to import fun combinations (I’ll save explaining that until I actually use it but check out the site if you’ve never seen it).

Next, we can play around with new colors, line widths, and, everyone’s favorite these days, gradients (smooth shift from one color to another). Above, you see my shiny Halloween version. Gradients can go from any color to any color but add a nice sense of depth if you choose a color and a slightly darker/lighter version of the same color.

Additional designs can be added very easily in this format. In fact, anything too complicated should probably be left out when tracing with the pen and added later. In this case, I added the scribble-style fill that you can see in the original and converted it to some wacky ice-cream colors (because I have a sweet tooth)

Last but not least, we can have some real fun and extrude this design to make it 3-D. This control can be found under Effect > 3-D > Extrude & Bevel. There is way too much fun to be had with using Illustrator to modify an original piece of artwork.

The vector artwork is great because it’s the best version to use for printing because it’s quality is infinite. You could take the vector file of the image above and make a vinyl wrapper for a skyscraper and the lines would be as sharp as you see them above. In fact, you’ll notice, the images above have very sharp lines to them.

These designs can be used in magazines and books very easily now. Also, since the color information is very simple, these designs are great for screenprinting (though a but more work needs to be done). As I said above, they can be used in vinyl designs for vehicles or blown up and printed as posters.

The bigger implication here is flexibility and expansion. Maybe I’m not a great graffiti artist but maybe my simple illustrations above look like a logo someone wants and I get business drawing one up. Maybe someone out there is a great graffiti artist but translates his/her work digitally and makes it known that he/she can do more than just make a piece of paper or a wall look amazing.

Expand out and learn new things; you’ll never be sorry.

My last business card ordeal was such a cluster that I’m not even going to link back to that post. Besides, it seems to be getting an inordinate amount of p0rn spam comments and I’d rather NOT help those garner any more attention.

I digress…

I also need a business card and have not been giving this important piece of a business that relies on word-of-mouth enough attention. I was pondering new designs when I came across an artist who does letterpress artwork. I posted his work on a forum I frequent and got offered an excellent deal on letter pressed business cards. I immediately went to work on the design and came up with this:

I was digging it but the printer said that each extra color was an extra plate and would cost more. The printing was already more than I wanted to spend so I went with all-black:

I was really enjoying the design and loved the “old design for new techology” meme. I liked it so much, I posted it on the forum where I met the printer. It didn’t meet with quite the same approval as it had in my brain. Here’s what was said (verbatim):

My eyes are drawn all over the card and can’t find any focus. The font/italics aren’t very good and seem amateurish.

I like the card, but it makes you look like a lion tamer or animal trainer not a tech guy. Maybe have him using the chair and a whip on a PC? That is if you are going to stick with the original idea… And the accents that are on the corners, I would change it to one continuous border, have it just on the top and bottom make it look a little busy.

it’s just hard on the eyes. One more thing… you do look like a lion tamer. My suggestion is to go with the motion of the wheel and not try to reinvent it.

As for the 1920’s circus theme.. It can be done, however I think you missed the mark. To me, frilly script fonts, and borders don’t say “circus” to me. I’m also not making the connection between circus and technology. I’ll also add that your message “Josh Can Help” also does not fit with a circus style theme.

Ouch! I was convinced that no-one really understood where I was coming from with the design but I knew that these people had piles more experience than I do and there was very little that they were liking about it.

I was taking it personally and that is the worst way to try and learn anything. So I read and re-read everything and came up with a few more toned-down versions. For the record, I still like the first one the best.

These look cleaner and more toned down but, in my opinion, they were starting to lose character. I realized that the “look” I was going for was, more or less, only in my head.

Well, the wolves liked these much better…

If “Josh Can Help” is your company name, it should be the most important element on the card, and your tag line should be secondary. I’m still not feeling the overall style / idea, but I figured I’d point that out.

The simple ones are an improvement. I agree with the above poster, the company name should stand out the most. I’d also make the tamer bigger since there is so much room in the middle.

Try Vertical. Take the logo, or graphic, put in on top of the card with the ornate corners top and bottom. then imprint the rest below the graphic. seriously, try vertical. see how it looks.

Hmmmm…. then, a little more encouragement (the only reason I didn’t scrap this and start over):

I think that most people on this board don’t quite get letterpress printing… I personally like the approach you’re taking, talking high tech with low tech works for me…. and the lion tamer graphic works too. Letterpress with the right stock is a really nice tactile thing… and a classic serif font is a must for it. Sans serif with letterpress would be a waste of the extra money for print. You might as well print them thermographic instead if you go that way. The only change I would suggest is to have the graphic in the top half of the card and all the text below it. The script font was ok, but not great, given the context you’re aiming at for the design, you likely wouldn’t have seen a single word in-line in a script in a sentence, a true italic, yes, but not a script. Now if you were to take the card vertical and do one word per line stacked and larger with tighter leading, some caps as well, then it would work. I hope this helps.

With this new information, an idea to rotate it to vertical, and a few kind words, I came up with this:

I was REALLY liking this, much more than my original design, and it was very “letterpressy.” The forums went wild!

That one looks very good. I like the changed orientation and the subtle ornate borders. I would work on the font for Josh Can Help. Something a bit more exciting and antique.

my thoughts exactly. looking much better!

I was thinking about a different font as well and also wanted the text to be aligned on both sides (justified). It also needed to be in a vector format (Illustrator). I was scared to work in Illustrator (I’ve opened it five times since I bought it) but I found a few tutorials that helped and came up with the final version minus decorative elements:

The dimensions are a bit off and it’s not perfectly centered but the font, leading (space between lines), tracking (space between letters), and text are all finished.

What do you think?

Edit: final design getting printed: