Keyboard Shortcuts

I’ll be making references to many keyboard shortcuts in my tutorials, and one of the easiest ways to become faster and more efficient with Photoshop is to make use of these shortcuts… One of the main advantages to using Photoshop in a photography or design project is that it will save you time, and thus money. Keyboard shortcuts can maximize this efficiency. Additionally, I find it more relaxing to use keyboard shortcuts to switch tools, since moving my mouse, and hence my eyes, away from the image to the toolbar interrupts my thought process. Finally, you’ll be able to impress maybe one out of every 10 or 20 people by using keyboard shortcuts.

To look at how your keyboard shortcuts are set up, and to change them, go to Edit » Keyboard Shortcuts… ( Alt + Shift + Ctr + K ).

A useful way to look at all the shortcuts is to click on the Summarize button in the Keybaord Shortcuts and Menus panel. This will create an .htm page that you can save for reference with all the shortcuts on it.

You’ll usually be interested in mostly the shortcuts for using the tools, and these can be in the drop down menu of Shortcuts For.

You can edit the existing shortcuts and create new ones by clicking on the Command you want to change. Make sure to save you changes as a .kys file. To do this click on the disc icon to the right of the Set drop down menu.

If you look through the shortcuts, one thing you’ll notice is that several tools can have the same shortcuts. Tools that have the same shortcut can be toggled through by hitting the applicable shortcut key multiple times. You may find that you cannot toggle through the tools in this manner. If this is true for you, try hitting Shift + the shortcut to toggle through those tools. Whether you simply hit the shortcut key or have the hit Shift + shortcut to toggle through the tools is a choice for you. You can change this setting by going to Edit » Preferences » General… ( Ctr + K ). Use the, “Use Shift Key for Tool Switch” option.

Color Management

You want the color on the screen in Photo Shop to match the color the viewer sees. Whether the viewer is looking at your web site on a computer screen or at a photograph in a brochure or greeting card after it’s been printed.

Color setting are found under Edit » Color Settings… ( Shift + Ctr + K ). Color management can become an involved topic, especially if you are printing, but in general for web work you should use sRGB and for printing Adobe RGB (1998).  If you use the wrong color space for making web graphics, you’ll notice that the colors you see on the screen in Photoshop don’t match the colors you see on the screen when you look at the images on you website.

The Workspace

The Photoshop workspace is highly customizable. You can move the panels and tool bars around to configure things as you like. You shouldn’t be afraid to experiment. This is because you can save your current workspace as well as easily revert to the default workspace Photoshop came with. After you’ve moved the panels around to your liking, you can save your workspace by going to Window » Workspace » Save Workspace.

If you want to revert to the default workspace just select Window » Workspace » Default Workspace. Reverting to the default workspace can be especially useful if you are following a tutorial or book and you cannot see a panel that is being referenced.

Brush and Other Tool Resets

While working with Photoshop you will sometimes create your own brushes, delete or modify existing brushes, or change your choice of brushes in other ways. To get back to the default group of brushes Photoshop came with simple go to the brushes panel ( F5 ) or Windows » Brushes. In the brushes panel click on the top right drop down menu and choose Reset Brushes…

You can reset many of the other panels in the exact same way.

The knowledge that you can easilly get back to the original configuration of Photoshop should allow you to experiment more with the settings.

There a many other ways to customize your Photoshop, but I wanted to review several of the methods that I have found the most useful and important.

As an example I’ll show you how to end up with a photo like this:

Starting with this:

Table of contents -

1. Preparing to use the filter
2. Using the vanishing point filter – setting up the perspective plane
3. Using the vanishing point filter – extending the original plane
4. Adding content to the perspective plane
5. Finishing touches with the Burn and Dodge tools

I’ll go through the steps of how to add the middle label to the jar.

Preparing to use the filter

The first thing we have to do is make sure we have each of our labels in a separate individual layer or file. Before starting to use the vanishing point filter, you should copy the label you want to use into the clip board. To do this Ctr + Click on the thumbnail of the label layer you want to use. This will ensure that only the label is selected. Now hit Ctr + C to copy the label into your clip board. We have to do this, so we later can paste the label in the vanishing point tool.

The vanishing point filter will create a grid that represents the three dimensional shape of an object in the photo. We should put this grid on a new layer. Create a new empty layer directly above your photo. In my case, I clicked on the layer of the photo of my jars and hit Shift + Ctr + N. Hit Ctr+D to clear any selections. This will not clear your clipboard from your ability to paste, but it will ensure that you do not accidentally use the Vanishing Point Filter on just a limited area of your photo.

Now make all the layers except your main photo layer invisible. You can do this by Alt + clickinig on the eyeball in your main photo layer. This will show only that layer. It is easier to use the vanishing point filter without things obscuring your view.

Using the vanishing point filter – setting up the perspective plane

Now, while we have the new layer active, we’ll begin using the vanishing point filter by clicking Filter » Vanishing Point… (Alt + Ctr + V). This will bring up a new window that is used for the vanishing point filter. Our aim is to draw a rectangle that is in the same perspective plane that the jars are in. Then we will work from this simple rectangle to define the more complicated shape of a jar.  To begin make sure the create plane tool is selected, and simply click on the four points that define the corners of your rectangle. You can move the rectangle later, but you’ll run into problems if you have to scoot your rectangle too far left or right. While it is difficult to judge perspective on the jars, you can make use of the mosquito netting and window sill in the back ground. Once done you should have a rectangle in perspective. Remember to use the zoom tool (it’s easier to use the keyboard shortcut of Space + Ctr and Space + Alt to zoom in and zoom out and Space to scoot the photo around) while working. Using existing straight lines in your photo will guarantee that you get the perspective exactly right. The bigger you make your rectangle, the more you reduce errors. Ideally you want your rectangle to touch the surface you are going to be putting your label on. In this case I’m working with the center jar, so I used its right edge, the window sill and frame, and the lines on the mosquito screen to create my perspective plane:

Notice how the gird is blue. If the math for creating the perspective rendering would not work out the grid would be red, if the math is marginal, it’ll be yellow. You should create grids that end up blue if at all possible. You can change the grid size using the dialog box in the top left. The grid size doesn’t actually change anything, but a smaller grid size (more squares) will make it easier to create a curved shave in smaller increments, rendering a smoother end result.

Using the vanishing point filter – extending the original plane

This next step is probably the hardest one. We have to extend our perspective plane to wrap around the jar. To do this we’ll Ctr + Click on the middle left bounding box of the perspective plane. Pull out about one grid square’s worth. This will extend the plane perpendicular to its current position.

Now we want to adjust the angle of the new portion to match the jar. Use the angle pull down box for this. I’ve found the easiest method is to click on the angle pull down, then use my left and right arrows keys to adjust the angle. I found using my mouse to be more difficult. Each time you Ctr + Click and create a new segment of the plane, you want to create the same amount. This is where the size of the grid you pick matters. The smaller the widths of the newly created segments, the smoother the end result will be. At certain angels, you’ll have a hard time telling how much of the grid you created. You can always pull out an amount, rotate it for better view, and then adjust its lenght properly. This can sometimes cause some weird glitches, but if you keep at it, you should end up with something like this:

Adding content to the perspective plane

Now comes the fun part. Paste, Ctr + V your label into the Vanishing Point filter in Photoshop. Now just pull the label onto the blue plane to change it’s perspective to fit that of the photo. If the label is too big or too small, click the Transform Tool ( T ), the 6th tool from the top on the left, to resize your label on the fly.  

Once you get the hang of how to use the tool, it is very powerfull. From putting labels on jars, text on book pages, and windows on walls, its uses are limitless. Getting back to our example. You’ll notice several problems with the raspberry jam label. First it’s covering the orange, second it’s color is off, third the edges look artifically sharp. To dull the colors we can make use of the layer blend modes. By clicking on the curved raspberry jam label’s layer, we can change the blend mode using the drop down dialog box on the top left of the Layers panel. In this case multiply works nicely. We can also add a little noise to the label to make it look like a photograph. Filter » Noise » Add Noise… A very small amout, like 1% of the Gaussian or even less will generally work nicely. Make sure you have monochromatic checked, so that the noise matches the color of the label.

Finishing touches with the Burn and Dodge tools

After all of this, the edges probably still look too crisp. Additionally labels often darken or wear around the edges. A quick fix for this is the burn tool. We have to be carefull with the burn tool though, since it alters the pixels of the label. It’s a good idea to make a copy of the label layer before we begin working with the burn tool ( Ctr + J or drag the layer to the Create New Layer icon toward the bottom right of the layers panel)… just to be safe.

For the burn tool, use a relatively large brush at 0% hardness to run of the corners and edges of the label. You can decrease the opacity option for the burn tool if it looks like you’re over doing it. You can also use the dodge tool to make a line of lighter color on the label where you can see that the flash went off on the jar.

Of course there’s multiple ways to make the label look more believable. The burn and dodge tools are just one example. You can also use gradients or different types of filters. What I like about the dodge and burn tools is that they are quick and easy. Additionally they are tools that are often used while retouching photos, so it’s good to get familiar with them.

Now, on to the orange. The way I solved the problem was that I made two separate selections. One for the orange and one for it’s shadow, and I placed these selections in two separate layers, both above the jam label layer. I lowered the opacity of the shadow layer, and I kept the opacity of the orange layer at 100:

Here’s a close up of the end result. I lightened the image a little, so you can see (well, sort of) that both the label and the shadow of the orange are present. 

Since the focus of this tutorial was the vanishing point filter, I only outlined the steps for putting the orange in front of the label.

Here is a photo with both the flat labels and the labels after the use of the vanishing point filter. You can see how much adjusting the blend modes and using the dodge and burn tools polished their appearance. For two of the labels, I trimed and edge off of them before using the vanishing point filter, so thtat it would appear that the wrapped around the jar or bottle. Staying creative with little touches like that can make your end photo much more believable:

I found that Photoshop Essential Skills goes over this and other Photoshop tools in a very effective manner:

Sample or example images are a common part of web pages. For example, on my home page, I show examples of websites I’ve designed and developed. For each site, I show the image of a screen capture of the site. I wanted it to be completely clear that what I am showing is not part of the page the viewer is looking at but an example of another page. To make this clear, I decided to show the screen capture in perspective and with a reflection under it.

Let me give you an overview of what we're going to do. First we will create a series of guidelines that will show us how to modify our image to make it look like it is in perspective. Then we will take our flat image, duplicate it and flip it vertically. This will give us a flat image with a flat reflection. We will use the free transform tool to distort the image and reflection at the same time. It is important that both are distorted together for the effect to work. This means that our workflow must first create the reflection and then the perspective. We'll finish up by adding some visual effects to make the whole thing look slightly more believable.

The first step is to create an empty Photoshop document. The document should be much larger than the image you're working with. This is necessary to accommodate both the guidelines and the reflection. Start by making your document four times wider and four times taller than the image you will be working with. If you run out of space, just make the canvas bigger by clicking on "Image > Canvas Size," and make your canvas bigger. Start off by making two layers. One layer is for your image and one layer will be for the guidelines to help create the illusion of perspective.

To create the guidelines to help with perspective, click on the Guides layer, so that it you will be drawing on it. Now draw a vertical line on the left side of the canvas. The line tool is found if you click on the rectangle tool. Make sure that you have "Fill Pixels" selected for the drawing mode. You can pick a weight that you feel is appropriate.

Now draw a second line from the bottom of your vertical one out to the right. This second line will go from the bottom left corner of your image to the horizon. The angle at which you draw it will determine whether it will appear that you are looking up, down, or directly at your image. For this example you can basically eyeball things, but if you want to learn how to calculate where to put the vanishing point, horizon, etc. more precisely, take a look at Kevin Hulsey's drawing perspective tutorials. Here's how I drew mine:

We'll add in the image now. If you copy and paste your image into your photoshop document a new layer will be created for your image, which is exactly what we want. Now we have to move the image so that it's bottom left corner is where our two guidelines are. We can use the Free Transform tool to do this (Ctr+T or "Edit > Free Transform"). When you are in free transform mode, you can use your mouse to move your image where you want it. You can fine tune the position of the image with the arrow keys. If you want, experiment with turning Snap on and off ("View > Snap").

Once you have your image positioned, click on the Guides layer and draw a line from the top left corner of the image to the right hand vanishing point. The guidelines extending from the bottom and top left of your image should intersect. Like this:

If the vanishing point is above the top of the image, it'll look like you are viewing things from above. If it's below, it'll look like you are viewing from below. If it's directly to the right of the image, it'll look like you are at the same level as the image.

Finally, we have create a second vertical guide, for the right hand side of the perspective image. This line should be to the left of the edge of the image, since perspective will cause the image to appear narrower. You can figure out precisely where to put this line, but for a simple situation like this, it's easier just to eyeball things. Just imagine taking your image and swiveling it in to perspective and draw the second vertical line where the right hand side of the image would end up:

It's important that we create the mirror image now, since we want to distort the main and mirror image simultaneously, so that the reflection matches the perspective of the main image. To create the reflection, first duplicate the main image. Do this by clicking on the layer with the image and dragging it over the "Create a New Layer" icon, that is at the bottom right of the layers panel.

Name this layer as the mirror image. I usually drag this layer below the main image, since it helps me keep track of things better.

Click on the reflection layer in the layers panel and use the free transform tool to position it directly below the main image. Holding down the shift key while moving the image will constrain it to move in only several directions, so you can be sure you are moving it directly down and that you're not moving slightly off of vertical. If you want it to appear the the image is sitting directly on a reflective surface, leave no gap between the main image and reflection. I chose to introduce a small gap between the main image and reflection. This makes it appear that the main image is floating slightly.

Before you finalize the free transform, right click directly on the reflection and pick "Flip Vertical" from the fly out menu that appears. Now we have a true reflection.

and voila:

This is the point at which you may notice that you are running out of space. Increase the size of your canvas to add more space at the bottom if necessary.

To create the effect of perspective, we have to work with the main image and reflection at the same time. To do this click in the layers panel on the layer of the main image. Now shift + click on the layer of the reflection. Both layers should be highlighted:

If you now use the free transform tool (Ctr+T), both images should be selected. Look at how the bounding boxes goes around both images:

Ctr + Click on the top right corner and drag it the top right corner of your perspective guidelines. You want to distort the image and not just resize them; that's why you have to Ctr + Click for this operation and not just click.

This next step is probably the trickiest one of this tutorial. You have to control click on the bottom right corner of the bounding box... that's is the bottom right corner of the reflection. By dragging this corner you have to get the bottom right corner of the main image to lie over the bottom right corner of the guiding lines. So you're ctr + dragging the bottom right of the bounding box but looking at the center right of it.

We'll begin to add finishing touches. First let's change the background to pure black, or any color of your choosing. To do this click on the guides layer and then on the "Create a New Layer" icon at the bottom right of the layers panel. This will create a new panel directly below the image and reflection layers. To fill with a solid color click Alt + Backspace to fill it with the foreground color or Ctr + Backspace to fill it with the back ground color. You can also go to Edit > Fill.

To make the reflection fade out from top to bottom we'll use a layer mask. A layer mask interacts with a layer to show only certain parts of that layer. Think of it as a black piece of paper that you can cut to any shape you want and lay it over the layer you're working with. In the areas where a layer mask is black, the layer becomes invisible. In areas where the layer mask is white, the layer is unchanged. If the layer mask is a shade of gray, then the layer is partially visible.

To add our layer mask, first click on the layer with the reflection to select it in the layer panel. Now click on the "Create Layer Mask" icon. This is toward the bottom left of the layers panel. It looks like a square with a circle inside . This will give you a layer mask associated with the reflection.

Click on the white square that is the layer mask, so that you can edit it directly. We will add a gradient to it. Make sure your foreground color is white and your background color is black. If they are not, just click on the small black and white boxes up and to the left of the foreground and background colors. To select the gradient tool hit Ctr+G or select it from the tool menu on the left. Things should look like this:

The look we want to achieve is for the reflection to fade away from top to bottom. Remember that the areas where the layer mask is black will make the reflection disappear, so we want to click on the image and draw the gradient line from the bottom right to the top left. This will make the layer mask blacker toward the bottom right and whiter toward the top left. Try making your gradient. If you are not satisfied with the results hit Ctr+Z to undo it and try it again. The results should look something like this:

Even if the background of your image is another color, you will use a black to white gradient for your layer mask. This is because a layer mask makes the layer it is associated with visible with white and invisible with black. So even if the background of your image is red, your reflection will be visible over the red background if your layer mask is white and invisible if your layer mask is black.

After adding the gradient, your layer mask will look something like this:

To make the reflection a little more convincing, decrease the Opacity of the reflection layer. Make sure that the reflection layer is selected in they Layers panel. Now use the slider bar at the top right of the panel to change the opacity of the reflection layer. I've found 50% to look nice.

To finish the image, turn off the background color and guides layer. Select "Image > Trim..." and click Based on Transparent Pixels and Top, Right, Left, and Bottom. This will trim away all the excess canvas. To add back a slight border use "Image > Canvas Size..." and select Relative. With Relative selected you only have to type in the twice the thickness of the border you want width and height wise.

Once done with resizing turn the background color layer back on by clicking on the eyeball icon to the left of it, and you're done!

I've found Mark Galer's books very useful for honing my Photoshop skills: