Constructing Videogame Pavilion

There were many factors to consider when deciding to build Videogame Pavilion. The digital archiving of magazines is long established when attempting to preserve the traditional magazine reading experience, but moving to the next step, creating a modern responsive web version of the content, required far more decisions as well as tools. This alpha launch of the site is focused on the next steps in terms of content and features, but the process demands scrutiny as well.

Beginning with a source magazine I needed to determine a baseline for the digital preservation process and how best to capture the pages. All of the magazines used for launch were staple-bound. I removed the staples and using an Epson WorkForce WF-7610 was able to scan facing pages thanks to its flatbed size. I taped black construction paper to the lid to lessen page bleed-through. I hand-placed each page and used a sheet of glass from an oversized picture frame to better flatten the pages. Using the included Epson Scan software in Professional Mode I scanned without preview at 600dpi, 24-bit color mode with the only adjustment being 133lpi Magazine Descreening. I then saved the scan in uncompressed TIFF format. Files were named to reflect the two pages scanned such as 001-084. Page numbers were aligned to printed numbers requiring some pages to use standard digital archiving naming conventions: 000 for pages before one, and 999 for pages after the final printed number. These were then supplemented with lower-case alphanumerics such as 000a for a front cover and 999b for a back cover.

Adobe Photoshop was used to edit the scans. To establish a baseline a sheet near the one quarter mark was loaded and trimmed as close to the dimensions eyeballed with a ruler as possible. Since non-perfect-bound magazines are trimmed to ensure a straight edge when folded and laid flat there really is no standard size but this process was used to create a template best able to represent equal-sized pages with inside gap, offset and other printing errors accounted for. With this template in place the main process of digital page archiving could begin.

Working with Pages

There were three steps in the page editing process: crop, straighten and place; digital repair; and final touches including exporting for web and archive formats. After rotating the initial scan and cropping to a single page with spare space on all four sides the ruler tool was used against a line of type on the page. Photoshop’s Straighten feature was then used as the typeset elements represent the closest indicator of the original layout artist’s design. On pages with no typeset component the edge of the page was used. Given the limitations of publishing tools of the era even horizontal and vertical lines cannot be trusted as indicators given they were usually added after-the-fact and without the precision of the typesetting equipment.

The cropped and straightened image was then pasted into the empty template and centered within its borders. Owing to the printing errors of the time pages could often be skewed after being straightened along the type so edges could leave gaps. To minimize the digital work when this happened the page might be pushed horizontally or vertically from the center to ensure the gaps were solid colors where possible. Stray specs and printing errors were then eliminated using Photoshop’s Content Aware Fill function and touched up with other tools when necessary. At this point a Photoshop document (PSD) of the single page was created still at 600dpi.

Working from this final edit the document was flattened and a batch of scanner-related adjustments were made after testing a number of magazine-scanning guides: Levels were adjusted to 13, 0.87 and 242; Brightness adjusted to 11, Contrast to -12; and the basic Sharpen filter was applied. The image was then resized to 300dpi using Automatic Resample and saved to JPG with compression set to 12, as lossless as possible, for use in the two archive formats.

There were a number of special cases that arose, the most common being facing pages. When this situation arose the two individual pages were edited and then combined as separate layers in a double-wide version of the template. The two pages were straightened on the horizontal and then their vertical edges aligned accounting for printing overlap or gap as necessary. When a gap was created it was filled using a number of techniques to recreate the source design.

Another common issue that received less attention related to color. Given the magazine ages and difference in storage quality there was page yellowing. In cases where the effect was minor attempts to even the page color were attempted while more serious cases were ignored as other colors would be disproportionately affected. Magazines of the day were printed using equipment far less precise causing many facing-page reconstructions to have slightly offset colors on the two halves. Despite different techniques available to rectify this issue none were successful is maintaining the full color integrity of both pages and thus were abandoned.

Owing to the needs of traditional archiving the magazines themselves will be open for donation to a brick-and-mortar preservation society at some point in the future. In addition, the original 600dpi TIFF scans will be made available as needed by researchers. The digital editing seemed the best common ground both for preserving the original magazine reading experience and the transfer of the digital assets such as ads and photos for use in the web recreations. In deciding to begin this project and decide on these standards and procedures other digital recreations of magazines were analyzed. Focusing on page straightening on type, 300dpi page images with standardized dimensions and repairing facing pages were the major departures from existing work.

After all pages of an issue were finished Photoshop was used to batch create 96dpi compression level 9 JPG thumbnails. The 300dpi images were also combined into a RAR file using WinRAR and renamed to CBR for using in comic book/magazine reader applications. These same images were also used to create an Adobe PDF file and saved using the standard Text Recognition feature for in-document searches. The PDF process occasionally would rotate pages slightly for the OCR process making the CBR format the closest to the original magazines and Videogame Pavilion’s intent.

Reimagining for the Web

Reproducing magazine content on the web requires many choices owing to the design and layout options available to print artists. As the focus would be on the words in the articles of these issues, a typical modern responsive “blog” article style was chosen. As the content would remain available as originally designed in the digital page archive files, readability and consistency were the highest priorities in designing a web game plan.

My work generally begins with a database and a rapid prototype but this project was specifically designed to take sources and styles and develop the data containers in response to the data entry. A page template was designed with a large feature image container, slide navigation control, and a responsive content area designed for easy-to-read line lengths and font sizes. Rather than attempting to reproduce each font and spacing choice of each magazine a standard with a few options would allow the site to retain its own identity. To handle the variety of header combinations layout locations were reserved for a column name/department, article title and author. Additional major and sub-header styles for the article lead were placed in the template. Each element was designed to allow for its exclusion as there is no standard for the inclusion of any of these beyond the article title.

A template for each magazine is then derived from this base design with that issue’s list of articles, publication date and other specifics set. Two variations of this template are derived, one to hold resource pages, the other for articles. These templates are differentiated by their included JavaScript and holder elements allowing for rapid customization of common elements.

In terms of typography body text would be serif while headers and captions would be sans-serif. To visually differentiate links I chose to go with font “boldening” over a color change. This approach seemed to be more organic but required finding an acceptable font with additional weights. I chose Garibaldi which offered Medium and Black weights, allowing regular linked text to be set at Medium and bold text set at Black. For sans-serif a font with many weights would be needed to allow a variety of heading cases to be handled. Verb was chosen because of extensive standard weights across multiple width designs. Text would be left-justified while headlines and captions would follow the choices of the original magazine.

For each article a folder is created and the graphical elements separated using Adobe Photoshop. Artwork, photos and screenshots were given filenames consisting of the page number and an escalating alphanumeric. These items could exist outside of articles (such as comics) and are separated into containing folders based on type. Each individual 300dpi graphic page is placed into a “pages” folder with the 96dpi versions placed into “thumbs”. Advertisements are also separated when not occupying full pages.

Using both the Adobe PDF text-recognition and ReadIris Pro for optical character recognition each magazine article was reconstructed in the text editor EditPlus. This raw edit was then used to create a Microsoft Word document to catch stray errors. Spelling mistakes and incorrect product references are maintained for archival purposes though “Archivist Notes” are inserted at times. The Word document is then passed back to EditPlus for insertion of HTML entities (smart quotes, ellipses, em-dashes, etc.) and final placement within the issue template. Standard navigation between articles exists at the bottom of each page as well as access to the raw full-page graphics. Using a combination of techniques all graphical elements can be expanded to the full browser page and manipulated by mouse or touch.

Once each article is completed the resource pages can be filled. Ads, Artwork, Photos and Screenshots contain an index of each element for the magazine. Where appropriate the element links to both the article it is part of and any games mentioned. In the “What’s Next” article I discuss Platforms, Companies and other potential elements for future linking, for now Games remain the only completed reference point outside of the publications themselves. As with the articles these graphical elements can be expanded to the full browser for detailed inspection. Each image is displayed at 96dpi on the page, and the full 300dpi version is used when full screen.

Three additional “Resources” pages exist: Pages, Platforms and Games. While Pages is simply a way to access all of the pages of a magazine individually, Platforms and Games were meant to be indexes of the videogame and videogame platforms mentioned through the issue. While these pages were constructed for a few of the issues, the design and utility seemed in need of discussion and were abandoned. Both of these pages (and other possibilities to be discussed elsewhere) will be finalized before the beta release of the site.

Database Transition

Even before starting this project I knew there would be a database. I could have easily started there but the vagaries of the publication led me to create as many assets as possible first to better imagine the design of the database. At this alpha stage the database remains only partially implemented to better understand the needs to finalize it.

Though the site begins with the videogame magazines, videogames themselves would always be the glue of the site. Following the creation of the resource pages a rough index could be compiled of all the games mentioned. With the goal of documenting videogame coverage regardless of release of a mentioned title there was still a need for backup reference points where possible. Starting with the combined Games list I used a variety of Internet search tools to validate, and where necessary, correct, the game titles. MobyGames is a site I’ve used for a long time so it was chosen as one of three “standard” reference points along with Wikipedia and The Arcade Museum. Links to pages on those sites when available were added to the root Games table in the database. To handle games with multiple names (either because of changes during the development cycle or alternate commonly known variations) the table GameAliases was added. In addition, GamePlatforms handles mentions of a videogame by the platform referenced with an optional alternate release title field. While tracking Platforms with the same detail as Games was planned, a number of factors (discussed in the “What’s Next” article) led to that section of the database, and site, being minimized. While each Platform receives a page on the site, links to relevant sources remains incomplete.

With the basics of the Games table completed, support utilities were created to allow re-rendering their web pages as needed. Videogame Pavilion was designed as a static site for both speed and due to the fact that supporting data would only change as more content was added. The result is a portable site with local tools for recreating and updating the content.

There are many more tables in the database to link Games to aspects of the magazine recreations including Ads, Artwork, Photos and Screenshots. Advertising required an additional step owing to the same ad appearing in multiple publications. The real-world advertising concept of “ad campaigns” became the central database concern, with links to related games tied to the campaign which is then tied to appearances in magazines.

To prepare for discussion on how to handle Games going forward two examples were prepared to show off additional details outside of the source publications. Looking at either the Frogger or Lock ‘N’ Chase pages shows this alpha release’s additions: Gameplay snippets, Documents (such as game boxes and manuals), Links (web resources outside of the three “reference” sites) and Videos. These additions also introduce the concept of GameReleases, an extension of the GamePlatforms table. Where GamePlatforms in concerned with the mere mention of a videogame being available for a particular platform, GameReleases cements the existence of a title on a particular platform through primary source material.

The alpha period will see more of the site’s components integrated into the database allowing for complete automation as well as preparing for Web Application hooks in the future.

Wrapping Up

Videogame Pavilion has been a passion project as well as a test of reverse-designing a data-driven web site. With so much of the information being contained in a non-web-friendly format I had the chance to test putting a design first and building a support database second. While at odds with my usual rapid prototyping development style I don’t believe I lost significant time due to this decision and I was able to share and get feedback on design elements while still automating the site.

Going forward database tools will be in place to partially change the workflow but remain within a templated design. As decisions are made to finalize the scope of the site these processes will remain documented to better reflect on the decisions.

I hope you found these details of interest in evaluating the site and look forward to your feedback.

Chris Rowley
(@vgbouncehouse)