When curating the “work” page of my new website, I became frustrated with a few of the images in my portfolio. Not because I was dissatisfied with the design work, but because the images looked like how a lot of designers display their work. Angled shot. White background. Various compositions. These were great images, but I was left unimpressed and searching for a quick fix, rather than re-photographing each portfolio image. Ideally… I will re-shoot them on the appropriate background color from the start, but for now I have one tip that did the trick for me.
Colorize Background Layer
Though this may seem simple, I really think changing your background color to something besides white or light gray, will add a bit of interest to your work. For inspiration, head on over to Lotta Neiminen’s portfolio, and you will see what I mean. Her beautifully minimalistic work is showcased in such a thoughtful way through mockups, great photography and attention to composition. When your work is minimalistic, it sometimes comes across as dull. In order to highlight the beauty in her work, Lotta took great attention to how she displayed her portfolio.
Whether you are prepping a blog post with a stylized photo shoot, editing a photo for your portfolio, or creating mockups of your design work, attention to the background color will help round out the image and make it seem complete. For my portfolio, I developed a swatch palette group in my illustrator template, containing neutral background colors. This helped ensure consistency across my portfolio, and effeciency in my process.
Here is an example of a few color background swatches I used:
Adjusting the background layer in photoshop
If you have a photo that you would like to change the background on, I would suggest jumping into Photoshop. Here are a few steps:
01. Open file in Photoshop.
Make any adjustments to photo (white balance, levels, etc), until you have it just as you like.
02. Duplicate photo layer
and change blending mode to “soft light” on the top layer. Adjust the opacity of the duplicate layer to whatever looks best. There is not “right” amount here, just trust your eye on what feels right.
03. Create a new Hue/Saturation adjustment layer
(half-filled circle icon on bottom of layers palette).
04. Edit the layer mask
, by selecting the “Layer Mask Thumbnail" next to the “Hue/Saturation” layer. Using your brush tool, with the color black selected, color over the objects in the photo, leaving only the background color. (Note: there are so many ways to create a clipping mask… just use what is easiest for you!)
Another option is to use the Quick Selection tool first. Select the objects in your photo using the quick selection, then click “Select” > “Inverse” to select the background of your image. Once the background is selected, THEN you create the Hue/Saturation adjustment layer. It all depends on the photograph + what you are comfortable with.
05. Adjust Settings.
Now that you have a Hue/Saturation image for your background, you can adjust the settings to your liking. Sometimes it helps to select the “colorize” checkbox, if you want a pop of color. I like to keep it pretty neutral, so I typically take the saturation down a bit. Adjust the lightness, saturation and hue to your liking.
And your done! Pretty quick + painless, yet adds a bit of depth to your photo. You can see the before + after of my business card photo with the adjusted background color, in the graphic above. Subtle, yet makes a difference!