Creating a modern, appealing web page with duo tone images

Our client Lyfeproof asked for a new page on their site showcasing one of their new programmes “Arts4Lyfe”, specifying that this page in particular be aesthetically different to the rest of the site. It had to look modern, youth orientated and visually appealing.

We took inspiration from Spotify’s new brand identity design as inspiration, the duo tone effects communicate a youthful image.

The image is stripped of it’s original colors, and the gradient map applied blends the monotones for an illusion of color.

 

 

We picked a few applicable modern feeling fonts to use on the page (Open Sans, Roboto) and got to work creating the images.

Having the subject on a blank background is essential to the effectiveness of duo tone images. The blank space allows room for easily readable text.

Our first problem was that the images weren’t taken with a chromakey with studio lighting like the ones Spotify used. From albums of photos provided we chose the best images that we could extract from a background.

We took this photo of a bassist and used the polyganal lasso tool to carefully cut out a the edges, then used the “refine edge” feature to extract it to a new layer.

 

 

With the image extracted from the background, we used the gradient fill tool to draw the user’s attention to the center of the page that it will be placed upon. Fading in with a subtle grey from the bottom of the image. Making the bottom where the image is cut seem less jagged.

 

 

The next step was as simple as adding a gradient map mask layer in photoshop. We used a purple to accommodate the dark tones, and a bright orange to represent the brighter tones.

 

 

As you can see, this powerful effect is incredibly easy to produce, you can see how it looks on the page below

 

 

This was among other duo tone images we produced for the project, view the full website here

 

If you are looking to create a duo tone image yourself, this video tutorial may be helpful