Image sizes
The image above shows proper sizing for images across the site.
Eurocamp Brand Images
Look at things with a new perspective. Below are four points to think about when sourcing and using imagery:
- Is it an honest and uncluttered portrayal of the subject?
- Will people find it relevant, involving and engaging?
- Is it graphic in its simplicity?
- Does the shot have a filmic look using depth of field?
*Text taken from the Eurocamp brand book V2 Download printable version
Take a look at the brand book for inspiration about how best to use images in different situations.
Image Library
All eurocamp brand images can be found in the County image library at the following URL.
Access is granted by password request from Emma Davies
emma.davies@eurocamp.co.uk
Image Sizes & Ratios
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:
- 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.
- Right click the image - Convert to smart object ( if you didn't import it this way).
- Add your adjustment layers - CURVES & VIBRANCY. Start bold and tame it back.
- Don't oversaturate the colours, add vibrancy not a rainbow.
- Vibrancy will bring out colours you don't want, use the curves channels to bring them back in line.
- 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.
- Re-order the curves and vibrancy layers in the layers palette. They affect each other, so see if you prefer it, or re-adjust.
- Add a gaussian blur filter to your image. As it's a smart object it's non-destructive.
- 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.
- 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.
Selective JPEGs in Fireworks
The fireworks engine also allows you to create a ‘selective jpeg’, which allows you to mask a certain area of a image and increase it’s quality output. This is particularly useful when you have solid colours within a details photograph, or overlayed withing a photograph.
- Select the area you wish to have a different optimisation quality, using the lasso or marque tool.
- Click Modify / Selective jpeg / Save selection as jpeg mask.
- Adjust the values in the optimise window to the desired result, and then click File / Export
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.
