One of the most appealing feature of the Twenty Seventeen theme is the full-screen header on the front page. Out of the box, the theme displays the above image of a cactus as the default header image. Even though I like this picture, it makes sense to swap it out for something that fits my blog, something that will grab the attention of arriving visitors.
Twenty Seventeen offers several ways to accomplish this. I could set my own, personalized header image, or upload several images and choose to Randomize Uploaded Headers. If I were to use the latter option, the theme would pick – randomly – a different image each time the page is loaded. Alternatively, I could choose to have a video that would automatically play silently in the header area. Importantly, if I were to use the video header option, I would still have to add a regular image as a fallback1.
Although the randomize option would make my site a little bit more dynamic and the video option would bring my site to life (according to the theme authors), I decided to set a single header image – at least for now. Which (representative) image should I use, though? As opposed to what happen during my logo designing process (see CogitActive logo – a first sketch), inspiration was in the air this time. Given the nature of this blog (of which the tagline is The making of CogitActive and beyond
), the idea of a blueprint was a no-brainer.
What is a blueprint?
While a blueprint can be defined as a guide for making something (hence my idea), the literal meaning of a blueprint is a design plan or other technical drawing. Like me, you may have seen some in movies, especially in heist ones. These detailed floor plan drawings characterized by white lines on a blue background are indeed blueprints.
They were widely used for over a century for the reproduction of specification drawings used in construction and industry
2. The reproduction process, called cyanotype, was invented in 1842 by Sir John Herschel and later used to copy large architectural and construction drawings. It was indeed a simple and low-cost method for reproduction of original drawings.
Briefly, the procedure consists in sensitizing a paper with a solution of ammonium ferric citrate and potassium ferricyanide. The original plan, drawn on translucent paper, is placed on top of this sensitized paper. Upon light exposure, the light sensitive chemical turned into a blue dye (ferric ferrocyanide) known as Prussian blue; the original drawing prevents this reaction to occur by blocking the ultra-violet light. The exposed paper is then washed in water – in a place protected from light – to remove the unconverted coating. This produces a negative image, with the original drawing appearing in white against this blue background.
According to Wikipedia2, traditional blueprints became obsolete when less expensive printing methods and digital displays became available
. Yet, the term blueprint continues to be used to refer to any type of plan.
The correct blue
Even though the process is still used for special artistic and photographic effects
2, I didn’t intent to transform my home in a chemical lab. Instead, I decided to create a blueprint-like illustration using Inkscape. As I was already using this software for my other illustrations, I didn’t bother searching which of vector graphics or raster images was the most appropriate for that purpose.
My first step was to set the color for the blue background. I thought this would be straightforward; I would just have to figure out the RGB color values of Prussian blue (i.e. 0, 49, 83), or its hex triplet equivalent (i.e. #003153). However, it turned out that this specific blue was very dark; nothing like the blueprint color I had in mind. Some articles about the cyanotype procedure were also referring to a “deep cyan-blue color” (53, 103, 137 or #356789). There was also this Pantone 19-3939 TPX color, named Blueprint (46, 53, 97 or #2E3561), but again not what I had in mind.
#003153
#356789
#2E3561
Not happy with any of these colors, I sought to find an “official” color for blueprints, but not to avail. Therefore, I started to index the colors used by others in their blueprint-like graphics. None of which were satisfying, though; with maybe one exception (19, 92, 151 or #135C97). When I applied the same strategy to “real” photographs of blueprints, however, I identified a color matching what I was looking for (34, 64, 136 or #224088). Few minor adjustments later, I was finally settling on my background color: 37, 63, 140 or #253F8C.
#135C97
#224088
#253F8C
All colors are not created equal
In my quest for the “perfect” blueprint color, I also realized that colors are not the same from one computer screen to another (even with the same display settings). I will cover this complex topic in the future; but for now, just keep in mind that the colors you see are most probably different from what I see.
Erroneously, I thought that using web-safe colors would fix this issue and that they will look the same on any computer
. In my defense, the name is misleading. Fortunately, I didn’t abandon my #253F8C color for the closest web-safe color, namely #333399. In fact, if I had to choose a web-safe color, I would have probably chosen this one instead: #000099.
#253F8C
#333399
#000099
What are these web-safe colors anyway? They emerged when computer displays were limited to 256 colors. A set of 216 colors was selected to make a standard color palette that would be supported by the majority of popular web browsers and operating systems at the time. Nowadays, most monitors support millions of colors, and the use of web-safe colors is no more required. Besides, as alluded earlier, computers (or other devices) will not display each of these colors in the exact same manner, anyway.
Granted, it took me forever to find this blue and at the time of this writing, my header image is nothing but a blue background. There is no blueprint yet! For an idea of what it would look like, here is a completed version.
1 The image will be used as a placeholder to display while the video loads, as well as on the other pages of the website (i.e. not the front page), where the header area is much smaller. In addition, the video will not be displayed on smaller screens (e.g. phones). ^
2 According to this article from Wikipedia. ^