TNT8: Photoshop Secrets for Eye-Popping Images

Joel Pattison, Web Designer and Project Manager, College of William and Mary

The audio for this podcast can be downloaded at

[Intro Music]

Announcer: You’re listening to one in a series of podcasts from the 2009 HighEdWeb Conference in Milwaukee, Wisconsin.

Joel Pattison:  My name is Joel Pattison.  I work for the William & Mary web team.  First of all, I'll talk a little bit about what we do, just a few minutes on that.  I'm going to show you a few things about how we've used photography on our site and also in social media but most of this really is going to be kind of showing you Photoshop, tips and techniques and things like that.  So I'm going to give you an idea what we're going to do today.

Our team is about seven people.  We work in IT but we support the top-level William & Mary web presence and we do the technology, we also do the photography and the content development and the social media and social networking and some video, a little bit of video.  We also provide support to all of our decentralized web editors.  The entire university, all of our academic university departments as well as our graduate professional schools are using a single content management system and a single design suite.  I'm going to show you some of that and how the photography comes into that.

So we have about decentralized web editors in our campus. They are also using the same tools so supporting them actually is difficult as it might be.  So that's just a little bit about William & Mary and what our setup is in the web, William & Mary.  Go ahead and look at some of our sites.  I have to sit down and do this, I think.

This is the delivery home page.  We've never looked at it, pretty standard large image and little captions.  Some of the other things that we do there, perhaps a little more interesting and different is every academic department had its own set of their photos.  We have about 40 arts and sciences departments at our school and they all have probably anywhere between eight and 15 photos that cycle through this banner randomly.

This is a photo that actually came from the geology department. They took it on one of their trips. Some of them are things that we actually pulled from the department.  This is our American studies department.  They're just kind of iconic images that have to do with the department. So this was something we dreamed up when we were redeveloping the William & Mary website.

At first, there was some kind of pushback, faculty were concerned about these photos but as we went to the process, we worked very collaboratively with the departments asking them for photos, asking them for ideas and I think in the end, all of them were very appreciative of the fact that they were getting quality photography delivered to them for free.  That's something I think a lot of people struggle with.

That's the undergraduate and the university about what happens.  This is an example of one of our graduate professional schools.  Also, you can see that it's a very similar design to the college but this is our school of marine science obviously so hopefully kind of have their flavor there.

Another place we've used photography is in news stories, obviously our news and events folks.  We don't manage the news and events.  Our university relations department does that that they have a campus photographer who works for them and he has also worked closely with us.  So they have a lot of great photography.  This is a story about using a new school business that was just dedicated and you could do with these scrolling photo sets which obviously the photo sets go through here.

So this is an example of how we've used it on the pages and also on our graduate professional schools.  So this is the school of business and they have a very similar functionality of kind of scanned to look like the school of business but they have a very similar thing so we're all playing in the same sandbox in terms of both design, technology and photography.  We're all using very similar things.

Recently, we started in January of this year, we started a Flickr account for the university and we just put out all kinds of links up there. We just have bush gardens on our campus, people have a bush garden amusement park.  It's starting to take off.  We started this in January of '09.  We've had 63,000 views so far on this so it's starting to build off our Flickr following with comments and favorites.  It took awhile to get people into the community part of it but it's starting to really take off, I think, and we've also helped this by posting this in Facebook so you'll have a William & Mary Facebook account.  We'll post the links to one of these and post the link to this photo.

Audience: Did you have contributions from alumni and staff?

Joel Pattison:  Yes, there is an email address where you can email photos and we do obviously iterate them and select which ones up here on Flickr but yes, people can submit to Flickr and do at the campus portal.

Then, we're also using Flickr in our galleries.  We have Flash galleries but we started using a Flickr gallery where we actually do control and we pull in Flickr onto William & Mary web presence.  This is technologically pretty easy to do.  Flickr resizes all the images for you on demand so you don't have to worry about creating all the thumbnails and all the things that go along with that. Also, you can just click over to Flickr if you want to comment on this for...

Anyway, this is the kind of direction we're going with photo. I think it's trying to pull these not only into Flickr but pull into the William & Mary web presence, We also have the campus portal and people can see Flickr from inside the campus portal and this is where they submit photography.

As you saw on Flickr, we just started a fall photo contest. We're trying to get people to submit photos of Halloween.  Halloween is really big on our campus.  We have these statutes, people dress them up.  Last year, it was the Wizard of Oz, all the statutes were dressed up as characters from the Wizard of Oz on campus.  So we're trying to get students to submit fun things that we can put in our homepage but I'm not going to make you wait on this stuff.

So let's get ahead and into Photoshop.  That's what we're here for.  First, I want to do a quick poll.  How many people here consider themselves like a beginner with Photoshop? Intermediate?  Any expert users?  Okay.  I'll give you a couple of quick polls like that throughout the session just because I don’t want to insult anyone's intelligence by lecturing you about basic stuff but I also don't want to skip over something that might be helpful.

The first thing we're going to work on is camera raw. Camera raw is a plug-in that was originally built to edit raw photos taken with a high-end DSLR camera but starting with CS3 and in CS4, you can actually open JPEG images with camera raw and there's a lot of really cool features in that plug-in.  You can do the same thing in Photoshop using all kinds of techniques. Of course there are hundreds of ways to do things in Photoshop.

This one is included in Photoshop.  It was developed by Adobe.  You can also buy them, normally buy them.  Some are downloads.  Yes?  I'm sorry.

Audience: I had to download the software.

Joel Pattison: Camera RAW?  Are you using CS3 or CS4 extended?

Audience: Yeah.

Joel Pattison:  Okay, I guess it depends on your experience.  I haven't had a problem with that.  Open something with camera raw.  You can't just double-click on it, it'll open in Photoshop by default.  You have to actually go to file, open in Photoshop, click on the photo and then from this pop-up menu, it's normally going to default to JPEG, you have to select camera raw.  This takes you in the camera raw, when I'm done with camera raw, I had open an image and that takes me to Photoshop and I can do all the things I would normally do in Photoshop.

So this is kind of a pre-processing tool.  You can go into this, fix your colors, fix your lighting and then go to Photoshop and do all the little tweaking that you would normally do in Photoshop.

I'm just going to show you some basic things with this photo. Probably most people are familiar with the concept of exposure, you know the harder you make something.  Of course the problem is if the photo exposure for this picture, you can't see the breaks very well so if you increase the exposure till you can see the breaks and it looks like it's a window into heaven, the white light coming out there.  This is a job for fill light.

Fill light increases, it brightens the darkest parts of your photo and it does not affect the other pieces.  So if I can increase the fill light all the way out to 100 and it just brightens your day.  That's it.

Recovery is the exact same thing in the opposite side. It darkens so this would bring back some detail.  The tree doesn't show very well in this photo but it brings back the darkest part, not affecting the brightest parts.

So those two, they're kind of opposites of each other but again, you can accomplish these things in other ways but not quite as easy as that.

Now that I'm done with an image, it could take me on to Photoshop. This makes to Photoshop and now I can do whatever I want with this.  So a few more things with camera raw.  Again, these are all defaulting to camera raw because I've been practicing so I would have to go format camera raw to open this with camera raw.

This is an aerial shot of our campus taken I think by the business school.  I had to take these.  It's a pretty good shot but it actually looks better on that screen than it does in my screen.  It looks kind of brown on my screen.  I'm going to go ahead and increase the fill light again a little bit just to brighten things up.

Sometimes when you increase the fill light, you start to get noise or color distortion.  A way to edge that back is with this black tool.  This will deepen your colors and richen your colors without making the photo too dark.  If you go too far obviously, it does something nasty.  Maybe bump up the saturation and the vibrance of the colors a little bit.

Something else that's cool you can do, you can see there are different tabs here.  I'm going to actually go over to this tab called HSL/Grayscale tab and you can change the color balance so you can make the yellows more green or more yellow. And you can also change the saturation of each color.  So if you really want the green to pop out, you can do all these things.  Again, there's lots of ways to accomplish these kinds of jobs but probably the easiest way I know of.

Something else I want to talk about is this part down here. When you first use camera raw, it's going to default to Adobe RGB.  When you save things for the web, the best way to save them is for sRGB.  The first time you use raw, if you click on this and switch it to sRGB, it will save you a lot of pain.  Trust me because what happens when you go to save for the web, this tends to distort the colors of this if it's not sRGB.

Open this image.  You can resize them, crop it.  When I save images for the web, I always use File Save for Web and Devices.  I save all images as JPEGs.  You never want to save big images as PNG or Gif or you'll end up with a huge file size so always use JPEG.  Then you can use this quality slider here.  You go to slide if you go quality, you can slide back and forth on it. And compare it to the file size down here.  So I'd use just the fourth emerge, put the quality down to about five and down.  You can take the quality up.  It previews it for you too right here as you're adjusting the quality so you can see how much the image is going to degrade so you can really fine tune your images for the best quality versus file size which is something important for the web.

So I usually try to keep my images below 100 kilobytes myself. They don’t need to be much bigger than that.  This is a really big image.  It seems like five megapixels or something.  So we will just save as a JPEG.

Let's get to something else.  Something else that camera raw can do that's really nice similar to that fill light slider is the vibrancy slider.

If you want to increase the saturation, let's say you want these greens in the background to be greener and make it look like it's more...  If you increase the saturation, what's going to happen is the person is going to turn really orange and not a good thing.

The vibrancy is increasing the saturation of the green and if I get too far, it starts to affect the person but I can go up to about 40 so there's zero and there's 40 and you don't see much effect on her face. So vibrancy actually saturates all the colors except for skin tones.  It uses an algorithm to not saturate skin tone colors.

This is something that you can use with layers.  Most people here are familiar with layers, understand how layers work in Photoshop.  Yes?  I see nodding, okay.

If you create a new layer, this is way to pop the sky and make the sky bluer or make the clouds pop out.  Create a new layer, use the gradient tool, make sure it's black to transparent up here.  There are all kinds of things you could do.  We just want black and transparent.  Create a gradient through the sky.  I'm doing this on a new layer.  And then if I change my blend mode to soft white, there's without the gradient; there's with the gradient.

Audience: Oh!

Joel Pattison: Pretty quick way to just make the sky bluer or make the clouds pop out in the sky a little bit.  Sometimes you have to adjust the opacity of this layer. It looks too blue, it doesn't look real. You have to tone this down a little bit with the opacity.

Here's another one.  We're going to start talking about putting text over top of images or logos over top of images.  Probably many of us have been in this situation before where someone sends us an image and then they send us the logo and say, can you just put this image on top of this logo and the image looks something like that.  This is not even bad but it has all this intricate detail in it. You could get the magic wand.  You could get in there and erase, but something that's really simple to do, if you double-click on this layer and you go to this Blend If section, the options look like little triangles to break them into triangles.  You could just slide that away.

You have to play with it to get the quality right.  It depends on the type of quality you need to go for.  This doesn't always yield the most professional looking results but if you just need something quick and dirty or if you're going to shrink the image down in size with that, some of that stuff is going to disappear.  If I do this and then I size this image down, a lot of that jagged edges, it's not pretty bad.  So in this case, that was not accurate.

But if you just use this, so again, you double-click on the layer and you get there, it looks like the options but just slide them on.  So hopefully another quick tip for making the job go faster.

Placing text over images, there's lots of different ways to do this.  I want to talk a little bit about typography and kerning, tracking, leading.  Are people familiar with those terms?  Raise your hands if you know what that stuff is and you know how to adjust Photoshop already.  She's nodding.  All right. I'll do this really quickly.  It doesn't take long.

Kerning is the spacing between letters and if you have like this, you can see the space between the W and the E is a little unattractive. There's too much space there.  It doesn't look right.  If you click right in there and you just hit option, left arrow, it's going to move everything over.  So it's a really quick way to just kern..

You can also select everything and it'll adjust the letter space in between all of them.  Same thing, option left and right arrow keys.  This also works for the vertical spacing, option up and down.  You just highlight everything and then in your keyboard, you hold down the option key and you either hit up or you hit down.

This is a little effect I like to use on our site sometimes. I'm going to create a new layer. Sure.

Audience: A question. Mac versus PC, what you are saying is option is the control in PC?

Joel Pattison:  No, I think command.  I'm sorry.  The question was key shortcuts on Macs and PCs.  Command and control are the two on PC.  So if I say command on a Mac, it's control on a PC.  And is it option alt?  So alt on a PC, option on a Mac.

So we create a new layer.  I'm going to fill it white.  I'm going to bring the opacity of the white down to about 78.  If you take the welcome and put it over top, this is another trick that you can use with all kinds of things.  If you go to layer or select, load selection, it will create a selection around whatever layer I was on so it created a selection around the welcome.  And then I go back to the white layer, hit delete, deselect and I can throw away my text layer now.  You kind of create this little cutout effect, very easy.

So create a layer, type the text, load the text's selection and then delete that selection from the original white layer.  Does that make sense, everyone?  All right.  I want to make sure.

This is another thing that actually when I was thinking about this workshop, we've never used this on our site but we really should.  I don't know why we haven't.  These are just some photos.  These are not of our campus.  These are taken in Seattle on a vacation I just took.  My girlfriend actually took these, and she just stood on top of a hill and did click, click, click.  No tripods, no nothing.  I don't know if any of you are familiar with the panoramic feature in CS4.

You have to use Adobe Bridge.  It comes with photo so you go into Bridge, you select the photos you want to create a panorama out of.  Go to tools, Photoshop, photo merge.  And you have some different choices.  I usually do the cylindrical.  This takes just a moment.  I did size these photos down so it won't take so long.  If you're doing this with 10 megapixel photos, you can pretty much go get a cup of coffee or watch The Office but hopefully it won't too long.  But it definitely does it faster than you or I could do it and see results.

Audience: Does it interact over the web?

Joel Pattison:  Yes, it does.  You'll see there are two space needles.  There were two different pictures were the space needle was in. As you can see, there's only one space needle.  This is the space needle.

No.  It just does a quick panorama.  You have to go into Bridge which is a separate program.  It comes with Photoshop.  Select the photos you want to use, tools, Photoshop, photo merge, and then you have some choices.  Of course you can just crop this really nicely and it looks like a panorama. This would have been great for our banner photos.  We should've been doing this.  I don't know why we didn't.

This is another one where we'll pop the sky.  I really like this effect.  I do it all the time.  This was the sky effect again where you create the gradient and switch the blend mode soft light so you do a black to transparent gradient on a new layer and then you change the blend mode here, the soft light, and you get this nice atmosphere effect going on over Seattle.


Audience: Should we take notes on this?

Joel Pattison:  Yes, I should've said that at the beginning. There are going to be notes.  I do provide some links to people who have helped me and different tutorials online.  They are free and some that cost money.  Also, I guess there's a podcast of this so you won't be able to see what I'm doing but I guess maybe you can figure out the key commands or something from the podcast if there's something that's not in the notes.

This is something I got from somebody else.  The amazing Julieanne Kost is the digital image evangelist for Adobe. She's great.  She goes around teaching Photoshop around the country. So let's say you want to turn a photo black and white.  This is a picture of a building on campus.  I'm going to turn this picture black and white.  Of course, there's a ton of different ways you can do it and they all yield different effects so you kind of go from an artsy effect.

There's this tool she developed and you can get it free.  I do provide the link to this where it shows you all the different ways Photoshop can turn something black and white.  So I go to the move tool, make sure I'm on auto select player, click on the first layer, the colored layer.  These are all smart objects.  I don't know if you're familiar with smart objects.  You can just click on that photo and say place content. Choose your content and then it's going to take a moment but then it will preview for you all the different ways that photo can be turned black and white in Photoshop.

You can see there's a lot of things back, one with the brick is very prominent, one where the point is very prominent.  Let's say I like this one the most.  Click on that and then I just take this filter and drop it on top of this and you have a black and white image.  So that's a really cool tool that she developed.

It's called BW Ring Around.  Right, very intuitive.  But I do have a link to that at the end.

Audience: Should we go and grab it?

Joel Pattison: Yes.  You click on the one you want.  You have on a select layer chosen up here at the top.  You click on the image you want and then it highlights that one and you grab that one.  That's a nice way to go black and white there.

Here's a photo taken.  This is also of the Wren Building of William & Mary.  This one is not a great photo.  I'm actually going to brighten it up.  It's got kind of a nasty color cast.  It's got a grayish brown there.  There might be something cool we can do with this again using blend mode and texture overlays.

This is a texture I bought from  I think I paid $3 for it.  I sharpened it up.  You put this over this image and then we just change the blend mode and see what we can get. Now, you can go through these one by one like this but there's a faster way.  You're on the move tool, let's hit shift in your keyboard and then plus and it will step you through each one of these.  You can just cycle through the blend mode and see how to find something that looks good.  I kind of like that one.  It has a cool texture to it.  This is something you would use everyday but there might be something you could use with more.  Again, you might want to have to take the opacity down if it's too much.

Then, we also have this.  Another key command.  Is everyone familiar with the idea of nondestructive editing?  I'm sorry, quick question.

Audience: Sorry how do you do that?

Joel Pattison:  Hold on the shift key and then plus key, shift-plus and shift-minus is backwards, the other way.

Nondestructive editing is just the idea that you never want to do anything that you can't undo essentially.  You never want to mess with your original.  So here, I have two layers.  In fact, what I want to do, I have to combine my layers so I could go to image layer, flattened image, but that would be a destructive thing.  If you hold down command option, shift E, or I guess it would be control alt shift E on a Windows machine, it creates this new layer on top that combines all these layers and doesn't affect the layers below.

The command option, shift E.  Then I can drag this up here and if you option click between, alt click on PC, it will click it to that size and you drag this around, and you can get in the blend modes and step through.  I actually like that.

So again, this isn't something you would necessarily use everyday but it's kind of a cool effect you might want to use in a photo that otherwise you probably wouldn't use this photo anyway.

This is the photo I used for the fall photo contest.  I don't know how many of you already know a lot about blend modes.  This is something else you can do with blend modes.  I'm just going to duplicate the background layer and then all these crazy filters that you think I would never ever use that in a million years.  Why would I want a pumpkin that looks like this? Again, if you change the blend modes, you might find something kind of interesting.

So it's a nice way to experiment with some of these filters where you thought, why would I ever want to invert everything and make it all gray. and purple and green?  If you use these blend modes, you can actually get some really cool effects on your images on the fly.

I'll just show you a few more quick things about camera raw and maybe questions if there are any.

Something else in camera raw, there is this lens correction. You're not really going to be able to see it from the monitor but if you know some photos often have that purple edging sometimes around the trees.  You've got trees against the sky and then there's this little purple edging around it. This tool can help defringe that type of stuff.  Just use slider if you're ever in that situation.  You can use this slider from camera raw under lens correction for correction to get rid of some of that.

You can also get rid of lens vignetting or you can actually add lens vignetting.  That's the black around the edges.  If you like lens vignetting, sometimes it does add a nice effect to a photo.  So those are some things under the lens correction tool in camera raw.

One other quick thing I will show you, I should have said this at the beginning.  Once you exit camera raw and gone into Photoshop, you can't go back under normal circumstances so you're done in camera raw with this image.  I mean you can go back and do the whole thing over again but if you start editing this and putting layers on top of it and all this and then you decide, oh I really want to edit that original layer, you can't just pop back into camera raw and undo that.

What you can do though, when you open something with camera raw, you can hold down the shift key and you get this.  This changes to open object and this opens it as a smart object.  I don't know if you're familiar with smart objects.  I can't do the normal things I can do with the Photoshop layer so I cannot paint on this layer because it's a smart object.  It's not a normal Photoshop layer so you have to rasterize this layer to be able to use it.

But what I can do is double-click on this and go back to raw as a smart object.  So if you're going to bring this in and start putting layers on top of it and think, oh, I wish I had made that bottom layer a little brighter, I wish I could back to camera raw, you might want to open this thing as objects.  You can always rasterize the layer later, turn it into a normal Photoshop layer and start editing.

So that's just a quick word of caution about camera raw. It's kind of a one-shot deal unless you want to start over.

So I think we have about 10 minutes left or so.  I don't know if there are any questions or thoughts.

Audience: I wonder whether you do it or not. So I've seen one person taking three different shots in different spectrums and the same image. Then they cut it together or add it. Is that possible? Do you have to make sure, how do you do that?

Joel Pattison:  In other words use camera raw or some other tool. I'm sorry.  The question was you've seen these merged images where you take three different photos and you take the total qualities of all three and combine them and that's how you get your beautifully exposed desert floor and the blue sky, sunset above and everything is perfectly exposed and it does look kind of CG.  So how do you do that and can you do that without having the three images or five images or however many it takes?

I guess you could edit them with raw or some other tool in Photoshop to expose them differently and then combine them together.  You can do that with Bridge.  It's under tools, Photoshop, merge to HDR.  That's called HDR, that effect.

This is not a great tool for doing that HDR.  There are actually other tools you could buy for about $100 that are going to give you much better results.  The idea if you want to do that is you take five different images with the same aperture setting but different time values out of the camera.  Does that make sense?  Yes, so that's how you would do it.  You take different photos, same aperture and you merge the HDR.

Audience: What about the quality? The black and whites and so on.

Joel Pattison:  I can't picture what effect you're talking about, I guess, so.

Audience: It looks like something...

Joel Pattison:  Yes, that's the other thing.  A lot of those sometimes goes back to the question at the beginning.  The question was about black and white photography and looking really sharp.  A lot of these things are sometimes done with filters that you buy or plug-ins that you buy.  There's probably a way to do without plug-ins.  The plug-in would go like this as opposed to the sweat of your brow.

Any other thoughts or anyone have any tips?

Audience: Can you do some silhouetting or drop shadows here?

Joel Pattison:  My favorite silhouetting?

Audience: If you got a silhouette or drop shadow.

Joel Pattison:  You just want to drop out behind the layer?

Audience: You know you have a button or something.

Joel Pattison: There's a couple of different ways you could do a shadow, I guess.  Of course there's the tool.  Are you familiar with FX tool?  There are different ways.  I'm just going to do something really boring a lot of times.  I've seen this done where you duplicate the layer and hit down kind of like this.  The color overlay on it to make it gray.  And then you do I think it's gauss.

Of course the shadow needs to go behind the object.  Yes.  I mean that's one little tweak tool. 

But you're looking more for the actual drop shot.  I mean I always just use this.

Audience:  Yes, I use that...

Joel Pattison:  Yes, I always use that and just play with this. Yes?

Audience:  [Unintelligible 37:21]

Joel Pattison:  Something else we do, you can use - again, I would use blend mode sometimes.  If you've got an image where the text isn't showing up very well, for instance if you remember our site at the beginning where we have a lot of white text over top of photos which can be very tricky, so sometimes you can create a gradient background or these are brushed like a black swatch behind where the text is going to go and then switch the blend mode so it kind of blends in with the photo. And when you put the text on top of it, you really can't see the fact that it's darker in that spot.  The texture got better.  So that's kind of using the same tool.

Audience: Does anyone have any channels in there?

Joel Pattison:  I don’t use channels very often.  I mean I know a lot of people do use channels but I don’t use it very often.  Yes? Okay.  Are you familiar with the magic selection tool?

Audience:  Yes.

Joel Pattison:  Okay, I'm trying to think if there's anything else. I'm sorry.  The question was cutting people out and putting them on a different background.  We don’t put them on a different background.  We do this on our homepage.  I normally use the quick selection tool.  This is going to make sound sloppy but it's kind of what I do.  If you start with a 10-megapixel image and you use the quick selection tool and you size it down to 100 x 100, it actually looks pretty good. You don't actually have to go through and erase every little pixel across the edges.  I mean that's the nice thing about web if you're at the web. You don’t have to worry about printing it this big and people can see every pixel.  So I just use the quick selection tool, erase the worst of it, size it down and see how it looks.

Audience: Can you save it as a JPEG then bring it up into Camera RAW and do something with the lens for instance?

Joel Pattison:  Yes, you probably could.  Usually, the lens correction really focuses on cyan and green because those are the colors that often we see with the lens correction. It's when you have a cyan or a green fringe so it really focuses on those two colors.

Since we're running out of time, these are a few things. This is a free site about the video tutorials on here.  I really like this guy.  This is Julieanne Kost who I was talking about who works for Adobe.  This is the URL for that black and white ring around the rosy thing I showed you.

I'm a member of the National Association of Photoshop Professionals.  I don't work for them.  I pay them, they don't pay me so I'm not plugging for them but they've taught me a lot of stuff I've really enjoyed.  They do a conference every year.  They also do one-day conferences all around the country that usually costs about $100 and you can learn a whole lot of stuff from there.  This public training is affiliated with them as well.

If you give me about 20 minutes after the presentation, I'm going to have my notes posted online and there will be a podcast as well, I understand from HighEdWeb.  I'm sorry?

Audience:  How do we get it?

Joel Pattison:  Just link right here,  Thank you all very much.