Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Use Photoshop to create cool consistent imagery

Photoshop is a key player in the photographic techniques utilised across, learn how to use it to its full processing potential here

Consistency is key


On a website where photography is integral, the images had to be processed seamlessly. This involved a keen eye and stages of Photoshop work, as account strategist Brent Summers confirms. “That’s why the pictures all play well together even though they’re sourced from literally hundreds of photographers around the globe.” Over the next few steps art director Jessica Moon describes the basic principles applied to making’s imagery look consistent.

Selection and composition


Great feature photography starts with selection. Before choosing, consider what’s best for the brand and what the audience will respond to. For we wanted photos that evoked a visceral reaction: vivid colours, interesting subject matter, and a human connection wherever possible. The first stage is cropping to fit a container. Consider it in context of the other UI elements surrounding it. Will text be overlaying it? Where on the screen will the user’s attention be? Make an ideal photo crop with the context available.

Blend in photo styles


Next comes adjustment of the photographic style to match the site layout and other photos used elsewhere. In Photoshop, a simple color overlay can go a long way in helping accomplish this. Begin by opening the Layer Styles of your photo and navigate to Color Overlay. Here we’re changing the colour of the overlay to a soft slate tone (#606167). Afterwards the Blend Mode is set from Normal to Exclusion before reducing the opacity of the Colour Overlay to 30 per cent or so.

Add additional polish


Depending on the photo’s contrast and the UI elements that will be surrounding the photo (like typography), more or less opacity may be required in the Colour Overlay. You can also experiment with using other colours to bring out different attributes in the photo. Try adjusting warm and cool colours to fine-tune your photo’s appearance. Once happy with your styles, hit OK on your Layer Styles and save/export!