As indie developers, we often wear many hats during the course of developing an app or game. Over the past two years or so, one of the hats I’ve worn more than I expected was that of “Photoshop user”.
My background is software development. I have limited artistic skills when it comes to putting pen to paper, but I think I have a good eye for what looks good.
This has come in handy, since I’ve needed to create literally hundreds of individual image files for my games and apps.
Recently, however, I needed to do something new, and I could not Google my way out of it. I wanted to recreate the logo text for Unicorn Rush with a slightly different look. I’d like to share the three things I learned how to use in Photoshop recently in case you find them useful too.
The Goal
The original screenshot image I received from the artist did not have shape or font information. I could have asked for the original, but I thought it was going to be a piece of cake to recreate. Not quite.
The original image is below:
The goal was to recreate that text effect with the same font, similar curve and gradient, but tweaking a few things along the way.
Getting Bent
These goals presented me with some challenges. For one thing, I had no idea how to get the text to bend like that in Photoshop. I had tried playing with the Warp tool before, but manually dragging those control points around never gave me a good result.
I had also tried Illustrator, but I couldn’t quite get the look I wanted (I need to learn Illustrator at some point soon too).
As I was using the Warp tool “manually”, I finally happened to notice the combobox labelled Warp in the top toolbar. I clicked it and to my surprise I saw a list of awesome warp effects: Arc, Arch, Bulge, Shell, Flag, Wave, Fish, Rise, Fisheye, Inflate, Squeeze, and Twist. Bingo! Or so it seemed.
I played with the Arc warp effect until it looked like this:
I noticed a problem though. At some point I had inadvertently converted my text object to a bitmap layer. This meant that I could no longer edit it, and I’ve learned that non-destructive editing in Photoshop is definitely the best way to go.
“No problem”, I thought. I’ll just undo until it switches back to a text object and then apply the Warp to the text directly. The problem with this though, is that the Warp right-click menu item is disabled when a text object is selected.
I was certain that there must be a way to do this non-destructively, and after some more Googling and looking around the UI, I noticed this little button when the text tool was selected. The tooltip says “Create warped text”. Ding, ding ding! I do believe we have a winner. Yes, I should have known about this ages ago, but oh well.
Sure enough, that let me apply the same sort of warp as with a normal layer. I don’t know why Adobe disabled the Warp menu item, but then gives you a separate button to do the same thing. I am running CS3, so I don’t know if this is the same in newer versions.
The resulting image looked exactly the same as above, but now the text was editable. Great success!
Bending Gradients To My Will
Now that I had my text the right shape, I wanted to add a gradient to it. I selected the gradient I wanted and applied it to the text. Unfortunately, the result was not what I wanted.
As you can see in the image above, the gradient goes straight across the screen, but I wanted it to follow the curve of the text. I could not find any information on how to do this after a significant amount of Googling. I even consulted some friends who use Photoshop on a daily basis, but found no answers.
Smart Objects to the Rescue!
I started experimenting with various things and suddenly had the idea of trying to do it using Smart Objects. I have made fairly limited use of Smart Objects directly, but as it turns out, I’ve used them without really noticing; the File->Place feature is implemented using Smart Objects, but I never really paid much attention to that fact.
After some trial and error, I eventually hit upon the following sequence which gave me the result I wanted:
- Create a text object
- Apply the desired gradient, but don’t warp it
- Right click on the text layer and select Convert to Smart Object
- Select the newly created Smart Object layer
- Select Edit->Transform->Warp (or click a resize handle on the object then right click and select Warp)
- Notice that the Warp menu item is available again once the text is embedded in a Smart Object
- Choose your desired Warp type and play with the settings until you are happy
More On Smart Objects (Is that an oxymoron?)
But what are Smart Objects really? They are basically layers placed objects, that happen to be Photoshop documents. The contents of the Smart Object is rendered at the curent size and the resulting bitmap is used as the target for any additional effects that are applied to it.
Whenever the source is updated or the object is rotated or resized, then bitmap is rerendered and any layer effects applied to the Smart Object are reapplied.
One additional attribute of Smart Objects is that if you copy them, they all refer to the same master object. If you select Edit Contents for a Smart Object, then when you save the changes, all copies will be updated.
In the example below, I took the “Unicorn Rush” Smart Object and duplicated it twice, and then applied a bevel effect to the middle copy and a strong drop shadow to the bottom copy.
Then I selected one of the Smart Objects and chose Edit Contents from the right click menu. I changed “Unicorn” to “Punicorn” (the original name for the unicorn in the game BTW), then closed and saved the Smart Object.
I only changed the text once, but as you can see all copies updated. More importantly, the layer effects I applied to the Smart Objects were all automatically reapplied to the new text.
Here are some other uses for Smart Objects.
- Adding the same Layer Effect multiple times to strengthen it (shadow, outer glow, etc.)
- Non-destructive image manipulations (the effect applies to the Smart Object, not to the source)
- Nesting Smart Objects within Smart Objects
Some of these techniques may be old hat to experience artists, but as most of you reading this are developers, I hope this was helpful for some of you.
Let me know if you come up with any creative new uses for Smart Objects.
