real estate - Greg Benz Photography

How to Blend Exposures for Interiors

June 22, 2021

Now through June 30: Use discount code SUMMERSALE for 25% off my Master Courses (or bundles with Lumenzia) to get the software and training to help master your own exposure blends.

I’m trying something new this week. I get a lot of requests for longer or more detailed tutorials than I can typically squeeze into a 15-minute YouTube video. So I’ve built out a more complete tutorial in which you’ll learn:

How to blend multiple exposures in dynamic light
How to customize and use some of the most advanced luminosity selection techniques involving color, subtraction, or restricting to specific areas such as windows
How to dodge and burn with your exposures
How to use the new four-sided blur borders with Web Sharp Pro

The images for this tutorial were provided by the talented Garey Gomez. He’s also an instructor, so be sure to check out his tutorials on the art and business of real estate photography.

How to stitch challenging panoramas

June 1, 2021

I’ve previously posted several tutorials on how to create panoramas with Lightroom, including details on adaptive wide angle and how to stitch HDR panoramas in one step. Lightroom does a beautiful job in many situations, but panoramas aren’t its main focus and it can’t handle every job. That’s where a dedicating panorama program becomes a critical tool. They look daunting, but don’t let that stop you. If you know the few controls that really matter for most tough jobs, it’s actually super easy and you’ll learn how to quickly get the job done in this tutorial.

Important tools for shooting and processing panoramas:

While you don’t need all the fancy tools I use to capture panoramas, they do make your life easier by helping to capture the best quality source images. They can help ensure you get images that will stitch, simplify the stitching workflow (avoid more complex fixes), and help you keep more of the scene (by avoiding cropping due to gaps or slanted results).

The tools I used for this image edit include:

PTGui: The dedicated panorama stitching software I use for more challenging panoramas like this one. The “pro” version is not required for the type of work I showed here. The key benefits of the more expensive version are dedicated support for stitching multiple exposures (“HDR”) and batch processing if you plan to do a lot of this.
Arca Swiss “Cube”: This is a very expensive geared head, but built to last forever and it adds tremendous value if you shoot panoramas or architecture. If you need to shoot on a budget, this is definitely optional. Ball heads are fine and there are cheaper geared heads (but try them and make sure you don’t get one that feels loose when the camera is attached).
Really Right Stuff series-3 leveling base with hook: Whatever head you swivel on top of your tripod, it should be perfectly level and a tool like this makes the job so much easier than fiddling with the legs. There are different options for different models, call B&H if you have questions. I like the version with a hook so that I can hang my bag from the tripod for extra stability.
Really Right Stuff slider rail: This lets you offset the camera a little so that it can rotate around the “nodal” point, which avoids parallax that can make stitching very difficult in scenes where the foreground is within 10 feet or so of the camera.
Really Right Stuff pano head: If you wish to shoot multi-row panos like I used in this demo or anything where the camera doesn’t stay perfectly level, you’ll also want a head designed for vertical movement. If you only plan to shoot single-row panos, want to watch your budget, or travel as light as possible – just get the slider rail.
Luminar: For the light rays in this demo. It has nothing to do with panorama specifically, it’s just a nice filter effect for the final image.
Lumenzia: My luminosity masking panel, for more control of Luminar. It is also unrelated to the pano itself.

If you are on a budget, the most important tools here are PTGui, a slider rail for the nodal point, and ideally a leveling base to make life easy. If you do not have the time or tools to shoot on a leveled tripod with adjustment for the nodal point, you’ll want to capture images with a much higher degree of overlap from frame to frame. These extra images will help compensate for lower-quality source images.

How to stitch using PTGui:

I’ve been using PTGui for probably 10-15 years. It used to be be rather complicated to use, with a lot of complex option. These days, it just looks complicated. It’s quite simple now if you just follow the following steps:

Open the Project Assistant. This should be the first thing you see, but you can navigate there via Tools / Main Window and clicking at the top of the left hand column.
Drag and drop your or click “load images” to provide your source images. I recommend using TIF images you have processed with your desired white balance, etc. PTGui will accept RAW files, but there’s no real benefit in my opinion since it will not allow you to export the final image as a DNG (this is the primary advantage Lightroom overs PTGui and I’d love to see support added here too).
Click “align images“, which should take you to the panorama editor window.
In the panorama editor, try the different projections to find the best starting point. Use the cylinder for single-row panos and the sphere for multi-row. Be sure to try the “rectilinear” option in the drop down.
Drag the horizontal and vertical sliders to help zoom the image area to your content.
Click and drag the image to set the center.
If the image needs rotation, click the popout options at top right, then numerical transform, and try + or – 0.1 degrees for roll. Click apply to update.
Repeat steps 5-7 until you have the composition you like with either no gaps or ones you can fill via content-aware in Photoshop.
Close the panorama editor or go back to the main window via Tools / Main Window and look for the “create panorama” section in the left hand column. You can skip all the other stuff.
If this is your first time, select TIFF, 16-bits, LDR blended panorama (or HDR blended panorama if you are providing multiple exposures), select AdobeRGB or your preferred colorspace and check “use source image color space if possible“. Then go to File / Make Default to save these settings as the default for the future. Be very careful to ensure you are using 16-bit output.
Click “create panorama” and look for the final file to be places next to your source images. Open it in Photoshop to finish editing.

Of course, feel free to explore those advanced options as you need, but they are overkill for most properly shot sequences of images.

Note that I deliberately allowed the converging verticals (keystoning) here. I had the camera pointed up a considerable amount and no amount of correction would straighten everything without tradeoffs. Personally, I like the look in this case. It’s not slightly off, it’s clearly a choice. And it helps things flow visually towards the light source. If you would have wanted more correction, you could try the following steps to get this alternative version below.

Adjust the pitch in PTGui’s panorama editor in the numerical transforms (in the same popout where you can rotate the image). By placing the centerpoint low in the image, the top gets stretched out to keep the columns more vertical.
Try playing with the projection settings for horizontal and vertical compression in the projection (same popout on the right)
Zoom out to keep critical edges. This will leave enmorous areas of blank pixels, which will need to be cropped later.
In Photoshop, use the Adaptive Wide Angle filter (ideally on a Smart Object created from the output of PTGui). The capabilities here were a bit limited because of my use of a tilt shift lens, but using the “polygon constraint tool” on the ceiling helped further straighten bowing lines in the ceiling.
Crop.

Here you can see the results. Personally, I do not like the dramatic change in column thickness nor the distortion in the ceiling. There is no free lunch when you shoot ultra-wide looking up, tradeoffs are part of the game. I could have shot head-on from the second floor, but then I’d lose the scale in the stairs. I prefer just embracing the scene for what it is. It makes you feel a little small relative to this incredible architecture.

How to add light rays using Luminar and Lumenzia:

To add light rays using Luminar 4:

Right-click your image in Photoshop and convert the panorama to a Smart Object. This will allow you to change the filtering later as needed.
Go to Filter / Skylum Software / Luminar 4.
Click on the creative tab (the icon looks like a painter’s pallet) and then Sunrays.
Click “place sun center” and then click and drag the white dot to where the light should come from in the image.
Increase the amount to a high value so you can see it, adjust the various other settings to optimize the look, and then finally decrease the amount as desired.
When you are done, click “apply” and then you may wish to paint with a soft black brush on the Smart Filter mask to reduce or remove the effect in some parts of the image.

To enhance the light rays using Lumenzia:

Click “Dodge” to add a transparent or gray dodge and burn layer.
Click Diff(+/-) and choose the “lighter” option. This will help target pixels which are brighter than those around them.
Click and drag the slider to right to use a larger radius of comparison. Small values will target edges and you’ll need larger values like 200-500px to target the light rays.
Click “Sel” to load the Diff preview as a selection.
Paint on the dodge layer with a white brush as low flow through the selection to enhance the rays.

Disclosure: This article contains affiliate links. See my ethics statement for more information.

Sharing gorgeous images is easier than ever with Web Sharp Pro v3

May 17, 2021

Thank you for all the enthusiasm for Web Sharp Pro, the easiest way to share your beautiful images. Web Sharp Pro is about much more than just sharpening, and that’s now more true than ever with the latest updates.

I’m happy to announce that Web Sharp Pro v3 is now available and includes:

Borders with numerous options to customize
Blurred backgrounds to surround your image naturally while fitting any output aspect ratio
Expanded watermark options
Export wide gamut images
More templates and an enhanced template editor
And much more. There are over 80 new features, updates, and bug fixes so far. See the release notes in the panel for more details (via top-right flyout menu).

Buy Web Sharp Pro v3 now.

This is a free update for all existing customers (see here for details to update).

How to setup proper color management in your web browser

April 27, 2021

You would think that more than 25 years after ICC profiles were created to support color management that all our software would automatically make our images look consistently great. Sadly, that isn’t the case. For example, if you use Firefox under default settings on a wide gamut monitor, you can expect to see some pretty horrible results, as shown in the video below.

Color Management: The Big Picture

Before we dive into how to setup the web browser, we need to step back and look at the big picture. Color management isn’t just one thing you do, there are several areas where photographers need to pay attention. Just because you have calibrated and profiled your monitor, that doesn’t mean that every piece of software on your system will automatically use that information correctly. A properly color-managed workflow includes all the following:

A decent monitor using a profile created with a hardware calibration tool. See my gear page for recommendations.
Proper color settings in Photoshop. See this post for details.
Soft proofing before printing, and hardware-base profiling of your printer if you make your own prints. See my gear page for recommendations.
Enable color management in your browser, so that images look correct when surfing the web. Which is what we’ll cover below.

There are a few common problems you might see:

Colors are weak / desaturated. This may happen when an image encoded in a wide gamut space (such as ProPhoto / Adobe RGB) is untagged, or when not properly mapped to display on a on a narrow-gamut monitor.
Colors are punchy / over-saturated. This may happen when an image encoded in a narrow gamut space (such as sRGB) and is not properly mapped to display on a wide-gamut monitor.

How to test that your browser is properly color managed:

Here are a few quick tests to help check that your browser is setup properly for color management. If you pass these tests, you should be in good shape.

Test #1: Does your browser properly render tagged images?

This test is designed to help ensure that you browser both recognizes and properly uses embedded profiles. This series of test images all start from the same flattened sRGB test image. The image was then converted to various larger gamuts, but without taking advantage of the larger gamuts so as to make a direct comparison of what should be exactly the same rendered colors. I’ve included common spaces (sRGB, Adobe RGB, ProPhoto), P3 (used by Apple and others), Rec2020 (aka ITU-R BT.2020, which in my opinion should become a major standard for photography and included with Photoshop), and ACES CG Linear (an important standard for TV/film, but included here primarily to test with a significantly different gamma).

sRGB

Image P3

Adobe RGB

Rec.2020

ACES CG Linear

ProPhoto RGB

Expected result for test #1: As you hover over each of the various colorspace options right of the image, the display should look nearly the same (because all of these spaces can display all the colors I used in the initial sRGB version). If the colors shift, your browser is not processing the embedded profile as expected.

However, there is some loss of quality with very low gammas (and to a lesser degree with ultra-wide gamuts) as there just aren’t enough discrete values devoted to shadow detail. There is some very minor banding present in ProPhoto here, and the ACES CG Linear version is a total mess in the shadows if you’re looking closely. The low gamma is the main issue, and switching to a linear (1.0) gamma will show serious problems even for sRGB. This would be no problem at all (for any of these) in a 16-bit image format (such as JPEG2000). But sadly, there is no file format which offers small file sizes, 16-bits, and support across most web browsers (while PNG does support 16-bits, the file size is typically 2-10x larger). For this reason, I would recommend targeting profiles with gammas 1.8 to 2.6 (ideally 2.2 to 2.4) and gamuts no larger than Rec.2020 for gammas that aren’t in the target range. That leaves many great options including sRGB, P3, AdobeRGB, or Rec.2020 when sharing 8-bit JPG images for viewing only. Momentum appears to be behind webP as a growing format, but I don’t believe there is a 16-bit specification and Photoshop does not yet support it (though most browsers do). It’s unfortunate that JPEG2000 browser support is so limited.

Test #2: Does your browser properly assume sRGB for untagged images / CSS?

This test is designed to help ensure that un-tagged images properly assume sRGB color. There are many scenarios where image tags are accidentally missing or are deliberately stripped (often to reduce image size to increase page load speed). If you have a wide gamut monitor and your browser does not assume sRGB, you’ll see over-saturated images on many websites. Just a few examples of problem areas as of the time I’m writing this: Instagram, YouTube (such as thumbnails), Instagram (regardless of embedded profile in the upload), Facebook (anything in the feed before you click to open full size and untagged uploads), etc.

Additionally, almost all non-image content in your browser lacks colorspace information, and sRGB should be assumed (see the section below on “wide gamut CSS” for more details on this).

(1) CSS
(max values)

(2) UN-tagged image in sRGB
(max sRGB)

(3) Tagged image in sRGB
(max sRGB)

(4) Tagged image in ProPhoto RGB (matched to max sRGB)

Expected result for test #2: You should see what looks like one single red, green, and blue value. If you see changes in red, green or blue in rows 2-4, your browser is not properly managing color. Row 1 is a reference for non-image colors. Matching here is less critical and more a matter of your opinion on how to manage a set of less than ideal tradeoffs (discussed below), but I believe it should ideally match as well.

Note: CSS (“cascading style sheet”) is how website specify color for anything which is not an image, such as text or the generic boxes in row 1 above (rows 2-4 are real images, but the first row is actually just a “div” filled with a color). Accuracy in CSS color isn’t as important as accuracy in photographs typically. You could argue that scaling the color to the limits of the display might be ideal, but it really isn’t something you can control (outside of a bad option in Firefox discussed below). Ultimately, I’d prefer to see CSS colors rendered consistently and web standards for wide gamut CSS adopted broadly, but we are a long ways from that point. For now, just be aware that the color of non-image portions of a website may be treated differently.

Test#3: Does your browser support both v2 and v4 ICC profiles

Please go to this ICC test page and compare the top image to the references below.

Expected result: The top test image show not show any green sky. If the top image shows green instead of blue sky, you’ve got problems. Support for v4 profiles isn’t necessarily a problem (since they aren’t all that widely used), but I would still advise making changes to pass this test.

Note: ICC profiles v2 and v4 are the only versions you will encounter for photography, and many of you may never use the less common but newer v4 standard (you may see reference to a newer “iccMAX” specification, which is unlikely to be used in photography for the foreseeable future and you should ignore it). If you are using Lumenzia, you can click “Gam” and review the list of profiles. Lumenzia will tell you which profiles are v4 profiles with a special note (v2 profiles are simply unmarked). Chances are that none of your profiles will be listed as v4. Ultimately, the differences between these standards won’t matter for most photographers, but you should test that your browser is able to handle both to ensure you are ready to view all images correctly.

If your browser passes tests 1-3, congratulations – you’re in good shape (this doesn’t guarantee color accuracy if you haven’t profiled your monitor, but it does tell you that the browser is managing color correctly). If you failed some of the tests, please skip to the sections at the bottom for tips on how to optimize your browser.

Potential benefits of embedding wide gamut color spaces

Many new monitors are designed to display wider gamuts (with comparisons to Adobe RGB and P3 being the most common). These allow you to see more real work and printable colors than the sRGB gamut allows. This is great for editing and may also allow you to view some more vibrant content on the web (and support for wide gamut will hopefully improve in the coming years).

Test #4: Monitor gamut

Here is a comparison of the maximum gamut of various common color spaces. Unlike the similar image above, these images have been processed to use the full gamut and you SHOULD see a change in the display (assuming you have a sufficiently wide gamut monitor). The goal here is not to make comparisons of these color spaces, that isn’t really possible with a simple 2-dimensional representation, just to give a relative sense of the expanded color palette available in broader color spaces like Rec. 2020.

sRGB *

Image P3 *

Adobe RGB *

Rec.2020 *

ProPhoto RGB *

Expected result for test #4: The image SHOULD show more color with the larger gamut spaces (because I created a new gradient for each color space to take advantage of the full gamut). If you do not see any change here, then you either have a narrow gamut display or your browser is set to render everything to sRGB (see the section on customizing Chrome below).

Note: In order to make things as directly comparable in the creation of these images, I have used the same gamma for each of the images in test #4. I used gamma 2.2 for all versions (the only significant shift here would be for ProPhoto, which normally has a 1.8 gamma, but it is of no major significance here for comparing the gamuts. Other parameters such as illuminants were left at defaults). Had I used native gammas, the ProPhoto version would be harder to compare as the brightest and darkest segments of this image would have been much smaller due to interaction with gradient layers (this is not a factor in the similar images above, which were a direct conversion of a single layer).

Test #5: Real-world gamut

Webkit (that organization that creates the open source software powering Safari and other browsers) has a large set test images that help easily compare sRGB vs wider gamuts to get a sense of how this impacts real images.

Just move the slider back and forth to reveal the sRGB (left side) vs wide gamut (right side) versions of each image.
In an ideal world, we'd be able to easily share images with wider color gamuts. But due to ongoing limitations and inconsistent support, it's still better to share images as sRGB these days.
However, this is a good demonstration of why you should keep your original layered "TIFs" in a wide gamut colorspace. For vibrant images, they will look better on your monitor, they make better prints, and hopefully some day you'll be able to share them without having to convert to sRGB. So keep that great color!

Expected results for test #6: If you are viewing these images on a wide gamut display, you should see better color and detail when sliding to expose the wide gamut version. If you do not, you may be viewing with a narrow gamut monitor or your browser may be rendering all content as sRGB (see the section on configuring Chrome below).
Keep in mind that while the wide gamut images will look great on a wide gamut display, you may still wish to share your images after converting to sRGB to avoid color management issues that may exist on your viewer's computer/phone..

Test #6: Support for P3 in CSS (expect to fail this)

While you can ready view wide gamut images now with a properly configuring computer using a wide gamut monitor, support for wide gamut beyond images is far less developed at this point. As discussed above, non-image colors on websites are specified via "CSS". While not as critical as color management for photographs, the status quo is a messy set of tradeoffs between assuming all this color uses the narrow sRGB gamut or you can just throw management of this color out the window. The browser can assume sRGB to create consistency, but then anything that is not an image is limited to a more dull set of colors than many computers can display. Or the browser can toss color management out the window and map the RGB values to the limits of your display, sacrificing accuracy for vibrancy. And in the midst of this is a question as to what the designer of a particular website intended (do they understand color management, did they design for accuracy, do they want the most vibrant color possible?) The ultimate solution to this problem is to specify colors in a specific color space with a wide gamut.

Unfortunately, wide gamut standards and support are still at an early stage. There are proposals for support for P3, REC2020, LCH, and LAB color specifications, but at this point I think support is limited to P3 on the Safari browser. Aside from limited support, many monitors can display colors outside the P3 gamut already (#6 in P3 below is not as vibrant as #5 above in ProPhoto on my Eizo monitor, there's a huge difference in the maximum red and green values - I'd personally love to see broad support for REC2020). This isn't something you can really control at this point without creating other issues, it is what it is (you can set gfx.color_management.mode = 2 in Firefox for more vibrant CSS RGB colors, but this will cause horrible over-saturation with untagged RGB images and is therefore not a good option).

(3,repeat) Tagged image in sRGB
(max sRGB)

(6) CSS (in P3) ***
(max values)

Expected results for test #6: If you are using a supporting browser (Safari) AND a wide gamut monitor, you should see #6 shows more vibrant red and green values. Most of you will just see a blank row for #6, as support for this new standard is very limited.

*** The P3 CSS row will show up blank for browsers which do not support this new standard (currently only supported by Safari to the best of my knowledge). If you don't see color, your browser does not support this new specification.

How to configure color management in Firefox:

If you use Firefox, you likely need to make some changes to pass the tests above.

Do the following if you can't pass the main tests above.

Copy / paste the following into the address bar (just like any website URL): about:config
Click to acknowledge the warning
Important: Search for gfx.color_management.mode and set it to 1 (this enables color management for all images, including ones that are missing tags)
Important: Search for gfx.color_management.enablev4 and set it to true by double-clicking it (this enables v4 profiles)
Optional: You may set the rendering intent via gfx.color_management.rendering_intent. Set it to either relative colorimetric (1, my recommendation) or perceptual (0, perfectly reasonable but may reduce saturation for the few images where the difference here matters). Saturation and absolute colorimetric should be avoided. I honestly don't understand the automatic option (-1), as I am unaware of whatever tag they are referencing and have no idea if it gets any real use, but I am not a fan of relatively undocumented features that may introduce variability across images. Picking between the best options here is probably not of much consequence as most content you view online won't be outside your monitor gamut and with matrix-based profiles (which is most of what you'll use with displays), perceptual and relative colorimetric would be treated the same.
Restart Firefox and run the tests above again.

Optional (not recommended for most users, I cannot think of a good reason to do this): If you need the browser to use a profile other than the default you've set in the operating system, you can specify something else by providing a file path via gfx.color_management.display_profile

How to configure color management in Chrome:

Chrome doesn't offer as much flexibility, but you shouldn't need it and Chrome generally runs well by default. It does have one interesting option, and that is the ability to force Chrome to output to a known gamut (rather than just rendering the colors as is under your current "default" monitor profile). This is a change to how it renders its output, not how it interprets the content on the site. Leaving this as default is generally best to take advantage of the best display possible on your monitor, but you could change to a smaller gamut like sRGB if you wish to get a rough "soft proof" of how something might look on a narrow-gamut monitor. To limit the output space for Chrome:

Copy / paste the following into the address bar (just like any website URL): chrome:///flags/#force-color-profile
The best option should be "default". However, if you have problems, you may wish to try "Display P3 D65" to force a relatively wide gamut or "sRGB" to force a smaller and more controlled gamut.
Relaunch Chrome

How to configure color management in Safari:

Safari should also be OK under default settings, and does not offer options to customize.

How to configure color management in Windows Edge:

Edge appears to be OK under default settings, and offers the same customization option as Chrome. Navigate to edge://flags/#force-color-profile if you'd like to force a particular output gamut.

How to configure color management for iPhone / iOS:

Each browsing app may have its own settings, but I am not aware of any configurable color management settings for the browsers nor any any browsers which support use of a hardware profiling device for accuracy (unlike for example the ColorTRUE app from X-Rite to display standalone images accurately).

The main control for accuracy is to set a reasonable screen brightness, as this heavily affects your ability to see shadow detail, etc. It may also involve disabling the iPhone's (Settings / Display and switch True Tone off), though TrueTone is meant to show color more consistent with ambient lighting conditions, as this will affect your perception of the screen.

How to configure color management for Android phones:

I don't have much experience with Android. Android 8.1 and higher include support for color management, but I understand there may be some watchouts for wide-gamut images rendering incorrectly, which still wouldn't surprise me for a mobile phone in 2021. And apparently roughly 20% of Android phones are still running operating systems older than v8.1.

If you're reading this on an Android device, please comment below on what you see in test #1 above (please note the model of phone you're using and version of Android you are using).

Summary:

Profile your monitor and be sure to leave embedded ICC profiles in your images. Without this, all bets are off.
Use the tests above to confirm your browser is properly using those profiles and best managing any un-tagged content on the web.
Watch out for Firefox. If you are sharing images with clients, you may wish to recommend they view the with Chrome or Safari to improve the chances that they will see your artwork with the expected color.

Announcing Web Sharp Pro:

March 20, 2021

I’ve just released “Web Sharp Pro” to make it easy to ensure that your images look amazing wherever you share them online.

This Photoshop extension panel offers:

1-click exports of any image that take care of cropping, resizing, sharpening, and the other key steps for making a web-ready JPG for you
Batch processing to convert an unlimited number of images all at once
Social media templates to easily optimize for popular sites
Advanced options such as support for Instagram sliders, letterboxing, etc
Crop overlays to use multiple custom crops / settings on any image
Template editors to customize for all your needs
Add watermarks / copyright to promote and protect your work
And much more that I’ll be sharing soon

Learn more and download via gregbenzphotography.com/web-sharp-pro-panel.

Greg Benz Photography