Simple Turorial for Creating Perspective Shadows in Photoshop

I have tried other (not as good) ways to create 3D perspectives, I never thought about using a drop shadow in its own layer. A simple solution that has vexed me in several projects. I figured I should share it here. Though Lance is using CS+ Photoshop in this tutorial, this works in my lowly version 7 Photoshop.

To read this article in its original post, click

TUTORIAL | Graphic Thoughts: Creating Perspective Shadows
By Lance Gray – Posted Aug 1, 2008

Perspective—it’s one of the first things you learn about in any art class. The basic idea is that it’s the way your eye actually sees something, represented on a flat surface such as paper or a monitor. A simple example is drawing a group of objects: You represent an object in the distance by making it smaller, while making objects close to the viewer larger—make sense?

In this tutorial, I’m going to show you how to create perspective shadows in Adobe Photoshop CS3. The result is dynamic, but the technique is a breeze!

Step 1: Add an Image or Text as Its Own Layer
As anyone who has come into my area of the PixelPops studio knows, I own a nice collection of rare urban vinyl designer toys. So for this example, I’m going to use an image of one of my recent purchases: Pyro Smash by Joe Ledbetter. As shown in Figure 1 (below), I’ve already cut away all the white areas of my photo, so the Smash character is on his own layer, with the background being the bottom-most layer.

figure 1

If you don’t have an image to use, you can use text to follow along, as text appears on its own layer as soon as you type it.

Step 2: Apply a Drop Shadow Effect
Next, select the graphic (or text) that you want to add a shadow to in your layers palette and double click to the right of the name. You can also select the FX icon at the bottom of the palette.

This will open the Layer Styles palette. Select Drop Shadow (all the defaults are fine) and choose OK (Figure 2, below).

figure 2

Step 3: Create a New Layer
Now I’m going to show you a trick that most of you probably didn’t know existed—which is why you like reading my column, right?

Find the FX icon that got added next to the title of your layer, then right click it. You should now see a drop-down menu. Scan all the way down to the bottom and you’ll see an option that says “Create Layer” (Figure 3, below). Select this option.

figure 3

Step 4: Make Your Shadow Warp
Now take a look at your Layers palette. You should see your original object, but you’ll also see that object’s shadow is now on its very own layer! By the way, you can try this trick with a number of other Layer Style settings.

Go ahead and select the Drop Shadow Layer and press (Ctrl/Cmd+T). This will now give you the nodes on each corner to transform the shadow. Hold down the Ctrl/Cmd key and you can grab each corner independently and move it to wherever you want (Figure 4, below).

figure 4

By doing this you’ll see your shadow warp, creating a perspective shadow. Naturally, you’ll want to tinker around with different settings to achieve the look you’re trying for.

Step 5: Fade Out the Shadow
In this example, I want Smash’s shadow to be cast along the back wall (and yes, I realize that based off the camera and actual lighting it should go a different way, but hey, we’re here to learn). Once I have the shadow where I want it, I click the check mark at the top of the screen to confirm the shadow’s placement.

For added realism, I’ll generally also choose to blur the shadow a bit more (Filter > Blur > Guassian Blur, then choose whatever setting looks right to you). I tend to give it a slight blur, but nothing too over the top.

One last thing I like to do, which adds a little more realism, is to fade out the shadow very lightly to areas farther away from my object. I do this by selecting the shadow layer and adding a mask to it (Figure 5, below) using the icon at the bottom of the layer that looks like a square with a circle in it (the blue circle in Figure 5). I will then choose my Gradient Tool (the red circle), make sure my foreground color is black (the yellow circle), and drag from the top of the shadow (near Smash’s fist) diagonally down to his belly button. This will fade out the shadow slightly near the upper area, giving a more realistic feel, as though the shadow is fading into the distance.

figure 5

Step 6: Link Each Object and Its Shadow Layer
Also, if you’re going to be moving your object around, it’s probably best that you link your object and its shadow layer together. To do this, simply select each layer and choose the chain icon to “attach” them together. That way, when you move the object, its shadow will go along for the ride!

As always, if you see an image that you wonder, “How could I do that in Photoshop?” email me at lance at and I’ll try to make a tutorial out of it. You can see my final design in Figure 6 (below).

figure 6

Lance Gray (lance at is the chief creative pixelmonkey at PixelPops Design, LLC. For questions, thoughts, or ideas, simply email him.

iPhone 2.0 Free Applications Review Part 1

iPhone Application Store

It seems that each night well after I should be in bed, I end up downloading and playing around with all the new applications available for the iPhone.

I realize that it may not be the most mature thing I am doing with my time… My only defense is that I have yet to pay for any (I cruise the free apps section) and try out those rather than paying the fees for apps that probably don’t work well yet, anyway. We are, after all, still in a kind of Beta grey area.

If you haven’t already looked, the new iTunes 7.7 is available and then you can see the application store. You will need an iPhone or iPod Touch with the 2.0 firmware upgrade to try these out.

The iTunes download page.

People don’t really know yet quite how all this will shake out. Remember that July 11th when everybody went to get their new iPhone that the servers were overloaded all day. There are still some bugs to be sure.

Regardless, I have already tried out:

Career Builder– I should have known from the fact that their site does not really provide quality jobs or networking that this app would not be any better, but like many others, I was exited to try. Don’t waste your time.

Holy Bible– While I would not call myself a religious person necessarily… I was intrigued by the description that it was the whole King James Bible with annotated notes as well as a dynamically updated comments on each entry. I was surprised and delighted by the interface and the content. I recommend it for those who wish to study and discuss the Bible

I’ve tried out the Jirbo Arcade, Break and Avatar – while the Break game has a cool interface and I like the idea of uploading my scores to compare with others, the interfaces seem simple and unimaginative. The icons are cutesy so maybe its not geared for my demographic, but I don’t see highly stimulated teens getting into memory games and a measly 15 levels of game play (I finished them all the first time I played). Forget it.

iMaze – This is one of the games that takes advantage of the accelerometer feature of the iPhone. Arguably the aspect that differentiates the games on the device from those available on other phones. Here, you attempt to move a ball through a maze by tilting the iPod touch or iPhone to get the ball to roll. As the levels increased in difficulty, I found myself getting fairly frustrated (a good sign) and one that shows that the game will provide distraction on those long flights or BART rides. Get it.

Moonlight Mahjong – This game is worth downloading if only for the interface. Gameplay is the same as Mahjong in that ‘free’ tiles must be matched in twos to remove them from the board, but the player can rotate and zoom in and out of the board in three dimensions. The graphics really take advantage of the iPhones abilities and when I get frustrated, I sometimes just zoom around the board to see the pretty blocks…Get it.

Twitterriffic – This application has too many letters in its name and there are too many applications accessing Twitter, considering that the interface for Twitter worked great on the previous iPhone firmware versions. I will admit that it is nice that now the tweets are ‘pushed’ to your device and the interface is a little cleaner and links are nicely dealt with. The application is free, so there is nothing wrong with downloading it if you already have a Twitter account (and the Fail Whale is submerged). Just don’t expect a paradigm shift to occur with the application. Take it or leave it.

PageOnce – I love it! One great compact interface that the user can customize to connect to bills, email, social sites, wireless accounts. Each link gives updates and hints as too when there is new information. A must have for those on the go who want to stay connected in business. Must Get it.

Remote – I have used this application nearly everyday. It allows me to control my music, podcasts, movies and iTunes on my network from my iPod. Now the iPod is a remote that I can use anywhere where I can access my home network. An absolute must have.

I will review more applications later and invite those of you who have already tried these or others to chime in with your opinions.

Read Part 2 of the Review

Assistive Technology Assessment Article

I will be assessing the technology needs of some schools in the Bay Area in upcoming weeks and was doing some online research regarding Assistive Technology in schools and best practices for advising administrators on purchases, training and I.E.P. funding for technology.

This article does a great job of outlining what to keep in mind when first interviewing and observing classes, learners and teachers.

Assistive Technology Assessment: More Than the Device

By: Andrew R. Beigel (2000)

Assessing an individual for assistive technology (AT) use is an important part of the reauthorization of IDEA (1997) and an essential support in the path to greater independence and integration into society. Unfortunately, AT devices are frequently abandoned for many reasons. Sometimes AT selection is based on a mismatch between the individual’s desires and/or needs. Sometimes the individual outgrows the capabilities of the device. To foster optimal AT use, this article presents guidelines that educators can follow to put the individual user of AT at the center of the assessment process. Read the whole article…

Usability Challenge 2008

Usability Challenge 2008 is only 6 days away if you’re in Oakland, California, and 5 days away if you’re in Wellington, New Zealand. If you’re one of the almost 5,000 inhabitants of the island nation of Kiribati, then you will be the very first Earthlings to experience Usability Challenge Day 2008, being the easternmost humans on the planet. This is very appropriate given that the I-Kiribati became unofficial Usability Challenge heroes by solving a usability problem of global proportions!

From 1979, Kiribati found itself straddling the International Date Line. This meant that when it was Monday in one part of Kiribati, it was Sunday in another. Not a particularly usable situation for Government agencies trying to get some work done. So in 1995 they moved a bit of the International Date Line. It now skirts around Kiribati, which has been enjoying synchronized weekends every since.

If the I-Kiribati moved the International Date Line to solve a usability problem, what are you going to do to make the world a better, safer and/or more usable place?

On Friday 1 August, your mission is to find a usability issue, design a solution, and share the design with someone who can implement it. Don’t forget to also share what you’ve done with your fellow usability challengers too!

Good luck, and happy designing.

The main website
Facebook Group
Mentioned on Boxes and Arrows
Usability News

New Wireframing Tool

Pencil Project screenshot
It looks as though we have another tool available through GPL (free) that will allow for everyone to make GUIs and other prototyping without the CS3 expense.

I have yet to test it out, but will comment with reviews after I try it.

Please let me know your thoughts as well.

The software as well as tutorials and support are available here: