Even though web design uses all sorts of forms and elements—from text to graphics and video—everyone knows that photography is the dominant element, even across the vast web. Seriously, it's now hard to find a website without at least one photo or photo fragment. And it's no surprise. Photography has always held and will continue to hold a special place in our lives and, compared to illustrations, evokes stronger and deeper feelings and emotional reactions. That’s why, regardless of the website’s theme, type, or style, photography adds a sense of realism to the design and helps visitors feel that what’s shown or told on the site could be useful in their own lives.

We’ve already discussed how to choose photos, why sometimes it’s best to avoid them, and many other things—but there’s one more interesting point. Almost always, photos on websites go through artistic editing. In other words, web designers don’t just resize images—they also add some polish to match the website’s style and theme.

Photo Styles in Web Design

There are many photo effects out there, but here’s the thing: this becomes especially noticeable when you look at photos on a site and they all seem somewhat similar or only slightly different. In reality, there are few truly popular effects—but lots of variations. For example, the Vintage/Retro style can be used in many ways. A vintage effect might lean greenish, bluish, brownish, etc. The same goes for monochrome effects or muted color effects.

We’ll go over the most popular photo styles, where designers around the world use them, how to quickly and easily create them in Photoshop , and where to find convenient Actions.

Just so you know: we’ll be creating these effects using adjustment layers placed over the original image.

Vintage/Retro

Despite technological progress and modern culture, this effect remains one of the most popular across nearly all websites. Even if it’s not used on large homepage photos, it almost always shows up in smaller ones. The key thing with this style is that it doesn’t suit every photo—so you’ll need to experiment with colors and gradients to ensure the result fits.

Vintage and retro styles are typically applied to wedding websites, fashion/makeup, photographer portfolios, personal blogs, and travel sites. As for the content, it can vary wildly—from urban streets and buildings to nature scenes with animals, birds, and people.

This style usually features purple, blue, red, yellow, and green tones. At the same time, the whole photo gets a muted look that makes it feel aged or worn by time. Great examples of websites using this style include: Lobagola, Lunet Eyewear, South Tree, Life in Greenville, Pauline Osmont

Using Photoshop for Vintage/Retro Style

Open your original, bright, high-resolution photo in Photoshop and add an adjustment layer called Selective Color. Choose the black channel and reduce the slider to make the photo a bit grayer and lighter.

In the Neutrals section, also move the black slider to the left to brighten the whole image even more. This value should be greater.

Next, add a Curves adjustment layer and tweak the red, blue, and green channels slightly. Use your creativity here, but in general, reduce the color intensity where it’s too strong.

Now add a new adjustment layer called Gradient. Choose Linear style, set an angle (older photos tend to lose color diagonally), and pick a gradient that transitions from dark to mid-tone. The exact color depends on your site’s design.

Since the gradient covers the photo, set its blend mode to Screen and reduce the opacity.

If you think you’re done—think again. Add another Gradient layer, but this time use green-blue colors and set the angle in the opposite direction. Set the blend mode to Lighten and reduce the opacity even further.

To perfect the retro look, add another Selective Color layer and reduce the Yellow, Cyan (Photoshop considers Green as Cyan in CMYK), and Blue (a mix of Cyan + Yellow) tones.

Of course, by playing with tones and shades you can achieve many different results. But the basic process for retro-vintage effects remains the same. You can also add a worn paper texture. Then adjust Levels to emphasize creases and cracks.

You can download ready-made Actions from DeviantArt. There are tons available, for example: Example 1, Example 2, Example 3.

Muted Colors

Muted colors is another photo filter option that’s quite interesting and easy to create in Photoshop. The idea is to turn off certain colors and prevent them from playing an active role in the palette. This effect can be compared to the look of a dream or memory.

The key point is that by muting colors, we’re not removing them entirely. Otherwise, you’d just get a black-and-white or sepia version. Instead, the muted version is often used by artists and web designers as a base for retro effects, or even on its own.

Photos with muted colors are a great option when you need to use photos on a website but don’t want them in their full-color original form. If the site design is in light or pastel tones, then a muted effect is also a great match. As for topics, this works well for fashion and design sites, sports and culture, construction, and many others. For example: putzengel, Young and Hungry, My 356 Days in Print, P.O.C.

Muted Colors in Photoshop

Open the photo and add a new adjustment layer called Curves. Adjust the RGB curve as shown in the screenshot to brighten the photo slightly and tone down the sharpest colors.

Now add an adjustment layer Brightness/Contrast and slide the contrast all the way to the left (-50).

Create another Curves adjustment layer and tweak both the red and blue channels just a bit. If the curve is at 45 degrees, adjust it to around 40. The goal (depending mostly on your photo) is to reduce the intensity of red and blue. You’ll see this for yourself as you move the curve points. You can reduce green too. Use your imagination…

After that, add a new layer filled with Color, fill it with dark cyan and set the blend mode to Screen with opacity at 60%.

And now here’s a “before and after” comparison.

Overall, the fill color can be anything else—it all depends on your project’s color palette. A great set of options is available on DeviantArt.

Monochrome Effect

The monochrome effect has only recently become popular; it was used more rarely in the past. This style is suitable not only for photo decoration but for entire website designs. The concept of a “monochrome” effect is often confused with black-and-white. That’s incorrect. A monochrome look translates the image into a single color range—but doesn’t remove all colors.

This kind of effect helps the website stand out while making it easier to unify styles and colors for icons, interface elements, typography, and more. It’s probably one of the simplest styles—and looks better than just black and white.

Designers typically use violet, blue, or red for monochrome styles. Dark tones are often used instead of pastel ones and combined with muted color effects. The result can be intricate and interesting. Just be sure not to overuse the dark tones, or you’ll lose detail in the image (we’ll show this below).

Sometimes it’s compared to Duotone, but that’s not entirely accurate. Yes, they’re similar—but Duotone blends different colors, while monochrome stays within the shades of a single color. You can see this clearly in the DeviantArt examples.

Monochrome styles are used for university websites, art and illustration, business, e-commerce, and more. It pairs especially well with modern flat design trends. For example: Baesman, Building careers, Holm Marcher, La Pierre Qui Tourne

On DeviantArt, check out this collection of 50 effects.

Monochrome Style in Photoshop

Open your photo and convert it to black-and-white using an appropriate adjustment layer. Then reduce the Green, Cyan, and Blue channels, and slightly lower Magenta and Red as well. Follow the screenshot and adjust the sliders to watch your image shift into richer black and gray tones.

Important: These adjustments help reveal detail and eliminate white overexposure. Move the sliders around and you’ll see the changes clearly.

Add a Gradient Map layer—say, from burgundy to crimson. Again, stay within a single color family but use different shades. Set the blend mode to Multiply. It’s ready, but likely too heavy and intense for viewing.

Add a new Levels layer and slide the left markers to the right to brighten the image overall.

Now adjust the lighting by adding a Gradient layer with gray-to-white tones at a -90° angle. Blend mode: Overlay with opacity around 48–50%. You’ll see more detail and a top-down light source appear.

Now create a Color adjustment layer, fill it with white, set the blend mode to Hue, and reduce opacity to about 10%.

Here’s what we got from the original. This example is useful because the violet leaves were very dark— so we need to lighten them. Go back to the first adjustment layer Black and White and move the Green slider slightly to the right. You’ll notice how the leaf details start to appear.

This way, you can fine-tune the photo’s color balance and create an optimal version.

In Conclusion

Although we’ve only covered three photo effects, it’s best to experiment with different variations and what Photoshop has to offer. Of course, we didn’t dive into black-and-white styles or boosted contrast effects. They’re equally popular—but also easier to create. Besides, one of our articles is already dedicated to the Duotone effect.

Keep in mind that these settings are just personal choices—and applying the same setup to every photo is a big no-no. Each image has its own shadows and highlights, color shades and quantities. You need to "play" with all this to give the photo a new, fantastic look that not only fits your web design but adds polish and elegance to it.

And most importantly, don’t leave all adjustment layers at 100% opacity. Lower it and discover some stunning effects.