7/13: Intro to Adobe Flash CS4

Adobe Flash is a multimedia platform commonly used to create animation. Like Illustrator, it is vector-based.  Flash is also used for creating web page components and  integrating video into web pages. Examples: Web banners, Websites, Games, Learning applications, Slideshows, Creating Video Players.

In this class, we will focus on the basic animation aspect.

The CS4 version of Flash offers various approaches to animation;  tutorials reviewed outside of class may be different from class lecture notes.

Main file formats:
“.fla”- Native working Flash file
“.swf”-Flash content viewed in a Flash Player as a “ShockWave Flash” file; a compressed version of the working file

The Principles of Animation tutorial:
http://www.evl.uic.edu/ralph/508S99/index.html

Get Started:
Open the application Abode Flash CS4 :  >Applications >Abode Flash CS4
In the Welcome Window, Select : Create New: Flash File (ActionScript 3.0)
-or-
>File >New: (General tab) Type: Flash File (ActionScript 3.0)
A new document appears

Different Workspace Views Available:
I will be lecturing in ‘Classic’ View

Basic Windows: The Stage, Toolbar, Timeline, & Panels (Properties & Library)

The Stage

The main working area in Flash. The rectangular box is the work space; the surrounding (grey) area is the Scratchpad/Pasteboard.

Modify the Stage: Options include selecting a background color, project dimensions, and Frame Rate-the speed of your movie based on Frames Per Second (FPS).
>Modify >Document

The Toolbar

Similar to vector tools seen in Illustrator. Look to the Properties Panel/bottom of the Toolbar for options.

Selection Tools: Selection, Subselection, Lasso
*Select an item to move, delete, edit, or Convert to Symbol

Painting & Drawing Tools: Line, Pencil, Brush
*Select item with a Selection Tool to modify a path’s Stroke color, located in the Properties Panel -or- bottom of the Toolbar

Shape Tools: Rectangle, Oval, Rectangle Primitive (editable corner radius), Oval Primitive (editable inner radius & angles).
*Select item with a Selection Tool to modify the object’s Fill & Stroke color, located in the Properties Panel -or- bottom of the Toolbar
*Object Drawing Mode (advised)-keeps objects entact; easier to edit and arrange; the button is located at the bottom of the Toolbar
*Merge Drawing Mode-editable overlapping objects; separates fill from stroke;more difficult to apply simple edits and arrangment; this mode is automatically turned on when Object Drawing Mode is off

View Tools: Zoom (In & Out-toggle with ‘Control’ button), Hand

Editing Tools: Eraser (toggle Faucet Mode to erase entire color sections or use as a freehand earser tool), Free Transform (click & drag handles to resize-hold ’shift’ to constrain proportions; rotate; distort option).

Panels: Properties & Library

Click on icons -or->Window >select the panel

Properties Panel-Additional options for the Toolbar, Tweens, Sound…and more!

Library Panel-contains Symbols, images, sound files

The Timeline

Composed of Frames and Keyframes. Multiple Layers are available.

Frames are the “backbone” of your animation, denoting the passage of time.

ie: If your FPS is 12, this means in one second, 12 frames will be displayed.

Frames Per Second (FPS)
Can be altered in Properties Panel “FPS”: #
-or-
>Modify >Document

• Add a Frame to the Timeline :

>Insert >Timeline>Frame -or-  ‘f5’ key

• Delete a Frame from the Timeline:

Control + Click : Remove Frames -or- Shift + ‘f5′ key

Keyframes denote an action taking place; there is a beginning and end. Additonal Keyframes may reside elsewhere in the Timeline wherever an action takes place.

note: creating an Object to the Stage automatically creates a Keyframe.

• Add a Keyframe to the Timeline:

Click on a frame in the desired Layer, >Insert >Timeline>Keyframe -or- ‘f6’ key

• Delete a Keyframe from the Timeline:

Highlight the Keyframe, Control + Click : Clear Keyframe -or- Shift+ ‘f6′ key

• Move a Keyframe in the Timeline:

Highlight the Keyframe, click and drag

Create a New Layer for each Tween: Layers are stackable and read from top to bottom.
The bottom Layer is usually your background, a static image that provides a backdrop for your animation.
Lock Layers that are not being worked on/make them temporarily invisible as needed.

1. In the Timeline, click on “Insert Layer” icon.
2. Name the Layer by double clicking on the title.

• Lock a Layer by clicking on the Lock icon.
• Make a Layer temporarily invisible by clicking on the Eye icon.
• Delete a Layer by highlighting it and clicking the Trash icon.

Create a Symbol:Symbols are objects that have been converted to special containers. Once they have been converted, they reside in the Library Panel. From the Library, you may use a symbol over and over again. To do a Motion Tween, an object MUST be converted to a symbol!

1. Create an object on the Stage.
2. Select the entire object with a Selection Tool.
3. Go to >Modify >Convert to Symbol
4. In the Convert to Symbol box, Give it a name and select Type: “Graphic”
5. Click “OK”
6. The new Symbol appears in the Library Panel (>Window >Library)

Create a Classic Motion Tween:

Motion Tweens are the most common form of animation in Flash. The user creates Keyframes for the primary actions of the Symbol (ie: starting point and ending point) and then Flash fills in the “in-betweens”.

A MOTION TWEEN USES SYMBOLS.

Motion Tweens can move Symbols from one Keyframe to another Keyframe, can change size, alpha %, rotation, etc. Despite minor changes (size or color), the Symbol ultimately stays the same (unlike a Shape Tween).

1. Create & name a New Layer for a Motion Tween. Lock/make invisible other layers as needed. All steps are done within a specific Layer.
2. Create an object on the Stage. Notice a Keyframe (black dot) automatically created in the Timeline.
3. Convert the object into a Symbol (follow “Create a Symbol” Steps 1-6 ).
4. Create a second Keyframe at another point in your Timeline:
Select a Frame (click on the actual frame so that it is highlighted), Go to >Insert >Timeline: Keyframe -or – ‘f6′ key. Notice a second Keyframe (black dot) appears.
5. At the second Keyframe, use a Selection Tool to modify the Symbol on your Stage (ie: place it elsewhere, resize it, rotate it, etc). Click on first Keyframe and next Keyframe to verify the different Symbol modifications.
6. Click on the first Keyframe.
7. Add a Motion Tween:  >Insert >Classic Tween -or- Control + click: Create Classic Tween.  A solid arrow with a blue highlight appears in your Timeline, between the first and second Keyframe.
8. Hit the Return Key to play your animation!

Modify a Motion Tween:
1. Select the Keyframe in the Timeline.
2. Use a Selection Tool to modify the Symbol on your Stage (ie: place it elsewhere, resize it, rotate it, etc). Click on the first Keyframe and second Keyframe to verify the different Symbol modifications.
3. Hit the Return Key to play your animation!

In Class Exercise #1: Motion Tween

* Use some of the tools discussed in today’s lecture to create 4 Motion Tweens, each on a separate Layer (name each layer).

*Do not import any bitmap/vector images into your Flash assignment.

* Include a (static) Background Layer.

* 5 layers total

* Save as “yourname_motion.fla”. Save to your >Flash >Assignments folder

7/9: Dreamweaver Projects due today

• Dreamweaver 3-page website project due today at 3:30pm.

• Have at least one other person QA (test) your website for any mistakes; modify changes before uploading.

• We will be uploading your website to the CCSF Hills Server.  See instructions in the .pdf file found in the class server “ReadWrite” folder.

• When you have successfully uploaded all your pages, check your new CCSF URL to verify that everything is working-no broken links, missing images, etc. Your URL will look something like:   “http://hills.ccsf.edu/~your user name“

• Enter your new CCSF URL in a Word Document. Save it as: “yourname_dreamweaver”  and upload this to the Class Server DropBox. This is what you will hand in for your grade-NOT the actual Dreamweaver folder!

Dreamweaver  Classes at CCSF:

MMSP 130   Multimedia  Process and Production                 3.0 credit

Monday:

Intro to Adobe Flash CS4

7/8 : Dreamweaver continued

Text Pop-Up on Mouseover:

A common part of modern web pages  are those  little text boxes that pop up when moused over. These are generated via the title attribute, written in the code of your Dreamweaver page.

1. Create a link in your Dreamweaver page. See notes  from yesterday.
2. Go into the Code or Split view.
3. Insert the title=”your pop-up content here’ tag within  the a href:

Example:

<a href=”http://www.adobe.com” target=”_blank” title=”Adobe Tutorials“>

4. Save /Preview in the Browser

Slicing Images and Creating Rollovers:

Slices are a way to divide an image up into smaller pieces in Photoshop. These slices are rectangular areas that, when placed in Dreamweaver, become cells in an HTML table that a web browser then pieces back together like a puzzle. Slices allow easy creation of rollovers within an image.

Slices are created using the Slice Tool in PS.

1. Open a image in PS. Check the pixel size and adjust accordingly to one of the generic monitor sizes listed in yesterday’s notes.

2. Use the Slice Tool to ‘cut’ around the area you plan on editing (ie: adding a rollover). The fewer slices the better; slices can only be horizontal!

3. >File >Save for Web and Devices

4. Save as a .jpg or .gif

5. In the “Save Optimized As” window: rename your new sliced file  “____.html” , choose Format: HTML and Images, Settings: Background Image, and Slices: All Slices. Choose “Save”. Make sure the file is saved to your Dreamweaver Root Folder.

6. A new .html file is created with the slices. Open the page in Dreamweaver.

7. Click on a piece of the image that has been sliced. Edit a copy of the slice in Edit: PS. Save this section with a new name.

8. To do a rollover, delete a selection and swap in the >Insert >Image Object: Rollover Image option.

9. Save/Preview in the Browser.

Videos from YouTube:

Insert Youtube video files into your Dreamweaver webpages  by copying & pasting a specific video’s HTML source code.

1. Go to : http://www.youtube.com
2. Search for a video to import (smaller file size better)
3. Drag & Copy (Apple + C) the “Embed” html code for that specific video, located on the right side of the window.
4. Go to Dreamweaver and paste (Apple + V) the HTML in the “Code” -or-”Split” window.
5. Preview it with the “Play” Button in the Properties Inspector

This code is an example from YouTube:

<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/R3fa1KVU4vM&hl=en&fs=1″></param><paramname=”allowFullScreen” value=”true”></param><embed src=”http://www.youtube.com/v/R3fa1KVU4vM&hl=en&fs=1” type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

Open Lab Today:

Continue with your Dreamweaver website project.

Due Thursday for upload to the CCSF server.

7/7: Intro to Dreamweaver CS4

Adobe Dreamweaver CS4: A web developing program known as a WYSIWYG, “what you see is what you get”. Dreamweaver automatically writes HTML code.

Get Started:

Like HTML, you must have a separate “Root folder” (web folder) for all your .html, image, and media files.

1. Create a NEW folder for your Dreamweaver website (>File >New Folder).
2. Place .gif and .jpg images for use; if moving from HTML folder, be sure to make a *COPY* so original HTML files are not disturbed.

Define Your Site:

Before beginning your first page you must “define your site” in Dreamweaver. This tells the program which root folder to point to. You only have to do this once per website.

1. Open the program Adobe Dreamweaver CS4 in the Applications folder. Create a shortcut on your Dock.
2. In the Welcome Screen, select “Create New: HTML”
3. In the new document window, select >Site >New Site
4. In the Site Definition Window, choose the BASIC Tab.
5. Go through the prompts to make sure you are pointing to your Dreamweaver Root folder. Click ‘Done’ when ready. You will see a new blank document.

Main Windows

Document Window: Images and text here. Move your cursor in the Document window and start typing.

Tag Selector (lower left): displays current tag

Document Toolbar (top of page):

* Displays different views: Code, Split, Design. You are able to enter HTML code in these windows at any time.
* TITLE of each page is entered here.
* Preview in Browser button is here.

Properties Inspector:

Options for editing your selected Text, Images, Relative & Absolute Links, Ordered/Unordered Lists. Highlight content with cursor first.

File Panel: Your root folder and corresponding files displayed here.

Modify Page Properties:

Select font, font size, background color, background image, font color, etc.

>Modify  >Page Properties:
* “Appearance” select font, size, text color, background color, background image (repeated or not)
* “Links” select link colors

Visual Guides:

>View: Rulers (inches, pixels)
>View :Grid :Show Grid

Save your Page

>File>Save… point to your Dreamweaver folder. Remember to save your homepage as “index.html”.

Preview your page in the Browser icon (found in the Document Toolbar)

Insert an Image:

Place all .jpg and .gif image files into your Dreamweaver  Root folder.

>Insert >Image: choose a .jpg or .gif in your Dreamweaver folder -or- drag image file from the File Panel.
There are limited options for editing your image in Dreamweaver. Select the image and then look in the Properties Inspector for options like: edit in Photoshop, Optimize, Crop, Sharpen, Brightness and Contrast.

Add a Rollover Image: An image changes when moused over to reveal another image.

>Insert >Image Objects >Rollover Images
“Browse” a .jpg or .gif in your Dreamweaver folder for “Original Image” and “Rollover Image”.

Add an Absolute Link: Link to an outside website.

1. Highlight the text or image you want to link.
2. In the Properties Inspector, see “Link” box

3. Enter the entire URL : “http://www.____.___“

4. Select target: _blank to have the Absolute link open in a new window.

Add an Relative Link: Link to another page within your own website.

1. Highlight the text or image you want to link.
2. In the Properties Inspector, see “Link” box
3. Enter the name of your relative link: “_______.html”
-or-
Click “Browse to File ” icon and point to your .html file in your Dreamweaver folder.
-or-
Click “Point to File” icon and point to your .html file in the Files Panel

Add an Email Link:

>Insert  >Email link : type in your email text (ie: “email” , “contact”) , add your email address in this window.

Tables: Comprised of rows and columns, insert images/text here for consistent placement.

>Insert  >Table : choose parameters…select # rows & # columns
Click and drag on edges of table to resize.

Merge Cells within a Table:
Highlight (by clicking and dragging) the cells you wish to combine.
>Modify >Table >Merge Cells

Add  Rows & Columns:
Highlight an additional row/column
>Insert >Table Objects…Insert Row Above/ Below, Insert Column to the Left/Right…
-or-
>Modify >Table…Insert Row/ Column, Delete Row/Column…

Create an Image Map

1. Create an image in Photoshop or Illustrator. Includes text for anything you wish to link (ie: email/contact, portfolio, about…).

Some common screen (monitor) sizes:

• 640 x 480 pixels
• 800 x 600 pixels
• 1024 x 768 pixels

2. Save for Web & Devices….point to your Dreamweaver Root folder. Make sure it is a .jpg or .gif

3. In Dreamweaver, insert the picture >Insert >Image…

4. Click on the image. In the Properties Inspector, select a HotSpot Tool.

5. Click and drag around the area of the image your want to link. A blue box appears.

6. Add the relative or absolute link in the Link box.

7. Test the link in the Browser.

In Class Assignment: Dreamweaver Website

Create a 3-page website using Dreamweaver CS4

• Page 1/homepage : “index.html”

Include an introduction to your website. This could be in the form of an interesting graphic using an image map, a description of the website, and/or anything you think may draw a viewer in!  Include a link to portfolio.html and about.html, a link to your email, along with other requirements listed below.

Page 2 : “portfolio.html”

Include examples of your Photoshop and/or Ilustrator projects. Include a brief description of the tools used, processes, and any additional information about what went into the creation of the work. Include a link to index.html and about.html, a link to your email, along with other requirements listed below.

Page 3 : “about.html”

Include some information about yourself through a bio. This can take the form of a paragraph or  a list of random things you want to share. Include a link to portfolio.html and index.html, a link to your email, along with other requirements listed below.

Include Examples of:

• Compressed images

• Absolute Links that open in a new window

• Ordered or Unordered List
  

As you plan the design and navigation of your website, it may be easier to sketch out your 3 pages on a piece of paper.

We will upload these new pages to the CCSF server on Thursday, when it will “go live”. We will review them from the server at that time.

Links

30 Examples of Attractive Nav

http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/

Web Design Trends of 2009

http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

Color Combo Library

http://www.colorcombos.com/combolibrary.html

I Like Your Colors

http://redalt.com/Tools/I+Like+Your+Colors

7/6: HTML continued

2-Page HTML website is due at the end of class today.

Open your HTML pages in Text Edit to view/edit  your code:

Note: Opening the .html files by double clicking on the file will display it as a webpage in the Browser. You will not be able to edit your code if you do this!

1. Open the application Text Edit.
2. Bring in the file you wish to edit:  >File >Open …point to the HTML page in your root folder (ie: “index.html” or “page2.html”).
3. Edit your HTML code while  previewing  changes in a Browser window. Remember to Save (Apple + S) page after each edit.

Preview HTML pages in the Browser :
1. Open a Browser (ie: Firefox -or-Safari) and resize the window to half the monitor.
2. Bring in the file you wish to edit:  >File >Open …point to the HTML page in your root folder (ie: “index.html” or “page2.html”).
3. Remember to Refresh (Apple + R) page after each edit. More HTML Tags:<body background=”______.gif/.jpg”>
use an image as a background instead of a color; depending on the image size, the image will tile.&nbsp
non-breaking space on same line, this tag is not within brackets < >

<p> &nbsp </p>
add this tag to space content down on the page.

<blockquote>
INSERT CONTENT HERE….creates a left and right margin around text content; works best with short paragraphs; a 3-part tag
</blockquote>

Lists: Create numbered/alphabetized lists (ordered lists) or  bulleted lists (unordered lists).

See HTML cheatsheet website for more list tags.

Example of an Ordered List:

<ol type=1> Ordered list, type=numbers, ‘a’ letters, ‘I’ roman numerals

INSERT CONTENT HERE

<li> Insert list item one content here

<li> Insert list item two content here

<li> Insert list item three content here

</ol> Close tag

Example of an Unordered List:

<ul type=”circle”> Unordered list, type=circle, square, disk

INSERT CONTENT HERE

<li> Insert list item one content here

<li> Insert list item two content here

<li> Insert list item three content here

</ul> Close tag

Target tag: Opens a relative link in a NEW PAGE

<a href=”http://www.____.___” target=”blank”>Content </a>

Open Lab Today: HTML website

Create a 2-page website using HTML hand coding based on a topic of your choice.  If you are stumped, create a website for your class projects.

Requirements for Each Page:

• 2 different .jpg or .gif images (4 total)

• 2 Relative Links (index.html page links to page2.html  and back)

• 3 Absolute links (all different; 6 total)

• Email link
  

• Header example

• Emphasis tag example (ie: bold, itallic, etc.)
  

• Ordered/Unordered List example or  Blockquote example

2-Page HTML website is due at the end of class today.

Make a COPY of your html folder, rename it: “yourname_html”. Make sure ALL the files used for your 2 pages are within this folder! Remove any additional files that are not being used.

Place onto the class Drop Box when completed.

HTML Classes at CCSF:

CNIT 131    Internet Basics & Begin HTML

Tuesday:   Intro to Dreamweaver CS4

7/2: Intro to HTML

HTML: “Hypertext Markup Language”; A universal computer language that can be read by all computers connected to a browser. This language allows for the formatting of text, graphics, and other media.

Definitions to be familiar with:

• Browser: A program that can interpret HTML and display a formatted document on the screen. (ie: Safari, Firefox).
• Hyperlinks/Hypertext: Active elements such as text or graphics embedded within a web page’s HTML code that connect (by clicking) to other related web information such as a new web page.
• Tag: A command inserted between the open bracket < > close bracket signs that specifies how a portion of an HTML document is formatted. The backslash before a command </___> indicates a closing tag.
• Domain Name: The name of a website (ie: Apple.com, Yahoo.com).
• Absolute Link: A link to a webpage/website outside of your own site (ie: http://www. ccsf.edu)
• Relative Link: A link to a webpage within your own website (ie: page2.html).
• URL: “Uniform Resource Locator”: the full address of a site or page on the Internet.

IMPORTANT HTML REMINDERS:

• Create a ROOT FOLDER: 1 web folder for ALL html files.  ALL images (.gif & .jpg.) and .html files must be saved here.
• The first page of your HTML page  is always named “index.html”. Most web servers recognize this as the default home page & will load it automatically.
• All web pages in your site will have the file extension “.html”. A common abbreviation of this is “.htm”, which originated with older operating systems. Both forms are widely supported by browsers.
• No spaces in file naming. Use _ if space is absolutely needed.
• Be consistent in your coding (all lower case).
• When previewing your page in the browser, remember to ’save’ (Apple + S) your HTML document after each code change and ‘refresh’ (Apple + R) on the browser.

Get Started

1. Launch the browser (ie: Firefox) and visit your favorite website. You can view the code of any page by going to >View >Page  source

2. Re-size the Browser page to half the computer screen.

3. Open the program Text Edit:  >Applications >Text Edit

***Set Preferences in Text Edit BEFORE opening a new window:

1. >Text Edit >preferences (you only have to do this once)
2. check “plain text”
3. check “ignore rich text commands in HTML files
4. choose “Open : Western (Mac OS ROMAN)”
5. uncheck all other boxes
6. close this window and open a new document (changes do not affect already opened doc.)

ESSENTIAL TAGS and Definitions-(8) Core tags

<html> identifies a text document as HTML.

<head> contains descriptive info about the page, including title and meta tags.

<title> appears in top bar , browser uses this when creating a bookmark.

*INSERT TITLE CONTENT HERE*

</title> close the title tag.

</head> close the head tag.

<body> the main content of your page.

*INSERT TITLE CONTENT HERE*

</body> close body tag.

</html> the last tag of your weebpage, denoting the end.

More tags, to be inserted within the <body>

<body bgcolor=”___insert color name or Hex code #_”>
background color: add a color name such as yellow- or- insert the HEX CODE # . See website on Hex Color Codes below.

<font face=courier size=”__insert #_”  color=”____”>
select font size #1-7, default is ‘3′ and select font color -or- enter Hex Code #

<h3 align=”center”>
creates a header: #1(biggest)-6, alignment can be “center” or “right”, default alignment is left.

<p> your content here </p>
creates a paragraph break between text or images; close the </p> tag on the same line for proper coding.

<br>
creates a line break between text or images.

<hr>
creates a line/horizontal rule.

<img src=”____.gif/.jpg”>
Insert an image that has already been compressed and placed in your Root Folder. File name must be exact. Use only .jpg or .gif. Image file size should ideally be under 25k.

<img src=”____.gif/.jpg”  width=”____”  height=”____”  border=”1″>
alter an image size by including the pixel width/height in this tag -or- alter in Photoshop.

<a href=”http://www._______.___”> INSERT CONTENT such as the name of the website </a>
absolute link/outside website; a 3-part tag. Anchor tags should be on the same line for proper coding.

<a href=”______.html”> INSERT CONTENT such as the name of the page </a>
relative link/links to another page WITHIN  your site; a 3-part tag. Anchor tags should be on the same line for proper coding.

<a href=”http://www.___.__”> <img src= “____.gif/.jpg”> INSERT CONTENT such as the name of the website/webpage </a>
use an image as a link; a 4-part tag.Anchor tags should be on the same line for proper coding.

<a href=”mailto: your email address here”>INSERT CONTENT such as email or contact </a>
email link; this will open the email program installed on your computer. In this classroom, it is the application “Mail”;a 3-part tag.

Emphasis Tags: Add emphasis to specific words/letters; close </> tag to end the command.

<i> INSERT CONTENT </i>

itallic

<b> INSERT CONTENT </b>

bold

<u> INSERT CONTENT </u>

underline

<tt> INSERT CONTENT </tt>

creates teletype; resembles the font Courier

<blockquote> INSERT CONTENT…text will wrap around, including a left and right margin. Works best with short paragraphs </blockquote>

creates a left and right margin around text; works best with short paragraphs.

In Class-Assignment: HTML website

Create a 2-page website using HTML hand coding based on a topic of your choice.  If you are stumped, create a website for your class projects.

Requirements for Each Page:

• 2 different .jpg or .gif images (4 total)

• 2 Relative Links (index page links to page 2  and back)

• 3 Absolute links (all different; 6 total)

• Email link
  

• Blockquote example

• Header example

• Emphasis tag examples

Links:

Basic Website Design Tutorial

http://library.albany.edu/imc/webdesign/

HTML Cheatsheet

http://www.webmonkey.com/reference/HTML_Cheatsheet#Basic_Tags

Online HEX Color Codes

www.webmonkey.com/reference/Color_Charts

Web Safe Fonts

http://web.mit.edu/jmorzins/www/fonts.html

7/1: Pen Tool/Exercise, Illustrator Projects due THURSDAY

Illustrator Logo/Business Card  project & Pen Tool Exercise

Due beginning of class Thursday for Student Presentation.

1. Logo/Business Card:  should contain 3 Artboards: Logo design #1 , Logo design #2 , Selected logo in a Business Card.

2. Delete/make invisible all your Scratchpad ideas.

3.Name it: “yourname_logo.ai”.

4. Make a copy of the file and place it in the class Dropbox by 3pm.

————————————————

The Pen Tool-

Unlike the Brush or Pencil Tool which are freehand, the Pen Tool creates paths, points, and bezier curves through careful manipulation of “handles”. Imagine  a complex “connect the dots”. It takes some getting used to, but with practice the Pen Tool will give you  more control over your vector objects.

Use with:

• Direct Selection Tool
• Convert Anchor Points Tool (nested in Pen Tool)

Get Started:

Draw a Straight Line-
The simplest path you can draw with the Pen tool is a straight line, made by clicking the Pen tool to create two anchor points. By continuing to click, you create a path made of straight line segments connected by corner points.

Draw Curves-
1. Select the Pen tool with a Stroke color, no Fill.
2. Position the Pen tool where you want the curve to begin and click your mouse. The first anchor point appears.
3. Move your mouse to another spot, click and drag to set the slope of the curve segment you’re creating (you will see the “handles”).
4. Release the mouse button.
5. Use the Direct Selection Tool and Convert Anchor Points Tool to modify the handles.

• Add additional Points by using the Add Anchor Point Tool (looks like a Pen with a Plus sign, nested in Pen Tool)

• Subtract Points by using the Delete Anchor Point Tool (looks like a Pen with a Minus sign, nested in Pen Tool)

In-Class Exercise #3: Pen Tool
1. Go to the class server and find the Pen Tool Exercise: “pen_tool_exercise.ai“
2. Move a copy (click and drag) to your >Illustrator >Assignments folder.
3. Open the file in Illustrator.
4. Open the Layers Palette.
5. Create/name a new Layer for each item (”Arc”, “Flower”, “Rabbit”, “Sheep”). Keep the Background Layer Locked.
6. Use the Pen Tool and Direct Selection Tool to “trace” each item. Use a different Stroke color for each.
7. Save as “yourname_pentool.ai“

8. When you are done, place a copy in the class Dropbox. Due beginning of class tomorrow.

Links:

Pen Tool Curves cheatsheet:
http://livedocs.adobe.com/en_US/Illustrator/13.0/help.html?content=WS3C6154BD…

Fun Illustrator Project tutorials:
http://www.ndesign-studio.com/resources/tutorials/

Illustrator Classes at CCSF

GRPH 100A – “Beginning Adobe Illustrator”

6/30: Text Tools,Live Paint Bucket,Layers, Effects, Live Trace

Text Tool

Generates Horizontal or Vertical type, use with the Option Bar (choose font style, size, etc.)  Open the Character Panel for further choices (>Window >Character).

• Type Tool: Add Horizontal text and/or Vertical text. Click on document to get flashing curser, start typing.
• Area Type Tool: Fills the inside of an object; Text REPLACES the fill color. Create a object first! Click on document to get flashing curser, start typing.
• Path Type Tool: Fills an object’s path. Text REPLACES the stroke color.Create a path (try line, spiral, arc Tool…) first! Click on document to get flashing curser, start typing. More options found at >Type >Type On A Path >Type On A Path Options

EDIT Text by Breaking the Type  Apart:

1. Create type with the Text Tool.
2. Select Text with a Selection Tool.
3. >Type >Create Outlines
4. You will see each the individual paths/points of each letter. Edit as you would any vector object.

Live Paint Bucket Tool

Select parts of overlapping objects and fills in with color. Must select object with DIRECT SELECTION Tool first.

Layers

Open the Layers Panel: >Window >Layers
Each vector object is automatically placed in its own Path Layer, all are grouped in one “main” Layer. See below for options to group into new Layers.

Select a Path Layer by clicking the button (not just highlighting) to the right of the Path Layer name. Notice the vector object highlighted in the document.

Layer options include:

• Name/Re-name-double click on the Path Layer text to rename.
• Stacking/ Re-stacking- click and drag on the Path Layer. “Reads” from top to bottom. Changes made using >Object >Arrange: Bring to front, send to back, etc. are reflected in the order of the Path Layers.
• Delete-drag to Trash icon at bottom of Layers Palette-NOT in the DOCK.
• Group and place on separate Layers – click on the New Layer icon button at bottom of Layers Palette-or- >Object >Group
• Visible/invisible-temporarily make a Path Layer invisible by clicking on the “eye” icon.
• Lock-click on the “lock” (box next to the “eye” icon) to prevent a Path Layer from moving.

Add a Grid

>View >Show Grid

Effects

Cosmetic changes that alter a vector object’s appearance, though the original paths/points remain the same. In other words….looks cool, but harder to edit in the end!
1. Select the object with a Selection Tool
2. >Effects >Choose an effect: Distort and Transform : pucker and bloat, zig zag, etc…

Illustrator Filters-unlike Effects-are for imported bitmap objects.
Effects *rasterize* vector objects when making the cosmetic change. Not adviseable since we want to keep the smooth edges of our design.

Live Trace

Turn an imported bitmap image into vector paths and points. **It is best to modify the original image in Photoshop first; the more clean and simple, the better the vector outcome.

1. >File >Place…navigate the the bitmap image you want to import.

2. The imported bitmap will appear on your AI document with a blue bounding box. This is Live Trace edit mode.

3. In the Option Bar, select a preset (ie: Color 6)

4. Click the Expand Button when ready to accept edit; individual points and paths appear.

5. Edit paths and points with Illustrator Tools to personalize the vector design.

Open Lab:

*Finish* your 2 logo concepts from yesterday before starting the next assignment. Seperate your two designs into their own Layers by copying & pasting. Name these Layers: “Logo 1″ and “Logo 2″

In-Class Assignment #2: Business Card

Create an additional Artboard for a business card. Of the two logos you have designed, select the strongest one.  Ask one other classmate for their opinion. If you are feeling good about *both* your designs, by all means create a  business card for each!

1. Use the Artboard Tool to create a new Artboard within your exisiting document.

Artboard Size: 3.5″ x 2″

2. Select & copy your logo into a NEW LAYER. Name the Layer: “Business Card”

3. Paste your logo into the Business Card Layer.

4. Choose an appropriate font. Add content to your business card such as a name, company name, tagline, title, website, email, and/or other related information you want to add. Use the Grid for better alignment.

Logos/Business Card Assignment will be due mid-class on Wednesday, July 1.

Links to Review:

AI 30 Day tutorial

6/29/09:Intro to Illustrator CS4

Adobe Illustrator: A vector-based drawing program.

Vectors are:
* Based on mathematical formulas
* Composed of Paths and Points-NOT pixels.
* Resolution-Independent (ie: can be resized without losing image quality).
* Generally good for smooth-edged image designs (ie: logos).

Get Started

1. Open the program Adobe Illustrator CS4 in Applications Folder and/or make a shortcut to the Dock
2. A pop-up menu appears asking for the type of document, choose “Print”. Set specific document size dimensions here (choose: inches) or select a default size.

*A new option in CS4 is multiple Artboards. This feature allows numerous artboards within the same document; excellent for placing vector designs in multiple document sizes (ie: place a logo in a business card and a letterhead). Artboards can be edited with the Artboard Tool found in the Toolbar.

3. In the new window you will see an “Artboard”, the main (printable) work area. Outside is  the Canvas “scratch pad” area that is saved with your files, but not printable.

Vector Objects must be Selected in order to be modified/edited!

• Use a Selection Tool from the Toolbar
• Deselect a vector object to move forward

DESELECT a Vector object:

Use a Selection Tool to highlight the Vector object >Select >Deselect
-or-
shift + command + A
-or-
Click outside of the Vector object with a Selection Tool

The Toolbar

Note:

*There are additional Tools nested within other Tools. Click on the flyout tab to keep a Tool menu open.
* Extra options for each Tool can be found by double clicking on the Tool icon itself.
* The Options Bar and Panels may also provide additional options, depending on the Tool.

Selection Tools:
* Selection (black arrow): chooses entire object with a bounding box, able to move object, resize, edit color….
* Direct Selection (white arrow) : chooses more specific paths and points of an object (click on object edge to get “white” anchor points to manipulate by clicking and dragging).

Drawing Tools:
* Shape: Rectangle, rounded rectangle, elipse…
* Line, Arc, Spiral…

Colors:
Each vector object can have a fill (inside) color and/or stroke (outside) color.

Stroke: the outline of a object.

Edit Stroke point size in Option Bar   -or-
Stroke Palette (Window >Stroke…Options for Stroke Weight, Dashed Stroke, Round Joint, etc.)

Select a Fill/Stroke Color from the Color Boxes at the bottom of the Toolbar – or -
Open the Color Palette (>Window >Color)

Eliminate a Stroke or Fill:  Select the Stroke or Fill box in the Toolbar to bring it forward. Select the “None” Box.

An object must have *either* a Stroke -OR- a Fill!

Gradient Fill: Click the center Gradient Box -located below the Fill/Stroke Color Boxes, next to “None” Box.

Create your own Gradient combination with the Gradient Palette (>Window >Gradient) and the Swatches Palette…drag a swatch into the Gradient spectrum.

Reshaping Tools:
* Warp/ Bloat

Slicing and Cutting Tools:
* Eraser/ Scissors/Knife-separates paths

Painting Tools:
Use with Brushes Palette (>Window >Brushes). Brushes appear as Strokes on a vector object and can be modified as long as the vector object is selected. Try using a WACAM tablet if you are intereste in freehand drawing.
* Brush-freehand drawing tool, creates a stroke with no fill
* Pencil-freehand drawing tool, creates a stroke with no fill

*Blob Brush -new in CS4, this brush creates a stroke *and* a fill

Arrange overlapping Objects
Select the Vector object with a Selection Tool.
>Object >Arrange : Bring to front, send to Back, etc…

Moving and Zooming Tools:
* Zoom (magnify glass)-zoom in/out
* Hand-use when zoomed in

In Class Assignment #1: LOGO

Design two different Logos using the Illustrator Tools reviewed from today’s lecture. Include a short list of the Tools used in creating the design.

DO NOT IMPORT ANY BITMAP GRAPHICS INTO THIS PROJECT-VECTORS ONLY!

One of your logos will be placed into a business card tomorrow, so don’t add extraneous supplemental information (email, website, etc) unless it is a part of your design.

Requirements:

Create two logo concepts, based on a personal design that symbolizes you.

-or-

Create two logo concepts, based on one of the following organizations. Check their current logos first and see how you may reinterpret it:

SF SPCA

SF Museum of Modern Art

Golden Gate Park

Creativity Explored

MUNI

Requirements:

• Number of Artboards:  2
• Spacing: 1 inch
  
• Width: 2 inches
• Height: 2 inches
• Save as “yourname_logo.ai”, to your Illustrator > Assignments folder
• Due Wednesday, July 1
  

Logo: A logo is a graphic element, symbol, or icon of a trademark or brand. A typical logo is designed to cause immediate recognition by the viewer. The logo is one aspect of the brand of a company and the shapes, colors, fonts and images are usually different from others in a similar market. Logos may also be used to identify organizations or other entities in non-economic contexts.

Links to Review

• Company Logos and Their Meaning

• Brand New
  

• Ben Newman

• Jeremy Prasatik
  

6/25/09: Student Presentations

All Photoshop work due today at 2pm for student presentations.

Open Lab from 1pm-2pm.

Before submitting your work…
Get feedback from at least one other classmate, check for typos, follow the steps below:

1.Create a new folder called “yourname_ps”

2.Name all your files according to specifications

( ie: “yourname_cd.psd” -correct!  “cdcoverproject61.jpg”-wrong!)

3.Make a COPY of  your project files (>File>Duplicate)

4.Move the following projects to your new folder:

• yourname_postcard.psd

• yourname_cd.psd

• Any  PS work you haven’t already turned in : Flag, LyndaBarry, Sesame

• Extra Credit: Manatees , yourname_magazine.psd

5. Go to the Class Server and place your new folder with all your Photoshop project files into the Drop Box. You will not be able to see the results!

Log-out and move your chair to the front of the room at the start of presentations.

Students should be prepared to discuss their techniques and ideas behind their designs.

Classmates are expected to thoughtfully analyze the work that is presented and provide feedback, ask questions, and provide constructive criticism.

Presentations are required from each student to received full credit for all Photoshop projects.

More Photoshop Classes at CCSF:

GRPH 98A Beginning Adobe Photoshop

PHOT 60A Beginning Photoshop

Monday:

Intro to Adobe Illustrator CS4

2 weeks down…4 more to go!