Project Goal: Create a Gif animation that demonstrates, (1) tweening, (2) variations in speed and direction, (3) use of animated graphic or photographic imagery, (4) use of animated text, (4) color cycling, & (5) size transformation.  Gif Animation will be used to supplement the current masthead that is being used within your web site template.

Directions: 

1. Launch Photoshop.  Create a new document that coincides with dimension of your templates masthead. Target the documents resolution at 72dpi.
2. Go to the top of the screen in Photoshop and go Window > Animation.  Be sure to select Frames rather than timeline.
3. Create or import graphics / photographs into document for animation. Create gif transparencies when needed.
4. Consider a variety of "Pans" or movements (left, right, up, down, ). Consider the pace or speed of movement, color cycling, size transformation. 
5. See class demo for animation instructions.
6. When animation is complete, preserve your work as a .psd file.  Save one additional copy as a Gif file.  Go File > Save for Web & Devices > Gif.
7. Once animation is completed, import Gif file into your Root Asset folder.  Update CSS code by swapping out the background image for the new Gif animation file.  Animation can be seen once previewed on a web browser. 

​Objective:
For this assignment, you will be challenged to create a graphic representation of a web template using Adobe Photoshop and reconstructed using CSS and HTML coding language.

Directions:
Step One:  Research a pre-existing web site based on your own personal interests.
Step Two: Using a sheet of paper, create a Wire Frame that indicated how the layout of your web template will be broken up.  At minimum there should be an allocation for (1) mast head, (2) nav bar, (3) content area, (4) footer.  * Be sure to indicate with pixels the width and height of each section created within template.
Step Three: Using Adobe Photoshop create a new document @ "1200px" x "900px".  Resolution should be set to 72dpi.
Step Four:  Based on the wire frame layout and dimensions, use Photoshop to create an original graphic representation of a web template.
Step Five: Individually crop each section of the web template and save into the asset folder located within your sites Root folder.  Save each file as a ".jpg".  
Step Six: Using your knowledge of HTML and CSS, reconstruct individual sections of web template into a single viewable document.