Making of The Color Printer The author designed a poster based on John F. Earhart's 1892 treatise *The Color Printer* before creating the accompanying website, reversing their typical workflow. They recreated the treatise's color engravings as vector graphics to efficiently represent the colors, using Figma for layout due to its superior management features over Adobe tools. The project was inspired by scans found at the Internet Archive, which complemented each other to form a reliable source despite individual flaws. Making of The Color Printer By Nicholas Rougeux, posted on March 13, 2023 in Web /blog?cat=12 Unlike previous projects, I designed the poster based on Earhart’s 1892 treatise, The Color Printer before giving much thought to the design of the website. In fact, I wasn’t going to make a full digital edition but completing the poster made it so much more approachable and enjoyable. Working backwards My workflow for digital editions generally involves designing the website, building it, and then making a poster based on the materials and knowledge I gained while doing so. This time, I did the opposite because I wasn’t sure if a website would be interesting enough. I try to add something extra to each digital edition to enhance it beyond the original source material and early on, I didn’t have a good idea of what I could add to The Color Printer. In the end, the poster and website ended up influencing each other. Source material I first learned of Earhart’s treatise in August of 2020 when I was looking for inspiration after completing British & Exotic Mineralogy /mineralogy . In the years since then, I revisited it several times but never had the inspiration to work with it until recently. During my research, I found three sets of scans for The Color Printer—all at the Internet Archive and for reference, have numbered them based on the order in which they were found: scan 1 https://archive.org/details/colorprintertrea00earh , scan 2 https://archive.org/details/gri c00033125008234680 , scan 3 https://archive.org/details/colorprinter00earh . None of the scans was without its flaws but they complemented each other to serve as a reliable set of source material. Designing the poster The goal was to include all the colors Earhart created in the poster. His engravings for each set of colors full base colors, mixtures, tints, and overprinted colors were beautiful and made his treatise stand out from other, which typically used simple squares or rectangles. He designed these to showcase how a single color can take on different appearances based on whether it was printed as a solid color or with lines of varying thickness—also called half-tone, quarter-tone, and tint lines. Using these to represent the colors on the poster sounded like a fun idea but I didn’t want to spend the time photoshopping hundreds of the same image in different colors from the original scans. Instead, I decided to recreate each of the as vector graphic shapes. This way, I could more easily adjust the colors and have more control over the quality of how they appeared. The results turned out great and the line thicknesses had a similar affect on the colors as the original at smaller sizes: thicker lines made colors appear darker while thinner lines made them lighter. With these shapes created, I experimented with layouts. Early versions are rarely pretty but it’s important to start somewhere. Before I started sampling colors, I needed to determine if all the shapes could fit comfortably on a poster and a good layout quickly presented itself. A tangent about tools Again, breaking from previous workflows, I used Figma for the poster’s design instead of my usual tools of Illustrator and InDesign—probably the smartest decision I made for the project. I’ve been a slow adopter because of my long history with Adobe tools but have become more and more familiar with Figma in the last few years out of curiosity and professional necessity. For this poster, Figma was the only viable tool. I used Illustrator to create the color shapes because Figma’s vector editing still feels foreign and lacking but managing the layout in Figma was so much nicer than anything I could have hoped to achieve with Illustrator or InDesign. The shapes were highly detailed and with so many in one document, management and performance often becomes a serious issue with Adobe products. Illustrator could have probably handled it but InDesign chokes with too many vector objects that aren’t imported as external files. InDesign has useful styling capabilities but Illustrator doesn’t. Neither have the features like auto layout https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout , components https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma , or instance overrides https://help.figma.com/hc/en-us/articles/360039150733 like Figma. If I used Illustrator or InDesign, I would have had to create a hundreds of Illustrator files one for each shape and color and import them into InDesign. Then, spend a lot of unnecessary time arranging them into rows and columns with labels—something I’ve done many times for past projects. Even with InDesign’s spacing tools, this can be a painful process without something like auto layout because it’s very repetitive. Figma made this much easier because I made a component for each shape and used a lot of auto layout containers to keep shapes spaced evenly while I resized them. I made numerous spacing and formatting adjustments and seeing them automatically take effect made the editing experience very enjoyable. Plus, Figma handled all the complex shapes perfectly and performance never suffered. As someone who group up with MS Paint, I’m continually amazed at what’s possible—especially in a browser. I can only hope that if Adobe’s acquisition of Figma https://www.figma.com/blog/a-new-collaboration-with-adobe/ goes through, these useful features make their way into Adobe’s other products. That beautiful title After settling on a basic layout, I focused on the title for a bit. The original cover of The Color Printer had a ornate gilded title that was too beautiful to replace with a stock typeface so I set out to recreate it as a vector. Initial attempts at using Photoshop to create a raster graphic and Illustrator to generate a vector automatically were substantially subpar and they not suitable for use on a poster. Instead, I created a vector shape from scratch. The spirals were a bit challenging but I was pleased with the result. Colors The next hurdle was getting the colors right. Restoring antique colors is not an easy task—especially when attempting to restore printed colors in a digital medium. Since there wasn’t a single point of reference for how they looked when originally printed, I took some liberties to achieve a modern interpretation that is as true as possible to what I thought Earhart intended. The first plate for each of the three scans has base colors 1–12 that were mixed for all the other colors. A comparison between these showed that there were noticeable differences between them. Colors naturally age over time so the challenge was finding a way to restore these and all others consistently. I didn’t want to restore them to be too bright and vibrant but instead, retain a little of the antique feel to them while giving them more vibrancy. This meant that the same color adjustments I made to the first 12 should also be made to all the other plates because they were mixtures made from them. My goal was to use simple adjustment layers in Photoshop without manually adjusting individual colors. I initially liked the results from 1 the best but the green looked too teal and when the adjustment layers were applied to other plates, those colors looked too unnatural. I couldn’t get the green to look more green without negatively affecting other colors. The colors for 2 were so far off that I couldn’t find a comfortable set of adjustments to make all the colors look nice. The green looked better but the blues, yellows, and purple were far too bright and saturated. I finally settled on the colors from 3. They appeared closest to what I assumed Earhart would have produced but with a little aging still visible. The green is slightly less green than 2 but the rest of the colors aren’t oversaturated and appear distinct enough from each other. I thought a fun experiment would be to use Mixbox https://scrtwpns.com/mixbox/ to mix the 12 base colors based on Earhart’s mixture ratios to produce new digital versions of the mixtures. Mixbox is an intriguing color mixing code library that mixes colors digitally but as if they were pigments for printing. The results were interesting as illustrated below but were different enough from my own color adjustments in Photoshop that I decided to stay with my own. Looking at swatches of the colors I manually sampled from each scan, the differences between each one are noticeable. As a true test, I applied the adjusted colors from each scan to the poster and 3 felt the most natural. As an extra adjustment, all colors are set on a light cream background and have their blend mode set to multiply so they blended well with it and didn’t appear too bright against it. This process of sampling and applying colors was tedious because they needed to be sampled and applied one at a time but the work was worth it to find a set that looked best. Faux overprinting I couldn’t find a blending mode that accurately reproduced the effect of printing one color over another. Mixbox got close but not enough, so I also sampled each overprinted color from the scans. Each set of shapes representing overprinted colors was actually three separate shapes with no overlaps: two for the separate colors and one for the overlapping color, which was an intersection of the two shapes. The shapes for the separate colors are not the full shapes but the shape with the other subtracted from it. Test prints After what felt like endless adjustments an fine tuning, I ordered a test print of the poster to see if the details would appear okay and the text would be legible. I was pleased with the result but was also pleased to see that there was plenty of room to make most elements larger for legibility. So I bumped up the sizes of nearly everything, darkened the background color to make it more visible, and ordered a second test. Unfortunately, the second test came back blurrier than I would have liked, despite uploading what I thought was a high enough resolution 18000×16000 at 300ppi . It was clear there was some double printing so the problem wasn’t with the image I uploaded. I argued with Zazzle for a bit and eventually got a reprint. However, that still wasn’t great. I was about to give up hope and consider a redesign that didn’t rely on so many fine details but ordered one final test print—not of a raster image but of an Illustrator file. I exported an SVG from Figma, sized it Illustrator and uploaded that file to Zazzle. In hindsight, I should have done that to begin with but I didn’t because large raster images have worked for me in the past. Regardless, that did the trick and the final test print looked fantastic. All the details looked excellent as seen below. Designing and building the digital edition While waiting for the test prints to arrive, I mulled over the idea of creating a complete digital edition. Considering I had all the assets from the poster and the treatise was relatively short at around 230 pages, I figured it could be a nice side project to accompany the poster. Once again—breaking my pattern of thinking the reverse: that the poster would accompany the digital edition. Organization Earhart’s treatise only comprised a handful of chapters and 90 numbered plates of illustrations. Other illustrations were scattered throughout the text. The plates were spaced unevenly throughout, requiring the reader to do a lot of searching to find the plate being referenced. One goal for the digital edition was to place plates and illustrations where they were referenced in the text so they were easier to examine in context. Another was to consolidate some of the shorter chapters into single pages. I organized the book into five sections: Colors & Mixtures /color-printer home page : Introduction to the project that also contains the full lists of mixtures, tints, and overprinted colors from the first part quarter of the book. Complementary Colors /color-printer/complementary : A shorter chapter with optical experiments for determining which colors are complementary. Harmony of Colors /color-printer/harmony : The longest page with guidance for determining which colors work harmoniously when printed and a complete list of all the plates and their illustrations. Combinations /combinations : A complete list of the 3,600+ color combinations listed near the end of the treatise with added color swatches. Printing /color-printer/printing : A combination of the shorter sections at the end of the treatise covering job composition, printing presses, rollers, inks, papers, tail pieces, initial letters, and embossing. Typography For page titles and headings, I chose DM Serif Display https://fonts.google.com/specimen/DM+Serif+Display to complement the original decorative title. They are never very close to each other in the design so the similarities don’t clash but instead, it carries the title’s elegance throughout. Bitter https://fonts.google.com/specimen/Bitter was used for body copy, both large and small, because it felt like a nice modern interpretation of the original typeface used. Its large x-height and thin weight kept it nicely legible for large blocks of text and I enjoyed the little bit of character in its italic style. Figure captions and asides were set in Alegreya Sans https://fonts.google.com/specimen/Alegreya+Sans —a typeface that quickly became one of my favorites along with its related families when working on Iconographic Encyclopædia /iconography . It’s old style numerals and great legibility at small sizes made it complement the other typefaces nicely. Reusable shapes Having created most of the necessary shapes for the poster, I wanted to find a way to use them efficiently online. The best approach I found was to use SVG symbols https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol where each shape defined in a single large file. To achieve this, I combined all the parts of a shape in Illustrator into a single compound path. Every stroke was outlined so it would scale to the size I needed and clipping masks were used to slice shapes. The final compound shape was then exported as an SVG and put into a symbols.svg file with the other shapes. Each path had a currentColor value added to the fill so it would work with the color I assigned it in the CSS later on. The values were extremely long due to the complex shapes but ended up being about the same file size as if I exported the shapes as an SVG without converting them to compound paths. The great part about this approach is it gave me a single place of reference for all shapes instead of loading separate files or trying to inject a large amount of SVG code into my pages. Each symbol was then referenced using a simple HTML snippet: