FA27 Digital Design Professor Tom Klinkowstein fatik@hofstra.edu https://fa27fall2019.home.blog/ Assignment Five Designing a logo in Illustrator and then applying that logo in a functional context. Software Illustrator

Deliverables Exercises files and logo-related files placed in your slide presentation and embedded in your blog via SlideShare. Goals Become aquatinted with introductory Illustrator skills and elemental design approaches needed to create a logo. Prototype showing the created logo on promotional clothing. Complete related exercises. Deliverables PowerPoint presentation with the following added to your presentation and embedded in your blog via SlideShare: -Illustrator exercises -Naming process -Logo design -T-Shirt with logo and image -(optional / extra credit additional applications of the logo) Part 1) Illustrator Exercises

Do the following exercises and post to the slide file, one exercise per slide. There is a simple open-source tutorial url associated with most exercises. Note that some of the tutorials may show an older version of Illustrator than you are using. While the appearance of the software interface may vary a bit, the action will be essentially the same. Do the exercises in the order below (they progress in difficulty). You may also search YouTube and Vimeo for other tutorials regarding tools or tasks. Work on all exercises at 4 x 4 inches (File>New>Width 4 inches, Height 4 inches and will indicate Custom>OK). Save all exercise files as Adobe pdf.

After you complete each exercise, place that file in the PowerPoint file with the appropriate sub-header in the upper left-hand corner as in the example below. One exercise image per slide with appropriate sub-header. Place the completed exercise as large as possible without crowding the sub-header (the sub-header is the name of the exercise). Example slide (your slide will read “Digital Design”, not “Computer Graphics” in the upper right hand corner):

-- Exercises: *Rectangle Tool Create a square box (hold down the shift key). https://www.youtube.com/watch?v=cNy0V1DO3gM *Fill Color and Stroke Color Change fill and stroke color in the square. http://www.youtube.com/watch?v=tX-I8PvxCTc

*Selection Tool (outlined black arrow) Show proportional change in the square (hold down the shift key to resize the object). http://www.youtube.com/watch?v=z6LvIhJD4OU *Direct Selection Tool (filled in arrow) Grab a point (anchor) in an object (corner of the box for instance) and manipulate that point to (for instance), make one corner not a right angle on a rectangle. *Eraser Tool Erase part of an object. (note: after erasing, with the outline arrow you can move pieces of the rectangle and manipulate it as a separate object) http://www.youtube.com/watch?v=EfHC3uXfVmA&list=PL58B3B602755904F8 *Line Tool Draw a straight line http://www.youtube.com/watch?v=UNkDkc8Mlf0 *Text Tool and Text on a Path Type your name on a straight line and on a curved path in 72pt. type from one of the recommended fonts (see course blog). To type on a path, first create a path with (for instance), the Arc tool. http://www.youtube.com/watch?v=RdqB-iTFTsk

*Blob Brush Tool Place a simple silhouetted photo on the art board and brush around the primary form. http://www.youtube.com/watch?v=ijRNVTUs4f4 *Image Trace Tool Make a simple sketch with a thin Sharpie or similar thin felt tip pen on paper. Or bring in a photo to Illustrator to trace. For tracing a Sharpie sketch: scan the sketch using the scanner (or make a photo of it with your smartphone). Use Image Trace to trace the scanned felt pen sketch and convert to a path.

If tracing a photo: file>place to bring the image into an Illustrator artboard (work area in Illustrator). Select the Sharpie image with the filled-in arrow. Object>Image Trace>Make and Expand https://www.youtube.com/watch?v=oIaNSI_J36Q *Curvature Tool Use the Curvature Pen Tool to draw a curved shape. Fill it with black. arrow) to pull this anchor point inward, creating a triangular shaped element. (No tutorial provided.) *Anchor Point Tool Use the Anchor Point tool (located in the same area as the Pen Tool) to add an anchor point in the middle of one of the vertical paths in a box or other object. Use the Direct Selection tool (open arrow) to pull this anchor point inward, creating a triangular shaped element. (No tutorial provided.) *Effects Round the corners of an object. Effects>Stylize>Round the Corner

-- Optional / Extra Credit: Create exercises for five other Illustrator tools or effects you find. Locate tutorials on your own for that tool and make appropriate slides using the name of that tool or effect as the title on that slide. Part 2) Logo Naming -Create a name for an organization (profit or non-profit) that relates to the personal, social or civic issue you identified in assignment two.

To do this, combine words from existing products or services with words from any of your research sites (from Assignment 2). Place three names of existing products and three words from your research sites on one slide. Label this slide, “Words to Create Organizational Name”. Example:

On a second slide, show how you combined two or more of these and altered it in any other way to create a suitable name.

Write one phrase of sentence that justifies the appropriateness of the new name. Label this slide, “Created Organizational Name”. Example:

Reference Images and Shapes -Find three images relating to your theme where there is a common shape (diagonal, circle, grid, rectangle, arc, etc.). To find images, use keyword(s) taken from your Assignment 2 slides. Choose reference images based on shape rather than what they mean in and of themselves. That is, you should be more interested in finding shapes that are “connotative” (suggestive) rather than “denotative” (literal, specific and factual). Connotative shapes tend to lead to richer results. Don’t choose cartoons or existing logos. Label this slide, ‘’Reference Images”.

In my example, I choose rectangle shapes that are monitors and one piece of African art that is more or less in the shape of a monitor. Example:

Logo Sketching -Make three hand drawn sketches for a simple logo (logo) based on your reference images. Think about the tone and purpose of the organization you are making the logo for. Try to suggest the character of the brand without being literal. Combine elements of your reference images and alter as needed; don’t just replicate the reference images. Given the limited time and the fact that most successful logos are composed of elemental shapes, keep your logo simple, abstract and non-illustrative. Use a medium-tipped Sharpie or similar for the sketches to create broad, simple forms rather than detailed illustrations. A pencil or pen is not recommended. Make photos of the sketches with your phone, crop them in Photoshop and put all six on one slide. Label this slide, “Logo Sketches”

(I’m not providing an example for this slide, but you should create it using the layout example of the previous slide and place that slide right after the Reference Images slide.) Examples of Logos Logos can have many personalities. There is no one aesthetic solution for all logos, but in general, they have little or no detail and will work small or large. You will know a logo is right when you can’t take away anything else. Designers always create a logo first in black and white (and sometimes gray)

and add color later. Example logos Referential (the tree refers to the what this organization does; in this case, a paper company).

Metaphorical (the eye is a metaphor for visual media; TV, Web, etc. of the CBS company)

Abstract (the interleaving look of these shapes refer indirectly, or abstractly to how textiles are made).

Free Form (this is for an advertising agency; the scribbles are free form but relate to what the agency does).

Whimsical (Twitter’s funny bird logo)

Logo Creation Use your sketches as a basis for a new logo. Use the same 4x4 inches artboard (the working space in Illustrator as your file setup). Make the logo 75-90% of the width of the artboard. You may start by placing (File>Place) one or more of your reference images into Illustrator and tracing over it, or simply looking at the reference images and sketches and creating something inspired by them. Make three iterations (versions), and pick one. When you have chosen a final design, do File>Save for Web (or File>Export for Screens). This saves it with a transparent background, making it possible to overlay it on the t-shirt image (see below).

In the first version, I used the monitor/screen reference images as a starting point, then made the four monitor-like shapes with the rectangle tool and rounded the corners. I added a rhino silhouette inside one of the quadrants. I rejected this version as too literal.

Label this slide, “Logo, Version 1” -- I then worked with Effect>Modify>Scribble to make one of the monitor shapes irregular, referencing the irregular shaped edges of the African art in one of my reference images.

I judged this to be successful, but too “busy” (complicated). Label this slide, “Logo, Version 2”

-- I finally decided to eliminate three of the four shapes, leaving only the irregular shaped form.

Label this slide, “Final Logo”. Adding a Color Most logos use only one color. Choose your color based on the appropriateness to your organizational purpose. I picked a red based on a color I saw in some of the images I saw in my Diigo urls from Assignment Two.

Label this slide, “Logo with Color” and in 7 words or less, justify your choice of color. Adding a Logotype

A logotype includes letters, logo does not. They both perform a similar function: to be part (often the most important part) of the visual branding program of a company or organization. They are, “the face” or a corporation / organization. A logotype can stand alone or be paired with a logo. In this case, you will be adding appropriate typography to the logo already created. Choose an appropriate font for the organizational name. Place the name near the logo. In general, it is best to start with the, “classic” fonts. These are the 20 or so fonts (out of tens of thousands) that are most commonly used by professionals. See posted examples of preferred

serif and sans-serif type fonts. The reason these fonts are so successful is that they are elegant, highly readable, work in a large variety of sizes and media (TV, Video, Web, Print, etc.), and do not compete visually with the logo. You may try other fonts as well. In my example, I used Rockford Bold, because it is contemporary and highly legible, attributes that could arguably be right for an organization about technology in developing countries.

Label this slide, “Logo with Typography” and in seven words or less; justify your choice of type. 3) Applying the Logo / logotype to a T-shirt simulation Make photo of yourself from just above the waist up wearing a white t-shirt, one facing the camera and one from the back. Natural light on an overcast day is preferable. Set the camera (smartphone camera or digital camera) to highest quality / largest file size. Do not use a flash. You may have someone help you in making the photo.

Alternately, you may find an existing (high quality) image of a model in a white t-shirt, front and back. -- All the images for step 3 and 4 end up as 10 x 10 in, 150 dpi. Take the background off the image using the techniques you learned in Assignment 3 and

replace it with a light gray one you make with the Paint Bucket tool . If you don’t see the

Paint Bucket, click and hold on the Gradient Tool , where it sometimes sits behind. In Illustrator or Photoshop, place the logo/logotype on the front facing photo. Place the logo/logotype where the pocket would be (upper left on the t-shirt).

Example:

Label this slide, “Front of T-shirt with Logo / Logotype”.

Place one of the final images from Assignment 3 on the back of the t-shirt (the photo of you with your back to the camera). Size the photo, so it takes up approximately 50-65% of the width of the rear-facing t-shirt area. It is often useful to blur the edges of the placed image in Photoshop to give the photo a more natural appearance, simulating it was printed on the t-shirt. It is often also useful to use the blur file (Filter>Blur>Blur), once or twice, so that the image from Assignment 3 appears to have a similar quality to the t-shirt image you are combining it with. (Just do this for the image on the back, not the logo on the front of the t-shirt).

Example:

Label this slide, “Back of T-shirt with Manipulated Image”. 4) Optional / Extra Credit: Apply the logo to one or more other objects environments or structures. Make photos (as high a resolution as possible) of an object, environment or structure where your logo might appear.

You may also find via an image search, up to two existing high-quality (limit the file search to large files only) images of an object, environment or structure. Blur or otherwise eliminate (using Photoshop), any extraneous elements.

Adjust the image(s) for color balance, density, and uniformity. Side or frontal views are best so as to eliminate the need to skew or distort the logo. All the images for step 3 and 4 end up as 10 x 10 in, 150 dpi. Apply the logo / logotype appropriately (consider size, perspective, etc.) to each selected image. Label all the slides for step 4, “Other Application of the Logo / Logotype”. This is an example of how FedEx applies its logo / logotype to their trucks:

-- Related Links to Read http://www.paulrand.design/

http://www.logodesignlove.com/all-about-paul-rand http://www.designboom.com/design/michael-bierut-interview/