Perspective Cropping in Photoshop

On the NAPP forum, someone was asking for advice because the pictures he was cropping were getting distorted, faces elongated. I suggested that perhaps he had the Perspective box selected when he was cropping. I still don't know if that was the problem, but the following is the answer I wrote. The question I was responding to was, "so what does the perspective box do?"

Some of the tools in Photoshop are mysterious when you haven’t used them regularly, if at all. I think the perspective cropping tool falls in that category.

OK, a picture is worth 1000 words. I just grabbed a shot of my grandson who REALLY, REALLY, REALLY needs a haircut. Here's the original, trimmed down to fit better here.

I decided to crop it to an 8x10 ratio.

Notice that this is without the perspective box selected. If I drag a corner, it keeps the same aspect ratio, just includes more or less of the image.

Now I did it again with the perspective box ticked:

Nothing else changed, except I dragged the top down and the bottom up. Doesn't look like an 8x10, right? But here's what you get when you invoke the crop by double clicking inside the selected area:

Elongated face! The reason is that with the perspective box selected, the cropping tool will take whatever's selected and make it fit in an 8x10 aspect ratio. It will stretch or shrink it as necessary to make that happen.

I'm guessing this is what's going on for you.

The perspective control is a very powerful tool. You can use it to make lines that are not parallel, parallel (couldn't think of a better way to say that. Oh wait: a picture is worth...)

Drag the cropping rectangle (OK, not a rectangle any more, a quadrilateral) until the sides are parallel with the things you want straight up and down or sideways

Magic!

Perspective cropping in Photoshop. That's how it works.

— 30 —

Button, Button

This is a bit of a departure. This is about using Photoshop to create buttons for your website. It has nothing to do with photography. But everyone has a website, right?

One of the basic rules of design is to maintain a consistent look and feel  and one way to do that is to make all your user interface buttons look alike, or at least similar. I set this up some time ago for my First Aid site, and I use the same devices on my other sites.

The idea is to be able to quickly change the text on a button, and possibly to change the colour of it as well, for example if you want it to change colours when you hover over it.

If you're already using Photoshop to create webpages, with sprites and slices and good stuff like that, this is going to seem rather simplistic. But if you're like me, and you only know a little HTML (and perhaps a smattering of Javascript), then this might work for you. Without further ado...

It took me less than 30 seconds to make the second button from the first one. Want to know how? It will take you a few minutes to create a master template then a new button is only a few seconds away.

Create a new document in Photoshop. Keep it larger than you're going to need, you can reduce it in your HTML. Don't worry, it'll be a small file.

Create a type layer. Use whatever font you want. You can scale it, resize it, change it any time in the process.

Create a shape. I used two circles and a rectangle to create an elongated button (I want room for a couple of words). The colours are just so you can see what I'm doing. Recolour them the same and merge the layers together.

Open the Layer Styles dialogue and make it pretty! I used a bevel and emboss, gave it a drop shadow and used a gradient overlay. Note that to keep the colour in place, the blend mode for the gradient has to be "overlay".

Duplicate the layer, open the Layer Style again and add a color overlay. You can change the colour of the overlay in the dialogue.

But we lost the gradient overlay. (OK, that was an "oops". But I have a solution which gets you a bonus too!)

Convert each layer to a Smart Object. That way you can change anything you want with ease. That's the bonus. Go back into the Layer Styles and add your gradient.

By the way, when you create a button, turn off all the unused layers because the drop shadow multiplies. It's outside the filled area.

Here's another hint. If you do a gradient and you make it darker on the top, the button looks concave. If you make it darker on the bottom, it looks convex.

You can edit the type layer just as easily. You can even add styles to it, change the colour, the size... anything! Move it to the top.

Of course, you have saved your work as you went along. In the end, you have a .psd file with a layer of text and as many layers for colours that you want. Normally you would use colours which are coordinated with your website palette.

To create a button, open the PSD file, choose the colour layer that you want, choose the type layer and modify it.

To save your button to use on your website, choose "Save for Web & Devices". If you make it a GIF file and leave Transparency on, the drop shadow will work with your web page background.

Complicated? Not really. Does it make it easy to give your website a consistent look? Can you create buttons in a few seconds? You bet.

If you never really used layers in Photoshop, this might give you a bit more understanding of how they work. Smart objects too.

-- 30 --