I was creating a web gallery in Lightroom today for a friend, and I wanted it to look as consistent with her website as possible in terms of colors and fonts. The issue I faced was how to determine what the website background color was. Here’s how to do it using Photoshop (UPDATE – click here to learn how you can do this in Lightroom):
- Open up Photoshop, open any image and make sure you have the background layer highlighted in the layers palette.
- Resize the Photoshop window so that the web page (or any other document) you want the color from is next to it.
- Grab the Eyedropper tool (shortcut I), click anywhere in the image, and then drag over onto the web page color you want. As you drag around, you will see that the foreground color in Photoshop’s tool palette changes to reflect the color you are over. Let go when you have sampled the color you want.
- Click on the foreground color swatch in the tool palette to open the Color Picker dialog. Write down the 6 digit hexadecimal color code (circled below):
Here is how to use the color in a Lightroom web gallery:
- In the Web module Color Palette, click on the background color, and when the color dialog box opens, click in the hex box and type the new number in. That’s it!
Once you have your web gallery designed, don’t forget to create a template, so that you can use the design again without having to start over from scratch. More on that in another post.