Studio in the Sky: Roger Reiman - Design

The Flags

Somewhere in the design process, we decided to incorporate the three unique flags that Roger Reiman won at Daytona. In order to use the flags as pieces of our design, they needed to be converted to a digital format that could be scaled, then dropped into the main panel renderings.

As I mentioned before, I work mostly using the Adobe® Creative Suite® of software. More specifically, I use Adobe® Illustrator® to create vector files and Adobe® PhotoShop® to create and manipulate raster or bitmap images. Perhaps it would be good to provide a description of the two different file types here, for those not familiar with the terminology.

Vector Graphics File - Adobe® Illustrator®

A vector graphic uses geometric primitives such as points, lines, curves, and shapes or polygons, to represent images in computer graphics. More generally, it is a graphic made up of fills and outlines that will retain smooth geometry when scaled to any size. (see vector image below)

Raster Graphics File - Adobe® Photoshop®

In computer graphics, a raster graphic, or bitmap, is a dot matrix data structure representing a generally rectangle grid of pixels, or points of color. More generally, a graphic or photographic image made up of colored dots. When you scale a raster image, the dots get larger, creating a sawtooth image. (see enlarged raster image below)

File Format Use

We need to keep in mind, how the final draft of the design will end up being used. If we intend to use a plotter to contour cut patterns or masks, we will need to create vector based files. If we only need to print the final design, we could use a raster or bitmap image file.

About the Flags

The only reference images of the flags that we had to work with, were the photos that we took of them at the Reiman Harley-Davidson Dealership. The flags are framed behind glass, so we had various reflections to work around. Below is one of those images.

In order to create a vector of the flag, I had to isolate each element so that I could open them in Illustrator®. I copied and pasted each element into a new PhotoShop® document.

I then deleted all the background that wasn't needed, and saved the files in the PNG format, which retains the transparent background.

In order to recreate the lettering used on the flags, I found the closest font that I could, and modified it to suit my needs. I opened the raster image created in PhotoShop®, and put it on the lowest layer. I then added a new layer over the original lettering which contained an outlined version of the "close enough" font. I used the transparency tool when I needed to see the original reference layer.

I basically did the same thing with the AMA Logo which will be used on all three flags. Note the split line in the image below.

For the black and white portions of the flag, I took a measurement of the actual black and white squares, and used that dimension to create a scaled version of the flag. By using the exact size, I was able to scale the lettering to the same points as on the original flags.

Above is the vector image of the 1965 Daytona 200 flag. Below is the vector file of the flag in the outline view mode in Illustrator®. Each element on the artwork is an outline that can be filled and or outlined with any color, then scaled to any size. This is the type of file required to do any contour cuts on plotter/cutter type equipment.

From here, I wanted to make the flags look like they were waving in the air, and give them some dimension. I started that process by applying a warp filter in Illustrator®.

I then saved the file in the PNG format, which produces an image only were there is color present, and the rest of the background remains transparent.

I opened the saved PNG file in PhotoShop® and applied warp, puppet warp, and displace filters to produce the 3D flag effects. The small grey square pattern that appears in the image below, is PhotoShop's method of depicting a transparent background.