We’ll use the “Extras” pages to post bonus instruction and commentary about related topics. These topics either expand upon materials in the book, or address topics that couldn’t be covered in the book because of space limitations.

All “extras” material © Scott Ligon, all rights reserved.

Extra: Typography for the Fine Artist

& Working with Photoshop Type Tools.

After I graduated from college, I got a job in an ad agency and for the next few years I made my living as a Graphic Designer. At one point, I freelanced, three days a week, for The Kennedy Center for the Performing Arts in Washington, DC. I left there to attend graduate school for painting. I remember feeling nervous. I felt like I was taking steps towards doing what I valued but I also felt like I was walking off a cliff, leaving a nice developing career to scrape by on my savings and paint.


I met my wife in graduate school. I learned a lot from my instructor there. I also, recently, had three paintings in an art show at the Kennedy Center’s Terrace Gallery with a posh formal opening and full-color catalogue. Somewhere, some other young designer was typing my name into a layout. I felt vindicated!


Although commercial art wasn’t ultimately what I wanted to devote my life to, it gave me a few important insights.


  1. All art forms are subject to the same fundamental principles of design and the visual language.


  2. All art forms can be used to create works with integrity in design and function.


  3. All art forms are capable of being compromised by allowing anything other than the needs of the piece to dictate content.

  4. When used in a composition, type operates under the same principals as any other design element.

Too many artists don’t understand this last fact. They treat type as something stuck onto the composition as an afterthought. Artists that have a great understanding of composition and structure will damage their presentations by placing type randomly on top of a composition and ignoring the principles of the visual language they’ve worked so hard to master.


This instructional “extra” is about working with type. It covers the Type Tools in Photoshop. It talks a little about InDesign, Adobe’s design program. It addresses some specific visual guidelines about working with type. It talks about using typography in book art. It offers advice on the preparation of promotional materials for the artist. Learning to work with type as a design element will give your promotional materials a professional appearance and give you a head start over all those artists who just randomly plopped their type on top of their beloved art.



typefaces


TYPOGRAPHY IN DOCUMENT DESIGN. THE “FRY-HAT” IS CONSTRUCTED BY ARTIST MOLLY SHELDON AND MODELED BY THE AUTHOR. PHOTO BY IAN HINKLE.


Headline.


In document design, a headline is the large phrase that either announces the subject or says something evocative to pique the interest of the viewer. It’s usually large and often at the top of the page. A headline, for our purposes, is typography is that is large enough that the letters effectively serve as individual design elements.


Great care should be taken to visually unify the headline type with images and other elements in the composition through the use of related color, value, shape, line and texture.


Headline type and images can also be unified by overlapping them. Making images partially visible through semi-transparent type is another possible method for unifying type with other elements.

Type and image can be unified by matching the general feeling, quality or emotional association that they evoke.



typefaces


A FEW EXAMPLES OF TYPEFACES THAT EVOKE VARIOUS QUALITIES.


Body Copy.


Body copy is the smaller paragraphs of type found in written material. Body copy is generally too small for the words to be considered as individual design elements. Visually, think of a paragraph of type as a single shape. For compositional purposes, a rectangle of small black type on a white background would be thought of as a single gray rectangle. The black type and white background mix together visually (more or less) to form the equivalent of a general gray tone.


Sub-heads are bolder, possibly larger phrases that can be used to visually divide the body copy, making it both easier to read and more visually appealing. They often describe the topic of the paragraph that follows, helping to organize content and make it easy to locate.


Structure and Clarity.


When working with type, uniform spacing can be used to build compositional structure and purposefulness. When elements are similar or perform similar visual functions, line things up in the same position, left and right, top and bottom. Allow the same amount of space between similar objects unless there is a compelling visual reason not to.


Spacing between type and other elements should be considered a visual theme or set of themes rather than random or merely convenient for any individual element.


Use adequate spacing between type and objects unless it’s part of your theme to have things run right against each other.


Having the type wrap around elements, rather than be confined to regimented rectangles, can help to unify a composition and make it more appealing. Spacing between the object and the wrapped type should be consistent and equal with spacing elsewhere unless there is a compositional reason to change it.


When wrapping text, don’t let a sentence start on one side of the page, be interrupted by an image, and then continue on the other side of the page. Divide the paragraph into two columns of type, one wrapping around the left side of an element, the other wrapping around the right side.




TEXT WRAPPED AROUND AN IMAGE.


Choose consistent color themes and include both type and images in these themes. Just as you would in any other composition, arrange elements for clarity. Make sure type is readable when placed over other visual elements. Make sure light type is placed against a dark background and vice-versa, for readability and visual emphasis.


You can use the position of type to move the eye through a composition. You can position other elements so they direct the eye to a headline or other important typography.


Diagonals create visual movement and can help direct the eye to a compositional focal point. This applies to diagonal type or to diagonal elements interacting with the type.


All visual themes should apply to images and text. Treatment of type should also work in support of the general feeling or emotional quality conveyed by the piece.


A good balanced composition, both interesting and stable, is essential in designs with typography, just as it would be in any other visual work. If you own a copy of “Digital Art Revolution, Creating Fine Art with Photoshop”, read Chapter One: “Understanding the Visual Language” and apply these principles to your type design.


Fonts.


There are countless fonts (typefaces) available, each with their own personality and appropriate function. You can have thousands of typefaces available on your computer with minor expenditure. There are even web sites that offer free downloadable typefaces of varying levels of quality.


Serif or Sans Serif.


serif typefaces


SERIFS ARE THE LITTLE FEET AT THE ENDS OF LETTERS ON SOME TYPEFACES.

SERIF TYPEFACES HAVE THESE LITTLE FEET.



sans serif typefaces



SANS SERIF TYPEFACES DO NOT HAVE LITTLE FEET.




Serif and Sans Serif are the two basic choices in typography. They generally convey opposite

qualities.


Serif Typefaces can appear more elegant, refined, human and subtle.


Sans Serif Type tends to appear more strong, direct, and mechanical. Individual font designs can counteract or modify these qualities to some degree. Big thick Sans Serif Typefaces, with rounded edges rather than square, may appear bold and fun, for instance.


Times and Helvetica.


times typeface


TIMES IS A STANDARD EXAMPLE OF A SERIF TYPEFACE, WITH GOOD CLEAN LINES, CONSISTENT SPACING AND NO UNUSUAL QUALITIES THAT WOULD LIMIT ITS GENERAL USE.



helvetica typeface



HELVETICA IS A STANDARD EXAMPLE OF A SANS SERIF TYPEFACE, ALSO WITH EXCELLENT LINES AND SPACING AND BASIC DESIGN.


You may find great use in some of the many decorative or distinct typefaces that are available. It’s worth noting, however, that with all the possibilities inherent in working with type in Photoshop, you can create an infinite number of personalized typographic variations using only Times and Helvetica or similar basic fonts as a starting point.


Someone else has created the specialty font (which is artwork in itself!). Since many other designers are using the same distinctive font, you might find that you can create work of greater originality by modifying a more basic typeface yourself.


altered type


STANDARD HELVETICA TYPE MODIFIED USING THE LIQUIFY FILTER AND THE BEVEL AND EMBOSS LAYER STYLE (DISCUSSED LATER IN THE INSTRUCTION). I ADDED THE “EYES” WITH THE BRUSH TOOL.


An artist who has developed a distinctive, original voice in his/her art can extend this unique voice to include work with typography. Let’s take a look at some of the Photoshop type tools that can help you do this.


Type Tools in Photoshop.


In the Tools Panel, select the Horizontal Type Tool.
photoshop type tool
  This will be the type tool that you are likely to use the most in your work.


Click on an area and start typing to create a simple headline.


When you have finished typing, hit the “Check”
photoshop icon
on the right side of the Control Panel (near the top of the screen) to render the type on a new vector layer. You can edit the type at any time, just as you would in a word processing program.


You can reposition the headline type with the Move Tool once you have clicked on the “Check” in the Control Panel.


You can click, hold and drag a text box with the Horizontal Type Tool and then begin typing inside this rectangle to create paragraphs of type. Photoshop will make line breaks automatically.


You can reshape your text box at any time by grabbing the squares in the corners or centers of each side of the bounding box around the type. When you reshape the type box, the lines of text will automatically reflow to reflect the new dimensions.


Each time you edit your type you must click on the “Check” in the Control Panel to accept changes or click on the “No” symbol next to it to cancel your current edits. You can't perform any other action until you accept or decline your changes.


If you click and hold on the Type Tool in the Tools Panel, you’ll see these other Type Tool options:


It’s likely that you’ll seldom use the Vertical Type Tool.
photoshop type tool
Generally it’s better to use the Horizontal Type Tool and then rotate the type. It’s easier to read and use as a design element.


The Horizontal Type Mask Tool
photoshop type tool
and the Vertical Type Mask Tool
photoshop type tool
create letter- shaped selection masks. The same result can be achieved by clicking on large type with the Magic Wand Tool and then creating a new layer in which to utilize your selection mask.


Typeface, Size, Style, and Alignment.


Photoshop creates type on a separate vector layer that is fully editable at any time. This enables you to perform basic word processing functions such as changing the size and font of selected words or adding and deleting material.


Font (typeface), size, style, and alignment can all be selected through the Control Panel or through the Character and Paragraph Panels. You can access the Character and Paragraph Panels by going to: WINDOW>CHARACTER or WINDOW>PARAGRAPH.


These panels can also be called up by clicking the Character and Paragraph Panels Icon
photoshop type panel icon
on the right side of the Control Panel.


The Character and Paragraph Panels have features for specific type spacing and detailed modifications.






THE CHARACTER AND PARAGRAPH PANELS CONTAIN OPTIONS FOR WORD PROCESSING.



Type must be highlighted to make many changes to it, just like in a word processor.


Variations in style such as bold, italic and bold italic will only appear in a menu if they exist for that typeface.


Crisp, smooth, etc. are anti-aliasing methods that can help type blend well with other elements by reducing jagged edges. Choices are found in the Control Panel.


Aligning type on the left is easiest to read. Centered type may be best with a small amount of words that are fairly large in size. Centered type is typically used in headlines.


Font color can be changed in the Control Panel or the Character Panel. This will not automatically change the foreground color.


Moving the cursor off the panel turns the cursor into an Eyedropper Tool. You can use this Eyedropper to sample colors from a document, allowing your type to be visually consistent with other elements.


Type Along a Path.


You can create type that flows along a vector path. To create type on a path, simply draw a vector path using a Pen Tool or Shape Tool, click on the path with a Type Tool and begin typing to form words that conform to the path.



photoshop type on a path


Warp Text.


The Warp Text dialogue box has a series of presets that will distort type so that it conforms to preset shapes like arc, bulge, and wave.


Click the Create warped text icon
photoshop warp text
in the Control Panel to call up this dialogue box.



photoshop warp text



THE WARP TEXT PALETTE DISTORTS TYPE IN VARIOUS USEFUL WAYS.


Choose a style from the menu and adjust the bend and distortion sliders to personalize your

type. Make sure your variations are subtle enough to maintain readability.


Remember, your vector type remains fully editable. If you wish to remove your Text Warp, simply highlight the type, and select none from the menu choices inside the Warp Text dialogue box.


Layer Styles and Typography.


Layer Styles work especially well with typography in Photoshop. These vector effects, found under: LAYER>LAYER STYLES, are ideally suited to work with flat geometric elements such as type. These styles can create effects including glows, drop shadows and strokes (outlines) around letters. Layer Style effects are non-destructive. An effect can be edited or deleted at any time.


The “Bevel and Emboss” Layer Style is great for creating three-dimensional shading on headline type or logos. In the Bevel and Emboss dialogue box, adjust the depth and size of the effect until it works well with the size and proportions of your type.



photoshop bevel and emboss


BEVEL & EMBOSS, MY FAVORITE LAYER STYLE!


Near the top of the Layers Panel, directly under Opacity, there is another option: Fill. Changing the Fill settings will adjust the opacity of an image on a layer without affecting the opacity of any Layer Styles or Blending Modes that are associated with it.


Placing Images into Type.


Images and textures can be placed into text. You can accomplish this by creating a clipping mask. To do this, create type that is of sufficient size and thickness to adequately display an image that is placed inside of it. Make sure the image you’d like to place into the type is on a layer directly on top of the type layer. Select the image layer and go to: LAYER>CREATE CLIPPING MASK. Your image should now be masked to conform to the shape of the type on the layer below it. You can hold the shift key and select multiple layers to apply to a clipping mask.



photoshop image in type


A CLIPPING MASK USED TO PLACE AN IMAGE INTO TYPE.


You can create a selection mask and paste an image into your type selection. You can use the Type Mask Tools to create the selection mask or you can use the Magic Wand Tool to select existing type. EDIT>COPY the desired image from any layer on any open Photoshop document. EDIT>PASTE INTO the selected type. A new layer with a clipping mask will be created. You can use the Move Tool to reposition an image inside a clipping mask.


Spell Check.


Photoshop originally had no spell-check. This was a huge discouragement to creating finished type documents in Photoshop. Several years ago, Photoshop acquired this ability. You’ll find it under EDIT>CHECK SPELLING. If you are creating a single-page document with large images and simple text, such as a poster or postcard, you may find that is convenient to create this document entirely in Photoshop.


Adobe InDesign.


Photoshop is excellent for making art out of headline type. It is capable of creating an entire layout but it has several limitations in creating type-based documents. It cannot make a text wrap around an image, for instance.


InDesign is Adobe’s design program. It has a more complete set of tools for dealing with typographic documents, including the creation of multi-page documents, the ability to wrap text around an object and the ability to save multiple sets of complex styles and formatting information. You can create an image in Photoshop and drag it directly into an InDesign document. If you are creating a lot of print documents that contain typography, it would be advantageous to incorporate InDesign into your workflow.


As it is with other Adobe products, you can download a free, fully functional 30 day trial version of InDesign at www.adobe.com.


Typography as Art.


Typography can be used as visual accents or even central themes within your work. It can be readable or obscured. It can function as a narrative or solely as a visual element.


Type can be manipulated as an image with any Photoshop tool. Many tools require that type be rasterized before you can use them. This converts the vector type into pixels. When you rasterize type you gain the ability to use features like liquify or other Photoshop filters, for instance, but you lose the ability to word process. To rasterize, go to LAYER>RASTERIZE>TYPE.


I you wish, you can rasterize a duplicate layer, leaving your original vector layer intact in case you need it later.


The Artist’s Book.


kerry mcalerr-keeler art


PAGES FROM “SUFFERING AND SPIRIT: EMILY DICKINSON & I”, AN ARTIST!S BOOK CREATED BY KERRY MCALEER-KEELER. THE ARTIST DEVELOPED THE TYPE DIGITALLY AND THEN CONVERTED IT TO MAGNESIUM DIES FOR USE IN TRADITIONAL LETTERPRESS PRINTING.


Made as a single art object or reproduced in an extremely limited edition, the Artist’s Book uses visual elements, including text, for expressive purposes. Artist’s Books contain multiple pages in sequential order. They allow the viewer to experience this artwork over time. This can be used to express a more abstract, emotional quality or to convey something akin to a traditional narrative. Printing and binding your digital art into an Artist’s Book is another way of bringing it into the physical realm.


Promotional Material for the Artist.


scott ligon promo design


PROMOTIONAL PACKAGING FOR A SHORT VIDEO WORK BY THE AUTHOR.


If you want people to see your work, you need to support it by creating professional promotional material. You need it in order to be considered for a show. You need it to bring people into the show once you get it and then to give to interested people at your opening.


All materials should be consistent and look like a set rather than random individual items. Each promotional item should have a balanced, functional composition. Take typography, artwork and all other elements into consideration as visual elements. Promotional items should work in support of your art. They should be compatible with its colors and general style but they should be subtle enough to avoid competing with it.


Promotional items may include: packaging, business card, postcard, flyer, poster, artist’s resumé, artist’s statement, stationary, headshot, bio, prints of your artwork and a digital portfolio.


It’s also important to have a website where interested parties may view your artwork instantly, from any location with access to a computer. Design on the website should be consistent with all other promotional materials. A presence on appropriate blogs and social networking sites can be very beneficial as well. Put your website, email address and other contact information on all materials!



View other “extras” pages.

 
Type document

Digital Art Revolution Extra