Eurocamp Brand Images

Image Library

Image Sizes & Ratios

Image sizes

The image above shows proper sizing for images across the site.

Download .PSD    Download .PDF

Image Ratios

For simplicity, 16:9 image ratio has been chosen to best fit most flexible situations. Some components work best with other ratios, and 4:3 is common across the site too. But as a rule of thumb, 16:9 will fit all mediaboxes, half width promo banners and galleries best.

However, feel free to break the rules.

When desigining around content, without resizing images to fit, you’ll be left with a lot of white space. See the image above for a prime example.

Image Optimisation

Image Treatments

There are hundreds of beautiful images in the Eurocamp Image Library, shot superbly by our photographers. But used in context, benefit from a gentle nudge to bring out the depth and vibrancy hidden away in there.

Instead of using preset actions, which look as bad on one shot as it will great on another, just do it yourself.

The most simple (and non-destructive) way in Photoshop is to:

  1. Place the image in your file, make sure to mask using a layer group or shape layer - this makes sure any blur you add wont feather the edges.
  2. Right click the image - Convert to smart object ( if you didn't import it this way).
  3. Add your adjustment layers - CURVES & VIBRANCY. Start bold and tame it back.
    1. Don't oversaturate the colours, add vibrancy not a rainbow.
    2. Vibrancy will bring out colours you don't want, use the curves channels to bring them back in line.
    3. Curves RGB channel - try using the slider to add contrast and depth, and the curves line to re-balance overall. You'll only need a light touch, don't oversaturate, aim towards brightness on a sunny day.
    4. Re-order the curves and vibrancy layers in the layers palette. They affect each other, so see if you prefer it, or re-adjust.
  4. Add a gaussian blur filter to your image. As it's a smart object it's non-destructive.
  5. Select the smart filter mask icon in the layers palette and using the gradient tool (on black-to-white colours) draw a gradient across the image; masking some of the blur, adding whimsical smoothness and depth of field to the shot.
  6. Be selective with the blur, it's not always required if the shot has nice depth of field. Retain focus on the right areas. Settings of 3 work well for smaller images and 8 for larger ones.

Compression

There are hundreds of beautiful images in the Eurocamp Image Library, so please don’t compress the life out of them.

Keep an eye on the comparison window in your image editor, start compression on maybe 80% and take it from there, reducing until it’s noticeable, then back off a bit.

Some general rules of thumb are:

  • Large hero images (incl. two-thirds width) = 100kb max
  • Half width = 50kb max
  • Third width = 35k max
  • Quarter width = 25k max

Seeing a pattern here? Of course if you have a third-width image (for example) with lots of detail and colour, it’s going to get pretty pixelated, pretty quickly, so use discretion if it’s an important image, or extra compression if you’re going to have heavy imagery on the page.

If you use photoshop ‘Save for web’ feature, they could probably use some extra lossless compression through third party software like Imageoptim for Mac or the Punypng web service for PC.

Image Collages

Image collages are a great way to show breadth of a subject. They are often best used at the top of a page or next to a large section of copy.

Using a mix of plain imagery that has solid areas of single colours along with detailed images is recommended as this helps the eye move around the collage. Close up shots mixed with distance shots aid this styled look.