7. Working with images (p. 174)
Bad photos will ruin a design.
Use good photos
- hire a professional photographer
- use high quality stock photography Unsplash
Text needs consistent contrast
The problem with background images
Add an overlay
Add semi-transparent overlay = background-color: hsla(0, 0%, 0%, .55);
Lower the image contrast
Lower the contrast of the image itself = brightness: +40% + contrast: -70%
Colorize the image
Create this effect in 3 steps:
- lower the image contrast
- desaturate the image
- add a solid fill, using the multiply blend mode: color: #035581 + blending mode: multiply
Make a background image pair with the existing brand color.
Add a text shadow
Use a large blur radius with no offset:
- text-shadow: 0 0 50px hsla(0, 0%, 0%, .4);
Everything has an intended size
Don't scale up icons
Try enclosing them inside another shape and giving the shape a background color.
Don't scale down screenshots
- take the screenshot at smaller screen size & don't shrink it as much
- partial screenshot that take less space
- draw a simplified version with details removed
Don't scale down icons, either
Redraw a simplified version of the logo
Beware user-uploaded content
Control the shape and size
Make the image a background image with background-size: cover;
Prevent background bleed
- use a subtle inner box shadow = box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 0%, .2);
- use a semi-transparent inner border = box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .1);