:: MULTIMEDIA TOOLS :: CLASS NOTES

CLASS:: 05 - 1

03.03
2017

3 Hours

LOGO INSTRUCTIONS
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
SAVING VECTOR LOGO [Adobe Illustrator]
FILE TYPES / DESCRIPTION
Adobe Illustrator Format
File Extension: .ai /
  • 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 /
  • 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)
Joint Photographics
Expert Group
File Extension: .jpg /
  • 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 /
  • 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 /
  • Best for (+, -) Scaling, Vector Images; Animation; Transparent Background

Scalable Vector Graphics(SVG) is an XML-basedvector image format for two-dimensionalgraphicswith 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:
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]
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 > TypeCreate 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 FileExport > 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 > websiteimages folder
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 > ViewShow Grid ]
  3. Create a Circle with the Ellipse Tool (L) [ Hold Shift + Click and Drag ]
  4. Make Fill Color Transparent and Stroke Color Black

  1. 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
  2. Choose Type on Path Tool [T] (Look for Text Tool – Choice 3 ):

  3. Left-Clickthe Upper Circle Path
  4. Select the best font size and color for your logo (in Characters Property Options):
  5. Type Your Name/Business Name
  6. Adjust the text boundaries [ Hover over the Blue Lines, Click + Drag ]

  1. Pull left Blue Line to the Left | Pull right Blue Line to the Right
  2. Click Center Paragraph Icon to center your text on the path
  3. To adjust position/orientation on path: Go To Menu Bar > Type > Type on Path > Type on Path Options
  4. Repeat Steps 6 – 13for lower text.
    NOTE:To position text on lower circle You may have to [Check] “Flip” to adjust the lower text
  5. File > Save As: Format: Adobe Illustrator (ai): YourInitials_text-on-path.ai
  6. File > Save As: Format: SVG (svg): YourInitials_text-on-path.svg
  7. FileExport> 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

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:

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:

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
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:
  1. Create a Shape with The Pen Tool (P)
    The Pen Tool creates a line between points. :
    To create a point, Left-ClickONCE 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
  1. Choose Selection Tool [V] and Click the Shape
    NOTE: You may transform shape with Transform Controls
  2. Choose Direct Selection [A]
  3. Select specific points by Holding Shift and clicking Anchor PointsOR
    Select specific points by Clicking and Dragging around Anchor Points
    Move selected points with arrows and move tool
  4. 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
  5. 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 ]
  1. Change the new shape’s color and make the shape larger with Transform Controls
  2. Move New Shape to Back [ Right-ClickArrangeSend to Back ]
  3. Create different effects with Pathfinder Tool [ Menu Bar > WindowPathfinder ]

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. FileExport> Select Photoshop (.psd): YourInitials_pen.psd
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 > WindowImage 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.
  1. Go To Menu Bar > ObjectExpand
  2. 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. FileExport> Select Photoshop (.psd): YourInitials_imagetrace.psd
HW-5 / Homework
DUE :: 03.10
REVIEW ::
1. Class Notes
2. Watch Video Tutorials : Logo Design, Shapes, Adobe Illustrator
DO::
Complete First Version of Logo [Place in Mock-Up]
SEE HOMEWORK PAGE FOR COMPLETE DETAILS
BRING ::
1 / Logo [version 1]
2 / Corrected Wireframe
3 / Flash Drive

1