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!

6/24/09: Retouching Tools, PS Work Due Thursday

Retouching Tools

Use the Grid for better alignment:
>View >Show Grid

Rotate an Image *make sure Background layer is unlocked; unlock by renaming*
>Edit >Transform >Rotate

* Crop Tool -permanently “cuts” image

1.Select Crop Tool and click and drag on your document to make a Selection.

2. With the mouse release, the area outside of the selection will be shaded. This area will be permanently deleted after the edit.

3. Click the check in the Option Bar to accept edit. Document is now resized according to the Crop Tool.

• Healing Brush –cleans up spots (option + click to get source) by picking up a sample
• Spot Healing Brush-removes blemishes and objects, good for quick fixes
• Patch-repairs imperfections in a selected area using a sample; select area and click and drag to match

• Burn Tool-darkens pixels
• Dodge-lightens pixels

• Blur Tool –darkens pixels by blurring hard edges of an image
• Sharpen-sharpens pixels; use sparingly
• Smudge-blurs by “pushing” pixels

Online Tutorial:
http://www.communitymx.com/content/article.cfm?page=1&cid=4799F

Layer Adjustments

Layer Adjustments are built specifically to handle many common photo editing tasks like improving overall contrast in an image, brightening colors, and bringing out detail in the highlights and shadows. Because Adjustments are on their own layer, it is non-destructive (does not affect the image pixels directly).

Open the Adjustments Panel:   >Window >Adjustments
1. Select an Image Layer to be adjusted in the Layers Panel.

2. Select an Adjustment from the Adjustment Panel (ie: Levels). CS4 has a series of pre-set options that you can try.  An explanation of  some of the different types of adjustments are below.

3. Move the sliders and adjust pixel color accordingly. A live preview appears on your Document. Click on the small Arrow on the bottom left of the Adjustment Panel to get back to the main Menu.

4. A NEW Adjustment Layer is created directly above the (selected) Image Layer. Adjustment Layers can be modified, made temporarily invisble, restacked, or deleted.

Commonly Used Layer Adjustments:

>Levels: adjusts highlights, midtones, shadows
>Brightness/Contrast
>Color Balance: change hue and saturation
>Black and White: removes color

In Class Assignment #6 & #7: Images to Retouch

Go to the class server and copy the 2 files  “b&w_fix.jpg” and “color_fix.jpg”. Move them to your Desktop and then to your Photoshop>Assignments folder.

Use the various Retouching Tools (Healing Brush, Patch, Dodge, Burn, etc) and Layer Adjustments to correct these images the best you can.

Save as “yourname_b&w.jpg” and “yourname_color.jpg”

• Finish your Postcard & CD cover

ALL PHOTOSHOP WORK DUE THURSDAY (6/25) FOR STUDENT PRESENTATION. ATTENDANCE IS MANDATORY IN ORDER TO RECEIVE FULL CREDIT.

Due:

1. Flag
2. LyndaBarry
3. Sesame
4. Postcard.psd
5. CD Cover.psd
6. Color retouch
7. B&W retouch

GO TO THE OPEN LAB IN BATMALE #301 IF YOU NEED MORE TIME OUTSIDE OF CLASS.

Extra Credit: Magazine

Design a Magazine Cover for a topic of your choice using the class stock images, images from the web, your own images, or a combination.
Requirements:

• Document Size: 8.5” x 11”
• Resolution: 150
• 4 text layers (merge if more)
• 2 image layers (merge if more) 1 filter -or- layer style
• Layer Adjustment
  
• Save as: “yourname_magazine.psd”
  

Links:

Your Work & Who Owns It

Copyright 101 for Designers

6/23/09: Text Mask

Type Mask Tool: create a Selection based on Text.
1. Select a Layer to mask in the Layers Palette.
2. Select the Text Mask Tool (nested within the Text Tool). Start typing in your document. Same rules apply as the regular Type Tool: highlight to choose font, size, etc…Click check mark in the Options Bar to apply edit. Marching ants appear.
3. Once an area is selected, start editing: add color, delete, paste in an image, etc…You may choose to Inverse the selection and Delete the surrounding section.

In-Class Assignment #5: CD Cover

Design a music CD cover for a real or imagined band or music genre using images from the IDST 120 images folder, the internet, your own digital images and/or a combination. Students will be graded on successful completion of the project, adhering to the listed requirements below. Cds will be due on Photoshop presentation day-this Thursday. DO NOT UPLOAD TO CLASS SERVER UNTIL THURSDAY.

Requirements:
* Document size: 4.75” x 4.75”

5 Layers Total:

* 3 -Image Layers (Merge if using more)
* 2 -Text Layer (Can also use Text Mask. Review today’s link on Typography. Experiment with a few different fonts/sizes before selecting the most suitable style for your design. Merge if using more)
* 1 Filter (minimum)
* 1 Layer Style (minimum)
* save as: yourname_cd.psd

Links to Review:

“Appropriate type strengthens meaning.

Inappropriate type undermines it.”

Online Typography tutorial:
http://www.webmonkey.com/tutorial/Web_Typography_Tutorial_-_Lesson_1