Black and White images on Black Backgrounds

Black and White images on Black Backgrounds

A while ago, a British photographer by the name of Antony Northcutt posted some images of black-and-white flowers on a black background. They were outstanding and I wanted to learn how to do that. Fortunately he had written an eBook documenting his technique, which I bought and studied.

Pablo Picasso said that a “good artist copies; a great artist steals”. Don’t take it literally — the great artist uses the work of others as an inspiration, builds on it and makes it his own. I loved Northcutt’s work but not only did I change his technique but also the result as well. It inspired me to create something my own and I hope this does the same for you.

What I love about Photoshop is that there are a million ways to do anything. That means that everyone’s approach is going to be different! In this short tutorial, I’ll show you my workflow and some of the thinking behind it, to give you some ideas.

 This deals with making black and white images of flowers (or other subjects!) on black backgrounds. The key points are subject choice, selection, background rendering, and toning including non-destructive dodging and burning. I edit in Photoshop CC 2014 but most of this works in earlier versions as well.

Please click on any image to view it full-screen.

The original image (note: these images are all screen captures). I chose this image for this tutorial because it would help illustrate my techniques, not because it's a particularly strong artistic image!

Choosing the Subject 

Here’s my weak suit. I don’t have that great an eye. I’m looking for repetitive patterns and not-too-fine details. Flowers are easier because they’re created that way! But they don’t all work, and flora with fine textured edges elude me. Because we’re doing black and white and removing the background, you can choose subjects without too much regard for background. I’m looking for something big enough to fill most of the frame because I don’t want to have to crop too much. And with soft lighting because I want to save those deep blacks for the background.

When I take the picture, I expose for the subject because the background is going to be removed anyway. I want the broadest possible tonal range so of course I shoot in RAW. Sometimes I’ll bracket exposures because colours can fool you and occasionally I might blend exposures in an HDR program as well. The key is to watch your histogram and make sure you don’t blow out the highlights.

This works well on Portraits too!

Initial Processing 

I’m a Lightroom fan. But the toolbox in Lightroom and Adobe Camera Raw are identical so use whichever one you’re most comfortable with. I find it easy to surf through the images, switching from colour to black and white and back again, to help visualize what will work best. Sometimes I’ll crop at this stage, because I know what I’m shooting for anyway. I personally like square images for this approach. At first, my goal is to tone the image so that I have details at both ends – dark and light. Again, ignore the background and just look at the subject! I will be toning in more detail later, so this is just a “rough cut”. Now you’re ready to export to Photoshop.

Another reason to crop at this point is to reduce the file size. As you add layers in Photoshop, you increase the file size exponentially: working with a full-frame image from a D800 as I do, you can get above 1Gb really quickly! 

Once there, my very first step is ALWAYS to hit Ctrl-J, Cmd-J on a Mac, to duplicate the background layer. I want to leave the original layer intact in case I want to go back, and I don’t want to rule out reducing opacity or changing blend modes on the working layer(s). Turn off visibility of the background layer. The next step can be the tough one.

Making the Selection 

Again there are a number of ways to skin this cat. For me, one of the simplest is the Quick Selection Tool, followed by Refine Edge. My goal here is to get all of the flower, I can finesse the edges later. Another easy tool to use is Topaz Remask. Make sure you get it all. If you select too much you can erase it later, but it’s much harder to add something you missed. Using Refine Edge, you can now clean up the edges of your selection. This isn’t a workshop on how to do that: suffice it to say, the simpler the flower, the easier it is. A lacy subject with complicated edges can be very challenging!

Now once it’s selected, ctrl-J (cmd-J) works a little differently: it copies your selection only onto a fresh layer.

Making a black background 

I’ve seen this done a number of ways, but I’m in favour of the KISS principle. Northcutt had you select the layer underneath, create an exposure adjustment layer, slide the exposure down as far as it will go, and you have an almost-black background. There’s one advantage to that method: if you want to keep some vestiges of what was around the subject in the final image. But the problem is, you won’t get a pure black. That makes a huge difference when you go to print. But every artist and every image is different!

Here’s my simple technique: 

• Create a new layer. 
• Fill it with black (alt-backspace on PC, option-delete on Mac). 
• Slide the new layer underneath your selection layer. 

You’re done.

Now it’s time for a little cleanup. You can go into your selection layer and use the eraser tool, but if you make a mistake, it’s hard to go back. Instead, add a mask on the layer and paint on the mask. Anything painted in black will reveal the layer underneath, anything painted in white will hide it – and it’s easy to go back and forth (the “X” key switches the foreground and background colours). Depending on how fussy you are, this can take a few moments, or hours!

Sidebar: "Do as I say, not as I do"! Mea Culpa: when I did this image, it was more about creating this tutorial than a final image so I took some shortcuts. Trust me, it's much better to use a mask because you can fine tune right down to the pixel level. And I would not consider doing this kind of editing without my Wacom tablet and stylus. If you're reading this and you don't have one, it's time to go shopping (Amazon Canada or Amazon US).

The Black and White Conversion 

You could leave your image in colour. You’re the artist! But I like black and white for this, and, well, I’m the artist today! Again, there are lots of ways to approach this. Before we do…

At this point I give up my totally non-destructive approach. I keep everything I’ve done up to now separate so I could go back if I want to, but I personally find it easier to work on a combined layer at this point. So I “Stamp” a fresh combined layer on top of the others, without deleting them. You do that with “Ctrl-Alt-Shift-E” (Cmd-Option-Shift-E). That takes a lot of fingers and I do it often, so I’ve programmed that into my Wacom tablet on a single hotkey. You can make a keyboard shortcut for it too.

Sidebar: You’ve done a bunch of work. Save often as you go along. Save it once early, then just hit ctrl-S (Cmd-S) when you think of it and you’re saving it again. Save it as a .PSD file to preserve all your layers. 

OK now for the black and white. You could just go up in the menu and change the whole thing to greyscale. Boooh. No control! In the layers pallet, create a black-and-white adjustment layer. Now you have a bunch of sliders that let you choose what happens to each colour in the original. Play. This is where the artist in you starts to come out.

Sometimes I’ll use an outside plugin program called Google (Nik) Silver Efex Pro 2 for the conversion. It does much the same thing except you get much more control. Topaz also makes a similar program called “BW Effects”. These are great for adding multiple levels of control.

Sidebar: There are other plugins and techniques that you might want to consider using. Topaz Clarity. Adding detail and sharpening with a hi-pass layer. InFocus. DFine. Viveza. It’s your call… (Here's the link to Topaz Labs) 

Toning your image 

I have two more steps in my workflow to make the image jump out at you. One of them is toning the image using Curves, the other one is to dodge and burn certain areas.

 I’ll next add a curves adjustment layer which adjusts the overall toning of the image. Make the curve “S”-shaped if you want more contrast. Pull specific spots to re-tone specific densities. Now I'm going to “Stamp” another fresh layer because I want to do a non-destructive dodge and burn.

The dodge and burn trick: create a new layer and fill it with 50% gray. Change the blend mode to “overlay”. In this mode, 50% grey has absolutely zero effect on your image. But if you paint in black on this layer, it darkens, or “burns in” what’s underneath it. If you paint white, it lightens it, or dodges what’s underneath. I usually choose a soft brush, turn the opacity down (sometimes really, really low, like 10%!) and I paint. If you paint over the same spot, it gets darker (or lighter). The “X” key switches back and forth. Make a mistake? Switch colours. Or just fill the whole layer with grey again and start over!

As a rule of thumb, I burn in the dark things and textures to make them stronger, and dodge the light things to make them soft. In this case, I also used some local sharpening to bring out the water droplets.

This is what the dodge/burn layer looked like on its own after I was finished painting.

Almost done! 

I added a hi-pass sharpening layer (much the same technique as the Dodge/Burn layer. "Overlay" blend mode, the Hi-pass filter is under "others" in Photoshop, I typically use a value of 4 px). I did a little more dodging and burning. In the sample image, I had included a stem, which I wanted out of focus. I used an iris blur, but it caught the edges of the flower so I added a mask and painted out the areas I didn’t want blurred. Then I decided I did want something other than pure black in the background, so I made a new layer, opened it in Topaz Impression, masked the flower edges then masked the interior to retain all the detail. Done!

At first, I just masked the edges of the flower so they would remain crisp. But as I looked at it more closely, I decided I also wanted the textures in the flower to stand out, so I continued painting on the mask as you see below. 

I was trying to remember which preset I used in Topaz Impression. I think, "Georgia O'Keeffe I" but I'm not sure. That's why you should name your layers as you go along! 

If you want to see what the image looks like matted in a frame, increase the canvas size, fill it with white, draw a keyline and add your signature!

Summary 

The key here is to select a subject with great tonality and texture, but not too much complexity. Visualize it in black and white. Put it on a pure black background, then enhance it with the traditional darkroom tools now translated into Photoshop. Pay attention to detail and your results will be outstanding.

Here's another image for your viewing pleasure. I used much the same series of techniques and finished it with both Topaz Glow and Topaz Impression. This was made from a small section of a larger image; the selection of the flower was somewhat more difficult due to its complexity. The grey background around it is the version I use in Social Media or my normal weekly blog.

Online resources: 

Antony Northcutt eBook
Non-destructive dodging/burning


Interested in doing a workshop on this or another topic? Please contact me by email or visit my website at www.photography.to.

— 30 —

Workflow Tips

I thought I'd share a couple of workflow tips for my photographer friends.

I don't have to do high speed editing like a sports photographer might. I generally don't import thousands of images at a time, but I might do a couple of hundred. This is just a quick overview of my process and I've highlighted a few of the things I think about. This is not a detailed explanation, it takes too long to write that and I don't want to put anyone to sleep. Just some things to think about.

1. Import
I put the memory card in the reader and I have the computer set up to automatically open Lightroom. The import dialog appears, and I've written a preset called "D800 import" that automatically sets up some parameters: where the images are saved, where the second copy (backup) is saved (on a different drive), it adds my copyright info in the metadata, and some really basic settings like sharpening, clarity, vibrance, camera profile, lens correction, etc. I can always change those but most RAW files need something to make them look ok on import. Click "Go" and depending how many images, get a coffee.

2. Flag Status
The D800 gives you huge files. I don't necessarily want to keep them all and some of them are certainly worth prioritizing for the next step in the editing cycle. I blow them up to full size on the big monitor and go through the whole batch, hitting "X" for reject, "P" for pick or just skipping them if I'm not sure. Pictures I want to work on first, I'll hit "6" (puts an "Edit Now" flag on them) and really good ones I'll mark with a 3- or 4- or very rarely a 5-star rating.  I also use "7" on series' of bracketed pictures I will want to merge to HDR.

Next step is the hard-hearted click on ctrl-backspace to permanently delete all the rejected photos from disk. These are pictures you're NEVER EVER going to want to see again.

This whole thing is really a quick process, assuming I've taken that few minutes to let Lightroom generate the  previews before I start. 200 images, maybe 10 minutes.

3. Keywording
This is a good time to do it. These are all potential keepers, and if you ever want to find them again... you can do them quickly in batches and add more later.

4. Editing
I'm not going into detail here. Each picture needs a different treatment. Sometimes you want to do some common edits, especially if a number of pictures are going to be merged together, as an HDR for instance, or all themed to work together for some other reason. Lightroom lets you sync edits across a number of images.

I do everything I can in Lightroom, then export selected images to edit in Photoshop. I use plug-ins a lot: if nothing else they save orders-of-magnitude of time instead of working blindly in Photoshop. My go-to plugins are from Topaz and Nik. I have the full suites from both of those manufacturers. Here are the links:

Topaz

Nik

Step 1 once an image is imported to Photoshop: Ctrl-J duplicates the layer so I have the original to fall back on any time I want to. Step 2 is usually a hi-pass sharpening layer (blend mode to overlay, radius 4px is my go-to setting). The rest varies from image to image. Step 3: Blow the image up onscreen to at least 100% and go around it to find whatever else needs fixing. There's always something!

Once I get back to Lightroom, that's when I crop and straighten (I may have done a preliminary crop before exporting to Photoshop). Final touchup, and as Ansel Adams used to say, a picture isn't finished until the edges are darkened a bit. A really useful tool is the new radial filter in Lightroom that you can use to really make the subject pop.

For display on my blog or on Social Media, I often like to build a shadow frame like the one below. I created an action to do that in Photoshop with one click, then I enter the caption, my signature and tweak it as I see fit before saving it as a separate file. I don't want to overwrite my original. Contact me if you want a copy of the action (works in CC or CS6)

5. Exporting

You do understand that everything I've done up to now is creating the source file, the "negative" as you will, that I archive. What I do with them next depends: are they for use on social media? My blog? For sale as a fine art print? Wallpaper? For the media (newspaper)? You need to export Jpegs for that. So that's what I do next, but only when I want to use them for something. There's no need to save the exported files back into Lightroom: I can always make them again from the source files. 

I set up a bunch of export presets that say where the file should be stored, what it's called, how big it is, whether there's a watermark, etc. Once you've made the preset, it's 'select the preset' then one click to export as many files as you want!

6. Backup

I have Lightroom set to make a backup of the catalog whenever I exit the program. The backup goes on a different drive from the original (you know why. If you need me to tell you why, sell your computer and buy a box of pencils). Do it religiously. 

In my workflow, I sync my external drive where the main images are, to one or two other external drives. The keepers also go on another one which is stored off-site. I do that every month, on the first. Only then do I delete the original backup images I made when I imported them. And I keep a month's worth anyway. You need a backup plan...

Is this the world's greatest workflow? No, of course not. Should you do it exactly like this? No. Did this give you some idea about how you might treat your own work? I hope so!

Be sure to visit my regular weekly blog, interesting images and ramblings from the Highlands! Click the "Newsletter" button (or here) for a weekly heads-up about what's on the newest posting.

— 30 —

Temporary Photoshop Fix for unsupported cameras

Adobe hasn't yet updated Lightroom or Photoshop to support my new D610. So I can't import any of my RAW files to either program. I researched a temporary fix.

Note: This may not work in principle for other cameras. It works for the D610 because the RAW files are almost identical with the D600. Down the road, a similar fix might work with other cameras but you have to figure out what to try.

What you need to do is to rename the camera model in the EXIF data in the RAW file (in my case, they are ".NEF" files). To do that, you have to run a program to edit the metadata.

Note: this is for Windows 7. I'm sure Windows 8 is similar, but I'm also sure the Mac is different. There is a Mac version but I'm not going to try to tell you how to use it.

Here's what you have to do:

1. Get exiftool.exe
2. Upload the pictures from your camera to your computer
3. Run exiftool on the whole batch of pictures. Has to be run from a command prompt.

You'll end up with files that you can now import into Lightroom or open in ACR.

OK, here's how. This may look long, but just do it step-by-step.

• Download <exiftool.exe>. There are Windows, Mac and Linux versions all here:
  http://www.sno.phy.queensu.ca/~phil/exiftool/

• You have to unzip it and put it somewhere you can find it. For me, the easiest place was on the Desktop.
• The filename is "exiftool(-k).exe". The "(-k)" will keep the window open when you run it from the command prompt, which you need to do if you're going to use the program just to view the exif data for an image (what the program is really for!). So right-click it and make a second copy on the desktop, then rename the copy to "exiftool.exe" so you can use it more easily to rename the camera model in a batch of files.

• To run the program, you have to do it from the command prompt window. Click the Windows Start Menu icon (the beachball in the lower left corner) and type the word "command" in the search box. The first item that should come up is "Command Prompt". Click it. A black window will open up.

• To run exiftool from the command prompt, you have to type the entire path, both to where the program is and to where the files are. To avoid having to do that every time, I decided to save the entire command in a text file so I could just cut and paste it into the command window. 
• As it stands, the default command window doesn't allow you to simply cut and paste into it. Make it happen by right-clicking in the bar at the top of the black window, select "properties" and turn on QuickEdit Mode in the options window. That should be sticky.

• A word about importing the files to the computer. Since my auto-import to Lightroom doesn't work on these files, I connected the SD card, viewed the files, and dragged the entire subfolder called 100ND610 (inside the DCIM folder on the SD card) to the desktop. After I import to Lightroom (including copying the files to where they're supposed to be), I can simply delete this folder. It's always the same name, so I don't have to retype the command line each time.

• I opened Notepad and I typed in the following (of course replace the CAPS areas with your own info):
  C:\Users\YOUR-USER-NAME\Desktop\exiftool.exe -model="NIKON D600" C:\Users\YOUR-USER-NAME\Desktop\FOLDER-WHERE-THE-PICTURES-ARE\*.nef
  Note that this command is continuous, all on one line. Blogger has split it to fit the window.
  
  In my case, the exact command was C:\Users\Glenn\Desktop\exiftool.exe -model="NIKON D600" C:\Users\Glenn\Desktop\100ND610\*.nef
• Copy that from your notepad file (I saved the notepad file as "using exiftool.txt" on my desktop) and paste it into the command window. To paste into this window, you DON'T use ctrl-V, you simply right-click anywhere in the black window. Once it's there, click to run it.

• If you have multiple files, it will take a minute of clicking and whirring before it's done. Then it will tell you, "x files have been changed".

Update: Open the window with the files in it before running the program. You can watch its progress! I just did about 100 files and it took about 5 minutes. I thought it was stuck until I opened it and saw it going through the files.

• Now you can open Lightroom and use your usual import workflow, but your source files are the ones in the folder on the desktop, not on the SD card.

Phew! They don't make it easy, do they?

BONUS: you can view the metadata for any pictures by simply dragging and dropping the image file on top of the exiftool icon! Use the one with the (-k) in it so it will stay open for you to read it. You will be blown away by the amount of information your camera collects. Your shutter count will be about halfway down the list, by the way. This should work for ANY picture file, ANY camera.

Update: It seems most cameras do NOT show the shutter count in the EXIF. I tried several others and heard from readers who couldn't find it.

So that's how I did it. Good Luck!

* If you liked this post, please share it, by clicking the "+1" below or "Like" on FaceBook. Please visit my regular weekly blog at http://www.faczen.blogspot.com and sign up for the free weekly newsletter. Don't worry, you can unsubscribe with one click if you want to (but you won't want to!)

— 30 —

Approximating Line Art

This is about approximating line art in Photoshop.

Now credit where credit is due: I didn't invent either one of these methods, I found one of them in a column by Larry Becker in the Dec-11-Jan-12 issue of Photoshop User Magazine (which you get if you are a NAPP member — click here) and the other one in a tutorial that I found via the forums on the NAPP site (again, — click here!). The tutorial is one of several by Dee Dee Martin (Swampy) who is also a NAPP denizen. Please visit her tutorial site here. Her video tutorials are excellent.

Thank you Larry and thank you Swampy for two great tips on using Photoshop.

Some background: I wanted to do a different treatment for some images I shot the other day. I've been thinking about line art and I remembered reading something about emulating line art in Photoshop (it was the Becker article but I couldn't remember where I saw it) so I posted the question on the forum and I quickly got the two links above. Both methods work, both are brilliant and both are entirely obscure! No way I would have found them on my own! I still don't understand why they are where they are in Photoshop but why look a gift horse in the mouth? As usual there are 80 different ways to skin a cat in Photoshop!

So I'm posting this here for two reasons: (1) to share what I've learned and give my readers some ideas about some new things to explore, and (2) as a convenient place to put these tips where I can find them again! One of the biggest problems with Photoshop is how complex the program is, and how easy it is to forget how to do something if you don't do it regularly. These fall in that category, especially in view of how obscure they are.


So here goes:
This was a somewhat 'nothing' image that I took at the beginning of the party I was shooting, more for testing exposure than anything else. By the way, lighting came from my SB-600 flash mounted high on a light stand, controlled remotely from my D300 in Commander Mode. I had the Gary Fong diffuser on the flash, pointed towards the ceiling mostly (although the nature of the diffuser is that it also acts as a soft direct source). The pop-up flash was set for 1 stop under just for a little fill, and white balance was set to "flash" (some of you like details, I know!)

Nikon D300/Nikkor 70-200mm @ 155mm. 1/180 sec@ f/2.8, ISO 200.

First, the "Becker Method" from the magazine.

How do you do this?

■ Working on a duplicate of the background layer, select Filter→Blur→Smart Blur (note: you have to be in RGB 8-bit mode or it will be greyed out)

■ Change the Mode at the bottom of the popup to "Edge Only"

■ Play with Radius and Threshold until you get the right 'look' you're after

■ It will give you white lines on black. If you want, invert the image with Image→Adjustments→Invert (Ctrl/Cmd-I) to black on white

■ Change the opacity or the blend mode (or both) of this layer to let a little colour through

■ (and this is my change to Larry's method) apply a layer mask then paint on it to let more of the colour from the original through.

That's what I did in the above image. I like the charcoal-like texture of the lines and the subtle pastel colours.


Now the "Swampy Method"

It works like this:

■ Duplicate the background layer. Change the duplicate to a monochrome grey layer with Image→Adjustments→Desaturate (Shift-Ctrl/Cmd-U)

■ Duplicate the new layer and invert it to a negative with Image→Adjustments→Invert (Ctrl/Cmd-I)

■ Set the blend mode of this inverted layer to "Color Dodge"

■ Apply Filter→Other→Minimum and adjust the Radius slider to your liking

Here's what you have at this point:

■ Merge these two new layers together (Select the top one and "Merge Down" or Ctrl/Cmd-E)

You can add some colour at this point by reducing the opacity and letting the original layer leak through. You'll get something like this:

Alternatively, you can change the blend mode to "Luminosity" before merging the layers down

AND play with the opacity, yielding still a different result:

For what it's worth, every time I reduced the opacity, I found that a setting around 60% gave me the best result, but hey, it's up to you!

Two different obscure approaches, both of them work!

---

This PS is added in May 2012. I often find myself going back to this post to remember the keystroke sequence to do these line drawings. In the meantime, I found some other ones so I'm adding this note so I can find them all in the same place. I wish I could remember where I found this...

Create a new layer (Ctrl-J) and change the blend mode to "Divide". Now use a blur tool: you get different results with Gaussian Blur or Box Blur or other ones I haven't discovered yet.

---

Here's another method, added in October 2012: courtesy of Bonnie Glidden. This one is even easier: create a new layer, then select "Filter → Stylize → Find Edges". You're basically done! You can vary the opacity, add a black-and-white adjustment layer, etc. if you want.

---

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