Roger Reiman - Design - Part 4

Font Choices

In this post, I would like to explain the process I go through to choose the appropriate font for my design projects. There are literally thousands of different fonts available for design software programs. Like any topic, there are many different approaches to picking what works best for your project. I would like to outline my approach here and let you decide if it works for you or not.

I started doing logo design several years before the computer was used for the task. I learned to design my own lettering by looking through a Letraset catalog, picking a font, and then drawing them out by hand in non-repro blue pencil. From there the art and lettering was inked by hand and turned into black and white camera ready art using a vertical process camera. It was fairly tedious, but it also allowed me to create very original designs.

At that time, I worked for a specialty advertising firm that sold a lot of screen printed garments. I created logos and T-shirt designs for everything from bank presidents to bikers. I learned very quickly that picking a font for a bank is much different than picking a font for a road house! 

Each font has it's own character and can make a certain impression on the viewer. Recently, a PowerPoint presentation was given that used the font Comic San to outline the discovery of Higgs Boson. Comic Sans might be appropriate for a day care center (maybe) but not if you want to be taken seriously. When asked why they picked that font to present the discovery, the CERN presenter said..."because I like it." Just a bit of a tip, this approach is problematic, because it places too much importance on individuality. A decision based solely on personal choice does not involve the thought process required to make appropriate and successful design decisions.

Narrowing the Search

The heading above makes me chuckle a bit when I think about the process I am about to explain! I have just over 2400 individual fonts on my computer. I have a font viewer program that allows me to go through each font and see the word(s) I am trying to set in each font. I also use the website www.fontshop.com to browse their font library. Fontshop.com has the same feature that allows me to see all their fonts in whatever word(s) I am looking to set. Fontshop.com has 3,387 families of fonts which total 12,929 individual items, in the display font category alone.

So, I usually search though both my computer's font viewer program and Fontshop.com's library of fonts to find the best solution for the design I am working on. That equates to scrolling trough about 15,000 fonts. You might ask yourself, what exactly am I looking for? Well, I am looking to fill certain parameters specific to each design or element of a design.

For instance, I wanted the Roger Reiman name used on our mural to be very bold and easy to read while approaching at 25 m.p.h. in a vehicle. It will most likely be the first element of the mural that will catch the viewers attention. I didn't want the font to be identified with a particular period of time. Even though Roger Reiman is remembered for his many accomplishments in the 1960's, his career spanned up through the 1990's. 

Early in the mural design process, I kept picturing the type of lettering I remember seeing on high-performance automotive parts packaging. I also looked at motorcycle racing posters from the 1960's to the present day. But I kept going back to things like, NGK spark plug packages, GT-1 Racing Motor Oil, etc.

With all this in mind, I start working through my 15,000 font search. When I see a font that fulfills the parameters, I write down it's name or do a screen capture, and save them all in a folder.

I then assemble as many of the individual fonts into an Adobe® Illustrator® letter sized page that I can. I can now save this page as a PDF so it is ready to send to client if needed. I try to narrow the initial search to four or five pages of lettering samples. In this format it easy to see that only about half of the fonts chosen will actually be something to consider moving forward with. Here is one of the pages I put together for the main name panels during the exploration. 

I picked a couple of fonts from these pages and played around with some blending option in PhotoShop®.

I ended up choosing a font that I had in my system called Race 1 Eternals Chiseled Normal. The image below shows the original font and the steps or layers that had to be added to achieve four color chiseled look lettering. I knew I was going to eventually need all the colors on their own layer, so I took the time to vectorize each color or layer needed.   

Here are both names set in the selected font, with all the layers and color effects applied.

Script Font

In the original sketch that I created, I thought I would use a script style font for the secondary type.

On the first draft of the design, I added several phrases that express major highlights from Roger's life. As the design evolved, I was able to reduce the number of phrases on the mural by introducing them in other elements. The 3-time Daytona Winner phrase will now be expressed in the painted flags above the name panels. I explained the flags in more detail in Part 3 of this Design series of posts.

Initially, I choose a hand-lettered style of script because it has been used on many types of race vehicles for several decades. The forward slant and flow of script expresses the feeling of speed and movement. Once again, I went through the process of reviewing several thousand different script style fonts.

The script used in the mural sketch above is called Sarah Script and it was designed by Charles Borges. 

In the end, we decided to design a totally original hand-drawn set of phrases. Ted Turner, the project co-leader, is in the final stages of rendering the new phrases.

Just a bit about the colors we are working with for the lettering. We were thinking of introducing some kind of gold leaf element to the mural design. George Sedlak was known for adding various styles of gold leaf lettering to Evel Knievel's helmets, and motorcycle paint jobs, so we decided to add gold somewhere. 

The name panels are to be painted with base coat/clear coat automotive paint. We intend to use metallic base colors which will hopefully give a finished color that resemble and match the gold leaf. The script lettering will use some of the colors pulled from the main images. Most likely warm white, orange, and black.

In the next installment, we will talk about some of the final design decisions and perhaps unveil the final Roger Reiman Mural Design Concept.   

Roger Reiman - Design - Part 3

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.

Rinse and repeat for all three flag designs.

 

In the next post, I hope to start putting all the elements of the design together.

 

    

Roger Reiman - Design - Part 2

Design Setup

Time to start getting serious about the overall mural design for the Kewanee Walldogs - Roger Reiman wall. In my last post, I attempted to explain the process of design. It is now time to see if we can apply those principles to this project.

In an earlier post, I made a long list of accomplishment from Roger's life that I hope to express in the finished design. I will repost them here so we can use them to inspire possible design solutions.

• Born in Wisconsin Rapids, WI on September 11, 1938.
• Began riding motocycles at age 9.
• Qualified for his first AMA Grand National race in 1958 - Peoria, IL.
• Close relationship with Mother, Father, Sister Shirley, friends, and fans. 
• Father, Henry "Hank" Reiman was a former AMA Hillclimbing Champion.
• Ran his first Daytona 200 on the old Daytona Beach course in 1959.
• First national podium finish, 3rd place - Laconia, NH road race- 1960.
• Led laps in the last race held on the old Daytona Beach course - 1960.
• Won the first Daytona 200 held at the Daytona International Speedway.
• Also won the pole for the 1961 Daytona 200.
• Made guest appearance on NBC's "Today" show for his 1961 Daytona win.
• Given a parade and key to the city of Kewanee, IL for his 1961 "200" win. 
• 3-time winner of the Daytona 200 - 1961, 1964, & 1965.
• Went on to race in the Daytona 200 a total of 16 times.
• Ranked in the top 10 of the AMA series in 1962 and 1963.
• Won the AMA Grand National Championship in 1964.
• 14 Top-10 finishes of the 1964 17-race season.
• 1965 - Reiman won the only only Daytona 200 to be run in the rain.
• Reiman continued to race in the Daytona 200 until 1974.
• Took over the Family Harley-Davidson Dealership in 1970.
• Became the Head Mechanic for Evel Knievel - 1970.
• Raced in the "Battle of the Twins" Series - 1984
• Continued to race in Vintage series throughout the 80's and 90's.
• At 50, earned a podium finish - 1987 "Battle of the Twins" - Elkhart Lake, WI
• Was killed in a track accident in a Racing Legends event in Daytona - March 4, 1997

From our research, we managed to put together a good selection of images to draw from. I thought I would use these images to basically "sketch" my ideas into the scaled down art for the wall.

First up, I have to decide what scale will work best for this rendering? One factor to consider here is how large I want to make the maquette. Usually the organizers of the event ask each artist to create a maquette of the design, which will be included in a fund raising auction that takes place during the Walldog event.

The panel size for our wall is 12' high x 40' long. If we use a scale of 1/2" = 1' - 0", our maquette will be 6" tall x 20" long. This might be a good size to work on as far as computer screen size, but it might be rather small for an auction item. So, we will set up our file in the 1/2" scale, and resize it later to 1" = 1' - 0" for the auction maquette. Our auction maquette will then be 12" high X 40" long.

I will be using the Adobe Creative Suite to lay out my design. More specifically, I mainly use the PhotoShop and Illustrator programs included in the Creative Suite. You may use whatever software works best for you. Or work by hand, whichever you prefer.

In Adobe PhotoShop, I set my file up at 6" X 20" and use a dpi that will produce good results when it comes time to get the design printed (if necessary). I like to work above 200 dpi, but usually do not go above 300 dpi, to keep file size manageable. So I will be using a setting of 250 dpi for this design.

I start by placing various images into the PhotoShop document that I created. I can move them around as needed while trying to create a composition that makes sense. I decide whether to use the background or delete it. While exploring the collection of images, I am mindful of the goal of depicting the major accomplishments of Roger's life. 

First Sketch

This sketch manages to include several major aspects of Roger's life, from the list I posted above. I've added a few phrases to drive home or reinforce the reference of certain images.This first sketch, at the very least, gives us something to critique and move forward from.

The images in this sketch are arranged in a chronological order for the most part. Oldest images on the left side, moving to the most recent images, on the right.  

One thing to keep in mind while doing the design for a Walldog event, is the time you have to paint this project. Usually the project is to be painted during a 3 or 4 day event. It is also good to think about who will be helping to paint the mural. If you are trying to paint a fairly realistic looking pictorial, you will need veteran mural painters. If you are working with novice painters, you will need to simplify the design. Or use a combination of both.

One way to accomplish a mural design that is easier to paint, is to posterize some or all of the images to be used in the design. This can be done in several different ways, but I'll leave that up to you and the type of software you are using. Or you can do a simplified hand painted image and translate that to the finished design of your mural.

The image I used in the upper right hand corner, has been posterized in Photoshop, and uses fewer colors, and paint like "blobs" to simplify the details.

The Rest of the Story

You'll notice that I don't have Roger's name on the main panel design so far? In one of my recent posts, I mentioned the extra "negative space" that will be left above our main panel. We are using a wide rectangular main panel, but have space to utilize above the mural if needed. 

The image below shows how the 40 foot panel will look as you drive up to it. As you can see, there is a lot of empty space above the main panel. 

We decided to fill the space, by adding Roger's name above the main panel section.

While generating ideas in a design, it is common that one idea will spark another idea. Once I saw the name above the main panel, I decided it could use a bit more. I decided to add the flags above the name, to represent the 3 times that Roger won the Daytona 200 race. It would also allow me to remove the "3-time winner" phrase in the upper right corner, which would simplify the design a bit more.

As far as picking out which fonts work best with the design, I think I will go over that in more detail, in a future post. For Roger's mural design, I started thinking about fonts that might have been used on packaging from the 60's and 70's. But I didn't want to use a font that was tied too specifically to one decade, because Roger's career spanned several decades. I was sure that I wanted it to be bold, and as timeless as possible.

I then did a little more refinement, and made the font a bit more prismatic. I also started to think about adding gold leaf to the design, so I shifted the colors of the lettering to look like beveled gold leaf.

About Those Flags

In the research phase, we discovered that Roger had received a unique flag from each of his Daytona 200 wins. Best of all, his Friend Dennis Packee, had these flags on display at the Reiman Harley-Davidson Dealership in Kewanee, IL. We were able to make a run to Kewanee, and get pictures of each flag. 

Here is a photo of the flag Roger won at the 1965 Daytona 200 race:

In the next post, I'll explain the process of taking the flag above, and turning it into something we could use in the next iteration of the design.

   

       

Roger Reiman - Design - Part 1

Design 101

Now that we have our mural location assigned, measured, and scaled, it is time to get serious with the mural design phase.

Design is a process, and the primary purpose of design is to solve a problem and then create a solution. It might help to keep the following quote in mind when thinking about design….."Your first design may be the best, but you won't know until you can't find a better one."

The process described below is loosely based on the standard followed today in the graphic design industry. The important thing to remember is that there is no absolute right way to design a mural. I suggest you take what you need from this post, and leave the rest.

Basic Design Development Process:

1. Research the Topic

2. Produce a Series of Thumbnail Sketches

3. Think about Composition and Scale

4. Sketch Comps

5. Finalize Comps

Design Constraints

Before you start laying things out and jumping into a design, you need to understand what the specifications are. These are the details of the final piece you need up front, before you begin any design work. For example, What is the size of the wall or panel to be painted? Is there a certain era or time period which needs to be depicted? What type of paint is going to be used? What is the skill level of the painters on this project? What’s the budget? Is there a budget? 

All of these considerations are going to be the rules or guidelines you must work under. You really don’t want to start designing before you get all the details worked out, because once you’ve jumped in, it can mean starting over if a critical spec is missed. If you have designed for a set of specs and then try to modify it to fit all new specs later, it almost always compromises the strength of the design. Better to know all the specs up front.

In an earlier post, I covered the topic of ideation. I showed a few basic sketches that I came up with once I was given the mural theme. At that time, I was basically kicking around some basic ideas, and couldn't take them any further without being provided the detailed specs for this project.

Step 1 - Research the topic... 

Through our research phase, we discovered that Roger Reiman had left an incredible legacy during his lifetime. If you refer back to the ideation post, there is a long list of accomplishments that we discovered in our research.

Our challenge, is to include and express to the viewer, as many of these elements as we can, in our final design.   

Step 2 - Produce series of thumbnail sketches 

Sketch like crazy. You may think you have the best, most original idea ever once you get your project assignment or have your specs, but please do yourself a huge favor and sketch several ideas out first. More often than not, each idea you get done, inspires other ideas and directions. Do at least a page of sketches if not more. Apply what you learned in the research phase to your sketches. 

If you are working on an historic mural design, try to put yourself in that era or the person’s shoes you are doing the design of. Keep an open mind to new possibilities. Observe the world around you, daydream, and collect inspiration. You might still stick with that first idea, but chances are, you will come up with something even better and usually more original, if you push yourself to think in new ways and explore.

Step 3 - Think about structure and scale

Stay abstract/block-in general composition. This is usually larger than a thumbnail but try not to get pulled into the details.

Basically, this stage involves organizing the loose thumbnail sketches that were produced, into a few more refined overall concepts.

Step 4 - Sketch Comps

Take steps 2 and 3 and flesh out a few comps. These should not be final but should follow specs and be close to finished in terms of look and feel for the major design components. At this point, one of the concepts may be standing out as stronger than the others. Or, each concept might have it's own strong element that can be rolled into the final version.

Step 5 - Finalize Concept

Mock up your concept using Photoshop and/or Illustrator (or a similar program of your choice). Or if you prefer to do things the more traditional way, render the final concept by hand. Most generally, I will use Adobe PhotoShop to superimpose the final design over an image of the actual wall, for the event organizers review.

Ta Da, all done...not so fast!

The design is done, so it's time to celebrate right? Might be a better idea to figure out how to paint it in 3 or 4 days?

I was hoping to actually start showing the design process for the Roger Reiman Mural in this post, but it took a bit more to describe the process than I thought. Once again, my hope is that the new Walldogs might learn some pointers from these posts, enabling them to lead their own project.

As mentioned in an earlier post, Ted Turner is the co-leader on this project. Ted has developed a very unique pinstriping style, and I came across a graphic that reminded me of, " The Zen of Ted."

If he were writing this post, I could imagine him coming up with a similar graphic to easily express everything I just wrote above.....something like this....

In the next post, we will dive into the actual Roger Reiman Mural Design....Thanks for your patience!