:: MULTIMEDIATOOLS::CLASSNOTES

1

CLASS :: 06

03.30

2018 3 Hours

“THE” AGENDA SAVING VECTOR LOGO [Adobe Illustrator] :: File Types: [.ai, .png, .jpg, .gif, .svg] :: Save for Web… :: SVG Web Code [View code, View in Browser] LOGO CREATION [Adobe Illustrator] :: Text Tool [Creating Outlines] :: Type on Path :: Shapes and Pathfinder :: Pen Tool [DEMO] :: Trace a Simple Illustration/Image ONE-ON-1s Mock-Up Fix

:: MULTIMEDIATOOLS::CLASSNOTES

2

SAVING VECTOR LOGO [Adobe Illustrator]

FILE TYPES DESCRIPTION

Adobe Illustrator Format File Extension: .ai

o File format for Adobe Illustrator Files

.ai is the files extension for Adobe Illustrator files. This file format is required for storing and editing your vector-based projects. HOW TO SAVE: File > Save As: Format: Adobe Illustrator Document (ai)

Adobe Photoshop Document Format File Extension: .psd

o File format for Adobe Photoshop Document Files

.psd is the files extension for Adobe Photoshop Document files. Saving your logo in this format is ideal when the vector image will be used in a Photoshop document. In this class, you will use the .psd format for including your vector images in your Photoshop website mock-up HOW TO SAVE: File > Export: Format: Photoshop (psd)

Portable Network Graphic File Extension: .png

Best for Curved/Angled Images with Transparent Background Portable Network Graphics (.png), has 16 million colors and allows an image file to export with an alpha channel. Use .png (PNG-24) when saving images with curved, angled, and irregular edges. The alpha channel (transparency) will allow your image to display flawlessly on any background HOW TO SAVE: File > Export > Save for Web: Format: PNG-24 (for web) File > Export: Format: PNG (png) (for other)

:: MULTIMEDIATOOLS::CLASSNOTES

3

Joint Photographics Expert Group File Extension: .jpg

o Best for Photos and Images with 90 degree edges

Joint Photographics Expert Group (jpeg or jpg) has 16.7 million colors and does not support an alpha channel. Use .jpg when saving photo images with 90 degrees edges. Irregular edged images will export with a white box background.

HOW TO SAVE: File > Export > Save for Web: Format: JPEG (for web) File > Export: Format: JPEG (jpg) (for other)

Graphics Interchange Format File Extension: .gif

o Best for Limited Color Animated Images and Shapes with

limited color + 90 degree edges

Graphics Interchange Format (gif) has up to 256 colors and supports an alpha channel. Use .gif when saving shapes with limited color + 90 degrees edges, and animated images. NOTE: Irregular-edged images are capable of exporting with a transparent background; however, the edges may appear extremely jagged. Opt for .png if this occurs.

HOW TO SAVE: File > Export> Save for Web: Format: GIF (for web)

Scalable Vector Graphics File Extension: .svg

o Best for (+, -) Scaling, Vector Images; Animation;

Transparent Background

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Options for Exporting and Copying generated web code are available in Illustrator Only (at this time)…

HOW TO SAVE: File > Save As: Format: SVG (svg) URL: https://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

:: MULTIMEDIATOOLS::CLASSNOTES

4

SVG OPTIONS:

NOTE: You have the option of copying the code for future use in the web [by clicking the SVG Code… button] OR the option of viewing the file on the web [by clicking the Globe button]

:: MULTIMEDIATOOLS::CLASSNOTES

5

LOGO CREATION [ ADOBE ILLUSTRATOR ]: Better with Experience… Design software programs enable users to create and manipulate digital text and images. Each program provides a plethora of tools; each with a gamut of options. While learning each tool, feel free to experiment with the options. Take note of the options and values most useful to you. Don’t be afraid to try steps not listed in your notes…

Text Tool - Creating Outlines

1. Open New Adobe Illustrator Document 2. Turn on Grid [ Ctrl + ’ ] OR [ command + ’ ] Use as a guide for creating proportioned work 3. Choose the Text Tool [T] 4. Choose Font (Closest Relative to Your Desired Logo Text) 5. Write Text Logo

6. Click Selection Tool (To escape writing the text) 7. Go to Menu Bar > Type > Create Outlines 8. Click Direct Selection Tool [A]:

9. [Click/Select] Blue Anchor Points and Manipulate Shape with Arrow Keys Or Mouse

You may select one anchor point to select OR Drag around multiple anchor points for selection OR Click inside the fill area to select a group (i.e. the letter G) OR Use the Selection Tool or Group Selection Tool to manipulate the entire object

10. File > Save As: Format: Adobe Illustrator (ai) – illustrator document for future edit 11. File > Export…: Format: Photoshop Document (psd) – for your mockup: Go To File > Export > Select Photoshop (.psd) 12. File > Export…: Format: SVG (svg) – for the web:

NOTE: After clicking the Export button, a pop-up window will appear.

Before clicking OK, Click the Web browser (globe) graphic button to preview the svg in a web browser .

After previewing, Click the OK button to save the svg inside Your folder > website > images folder

:: MULTIMEDIATOOLS::CLASSNOTES

6

Text on A Path (Concentric Circle, Custom Curve)

If either you or your future boss believes A logo = A typical seal or patch (with concentric circles and text wrapping around a vortex), then this section is for you: EXAMPLE (Note, this is not an official logo):

1. Open New Adobe Illustrator Document 2. Show Grid [ Menu Bar > View > Show Grid ] 3. Create a Circle with the Ellipse Tool (L) [ Hold Shift + Click and Drag ] 4. Make Fill Color Transparent and Stroke Color Black

5. Cut the Circle Using the Scissor Tool [C] OR [ Look for Eraser Tool – Choice 2 ]:

(Click 2 points you wish to cut away from circle

NOTE: This will create an upper & lower circle

6. Choose Type on Path Tool [T] ( Look for Text Tool – Choice 3 ):

7. Left-Click the Upper Circle Path 8. Select the best font size and color for your logo (in Characters Property Options):

:: MULTIMEDIATOOLS::CLASSNOTES

7

9. Type Your Name/Business Name 10. Adjust the text boundaries [ Hover over the Blue Lines, Click + Drag ]

11. Pull left Blue Line to the Left | Pull right Blue Line to the Right 12. Click Center Paragraph Icon to center your text on the path 13. To adjust position/orientation on path: Go To Menu Bar > Type > Type on Path > Type on Path Options

14. Repeat Steps 6 – 13 for lower text. NOTE: To position text on lower circle You may have to [Check] “Flip” to adjust the lower text 15. File > Save As: Format: Adobe Illustrator (ai): YourInitials_text-on-path.ai 16. File > Save As: Format: SVG (svg): YourInitials_text-on-path.svg 17. File > Export > Select Photoshop (.psd): YourInitials_text-on-path.psd For More Instruction SEE: Title: NSL week 98 Adobe Illustrator CS6 "Type on a Path" By: Sebastian Bleak http://youtu.be/v7YuS8WJ21I

:: MULTIMEDIATOOLS::CLASSNOTES

8

Shapes and Pathfinder

In this session, I’ll demonstrate creating a logo using 3 shapes and intersections using the pathfinder options:

1. Open New Adobe Illustrator Document 2. Create Shape One (Concentric Circle – to represent letter ‘O’):

a. Choose Polar Grid Tool b. Click on Artboard to Activate shape properties c. Enter the following values (Ensure the last two options are checked):

Result of Polar Grid Input

3. Create Shape Two (Half Circle – to represent letter ‘D’) – Using Scissors Tool:

:: MULTIMEDIATOOLS::CLASSNOTES

9

4. Create Shape Three (5-point Polygon – to represent letter ‘M’) – Using Rectangle Tool + Adding Achor Point:

Create Square: [Rectangle+Shift+Click+Drag]

Add Anchor Point to Top Center of Path:

a. Choose Add Achor Point Tool [+]

b. Click Top Center of Square c. Ensure only new anchor is selected (Should be the only Blue Square)

Click Shift + Down Arrow Key to Create an ‘M’ Shape:

5. So far there are 3 shapes:

6. Let’s take a chunk out of that target looking shape for fun 7. Duplicate the ‘D’ Shape: Selection Tool > Click ‘D’ Shape > [Ctrl+C] to Copy > [Ctrl+F] to Paste in Front 8. Move the Duplicated ‘D’ Over the ‘O’ Target:

:: MULTIMEDIATOOLS::CLASSNOTES

10

9. Subtract the Front Shape ‘D’ from the ‘O’: a. Go to Menu Bar > Window > Pathfinder > Ensure both Shapes are selected:

b. Select Minus Front Button 10. View Results & Make Adjustments:

11. File > Save As: Format: Adobe Illustrator (ai): YourInitials_pathfinder.ai 12. File > Save As: Format: SVG (svg): YourInitials_pathfinder.svg 13. File > Export > Select Photoshop (.psd): YourInitials_pathfinder.psd

:: MULTIMEDIATOOLS::CLASSNOTES

11

Pen Tool & Working With Paths [DEMO]

1. Open New Adobe Illustrator Document

NOTE: There is no easy recipe for the Pen Tool, just practice ☺ and master how to: 2. Create a Shape with The Pen Tool (P)

The Pen Tool creates a line between points. : To create a point, Left-Click ONCE and Release; Repeat until shape is complete To create 90º & 45º lines & angles Hold Shift + Left Click and Release If you Left-Click and Drag Mouse a curved line is created To eliminate the curve, Hit Shift+C, Hover over Anchor Point, & Double-Click

3. Choose Selection Tool [V] and Click the Shape

NOTE: You may transform shape with Transform Controls

4. Choose Direct Selection [A]

5. Select specific points by Holding Shift and clicking Anchor Points OR Select specific points by Clicking and Dragging around Anchor Points Move selected points with arrows and move tool

6. Convert points to curves [ Shift+C ] Hover over an anchor point (an angle icon appears) Click on anchor point (square defining a direction change on a shape) Click on curve controls (circles at the end of lines) & note the new curves behavior Drag curve control points to form a shape

7. Duplicate Shape a. Choose Selection Tool [V] b. Click Shape

c. Click Ctrl + C [ or Edit > Copy ] d. Click Ctrl + F [ or Edit > Paste in Front ]

8. Change the new shape’s color and make the shape larger with Transform Controls 9. Move New Shape to Back [ Right-Click > Arrange > Send to Back ] 10. Create different effects with Pathfinder Tool [ Menu Bar > Window > Pathfinder ]

a. Select Both Shapes b. Select different buttons in the Pathfinder Tool to view effects

11. File > Save As: Format: Adobe Illustrator (ai): YourInitials_pen.ai 12. File > Save As: Format: SVG (svg): YourInitials_pen.svg 13. File > Export > Select Photoshop (.psd): YourInitials_pen.psd

:: MULTIMEDIATOOLS::CLASSNOTES

12

Trace a Simple Illustration/Image

1. Open Adobe Illustrator 2. Go To File > Place… > Browse & Select Your Scanned Image 3. Click Image once to activate Trace Toolbar 4. Go To Menu Bar > Window > Image Trace 5. PRESET MODE: Choose Options that best suit your photo or illustration: Example Below will use “Black and White Logo” Trace Option:

NOTE: This image is being used to show how illustrator can simplify line art… this is not a logo! For artwork in older versions of Illustrator, I typically use a Simple Trace with over 180 Threshold (Balance of whites/blacks). For photographs, I increase/decrease the number of colors, based on the effect wanted. 6. Go To Menu Bar > Object > Expand 7. Path & Achor Points (Shown Highlighted below) may be manipulate with:

a. Direct selection Tool b. Pencil / Smooth Tool c. Pen Tool: Convert anchor, Add/Delete Anchor Points d. Color : Paint Bucket / Eyedropper Tool

8. File > Save As: Format: Adobe Illustrator (ai): YourInitials_imagetrace.ai 9. File > Save As: Format: SVG (svg): YourInitials_imagetrace.svg 10. File > Export > Select Photoshop (.psd): YourInitials_imagetrace.psd

:: MULTIMEDIATOOLS::CLASSNOTES

13

Homework HW

DUE :: 04.06 REVIEW ::

1. Class Notes

2. Watch Video Tutorials : Logo Design, Shapes, Adobe Illustrator

DO ::

1. Complete First Version of Logo [Place in Mock-Up] 2. Final Logo due [ Finals Week 2018 in Website] 3. Ensure All Image Layers in Mock-Up have the correct file extenstion [ .jpg or .png ]

Ensure there is an empty layer in your Mock-Up named default images/ Ensure the file has generated image assets [ File > Generate > Image Assets ] Ensure A folder with the same name as your mock-up has been generated. [In the same location as your mock-up. The folder will be named the same as your mock-up file with the adage –assets on the end of it. Inside of the assets folder should be an images folder]

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING ::

1 Logo [version 1]

2 Completed Mock-Up

3 Ensure Assets Are Generated to an images folder

4 Flash Drive