Jim Leggitt – Tradigital Drawing

Jim Leggitt Spotlight

Jim Leggitt – Tradigital Drawing

Jim-Leggitt,-FAIAsmallAbout Jim Leggitt, FAIA

Architect, urban planner, and professional illustrator, Jim Leggitt, FAIA has been practicing for over thirty-five years in Denver, Colorado.  He has conducted drawing seminars and workshops at AIA National Conventions, AIA regional and local conferences, universities, architectural firms and for allied design professionals throughout the country and Canada for over ten years.  Jim has presented at the Google SketchUp 3D Basecamps 2005 and 2008.  He is also an adjunct professor at the University of Colorado Denver College of Architecture and Planning and offers drawing workshops through the college’s Continuing and Professional Education program.  Leggitt authored DRAWING SHORTCUTS: Developing Quick Drawing Skills Using Today’s Technology, first published in 2002 by John Wiley and Sons.  The first edition of DRAWING SHORTCUTS has been adopted by over 50 universities and translated in three foreign languages.  Leggitt has recently completed the Second Edition of Drawing Shortcuts which will be available December 2009. Jim continues to be an advocate of the hand drawing process and promotes the creative integration of digital imaging with traditional visualization techniques.


Tradigital Drawing: A New Visualization Technique

I started using technology in my drawings in 1955 watching a Saturday television show named Learn to Draw, hosted by Jon Gnagy. I set up my Learn to Draw kit and faithfully sketched along with Mr. Gnagy. Another TV show called Winky Dink and You involved drawing directly onto a sheet of clear vinyl that  I stuck to the television screen. I traced images in a “connect the dots” fashion that ultimately revealed an outline of the subject. How cool was that – drawing with technology! I still incorporate machines into my drawing process, now relying on ultra fast computers, color printers, Wacom tablets, high resolution monitors, flat bed scanners, digital cameras and an arsenal of software products offered by Google SketchUp, Adobe, Piranesi, AutoCAD, Form-Z, Autodesk 3ds Max and others.  What has changed in fifty years? Nothing!  I’m still drawing and I’m still enjoying the benefits of technology to assist in my drawing process.  You might say I’m continuing to develop a career in traditional drawing but now incorporate digital tools in my visualization process.  Merging “traditional” methods with “digital” tools and creating “tradigital” drawings.  Let’s talk about four options of Tradigital Drawing that I’ve identified and then explore one in greater depth.  Each option incorporates 3D modeling with SketchUp – my favorite visualization tool!

Option 1: Overlay and Trace Method. This drawing technique begins with a SketchUp model view that has been printed onto 8 1/2 x 11” or 11 x 17” paper.  A sheet of trace is placed over the print and the drawing is produced by simply tracing over the base information from the computer model.  Additional entourage is added during the tracing process. The end product with color added to the original artwork is a drawing that is 100% hand drawn.

Option 2: Simple Composite Method. This drawing technique reduces the amount of hand drawing and incorporates the 3D computer model image directly into the final drawing.  Simply export the SketchUp model view, print it onto a matte finish coated bond paper, then draw directly onto the print adding more linework, color markers and colored pencils.  The end product is a drawing that is 50% computer generated and 50% hand drawn.  The “step-by-step” drawing example I discuss later is an example of this process.


Option 3: Advanced Composite Method. This visualization process involves more computer manipulation than actual hand drawing. Beginning with your exported SketchUp model view, you add photographic content, digital painting, and various effects to the image prior to color printing.  Most of the creative engineering is done by computer and very little hand drawing is involved.  Once the image is printed, a small amount of hand drawing is added to give the image a more authentic appearance.  The final product is 90% computer generated and 10% hand drawn.

Option 4: Digital Hybrid Method. This process is for the most part generated entirely with the computer.  A first phase of 3D modeling – a preproduction phase involves a sophisticated SketchUp model or conversion of the SU model to another rendering program such as Autodesk 3ds Max, Revit, Rhino or other programs. The second rendering phase – postproduction involves a layering of digital imaging, illumination, digital painting and intense image manipulation using Photoshop or software mentioned earlier.  The final product is 100% computer generated.

Each of these Tradigital Drawing options can be effective tools for communicating your design.  Variables such as time, budget, client expectations, and where you are in the design process can determine which option is best to select.  The following “step-by-step” example takes you through the entire process of creating a Simple Composite Drawing.  I selected a cropped portion of the original drawing in order for you to see the steps in greater detail.

Tradigital Drawing “Step-by-step” using the Simple Composite Method

The following Tradigital Drawing was generated for academic purposes and does not represent any actual project.  I built the SketchUp model from components found in the SketchUp 3D warehouse and from FormFonts.  Many thanks to all individuals that may have been responsible for building the original SketchUp components that were assembled to make this model.


Step 1

Step 1: Determine the model view. This 2-point eye-level perspective in the image above was carefully established with very specific sun angles, placement of components, sky color, 3D trees and people.  Foreground trees (not in view) were positioned to create dappled leaf shadows on the steps and ground.  Every component was shifted into an ideal location to support the multiple focal points in the view. The model scene was established with a 45mm focal length and a two-point perspective camera view. Bright clothing colors of the people components were all muted using the materials edit tool. I never accept the colors that are imported with components. I always add transparency to leaves and desaturate bright colors.  Once the model scene was complete, I saved and then began the process of exporting different variations of the model.


Step 2

Step 2: Export a straight linework image. I turned off the sky and shadows and selected the hidden line mode in the style menu.   The displayed edges have no profiles, extensions or other variations – just the basic linework.  Export a TIFF image at 300dpi 12 inches wide. I often will lighten this image in Photoshop depending on the density of linework (too many lines together can get rather black and muddy).


Step 3

Step 3: Export a fineliner image. I opened up the styles menu and selected the fineliner option in sketchy edges.  The rough overlapping linework had a casual hand drawn quality that I incorporate into the final composite image. Export a TIFF image at 300dpi 12 inches wide.  The linework can also be lighten in Photoshop.


Step 4

Step 4: Merge the two linework images. In Photoshop, I combined the straight line image and the fineliner image to create a blended look that has the accuracy of a wireframe but the character of a hand drawn line. When exporting different TIFF images, make sure your dpi and image size options are identical for easy compositing of the various images.


Step 5

Step 5: Export a “no line” image. With shadows and sky turned on, I unchecked “display edges” in the styles menu and exported the edgeless image as a TIFF (remember to have identical dpi and size settings).


Step 6

Step 6: Watercolor filter of the no line image. This step gives the view a “modeled” appearance – specifically adding a slight outline to the shadows.  Save a TIFF copy of the original no line image and apply a Photoshop watercolor filter to the image. Adjust the settings to keep the image as light as possible.  Now you are ready to combine all of the pieces together!


Step 7

Step 7: Composite image. As it implies, merge together three images – the straight linework, the fineliner, and the watercolor filtered image in Photoshop. Save a flattened version of the composite image as a 300dpi TIFF image.  You have one more step before printing – be patient, we are almost finished with the computer manipulation phase.


Step 8

Step 8: Composite image desaturation. Because the image is going to be color printed and enhanced with color markers and colored pencils, it is important to remove some of the root color in the image. Save a new copy of the image and in Photoshop, reduce the amount of color saturation using the hue/saturation tool.  With this image, I left the hue and lightness untouched but adjusted the saturation to a -25 on the sliding bar.  Now the image was ready for color printing.


Step 9

Step 9: Color plotting or printing. Depending on the image size, I either print the image in my studio on an Epson printer (C88 or Photo Stylus 2000P) or outsource the color plotting to a local design firm or reprographics company.  It is very critical to have a high quality plotter and heavy weight coated bond paper.  All printers and plotters have varying color results and it may be necessary to adjust your image lightness levels and color balance to get optimum results. An extra color plot can be a useful practice sheet for experimenting with color markers and pencils.  Now it is time to add the hand drawing character to the image and change it from a computer generated perspective to an authentic work of art!


Step 10

Step 10: Final hand drawing and color. This simple composite method is now 50% completed and it is time for some hand drawn fun.  I have the following graphic products on hand for this final step in the visualization process – Chartpak AD markers, a small assortment of Copic markers, a set of Prismacolor pencils and a good electric pencil sharpener.  There is a specific order in which I work and with good reason. Apply a base of color markers first, then add the linework and hatching using colored pencils.  In this drawing, I added color markers to the building facade, awnings, clothing, tree leaves and pavement.  I did not touch the sky as it was generated in SketchUp. Use only the lightest colored markers you can find and ALWAYS test your colors on an extra plot of the image. Once the marker coloring is complete, begin tracing edges of all objects and buildings with a sharpened black Prismacolor pencil.  Squiggly lines and overlapping end points add to the informal character of the drawing and hide the computer’s straight linework.  The toothy surface of matte finish bond paper accepts prismacolor pencils really well. Create hightlights on window mullions and roofs with a white Prismacolor pencil.  Use different colors to enhance the stone paving, add texture to the building facades and grass and introduce character into the people. A light wash of yellow pencil on tree tops and building faces adds the illusion of sunlight.  Scan the final colored image at 300dpi as a TIFF and compare the final drawing with an earlier computer generated image. The results will amaze you and impress clients!

For more information about Jim Leggitt, FAIA, visit his website: www.drawingshortcuts.com, twitter: http://twitter.com/jimleggitt or blog: http://jimleggitt.typepad.com.  Jim is always looking for creative artists who are also exploring new hybrid drawing methods and would love hearing from you. He can be reached at jim@drawingshortcuts.com.

Jim Leggitt’s tutorials here at SketchUpArtists!

6 Responses to “Jim Leggitt – Tradigital Drawing”

  1. Francie Beaman on October 29th, 2009 7:49 pm

    I would be interested in taking a workshop during the summer to teach my students this method of drawing.

  2. Steven D. Papke on November 1st, 2009 7:14 pm

    Very cool work flow. Love this. May I link this to our news?

  3. admin on November 1st, 2009 9:28 pm

    Yes please do Steven, and thankyou for asking. You can use our contact tab as well for any further requests and they will be dealt with as quickly as possible.

  4. Rohan Wallace on February 4th, 2010 11:50 pm

    I am very impressed with the simplicity and relative ease of which an elegant presentation can be done using this method. Thank you for presenting this info and i look forward to attending your workshop soon.

  5. Bobby W Parker on August 8th, 2010 2:45 am

    Great tutorial! What blend mode, in PhotoShop, are you using to merge your line styles?

  6. Araceli on April 20th, 2021 9:47 pm

    I tried to replicate this process, but the line work is coming through with a white background with black lines. The sky is off, the ground is off and I selected “transparent background” when I imported the 2D image from Sketchup. Has anyone had this same problem?

Got something to say?