Friday, October 30, 2009

CS4-Photoshop: Animated Gif Example

This animated gif file is created in CS4-Photoshop using the Animation Timeline.

Layer opacity and style is animated over 10 seconds.

The file was then exported from Photoshop as a Quicktime video.



Animation:
Window > Animation

1) Click the stopwatch beside the property to insert an initial keyframe.

2) Move the CTI ( Current Time Indicator) to a new time in the timeline and adjust the property settings.
A new keyframe is automatically created at that place in time.

NOTE: You will need at least two keyframes to create an animation.

When you are finished designing your animation, Save for Web
1) Choose GIF
NOTE: Press the play button to play your animation.
2) Save as HTML & images
Photoshop now renders out the animation and the HTML and gif files.

Thursday, October 29, 2009

The Promise of Music is to love and to serve.

The power of the web to animate the universal love in all of us.

Friday, October 16, 2009

Thursday, October 15, 2009

MID-TERM EXAM

Be advised that you are permitted to have written notes in the mid-term exam.

Wednesday, October 14, 2009

Week #6: REVIEW EXAM EXERCISE

This exercise will help you prepare for the MID-TERM EXAM next week, where you will have to build a web site.

This week, the challenge is to create a web site in 50 minutes.

Here is what you will build and post to your site this week:

1) The Root folder will have a folder inside named "ReviewExam".

2) The "ReviewExam" folder will hold the following:
• index.html
• ReviewMenu.html
• trivia1.html
• trivia2.html
• contact.html
images folder ( holding all the slices and pictures)

3) index.html will be the site "splash" page. It will have a link to the ReviewMenu.html and a © message.

4) ReviewMenu.html will be a menu created in Photoshop with UP and OVER (slices) states for the following four menu items: trivia 1, trivia 2, contact, main menu. The "main menu" hyperlink will link to the menu.html page for the course. Name all menu slices, and the header slice. Save the .psd file in the images folder.

5) trivia1.html will contain a picture of an artist/songwriter and a line of text trivia about them. Use an apDiv to hold the picture and text. Have a Hyperlink back to the ReviewMenu.html. Use a class to format the text.

6) trivia2.html will contain a picture of an artist/songwriter and a line of text trivia about them. Use an apDiv to hold the picture and text. Have a Hyperlink back to the ReviewMenu.html.

7) contact.html will contain your name and email link to your address. Also place a picture of yourself at 1000 pixels from the top, with an anchor. Have a hyperlink to the anchor. The picture will also be a hyperlink back to the top of the page. Have a Hyperlink back to the ReviewMenu.html.

IMPORTANT PAGES NOTE:
• ALL pages must contain a wrapper set to 760 width.
• Upload all the files to the Site and hyperlink Week#6 on the menu to the index.html inside the "ReviewExam" folder
• Each page will have a background colour or gradient fill or image (repeat)
• Each page will have a HEADER and a CSS class to format the page header
• Each page will have the © character

UPLOAD:

TIPS:
In Dreamweaver, Use "Save As" when appropriate

REMEMBER YOU HAVE 50 MINUTES TO COMPLETE THE REVIEW EXAM.
HAVE FUN and GOOD LUCK!!!!

Friday, October 9, 2009

HOW TO: Table, Ext. CSS, class...

no audio on this one...

Here's what's included:
• change background color
• add two rows to the table
• add text to a row
• create an external CSS file
• create and define a CSS "class"
• apply a CSS "class" to selected text
• create a content image in Photoshop and save for web
• change a SRC image in Dreamweaver
• Hyperlink menu items to html pages
• use "Save as" to create multiple files

HOW TO: Assign Background Images...

HOW TO: Slice & Divide

Items covered in the video:
• Slicing from guides, and
• dividing slices evenly vertically across.
• Naming slices. The name becomes the filename for the sliced image.
• Saving for HTML and images
• Saving only images
• Saving background images
• PNG-24 file format. Use this for transparency.

Thursday, October 8, 2009

File Formats for Web: JPEG, PNG-24, GIF, PNG-8

You can choose between four formats for the web. Use the following guidelines when choosing the format for your web image:

JPEG In most cases, this is the best format in which to save photographs.

PNG‑24 Like JPEG, this is a good format for photographs. Choose PNG‑24 rather than JPEG only when your image contains transparency. (JPEG does not support transparency; you must fill it with a matte color.) PNG‑24 files are often much larger than JPEG files of the same image.

GIF is the format to use for line art, illustrations with large areas of solid color and crisp detail, and text. Also, if you want to export an animated image, you must use GIF.

PNG‑8 is a lesser-known alternative to GIF. Use it for the same purposes (except animation).

Images in GIF and PNG‑8 formats, sometimes called indexed-color images, can display up to 256 colors. To convert an image to indexed-color format, Photoshop Elements builds a color lookup table. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.

JPEG and PNG‑24 files support 24‑bit color, so they can display up to 16 million colors. Depending on the format, you can specify image quality, background transparency or matting, color display, and the method a browser should use to display the image while downloading.

The appearance of an image on the web also depends on the colors displayed by the computer platform, operating system, monitor, and browser. You may want to preview images in different browsers and on different platforms to see how they will appear on the web.

Reference:
http://help.adobe.com/en_US/PhotoshopElements/8.0/Win/Using/WSCB4EC73C-17F4-4c4d-887D-2E6712FE6E80_WIN.html

PNG or GIF?

TRANSPARENCY NOTE:
GIF and PNG‑8 formats support one level of transparency—pixels can be fully transparent or fully opaque, but not partially transparent.

PNG‑24 format supports multilevel transparency; that is, you can have up to 256 degrees of transparency in an image, ranging from opaque to completely transparent.

FILE FORMATS:
• GIF (stands for Graphics Interchange Format) was developed in the late 1980's and it is still widely used.

• PNG (Portable Network Graphics) was developed around 1995, became a W3C recommendation in 1996, and has been widely implemented in most Web browsers as soon as 1998.


THE PNG ADVANTAGE:
For the Web, PNG really has three main advantages over GIF:

• alpha channels (variable transparency),
• cross-platform gamma correction (control of image brightness) and color correction
• two-dimensional interlacing (a method of progressive display).

PNG also compresses better than GIF in almost every case (5% to 25% in typical cases).

REFERENCES:
http://help.adobe.com/en_US/PhotoshopElements/8.0/Win/Using/WS3089C783-49BC-49c2-910A-D81A858CA3F0_WIN.html

http://www.w3.org/QA/Tips/png-gif

Week#5: IN-CLASS EXERCISE (5%)

Requirements:
Create a six page web site (splash page & five content pages) featuring five of your design works from the past three semesters.
• Each page will have a Nav Bar menu created in Photoshop using guides, slices, and the "divide slice vertically" option. Save the psd on your site.
• Each page will have a gradient fill tiled background image. Save the psd on your site.
• Each page will be linked to an external CSS document, used to format the following description and explanation.
• Each of the five content pages will present one design work, with a description of the design process, tools used and techniques employed in creating the work.
• Explain how each work relates to one of my strengths.
• An opening splash page for the six page site will read: "View Design Portfolio: Examples of Recent Work by YOUR NAME GOES HERE"
• titles for all pages
• meta tags for all pages
• © for all pages

Due date and time is Tuesday October 13, 12:00pm.

Friday, October 2, 2009

Week#4: IN-CLASS EXERCISE (5%)

Week#4: IN-CLASS EXERCISE (5%)
This week we explored creating a site map, image gallery using anchors, and a contact page with a mailto.

For full marks, your week04 site should have the following features:
• site map: links to every page on your site
• CSS .class to format the site map page
• contact information page: including a mailto
• copyright (special character) notice
• image gallery: with three anchored images
• image gallery: images hyperlinked to the #top anchor
• titles on all pages
• week 04 link from the main menu (menu.html) to all three pages

EXAMPLE:
http://www.designportfolio.ca/~graf2024_002/menu.html

Anchors

The image gallery is created with anchors and layers (with an image inside each of them).

Each image is placed in an apDiv that is set to positioning absolute.
This apDiv is placed within the wrapper apDIv1.


From the Window Menu, select the INSERT panel.
To insert an anchor, place the cursor on the page, and select anchor form the Common tab menu.


Placing anchors HOW TO video: