When creating websites with dark backgrounds, colourful stylistic content really stands out – whether it’s photos, type or graphics. This is the technique used in real portfolios taken by hand to clients for years, so it’s no surprise that this should also be the choice for many when transferring their work online. This is certainly the case for Rogge & Pott Design, whose site uses a dark-grey background to show off its previous projects. Where this style really excels is the animated text header which pops up across the site. This has been done in Flash and uses the Add blending mode to create areas of brightness where the words overlap. The text animates in and out on different pages, depending on the navigation that is selected.
Animate your header titles
Blending modes explained
Blending modes can be a little tricky to understand although they are widely available in many creative programs that help us as designers. Here we reveal a bit of the science behind how they work.
01. Additive blending
Additive blending occurs when pixels that overlap have their values added to the colour of the pixels beneath. If enough colours overlap, the result will take the value up to white; this is the way light behaves too.
02. Subtractive blending
Subtractive blending is what happens when you mix inks or paint together: more and more colours will end up as black. The Subtract blend mode would be an example of this but Darken and Multiply are similar.
03. Overlay blending
This mode is a mix of the two. Light parts become lighter while dark parts become darker using an S-curve. This mode offers some really interesting results – particularly with overlapping images.