Objective
To learn Photoshop and Dreamweaver production techniques by example. To review basic XHTML and CSS skills by building a Process Page for this class.
Discussion
Of all the ways to create visual emphasis ("focal point"), movement is the most powerful way to catch the eye. Making things move on the web is easy and can be whole lot of fun. But, please learn to use animation with restraint.
The GIF file format can handle simple animated sequences quite easily. Because GIF is a pixel format, file size is an issue. Therefore, when designing GIF animation, keep these limitations in mind:
- keep the dimensions of the animation area small
- limit the number of colors (avoid photos, if possible)
- keep the number of frames to a minimum
In this class, you will be publishing a record of your process for all your projects on your personal process page. For this class, only published projects and assignments will be graded.
Tip: Do not delete any links that you add to your Process Page. Instead, always add new links when making revisions.
Note: To refresh non-looping GIF animation in a browser, press SHIFT+REFRESH (or SHIFT+F5).
Procedure
Create a web page layout in Photoshop. Animate the art and export GIFs. Import the GIFs into Dreamweaver. Add text and styles with CSS. Publish to server. Note: replace bold with personalized info.
Preparing for the exercise
- download starter files
- move files to proper location
- open downloaded PSD in photoshop found in assets folder
- hide unneeded layers
- save as "X1-process.psd" (location=faa999/gds230/assets/exercises)
Laying out the page
- design a background with horizontal bars (for easier tiling)
- type tool: "Jane Smith", change color
(try to keep type area no wider than 500px)
- spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
- new layer "box"
- draw box: modify box with direct select tool
- save
- save as "X1-process-sliced.psd"
- slice tool: slice logo and tile areas
- file > export> save for web > select tile slice "tile.gif" (preset=GIF 32 no dither; images only, selected slice;
location=faa999/gds230/html/process)
Preparing animation art
- save
- save as "X1-process-animated.psd"
- duplicate type layer, hide previous type layer
- layer > rasterize type
- split name into 2 layers: marquee one name
- layer > new > layer via cut
- rename layers "sharp"
- duplicate layers, rename "blurred"
- filter > blur > motion blur (angle=0, distance=10)
- duplicate box layer (2x)
- rotate box slightly on duplicated layers
Animating the art
- reveal only "jane" blurred layer for frame 1
- window > timeline (use frame animation)
- add frame 1, duplicate frame 1
- frame 2: move art off stage left
- swap frames
- frame 1: tween > next frame (2)
- frame 4: hide blurred "jane" layer, reveal sharp layer
- duplicate frame 4
- frame 5: reveal blurred "smith" layer
- duplicate frame 5
- frame 5: move art off stage left
- frame 5: tween > next frame (3)
- frame 9: hide blurred "smith" layer, reveal sharp layer
- duplicate frame 9 (4x)
- frame 10, 12: reveal rotated box layer
- timing:
• frame 5=0.6 sec
• frame 9=1.0 sec
• frame 10, 12=0.2 sec
- play animation
- optimize animation (flyout menu)
- file > save
- file > export > save for web > select logo slice "logo.gif" (preset=GIF 32 no dither; images only, selected slice only;
location=faa999/gds230/html/process)
- drag GIF into a browser window to test
Setting up your content in Dreamweaver
- launch Dreamweaver
- site > new site: site name=gds230;
local site folder=faa999/gds230/html)
- open "index.html"
- select <body> (or cmd+A)
- insert > div: wraparound=yes; id="content"
- change "jane smith" to your name (all occurances)
- add test links "p1/storyboard.jpg" and "p1/keyframes.jpg" (target="_blank")
Inserting the animated GIF
- place cursor at the top of the file
- insert > image > "logo.gif"
Adding CSS
- window > CSS designer: sources:
• attach existing CSS file (+):
"reset.css", "font.css"
• define in page (+): <style>
- window > CSS designer: add selectors (source=<style>):
• #content: layout: margin-right=100px, position=absolute, top=??, left=40%, z-index=1
• body: bg: color=??, URL="images/tile.gif" (repeat-x)
• a: text: color=??, decoration=none
• a:hover: text: decoration=underline
- view > code: note formatting in header
- save; file > preview in browser (opt+F12 and cmd+F12)
Grading
- publish page (see separate lesson)
- keep this page updated with your work as the semester progresses
- your midterm and final grades will be based on what is published on this page (do NOT delete any preliminary materials or in-progress work from this class because your grade will depend on it)
- Extra credit: re-design the animated logo with your own animation
