eyelearn.org

applied art for the web

working with background images

A look at the planning and preparation of the visuals for the tutorial “Get to grips with CSS3 multiple background images”, written for Net magazine’s website (now part of creative bloq).

download slides

opening slide: beautiful textures
steps summary: files, sketching, patterns, illustrations
preview of 404 page design
files and folders
vector vs bitmap example
sketch of graphics
sketch highlighting graphic elements
digital sketch highlighting graphic elements
mockup highlighting graphic elements
tiling textures
tiling textures: layers and hue/saturation settings
clouds as example of long editing required
clouds as example of long editing required, tool suggestions: clone, healing + patch
gradient via horizontal repeat
shadow via vertical repeat
tartan patter, repeat both ways
repeating illustrations, top of design
repeating illustrations, bottom of design
monochromatic sample: symbolicons
design with outlined elements in place
final design

Let’s work through the setup of the final webpage together :)
read tutorial [on creativebloq.com]
download source images | view final design

Don’t forget to check your page across browsers – and if in doubt, always check caniuse.com for detailed and up-to-date information on browser support.