Pimp My Rails Logo Tutorial

So some of you may have seen Amy’s quasi-announcement about our new SupaSecretProject™ on which we have been working a little bit lately. In building the logo, I realized that some of the simple things in Photoshop are not so easy to find for people who haven’t been using it as a tool of mass procrastination since 1996. So I figured it was time for a step-by-step tutorial on how I built the Pimp My Rails logo.

We’re going to create something like this:

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_16.jpg (Final Pimp My Rails logo design)!

Fonts

First thing anyone needs is some good fonts. Since “Pimp My Rails” is an obvious play on MTV’s Pimp My Ride television program, some mild semblance in a visual sense was desired. Xzibit was unavailable as a spokesperson, so the graphic elements were going to have to do.

I had a few fonts I had purchased for various projects, one of which was Letterhead Fonts Ballpark Script which has some awesome swashes too. We had purchased it for use at OnTap a few years back. This would be perfect for the “Rails” word. Then something fun but not too cartoony was needed for the “Pimp My”, as I didn’t want so much scripty that it just didn’t work well. So bring in House Industries Holiday Sans. We’re ready to rock.

Don’t you love these highly technical terms? “Cartoony” and “Scripty” and what not? Yeah. Precision in visual communication, that’s right! Enough babling. Let’s start Photochoping!

Photoshop Magic

So we start with a nice simple screen, in this case, 500×375 pixels. You don’t need a screen grab of a blank Photoshop screen. You can imagine that one. So let’s start with the Ballpark Script and write “Rails”.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_01.jpg (Step one)!

Okay, we’re on our way. Let’s get a sexy swash going underneath it. I used the “i” character for this particular swash.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_02.jpg (Step two)!

And we say in Kool-Aid Man style: “OH YEAH!” But we have miles to go before we sleep young padawan. The Logo is missing half the words. So we’ll add them and give them a little curvature with the arc text tool. +22% vertical should do it. And let’s drop it in House Holiday Sans.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_03.jpg (Step three)!

Sexy. So now we need to make this “pop,” as the obnoxious client would say. In order to do that we’re going to start playing with layer effects. Let’s get a colored background so we can see what we’re doing. You can achieve this by creating a new solid color layer or using the paint bucket on the background. I prefer the former method because it’s easier to change later on in the process.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_04.jpg (Step four)!

Excellent. Now let’s give this a mega stroke. Since we have three text layers, let’s simplify things. Group them together, duplicate the folder, and flatten the two layers that make up “Rails” into one layer. We will now apply styles to “Pimp My” and “Rails” with a swoosh independently. Put a stroke on each layer and size to taste:

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_05.jpg (Step five)!

Now let’s add a gradient overlay as well. On this I had the “Pimp My” overlay stay close to the main red that is the darkest part of the “Rails” gradient.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_06.jpg (Step six)!

Hmm. Still looks kind of flat. Let’s fake some depth with a bevel.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_07a.jpg (Step seven)!

gives us…

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_07.jpg (Step seven result)!

We could call it a day here. But this needs some more excitement doesn’t it? So what can we do? Starbursts! Everyone loves starbursts! Now these aren’t too difficult to make in Photoshop. Create a new image, let’s say roughly 1000px x 375px. Make a vertical 20px black stripe on one edge of it. Duplicate it and set it next to the other one and then invert it to white. You should have something like this:

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_08.jpg (Step eight)!

Now with snap involved, we can use the drag and copy (Apple – Option – Click) to rapidly fill up the whole thing. Make sure you end on the opposite of what you started with. Crop to taste.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_09.jpg (Step nine)!

Now it has come the time that we make this a rockin radial explosion of pixel sexiness. Filter → Distort → Polar Coordinates is going to be the tool that accomplishes this.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_10.jpg (Step ten)!

So hit “Rectangular to Polar” and watch it go! You can try this with regular pictures, but you typically end up in a somewhat Alice in Wonderland kind of world. And that’s not always good.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_11.jpg (Step eleven)!

Now you can adjust your settings to get various feelings of compression on certain axes, etc. That’s your call. But we’re going to take this back to the main file and paste it in there.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_12.jpg (Step twelve)!

That’s a little stark. We also know that we want to create some illusion of depth, so let’s make a radial gradient to help with that.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_13.jpg (Step thirteen)!

Okay, so here’s the trickery. Select the layer of the starburst and apply a layer mask. Paste the radial gradient into the layer mask (you might need to invert it for the proper effect). Finally, set the layer transfer mode to “Overlay” and the opacity down to about 10%. Make sure it’s behind the text, but over the red background.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_14.jpg (Step fourteen)!

Lookin good. On the original screen capture on Amy’s site, I had used a photoshop brush and basically dirtied it up a lot to make it look a little vintage. This version removes that.

Let’s reinforce the depth aspect and add a drop shadow to the text. Duplicate the text group and rasterize the whole group to one layer. Apply a drop shadow.

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_15.jpg (Step fifteen)!

Add cheesy tag line to taste:

!{border:1px solid black;}http://boboroshi.com/assets/2007/5/14/pmr_16.jpg (Step sixteen)!

There you go. Your Rails, Pimped.

  1. Tiff says:

    This is me, weeping for my complete lack of design skill. Damn.

    At least I have the jokes. yeah, that's it. The jokes... ;)

  2. Jimmy Huston says:

    NICE A WORK OF ART...

    CAN U DO 1 FOR ME..INSTEAD OF RAILS..PUT
    Ponape with blue&red color the shadow will be with,
    email me with the finished one..thank you very much
    a.s.a.p...my little league team will be much happy with the design u make...

    again love the design...keep up the fine work..

  3. John Athayde says:

    I'm sorry Jimmy, I can't do variations for people. The tutorial was created to show other people how they can create their own.

  4. Ayo says:

    Nicely done. Feels good reading thru, and know you are having so much fun at it makes it all interesting.
    Good going.

Post a comment

Name or OpenID (required)


(lesstile enabled - surround code blocks with ---)