What's it all about?

This blog is about photography and photoediting. Its purpose is to provide hints and tips and links to interesting and useful resources for digital photographers, regardless of their level of expertise or experience. It is aimed at people who use digital SLR cameras and who process their images using the latest versions of Adobe Photoshop and Adobe Photoshop Lightroom.

The author of this blog is Glenn Springer and you can read more about him at his web portal at faczen.com. Information on workshops, and links to everything is at photography.to. Glenn's original blog, which is an ongoing journal of his photographic meanderings goes back to 2006 and contains many additional hints and tips, as well as representative images that he has made. Gallery quality prints are available through his Smugmug gallery site. It is an interesting place to visit to see a variety of quality images, as well as an ongoing general journal of photos going back several years.

Photography workshops are scheduled every few weeks starting in the Spring. For an overview of what's happening, please visit the photography.to website.

The most recent blog post is below. Scroll down to the bottom to see the list of previous postings or search for any particular topic.


Saturday, May 28, 2011

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 —

Thursday, May 5, 2011

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 --