Let’s look at how this is done, shall we?

1. First, download the material from here. You can chose to use your own image of course
2. Put it in a layer and name it “Shiftr Logo”
3. Duplicate the layer and name it “Reflection”
4. Move the layer down below the layer “Shiftr Logo”
5. Flip the image vertically and move it so the edge of the letter “R” almost touches the “R” of the logo.

It should look like this more or less:

Here is the essential. The key is to locate the closest edge to the ground. Make a mental note where the spot is and imagine you slice the image into 2.

01. With the layer “Reflection” active, select the left side of the image with a marquee tool.

02. Hit Ctrl+T (or +T) for transform, Right Click and select Skew!!.
03. You see the bounding box, move your mouse over the middle left anchor point. You notice your arrow changes to a small double sided arrow.

04. Click and drag it up until it aligns nicely with the Shiftr logo. And nevermind the weirdness.

05. Repeat the same steps for the other side

06. As I said before, nevermind the weirdness. Now, with the layer “Shiftr logo” is still selected, click on the “Add Layer Mask” on your Layer window as illustrated below. You’ll notice a Layer Mask appears next to the layer’s thumbnail.

07. You’ll notice the 2 color boxes on your Tools Panel will switch to Black and White (if you have a color(s) previously). In the world of masking, black will hide an image and white will show back an image that has been masked out (hidden). That’s the concept and we will be painting on the Layer Mask to hide some of the weirdness that is happening after we skewed the image.

08. Hit G on your keyboard for the Brush. Make sure the main color is set to black (to hide). Make sure you choose a softer brush and not a sharp one.

09. Start masking out the image until you get the result you want. If this is your first time dealing with the layer mask, it needs some getting used to.  But the key here is understanding what the 2 colors can do for you: black hides and white reveals.  Hitting “X” will switch the main and secondary colors back and forth and that is super handy. Also the bigger your brush, the softer the edge will be so this is crucial in getting a better result.

Next time, I’ll show you how to make the reflection better with a simple lighting trick. And perhaps a more complicated object to play around with.
I hope this helps, please email me if you have any questions.

You can assign a shortcut key using Action in Photoshop (sort of), however you are limited to the F keys (and a combination of the Shift and Control keys) only. For those new to Photoshop,  Action has been around for a while and it is essentially a recorded task. This is good for something that you do repeatedly, for instance if you have a batch of images and you want to resize them to a size and maybe for the sake of it you want to sharpen them too, then Action is for you.

With the same technique, we’re going to assign a shortcut key for a simpler task. One that I do very often is flipping an image (not to be confused with flipping a canvas). So I recorded the task, assign a key (in my case F2) and now everytime I want to flip an image, all I have to do is hit F2. No more : Edit > Transform > Flip Vertical. Just look at the time you save!

To those who new to Photoshop, below is the high level steps to assign a shortcut key for flipping an image vertically. If you have any question, don’t hesitate to email me.

Start by adding an object to a layer, in my case the Shiftr logo. While the “Shiftr logo” layer is selected, click on the “Create New Action” button.

A new window appears and you can tailor this to your needs. Name it accordingly (you can choose not to but let’s be organize shall we?). Leave Set to a “Default Actions” for now. For the Function Keys, assign your favorite key. I usually use the F1 to F4 keys for a more important task and the rest for less. You can combine Shift and Control too. If you have the box checked by default, that means you have to use that combination because the single key has been used for something else.

Now, hit Record, then go to Edit > Transform > Flip Vertical. The Shiftr logo is now flipped. Click on the “Stop Playing/Recording” button as it’s illustrated below.

That is it. So now to flip an image vertically, you only need to hit F2 rather than the longer route.

Thanks for visiting Shiftr.
Yes, you’re right no flashy flash site.  CMS and easy updating are the future and that’s the reason why I decided not to do Flash.

Err.. fine! That was just a lame excuse. The reason is I don’t have the time to catch up with actionscript again. It’s been too long since I used AS. But I’m fine with this format too. At least I have a place to post my work and thoughts too. But I’d love to do a flash version too if time allows, but in the meantime this will do.

I haven’t put all my work yet, but I will do it progressively (and slowly perhaps). If you’d like, you can follow me on twitter too.

One more thing before I bail, sharing ideas is the key to a better designer, but let’s avoid ripping off other people work, shall we? Because that won’t take us anywhere

Anyway to recap:

1. I’m too lazy to do a flash version;
2. You can follow me on Twitter;
3. More content will be added progressively and slowly;
4. Sharing ideas is good but ripping off is not.

Thanks for visiting guys.