Sunday, August 25, 2013

The Elements of Design via Digital Tools (Part 2 - Line)


A.
Line - Engravers are experts with the the design element line.  It is interesting in the engraving above we see the use of line but also point used in series to form lines, illustrating that point, like a pixel, can become all things graphic.

Some of my earliest learning experiences were through the imitation of the old masters. The German artist Albrecht Durer was one of my favorites. In images labeled A and B to the left and the closeup below I drew Albrecht himself sitting in a melancholy mood contemplating an empty sheet of drawing paper. A technical pencil was used for the engraving-like lines which I loved to 'bend' around cloth and simulate wood grain. It is too bad that my interest ran out before I finished the drawing.

Before I ventured out to do my own composition I did a composite of three of Durer's engravings into one image. A portion of that drawing labeled C is shown below . This drawing is significant personally  because creating it kept me sane during my stint in the service and was largely responsible for my acceptance into Carnegie Mellon's Fine Art program.

Attempting to stay true to an engraving style I only used line in the drawings. (These images are photographs of photographs of the original drawings resulting in a lose of detail.)

B.
 C.
Moving right along into the digital age the image below will be used to create variations illustrating the use of line as a design element. It is the image of the county court house in Vinton Iowa my wife's home town.

 The image processing plug in for Photoshop called Thredgeholder created the image below. I own version 1.2 and the controls are fairly simple. The goal is to reduce the image to black lines which you can later color in to create a watercolor or pen and ink effect.

There are sliders categories of  Luminance, Saturation and Hue, and two sliders per category for Threshold and Contrast. By moving the six sliders you can eliminate color and detail, leaving just  outlines tracing around areas where there are differences of luminance, saturation or hue found by the plug in.

In the case of this image the outlines were created on a separate Photoshop layer. Once the outlines were completed a mask was placed on that layer to allow some of the original image to show through. A layer was also added above the outline layer where some additional wash-like color was brushed on. This plug in is inexpensive and does the job, but as you'll see the Topaz Labs Simplify product is much more versatile.

The next two images were produced from Topaz Simplify. In layman's terms Simplify breaks an image down into pieces based on distinctive areas. Distinctive areas are based on shifts in hue, value, and pattern. You can control through 16 different sliders how Simplify discriminates between one area and the next. This will be illustrated in detail throughout this series. For now, the goal was to produce a line drawing. The 16 sliders are broken into three broad categories of Simplify, Adjust and Edge. The simplify set of sliders control the size of each area (large blocks or small detail). The adjust set of slider control the sensitivity Simplify uses to determine area boundaries based on hue saturation and value changes. The edge set of sliders control how the edges of each area are depicted in the result. 

In this case we wanted a line to be drawn around each defined area. As you can see in image D the large pine trees were filtered out to be one large area and a line drawn around the tree. There are a few areas within the tree where the blue sky shown through and they were depicted as separate areas with lines drawn around them. If strong contrast of value are found then a line would be drawn around them too. The a contrast is strong then the resulting lines are darker.

 D.


In image E all of the 16 sliders were the same as in image D except the type of delineating line was switched from edge to line. The following is from the Simplify manual.

Where the Simplify and Adjust tabs form the “meat” of the image, the Edges tab plays an important role in determining the size, shape, and color of the edges in an image. This can affect the final result in many different ways.

In this case switching to line caused Simplify to 'see' many more boundary areas to draw lines around. Of course using Photoshop you can have the best of both by using Simplify on several Photoshop layers and masking out on each layer what you don't want to see in the results. Through this layering method you can add or subtract to the final image endlessly by processing many different Simplify sessions into one final image.

 E.

In order to produce this type of line drawing the Simplify set of sliders were off by setting Simplify Size, Feature Boost, and the other sliders to 0. In the Adjust section those sliders were set to 0 for Brightness and 1 for all the rest. In the Edge set of sliders Edge Strength was set to 0, Simplify Edge .3, Reduce Weak 10, Reduce Small .2, and Fatten Edge 0.

The Line Type of which there are 8 types was set to Mono Line Fine for image E and to Color Edge Fine for image D. That was the only change between the two images. As stated in the manual the type of edge you choose will significantly change the result especially when you are retaining color in the final image.



In the above image Photoshop produced a nice effect using the menu path Filter, Stylize, Find Edges. However, there are no controls for this filter type. The building is nice, but the tree's color is off as well as color in other areas. The colors could be corrected using adjustment layers, but the general lack of control in Find Edges is very limiting indeed.


The image above was created in Photoshop by more advanced methods as describe by WaterColorGirl on the Wet  Canvas site.

Here is the 5 step process for converting it to outline.
1. Convert the image to grayscale or choose Image-Adjustments-Desaturate.
2. Give the image more contrast by going to Image-Adjustments-Brightness/Contrast and adding contrast.
3. Apply the edge-finding filter by going to Filters-Blur-Smart blur. Set the Radius to 5 and the threshold to 20 and the mode to Edge Only.
4. Invert the lines by going to Image-Adjustments-Invert.
5. Use the eraser tool or a mask to get rid of any extra lines.

This process yields a similar result as image E produced by Simplify. However Simplify has many other advantages as we'll see as we develop this image into its final form in future posts.

There isn't much you can't do with Photoshop if you happen to know all the tricks, and are familiar with obscure uses of features. For example, who would have thought to go to the Smart Blur filter to create an outline of an image? Blurring an image seemingly has nothing to do with abstracting an image to a sharp outline. In step 2 I used Curves instead, because I know that Curves is much more controllable than the Contrast/Brightness adjustment. As a matter of fact some advanced Photoshop uses will use Curves as their main adjustment control for hue shifts, tonality control, saturation adjustments and many others.... but that's the point. You don't need to be a Photoshop nerd (and spend the money) if a smaller set of easily understood controls are present in Topaz Simplify.

That is a major point to this series. Topaz Simplify gives you control of the elements of design in a quick and easily understood format, and at a fraction of the cost, and it is a Photoshop plugin for those that need that level of additional control.

 In this example a group of pink lilies on a green background is used to illustrate how the contrasting foreground and background colors help to generate a nice very nice outline around the flowers.

The pistol and stamen structures have a good contrast of value which adds in their delineation too. An accidental but nice effect is the fact that the lines resulting from hue contrast are stronger than the lines on the interior of the flower where the contrast is mostly value/tone based.

I controlled Simplify's lines by only using the controls in the Edges Type section. All the options were deactivated by setting the sliders to 0 with the exception of Contrast set to 1. Then I did some fine tuning by changing the sliders in Edge Type. Of particular interest to me was the creation of very fine lines on the inner petals which could be controlled by setting Edge Strength to 1.5, then moving the other Edge Type sliders to the desired position. In the case of the image below : Simply Edge .42, Reduce Weak 22, Reduce Small .16, Fatten Edge 0.

Now that I had the sliders in a position where Simplify creates an outline I saved the settings as a preset which can be used in the future to instantly turn any image into a line drawing.



Of course line like point can take many forms. In the image above Painter was used with a brush type that painted a series of lines for each stroke. The best way to use Painter is with a tablet and pen so that naturalistic strokes can be drawn. In fact, without a pen and tablet you lose much of the nuance of Painter's ability to create stokes which actually look like they were done with traditional media; not to mention the expressiveness of the directional movement of the lines which is impossible to capture when using a mouse.

The trees were drawn with a swrilling pen motion and for the rest of the image straight lines were drawn across the page. The brush type was Real Fan Soft from the oil brush collection. The Dab Type  was set to Camel Hair. The Real Bristle set of controls were also used with settings of: Roundness 100%, Bristle Length 5, Fanning 100%, and Height 85%.

I set the background layer to a color I liked so it looked like a sheet of cream orange color paper. When texture is covered as a design element I will use Painter's ability to imitate the paper's tooth or grain which is advantageous when using pastels or chalk 'brushes'.

In the image below Photoshop's Colored Pencils filter was used with settings: Line Width 4, Surface Pressure 7, Paper Brightness 48. Photoshop, of course, also has brushes you can customize, but my personal preference is to turn to Painter when I want a brushed look. The brush variation controls are far superior. It is also a bit harder to get the colored paper look with Photoshop's filters, but could be managed with some advanced layer and masking magic after the Colored Pencil filter is run.

When using Photoshop's filters there it is also much harder to touch things up. If you wanted the same line quality but also wanted to erase or add stronger blue in some areas it would be difficult to imitate the line quality with a Photoshop brush when manually drawing the same type of line. In Painter because you are drawing (via cloning) the image yourself you can easily go over an area filling in more detail or stronger color. You can even erase by simply setting the brush to the same color as the paper, and then drawing lines over an area to effectively 'erase'.



To finish up this post on line here are two very different approaches to the use of line as an expressive element.

The image to the left is by Andrew Gibson. Images like this can be done by using Photoshop's Displacement filter. Just Google Photoshop Displacement Map and you find some good tutorials.

My suggestion is to choose two images that by themselves ares fairly simple. In this case a torso professionally lite with good tonal variation, and the other image is of zebra stripes. If either image is complex with too much detail , messy background, or other distractions, then the combined image will be unrecognizable.





I did this drawing back in the early 80's using pen and watercolor. I usually did drawings like this after too many beers.

I can recall from my Carnegie-Mellon days long discussions about the confidence of the line. That is, an artist should draw with little hesitation shown in the 'mark'. It should be in a free flowing style.

I agree to an extent that an artist should be confident is laying down their image. It shows a definite maturity and clarity of inner vision of what should be placed on the page and how. But that's when the drawing is somewhat about expression.

The first few images of this post come from a different place and different purpose... and there we go again about purpose (see past posts).

In the next post of this series we will explore shape as a design element. 

No comments:

Post a Comment